@wordpress/components 19.15.0 → 20.0.0

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

@@ -19,8 +19,18 @@ var _icons = require("@wordpress/icons");
 
 var _i18n = require("@wordpress/i18n");
 
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+
 var _ = require("../");
 
+var _selectControlStyles = require("../select-control/styles/select-control-styles");
+
+var _chevronDown = _interopRequireDefault(require("../select-control/chevron-down"));
+
+var _styles = require("./styles");
+
+var _baseControlStyles = require("../base-control/styles/base-control-styles");
+
 /**
  * External dependencies
  */
@@ -76,12 +86,18 @@ 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 {
@@ -102,6 +118,15 @@ function CustomSelectControl(_ref3) {
     } : undefined),
     stateReducer
   });
+  const [isFocused, setIsFocused] = (0, _element.useState)(false);
+
+  if (!__nextUnconstrainedWidth) {
+    (0, _deprecated.default)('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) {
@@ -137,24 +162,29 @@ function CustomSelectControl(_ref3) {
     as: "label"
   }, getLabelProps()), label) :
   /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-  (0, _element.createElement)("label", getLabelProps({
+  (0, _element.createElement)(_baseControlStyles.StyledLabel, getLabelProps({
     className: 'components-custom-select-control__label'
-  }), label), (0, _element.createElement)(_.Button, getToggleButtonProps({
+  }), label), (0, _element.createElement)(_styles.InputBaseWithBackCompatMinWidth, {
+    __next36pxDefaultSize: __next36pxDefaultSize,
+    __nextUnconstrainedWidth: __nextUnconstrainedWidth,
+    isFocused: isOpen || isFocused,
+    __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
+    labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
+    size: size,
+    suffix: (0, _element.createElement)(_chevronDown.default, null)
+  }, (0, _element.createElement)(_selectControlStyles.Select, (0, _extends2.default)({
+    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: (0, _classnames.default)('components-custom-select-control__button', {
-      'is-next-36px-default-size': __next36pxDefaultSize
-    }),
-    isSmall: !__next36pxDefaultSize,
+    className: 'components-custom-select-control__button',
     describedBy: getDescribedBy()
-  }), itemToString(selectedItem), (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.chevronDown,
-    className: (0, _classnames.default)('components-custom-select-control__button-icon', {
-      'is-next-36px-default-size': __next36pxDefaultSize
-    }),
-    size: 18
-  })), (0, _element.createElement)("ul", (0, _extends2.default)({}, menuProps, {
+  })), itemToString(selectedItem))), (0, _element.createElement)("ul", (0, _extends2.default)({}, menuProps, {
     onKeyDown: onKeyDownHandler
   }), isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key
   (0, _element.createElement)("li", getItemProps({

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","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","chevronDown","map","index","key","__experimentalHint","style","check"],"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":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","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","check"],"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/custom-select-control/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputBaseWithBackCompatMinWidth = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+var _react = require("@emotion/react");
+
+var _inputBase = _interopRequireDefault(require("../input-control/input-base"));
+
+var _inputControlStyles = require("../input-control/styles/input-control-styles");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/(0, _react.css)(_inputControlStyles.Container, "{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== */") : '';
+
+const InputBaseWithBackCompatMinWidth = ( /*#__PURE__*/0, _base.default)(_inputBase.default, 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= */"));
+exports.InputBaseWithBackCompatMinWidth = InputBaseWithBackCompatMinWidth;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"names":["backCompatMinWidth","props","__nextUnconstrainedWidth","css","InputControlContainer","InputBaseWithBackCompatMinWidth","InputBase"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAQA,MAAMA,kBAAkB,GAAKC,KAAF,IAC1B,CAAEA,KAAK,CAACC,wBAAR,oBACGC,UADH,EAEMC,6BAFN,o5CAMG,EAPJ;;AASO,MAAMC,+BAA+B,GAAG,iCAAQC,kBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACxCN,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/date-time/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TIMEZONELESS_FORMAT = void 0;
+const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss";
+exports.TIMEZONELESS_FORMAT = TIMEZONELESS_FORMAT;
+//# sourceMappingURL=constants.js.map

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

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

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

@@ -10,86 +10,32 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useLilius = require("use-lilius");
 
-var _moment = _interopRequireDefault(require("moment"));
-
-require("react-dates/initialize");
-
-var _DayPickerSingleDateController = _interopRequireDefault(require("react-dates/lib/components/DayPickerSingleDateController"));
+var _dateFns = require("date-fns");
 
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _utils = require("./utils");
+var _date = require("@wordpress/date");
 
 var _styles = require("./styles");
 
+var _utils = require("../utils");
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _constants = require("../constants");
+
 /**
  * External dependencies
  */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-// `react-dates` doesn't tree-shake correctly, so we import from the individual
-// component here.
 
 /**
  * WordPress dependencies
  */
 
-/**
- * Internal dependencies
- */
-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 = (0, _element.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.
-   */
-
-  (0, _element.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 = (0, _moment.default)(day).format(ARIAL_LABEL_TIME_FORMAT);
-
-    if (!events.length) {
-      // Set aria-label without event description.
-      parentNode.setAttribute('aria-label', dayAriaLabel);
-      return;
-    }
-
-    const dayWithEventsDescription = (0, _i18n.sprintf)( // translators: 1: Calendar day format, 2: Calendar event number.
-    (0, _i18n._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 (0, _element.createElement)(_styles.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'));
-}
 /**
  * DatePicker is a React component that renders a calendar for date selection.
  *
@@ -109,142 +55,185 @@ function DatePickerDay(_ref) {
  * };
  * ```
  */
-
-
-function DatePicker(_ref2) {
+function DatePicker(_ref) {
   let {
     currentDate,
     onChange,
-    events,
+    events = [],
     isInvalidDate,
     onMonthPreviewed,
     startOfWeek = 0
-  } = _ref2;
-  const nodeRef = (0, _element.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 ? (0, _utils.inputToDate)(currentDate) : new Date();
+  const {
+    calendar,
+    viewing,
+    setSelected,
+    setViewing,
+    isSelected,
+    viewPreviousMonth,
+    viewNextMonth
+  } = (0, _useLilius.useLilius)({
+    selected: [(0, _dateFns.startOfDay)(date)],
+    viewing: (0, _dateFns.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] = (0, _element.useState)((0, _dateFns.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] = (0, _element.useState)(false); // Update internal state when currentDate prop changes.
+
+  const [prevCurrentDate, setPrevCurrentDate] = (0, _element.useState)(currentDate);
+
+  if (currentDate !== prevCurrentDate) {
+    setPrevCurrentDate(currentDate);
+    setSelected([(0, _dateFns.startOfDay)(date)]);
+    setViewing((0, _dateFns.startOfDay)(date));
+    setFocusable((0, _dateFns.startOfDay)(date));
+  }
 
-      focusRegion.focus();
+  return (0, _element.createElement)("div", {
+    className: "components-datetime__date",
+    role: "application",
+    "aria-label": (0, _i18n.__)('Calendar')
+  }, (0, _element.createElement)(_styles.Navigator, null, (0, _element.createElement)(_button.default, {
+    icon: (0, _i18n.isRTL)() ? _icons.arrowRight : _icons.arrowLeft,
+    variant: "tertiary",
+    "aria-label": (0, _i18n.__)('View previous month'),
+    onClick: () => {
+      viewPreviousMonth();
+      setFocusable((0, _dateFns.subMonths)(focusable, 1));
+      onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed((0, _dateFns.format)((0, _dateFns.subMonths)(viewing, 1), _constants.TIMEZONELESS_FORMAT));
+    }
+  }), (0, _element.createElement)(_styles.NavigatorHeading, {
+    level: 3
+  }, (0, _element.createElement)("strong", null, (0, _date.dateI18n)('F', viewing, -viewing.getTimezoneOffset())), ' ', (0, _date.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())), (0, _element.createElement)(_button.default, {
+    icon: (0, _i18n.isRTL)() ? _icons.arrowLeft : _icons.arrowRight,
+    variant: "tertiary",
+    "aria-label": (0, _i18n.__)('View next month'),
+    onClick: () => {
+      viewNextMonth();
+      setFocusable((0, _dateFns.addMonths)(focusable, 1));
+      onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed((0, _dateFns.format)((0, _dateFns.addMonths)(viewing, 1), _constants.TIMEZONELESS_FORMAT));
+    }
+  })), (0, _element.createElement)(_styles.Calendar, {
+    onFocus: () => setIsFocusWithinCalendar(true),
+    onBlur: () => setIsFocusWithinCalendar(false)
+  }, calendar[0][0].map(day => (0, _element.createElement)(_styles.DayOfWeek, {
+    key: day.toString()
+  }, (0, _date.dateI18n)('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => {
+    if (!(0, _dateFns.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 ? (0, _moment.default)(currentDate) : (0, _moment.default)();
-    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 (0, _element.createElement)(Day, {
+      key: day.toString(),
+      day: day,
+      column: index + 1,
+      isSelected: isSelected(day),
+      isFocusable: (0, _dateFns.isEqual)(day, focusable),
+      isFocusAllowed: isFocusWithinCalendar,
+      isToday: (0, _dateFns.isSameDay)(day, new Date()),
+      isInvalid: isInvalidDate ? isInvalidDate(day) : false,
+      numEvents: events.filter(event => (0, _dateFns.isSameDay)(event.date, day)).length,
+      onClick: () => {
+        setSelected([day]);
+        setFocusable(day);
+        onChange === null || onChange === void 0 ? void 0 : onChange((0, _dateFns.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()), _constants.TIMEZONELESS_FORMAT));
+      },
+      onKeyDown: event => {
+        let nextFocusable;
+
+        if (event.key === 'ArrowLeft') {
+          nextFocusable = (0, _dateFns.addDays)(day, (0, _i18n.isRTL)() ? 1 : -1);
+        }
+
+        if (event.key === 'ArrowRight') {
+          nextFocusable = (0, _dateFns.addDays)(day, (0, _i18n.isRTL)() ? -1 : 1);
+        }
+
+        if (event.key === 'ArrowUp') {
+          nextFocusable = (0, _dateFns.subWeeks)(day, 1);
+        }
+
+        if (event.key === 'ArrowDown') {
+          nextFocusable = (0, _dateFns.addWeeks)(day, 1);
+        }
+
+        if (nextFocusable) {
+          setFocusable(nextFocusable);
+
+          if (!(0, _dateFns.isSameMonth)(nextFocusable, viewing)) {
+            setViewing(nextFocusable);
+            onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed((0, _dateFns.format)(nextFocusable, _constants.TIMEZONELESS_FORMAT));
+          }
+        }
+      }
+    });
+  }))));
+}
 
-    keepFocusInside();
-  };
+function Day(_ref2) {
+  let {
+    day,
+    column,
+    isSelected,
+    isFocusable,
+    isFocusAllowed,
+    isToday,
+    isInvalid,
+    numEvents,
+    onClick,
+    onKeyDown
+  } = _ref2;
+  const ref = (0, _element.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 [];
+  (0, _element.useEffect)(() => {
+    if (ref.current && isFocusable && isFocusAllowed) {
+      ref.current.focus();
     }
-
-    return events.filter(eventDay => day.isSame(eventDay.date, 'day'));
-  };
-
-  const momentDate = (0, _utils.getMomentDate)(currentDate);
-  return (0, _element.createElement)("div", {
-    className: "components-datetime__date",
-    ref: nodeRef
-  }, (0, _element.createElement)(_DayPickerSingleDateController.default, {
-    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 (0, _element.createElement)(_styles.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: (0, _i18n.isRTL)(),
-    isOutsideRange: date => {
-      return !!isInvalidDate && isInvalidDate(date.toDate());
-    },
-    firstDayOfWeek: startOfWeek,
-    onPrevMonthClick: onMonthPreviewedHandler,
-    onNextMonthClick: onMonthPreviewedHandler,
-    renderDayContents: day => (0, _element.createElement)(DatePickerDay, {
-      day: day,
-      events: getEventsPerDay(day)
-    }),
-    renderMonthElement: _ref3 => {
-      let {
-        month
-      } = _ref3;
-      return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("strong", null, month.format('MMMM')), ' ', month.format('YYYY'));
-    },
-    renderNavPrevButton: _ref4 => {
-      let {
-        ariaLabel,
-        ...props
-      } = _ref4;
-      return (0, _element.createElement)(_styles.NavPrevButton, (0, _extends2.default)({
-        icon: _icons.arrowLeft,
-        variant: "tertiary",
-        "aria-label": ariaLabel
-      }, props));
-    },
-    renderNavNextButton: _ref5 => {
-      let {
-        ariaLabel,
-        ...props
-      } = _ref5;
-      return (0, _element.createElement)(_styles.NavNextButton, (0, _extends2.default)({
-        icon: _icons.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
+  }, (0, _date.dateI18n)('j', day, -day.getTimezoneOffset()));
+}
+
+function getDayLabel(date, isSelected, numEvents) {
+  const {
+    formats
+  } = (0, _date.__experimentalGetSettings)();
+  const localizedDate = (0, _date.dateI18n)(formats.date, date, -date.getTimezoneOffset());
+
+  if (isSelected && numEvents > 0) {
+    return (0, _i18n.sprintf)( // translators: 1: The calendar date. 2: Number of events on the calendar date.
+    (0, _i18n._n)('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents);
+  } else if (isSelected) {
+    return (0, _i18n.sprintf)( // translators: %s: The calendar date.
+    (0, _i18n.__)('%1$s. Selected'), localizedDate);
+  } else if (numEvents > 0) {
+    return (0, _i18n.sprintf)( // translators: 1: The calendar date. 2: Number of events on the calendar date.
+    (0, _i18n._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents);
+  }
+
+  return localizedDate;
 }
 
 var _default = DatePicker;