@wordpress/components 19.15.0 → 20.0.0

package/build-module/custom-select-control/index.js

@@ -10,14 +10,19 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { Icon, check, chevronDown } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
 
-import { Button, VisuallyHidden } from '../';
+import { VisuallyHidden } from '../';
+import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
+import SelectControlChevronDown from '../select-control/chevron-down';
+import { InputBaseWithBackCompatMinWidth } from './styles';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const itemToString = item => item === null || item === void 0 ? void 0 : item.name; // This is needed so that in Windows, where
 // the menu does not necessarily open on
@@ -63,12 +68,18 @@ export default function CustomSelectControl(_ref3) {
   let {
     /** Start opting into the larger default height that will become the default size in a future version. */
     __next36pxDefaultSize = false,
+
+    /** Start opting into the unconstrained width that will become the default in a future version. */
+    __nextUnconstrainedWidth = false,
     className,
     hideLabelFromVision,
     label,
     describedBy,
     options: items,
     onChange: onSelectedItemChange,
+
+    /** @type {import('../select-control/types').SelectControlProps.size} */
+    size = 'default',
     value: _selectedItem
   } = _ref3;
   const {
@@ -89,6 +100,15 @@ export default function CustomSelectControl(_ref3) {
     } : undefined),
     stateReducer
   });
+  const [isFocused, setIsFocused] = useState(false);
+
+  if (!__nextUnconstrainedWidth) {
+    deprecated('Constrained width styles for wp.components.CustomSelectControl', {
+      since: '6.1',
+      version: '6.4',
+      hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
+    });
+  }
 
   function getDescribedBy() {
     if (describedBy) {
@@ -124,24 +144,29 @@ export default function CustomSelectControl(_ref3) {
     as: "label"
   }, getLabelProps()), label) :
   /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-  createElement("label", getLabelProps({
+  createElement(StyledLabel, getLabelProps({
     className: 'components-custom-select-control__label'
-  }), label), createElement(Button, getToggleButtonProps({
+  }), label), createElement(InputBaseWithBackCompatMinWidth, {
+    __next36pxDefaultSize: __next36pxDefaultSize,
+    __nextUnconstrainedWidth: __nextUnconstrainedWidth,
+    isFocused: isOpen || isFocused,
+    __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
+    labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
+    size: size,
+    suffix: createElement(SelectControlChevronDown, null)
+  }, createElement(SelectControlSelect, _extends({
+    as: "button",
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    selectSize: size,
+    __next36pxDefaultSize: __next36pxDefaultSize
+  }, getToggleButtonProps({
     // This is needed because some speech recognition software don't support `aria-labelledby`.
     'aria-label': label,
     'aria-labelledby': undefined,
-    className: classnames('components-custom-select-control__button', {
-      'is-next-36px-default-size': __next36pxDefaultSize
-    }),
-    isSmall: !__next36pxDefaultSize,
+    className: 'components-custom-select-control__button',
     describedBy: getDescribedBy()
-  }), itemToString(selectedItem), createElement(Icon, {
-    icon: chevronDown,
-    className: classnames('components-custom-select-control__button-icon', {
-      'is-next-36px-default-size': __next36pxDefaultSize
-    }),
-    size: 18
-  })), createElement("ul", _extends({}, menuProps, {
+  })), itemToString(selectedItem))), createElement("ul", _extends({}, menuProps, {
     onKeyDown: onKeyDownHandler
   }), isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key
   createElement("li", getItemProps({

package/build-module/custom-select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["useSelect","classnames","Icon","check","chevronDown","__","sprintf","useCallback","Button","VisuallyHidden","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","isSmall","map","index","key","__experimentalHint","style"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check, chevronDown } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button, VisuallyHidden } from '../';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next36pxDefaultSize = false,\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<label\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t) }\n\t\t\t<Button\n\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-custom-select-control__button',\n\t\t\t\t\t\t{ 'is-next-36px-default-size': __next36pxDefaultSize }\n\t\t\t\t\t),\n\t\t\t\t\tisSmall: ! __next36pxDefaultSize,\n\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-custom-select-control__button-icon',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-next-36px-default-size': __next36pxDefaultSize,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tsize={ 18 }\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-36px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next36pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["useSelect","classnames","Icon","check","__","sprintf","useCallback","useState","deprecated","VisuallyHidden","Select","SelectControlSelect","SelectControlChevronDown","InputBaseWithBackCompatMinWidth","StyledLabel","itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","__nextUnconstrainedWidth","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","size","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","isFocused","setIsFocused","since","version","hint","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","map","index","key","__experimentalHint","style"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../';\nimport { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';\nimport SelectControlChevronDown from '../select-control/chevron-down';\nimport { InputBaseWithBackCompatMinWidth } from './styles';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next36pxDefaultSize = false,\n\t/** Start opting into the unconstrained width that will become the default in a future version. */\n\t__nextUnconstrainedWidth = false,\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\t/** @type {import('../select-control/types').SelectControlProps.size} */\n\tsize = 'default',\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tif ( ! __nextUnconstrainedWidth ) {\n\t\tdeprecated(\n\t\t\t'Constrained width styles for wp.components.CustomSelectControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<StyledLabel\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</StyledLabel>\n\t\t\t) }\n\t\t\t<InputBaseWithBackCompatMinWidth\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t__nextUnconstrainedWidth={ __nextUnconstrainedWidth }\n\t\t\t\tisFocused={ isOpen || isFocused }\n\t\t\t\t__unstableInputWidth={\n\t\t\t\t\t__nextUnconstrainedWidth ? undefined : 'auto'\n\t\t\t\t}\n\t\t\t\tlabelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ <SelectControlChevronDown /> }\n\t\t\t>\n\t\t\t\t<SelectControlSelect\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t\t\tselectSize={ size }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t</SelectControlSelect>\n\t\t\t</InputBaseWithBackCompatMinWidth>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-36px-default-size':\n\t\t\t\t\t\t\t\t\t\t\t__next36pxDefaultSize,\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\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/custom-select-control/styles.js

@@ -0,0 +1,22 @@
+import _styled from "@emotion/styled/base";
+
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import InputBase from '../input-control/input-base';
+import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
+
+const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/css(InputControlContainer, "{min-width:130px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:backCompatMinWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5pbXBvcnQgeyBDb250YWluZXIgYXMgSW5wdXRDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuXG50eXBlIEJhY2tDb21wYXRNaW5XaWR0aFByb3BzID0ge1xuXHRfX25leHRVbmNvbnN0cmFpbmVkV2lkdGg6IGJvb2xlYW47XG59O1xuXG5jb25zdCBiYWNrQ29tcGF0TWluV2lkdGggPSAoIHByb3BzOiBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyApID0+XG5cdCEgcHJvcHMuX19uZXh0VW5jb25zdHJhaW5lZFdpZHRoXG5cdFx0PyBjc3NgXG5cdFx0XHRcdCR7IElucHV0Q29udHJvbENvbnRhaW5lciB9IHtcblx0XHRcdFx0XHRtaW4td2lkdGg6IDEzMHB4O1xuXHRcdFx0XHR9XG5cdFx0ICBgXG5cdFx0OiAnJztcblxuZXhwb3J0IGNvbnN0IElucHV0QmFzZVdpdGhCYWNrQ29tcGF0TWluV2lkdGggPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHQkeyBiYWNrQ29tcGF0TWluV2lkdGggfVxuYDtcbiJdfQ== */") : '';
+
+export const InputBaseWithBackCompatMinWidth = /*#__PURE__*/_styled(InputBase, process.env.NODE_ENV === "production" ? {
+  target: "eswuck60"
+} : {
+  target: "eswuck60",
+  label: "InputBaseWithBackCompatMinWidth"
+})(backCompatMinWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0QmFzZSBmcm9tICcuLi9pbnB1dC1jb250cm9sL2lucHV0LWJhc2UnO1xuaW1wb3J0IHsgQ29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lciB9IGZyb20gJy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcblxudHlwZSBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyA9IHtcblx0X19uZXh0VW5jb25zdHJhaW5lZFdpZHRoOiBib29sZWFuO1xufTtcblxuY29uc3QgYmFja0NvbXBhdE1pbldpZHRoID0gKCBwcm9wczogQmFja0NvbXBhdE1pbldpZHRoUHJvcHMgKSA9PlxuXHQhIHByb3BzLl9fbmV4dFVuY29uc3RyYWluZWRXaWR0aFxuXHRcdD8gY3NzYFxuXHRcdFx0XHQkeyBJbnB1dENvbnRyb2xDb250YWluZXIgfSB7XG5cdFx0XHRcdFx0bWluLXdpZHRoOiAxMzBweDtcblx0XHRcdFx0fVxuXHRcdCAgYFxuXHRcdDogJyc7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEJhc2VXaXRoQmFja0NvbXBhdE1pbldpZHRoID0gc3R5bGVkKCBJbnB1dEJhc2UgKWBcblx0JHsgYmFja0NvbXBhdE1pbldpZHRoIH1cbmA7XG4iXX0= */"));
+//# sourceMappingURL=styles.js.map

package/build-module/custom-select-control/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"names":["css","InputBase","Container","InputControlContainer","backCompatMinWidth","props","__nextUnconstrainedWidth","InputBaseWithBackCompatMinWidth"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,OAAOC,SAAP,MAAsB,6BAAtB;AACA,SAASC,SAAS,IAAIC,qBAAtB,QAAmD,8CAAnD;;AAMA,MAAMC,kBAAkB,GAAKC,KAAF,IAC1B,CAAEA,KAAK,CAACC,wBAAR,gBACGN,GADH,CAEMG,qBAFN,o5CAMG,EAPJ;;AASA,OAAO,MAAMI,+BAA+B,GAAG,qBAAQN,SAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACxCG,kBADwC,qzCAArC","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputBase from '../input-control/input-base';\nimport { Container as InputControlContainer } from '../input-control/styles/input-control-styles';\n\ntype BackCompatMinWidthProps = {\n\t__nextUnconstrainedWidth: boolean;\n};\n\nconst backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>\n\t! props.__nextUnconstrainedWidth\n\t\t? css`\n\t\t\t\t${ InputControlContainer } {\n\t\t\t\t\tmin-width: 130px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n\nexport const InputBaseWithBackCompatMinWidth = styled( InputBase )`\n\t${ backCompatMinWidth }\n`;\n"]}

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

@@ -0,0 +1,2 @@
+export const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/date-time/constants.ts"],"names":["TIMEZONELESS_FORMAT"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAG,uBAA5B","sourcesContent":["export const TIMEZONELESS_FORMAT = \"yyyy-MM-dd'T'HH:mm:ss\";\n"]}

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

@@ -1,78 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import moment from 'moment';
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize'; // `react-dates` doesn't tree-shake correctly, so we import from the individual
-// component here.
-
-import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
+import { useLilius } from 'use-lilius';
+import { format, isSameDay, subMonths, addMonths, startOfDay, isEqual, addDays, subWeeks, addWeeks, isSameMonth } from 'date-fns';
 /**
  * WordPress dependencies
  */
 
-import { useEffect, useRef } from '@wordpress/element';
-import { isRTL, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
+import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
+import { useState, useRef, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
-import { getMomentDate } from './utils';
-import { Day, NavPrevButton, NavNextButton } from './styles';
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL';
-
-const noop = () => {};
-
-function DatePickerDay(_ref) {
-  let {
-    day,
-    events = []
-  } = _ref;
-  const ref = useRef(null);
-  /*
-   * a11y hack to make the `There is/are n events` string
-   * available speaking for readers,
-   * re-defining the aria-label attribute.
-   * This attribute is handled by the react-dates component.
-   */
-
-  useEffect(() => {
-    var _ref$current;
-
-    // Bail when no parent node.
-    if (!((ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentNode) instanceof Element)) {
-      return;
-    }
-
-    const {
-      parentNode
-    } = ref.current;
-    const dayAriaLabel = moment(day).format(ARIAL_LABEL_TIME_FORMAT);
-
-    if (!events.length) {
-      // Set aria-label without event description.
-      parentNode.setAttribute('aria-label', dayAriaLabel);
-      return;
-    }
-
-    const dayWithEventsDescription = sprintf( // translators: 1: Calendar day format, 2: Calendar event number.
-    _n('%1$s. There is %2$d event.', '%1$s. There are %2$d events.', events.length), dayAriaLabel, events.length);
-    parentNode.setAttribute('aria-label', dayWithEventsDescription);
-  }, [day, events.length]);
-  return createElement(Day, {
-    ref: ref,
-    className: "components-datetime__date__day" // Unused, for backwards compatibility.
-    ,
-    hasEvents: !!(events !== null && events !== void 0 && events.length),
-    alignment: "center"
-  }, day.format('D'));
-}
+import { Navigator, NavigatorHeading, Calendar, DayOfWeek, DayButton } from './styles';
+import { inputToDate } from '../utils';
+import Button from '../../button';
+import { TIMEZONELESS_FORMAT } from '../constants';
 /**
  * DatePicker is a React component that renders a calendar for date selection.
  *
@@ -93,141 +41,187 @@ function DatePickerDay(_ref) {
  * ```
  */
 
-
-export function DatePicker(_ref2) {
+export function DatePicker(_ref) {
   let {
     currentDate,
     onChange,
-    events,
+    events = [],
     isInvalidDate,
     onMonthPreviewed,
     startOfWeek = 0
-  } = _ref2;
-  const nodeRef = useRef(null);
-
-  const onMonthPreviewedHandler = newMonthDate => {
-    onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(newMonthDate.toISOString());
-    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.
-   * This focus loss closes the date picker popover.
-   * Ideally we should add an upstream commit on react-dates to fix this issue.
-   */
-
-
-  const keepFocusInside = () => {
-    if (!nodeRef.current) {
-      return;
-    }
-
-    const {
-      ownerDocument
-    } = nodeRef.current;
-    const {
-      activeElement
-    } = ownerDocument; // If focus was lost.
-
-    if (!activeElement || !nodeRef.current.contains(ownerDocument.activeElement)) {
-      // Retrieve the focus region div.
-      const focusRegion = nodeRef.current.querySelector('.DayPicker_focusRegion');
-
-      if (!(focusRegion instanceof HTMLElement)) {
-        return;
-      } // Keep the focus on focus region.
-
+  } = _ref;
+  const date = currentDate ? inputToDate(currentDate) : new Date();
+  const {
+    calendar,
+    viewing,
+    setSelected,
+    setViewing,
+    isSelected,
+    viewPreviousMonth,
+    viewNextMonth
+  } = useLilius({
+    selected: [startOfDay(date)],
+    viewing: startOfDay(date),
+    weekStartsOn: startOfWeek
+  }); // Used to implement a roving tab index. Tracks the day that receives focus
+  // when the user tabs into the calendar.
+
+  const [focusable, setFocusable] = useState(startOfDay(date)); // Allows us to only programmatically focus() a day when focus was already
+  // within the calendar. This stops us stealing focus from e.g. a TimePicker
+  // input.
+
+  const [isFocusWithinCalendar, setIsFocusWithinCalendar] = useState(false); // Update internal state when currentDate prop changes.
+
+  const [prevCurrentDate, setPrevCurrentDate] = useState(currentDate);
+
+  if (currentDate !== prevCurrentDate) {
+    setPrevCurrentDate(currentDate);
+    setSelected([startOfDay(date)]);
+    setViewing(startOfDay(date));
+    setFocusable(startOfDay(date));
+  }
 
-      focusRegion.focus();
+  return createElement("div", {
+    className: "components-datetime__date",
+    role: "application",
+    "aria-label": __('Calendar')
+  }, createElement(Navigator, null, createElement(Button, {
+    icon: isRTL() ? arrowRight : arrowLeft,
+    variant: "tertiary",
+    "aria-label": __('View previous month'),
+    onClick: () => {
+      viewPreviousMonth();
+      setFocusable(subMonths(focusable, 1));
+      onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(format(subMonths(viewing, 1), TIMEZONELESS_FORMAT));
+    }
+  }), createElement(NavigatorHeading, {
+    level: 3
+  }, createElement("strong", null, dateI18n('F', viewing, -viewing.getTimezoneOffset())), ' ', dateI18n('Y', viewing, -viewing.getTimezoneOffset())), createElement(Button, {
+    icon: isRTL() ? arrowLeft : arrowRight,
+    variant: "tertiary",
+    "aria-label": __('View next month'),
+    onClick: () => {
+      viewNextMonth();
+      setFocusable(addMonths(focusable, 1));
+      onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(format(addMonths(viewing, 1), TIMEZONELESS_FORMAT));
+    }
+  })), createElement(Calendar, {
+    onFocus: () => setIsFocusWithinCalendar(true),
+    onBlur: () => setIsFocusWithinCalendar(false)
+  }, calendar[0][0].map(day => createElement(DayOfWeek, {
+    key: day.toString()
+  }, dateI18n('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => {
+    if (!isSameMonth(day, viewing)) {
+      return null;
     }
-  };
-
-  const onChangeMoment = newDate => {
-    if (!newDate) {
-      return;
-    } // If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
-
 
-    const momentDate = currentDate ? moment(currentDate) : moment();
-    const momentTime = {
-      hours: momentDate.hours(),
-      minutes: momentDate.minutes(),
-      seconds: 0
-    };
-    onChange === null || onChange === void 0 ? void 0 : onChange(newDate.set(momentTime).format(TIMEZONELESS_FORMAT)); // Keep focus on the date picker.
+    return createElement(Day, {
+      key: day.toString(),
+      day: day,
+      column: index + 1,
+      isSelected: isSelected(day),
+      isFocusable: isEqual(day, focusable),
+      isFocusAllowed: isFocusWithinCalendar,
+      isToday: isSameDay(day, new Date()),
+      isInvalid: isInvalidDate ? isInvalidDate(day) : false,
+      numEvents: events.filter(event => isSameDay(event.date, day)).length,
+      onClick: () => {
+        setSelected([day]);
+        setFocusable(day);
+        onChange === null || onChange === void 0 ? void 0 : onChange(format( // Don't change the selected date's time fields.
+        new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT));
+      },
+      onKeyDown: event => {
+        let nextFocusable;
+
+        if (event.key === 'ArrowLeft') {
+          nextFocusable = addDays(day, isRTL() ? 1 : -1);
+        }
+
+        if (event.key === 'ArrowRight') {
+          nextFocusable = addDays(day, isRTL() ? -1 : 1);
+        }
+
+        if (event.key === 'ArrowUp') {
+          nextFocusable = subWeeks(day, 1);
+        }
+
+        if (event.key === 'ArrowDown') {
+          nextFocusable = addWeeks(day, 1);
+        }
+
+        if (nextFocusable) {
+          setFocusable(nextFocusable);
+
+          if (!isSameMonth(nextFocusable, viewing)) {
+            setViewing(nextFocusable);
+            onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(format(nextFocusable, TIMEZONELESS_FORMAT));
+          }
+        }
+      }
+    });
+  }))));
+}
 
-    keepFocusInside();
-  };
+function Day(_ref2) {
+  let {
+    day,
+    column,
+    isSelected,
+    isFocusable,
+    isFocusAllowed,
+    isToday,
+    isInvalid,
+    numEvents,
+    onClick,
+    onKeyDown
+  } = _ref2;
+  const ref = useRef(); // Focus the day when it becomes focusable, e.g. because an arrow key is
+  // pressed. Only do this if focus is allowed - this stops us stealing focus
+  // from e.g. a TimePicker input. Note that isFocusAllowed is not a dep as
+  // there is no point calling focus() on an already focused element.
 
-  const getEventsPerDay = day => {
-    if (!(events !== null && events !== void 0 && events.length)) {
-      return [];
+  useEffect(() => {
+    if (ref.current && isFocusable && isFocusAllowed) {
+      ref.current.focus();
     }
-
-    return events.filter(eventDay => day.isSame(eventDay.date, 'day'));
-  };
-
-  const momentDate = getMomentDate(currentDate);
-  return createElement("div", {
-    className: "components-datetime__date",
-    ref: nodeRef
-  }, createElement(DayPickerSingleDateController, {
-    date: momentDate,
-    initialVisibleMonth: null,
-    daySize: 30,
-    horizontalMonthPadding: 0,
-    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
+  }, [isFocusable]);
+  return createElement(DayButton, {
+    ref: ref,
+    className: "components-datetime__date__day" // Unused, for backwards compatibility.
     ,
-    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());
-    },
-    firstDayOfWeek: startOfWeek,
-    onPrevMonthClick: onMonthPreviewedHandler,
-    onNextMonthClick: onMonthPreviewedHandler,
-    renderDayContents: day => createElement(DatePickerDay, {
-      day: day,
-      events: getEventsPerDay(day)
-    }),
-    renderMonthElement: _ref3 => {
-      let {
-        month
-      } = _ref3;
-      return createElement(Fragment, null, createElement("strong", null, month.format('MMMM')), ' ', month.format('YYYY'));
-    },
-    renderNavPrevButton: _ref4 => {
-      let {
-        ariaLabel,
-        ...props
-      } = _ref4;
-      return createElement(NavPrevButton, _extends({
-        icon: arrowLeft,
-        variant: "tertiary",
-        "aria-label": ariaLabel
-      }, props));
-    },
-    renderNavNextButton: _ref5 => {
-      let {
-        ariaLabel,
-        ...props
-      } = _ref5;
-      return createElement(NavNextButton, _extends({
-        icon: arrowRight,
-        variant: "tertiary",
-        "aria-label": ariaLabel
-      }, props));
-    },
-    onFocusChange: noop
-  }));
+    disabled: isInvalid,
+    tabIndex: isFocusable ? 0 : -1,
+    "aria-label": getDayLabel(day, isSelected, numEvents),
+    column: column,
+    isSelected: isSelected,
+    isToday: isToday,
+    hasEvents: numEvents > 0,
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, dateI18n('j', day, -day.getTimezoneOffset()));
 }
+
+function getDayLabel(date, isSelected, numEvents) {
+  const {
+    formats
+  } = __experimentalGetSettings();
+
+  const localizedDate = dateI18n(formats.date, date, -date.getTimezoneOffset());
+
+  if (isSelected && numEvents > 0) {
+    return sprintf( // translators: 1: The calendar date. 2: Number of events on the calendar date.
+    _n('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents);
+  } else if (isSelected) {
+    return sprintf( // translators: %s: The calendar date.
+    __('%1$s. Selected'), localizedDate);
+  } else if (numEvents > 0) {
+    return sprintf( // translators: 1: The calendar date. 2: Number of events on the calendar date.
+    _n('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents);
+  }
+
+  return localizedDate;
+}
+
 export default DatePicker;
 //# sourceMappingURL=index.js.map