@wordpress/components/build-module/circular-option-picker/circular-option-picker.mjs.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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB;AAKlC,SAAS,mCAAmC;AAC5C,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AA8CjD,SAAS,OAAO,MAAM,QAAQ,aAAa;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,IAAI,SAAS,MAAS;AAClD,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,UAAU,WAAW,CAAC;AACnC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAuB,sBAAM,4BAA4B,UAAU;AAAA,MACjE,OAAO;AAAA,MACP,UAAU,CAAc,qBAAK,WAAW;AAAA,QACtC,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,KAAK,MAAM;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,eAAe,QAAQ,OAAO;AAAA,IAClC;AAAA,EACF,IAAI,CAAC,MAAM,CAAC;AACZ,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,IACH,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,UAAuB,sBAAM,4BAA4B,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,SAAS,cAAc,sBAAsB,qCAAqC,gBAAgB,EAAE;AAC1G,QAAM,6BAA6B,YAAY,8BAA8B;AAC7E,QAAM,UAAU,cAA2B,qBAAK,OAAO;AAAA,IACrD,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC,IAAI;AACL,QAAM,UAAuB,qBAAK,OAAO;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AACD,SAAoB,qBAAK,4BAA4B;AAAA,IACnD,GAAG;AAAA,IACH;AAAA,IACA,WAAW,KAAK,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": []
}