@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACHT,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAAnC,CAAV;AAKA,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACA,QAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;AACNQ,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKR,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAP6B,CAA9B;AASAJ,EAAAA,SAAS,CAAE,MAAM;AAChBgB,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAME,OAAO,GAAGrB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CApBG,CAsBH;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,cAAC,MAAD,eACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGb,QANH,CADD;AAUA","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';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\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 = ( event ) => {\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"]}
+{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","plugin","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACHT,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,MADqC;AAE5CC,IAAAA,MAAM,EAAE,WAFoC;AAG5CC,IAAAA,WAAW,EAAE;AAH+B,GAAnC,CAAV;AAMA,QAAMC,SAAS,GAAGhB,MAAM,EAAxB;AACA,QAAMiB,GAAG,GAAGf,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;AACNS,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKT,YAAL,EAAoB;AACnBM,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMV,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAP6B,CAA9B;AASAJ,EAAAA,SAAS,CAAE,MAAM;AAChBiB,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAME,OAAO,GAAGtB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CArBG,CAuBH;AACA;AACA;AACA;AACA;;AACA,QAAMe,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,cAAC,MAAD,eACMb,WADN;AAEC,IAAA,SAAS,EAAGS,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGd,QANH,CADD;AAUA","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';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '10.3',\n\t\tplugin: 'Gutenberg',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\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 = ( event ) => {\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"]}

package/build-module/color-palette/index.js

@@ -13,7 +13,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -122,7 +122,7 @@ export default function ColorPalette(_ref6) {
     __experimentalIsRenderedInSidebar = false
   } = _ref6;
   const clearColor = useCallback(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
+  const Component = __experimentalHasMultipleOrigins && colors !== null && colors !== void 0 && colors.length ? MultiplePalettes : SinglePalette;
 
   const renderCustomColorPicker = () => createElement(ColorPicker, {
     color: value,
@@ -130,25 +130,13 @@ export default function ColorPalette(_ref6) {
     enableAlpha: enableAlpha
   });
 
-  let dropdownPosition;
-  let popoverProps;
-
-  if (__experimentalIsRenderedInSidebar) {
-    dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
-    popoverProps = {
-      __unstableForcePosition: true
-    };
-  }
-
   const colordColor = colord(value);
   return createElement(VStack, {
     spacing: 3,
     className: className
   }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
-    position: dropdownPosition,
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
-    popoverProps: popoverProps,
     renderToggle: _ref7 => {
       let {
         isOpen,

package/build-module/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","isRTL","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","popoverProps","__unstableForcePosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\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 { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\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\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</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={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = isRTL() ? 'bottom right' : 'bottom left';\n\t\tpopoverProps = { __unstableForcePosition: true };\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\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 { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\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\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</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={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && colors?.length\n\t\t\t? MultiplePalettes\n\t\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\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>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build-module/color-picker/color-display.js

@@ -18,7 +18,6 @@ import { Text } from '../text';
 import { Flex, FlexItem } from '../flex';
 import { Tooltip } from '../ui/tooltip';
 import { space } from '../ui/utils/space';
-import { COLORS } from '../utils/colors-values';
 
 const ValueDisplay = _ref => {
   let {
@@ -31,7 +30,7 @@ const ValueDisplay = _ref => {
       isBlock: true,
       display: "flex"
     }, createElement(Text, {
-      color: COLORS.ui.theme
+      color: "blue"
     }, abbreviation), createElement(Text, null, value));
   }));
 };
@@ -86,7 +85,7 @@ const HexDisplay = _ref5 => {
   } = _ref5;
   const colorWithoutHash = color.toHex().slice(1).toUpperCase();
   return createElement(FlexItem, null, createElement(Text, {
-    color: COLORS.ui.theme
+    color: "blue"
   }, "#"), createElement(Text, null, colorWithoutHash));
 };
 

package/build-module/color-picker/color-display.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","ValueDisplay","values","map","value","abbreviation","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color=\"blue\">{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color=\"blue\">#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}

package/build-module/color-picker/hex-input.js

@@ -17,7 +17,6 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
-import { COLORS } from '../utils/colors-values';
 export const HexInput = _ref => {
   let {
     color,
@@ -35,7 +34,7 @@ export const HexInput = _ref => {
     prefix: createElement(Spacer, {
       as: Text,
       marginLeft: space(3.5),
-      color: COLORS.ui.theme,
+      color: "blue",
       lineHeight: 1
     }, "#"),
     value: color.toHex().slice(1).toUpperCase(),

package/build-module/color-picker/hex-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","COLORS","HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","ui","theme","toHex","slice","toUpperCase","nextValue"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAEZ,MAAM,CAAE,MAAMY,KAAR,CAAN,CAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGZ,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAGE,MAAM,CAACS,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGR,KAAK,CAACS,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BX,MAAAA,QAAQ,CAAET,MAAM,CAAE,MAAMoB,SAAR,CAAR,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGT,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAjBX;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","toHex","slice","toUpperCase","nextValue"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAEX,MAAM,CAAE,MAAMW,KAAR,CAAN,CAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGG,KAAK,CAACO,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BT,MAAAA,QAAQ,CAAER,MAAM,CAAE,MAAMiB,SAAR,CAAR,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGP,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAGR,EAAE,CAAE,WAAF,CAjBX;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}

package/build-module/color-picker/input-with-slider.js

@@ -8,7 +8,6 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
-import { COLORS } from '../utils/colors-values';
 export const InputWithSlider = _ref => {
   let {
     min,
@@ -31,7 +30,7 @@ export const InputWithSlider = _ref => {
     prefix: createElement(Spacer, {
       as: Text,
       paddingLeft: space(3.5),
-      color: COLORS.ui.theme,
+      color: "blue",
       lineHeight: 1
     }, abbreviation),
     hideHTMLArrows: true

package/build-module/color-picker/input-with-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","COLORS","InputWithSlider","min","max","label","abbreviation","onChange","value","ui","theme"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,EAAuBC,oBAAvB,QAAmD,UAAnD;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAWA,OAAO,MAAMC,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,cAAC,MAAD;AAAQ,IAAA,EAAE,EAAGb,MAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,cAAC,oBAAD;AACC,IAAA,GAAG,EAAGQ,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,WAAW,EAAGE,KAAK,CAAE,GAAF,CAFpB;AAGC,MAAA,KAAK,EAAGG,MAAM,CAACQ,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGJ,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ HStack } spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","InputWithSlider","min","max","label","abbreviation","onChange","value"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,EAAuBC,oBAAvB,QAAmD,UAAnD;AAWA,OAAO,MAAMC,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,cAAC,MAAD;AAAQ,IAAA,EAAE,EAAGZ,MAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,cAAC,oBAAD;AACC,IAAA,GAAG,EAAGO,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGV,IADN;AAEC,MAAA,WAAW,EAAGE,KAAK,CAAE,GAAF,CAFpB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGO,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ HStack } spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}

package/build-module/custom-gradient-picker/index.js

@@ -87,7 +87,6 @@ const GradientTypePicker = _ref2 => {
     labelPosition: "top",
     onChange: handleOnChange,
     options: GRADIENT_OPTIONS,
-    size: "__unstable-large",
     value: hasGradient && type
   });
 };

package/build-module/custom-gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["get","omit","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","DEFAULT_GRADIENT","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","onSetRadialGradient","handleOnChange","next","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/index.js"],"names":["get","omit","__","AnglePickerControl","CustomGradientBar","Flex","SelectControl","getGradientAstWithDefault","getLinearGradientRepresentation","getGradientAstWithControlPoints","getStopCssColor","serializeGradient","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","GRADIENT_OPTIONS","DEFAULT_GRADIENT","AccessoryWrapper","SelectWrapper","GradientAnglePicker","gradientAST","hasGradient","onChange","angle","onAngleChange","newAngle","orientation","type","value","GradientTypePicker","onSetLinearGradient","onSetRadialGradient","handleOnChange","next","CustomGradientPicker","__experimentalIsRenderedInSidebar","background","controlPoints","colorStops","map","colorStop","color","position","parseInt","length","newControlPoints"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from '../custom-gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n\tDEFAULT_GRADIENT,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\n\nconst GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst angle = get(\n\t\tgradientAST,\n\t\t[ 'orientation', 'value' ],\n\t\tDEFAULT_LINEAR_GRADIENT_ANGLE\n\t);\n\tconst onAngleChange = ( newAngle ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: newAngle,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {\n\tconst { type } = gradientAST;\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\t...( gradientAST.orientation\n\t\t\t\t\t? {}\n\t\t\t\t\t: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...omit( gradientAST, [ 'orientation' ] ),\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tvalue={ hasGradient && type }\n\t\t/>\n\t);\n};\n\nexport default function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientAST = getGradientAstWithDefault( value );\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\tconst hasGradient = gradientAST.value !== DEFAULT_GRADIENT;\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {\n\t\tcolor: getStopCssColor( colorStop ),\n\t\tposition: parseInt( colorStop.length.value ),\n\t} ) );\n\n\treturn (\n\t\t<div className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\n\t\t\t\t\t\t\t)\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/date-time/date.js

@@ -12,13 +12,8 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
  * WordPress dependencies
  */
 
-import { useEffect, useRef } from '@wordpress/element';
+import { Component, createRef, useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-
-import { getMomentDate } from './utils';
 /**
  * Module Constants
  */
@@ -70,20 +65,20 @@ function DatePickerDay(_ref) {
   }, day.format('D'));
 }
 
-function DatePicker(_ref2) {
-  let {
-    currentDate,
-    onChange,
-    events,
-    isInvalidDate,
-    onMonthPreviewed
-  } = _ref2;
-  const nodeRef = useRef();
-
-  const onMonthPreviewedHandler = newMonthDate => {
-    onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(newMonthDate.toISOString());
-    keepFocusInside();
-  };
+class DatePicker extends Component {
+  constructor() {
+    super(...arguments);
+    this.onChangeMoment = this.onChangeMoment.bind(this);
+    this.nodeRef = createRef();
+    this.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(this);
+  }
+
+  onMonthPreviewedHandler(newMonthDate) {
+    var _this$props$onMonthPr, _this$props;
+
+    (_this$props$onMonthPr = (_this$props = this.props).onMonthPreviewed) === null || _this$props$onMonthPr === void 0 ? void 0 : _this$props$onMonthPr.call(_this$props, newMonthDate.toISOString());
+    this.keepFocusInside();
+  }
   /*
    * Todo: We should remove this function ASAP.
    * It is kept because focus is lost when we click on the previous and next month buttons.
@@ -92,21 +87,21 @@ function DatePicker(_ref2) {
    */
 
 
-  const keepFocusInside = () => {
-    if (!nodeRef.current) {
+  keepFocusInside() {
+    if (!this.nodeRef.current) {
       return;
     }
 
     const {
       ownerDocument
-    } = nodeRef.current;
+    } = this.nodeRef.current;
     const {
       activeElement
     } = ownerDocument; // If focus was lost.
 
-    if (!activeElement || !nodeRef.current.contains(ownerDocument.activeElement)) {
+    if (!activeElement || !this.nodeRef.current.contains(ownerDocument.activeElement)) {
       // Retrieve the focus region div.
-      const focusRegion = nodeRef.current.querySelector('.DayPicker_focusRegion');
+      const focusRegion = this.nodeRef.current.querySelector('.DayPicker_focusRegion');
 
       if (!focusRegion) {
         return;
@@ -115,10 +110,14 @@ function DatePicker(_ref2) {
 
       focusRegion.focus();
     }
-  };
+  }
+
+  onChangeMoment(newDate) {
+    const {
+      currentDate,
+      onChange
+    } = this.props; // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 
-  const onChangeMoment = newDate => {
-    // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
     const momentDate = currentDate ? moment(currentDate) : moment();
     const momentTime = {
       hours: momentDate.hours(),
@@ -127,46 +126,71 @@ function DatePicker(_ref2) {
     };
     onChange(newDate.set(momentTime).format(TIMEZONELESS_FORMAT)); // Keep focus on the date picker.
 
-    keepFocusInside();
-  };
+    this.keepFocusInside();
+  }
+  /**
+   * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
+   * object representing now. If a null value is passed, return a null value.
+   *
+   * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
+   * @return {?moment.Moment} Moment object for selected date or null.
+   */
+
+
+  getMomentDate(currentDate) {
+    if (null === currentDate) {
+      return null;
+    }
+
+    return currentDate ? moment(currentDate) : moment();
+  }
+
+  getEventsPerDay(day) {
+    var _this$props$events;
 
-  const getEventsPerDay = day => {
-    if (!(events !== null && events !== void 0 && events.length)) {
+    if (!((_this$props$events = this.props.events) !== null && _this$props$events !== void 0 && _this$props$events.length)) {
       return [];
     }
 
-    return events.filter(eventDay => day.isSame(eventDay.date, 'day'));
-  };
+    return this.props.events.filter(eventDay => day.isSame(eventDay.date, 'day'));
+  }
+
+  render() {
+    const {
+      currentDate,
+      isInvalidDate
+    } = this.props;
+    const momentDate = this.getMomentDate(currentDate);
+    return createElement("div", {
+      className: "components-datetime__date",
+      ref: this.nodeRef
+    }, createElement(DayPickerSingleDateController, {
+      date: momentDate,
+      daySize: 30,
+      focused: true,
+      hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
+      // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
+      ,
+      key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
+      noBorder: true,
+      numberOfMonths: 1,
+      onDateChange: this.onChangeMoment,
+      transitionDuration: 0,
+      weekDayFormat: "ddd",
+      dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
+      isRTL: isRTL(),
+      isOutsideRange: date => {
+        return isInvalidDate && isInvalidDate(date.toDate());
+      },
+      onPrevMonthClick: this.onMonthPreviewedHandler,
+      onNextMonthClick: this.onMonthPreviewedHandler,
+      renderDayContents: day => createElement(DatePickerDay, {
+        day: day,
+        events: this.getEventsPerDay(day)
+      })
+    }));
+  }
 
-  const momentDate = getMomentDate(currentDate);
-  return createElement("div", {
-    className: "components-datetime__date",
-    ref: nodeRef
-  }, createElement(DayPickerSingleDateController, {
-    date: momentDate,
-    daySize: 30,
-    focused: true,
-    hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change
-    // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-    ,
-    key: `datepicker-controller-${momentDate ? momentDate.format('MM-YYYY') : 'null'}`,
-    noBorder: true,
-    numberOfMonths: 1,
-    onDateChange: onChangeMoment,
-    transitionDuration: 0,
-    weekDayFormat: "ddd",
-    dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT,
-    isRTL: isRTL(),
-    isOutsideRange: date => {
-      return isInvalidDate && isInvalidDate(date.toDate());
-    },
-    onPrevMonthClick: onMonthPreviewedHandler,
-    onNextMonthClick: onMonthPreviewedHandler,
-    renderDayContents: day => createElement(DatePickerDay, {
-      day: day,
-      events: getEventsPerDay(day)
-    })
-  }));
 }
 
 export default DatePicker;

package/build-module/date-time/date.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/date.js"],"names":["moment","classnames","DayPickerSingleDateController","useEffect","useRef","isRTL","_n","sprintf","getMomentDate","TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","currentDate","onChange","isInvalidDate","onMonthPreviewed","nodeRef","onMonthPreviewedHandler","newMonthDate","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","focus","onChangeMoment","newDate","momentDate","momentTime","hours","minutes","seconds","set","getEventsPerDay","filter","eventDay","isSame","date","toDate"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\n\n// react-dates doesn't tree-shake correctly, so we import from the individual\n// component here, to avoid including too much of the library\nimport DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getMomentDate } from './utils';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] } ) {\n\tconst ref = useRef();\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ref?.current?.parentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\nfunction DatePicker( {\n\tcurrentDate,\n\tonChange,\n\tevents,\n\tisInvalidDate,\n\tonMonthPreviewed,\n} ) {\n\tconst nodeRef = useRef();\n\tconst onMonthPreviewedHandler = ( newMonthDate ) => {\n\t\tonMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tkeepFocusInside();\n\t};\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tconst keepFocusInside = () => {\n\t\tif ( ! nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! focusRegion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t};\n\n\tconst onChangeMoment = ( newDate ) => {\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tkeepFocusInside();\n\t};\n\n\tconst getEventsPerDay = ( day ) => {\n\t\tif ( ! events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t};\n\n\tconst momentDate = getMomentDate( currentDate );\n\n\treturn (\n\t\t<div className=\"components-datetime__date\" ref={ nodeRef }>\n\t\t\t<DayPickerSingleDateController\n\t\t\t\tdate={ momentDate }\n\t\t\t\tdaySize={ 30 }\n\t\t\t\tfocused\n\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t}` }\n\t\t\t\tnoBorder\n\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\tonDateChange={ onChangeMoment }\n\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\tisRTL={ isRTL() }\n\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\treturn isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t} }\n\t\t\t\tonPrevMonthClick={ onMonthPreviewedHandler }\n\t\t\t\tonNextMonthClick={ onMonthPreviewedHandler }\n\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\tevents={ getEventsPerDay( day ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default DatePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/date.js"],"names":["moment","classnames","DayPickerSingleDateController","Component","createRef","useEffect","useRef","isRTL","_n","sprintf","TIMEZONELESS_FORMAT","ARIAL_LABEL_TIME_FORMAT","DatePickerDay","day","events","ref","current","parentNode","dayAriaLabel","format","length","setAttribute","dayWithEventsDescription","DatePicker","constructor","arguments","onChangeMoment","bind","nodeRef","onMonthPreviewedHandler","newMonthDate","props","onMonthPreviewed","toISOString","keepFocusInside","ownerDocument","activeElement","contains","focusRegion","querySelector","focus","newDate","currentDate","onChange","momentDate","momentTime","hours","minutes","seconds","set","getMomentDate","getEventsPerDay","filter","eventDay","isSame","date","render","isInvalidDate","toDate"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\nimport classnames from 'classnames';\n\n// react-dates doesn't tree-shake correctly, so we import from the individual\n// component here, to avoid including too much of the library\nimport DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';\n\n/**\n * WordPress dependencies\n */\nimport { Component, createRef, useEffect, useRef } from '@wordpress/element';\nimport { isRTL, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\nconst ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';\n\nfunction DatePickerDay( { day, events = [] } ) {\n\tconst ref = useRef();\n\n\t/*\n\t * a11y hack to make the `There is/are n events` string\n\t * available speaking for readers,\n\t * re-defining the aria-label attribute.\n\t * This attribute is handled by the react-dates component.\n\t */\n\tuseEffect( () => {\n\t\t// Bail when no parent node.\n\t\tif ( ! ref?.current?.parentNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { parentNode } = ref.current;\n\t\tconst dayAriaLabel = moment( day ).format( ARIAL_LABEL_TIME_FORMAT );\n\n\t\tif ( ! events.length ) {\n\t\t\t// Set aria-label without event description.\n\t\t\tparentNode.setAttribute( 'aria-label', dayAriaLabel );\n\t\t\treturn;\n\t\t}\n\n\t\tconst dayWithEventsDescription = sprintf(\n\t\t\t// translators: 1: Calendar day format, 2: Calendar event number.\n\t\t\t_n(\n\t\t\t\t'%1$s. There is %2$d event.',\n\t\t\t\t'%1$s. There are %2$d events.',\n\t\t\t\tevents.length\n\t\t\t),\n\t\t\tdayAriaLabel,\n\t\t\tevents.length\n\t\t);\n\n\t\tparentNode.setAttribute( 'aria-label', dayWithEventsDescription );\n\t}, [ events.length ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'components-datetime__date__day', {\n\t\t\t\t'has-events': events?.length,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ day.format( 'D' ) }\n\t\t</div>\n\t);\n}\n\nclass DatePicker extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.onChangeMoment = this.onChangeMoment.bind( this );\n\t\tthis.nodeRef = createRef();\n\t\tthis.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(\n\t\t\tthis\n\t\t);\n\t}\n\n\tonMonthPreviewedHandler( newMonthDate ) {\n\t\tthis.props.onMonthPreviewed?.( newMonthDate.toISOString() );\n\t\tthis.keepFocusInside();\n\t}\n\n\t/*\n\t * Todo: We should remove this function ASAP.\n\t * It is kept because focus is lost when we click on the previous and next month buttons.\n\t * This focus loss closes the date picker popover.\n\t * Ideally we should add an upstream commit on react-dates to fix this issue.\n\t */\n\tkeepFocusInside() {\n\t\tif ( ! this.nodeRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { ownerDocument } = this.nodeRef.current;\n\t\tconst { activeElement } = ownerDocument;\n\n\t\t// If focus was lost.\n\t\tif (\n\t\t\t! activeElement ||\n\t\t\t! this.nodeRef.current.contains( ownerDocument.activeElement )\n\t\t) {\n\t\t\t// Retrieve the focus region div.\n\t\t\tconst focusRegion = this.nodeRef.current.querySelector(\n\t\t\t\t'.DayPicker_focusRegion'\n\t\t\t);\n\t\t\tif ( ! focusRegion ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Keep the focus on focus region.\n\t\t\tfocusRegion.focus();\n\t\t}\n\t}\n\n\tonChangeMoment( newDate ) {\n\t\tconst { currentDate, onChange } = this.props;\n\n\t\t// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.\n\t\tconst momentDate = currentDate ? moment( currentDate ) : moment();\n\t\tconst momentTime = {\n\t\t\thours: momentDate.hours(),\n\t\t\tminutes: momentDate.minutes(),\n\t\t\tseconds: 0,\n\t\t};\n\n\t\tonChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );\n\n\t\t// Keep focus on the date picker.\n\t\tthis.keepFocusInside();\n\t}\n\n\t/**\n\t * Create a Moment object from a date string. With no currentDate supplied, default to a Moment\n\t * object representing now. If a null value is passed, return a null value.\n\t *\n\t * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.\n\t * @return {?moment.Moment} Moment object for selected date or null.\n\t */\n\tgetMomentDate( currentDate ) {\n\t\tif ( null === currentDate ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn currentDate ? moment( currentDate ) : moment();\n\t}\n\n\tgetEventsPerDay( day ) {\n\t\tif ( ! this.props.events?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.props.events.filter( ( eventDay ) =>\n\t\t\tday.isSame( eventDay.date, 'day' )\n\t\t);\n\t}\n\n\trender() {\n\t\tconst { currentDate, isInvalidDate } = this.props;\n\t\tconst momentDate = this.getMomentDate( currentDate );\n\n\t\treturn (\n\t\t\t<div className=\"components-datetime__date\" ref={ this.nodeRef }>\n\t\t\t\t<DayPickerSingleDateController\n\t\t\t\t\tdate={ momentDate }\n\t\t\t\t\tdaySize={ 30 }\n\t\t\t\t\tfocused\n\t\t\t\t\thideKeyboardShortcutsPanel\n\t\t\t\t\t// This is a hack to force the calendar to update on month or year change\n\t\t\t\t\t// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665\n\t\t\t\t\tkey={ `datepicker-controller-${\n\t\t\t\t\t\tmomentDate ? momentDate.format( 'MM-YYYY' ) : 'null'\n\t\t\t\t\t}` }\n\t\t\t\t\tnoBorder\n\t\t\t\t\tnumberOfMonths={ 1 }\n\t\t\t\t\tonDateChange={ this.onChangeMoment }\n\t\t\t\t\ttransitionDuration={ 0 }\n\t\t\t\t\tweekDayFormat=\"ddd\"\n\t\t\t\t\tdayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }\n\t\t\t\t\tisRTL={ isRTL() }\n\t\t\t\t\tisOutsideRange={ ( date ) => {\n\t\t\t\t\t\treturn isInvalidDate && isInvalidDate( date.toDate() );\n\t\t\t\t\t} }\n\t\t\t\t\tonPrevMonthClick={ this.onMonthPreviewedHandler }\n\t\t\t\t\tonNextMonthClick={ this.onMonthPreviewedHandler }\n\t\t\t\t\trenderDayContents={ ( day ) => (\n\t\t\t\t\t\t<DatePickerDay\n\t\t\t\t\t\t\tday={ day }\n\t\t\t\t\t\t\tevents={ this.getEventsPerDay( day ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n}\n\nexport default DatePicker;\n"]}

package/build-module/divider/component.js

@@ -27,18 +27,17 @@ function Divider(props, forwardedRef) {
  * @example
  * ```js
  * import {
- * 		__experimentalDivider as Divider,
- * 		__experimentalText as Text,
- * 		__experimentalVStack as VStack,
- * } from `@wordpress/components`;
+ *     __experimentalDivider as Divider,
+ *     __experimentalText as Text }
+ * from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
- * 		<VStack spacing={4}>
- * 			<Text>Some text here</Text>
+ * 		<ListGroup>
+ * 			<FormGroup>...</FormGroup>
  * 			<Divider />
- * 			<Text>Some more text here</Text>
- * 		</VStack>
+ * 			<FormGroup>...</FormGroup>
+ * 		</ListGroup>
  * 	);
  * }
  * ```

package/build-module/divider/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["Separator","contextConnect","useContextSystem","DividerView","Divider","props","forwardedRef","contextProps","ConnectedDivider"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B,C,CACA;;AAGA;AACA;AACA;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,eAJP;AAKA,SAASC,WAAT,QAA4B,UAA5B;;AAGA,SAASC,OAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAGL,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAArC;AAEA,SACC,cAAC,SAAD;AACC,IAAA,EAAE,EAAGF;AADN,KAEMI,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,gBAAgB,GAAGP,cAAc,CAAEG,OAAF,EAAW,SAAX,CAAvC;AAEA,eAAeI,gBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction Divider(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * @example\n * ```js\n * import {\n * \t\t__experimentalDivider as Divider,\n * \t\t__experimentalText as Text,\n * \t\t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack spacing={4}>\n * \t\t\t<Text>Some text here</Text>\n * \t\t\t<Divider />\n * \t\t\t<Text>Some more text here</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nconst ConnectedDivider = contextConnect( Divider, 'Divider' );\n\nexport default ConnectedDivider;\n"]}
+{"version":3,"sources":["@wordpress/components/src/divider/component.tsx"],"names":["Separator","contextConnect","useContextSystem","DividerView","Divider","props","forwardedRef","contextProps","ConnectedDivider"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B,C,CACA;;AAGA;AACA;AACA;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,eAJP;AAKA,SAASC,WAAT,QAA4B,UAA5B;;AAGA,SAASC,OAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,YAAY,GAAGL,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAArC;AAEA,SACC,cAAC,SAAD;AACC,IAAA,EAAE,EAAGF;AADN,KAEMI,YAFN;AAGC,IAAA,GAAG,EAAGD;AAHP,KADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,gBAAgB,GAAGP,cAAc,CAAEG,OAAF,EAAW,SAAX,CAAvC;AAEA,eAAeI,gBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Separator } from 'reakit';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { DividerView } from './styles';\nimport type { Props } from './types';\n\nfunction Divider(\n\tprops: WordPressComponentProps< Props, 'hr', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst contextProps = useContextSystem( props, 'Divider' );\n\n\treturn (\n\t\t<Separator\n\t\t\tas={ DividerView }\n\t\t\t{ ...contextProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/**\n * `Divider` is a layout component that separates groups of related content.\n *\n * @example\n * ```js\n * import {\n *     __experimentalDivider as Divider,\n *     __experimentalText as Text }\n * from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<ListGroup>\n * \t\t\t<FormGroup>...</FormGroup>\n * \t\t\t<Divider />\n * \t\t\t<FormGroup>...</FormGroup>\n * \t\t</ListGroup>\n * \t);\n * }\n * ```\n */\nconst ConnectedDivider = contextConnect( Divider, 'Divider' );\n\nexport default ConnectedDivider;\n"]}