@wordpress/components/build/circular-option-picker/circular-option-picker.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/circular-option-picker/circular-option-picker.tsx"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ListboxCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    baseId,\n    className,\n    loop = true,\n    children,\n    ...additionalProps\n  } = props;\n  const [activeId, setActiveId] = useState(undefined);\n  const contextValue = useMemo(() => ({\n    baseId,\n    activeId,\n    setActiveId\n  }), [baseId, activeId, setActiveId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: className,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [/*#__PURE__*/_jsx(Composite, {\n        ...additionalProps,\n        id: baseId,\n        focusLoop: loop,\n        rtl: isRTL(),\n        role: \"listbox\",\n        activeId: activeId,\n        setActiveId: setActiveId,\n        children: options\n      }), children, actions]\n    })\n  });\n}\nfunction ButtonsCircularOptionPicker(props) {\n  const {\n    actions,\n    options,\n    children,\n    baseId,\n    ...additionalProps\n  } = props;\n  const contextValue = useMemo(() => ({\n    baseId\n  }), [baseId]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...additionalProps,\n    role: \"group\",\n    id: baseId,\n    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {\n      value: contextValue,\n      children: [options, children, actions]\n    })\n  });\n}\nfunction CircularOptionPicker(props) {\n  const {\n    asButtons,\n    actions: actionsProp,\n    options: optionsProp,\n    children,\n    className,\n    ...additionalProps\n  } = props;\n  const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);\n  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;\n  const actions = actionsProp ? /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__custom-clear-wrapper\",\n    children: actionsProp\n  }) : undefined;\n  const options = /*#__PURE__*/_jsx(\"div\", {\n    className: \"components-circular-option-picker__swatches\",\n    children: optionsProp\n  });\n  return /*#__PURE__*/_jsx(OptionPickerImplementation, {\n    ...additionalProps,\n    baseId: baseId,\n    className: clsx('components-circular-option-picker', className),\n    actions: actions,\n    options: options,\n    children: children\n  });\n}\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\nCircularOptionPicker.displayName = 'CircularOptionPicker';\nexport default CircularOptionPicker;"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,kBAAsB;AACtB,qBAAkC;AAKlC,4CAA4C;AAC5C,uBAA0B;AAC1B,2CAAuB;AACvB,iDAA4B;AAC5B,4CAAiD;AA8CjD,yBAA2C;AAC3C,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,MAAS;AAClD,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,UAAU,WAAW,CAAC;AACnC,SAAoB,uCAAAA,KAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAuB,uCAAAC,MAAM,kEAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAc,uCAAAD,KAAK,4BAAW;AAAA,QACtC,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,SAAK,mBAAM;AAAA,QACX,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,UAAU;AAAA,MACZ,CAAC,GAAG,UAAU,OAAO;AAAA,IACvB,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,4BAA4B,OAAO;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,mBAAe,wBAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,MAAM,CAAC;AACZ,SAAoB,uCAAAA,KAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,UAAuB,uCAAAC,MAAM,kEAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAC,SAAS,UAAU,OAAO;AAAA,IACvC,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,qBAAqB,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAS,8BAAc,sBAAsB,qCAAqC,gBAAgB,EAAE;AAC1G,QAAM,6BAA6B,YAAY,8BAA8B;AAC7E,QAAM,UAAU,cAA2B,uCAAAD,KAAK,OAAO;AAAA,IACrD,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC,IAAI;AACL,QAAM,UAAuB,uCAAAA,KAAK,OAAO;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,SAAoB,uCAAAA,KAAK,4BAA4B;AAAA,IACnD,GAAG;AAAA,IACH;AAAA,IACA,eAAW,YAAAE,SAAK,qCAAqC,SAAS;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,qBAAqB,SAAS;AAC9B,qBAAqB,cAAc;AACnC,qBAAqB,eAAe;AACpC,qBAAqB,qBAAqB;AAC1C,qBAAqB,cAAc;AACnC,IAAO,iCAAQ;",
  "names": ["_jsx", "_jsxs", "clsx"]
}