@wordpress/components 28.2.0 → 28.4.0

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_selectControlStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ITEM_PADDING","space","truncateStyles","process","env","NODE_ENV","name","styles","map","toString","WithHintWrapper","exports","_base","target","label","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","COLORS","theme","gray","ExperimentalHintItem","SelectLabel","Select","shouldForwardProp","prop","size","hasCustomRenderProp","heightProperty","getSize","sizes","compact","paddingInlineStart","paddingInlineEnd","chevronIconSize","small","css","background","foreground","CONFIG","fontSize","SelectPopover","SelectItem","SelectedItemCheck","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport { chevronIconSize } from '../select-control/styles/select-control-styles';\nimport type { CustomSelectButtonSize } from './types';\n\nconst ITEM_PADDING = space( 2 );\n\nconst truncateStyles = css`\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nexport const WithHintWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tflex: 1;\n`;\n\nexport const SelectedExperimentalHintWrapper = styled.div`\n\t${ truncateStyles }\n`;\n\nexport const SelectedExperimentalHintItem = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\tmargin-inline-start: ${ space( 2 ) };\n`;\n\nexport const ExperimentalHintItem = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\ttext-align: right;\n\tmargin-inline-end: ${ space( 1 ) };\n`;\n\nexport const SelectLabel = styled( Ariakit.SelectLabel )`\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const Select = styled( Ariakit.Select, {\n\t// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component\n\tshouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',\n} )( ( {\n\tsize,\n\thasCustomRenderProp,\n}: {\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\thasCustomRenderProp: boolean;\n} ) => {\n\tconst heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';\n\n\tconst getSize = () => {\n\t\tconst sizes = {\n\t\t\tcompact: {\n\t\t\t\t[ heightProperty ]: 32,\n\t\t\t\tpaddingInlineStart: 8,\n\t\t\t\tpaddingInlineEnd: 8 + chevronIconSize,\n\t\t\t},\n\t\t\tdefault: {\n\t\t\t\t[ heightProperty ]: 40,\n\t\t\t\tpaddingInlineStart: 16,\n\t\t\t\tpaddingInlineEnd: 16 + chevronIconSize,\n\t\t\t},\n\t\t\tsmall: {\n\t\t\t\t[ heightProperty ]: 24,\n\t\t\t\tpaddingInlineStart: 8,\n\t\t\t\tpaddingInlineEnd: 8 + chevronIconSize,\n\t\t\t},\n\t\t};\n\n\t\treturn sizes[ size ] || sizes.default;\n\t};\n\n\treturn css`\n\t\tdisplay: block;\n\t\tbackground-color: ${ COLORS.theme.background };\n\t\tborder: none;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\tfont-size: ${ CONFIG.fontSize };\n\t\ttext-align: left;\n\t\twidth: 100%;\n\n\t\t&[data-focus-visible] {\n\t\t\toutline: none; // handled by InputBase component\n\t\t}\n\n\t\t${ getSize() }\n\t\t${ ! hasCustomRenderProp && truncateStyles }\n\t`;\n} );\n\nexport const SelectPopover = styled( Ariakit.SelectPopover )`\n\tborder-radius: 2px;\n\tbackground: ${ COLORS.theme.background };\n\tborder: 1px solid ${ COLORS.theme.foreground };\n\n\t&[data-focus-visible] {\n\t\toutline: none; // outline will be on the trigger, rather than the popover\n\t}\n`;\n\nexport const SelectItem = styled( Ariakit.SelectItem )`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: ${ ITEM_PADDING };\n\tfont-size: ${ CONFIG.fontSize };\n\tline-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy\n\t&[data-active-item] {\n\t\tbackground-color: ${ COLORS.theme.gray[ 300 ] };\n\t}\n`;\n\nexport const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-inline-start: ${ ITEM_PADDING };\n\tfont-size: 24px; // Size of checkmark icon\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_react2","_utils","_space","_selectControlStyles","_inputControlStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_EMOTION_STRINGIFIED_CSS_ERROR__","ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","INLINE_PADDING","compact","small","getSelectSize","size","heightProperty","sizes","paddingInlineStart","paddingInlineEnd","chevronIconSize","getSelectItemSize","checkmarkCorrection","Select","exports","_base","process","env","NODE_ENV","shouldForwardProp","prop","target","label","hasCustomRenderProp","css","COLORS","theme","background","foreground","truncateStyles","fontSizeStyles","inputSize","slideDownAndFade","keyframes","opacity","transform","SelectPopover","SelectItem","CONFIG","fontSize","space","gray","name","styles","map","toString","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","WithHintItemWrapper","WithHintItemHint","fontLineHeightBase","SelectedItemCheck","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\nimport { space } from '../utils/space';\nimport { chevronIconSize } from '../select-control/styles/select-control-styles';\nimport { fontSizeStyles } from '../input-control/styles/input-control-styles';\nimport type { CustomSelectButtonSize } from './types';\n\n// TODO: extract to common utils and apply to relevant components\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst INLINE_PADDING = {\n\tcompact: 8, // space(2)\n\tsmall: 8, // space(2)\n\tdefault: 16, // space(4)\n};\n\nconst getSelectSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >,\n\theightProperty: 'minHeight' | 'height'\n) => {\n\tconst sizes = {\n\t\tcompact: {\n\t\t\t[ heightProperty ]: 32,\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,\n\t\t},\n\t\tdefault: {\n\t\t\t[ heightProperty ]: 40,\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default + chevronIconSize,\n\t\t},\n\t\tsmall: {\n\t\t\t[ heightProperty ]: 24,\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small + chevronIconSize,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nconst getSelectItemSize = (\n\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >\n) => {\n\t// Used to visually align the checkmark with the chevron\n\tconst checkmarkCorrection = 6;\n\tconst sizes = {\n\t\tcompact: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.compact,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,\n\t\t},\n\t\tdefault: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.default,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,\n\t\t},\n\t\tsmall: {\n\t\t\tpaddingInlineStart: INLINE_PADDING.small,\n\t\t\tpaddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,\n\t\t},\n\t};\n\n\treturn sizes[ size ] || sizes.default;\n};\n\nexport const Select = styled( Ariakit.Select, {\n\t// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component\n\tshouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',\n} )(\n\t( {\n\t\tsize,\n\t\thasCustomRenderProp,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t\thasCustomRenderProp: boolean;\n\t} ) => css`\n\t\tdisplay: block;\n\t\tbackground-color: ${ COLORS.theme.background };\n\t\tborder: none;\n\t\tcolor: ${ COLORS.theme.foreground };\n\t\tcursor: pointer;\n\t\tfont-family: inherit;\n\t\ttext-align: start;\n\t\tuser-select: none;\n\t\twidth: 100%;\n\n\t\t&[data-focus-visible] {\n\t\t\toutline: none; // handled by InputBase component\n\t\t}\n\n\t\t${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }\n\t\t${ ! hasCustomRenderProp && truncateStyles }\n\t\t${ fontSizeStyles( { inputSize: size } ) }\n\t`\n);\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nexport const SelectPopover = styled( Ariakit.SelectPopover )`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground-color: ${ COLORS.theme.background };\n\tborder-radius: 2px;\n\tborder: 1px solid ${ COLORS.theme.foreground };\n\n\t/* z-index(\".components-popover\") */\n\tz-index: 1000000;\n\n\tmax-height: min( var( --popover-available-height, 400px ), 400px );\n\toverflow: auto;\n\toverscroll-behavior: contain;\n\n\t/* The smallest size without overflowing the container. */\n\tmin-width: min-content;\n\n\t/* Animation */\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\tanimation-name: ${ slideDownAndFade };\n\twill-change: transform, opacity;\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n\n\t&[data-focus-visible] {\n\t\t/* The outline will be on the trigger, rather than the popover. */\n\t\toutline: none;\n\t}\n`;\n\nexport const SelectItem = styled( Ariakit.SelectItem )(\n\t( {\n\t\tsize,\n\t}: {\n\t\tsize: NonNullable< CustomSelectButtonSize[ 'size' ] >;\n\t} ) => css`\n\t\tcursor: default;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tfont-size: ${ CONFIG.fontSize };\n\t\t// TODO: reassess line-height for non-legacy v2\n\t\tline-height: 28px;\n\t\tpadding-block: ${ space( 2 ) };\n\t\tscroll-margin: ${ space( 1 ) };\n\t\tuser-select: none;\n\n\t\t&[aria-disabled='true'] {\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&[data-active-item] {\n\t\t\tbackground-color: ${ COLORS.theme.gray[ 300 ] };\n\t\t}\n\n\t\t${ getSelectItemSize( size ) }\n\t`\n);\n\nconst truncateStyles = css`\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nexport const SelectedExperimentalHintWrapper = styled.div`\n\t${ truncateStyles }\n`;\n\nexport const SelectedExperimentalHintItem = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\tmargin-inline-start: ${ space( 2 ) };\n`;\n\nexport const WithHintItemWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tflex: 1;\n\tcolumn-gap: ${ space( 4 ) };\n`;\n\nexport const WithHintItemHint = styled.span`\n\tcolor: ${ COLORS.theme.gray[ 600 ] };\n\ttext-align: initial;\n\tline-height: ${ CONFIG.fontLineHeightBase };\n\tpadding-inline-end: ${ space( 1 ) };\n\tmargin-block: ${ space( 1 ) };\n`;\n\nexport const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-inline-start: ${ space( 2 ) };\n\n\t// Keep the checkmark vertically aligned at the top. Since the item text has a\n\t// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin\n\t// is applied to keep the correct alignment between the text and the checkmark.\n\talign-self: start;\n\tmargin-block-start: 2px;\n\n\t// Since the checkmark's dimensions are applied with 'em' units, setting a\n\t// font size of 0 allows the space reserved for the checkmark to collapse for\n\t// items that are not selected or that don't have an associated item hint.\n\tfont-size: 0;\n\t${ WithHintItemWrapper } ~ &,\n\t&:not(:empty) {\n\t\tfont-size: 24px; // Size of checkmark icon\n\t}\n`;\n"],"mappings":"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","ignoreList":[]}

package/build/custom-select-control-v2/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control-v2/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nexport type CustomSelectStore = {\n\t/**\n\t * The store object returned by Ariakit's `useSelectStore` hook.\n\t */\n\tstore: Ariakit.SelectStore;\n};\n\nexport type CustomSelectContext = CustomSelectStore | undefined;\n\ntype CustomSelectSize< Size = 'compact' | 'default' > = {\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: Size;\n};\n\nexport type CustomSelectButtonSize = CustomSelectSize<\n\t'compact' | 'default' | 'small'\n>;\n\nexport type CustomSelectButtonProps = {\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the first non-disabled item will be used.\n\t */\n\tdefaultValue?: string | string[];\n\t/**\n\t * A function that receives the new value of the input.\n\t */\n\tonChange?: ( newValue: string | string[] ) => void;\n\t/**\n\t * Can be used to render select UI with custom styled values.\n\t */\n\trenderSelectedValue?: (\n\t\tselectedValue: string | string[]\n\t) => React.ReactNode;\n\t/**\n\t * The value of the control when used in uncontrolled mode.\n\t */\n\tvalue?: string | string[];\n};\n\nexport type _CustomSelectProps = CustomSelectButtonProps & {\n\t/**\n\t * The child elements. This should be composed of `CustomSelectItem` components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Accessible label for the control.\n\t */\n\tlabel: string;\n};\n\nexport type CustomSelectProps = _CustomSelectProps &\n\tCustomSelectButtonProps &\n\tCustomSelectSize;\n\n/**\n * The legacy object structure for the options array.\n */\ntype LegacyOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/**\n * The legacy object returned from the onChange event.\n */\ntype LegacyOnChangeObject = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: LegacyOption;\n};\n\nexport type LegacyCustomSelectProps = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Pass in a description that will be shown to screen readers associated with the\n\t * select trigger button. If no value is passed, the text \"Currently selected:\n\t * selectedItem.name\" will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: LegacyOnChangeObject ) => void;\n\t/**\n\t * A handler for `onBlur` events.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onFocus` events.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOver` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOut` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The options that can be chosen from.\n\t */\n\toptions: Array< LegacyOption >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: LegacyOption;\n\t/**\n\t * Legacy way to add additional text to the right of each option.\n\t *\n\t * @default false\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type CustomSelectItemProps = {\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * If true, the item will be disabled.\n\t *\n\t * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control-v2/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as Ariakit from '@ariakit/react';\n\nexport type CustomSelectStore = {\n\t/**\n\t * The store object returned by Ariakit's `useSelectStore` hook.\n\t */\n\tstore: Ariakit.SelectStore;\n};\n\ntype CustomSelectSize< Size = 'compact' | 'default' > = {\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: Size;\n};\n\nexport type CustomSelectButtonSize = CustomSelectSize<\n\t'compact' | 'default' | 'small'\n>;\n\nexport type CustomSelectContext =\n\t| ( CustomSelectStore & CustomSelectButtonSize )\n\t| undefined;\n\nexport type CustomSelectButtonProps = {\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the first non-disabled item will be used.\n\t */\n\tdefaultValue?: string | string[];\n\t/**\n\t * A function that receives the new value of the input.\n\t */\n\tonChange?: ( newValue: string | string[] ) => void;\n\t/**\n\t * Can be used to render select UI with custom styled values.\n\t */\n\trenderSelectedValue?: (\n\t\tselectedValue: string | string[]\n\t) => React.ReactNode;\n\t/**\n\t * The value of the control when used in uncontrolled mode.\n\t */\n\tvalue?: string | string[];\n};\n\n// Props only exposed on the internal implementation\nexport type _CustomSelectInternalProps = {\n\t/**\n\t * True if the consumer is emulating the legacy component behavior and look\n\t */\n\tisLegacy?: boolean;\n};\n\n// Props that are exposed in exported components\nexport type _CustomSelectProps = CustomSelectButtonProps & {\n\t/**\n\t * Additional className added to the root wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The child elements. This should be composed of `CustomSelectItem` components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Accessible label for the control.\n\t */\n\tlabel: string;\n};\n\nexport type CustomSelectProps = _CustomSelectProps & CustomSelectSize;\n\nexport type CustomSelectItemProps = {\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * If true, the item will be disabled.\n\t *\n\t * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -39,6 +39,7 @@ const noop = () => {};
 function UnforwardedDateTimePicker({
   currentDate,
   is12Hour,
+  dateOrder,
   isInvalidDate,
   onMonthPreviewed = noop,
   onChange,
@@ -53,7 +54,8 @@ function UnforwardedDateTimePicker({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_time.default, {
         currentTime: currentDate,
         onChange: onChange,
-        is12Hour: is12Hour
+        is12Hour: is12Hour,
+        dateOrder: dateOrder
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_date.default, {
         currentDate: currentDate,
         onChange: onChange,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_date","_interopRequireDefault","_time","_styles","_jsxRuntime","noop","UnforwardedDateTimePicker","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","jsx","Wrapper","className","spacing","children","jsxs","Fragment","default","currentTime","DateTimePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper } from './styles';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t<>\n\t\t\t\t<TimePicker\n\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t/>\n\t\t\t\t<DatePicker\n\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\tevents={ events }\n\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t/>\n\t\t\t</>\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAAmC,IAAAK,WAAA,GAAAL,OAAA;AAjBnC;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,yBAAyBA,CACjC;EACCC,WAAW;EACXC,QAAQ;EACRC,aAAa;EACbC,gBAAgB,GAAGL,IAAI;EACvBM,QAAQ;EACRC,MAAM;EACNC;AACoB,CAAC,EACtBC,GAAwB,EACvB;EACD,oBACC,IAAAV,WAAA,CAAAW,GAAA,EAACZ,OAAA,CAAAa,OAAO;IAACF,GAAG,EAAGA,GAAK;IAACG,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjE,IAAAf,WAAA,CAAAgB,IAAA,EAAAhB,WAAA,CAAAiB,QAAA;MAAAF,QAAA,gBACC,IAAAf,WAAA,CAAAW,GAAA,EAACb,KAAA,CAAAoB,OAAU;QACVC,WAAW,EAAGhB,WAAa;QAC3BI,QAAQ,EAAGA,QAAU;QACrBH,QAAQ,EAAGA;MAAU,CACrB,CAAC,eACF,IAAAJ,WAAA,CAAAW,GAAA,EAACf,KAAA,CAAAsB,OAAU;QACVf,WAAW,EAAGA,WAAa;QAC3BI,QAAQ,EAAGA,QAAU;QACrBF,aAAa,EAAGA,aAAe;QAC/BG,MAAM,EAAGA,MAAQ;QACjBF,gBAAgB,EAAGA,gBAAkB;QACrCG,WAAW,EAAGA;MAAa,CAC3B,CAAC;IAAA,CACD;EAAC,CACK,CAAC;AAEZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAEpB,yBAA0B,CAAC;AAAC,IAAAqB,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEvDE,cAAc","ignoreList":[]}
+{"version":3,"names":["_element","require","_date","_interopRequireDefault","_time","_styles","_jsxRuntime","noop","UnforwardedDateTimePicker","currentDate","is12Hour","dateOrder","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","ref","jsx","Wrapper","className","spacing","children","jsxs","Fragment","default","currentTime","DateTimePicker","exports","forwardRef","_default"],"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper } from './styles';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tdateOrder,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t<>\n\t\t\t\t<TimePicker\n\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\tdateOrder={ dateOrder }\n\t\t\t\t/>\n\t\t\t\t<DatePicker\n\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\tevents={ events }\n\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t/>\n\t\t\t</>\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAAmC,IAAAK,WAAA,GAAAL,OAAA;AAhBnC;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMM,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,yBAAyBA,CACjC;EACCC,WAAW;EACXC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,gBAAgB,GAAGN,IAAI;EACvBO,QAAQ;EACRC,MAAM;EACNC;AACoB,CAAC,EACtBC,GAAwB,EACvB;EACD,oBACC,IAAAX,WAAA,CAAAY,GAAA,EAACb,OAAA,CAAAc,OAAO;IAACF,GAAG,EAAGA,GAAK;IAACG,SAAS,EAAC,qBAAqB;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,eACjE,IAAAhB,WAAA,CAAAiB,IAAA,EAAAjB,WAAA,CAAAkB,QAAA;MAAAF,QAAA,gBACC,IAAAhB,WAAA,CAAAY,GAAA,EAACd,KAAA,CAAAqB,OAAU;QACVC,WAAW,EAAGjB,WAAa;QAC3BK,QAAQ,EAAGA,QAAU;QACrBJ,QAAQ,EAAGA,QAAU;QACrBC,SAAS,EAAGA;MAAW,CACvB,CAAC,eACF,IAAAL,WAAA,CAAAY,GAAA,EAAChB,KAAA,CAAAuB,OAAU;QACVhB,WAAW,EAAGA,WAAa;QAC3BK,QAAQ,EAAGA,QAAU;QACrBF,aAAa,EAAGA,aAAe;QAC/BG,MAAM,EAAGA,MAAQ;QACjBF,gBAAgB,EAAGA,gBAAkB;QACrCG,WAAW,EAAGA;MAAa,CAC3B,CAAC;IAAA,CACD;EAAC,CACK,CAAC;AAEZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMW,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAErB,yBAA0B,CAAC;AAAC,IAAAsB,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEvDE,cAAc","ignoreList":[]}

package/build/date-time/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "DatePicker", {
     return _date.default;
   }
 });
+Object.defineProperty(exports, "TimeInput", {
+  enumerable: true,
+  get: function () {
+    return _timeInput.default;
+  }
+});
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function () {
@@ -19,6 +25,7 @@ Object.defineProperty(exports, "TimePicker", {
 exports.default = void 0;
 var _date = _interopRequireDefault(require("./date"));
 var _time = _interopRequireDefault(require("./time"));
+var _timeInput = _interopRequireDefault(require("./time-input"));
 var _dateTime = _interopRequireDefault(require("./date-time"));
 /**
  * Internal dependencies

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

@@ -1 +1 @@
-{"version":3,"names":["_date","_interopRequireDefault","require","_time","_dateTime","_default","exports","default","DateTimePicker"],"sources":["@wordpress/components/src/date-time/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\nimport { default as DateTimePicker } from './date-time';\n\nexport { DatePicker, TimePicker };\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AALA;AACA;AACA;AAFA,IAAAG,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAQeC,iBAAc","ignoreList":[]}
+{"version":3,"names":["_date","_interopRequireDefault","require","_time","_timeInput","_dateTime","_default","exports","default","DateTimePicker"],"sources":["@wordpress/components/src/date-time/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { default as DatePicker } from './date';\nimport { default as TimePicker } from './time';\nimport { default as TimeInput } from './time-input';\nimport { default as DateTimePicker } from './date-time';\n\nexport { DatePicker, TimePicker, TimeInput };\nexport default DateTimePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AANA;AACA;AACA;AAFA,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GASeC,iBAAc","ignoreList":[]}

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

@@ -10,16 +10,14 @@ var _dateFns = require("date-fns");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = _interopRequireDefault(require("../../base-control"));
-var _button = _interopRequireDefault(require("../../button"));
-var _buttonGroup = _interopRequireDefault(require("../../button-group"));
 var _selectControl = _interopRequireDefault(require("../../select-control"));
 var _timezone = _interopRequireDefault(require("./timezone"));
 var _styles = require("./styles");
 var _hStack = require("../../h-stack");
 var _spacer = require("../../spacer");
-var _actions = require("../../input-control/reducer/actions");
 var _utils = require("../utils");
 var _constants = require("../constants");
+var _timeInput = require("../time-input");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -33,30 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-function from12hTo24h(hours, isPm) {
-  return isPm ? (hours % 12 + 12) % 24 : hours % 12;
-}
-
-/**
- * Creates an InputControl reducer used to pad an input so that it is always a
- * given width. For example, the hours and minutes inputs are padded to 2 so
- * that '4' appears as '04'.
- *
- * @param pad How many digits the value should be.
- */
-function buildPadInputStateReducer(pad) {
-  return (state, action) => {
-    const nextState = {
-      ...state
-    };
-    if (action.type === _actions.COMMIT || action.type === _actions.PRESS_UP || action.type === _actions.PRESS_DOWN) {
-      if (nextState.value !== undefined) {
-        nextState.value = nextState.value.toString().padStart(pad, '0');
-      }
-    }
-    return nextState;
-  };
-}
+const VALID_DATE_ORDERS = ['dmy', 'mdy', 'ymd'];
 
 /**
  * TimePicker is a React component that renders a clock for time selection.
@@ -81,7 +56,8 @@ function buildPadInputStateReducer(pad) {
 function TimePicker({
   is12Hour,
   currentTime,
-  onChange
+  onChange,
+  dateOrder: dateOrderProp
 }) {
   const [date, setDate] = (0, _element.useState)(() =>
   // Truncate the date at the minutes, see: #15495.
@@ -97,41 +73,25 @@ function TimePicker({
     month,
     year,
     minutes,
-    hours,
-    am
+    hours
   } = (0, _element.useMemo)(() => ({
     day: (0, _dateFns.format)(date, 'dd'),
     month: (0, _dateFns.format)(date, 'MM'),
     year: (0, _dateFns.format)(date, 'yyyy'),
     minutes: (0, _dateFns.format)(date, 'mm'),
-    hours: (0, _dateFns.format)(date, is12Hour ? 'hh' : 'HH'),
+    hours: (0, _dateFns.format)(date, 'HH'),
     am: (0, _dateFns.format)(date, 'a')
-  }), [date, is12Hour]);
+  }), [date]);
   const buildNumberControlChangeCallback = method => {
     const callback = (value, {
       event
     }) => {
-      var _ownerDocument$defaul;
-      // `instanceof` checks need to get the instance definition from the
-      // corresponding window object — therefore, the following logic makes
-      // the component work correctly even when rendered inside an iframe.
-      const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement;
-      if (!(event.target instanceof HTMLInputElementInstance)) {
-        return;
-      }
-      if (!event.target.validity.valid) {
+      if (!(0, _utils.validateInputElementTarget)(event)) {
         return;
       }
 
       // We can safely assume value is a number if target is valid.
-      let numberValue = Number(value);
-
-      // If the 12-hour format is being used and the 'PM' period is
-      // selected, then the incoming value (which ranges 1-12) should be
-      // increased by 12 to match the expected 24-hour format.
-      if (method === 'hours' && is12Hour) {
-        numberValue = from12hTo24h(numberValue, am === 'PM');
-      }
+      const numberValue = Number(value);
       const newDate = (0, _dateFns.set)(date, {
         [method]: numberValue
       });
@@ -140,17 +100,17 @@ function TimePicker({
     };
     return callback;
   };
-  function buildAmPmChangeCallback(value) {
-    return () => {
-      if (am === value) {
-        return;
-      }
-      const parsedHours = parseInt(hours, 10);
-      const newDate = (0, _dateFns.setHours)(date, from12hTo24h(parsedHours, value === 'PM'));
-      setDate(newDate);
-      onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
-    };
-  }
+  const onTimeInputChangeCallback = ({
+    hours: newHours,
+    minutes: newMinutes
+  }) => {
+    const newDate = (0, _dateFns.set)(date, {
+      hours: newHours,
+      minutes: newMinutes
+    });
+    setDate(newDate);
+    onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
+  };
   const dayField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DayInput, {
     className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
     ,
@@ -167,7 +127,7 @@ function TimePicker({
     isDragEnabled: false,
     isShiftStepEnabled: false,
     onChange: buildNumberControlChangeCallback('date')
-  });
+  }, "day");
   const monthField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MonthSelectWrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
       className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
@@ -220,6 +180,38 @@ function TimePicker({
         onChange?.((0, _dateFns.format)(newDate, _constants.TIMEZONELESS_FORMAT));
       }
     })
+  }, "month");
+  const yearField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.YearInput, {
+    className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+    ,
+    label: (0, _i18n.__)('Year'),
+    hideLabelFromVision: true,
+    __next40pxDefaultSize: true,
+    value: year,
+    step: 1,
+    min: 1,
+    max: 9999,
+    required: true,
+    spinControls: "none",
+    isPressEnterToChange: true,
+    isDragEnabled: false,
+    isShiftStepEnabled: false,
+    onChange: buildNumberControlChangeCallback('year'),
+    __unstableStateReducer: (0, _utils.buildPadInputStateReducer)(4)
+  }, "year");
+  const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';
+  const dateOrder = dateOrderProp && VALID_DATE_ORDERS.includes(dateOrderProp) ? dateOrderProp : defaultDateOrder;
+  const fields = dateOrder.split('').map(field => {
+    switch (field) {
+      case 'd':
+        return dayField;
+      case 'm':
+        return monthField;
+      case 'y':
+        return yearField;
+      default:
+        return null;
+    }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
     className: "components-datetime__time" // Unused, for backwards compatibility.
@@ -233,67 +225,13 @@ function TimePicker({
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TimeWrapper, {
-          className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HoursInput, {
-            className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-            ,
-            label: (0, _i18n.__)('Hours'),
-            hideLabelFromVision: true,
-            __next40pxDefaultSize: true,
-            value: hours,
-            step: 1,
-            min: is12Hour ? 1 : 0,
-            max: is12Hour ? 12 : 23,
-            required: true,
-            spinControls: "none",
-            isPressEnterToChange: true,
-            isDragEnabled: false,
-            isShiftStepEnabled: false,
-            onChange: buildNumberControlChangeCallback('hours'),
-            __unstableStateReducer: buildPadInputStateReducer(2)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TimeSeparator, {
-            className: "components-datetime__time-separator" // Unused, for backwards compatibility.
-            ,
-            "aria-hidden": "true",
-            children: ":"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MinutesInput, {
-            className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
-            ,
-            label: (0, _i18n.__)('Minutes'),
-            hideLabelFromVision: true,
-            __next40pxDefaultSize: true,
-            value: minutes,
-            step: 1,
-            min: 0,
-            max: 59,
-            required: true,
-            spinControls: "none",
-            isPressEnterToChange: true,
-            isDragEnabled: false,
-            isShiftStepEnabled: false,
-            onChange: buildNumberControlChangeCallback('minutes'),
-            __unstableStateReducer: buildPadInputStateReducer(2)
-          })]
-        }), is12Hour && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_buttonGroup.default, {
-          className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
-          ,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-            className: "components-datetime__time-am-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'AM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('AM'),
-            children: (0, _i18n.__)('AM')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-            className: "components-datetime__time-pm-button" // Unused, for backwards compatibility.
-            ,
-            variant: am === 'PM' ? 'primary' : 'secondary',
-            __next40pxDefaultSize: true,
-            onClick: buildAmPmChangeCallback('PM'),
-            children: (0, _i18n.__)('PM')
-          })]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_timeInput.TimeInput, {
+          value: {
+            hours: Number(hours),
+            minutes: Number(minutes)
+          },
+          is12Hour: is12Hour,
+          onChange: onTimeInputChangeCallback
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_timezone.default, {})]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Fieldset, {
@@ -302,31 +240,10 @@ function TimePicker({
         className: "components-datetime__time-legend" // Unused, for backwards compatibility.
         ,
         children: (0, _i18n.__)('Date')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_hStack.HStack, {
         className: "components-datetime__time-wrapper" // Unused, for backwards compatibility.
         ,
-        children: [is12Hour ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [monthField, dayField]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [dayField, monthField]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.YearInput, {
-          className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
-          ,
-          label: (0, _i18n.__)('Year'),
-          hideLabelFromVision: true,
-          __next40pxDefaultSize: true,
-          value: year,
-          step: 1,
-          min: 1,
-          max: 9999,
-          required: true,
-          spinControls: "none",
-          isPressEnterToChange: true,
-          isDragEnabled: false,
-          isShiftStepEnabled: false,
-          onChange: buildNumberControlChangeCallback('year'),
-          __unstableStateReducer: buildPadInputStateReducer(4)
-        })]
+        children: fields
       })]
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_dateFns","require","_element","_i18n","_baseControl","_interopRequireDefault","_button","_buttonGroup","_selectControl","_timezone","_styles","_hStack","_spacer","_actions","_utils","_constants","_jsxRuntime","from12hTo24h","hours","isPm","buildPadInputStateReducer","pad","state","action","nextState","type","COMMIT","PRESS_UP","PRESS_DOWN","value","undefined","toString","padStart","TimePicker","is12Hour","currentTime","onChange","date","setDate","useState","startOfMinute","inputToDate","Date","useEffect","day","month","year","minutes","am","useMemo","format","buildNumberControlChangeCallback","method","callback","event","_ownerDocument$defaul","HTMLInputElementInstance","target","ownerDocument","defaultView","HTMLInputElement","validity","valid","numberValue","Number","newDate","set","TIMEZONELESS_FORMAT","buildAmPmChangeCallback","parsedHours","parseInt","setHours","dayField","jsx","DayInput","className","label","__","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","MonthSelectWrapper","children","default","__nextHasNoMarginBottom","options","setMonth","jsxs","Wrapper","Fieldset","VisualLabel","as","HStack","TimeWrapper","HoursInput","__unstableStateReducer","TimeSeparator","MinutesInput","variant","onClick","Spacer","Fragment","YearInput","_default","exports"],"sources":["@wordpress/components/src/date-time/time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { startOfMinute, format, set, setHours, setMonth } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport Button from '../../button';\nimport ButtonGroup from '../../button-group';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport type { TimePickerProps } from '../types';\nimport {\n\tWrapper,\n\tFieldset,\n\tHoursInput,\n\tTimeSeparator,\n\tMinutesInput,\n\tMonthSelectWrapper,\n\tDayInput,\n\tYearInput,\n\tTimeWrapper,\n} from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport type { InputChangeCallback } from '../../input-control/types';\nimport type { InputState } from '../../input-control/reducer/state';\nimport type { InputAction } from '../../input-control/reducer/actions';\nimport {\n\tCOMMIT,\n\tPRESS_DOWN,\n\tPRESS_UP,\n} from '../../input-control/reducer/actions';\nimport { inputToDate } from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\n\nfunction from12hTo24h( hours: number, isPm: boolean ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * Creates an InputControl reducer used to pad an input so that it is always a\n * given width. For example, the hours and minutes inputs are padded to 2 so\n * that '4' appears as '04'.\n *\n * @param pad How many digits the value should be.\n */\nfunction buildPadInputStateReducer( pad: number ) {\n\treturn ( state: InputState, action: InputAction ) => {\n\t\tconst nextState = { ...state };\n\t\tif (\n\t\t\taction.type === COMMIT ||\n\t\t\taction.type === PRESS_UP ||\n\t\t\taction.type === PRESS_DOWN\n\t\t) {\n\t\t\tif ( nextState.value !== undefined ) {\n\t\t\t\tnextState.value = nextState.value\n\t\t\t\t\t.toString()\n\t\t\t\t\t.padStart( pad, '0' );\n\t\t\t}\n\t\t}\n\t\treturn nextState;\n\t};\n}\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? startOfMinute( inputToDate( currentTime ) ) : new Date()\n\t);\n\n\t// Reset the state when currentTime changed.\n\t// TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime\n\t\t\t\t? startOfMinute( inputToDate( currentTime ) )\n\t\t\t\t: new Date()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: format( date, 'dd' ),\n\t\t\tmonth: format( date, 'MM' ),\n\t\t\tyear: format( date, 'yyyy' ),\n\t\t\tminutes: format( date, 'mm' ),\n\t\t\thours: format( date, is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: format( date, 'a' ),\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\tconst buildNumberControlChangeCallback = (\n\t\tmethod: 'hours' | 'minutes' | 'date' | 'year'\n\t) => {\n\t\tconst callback: InputChangeCallback = ( value, { event } ) => {\n\t\t\t// `instanceof` checks need to get the instance definition from the\n\t\t\t// corresponding window object — therefore, the following logic makes\n\t\t\t// the component work correctly even when rendered inside an iframe.\n\t\t\tconst HTMLInputElementInstance =\n\t\t\t\t( event.target as HTMLInputElement )?.ownerDocument.defaultView\n\t\t\t\t\t?.HTMLInputElement ?? HTMLInputElement;\n\n\t\t\tif ( ! ( event.target instanceof HTMLInputElementInstance ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! event.target.validity.valid ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We can safely assume value is a number if target is valid.\n\t\t\tlet numberValue = Number( value );\n\n\t\t\t// If the 12-hour format is being used and the 'PM' period is\n\t\t\t// selected, then the incoming value (which ranges 1-12) should be\n\t\t\t// increased by 12 to match the expected 24-hour format.\n\t\t\tif ( method === 'hours' && is12Hour ) {\n\t\t\t\tnumberValue = from12hTo24h( numberValue, am === 'PM' );\n\t\t\t}\n\n\t\t\tconst newDate = set( date, { [ method ]: numberValue } );\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t\treturn callback;\n\t};\n\n\tfunction buildAmPmChangeCallback( value: 'AM' | 'PM' ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = setHours(\n\t\t\t\tdate,\n\t\t\t\tfrom12hTo24h( parsedHours, value === 'PM' )\n\t\t\t);\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t}\n\n\tconst dayField = (\n\t\t<DayInput\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Day' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ day }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 31 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'date' ) }\n\t\t/>\n\t);\n\n\tconst monthField = (\n\t\t<MonthSelectWrapper>\n\t\t\t<SelectControl\n\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n\t\t\t\tlabel={ __( 'Month' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ month }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ value: '01', label: __( 'January' ) },\n\t\t\t\t\t{ value: '02', label: __( 'February' ) },\n\t\t\t\t\t{ value: '03', label: __( 'March' ) },\n\t\t\t\t\t{ value: '04', label: __( 'April' ) },\n\t\t\t\t\t{ value: '05', label: __( 'May' ) },\n\t\t\t\t\t{ value: '06', label: __( 'June' ) },\n\t\t\t\t\t{ value: '07', label: __( 'July' ) },\n\t\t\t\t\t{ value: '08', label: __( 'August' ) },\n\t\t\t\t\t{ value: '09', label: __( 'September' ) },\n\t\t\t\t\t{ value: '10', label: __( 'October' ) },\n\t\t\t\t\t{ value: '11', label: __( 'November' ) },\n\t\t\t\t\t{ value: '12', label: __( 'December' ) },\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newDate = setMonth( date, Number( value ) - 1 );\n\t\t\t\t\tsetDate( newDate );\n\t\t\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MonthSelectWrapper>\n\t);\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__time\" // Unused, for backwards compatibility.\n\t\t>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<TimeWrapper\n\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-time\" // Unused, for backwards compatibility.\n\t\t\t\t\t>\n\t\t\t\t\t\t<HoursInput\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tlabel={ __( 'Hours' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback(\n\t\t\t\t\t\t\t\t'hours'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TimeSeparator\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</TimeSeparator>\n\t\t\t\t\t\t<MinutesInput\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tlabel={ __( 'Minutes' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback(\n\t\t\t\t\t\t\t\t'minutes'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TimeWrapper>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-am-pm\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'AM' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ buildAmPmChangeCallback( 'PM' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ is12Hour ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ monthField }\n\t\t\t\t\t\t\t{ dayField }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ dayField }\n\t\t\t\t\t\t\t{ monthField }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<YearInput\n\t\t\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n\t\t\t\t\t\tlabel={ __( 'Year' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\tisShiftStepEnabled={ false }\n\t\t\t\t\t\tonChange={ buildNumberControlChangeCallback( 'year' ) }\n\t\t\t\t\t\t__unstableStateReducer={ buildPadInputStateReducer(\n\t\t\t\t\t\t\t4\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t</Wrapper>\n\t);\n}\n\nexport default TimePicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_dateFns","require","_element","_i18n","_baseControl","_interopRequireDefault","_selectControl","_timezone","_styles","_hStack","_spacer","_utils","_constants","_timeInput","_jsxRuntime","VALID_DATE_ORDERS","TimePicker","is12Hour","currentTime","onChange","dateOrder","dateOrderProp","date","setDate","useState","startOfMinute","inputToDate","Date","useEffect","day","month","year","minutes","hours","useMemo","format","am","buildNumberControlChangeCallback","method","callback","value","event","validateInputElementTarget","numberValue","Number","newDate","set","TIMEZONELESS_FORMAT","onTimeInputChangeCallback","newHours","newMinutes","dayField","jsx","DayInput","className","label","__","hideLabelFromVision","__next40pxDefaultSize","step","min","max","required","spinControls","isPressEnterToChange","isDragEnabled","isShiftStepEnabled","monthField","MonthSelectWrapper","children","default","__nextHasNoMarginBottom","options","setMonth","yearField","YearInput","__unstableStateReducer","buildPadInputStateReducer","defaultDateOrder","includes","fields","split","map","field","jsxs","Wrapper","Fieldset","VisualLabel","as","HStack","TimeInput","Spacer","_default","exports"],"sources":["@wordpress/components/src/date-time/time/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { startOfMinute, format, set, setMonth } from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../../base-control';\nimport SelectControl from '../../select-control';\nimport TimeZone from './timezone';\nimport type { TimeInputValue, TimePickerProps } from '../types';\nimport {\n\tWrapper,\n\tFieldset,\n\tMonthSelectWrapper,\n\tDayInput,\n\tYearInput,\n} from './styles';\nimport { HStack } from '../../h-stack';\nimport { Spacer } from '../../spacer';\nimport type { InputChangeCallback } from '../../input-control/types';\nimport {\n\tinputToDate,\n\tbuildPadInputStateReducer,\n\tvalidateInputElementTarget,\n} from '../utils';\nimport { TIMEZONELESS_FORMAT } from '../constants';\nimport { TimeInput } from '../time-input';\n\nconst VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n\tdateOrder: dateOrderProp,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? startOfMinute( inputToDate( currentTime ) ) : new Date()\n\t);\n\n\t// Reset the state when currentTime changed.\n\t// TODO: useEffect() shouldn't be used like this, causes an unnecessary render\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime\n\t\t\t\t? startOfMinute( inputToDate( currentTime ) )\n\t\t\t\t: new Date()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours } = useMemo(\n\t\t() => ( {\n\t\t\tday: format( date, 'dd' ),\n\t\t\tmonth: format( date, 'MM' ),\n\t\t\tyear: format( date, 'yyyy' ),\n\t\t\tminutes: format( date, 'mm' ),\n\t\t\thours: format( date, 'HH' ),\n\t\t\tam: format( date, 'a' ),\n\t\t} ),\n\t\t[ date ]\n\t);\n\n\tconst buildNumberControlChangeCallback = ( method: 'date' | 'year' ) => {\n\t\tconst callback: InputChangeCallback = ( value, { event } ) => {\n\t\t\tif ( ! validateInputElementTarget( event ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// We can safely assume value is a number if target is valid.\n\t\t\tconst numberValue = Number( value );\n\n\t\t\tconst newDate = set( date, { [ method ]: numberValue } );\n\t\t\tsetDate( newDate );\n\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t};\n\t\treturn callback;\n\t};\n\n\tconst onTimeInputChangeCallback = ( {\n\t\thours: newHours,\n\t\tminutes: newMinutes,\n\t}: TimeInputValue ) => {\n\t\tconst newDate = set( date, {\n\t\t\thours: newHours,\n\t\t\tminutes: newMinutes,\n\t\t} );\n\t\tsetDate( newDate );\n\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t};\n\n\tconst dayField = (\n\t\t<DayInput\n\t\t\tkey=\"day\"\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-day\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Day' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ day }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 31 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'date' ) }\n\t\t/>\n\t);\n\n\tconst monthField = (\n\t\t<MonthSelectWrapper key=\"month\">\n\t\t\t<SelectControl\n\t\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-month\" // Unused, for backwards compatibility.\n\t\t\t\tlabel={ __( 'Month' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ month }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ value: '01', label: __( 'January' ) },\n\t\t\t\t\t{ value: '02', label: __( 'February' ) },\n\t\t\t\t\t{ value: '03', label: __( 'March' ) },\n\t\t\t\t\t{ value: '04', label: __( 'April' ) },\n\t\t\t\t\t{ value: '05', label: __( 'May' ) },\n\t\t\t\t\t{ value: '06', label: __( 'June' ) },\n\t\t\t\t\t{ value: '07', label: __( 'July' ) },\n\t\t\t\t\t{ value: '08', label: __( 'August' ) },\n\t\t\t\t\t{ value: '09', label: __( 'September' ) },\n\t\t\t\t\t{ value: '10', label: __( 'October' ) },\n\t\t\t\t\t{ value: '11', label: __( 'November' ) },\n\t\t\t\t\t{ value: '12', label: __( 'December' ) },\n\t\t\t\t] }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newDate = setMonth( date, Number( value ) - 1 );\n\t\t\t\t\tsetDate( newDate );\n\t\t\t\t\tonChange?.( format( newDate, TIMEZONELESS_FORMAT ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MonthSelectWrapper>\n\t);\n\n\tconst yearField = (\n\t\t<YearInput\n\t\t\tkey=\"year\"\n\t\t\tclassName=\"components-datetime__time-field components-datetime__time-field-year\" // Unused, for backwards compatibility.\n\t\t\tlabel={ __( 'Year' ) }\n\t\t\thideLabelFromVision\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ year }\n\t\t\tstep={ 1 }\n\t\t\tmin={ 1 }\n\t\t\tmax={ 9999 }\n\t\t\trequired\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange\n\t\t\tisDragEnabled={ false }\n\t\t\tisShiftStepEnabled={ false }\n\t\t\tonChange={ buildNumberControlChangeCallback( 'year' ) }\n\t\t\t__unstableStateReducer={ buildPadInputStateReducer( 4 ) }\n\t\t/>\n\t);\n\n\tconst defaultDateOrder = is12Hour ? 'mdy' : 'dmy';\n\tconst dateOrder =\n\t\tdateOrderProp && VALID_DATE_ORDERS.includes( dateOrderProp )\n\t\t\t? dateOrderProp\n\t\t\t: defaultDateOrder;\n\n\tconst fields = dateOrder.split( '' ).map( ( field ) => {\n\t\tswitch ( field ) {\n\t\t\tcase 'd':\n\t\t\t\treturn dayField;\n\t\t\tcase 'm':\n\t\t\t\treturn monthField;\n\t\t\tcase 'y':\n\t\t\t\treturn yearField;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName=\"components-datetime__time\" // Unused, for backwards compatibility.\n\t\t>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<TimeInput\n\t\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t\thours: Number( hours ),\n\t\t\t\t\t\t\tminutes: Number( minutes ),\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t\tonChange={ onTimeInputChangeCallback }\n\t\t\t\t\t/>\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t\t<Fieldset>\n\t\t\t\t<BaseControl.VisualLabel\n\t\t\t\t\tas=\"legend\"\n\t\t\t\t\tclassName=\"components-datetime__time-legend\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__time-wrapper\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ fields }\n\t\t\t\t</HStack>\n\t\t\t</Fieldset>\n\t\t</Wrapper>\n\t);\n}\n\nexport default TimePicker;\n"],"mappings":"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","ignoreList":[]}