npm - @wordpress/components - Versions diffs - 27.5.0 → 27.6.0 - Mend

@wordpress/components 27.5.0 → 27.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (938) hide show

package/build/button-group/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_element","UnforwardedButtonGroup","props","ref","className","restProps","classes","~~classnames~~","_react","createElement","role","ButtonGroup","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/button-group/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 { ButtonGroupProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedButtonGroup(\n\tprops: WordPressComponentProps< ButtonGroupProps, 'div', false >,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\tconst { className, ...restProps } = props;\n\tconst classes = ~~classnames~~( 'components-button-group', className );\n\n\treturn (\n\t\t<div ref={ ref } role=\"group\" className={ classes } { ...restProps } />\n\t);\n}\n\n/\n ButtonGroup can be used to group any related buttons together. To emphasize\n * related buttons, a group should share a common container.\n \n ```jsx\n * import { Button, ButtonGroup } from '@wordpress/components';\n \n const MyButtonGroup = () => (\n * <ButtonGroup>\n * <Button variant=\"primary\">Button 1</Button>\n * <Button variant=\"primary\">Button 2</Button>\n * </ButtonGroup>\n * );\n * ```\n */\nexport const ButtonGroup = forwardRef( UnforwardedButtonGroup );\n\nexport default ButtonGroup;\n"],"mappings":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASE,sBAAsBA,CAC9BC,KAAgE,EAChEC,GAAmC,EAClC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACzC,MAAMI,OAAO,GAAG,IAAAC,~~mBAAU~~,EAAE,yBAAyB,EAAEH,SAAU,CAAC;~~EAElE~~,OACC,IAAAI,MAAA,CAAAC,aAAA;IAAKN,GAAG,EAAGA,GAAK;IAACO,IAAI,EAAC,OAAO;IAACN,SAAS,EAAGE,OAAS;IAAA,GAAMD;EAAS,CAAI,CAAC;AAEzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,mBAAU,EAAEZ,sBAAuB,CAAC;AAAC,IAAAa,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEjDJ,WAAW","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","UnforwardedButtonGroup","props","ref","className","restProps","classes","clsx","_react","createElement","role","ButtonGroup","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/button-group/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport type { ButtonGroupProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnforwardedButtonGroup(\n\tprops: WordPressComponentProps< ButtonGroupProps, 'div', false >,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\tconst { className, ...restProps } = props;\n\tconst classes = clsx( 'components-button-group', className );\n\n\treturn (\n\t\t<div ref={ ref } role=\"group\" className={ classes } { ...restProps } />\n\t);\n}\n\n/\n ButtonGroup can be used to group any related buttons together. To emphasize\n * related buttons, a group should share a common container.\n \n ```jsx\n * import { Button, ButtonGroup } from '@wordpress/components';\n \n const MyButtonGroup = () => (\n * <ButtonGroup>\n * <Button variant=\"primary\">Button 1</Button>\n * <Button variant=\"primary\">Button 2</Button>\n * </ButtonGroup>\n * );\n * ```\n */\nexport const ButtonGroup = forwardRef( UnforwardedButtonGroup );\n\nexport default ButtonGroup;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASE,sBAAsBA,CAC9BC,KAAgE,EAChEC,GAAmC,EAClC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACzC,MAAMI,OAAO,GAAG,IAAAC,aAAI,EAAE,yBAAyB,EAAEH,SAAU,CAAC;EAE5D,OACC,IAAAI,MAAA,CAAAC,aAAA;IAAKN,GAAG,EAAGA,GAAK;IAACO,IAAI,EAAC,OAAO;IAACN,SAAS,EAAGE,OAAS;IAAA,GAAMD;EAAS,CAAI,CAAC;AAEzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,mBAAU,EAAEZ,sBAAuB,CAAC;AAAC,IAAAa,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEjDJ,WAAW","ignoreList":[]}

package/build/checkbox-control/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CheckboxControl = CheckboxControl;
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
@@ -89,7 +89,7 @@ function CheckboxControl(props) {
     help: help && (0, _react.createElement)("span", {
       className: "components-checkbox-control__help"
     }, help),
-    className: (0, _classnames.default)('components-checkbox-control', className)
+    className: (0, _clsx.default)('components-checkbox-control', className)
   }, (0, _react.createElement)(_hStack.HStack, {
     spacing: 0,
     justify: "start",

package/build/checkbox-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_element","_compose","_deprecated","_icons","_baseControl","_hStack","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","deprecated","alternative","since","showCheckedIcon","setShowCheckedIcon","useState","showIndeterminateIcon","setShowIndeterminateIcon","ref","useRefEffect","node","matches","useInstanceId","onChangeValue","event","target","_react","createElement","default","~~classnames~~","HStack","spacing","justify","alignment","type","value","undefined","Icon","icon","reset","role","check","htmlFor","_default","exports"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n Checkboxes allow the user to select one or more items from a set.\n \n ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCheckboxControl = () => {\n * const [ isChecked, setChecked ] = useState( true );\n * return (\n * <CheckboxControl\n * label=\"Is author\"\n * help=\"Is the user a author or not?\"\n * checked={ isChecked }\n * onChange={ setChecked }\n * />\n * );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ ~~classnames~~( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAKA,IAAAK,YAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,eAAeA,CAC9BC,KAAsE,EACrE;EACD,MAAM;IACLC,uBAAuB;IACvBC,KAAK;IACLC,SAAS;IACTC,OAAO;IACPC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC,EAAE,EAAEC,MAAM;IACVC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGX,KAAK;EAET,IAAKI,OAAO,EAAG;IACd,IAAAQ,mBAAU,EAAE,qCAAqC,EAAE;MAClDC,WAAW,EAAE,2CAA2C;MACxDC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ;EAEA,MAAM,CAAEC,eAAe,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACjE,MAAM,CAAEC,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD,IAAAF,iBAAQ,EAAE,KAAM,CAAC;;EAElB;EACA;EACA,MAAMG,GAAG,GAAG,IAAAC,qBAAY,EACrBC,IAAI,IAAM;IACX,IAAK,CAAEA,IAAI,EAAG;MACb;IACD;;IAEA;IACAA,IAAI,CAAChB,aAAa,GAAG,CAAC,CAAEA,aAAa;IAErCU,kBAAkB,CAAEM,IAAI,CAACC,OAAO,CAAE,UAAW,CAAE,CAAC;IAChDJ,wBAAwB,CAAEG,IAAI,CAACC,OAAO,CAAE,gBAAiB,CAAE,CAAC;EAC7D,CAAC,EACD,CAAElB,OAAO,EAAEC,aAAa,CACzB,CAAC;EACD,MAAME,EAAE,GAAG,IAAAgB,sBAAa,EACvBzB,eAAe,EACf,4BAA4B,EAC5BU,MACD,CAAC;EACD,MAAMgB,aAAa,GAAKC,KAAsC,IAC7DhB,QAAQ,CAAEgB,KAAK,CAACC,MAAM,CAACtB,OAAQ,CAAC;EAEjC,OACC,IAAAuB,MAAA,CAAAC,aAAA,EAAChC,YAAA,CAAAiC,OAAW;IACX7B,uBAAuB,EAAGA,uBAAyB;IACnDC,KAAK,EAAGE,OAAS;IACjBI,EAAE,EAAGA,EAAI;IACTD,IAAI,EACHA,IAAI,IACH,IAAAqB,MAAA,CAAAC,aAAA;MAAM1B,SAAS,EAAC;IAAmC,GAChDI,IACG,CAEP;IACDJ,SAAS,EAAG,IAAA4B,~~mBAAU~~,EAAE,6BAA6B,EAAE5B,SAAU;EAAG,~~GAEpE~~,IAAAyB,MAAA,CAAAC,aAAA,EAAC/B,OAAA,CAAAkC,MAAM;IAACC,OAAO,EAAG,CAAG;IAACC,OAAO,EAAC,OAAO;IAACC,SAAS,EAAC;EAAK,GACpD,IAAAP,MAAA,CAAAC,aAAA;IAAM1B,SAAS,EAAC;EAA8C,GAC7D,IAAAyB,MAAA,CAAAC,aAAA;IACCT,GAAG,EAAGA,GAAK;IACXZ,EAAE,EAAGA,EAAI;IACTL,SAAS,EAAC,oCAAoC;IAC9CiC,IAAI,EAAC,UAAU;IACfC,KAAK,EAAC,GAAG;IACT3B,QAAQ,EAAGe,aAAe;IAC1BpB,OAAO,EAAGA,OAAS;IACnB,oBAAmB,CAAC,CAAEE,IAAI,GAAGC,EAAE,GAAG,QAAQ,GAAG8B,SAAW;IAAA,GACnD3B;EAAe,CACpB,CAAC,EACAO,qBAAqB,GACtB,IAAAU,MAAA,CAAAC,aAAA,EAACjC,MAAA,CAAA2C,IAAI;IACJC,IAAI,EAAGC,YAAO;IACdtC,SAAS,EAAC,4CAA4C;IACtDuC,IAAI,EAAC;EAAc,CACnB,CAAC,GACC,IAAI,EACN3B,eAAe,GAChB,IAAAa,MAAA,CAAAC,aAAA,EAACjC,MAAA,CAAA2C,IAAI;IACJC,IAAI,EAAGG,YAAO;IACdxC,SAAS,EAAC,sCAAsC;IAChDuC,IAAI,EAAC;EAAc,CACnB,CAAC,GACC,IACC,CAAC,EACLxC,KAAK,IACN,IAAA0B,MAAA,CAAAC,aAAA;IACC1B,SAAS,EAAC,oCAAoC;IAC9CyC,OAAO,EAAGpC;EAAI,GAEZN,KACI,CAED,CACI,CAAC;AAEhB;AAAC,IAAA2C,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEc/B,eAAe","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_deprecated","_icons","_baseControl","_hStack","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","deprecated","alternative","since","showCheckedIcon","setShowCheckedIcon","useState","showIndeterminateIcon","setShowIndeterminateIcon","ref","useRefEffect","node","matches","useInstanceId","onChangeValue","event","target","_react","createElement","default","clsx","HStack","spacing","justify","alignment","type","value","undefined","Icon","icon","reset","role","check","htmlFor","_default","exports"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/\n WordPress dependencies\n /\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n Checkboxes allow the user to select one or more items from a set.\n \n ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCheckboxControl = () => {\n * const [ isChecked, setChecked ] = useState( true );\n * return (\n * <CheckboxControl\n * label=\"Is author\"\n * help=\"Is the user a author or not?\"\n * checked={ isChecked }\n * onChange={ setChecked }\n * />\n * );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker-actions.js CHANGED Viewed

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ButtonAction = ButtonAction;
 exports.DropdownLinkAction = DropdownLinkAction;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _button = _interopRequireDefault(require("../button"));
 var _dropdown = _interopRequireDefault(require("../dropdown"));
 /**
@@ -25,7 +25,7 @@ function DropdownLinkAction({
   linkText
 }) {
   return (0, _react.createElement)(_dropdown.default, {
-    className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
+    className: (0, _clsx.default)('components-circular-option-picker__dropdown-link-action', className),
     renderToggle: ({
       isOpen,
       onToggle
@@ -45,7 +45,7 @@ function ButtonAction({
   ...additionalProps
 }) {
   return (0, _react.createElement)(_button.default, {
-    className: (0, _classnames.default)('components-circular-option-picker__clear', className),
+    className: (0, _clsx.default)('components-circular-option-picker__clear', className),
     variant: "tertiary",
     ...additionalProps
   }, children);

package/build/circular-option-picker/circular-option-picker-actions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_button","_dropdown","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","_react","createElement","default","~~classnames~~","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\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"],"mappings":";;;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASG,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,SAAA,CAAAQ,OAAQ;IACRL,SAAS,EAAG,IAAAM,~~mBAAU~~,~~EACrB~~,yDAAyD,EACzDN,SACD,CAAG;IACHO,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpC,IAAAN,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAS,OAAM;MACN,iBAAgBG,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTZ;IAAW,GAEdG,QACK,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEO,SAASW,YAAYA,CAAE;EAC7BZ,SAAS;EACTa,QAAQ;EACR,GAAGC;AAC6D,CAAC,EAAG;EACpE,OACC,IAAAX,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAS,OAAM;IACNL,SAAS,EAAG,IAAAM,~~mBAAU~~,~~EACrB~~,0CAA0C,EAC1CN,SACD,CAAG;IACHW,OAAO,EAAC,UAAU;IAAA,GACbG;EAAe,GAElBD,QACK,CAAC;AAEX","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_button","_dropdown","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","_react","createElement","default","clsx","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\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={ clsx(\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"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAOO,SAASG,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,SAAA,CAAAQ,OAAQ;IACRL,SAAS,EAAG,IAAAM,aAAI,EACf,yDAAyD,EACzDN,SACD,CAAG;IACHO,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpC,IAAAN,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAS,OAAM;MACN,iBAAgBG,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTZ;IAAW,GAEdG,QACK,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEO,SAASW,YAAYA,CAAE;EAC7BZ,SAAS;EACTa,QAAQ;EACR,GAAGC;AAC6D,CAAC,EAAG;EACpE,OACC,IAAAX,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAS,OAAM;IACNL,SAAS,EAAG,IAAAM,aAAI,EACf,0CAA0C,EAC1CN,SACD,CAAG;IACHW,OAAO,EAAC,UAAU;IAAA,GACbG;EAAe,GAElBD,QACK,CAAC;AAEX","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker-option-group.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionGroup = OptionGroup;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 /**
  * External dependencies
  */
@@ -24,7 +24,7 @@ function OptionGroup({
   return (0, _react.createElement)("div", {
     ...additionalProps,
     role: role,
-    className: (0, _classnames.default)('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
+    className: (0, _clsx.default)('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
   }, options);
 }
 //# sourceMappingURL=circular-option-picker-option-group.js.map

package/build/circular-option-picker/circular-option-picker-option-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","OptionGroup","className","options","additionalProps","role","undefined","_react","createElement","~~classnames~~"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps \|\| 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ ~~classnames~~(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAA,GACMJ,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAG,IAAAO,~~mBAAU~~,~~EACrB~~,iDAAiD,EACjD,6CAA6C,EAC7CP,SACD;EAAG,GAEDC,OACE,CAAC;AAER","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","OptionGroup","className","options","additionalProps","role","undefined","_react","createElement","clsx"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps \|\| 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAA,GACMJ,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAG,IAAAO,aAAI,EACf,iDAAiD,EACjD,6CAA6C,EAC7CP,SACD;EAAG,GAEDC,OACE,CAAC;AAER","ignoreList":[]}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Option = Option;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
@@ -87,7 +87,7 @@ function Option({
     isPressed: isSelected
   });
   return (0, _react.createElement)("div", {
-    className: (0, _classnames.default)(className, 'components-circular-option-picker__option-wrapper')
+    className: (0, _clsx.default)(className, 'components-circular-option-picker__option-wrapper')
   }, tooltipText ? (0, _react.createElement)(_tooltip.default, {
     text: tooltipText
   }, optionControl) : optionControl, isSelected && (0, _react.createElement)(_icons.Icon, {

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

	@@ -1 +1 @@
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":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,4BAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,EAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAR,sBAAA,CAAAC,OAAA;AAnBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAOA,SAASQ,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDH,eAAe;IACpB,gBAAeD,SAAW;IAC1BK,GAAG,EAAGN;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMO,cAAc,GAAG,IAAAC,mBAAU,EAAEV,yBAA0B,CAAC;AAE9D,SAASW,yBAAyBA,CACjCV,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEU,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGV;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMc,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,OACC,IAAAP,MAAA,CAAAC,aAAA,EAACR,EAAA,CAAAoB,aAAa;IACbC,MAAM,EACL,IAAAd,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDH,eAAe;MACpBgB,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEP,UAAY;MAC/BL,GAAG,EAAGN;IAAc,CACpB,CACD;IACDmB,KAAK,EAAGP,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMU,cAAc,GAAG,IAAAZ,mBAAU,EAAEC,yBAA0B,CAAC;AAEvD,SAASY,MAAMA,CAAE;EACvBC,SAAS;EACTX,UAAU;EACVY,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGtB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEuB,MAAM;IAAEb;EAAe,CAAC,GAAG,IAAAc,mBAAU,EAC5CC,wDACD,CAAC;EACD,MAAMjB,EAAE,GAAG,IAAAkB,sBAAa,EACvBP,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMI,WAAW,GAAG;IACnBnB,EAAE;IACFY,SAAS,EAAE,2CAA2C;IACtD,GAAGpB;EACJ,CAAC;EAED,MAAM4B,aAAa,GAAGlB,cAAc,GACnC,IAAAT,MAAA,CAAAC,aAAA,EAACgB,cAAc;IAAA,GACTS,WAAW;IAChBjB,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,GAEF,IAAAR,MAAA,CAAAC,aAAA,EAACG,cAAc;IAAA,GAAMsB,WAAW;IAAG5B,SAAS,EAAGU;EAAY,CAAE,CAC7D;EAED,OACC,IAAAR,MAAA,CAAAC,aAAA;IACCkB,SAAS,EAAG,IAAAS,~~mBAAU~~,~~EACrBT~~,SAAS,EACT,mDACD;EAAG,GAEDE,WAAW,GACZ,IAAArB,MAAA,CAAAC,aAAA,EAACP,QAAA,CAAAQ,OAAO;IAAC2B,IAAI,EAAGR;EAAa,GAAGM,aAAwB,CAAC,GAEzDA,aACA,EACCnB,UAAU,IAAI,IAAAR,MAAA,CAAAC,aAAA,EAACX,MAAA,CAAAwC,IAAI;IAACC,IAAI,EAAGC,YAAO;IAAA,GAAMZ;EAAiB,CAAI,CAC3D,CAAC;AAER","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_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","clsx","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\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={ clsx(\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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","ignoreList":[]}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
@@ -138,7 +138,7 @@ function CircularOptionPicker(props) {
   return (0, _react.createElement)(OptionPickerImplementation, {
     ...additionalProps,
     baseId: baseId,
-    className: (0, _classnames.default)('components-circular-option-picker', className),
+    className: (0, _clsx.default)('components-circular-option-picker', className),
     actions: actions,
     options: options
   }, children);

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

	@@ -1 +1 @@
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":";;;;;;;;AAGA,IAAAA,~~WAAA~~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~~mBAAU~~,~~EACrB~~,mCAAmC,~~EACnC3B~~,~~SACD~~,CAAG;~~IACHH~~,OAAO,EAAGA,OAAS;IACnBC,OAAO,EAAGA;EAAS,GAEjBI,QACyB,CAAC;AAE/B;AAEAkB,oBAAoB,CAACQ,MAAM,GAAGA,kCAAM;AACpCR,oBAAoB,CAACS,WAAW,GAAGA,4CAAW;AAC9CT,oBAAoB,CAACU,YAAY,GAAGA,yCAAY;AAChDV,oBAAoB,CAACW,kBAAkB,GAAGA,+CAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE9Cd,oBAAoB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_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","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/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';\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={ clsx( 'components-circular-option-picker', className ) }\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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","ignoreList":[]}

package/build/clipboard-button/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ClipboardButton;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
@@ -51,7 +51,7 @@ function ClipboardButton({
       clearTimeout(timeoutId.current);
     }
   }, []);
-  const classes = (0, _classnames.default)('components-clipboard-button', className);
+  const classes = (0, _clsx.default)('components-clipboard-button', className);
   // Workaround for inconsistent behavior in Safari, where <textarea> is not
   // the document.activeElement at the moment when the copy event fires.

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

	@@ -1 +1 @@
1	- {"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_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","clsx","focusOnCopyEventTarget","event","target","focus","_react","createElement","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\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 = clsx( '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,KAAA,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,aAAI,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEhE;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","ignoreList":[]}

package/build/color-indicator/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ColorIndicator = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 /**
  * External dependencies
@@ -27,7 +27,7 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     ...additionalProps
   } = props;
   return (0, _react.createElement)("span", {
-    className: (0, _classnames.default)('component-color-indicator', className),
+    className: (0, _clsx.default)('component-color-indicator', className),
     style: {
       background: colorValue
     },

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

	@@ -1 +1 @@
1	- {"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;;AAGA;AACA;AACA;;AAIA,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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","_react","createElement","clsx","style","background","ref","ColorIndicator","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\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={ clsx( '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,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,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,aAAI,EAAE,2BAA2B,EAAEL,SAAU,CAAG;IAC5DM,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","ignoreList":[]}

package/build/color-palette/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ var _react = require("react");
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
@@ -245,7 +245,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
     }, (0, _react.createElement)(_truncate.Truncate, {
       className: "components-color-palette__custom-color-name"
     }, value ? buttonLabelName : (0, _i18n.__)('No color selected')), (0, _react.createElement)(_truncate.Truncate, {
-      className: (0, _classnames.default)('components-color-palette__custom-color-value', {
+      className: (0, _clsx.default)('components-color-palette__custom-color-value', {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))

package/build/color-palette/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","classnames","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname \|\|\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement \| null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\$(.+)\$$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/\n Allows the user to pick a color from a list of pre-defined color entries.\n \n ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname \|\|\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement \| null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\$(.+)\$$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/\n Allows the user to pick a color from a list of pre-defined color entries.\n \n ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyColorPalette = () => {\n * const [ color, setColor ] = useState ( '#f00' )\n * const colors = [\n * { name: 'red', color: '#f00' },\n * { name: 'white', color: '#fff' },\n * { name: 'blue', color: '#00f' },\n * ];\n * return (\n * <ColorPalette\n * colors={ colors }\n * value={ color }\n * onChange={ ( color ) => setColor( color ) }\n * />\n * );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}

package/build/combobox-control/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -62,10 +62,12 @@ const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) =
  * 	{
  * 		value: 'normal',
  * 		label: 'Normal',
+ * 		disabled: true,
  * 	},
  * 	{
  * 		value: 'large',
  * 		label: 'Large',
+ * 		disabled: false,
  * 	},
  * ];
  *
@@ -141,6 +143,9 @@ function ComboboxControl(props) {
     return startsWithMatch.concat(containsMatch);
   }, [inputValue, options]);
   const onSuggestionSelected = newSelectedSuggestion => {
+    if (newSelectedSuggestion.disabled) {
+      return;
+    }
     setValue(newSelectedSuggestion.value);
     (0, _a11y.speak)(messages.selected, 'assertive');
     setSelectedSuggestion(newSelectedSuggestion);
@@ -243,7 +248,7 @@ function ComboboxControl(props) {
     onFocusOutside: onFocusOutside
   }, (0, _react.createElement)(_baseControl.default, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    className: (0, _classnames.default)(className, 'components-combobox-control'),
+    className: (0, _clsx.default)(className, 'components-combobox-control'),
     label: label,
     id: `components-form-token-input-${instanceId}`,
     hideLabelFromVision: hideLabelFromVision,