@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/DateTime/Input/QuarterInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuarterInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAW7E,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CAAG;AAE3D,eAAO,MAAM,kBAAkB,wHAmB7B,CAAC;AA4CH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiIrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/DateTime/Input/QuarterInput.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useReducer } from 'react';
+import styled, { css } from 'styled-components';
+import FormField from '../../FormField';
+import Select, { Option } from '../../Select';
+import Flex from '../../Flex';
+import { range } from '../../../utils';
+import { useConsolidatedRef, useDirection, useFocusWithin, useI18n } from '../../../hooks';
+import { StyledSelect } from '../../Select/Select';
+import { defaultThemeProp } from '../../../theme';
+import { StyledFormControl } from '../../FormControl';
+import { getQuarter, parseToDate } from './utils';
+import StyledDateTime from './DateTime.styles';
+export const StyledQuarterInput = styled(StyledDateTime)(() => {
+    const { start, end } = useDirection();
+    return css `
+    padding: 0;
+    border: 0;
+    ${StyledSelect} {
+      min-width: 0;
+      &:first-child {
+        ${`border-top-${end}-radius`}: 0;
+        ${`border-bottom-${end}-radius`}: 0;
+      }
+      &:last-child {
+        max-width: max-content;
+        margin-inline-start: -0.0625rem;
+        ${`border-top-${start}-radius`}: 0;
+        ${`border-bottom-${start}-radius`}: 0;
+      }
+    }
+  `;
+});
+StyledQuarterInput.defaultProps = defaultThemeProp;
+const convertToCallbackParameter = (date, parts) => {
+    if (parts.every(Boolean)) {
+        const [year, quarter] = parts.map(Number);
+        const quarterStartMonth = [0, 3, 6, 9][quarter - 1];
+        date.setUTCFullYear(year, quarterStartMonth, 1);
+        return {
+            valueAsISOString: date.toISOString(),
+            valueAsTimestamp: date.getTime()
+        };
+    }
+    if (parts.every(p => !p)) {
+        return {
+            valueAsISOString: '',
+            valueAsTimestamp: undefined
+        };
+    }
+    return {
+        valueAsISOString: '',
+        valueAsTimestamp: NaN,
+        state: 'incomplete'
+    };
+};
+const reducer = (state, action) => {
+    switch (action.field) {
+        case 'year':
+            return [action.value, state[1]];
+        case 'quarter':
+            return [state[0], action.value];
+        default:
+            return state.slice(0);
+    }
+};
+const QuarterInput = forwardRef((props, ref) => {
+    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info, status, required, readOnly, disabled, onChange, onFocus, onBlur, autoFocus, ...restProps } = props;
+    const date = value ? parseToDate(value) : undefined;
+    const currentYear = date ? date.getUTCFullYear() : new Date().getFullYear();
+    const minYear = min ? parseToDate(min).getUTCFullYear() : currentYear - 10;
+    const maxYear = max ? parseToDate(max).getUTCFullYear() : currentYear + 10;
+    const years = range(minYear, maxYear);
+    const [state, dispatch] = useReducer(reducer, [
+        date?.getUTCFullYear().toString(),
+        date && getQuarter(date).toString()
+    ]);
+    const onFocusChange = (focused) => {
+        const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), state);
+        if (onFocus && focused)
+            onFocus(callbackParam);
+        else if (onBlur && !focused)
+            onBlur(callbackParam);
+    };
+    const onSelectChange = (field) => (ev) => {
+        const action = { field, value: ev.target.value };
+        dispatch(action);
+        onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), reducer(state, action)));
+    };
+    const containerRef = useConsolidatedRef(ref);
+    useFocusWithin([containerRef], onFocusChange);
+    const t = useI18n();
+    const quarters = [1, 2, 3, 4];
+    const quarterOptions = quarters.map(quarterNumber => (_jsx(Option, { value: quarterNumber.toString(), children: t(`date_quarter_q${quarterNumber}`).trim() }, t(`date_quarter_q${quarterNumber}`).trim())));
+    const yearOptions = years.map(year => (_jsx(Option, { value: year.toString(), children: year.toString() }, year.toString())));
+    const Quarter = (_jsxs(Select, { "aria-label": t('quarter_label_a11y'), readOnly: readOnly, required: required, value: state[1]?.toString() ?? '', onChange: onSelectChange('quarter'), status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), quarterOptions] }, 'quarter'));
+    const Year = (_jsxs(Select, { "aria-label": t('year_label_a11y'), readOnly: readOnly, required: required, value: state[0]?.toString() ?? '', onChange: onSelectChange('year'), status: status, disabled: disabled, children: [!required && _jsx(Option, { children: " " }, 'null'), yearOptions] }, 'year'));
+    const Comp = (_jsxs(Flex, { ...restProps, as: StyledQuarterInput, forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, children: [Quarter, Year] }, void 0));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
+});
+export default QuarterInput;
+//# sourceMappingURL=QuarterInput.js.map

package/lib/components/DateTime/Input/QuarterInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuarterInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useReducer\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\nimport Flex from '../../Flex';\nimport { range } from '../../../utils';\nimport { useConsolidatedRef, useDirection, useFocusWithin, useI18n } from '../../../hooks';\nimport { StyledSelect } from '../../Select/Select';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\n\nimport { getQuarter, parseToDate, QuarterNumber } from './utils';\nimport StyledDateTime from './DateTime.styles';\n\nexport interface QuarterInputProps extends DateTimeProps {}\n\nexport const StyledQuarterInput = styled(StyledDateTime)<QuarterInputProps>(() => {\n  const { start, end } = useDirection();\n  return css`\n    padding: 0;\n    border: 0;\n    ${StyledSelect} {\n      min-width: 0;\n      &:first-child {\n        ${`border-top-${end}-radius`}: 0;\n        ${`border-bottom-${end}-radius`}: 0;\n      }\n      &:last-child {\n        max-width: max-content;\n        margin-inline-start: -0.0625rem;\n        ${`border-top-${start}-radius`}: 0;\n        ${`border-bottom-${start}-radius`}: 0;\n      }\n    }\n  `;\n});\n\nStyledQuarterInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[]\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [year, quarter] = parts.map(Number);\n    const quarterStartMonth = [0, 3, 6, 9][quarter - 1];\n    date.setUTCFullYear(year, quarterStartMonth, 1);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\ntype Field = 'quarter' | 'year';\ntype State = [year: string | undefined, quarter: string | undefined];\n\nconst reducer = (state: State, action: { field: Field; value: string | undefined }): State => {\n  switch (action.field) {\n    case 'year':\n      return [action.value, state[1]];\n    case 'quarter':\n      return [state[0], action.value];\n    default:\n      return state.slice(0) as State;\n  }\n};\n\nconst QuarterInput: FunctionComponent<QuarterInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<QuarterInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const date = value ? parseToDate(value) : undefined;\n    const currentYear = date ? date.getUTCFullYear() : new Date().getFullYear();\n\n    const minYear = min ? parseToDate(min).getUTCFullYear() : currentYear - 10;\n    const maxYear = max ? parseToDate(max).getUTCFullYear() : currentYear + 10;\n\n    const years = range(minYear, maxYear);\n\n    const [state, dispatch] = useReducer(reducer, [\n      date?.getUTCFullYear().toString(),\n      date && getQuarter(date).toString()\n    ]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), state);\n      if (onFocus && focused) onFocus(callbackParam);\n      else if (onBlur && !focused) onBlur(callbackParam);\n    };\n\n    const onSelectChange = (field: Field) => (ev: ChangeEvent<HTMLSelectElement>) => {\n      const action = { field, value: ev.target.value };\n      dispatch(action);\n      onChange?.(\n        convertToCallbackParameter(date ? new Date(date) : new Date(), reducer(state, action))\n      );\n    };\n\n    const containerRef = useConsolidatedRef<HTMLElement>(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const t = useI18n();\n\n    const quarters: QuarterNumber[] = [1, 2, 3, 4];\n\n    const quarterOptions = quarters.map(quarterNumber => (\n      <Option key={t(`date_quarter_q${quarterNumber}`).trim()} value={quarterNumber.toString()}>\n        {t(`date_quarter_q${quarterNumber}`).trim()}\n      </Option>\n    ));\n\n    const yearOptions = years.map(year => (\n      <Option key={year.toString()} value={year.toString()}>\n        {year.toString()}\n      </Option>\n    ));\n\n    const Quarter = (\n      <Select\n        aria-label={t('quarter_label_a11y')}\n        key='quarter'\n        readOnly={readOnly}\n        required={required}\n        value={state[1]?.toString() ?? ''}\n        onChange={onSelectChange('quarter')}\n        status={status}\n        disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {!required && <Option key='null'> </Option>}\n        {quarterOptions}\n      </Select>\n    );\n\n    const Year = (\n      <Select\n        aria-label={t('year_label_a11y')}\n        key='year'\n        readOnly={readOnly}\n        required={required}\n        value={state[0]?.toString() ?? ''}\n        onChange={onSelectChange('year')}\n        status={status}\n        disabled={disabled}\n      >\n        {!required && <Option key='null'> </Option>}\n        {yearOptions}\n      </Select>\n    );\n\n    const Comp = (\n      <Flex\n        {...restProps}\n        as={StyledQuarterInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center' }}\n        ref={containerRef}\n        status={status}\n        disabled={disabled}\n        readOnly={readOnly}\n      >\n        {Quarter}\n        {Year}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default QuarterInput;\n"]}

package/lib/components/DateTime/Input/TimeInput.d.ts

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import { MinuteInterval } from '../Picker/TimePicker';
+import DateTimeProps from '../DateTime.types';
 import { ClockFormat } from './utils';
-import DateTimeProps from './DateTime.types';
 export interface TimeInputProps extends DateTimeProps {
     /**
      * Display the time with seconds.

package/lib/components/DateTime/Input/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAO9C,OAAmB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIlE,OAAO,EAKL,WAAW,EAEZ,MAAM,SAAS,CAAC;AACjB,OAAO,aAA4C,MAAM,kBAAkB,CAAC;AAM5E,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAyDF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwR/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAS9C,OAAmB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGlE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAE7E,OAAO,EAKL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;AAyDF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwR/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/DateTime/Input/TimeInput.js

@@ -1,10 +1,13 @@
-import React, { useRef, useState, forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, forwardRef } from 'react';
 import styled from 'styled-components';
 import FormField from '../../FormField';
 import Flex from '../../Flex';
 import Select, { Option } from '../../Select';
 import Button from '../../Button';
-import Icon from '../../Icon';
+import Icon, { registerIcon } from '../../Icon';
+import * as timesIcon from '../../Icon/icons/times.icon';
+import * as clockIcon from '../../Icon/icons/clock.icon';
 import Popover from '../../Popover';
 import TimePicker from '../Picker/TimePicker';
 import { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';
@@ -14,6 +17,7 @@ import StyledDateTime, { StyledInputContainer } from './DateTime.styles';
 import PartInput from './PartInput';
 import usePickerButton from './usePickerButton';
 import useAutoFocusNextInput from './useAutoFocusNextInput';
+registerIcon(timesIcon, clockIcon);
 export const StyledTimeInput = styled(StyledDateTime) `
   padding-inline-end: 0;
 `;
@@ -79,17 +83,16 @@ const TimeInput = forwardRef((props, ref) => {
     ];
     useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);
     const pickParts = () => {
-        var _a, _b, _c;
         return [
-            ((_a = hourInputRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined,
-            ((_b = minuteInputRef.current) === null || _b === void 0 ? void 0 : _b.value) || undefined
-        ].concat(withSeconds ? [(_c = secondInputRef.current) === null || _c === void 0 ? void 0 : _c.value] : []);
+            hourInputRef.current?.value || undefined,
+            minuteInputRef.current?.value || undefined
+        ].concat(withSeconds ? [secondInputRef.current?.value] : []);
     };
     const currentlySelectedTime = () => {
         const parts = pickParts();
         if (parts.every(Boolean)) {
             const [hour, minute, second = 0] = parts.map(Number);
-            const current = date !== null && date !== void 0 ? date : new Date();
+            const current = date ?? new Date();
             return validateTime(hour, minute, second, is12h)
                 ? new Date(current.setUTCHours(is12h ? convertTo24h(hour, meridiem) : hour, minute, second))
                 : undefined;
@@ -97,95 +100,84 @@ const TimeInput = forwardRef((props, ref) => {
     };
     const inputContainerRef = useRef(null);
     const onFocusChange = (focused) => {
-        var _a;
-        const currentMeridiem = ((_a = meridiemSelectRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined;
+        const currentMeridiem = meridiemSelectRef.current?.value || undefined;
         const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts(), is12h ? currentMeridiem : undefined);
         if (onFocus && focused)
             onFocus(callbackParam);
         if (!focused) {
             if (inputContainerRef.current)
                 inputContainerRef.current.scrollTop = 0;
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParam);
+            onBlur?.(callbackParam);
         }
     };
     const onInputChange = () => {
-        var _a;
-        const currentMeridiem = ((_a = meridiemSelectRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined;
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts(), is12h ? currentMeridiem : undefined));
+        const currentMeridiem = meridiemSelectRef.current?.value || undefined;
+        onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts(), is12h ? currentMeridiem : undefined));
     };
     const t = useI18n();
-    const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date === null || date === void 0 ? void 0 : date.getUTCHours();
-    const HourInput = (React.createElement(PartInput, { key: 'hour', placeholder: t('hour_placeholder'), "aria-label": t('hour_label_a11y'), value: hour, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef, autoFocus: autoFocus }));
-    const MinuteInput = (React.createElement(PartInput, { key: 'minute', placeholder: t('minute_placeholder'), "aria-label": t('minute_label_a11y'), value: date === null || date === void 0 ? void 0 : date.getUTCMinutes(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }));
-    const SecondInput = (React.createElement(PartInput, { key: 'second', placeholder: t('second_placeholder'), "aria-label": t('second_label_a11y'), value: date === null || date === void 0 ? void 0 : date.getUTCSeconds(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }));
-    const Period = (React.createElement(Select, { ref: meridiemSelectRef, "aria-label": t('meridiem_label_a11y'), key: 'period', value: meridiem, required: required, disabled: disabled, onChange: (ev) => {
+    const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date?.getUTCHours();
+    const HourInput = (_jsx(PartInput, { placeholder: t('hour_placeholder'), "aria-label": t('hour_label_a11y'), value: hour, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef, autoFocus: autoFocus }, 'hour'));
+    const MinuteInput = (_jsx(PartInput, { placeholder: t('minute_placeholder'), "aria-label": t('minute_label_a11y'), value: date?.getUTCMinutes(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'));
+    const SecondInput = (_jsx(PartInput, { placeholder: t('second_placeholder'), "aria-label": t('second_label_a11y'), value: date?.getUTCSeconds(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second'));
+    const Period = (_jsxs(Select, { ref: meridiemSelectRef, "aria-label": t('meridiem_label_a11y'), value: meridiem, required: required, disabled: disabled, onChange: (ev) => {
             setMeridiem(ev.target.value);
             onInputChange();
-        }, readOnly: readOnly },
-        React.createElement(Option, { value: 'AM' }, t('meridiem_value_am')),
-        React.createElement(Option, { value: 'PM' }, t('meridiem_value_pm'))));
+        }, readOnly: readOnly, children: [_jsx(Option, { value: 'AM', children: t('meridiem_value_am') }, void 0), _jsx(Option, { value: 'PM', children: t('meridiem_value_pm') }, void 0)] }, 'period'));
     const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
-    const Picker = (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": t(open ? 'close_time_button_a11y' : 'open_time_button_a11y'), readOnly: readOnly, disabled: disabled },
-            React.createElement(Icon, { name: open ? 'times' : 'clock' })),
-        React.createElement(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [
-                {
-                    name: 'sameWidth',
-                    enabled: true,
-                    phase: 'beforeWrite',
-                    fn({ state }) {
-                        state.styles.popper.width = `${state.rects.reference.width}px`;
+    const Picker = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": t(open ? 'close_time_button_a11y' : 'open_time_button_a11y'), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: open ? 'times' : 'clock' }, void 0) }, void 0), _jsx(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [
+                    {
+                        name: 'sameWidth',
+                        enabled: true,
+                        phase: 'beforeWrite',
+                        fn({ state }) {
+                            state.styles.popper.width = `${state.rects.reference.width}px`;
+                        }
+                    },
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['top-end']
+                        }
                     }
-                },
-                {
-                    name: 'flip',
-                    options: {
-                        fallbackPlacements: ['top-end']
-                    }
-                }
-            ] },
-            React.createElement(TimePicker, { selected: currentlySelectedTime(), interval: pickerInterval, onSelect: selected => {
-                    hourInputRef.current.value = (is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours())
-                        .toString()
-                        .padStart(2, '0');
-                    minuteInputRef.current.value = selected.getUTCMinutes().toString().padStart(2, '0');
-                    if (withSeconds)
-                        secondInputRef.current.value = selected
-                            .getUTCSeconds()
+                ], children: _jsx(TimePicker, { selected: currentlySelectedTime(), interval: pickerInterval, onSelect: selected => {
+                        hourInputRef.current.value = (is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours())
                             .toString()
                             .padStart(2, '0');
-                    if (meridiemSelectRef.current) {
-                        meridiemSelectRef.current.value = getMeridiem(selected.getUTCHours());
-                    }
-                    setMeridiem(getMeridiem(selected.getUTCHours()));
-                    setOpen(false);
-                    buttonEl === null || buttonEl === void 0 ? void 0 : buttonEl.focus();
-                    onInputChange();
-                }, clockFormat: clockFormat }))));
-    const Comp = (React.createElement(Flex, { as: StyledTimeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
-            var _a;
+                        minuteInputRef.current.value = selected.getUTCMinutes().toString().padStart(2, '0');
+                        if (withSeconds)
+                            secondInputRef.current.value = selected
+                                .getUTCSeconds()
+                                .toString()
+                                .padStart(2, '0');
+                        if (meridiemSelectRef.current) {
+                            meridiemSelectRef.current.value = getMeridiem(selected.getUTCHours());
+                        }
+                        setMeridiem(getMeridiem(selected.getUTCHours()));
+                        setOpen(false);
+                        buttonEl?.focus();
+                        onInputChange();
+                    }, clockFormat: clockFormat }, void 0) }, void 0)] }, void 0));
+    const Comp = (_jsxs(Flex, { as: StyledTimeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
             if (e.target === containerRef.current)
-                (_a = hourInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, ...restProps },
-        React.createElement(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' } }, getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {
-            switch (part) {
-                case 'hh':
-                    return HourInput;
-                case 'mm':
-                    return MinuteInput;
-                case 'ss':
-                    return SecondInput;
-                case 'AM':
-                case 'PM':
-                    return Period;
-                default:
-                    return part;
-            }
-        })),
-        !readOnly && Picker));
-    return label ? (React.createElement(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled }, ref: ref }, Comp)) : (Comp);
+                hourInputRef.current?.focus();
+        }, ...restProps, children: [_jsx(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' }, children: getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {
+                    switch (part) {
+                        case 'hh':
+                            return HourInput;
+                        case 'mm':
+                            return MinuteInput;
+                        case 'ss':
+                            return SecondInput;
+                        case 'AM':
+                        case 'PM':
+                            return Period;
+                        default:
+                            return part;
+                    }
+                }) }, void 0), !readOnly && Picker] }, void 0));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled }, ref: ref, children: Comp }, void 0)) : (Comp);
 });
 export default TimeInput;
 //# sourceMappingURL=TimeInput.js.map

package/lib/components/DateTime/Input/TimeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  FunctionComponent,\n  useRef,\n  useState,\n  ChangeEvent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Select, { Option } from '../../Select';\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport Popover from '../../Popover';\nimport TimePicker, { MinuteInterval } from '../Picker/TimePicker';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { StyledFormControl } from '../../FormControl';\n\nimport {\n  getDateFormat,\n  parseToDate,\n  is12HClockFormat,\n  validateTime,\n  ClockFormat,\n  getTimeOptions\n} from './utils';\nimport DateTimeProps, { DateTimeCallbackParameter } from './DateTime.types';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\n\nexport interface TimeInputProps extends DateTimeProps {\n  /**\n   * Display the time with seconds.\n   * @default false\n   */\n  withSeconds?: boolean;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  pickerInterval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n}\n\nexport const StyledTimeInput = styled(StyledDateTime)<TimeInputProps>`\n  padding-inline-end: 0;\n`;\n\nfunction getMeridiem(hour: number) {\n  return hour >= 12 ? 'PM' : 'AM';\n}\n\nconst convertTo12h = (hour: number) => {\n  let converted: number = hour;\n  if (hour > 12) converted = hour - 12;\n  else if (hour === 0) converted = 12;\n  return converted;\n};\n\nconst convertTo24h = (hour: number, meridiem: string) => {\n  let converted: number = hour;\n  if (meridiem === 'PM' && hour < 12) converted = hour + 12;\n  else if (meridiem === 'AM' && hour === 12) converted = 0;\n  return converted;\n};\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[],\n  meridiem?: string\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [hour, minute, second = date.getUTCSeconds()] = parts.map(Number);\n\n    const is12h = meridiem !== undefined;\n\n    if (!validateTime(hour, minute, second, is12h)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst TimeInput: FunctionComponent<TimeInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TimeInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      status,\n      withSeconds = false,\n      pickerInterval = 30,\n      clockFormat,\n      info = getDateFormat(locale, getTimeOptions(withSeconds), true).join(''),\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);\n    const [meridiem, setMeridiem] = useState<'AM' | 'PM' | undefined>(\n      is12h ? () => (date ? getMeridiem(date.getUTCHours()) : 'AM') : undefined\n    );\n\n    const [hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLSelectElement>(null)\n    ];\n\n    useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);\n\n    const pickParts = () => {\n      return [\n        hourInputRef.current?.value || undefined,\n        minuteInputRef.current?.value || undefined\n      ].concat(withSeconds ? [secondInputRef.current?.value] : []);\n    };\n\n    const currentlySelectedTime = () => {\n      const parts = pickParts();\n\n      if (parts.every(Boolean)) {\n        const [hour, minute, second = 0] = parts.map(Number);\n        const current = date ?? new Date();\n        return validateTime(hour, minute, second, is12h)\n          ? new Date(\n              current.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second)\n            )\n          : undefined;\n      }\n    };\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const currentMeridiem = meridiemSelectRef.current?.value || undefined;\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts(),\n        is12h ? currentMeridiem : undefined\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n      }\n    };\n\n    const onInputChange = () => {\n      const currentMeridiem = meridiemSelectRef.current?.value || undefined;\n      onChange?.(\n        convertToCallbackParameter(\n          date ? new Date(date) : new Date(),\n          pickParts(),\n          is12h ? currentMeridiem : undefined\n        )\n      );\n    };\n\n    const t = useI18n();\n\n    const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date?.getUTCHours();\n    const HourInput = (\n      <PartInput\n        key='hour'\n        placeholder={t('hour_placeholder')}\n        aria-label={t('hour_label_a11y')}\n        value={hour}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={is12h ? 1 : 0}\n        max={is12h ? 12 : 23}\n        ref={hourInputRef}\n        autoFocus={autoFocus}\n      />\n    );\n\n    const MinuteInput = (\n      <PartInput\n        key='minute'\n        placeholder={t('minute_placeholder')}\n        aria-label={t('minute_label_a11y')}\n        value={date?.getUTCMinutes()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={minuteInputRef}\n      />\n    );\n\n    const SecondInput = (\n      <PartInput\n        key='second'\n        placeholder={t('second_placeholder')}\n        aria-label={t('second_label_a11y')}\n        value={date?.getUTCSeconds()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={secondInputRef}\n      />\n    );\n\n    const Period = (\n      <Select\n        ref={meridiemSelectRef}\n        aria-label={t('meridiem_label_a11y')}\n        key='period'\n        value={meridiem}\n        required={required}\n        disabled={disabled}\n        onChange={(ev: ChangeEvent<HTMLSelectElement>) => {\n          setMeridiem(ev.target.value as 'AM' | 'PM');\n          onInputChange();\n        }}\n        readOnly={readOnly}\n      >\n        <Option value='AM'>{t('meridiem_value_am')}</Option>\n        <Option value='PM'>{t('meridiem_value_pm')}</Option>\n      </Select>\n    );\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const Picker = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={t(open ? 'close_time_button_a11y' : 'open_time_button_a11y')}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'clock'} />\n        </Button>\n\n        <Popover\n          show={open}\n          ref={setPopoverRef}\n          target={containerRef.current}\n          placement='bottom-end'\n          strategy='fixed'\n          modifiers={[\n            {\n              name: 'sameWidth',\n              enabled: true,\n              phase: 'beforeWrite',\n              fn({ state }) {\n                state.styles.popper.width = `${state.rects.reference.width}px`;\n              }\n            },\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-end']\n              }\n            }\n          ]}\n        >\n          <TimePicker\n            selected={currentlySelectedTime()}\n            interval={pickerInterval}\n            onSelect={selected => {\n              hourInputRef.current!.value = (\n                is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours()\n              )\n                .toString()\n                .padStart(2, '0');\n              minuteInputRef.current!.value = selected.getUTCMinutes().toString().padStart(2, '0');\n              if (withSeconds)\n                secondInputRef.current!.value = selected\n                  .getUTCSeconds()\n                  .toString()\n                  .padStart(2, '0');\n              if (meridiemSelectRef.current) {\n                meridiemSelectRef.current!.value = getMeridiem(selected.getUTCHours());\n              }\n              setMeridiem(getMeridiem(selected.getUTCHours()));\n              setOpen(false);\n              buttonEl?.focus();\n              onInputChange();\n            }}\n            clockFormat={clockFormat}\n          />\n        </Popover>\n      </>\n    );\n\n    const Comp = (\n      <Flex\n        as={StyledTimeInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) hourInputRef.current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n        >\n          {getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {\n            switch (part) {\n              case 'hh':\n                return HourInput;\n              case 'mm':\n                return MinuteInput;\n              case 'ss':\n                return SecondInput;\n              case 'AM':\n              case 'PM':\n                return Period;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && Picker}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, status, required, disabled }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TimeInput;\n"]}
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useRef,\n  useState,\n  ChangeEvent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Select, { Option } from '../../Select';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as clockIcon from '../../Icon/icons/clock.icon';\nimport Popover from '../../Popover';\nimport TimePicker, { MinuteInterval } from '../Picker/TimePicker';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n  getDateFormat,\n  parseToDate,\n  is12HClockFormat,\n  validateTime,\n  ClockFormat,\n  getTimeOptions\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\n\nregisterIcon(timesIcon, clockIcon);\n\nexport interface TimeInputProps extends DateTimeProps {\n  /**\n   * Display the time with seconds.\n   * @default false\n   */\n  withSeconds?: boolean;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  pickerInterval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n}\n\nexport const StyledTimeInput = styled(StyledDateTime)<TimeInputProps>`\n  padding-inline-end: 0;\n`;\n\nfunction getMeridiem(hour: number) {\n  return hour >= 12 ? 'PM' : 'AM';\n}\n\nconst convertTo12h = (hour: number) => {\n  let converted: number = hour;\n  if (hour > 12) converted = hour - 12;\n  else if (hour === 0) converted = 12;\n  return converted;\n};\n\nconst convertTo24h = (hour: number, meridiem: string) => {\n  let converted: number = hour;\n  if (meridiem === 'PM' && hour < 12) converted = hour + 12;\n  else if (meridiem === 'AM' && hour === 12) converted = 0;\n  return converted;\n};\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[],\n  meridiem?: string\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [hour, minute, second = date.getUTCSeconds()] = parts.map(Number);\n\n    const is12h = meridiem !== undefined;\n\n    if (!validateTime(hour, minute, second, is12h)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst TimeInput: FunctionComponent<TimeInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TimeInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      status,\n      withSeconds = false,\n      pickerInterval = 30,\n      clockFormat,\n      info = getDateFormat(locale, getTimeOptions(withSeconds), true).join(''),\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);\n    const [meridiem, setMeridiem] = useState<'AM' | 'PM' | undefined>(\n      is12h ? () => (date ? getMeridiem(date.getUTCHours()) : 'AM') : undefined\n    );\n\n    const [hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLSelectElement>(null)\n    ];\n\n    useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);\n\n    const pickParts = () => {\n      return [\n        hourInputRef.current?.value || undefined,\n        minuteInputRef.current?.value || undefined\n      ].concat(withSeconds ? [secondInputRef.current?.value] : []);\n    };\n\n    const currentlySelectedTime = () => {\n      const parts = pickParts();\n\n      if (parts.every(Boolean)) {\n        const [hour, minute, second = 0] = parts.map(Number);\n        const current = date ?? new Date();\n        return validateTime(hour, minute, second, is12h)\n          ? new Date(\n              current.setUTCHours(is12h ? convertTo24h(hour, meridiem!) : hour, minute, second)\n            )\n          : undefined;\n      }\n    };\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const currentMeridiem = meridiemSelectRef.current?.value || undefined;\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts(),\n        is12h ? currentMeridiem : undefined\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n      }\n    };\n\n    const onInputChange = () => {\n      const currentMeridiem = meridiemSelectRef.current?.value || undefined;\n      onChange?.(\n        convertToCallbackParameter(\n          date ? new Date(date) : new Date(),\n          pickParts(),\n          is12h ? currentMeridiem : undefined\n        )\n      );\n    };\n\n    const t = useI18n();\n\n    const hour = date && is12h ? convertTo12h(date.getUTCHours()) : date?.getUTCHours();\n    const HourInput = (\n      <PartInput\n        key='hour'\n        placeholder={t('hour_placeholder')}\n        aria-label={t('hour_label_a11y')}\n        value={hour}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={is12h ? 1 : 0}\n        max={is12h ? 12 : 23}\n        ref={hourInputRef}\n        autoFocus={autoFocus}\n      />\n    );\n\n    const MinuteInput = (\n      <PartInput\n        key='minute'\n        placeholder={t('minute_placeholder')}\n        aria-label={t('minute_label_a11y')}\n        value={date?.getUTCMinutes()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={minuteInputRef}\n      />\n    );\n\n    const SecondInput = (\n      <PartInput\n        key='second'\n        placeholder={t('second_placeholder')}\n        aria-label={t('second_label_a11y')}\n        value={date?.getUTCSeconds()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={secondInputRef}\n      />\n    );\n\n    const Period = (\n      <Select\n        ref={meridiemSelectRef}\n        aria-label={t('meridiem_label_a11y')}\n        key='period'\n        value={meridiem}\n        required={required}\n        disabled={disabled}\n        onChange={(ev: ChangeEvent<HTMLSelectElement>) => {\n          setMeridiem(ev.target.value as 'AM' | 'PM');\n          onInputChange();\n        }}\n        readOnly={readOnly}\n      >\n        <Option value='AM'>{t('meridiem_value_am')}</Option>\n        <Option value='PM'>{t('meridiem_value_pm')}</Option>\n      </Select>\n    );\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const Picker = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={t(open ? 'close_time_button_a11y' : 'open_time_button_a11y')}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'clock'} />\n        </Button>\n\n        <Popover\n          show={open}\n          ref={setPopoverRef}\n          target={containerRef.current}\n          placement='bottom-end'\n          strategy='fixed'\n          modifiers={[\n            {\n              name: 'sameWidth',\n              enabled: true,\n              phase: 'beforeWrite',\n              fn({ state }) {\n                state.styles.popper.width = `${state.rects.reference.width}px`;\n              }\n            },\n            {\n              name: 'flip',\n              options: {\n                fallbackPlacements: ['top-end']\n              }\n            }\n          ]}\n        >\n          <TimePicker\n            selected={currentlySelectedTime()}\n            interval={pickerInterval}\n            onSelect={selected => {\n              hourInputRef.current!.value = (\n                is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours()\n              )\n                .toString()\n                .padStart(2, '0');\n              minuteInputRef.current!.value = selected.getUTCMinutes().toString().padStart(2, '0');\n              if (withSeconds)\n                secondInputRef.current!.value = selected\n                  .getUTCSeconds()\n                  .toString()\n                  .padStart(2, '0');\n              if (meridiemSelectRef.current) {\n                meridiemSelectRef.current!.value = getMeridiem(selected.getUTCHours());\n              }\n              setMeridiem(getMeridiem(selected.getUTCHours()));\n              setOpen(false);\n              buttonEl?.focus();\n              onInputChange();\n            }}\n            clockFormat={clockFormat}\n          />\n        </Popover>\n      </>\n    );\n\n    const Comp = (\n      <Flex\n        as={StyledTimeInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) hourInputRef.current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n        >\n          {getDateFormat(locale, getTimeOptions(withSeconds, is12h)).map(part => {\n            switch (part) {\n              case 'hh':\n                return HourInput;\n              case 'mm':\n                return MinuteInput;\n              case 'ss':\n                return SecondInput;\n              case 'AM':\n              case 'PM':\n                return Period;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && Picker}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, status, required, disabled }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TimeInput;\n"]}

package/lib/components/DateTime/Input/WeekInput.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
-import DateTimeProps from './DateTime.types';
+import DateTimeProps from '../DateTime.types';
 export interface WeekInputProps extends DateTimeProps {
 }
 export declare const StyledWeekInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WeekInputProps, never>;

package/lib/components/DateTime/Input/WeekInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WeekInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/WeekInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAI3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAW9C,OAAO,aAA4C,MAAM,kBAAkB,CAAC;AAM5E,MAAM,WAAW,cAAe,SAAQ,aAAa;CAAG;AAExD,eAAO,MAAM,eAAe,qHAY1B,CAAC;AA6BH,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA6M/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"WeekInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/WeekInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAIpF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAW9C,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAgB7E,MAAM,WAAW,cAAe,SAAQ,aAAa;CAAG;AAExD,eAAO,MAAM,eAAe,qHAY1B,CAAC;AA6BH,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwN/D,CAAC;AAEF,eAAe,SAAS,CAAC"}