@wordpress/components 25.6.1 → 25.8.0

package/build/circular-option-picker/circular-option-picker.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
+var _circularOptionPickerContext = require("./circular-option-picker-context");
+var _composite = require("../composite");
+var _circularOptionPickerOption = require("./circular-option-picker-option");
+var _circularOptionPickerOptionGroup = require("./circular-option-picker-option-group");
+var _circularOptionPickerActions = require("./circular-option-picker-actions");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+ *
+ * ```jsx
+ * import { CircularOptionPicker } from '../circular-option-picker';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ currentColor, setCurrentColor ] = useState();
+ * 	const colors = [
+ * 		{ color: '#f00', name: 'Red' },
+ * 		{ color: '#0f0', name: 'Green' },
+ * 		{ color: '#00f', name: 'Blue' },
+ * 	];
+ * 	const colorOptions = (
+ * 		<>
+ * 			{ colors.map( ( { color, name }, index ) => {
+ * 				return (
+ * 					<CircularOptionPicker.Option
+ * 						key={ `${ color }-${ index }` }
+ * 						tooltipText={ name }
+ * 						style={ { backgroundColor: color, color } }
+ * 						isSelected={ index === currentColor }
+ * 						onClick={ () => setCurrentColor( index ) }
+ * 						aria-label={ name }
+ * 					/>
+ * 				);
+ * 			} ) }
+ * 		</>
+ * 	);
+ * 	return (
+ * 		<CircularOptionPicker
+ * 				options={ colorOptions }
+ * 				actions={
+ * 					<CircularOptionPicker.ButtonAction
+ * 						onClick={ () => setCurrentColor( undefined ) }
+ * 					>
+ * 						{ 'Clear' }
+ * 					</CircularOptionPicker.ButtonAction>
+ * 				}
+ * 			/>
+ * 	);
+ * };
+ * ```
+ */
+
+function ListboxCircularOptionPicker(props) {
+  const {
+    actions,
+    options,
+    baseId,
+    className,
+    loop = true,
+    children,
+    ...additionalProps
+  } = props;
+  const rtl = (0, _i18n.isRTL)();
+  const compositeState = (0, _composite.useCompositeState)({
+    baseId,
+    loop,
+    rtl
+  });
+  const {
+    setBaseId,
+    setLoop,
+    setRTL
+  } = compositeState;
+
+  // These are necessary as `useCompositeState` is sealed after
+  // the first render, so although unlikely to happen, if a state
+  // property should change, we need to process it accordingly.
+
+  (0, _element.useEffect)(() => {
+    setBaseId(baseId);
+  }, [setBaseId, baseId]);
+  (0, _element.useEffect)(() => {
+    setLoop(loop);
+  }, [setLoop, loop]);
+  (0, _element.useEffect)(() => {
+    setRTL(rtl);
+  }, [setRTL, rtl]);
+  const compositeContext = {
+    isComposite: true,
+    ...compositeState
+  };
+  return (0, _element.createElement)("div", {
+    className: className
+  }, (0, _element.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+    value: compositeContext
+  }, (0, _element.createElement)(_composite.Composite, {
+    ...additionalProps,
+    ...compositeState,
+    role: 'listbox'
+  }, options), children, actions));
+}
+function ButtonsCircularOptionPicker(props) {
+  const {
+    actions,
+    options,
+    children,
+    baseId,
+    ...additionalProps
+  } = props;
+  return (0, _element.createElement)("div", {
+    ...additionalProps
+  }, (0, _element.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+    value: {
+      isComposite: false,
+      baseId
+    }
+  }, options, children, actions));
+}
+function CircularOptionPicker(props) {
+  const {
+    asButtons,
+    actions: actionsProp,
+    options: optionsProp,
+    children,
+    className,
+    ...additionalProps
+  } = props;
+  const baseId = (0, _compose.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);
+  const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
+  const actions = actionsProp ? (0, _element.createElement)("div", {
+    className: "components-circular-option-picker__custom-clear-wrapper"
+  }, actionsProp) : undefined;
+  const options = (0, _element.createElement)("div", {
+    className: 'components-circular-option-picker__swatches'
+  }, optionsProp);
+  return (0, _element.createElement)(OptionPickerImplementation, {
+    ...additionalProps,
+    baseId: baseId,
+    className: (0, _classnames.default)('components-circular-option-picker', className),
+    actions: actions,
+    options: options
+  }, children);
+}
+CircularOptionPicker.Option = _circularOptionPickerOption.Option;
+CircularOptionPicker.OptionGroup = _circularOptionPickerOptionGroup.OptionGroup;
+CircularOptionPicker.ButtonAction = _circularOptionPickerActions.ButtonAction;
+CircularOptionPicker.DropdownLinkAction = _circularOptionPickerActions.DropdownLinkAction;
+var _default = CircularOptionPicker;
+exports.default = _default;
+//# sourceMappingURL=circular-option-picker.js.map

package/build/circular-option-picker/circular-option-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","isRTL","compositeState","useCompositeState","setBaseId","setLoop","setRTL","useEffect","compositeContext","isComposite","createElement","CircularOptionPickerContext","Provider","value","Composite","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","id","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeState } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} 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\taria-label={ name }\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 */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\tconst rtl = isRTL();\n\n\tconst compositeState = useCompositeState( { baseId, loop, rtl } );\n\tconst { setBaseId, setLoop, setRTL } = compositeState;\n\n\t// These are necessary as `useCompositeState` is sealed after\n\t// the first render, so although unlikely to happen, if a state\n\t// property should change, we need to process it accordingly.\n\n\tuseEffect( () => {\n\t\tsetBaseId( baseId );\n\t}, [ setBaseId, baseId ] );\n\n\tuseEffect( () => {\n\t\tsetLoop( loop );\n\t}, [ setLoop, loop ] );\n\n\tuseEffect( () => {\n\t\tsetRTL( rtl );\n\t}, [ setRTL, rtl ] );\n\n\tconst compositeContext = {\n\t\tisComposite: true,\n\t\t...compositeState,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t{ ...compositeState }\n\t\t\t\t\trole={ 'listbox' }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps }>\n\t\t\t<CircularOptionPickerContext.Provider\n\t\t\t\tvalue={ { isComposite: false, baseId } }\n\t\t\t>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className={ 'components-circular-option-picker__swatches' }>\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}

package/build/circular-option-picker/index.js

@@ -4,146 +4,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonAction = ButtonAction;
-exports.DropdownLinkAction = DropdownLinkAction;
-exports.Option = Option;
+Object.defineProperty(exports, "ButtonAction", {
+  enumerable: true,
+  get: function () {
+    return _circularOptionPickerActions.ButtonAction;
+  }
+});
+Object.defineProperty(exports, "DropdownLinkAction", {
+  enumerable: true,
+  get: function () {
+    return _circularOptionPickerActions.DropdownLinkAction;
+  }
+});
+Object.defineProperty(exports, "Option", {
+  enumerable: true,
+  get: function () {
+    return _circularOptionPickerOption.Option;
+  }
+});
+Object.defineProperty(exports, "OptionGroup", {
+  enumerable: true,
+  get: function () {
+    return _circularOptionPickerOptionGroup.OptionGroup;
+  }
+});
 exports.default = void 0;
-var _element = require("@wordpress/element");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _icons = require("@wordpress/icons");
-var _button = _interopRequireDefault(require("../button"));
-var _dropdown = _interopRequireDefault(require("../dropdown"));
-var _tooltip = _interopRequireDefault(require("../tooltip"));
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
+var _circularOptionPicker = _interopRequireDefault(require("./circular-option-picker"));
+var _circularOptionPickerOption = require("./circular-option-picker-option");
+var _circularOptionPickerOptionGroup = require("./circular-option-picker-option-group");
+var _circularOptionPickerActions = require("./circular-option-picker-actions");
 /**
  * Internal dependencies
  */
-
-function Option({
-  className,
-  isSelected,
-  selectedIconProps,
-  tooltipText,
-  ...additionalProps
-}) {
-  const optionButton = (0, _element.createElement)(_button.default, {
-    isPressed: isSelected,
-    className: "components-circular-option-picker__option",
-    ...additionalProps
-  });
-  return (0, _element.createElement)("div", {
-    className: (0, _classnames.default)(className, 'components-circular-option-picker__option-wrapper')
-  }, tooltipText ? (0, _element.createElement)(_tooltip.default, {
-    text: tooltipText
-  }, optionButton) : optionButton, isSelected && (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.check,
-    ...(selectedIconProps ? selectedIconProps : {})
-  }));
-}
-function DropdownLinkAction({
-  buttonProps,
-  className,
-  dropdownProps,
-  linkText
-}) {
-  return (0, _element.createElement)(_dropdown.default, {
-    className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _element.createElement)(_button.default, {
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      variant: "link",
-      ...buttonProps
-    }, linkText),
-    ...dropdownProps
-  });
-}
-function ButtonAction({
-  className,
-  children,
-  ...additionalProps
-}) {
-  return (0, _element.createElement)(_button.default, {
-    className: (0, _classnames.default)('components-circular-option-picker__clear', className),
-    variant: "tertiary",
-    ...additionalProps
-  }, children);
-}
-
-/**
- *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
- *
- * ```jsx
- * import { CircularOptionPicker } from '../circular-option-picker';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ currentColor, setCurrentColor ] = useState();
- * 	const colors = [
- * 		{ color: '#f00', name: 'Red' },
- * 		{ color: '#0f0', name: 'Green' },
- * 		{ color: '#00f', name: 'Blue' },
- * 	];
- * 	const colorOptions = (
- * 		<>
- * 			{ colors.map( ( { color, name }, index ) => {
- * 				return (
- * 					<CircularOptionPicker.Option
- * 						key={ `${ color }-${ index }` }
- * 						tooltipText={ name }
- * 						style={ { backgroundColor: color, color } }
- * 						isSelected={ index === currentColor }
- * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
- * 					/>
- * 				);
- * 			} ) }
- * 		</>
- * 	);
- * 	return (
- * 		<CircularOptionPicker
- * 				options={ colorOptions }
- * 				actions={
- * 					<CircularOptionPicker.ButtonAction
- * 						onClick={ () => setCurrentColor( undefined ) }
- * 					>
- * 						{ 'Clear' }
- * 					</CircularOptionPicker.ButtonAction>
- * 				}
- * 			/>
- * 	);
- * };
- * ```
- */
-
-function CircularOptionPicker(props) {
-  const {
-    actions,
-    className,
-    options,
-    children
-  } = props;
-  return (0, _element.createElement)("div", {
-    className: (0, _classnames.default)('components-circular-option-picker', className)
-  }, (0, _element.createElement)("div", {
-    className: "components-circular-option-picker__swatches"
-  }, options), children, actions && (0, _element.createElement)("div", {
-    className: "components-circular-option-picker__custom-clear-wrapper"
-  }, actions));
-}
-CircularOptionPicker.Option = Option;
-CircularOptionPicker.ButtonAction = ButtonAction;
-CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
-var _default = CircularOptionPicker;
+var _default = _circularOptionPicker.default;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/circular-option-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_icons","_button","_dropdown","_tooltip","Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","_element","createElement","default","isPressed","classnames","text","Icon","icon","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","CircularOptionPicker","props","actions","options","_default","exports"],"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\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\taria-label={ name }\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 */\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_circularOptionPicker","_interopRequireDefault","require","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_default","CircularOptionPicker","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport CircularOptionPicker from './circular-option-picker';\n\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\nexport default CircularOptionPicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAAA,qBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,2BAAA,GAAAD,OAAA;AACA,IAAAE,gCAAA,GAAAF,OAAA;AACA,IAAAG,4BAAA,GAAAH,OAAA;AAPA;AACA;AACA;AAFA,IAAAI,QAAA,GAYeC,6BAAoB;AAAAC,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

package/build/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport type CircularOptionPickerProps = {\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { CompositeState } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}

package/build/color-palette/index.js

@@ -12,6 +12,7 @@ var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _dropdown = _interopRequireDefault(require("../dropdown"));
 var _colorPicker = require("../color-picker");
@@ -40,7 +41,7 @@ function SinglePalette({
   colors,
   onChange,
   value,
-  actions
+  ...additionalProps
 }) {
   const colorOptions = (0, _element.useMemo)(() => {
     return colors.map(({
@@ -71,10 +72,10 @@ function SinglePalette({
       });
     });
   }, [colors, value, onChange, clearColor]);
-  return (0, _element.createElement)(_circularOptionPicker.default, {
+  return (0, _element.createElement)(_circularOptionPicker.default.OptionGroup, {
     className: className,
     options: colorOptions,
-    actions: actions
+    ...additionalProps
   });
 }
 function MultiplePalettes({
@@ -83,9 +84,9 @@ function MultiplePalettes({
   colors,
   onChange,
   value,
-  actions,
   headingLevel
 }) {
+  const instanceId = (0, _compose.useInstanceId)(MultiplePalettes, 'color-palette');
   if (colors.length === 0) {
     return null;
   }
@@ -96,17 +97,19 @@ function MultiplePalettes({
     name,
     colors: colorPalette
   }, index) => {
+    const id = `${instanceId}-${index}`;
     return (0, _element.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
     }, (0, _element.createElement)(_styles.ColorHeading, {
+      id: id,
       level: headingLevel
     }, name), (0, _element.createElement)(SinglePalette, {
       clearColor: clearColor,
       colors: colorPalette,
       onChange: newColor => onChange(newColor, index),
       value: value,
-      actions: colors.length === index + 1 ? actions : null
+      "aria-labelledby": id
     }));
   }));
 }
@@ -137,6 +140,8 @@ function CustomColorPickerDropdown({
 }
 function UnforwardedColorPalette(props, forwardedRef) {
   const {
+    asButtons,
+    loop,
     clearable = true,
     colors = [],
     disableCustomColors = false,
@@ -145,7 +150,9 @@ function UnforwardedColorPalette(props, forwardedRef) {
     value,
     __experimentalIsRenderedInSidebar = false,
     headingLevel = 2,
-    ...otherProps
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    ...additionalProps
   } = props;
   const [normalizedColorValue, setNormalizedColorValue] = (0, _element.useState)(value);
   const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
@@ -169,19 +176,44 @@ function UnforwardedColorPalette(props, forwardedRef) {
   // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
   (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0, _i18n.__)('Custom color picker.');
   const paletteCommonProps = {
-    clearable,
     clearColor,
     onChange,
-    value,
-    actions: !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
-      onClick: clearColor
-    }, (0, _i18n.__)('Clear')),
-    headingLevel
+    value
   };
+  const actions = !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
+    onClick: clearColor
+  }, (0, _i18n.__)('Clear'));
+  let metaProps;
+  if (asButtons) {
+    metaProps = {
+      asButtons: true
+    };
+  } else {
+    const _metaProps = {
+      asButtons: false,
+      loop
+    };
+    if (ariaLabel) {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': ariaLabel
+      };
+    } else if (ariaLabelledby) {
+      metaProps = {
+        ..._metaProps,
+        'aria-labelledby': ariaLabelledby
+      };
+    } else {
+      metaProps = {
+        ..._metaProps,
+        'aria-label': (0, _i18n.__)('Custom color picker.')
+      };
+    }
+  }
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     ref: forwardedRef,
-    ...otherProps
+    ...additionalProps
   }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
@@ -211,12 +243,19 @@ function UnforwardedColorPalette(props, forwardedRef) {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), hasMultipleColorOrigins ? (0, _element.createElement)(MultiplePalettes, {
-    ...paletteCommonProps,
-    colors: colors
-  }) : (0, _element.createElement)(SinglePalette, {
-    ...paletteCommonProps,
-    colors: colors
+  }), (0, _element.createElement)(_circularOptionPicker.default, {
+    ...metaProps,
+    actions: actions,
+    options: hasMultipleColorOrigins ? (0, _element.createElement)(MultiplePalettes, {
+      ...paletteCommonProps,
+      headingLevel: headingLevel,
+      colors: colors,
+      value: value
+    }) : (0, _element.createElement)(SinglePalette, {
+      ...paletteCommonProps,
+      colors: colors,
+      value: value
+    })
   }));
 }