@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Option = Option;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _circularOptionPickerContext = require("./circular-option-picker-context");
+var _button = _interopRequireDefault(require("../button"));
+var _v = require("../composite/v2");
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function UnforwardedOptionAsButton(props, forwardedRef) {
+  const {
+    isPressed,
+    ...additionalProps
+  } = props;
+  return (0, _react.createElement)(_button.default, {
+    ...additionalProps,
+    "aria-pressed": isPressed,
+    ref: forwardedRef
+  });
+}
+const OptionAsButton = (0, _element.forwardRef)(UnforwardedOptionAsButton);
+function UnforwardedOptionAsOption(props, forwardedRef) {
+  const {
+    id,
+    isSelected,
+    compositeStore,
+    ...additionalProps
+  } = props;
+  const activeId = compositeStore.useState('activeId');
+  if (isSelected && !activeId) {
+    compositeStore.setActiveId(id);
+  }
+  return (0, _react.createElement)(_v.CompositeItem, {
+    render: (0, _react.createElement)(_button.default, {
+      ...additionalProps,
+      role: "option",
+      "aria-selected": !!isSelected,
+      ref: forwardedRef
+    }),
+    store: compositeStore,
+    id: id
+  });
+}
+const OptionAsOption = (0, _element.forwardRef)(UnforwardedOptionAsOption);
+function Option({
+  className,
+  isSelected,
+  selectedIconProps = {},
+  tooltipText,
+  ...additionalProps
+}) {
+  const {
+    baseId,
+    compositeStore
+  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
+  const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
+  const commonProps = {
+    id,
+    className: 'components-circular-option-picker__option',
+    ...additionalProps
+  };
+  const optionControl = compositeStore ? (0, _react.createElement)(OptionAsOption, {
+    ...commonProps,
+    compositeStore: compositeStore,
+    isSelected: isSelected
+  }) : (0, _react.createElement)(OptionAsButton, {
+    ...commonProps,
+    isPressed: isSelected
+  });
+  return (0, _react.createElement)("div", {
+    className: (0, _classnames.default)(className, 'components-circular-option-picker__option-wrapper')
+  }, tooltipText ? (0, _react.createElement)(_tooltip.default, {
+    text: tooltipText
+  }, optionControl) : optionControl, isSelected && (0, _react.createElement)(_icons.Icon, {
+    icon: _icons.check,
+    ...selectedIconProps
+  }));
+}
+//# sourceMappingURL=circular-option-picker-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_v","_tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","_react","createElement","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","CompositeItem","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","classnames","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\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 }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _compose = require("@wordpress/compose");
+var _i18n = require("@wordpress/i18n");
+var _circularOptionPickerContext = require("./circular-option-picker-context");
+var _v = require("../composite/v2");
+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 compositeStore = (0, _v.useCompositeStore)({
+    focusLoop: loop,
+    rtl: (0, _i18n.isRTL)()
+  });
+  const compositeContext = {
+    baseId,
+    compositeStore
+  };
+  return (0, _react.createElement)("div", {
+    className: className
+  }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+    value: compositeContext
+  }, (0, _react.createElement)(_v.Composite, {
+    ...additionalProps,
+    id: baseId,
+    store: compositeStore,
+    role: 'listbox'
+  }, options), children, actions));
+}
+function ButtonsCircularOptionPicker(props) {
+  const {
+    actions,
+    options,
+    children,
+    baseId,
+    ...additionalProps
+  } = props;
+  return (0, _react.createElement)("div", {
+    ...additionalProps,
+    id: baseId
+  }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+    value: {
+      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, _react.createElement)("div", {
+    className: "components-circular-option-picker__custom-clear-wrapper"
+  }, actionsProp) : undefined;
+  const options = (0, _react.createElement)("div", {
+    className: 'components-circular-option-picker__swatches'
+  }, optionsProp);
+  return (0, _react.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 = exports.default = CircularOptionPicker;
+//# sourceMappingURL=circular-option-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","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 { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite/v2';\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\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\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\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\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 } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\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,37 @@ 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;
-exports.default = _default;
+var _default = exports.default = _circularOptionPicker.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","exports","default","CircularOptionPicker"],"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,GAAAC,OAAA,CAAAC,OAAA,GAYeC,6BAAoB"}

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 '../context';\nimport type { CompositeStore } from '../composite/v2';\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 CircularOptionPickerCompositeStore = CompositeStore;\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tcompositeStore?: CircularOptionPickerCompositeStore;\n};\n"],"mappings":""}

package/build/clipboard-button/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ClipboardButton;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _button = _interopRequireDefault(require("../button"));
@@ -61,7 +62,7 @@ function ClipboardButton({
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
-  return (0, _element.createElement)(_button.default, {
+  return (0, _react.createElement)(_button.default, {
     ...buttonProps,
     className: classes,
     ref: ref,

package/build/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_deprecated","_button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","classnames","focusOnCopyEventTarget","event","target","focus","createElement","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAMA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAF,sBAAA,CAAAF,OAAA;AAKA,IAAAK,OAAA,GAAAH,sBAAA,CAAAF,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC5C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;IAEA,IAAKV,YAAY,EAAG;MACnBM,SAAS,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,mBAAU,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEtE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACC,IAAA/B,QAAA,CAAAgC,aAAA,EAAC1B,OAAA,CAAA2B,OAAM;IAAA,GACDnB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB;EAAwB,GAE/BlB,QACK,CAAC;AAEX"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_compose","_deprecated","_button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","classnames","focusOnCopyEventTarget","event","target","focus","_react","createElement","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMK,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC5C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;IAEA,IAAKV,YAAY,EAAG;MACnBM,SAAS,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,mBAAU,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEtE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC3B,OAAA,CAAA4B,OAAM;IAAA,GACDpB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB;EAAwB,GAE/BlB,QACK,CAAC;AAEX"}

package/build/color-control/index.native.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _colorCell = _interopRequireDefault(require("../mobile/bottom-sheet/color-cell"));
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function ColorControl({
   withColorIndicator,
   ...props
 }) {
-  return (0, _element.createElement)(_colorCell.default, {
+  return (0, _react.createElement)(_colorCell.default, {
     label: label,
     onPress: onPress,
     color: color,
@@ -26,6 +26,5 @@ function ColorControl({
     ...props
   });
 }
-var _default = ColorControl;
-exports.default = _default;
+var _default = exports.default = ColorControl;
 //# sourceMappingURL=index.native.js.map

package/build/color-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colorCell","_interopRequireDefault","require","ColorControl","label","onPress","color","withColorIndicator","props","_element","createElement","default","_default","exports"],"sources":["@wordpress/components/src/color-control/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACV,UAAA,CAAAW,OAAS;IACTP,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAI,QAAA,GAEcT,YAAY;AAAAU,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_colorCell","_interopRequireDefault","require","ColorControl","label","onPress","color","withColorIndicator","props","_react","createElement","default","_default","exports"],"sources":["@wordpress/components/src/color-control/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACV,UAAA,CAAAW,OAAS;IACTP,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcR,YAAY"}

package/build/color-indicator/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColorIndicator = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 /**
  * External dependencies
  */
@@ -21,7 +22,7 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     colorValue,
     ...additionalProps
   } = props;
-  return (0, _element.createElement)("span", {
+  return (0, _react.createElement)("span", {
     className: (0, _classnames.default)('component-color-indicator', className),
     style: {
       background: colorValue
@@ -42,8 +43,6 @@ function UnforwardedColorIndicator(props, forwardedRef) {
  * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
  * ```
  */
-const ColorIndicator = (0, _element.forwardRef)(UnforwardedColorIndicator);
-exports.ColorIndicator = ColorIndicator;
-var _default = ColorIndicator;
-exports.default = _default;
+const ColorIndicator = exports.ColorIndicator = (0, _element.forwardRef)(UnforwardedColorIndicator);
+var _default = exports.default = ColorIndicator;
 //# sourceMappingURL=index.js.map

package/build/color-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","createElement","classnames","style","background","ref","ColorIndicator","forwardRef","exports","_default","default"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAHA;AACA;AACA;;AAIA;AACA;AACA;;AASA,SAASG,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACC,IAAAL,QAAA,CAAAU,aAAA;IACCH,SAAS,EAAG,IAAAI,mBAAU,EAAE,2BAA2B,EAAEJ,SAAU,CAAG;IAClEK,KAAK,EAAG;MAAEC,UAAU,EAAEL;IAAW,CAAG;IACpCM,GAAG,EAAGR,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,cAAc,GAAG,IAAAC,mBAAU,EAAEZ,yBAA0B,CAAC;AAACa,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAAA,IAAAG,QAAA,GAEvDH,cAAc;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","_react","createElement","classnames","style","background","ref","ColorIndicator","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AASA,SAASE,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACC,IAAAK,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAK,mBAAU,EAAE,2BAA2B,EAAEL,SAAU,CAAG;IAClEM,KAAK,EAAG;MAAEC,UAAU,EAAEN;IAAW,CAAG;IACpCO,GAAG,EAAGT,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAEd,yBAA0B,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEvDJ,cAAc"}