@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/DateTime/Input/DateTimeInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.types.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,CAAC,CAAC;CACb;AAED,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,CAAC;CACf;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;CAAG"}

package/lib/components/DateTime/Input/DateTimeInput.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DateTimeInput.types.js.map

package/lib/components/DateTime/Input/DateTimeInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.types.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface DateParts<T> {\n  day?: T;\n  month?: T;\n  year: T;\n  week?: T;\n  quarter?: T;\n}\n\nexport interface TimeParts<T> {\n  hour: T;\n  minute: T;\n  second?: T;\n  dayPeriod?: T;\n}\n\nexport interface DateTimeParts<T> extends DateParts<T>, TimeParts<T> {}\n"]}

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

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react';
-import { ForwardProps } from '../../../types';
+import { ForwardProps, TestIdProp } from '../../../types';
 import { FormControlProps } from '../../FormControl';
-export declare type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;
-export interface DayOfWeekInputProps {
+export type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+export interface DayOfWeekInputProps extends TestIdProp {
     /**
      * Number from range [1-7].
      * Creates a controlled input and sets the value. Requires an onChange handler to update value.
@@ -35,6 +35,8 @@ export interface DayOfWeekInputProps {
     /** Callback fired when input value changes. */
     onChange?: (value: DayOfWeek) => void;
 }
-declare const DayOfWeekInput: FunctionComponent<DayOfWeekInputProps & ForwardProps>;
-export default DayOfWeekInput;
+declare const _default: FunctionComponent<DayOfWeekInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=DayOfWeekInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DayOfWeekInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DayOfWeekInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMrD,oBAAY,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAiDD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6BzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DayOfWeekInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DayOfWeekInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAQrD,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;;;;AAmFD,wBAAqE"}

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import Select, { Option } from '../../Select';
-import { useConfiguration } from '../../../hooks';
+import { useConfiguration, useTestIds } from '../../../hooks';
+import { getDayOfWeekInputTestIds } from '../DateTime.test-ids';
+import { withTestIds } from '../../../utils';
 import { CALENDAR_TYPES } from './local';
 import { getCalendarTypeFromLocale, getWeekdays } from './utils';
 // returns object with properties for localized days names
@@ -44,13 +46,14 @@ function generateOrderedDays(dayOfWeekNames, refCalendarType) {
 }
 const DayOfWeekInput = (props) => {
     const { locale } = useConfiguration();
-    const { value, required, readOnly, disabled, onChange, ...restProps } = props;
+    const { testId, value, required, readOnly, disabled, onChange, ...restProps } = props;
+    const testIds = useTestIds(testId, getDayOfWeekInputTestIds);
     // days ordered according to given calendar
     const dayOfWeekOptions = useMemo(() => generateOrderedDays(getDayOfWeekNamesMap(locale), getCalendarTypeFromLocale(locale)), [locale]);
     const onChangeWrapper = ev => {
         onChange?.(Number(ev.target.value));
     };
-    return (_jsxs(Select, { required: required, value: value ? value.toString() : undefined, onChange: onChangeWrapper, readOnly: readOnly, disabled: disabled || readOnly, ...restProps, children: [!required && _jsx(Option, { children: " " }), dayOfWeekOptions] }));
+    return (_jsxs(Select, { "data-testid": testIds.control, required: required, value: value ? value.toString() : undefined, onChange: onChangeWrapper, readOnly: readOnly, disabled: disabled || readOnly, ...restProps, children: [!required && _jsx(Option, { children: " " }), dayOfWeekOptions] }));
 };
-export default DayOfWeekInput;
+export default withTestIds(DayOfWeekInput, getDayOfWeekInputTestIds);
 //# sourceMappingURL=DayOfWeekInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DayOfWeekInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DayOfWeekInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport { ForwardProps } from '../../../types';\nimport Select, { Option } from '../../Select';\nimport { SelectProps } from '../../Select/Select';\nimport { FormControlProps } from '../../FormControl';\nimport { useConfiguration } from '../../../hooks';\n\nimport { CALENDAR_TYPES } from './local';\nimport { getCalendarTypeFromLocale, getWeekdays } from './utils';\n\nexport type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;\n\nexport interface DayOfWeekInputProps {\n  /**\n   * Number from range [1-7].\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: DayOfWeek;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Callback fired when input value changes. */\n  onChange?: (value: DayOfWeek) => void;\n}\n\n// returns object with properties for localized days names\n// properties are numbers corresponding to days order according to ISO_8601 calendar (1-Monday, 2-Tuesday etc.)\nfunction getDayOfWeekNamesMap(localeTag?: string) {\n  return getWeekdays(CALENDAR_TYPES.ISO_8601).reduce((accumulator, dayDate, index) => {\n    accumulator[index + 1] = dayDate.toLocaleString(localeTag, {\n      weekday: 'long',\n      timeZone: 'UTC'\n    });\n    return accumulator;\n  }, {} as { [key: number]: string });\n}\n\n// returns index of the first day of week according to given calendar type\n// returned value is a position of the day in base ISO calendar\nfunction getFirstWeekDayForCalendar(refCalendarType = CALENDAR_TYPES.ISO_8601) {\n  switch (refCalendarType) {\n    case CALENDAR_TYPES.ISO_8601:\n      // start week with Monday\n      return 0;\n    case CALENDAR_TYPES.ARABIC:\n      // start week with Saturday\n      return 5;\n    case CALENDAR_TYPES.HEBREW:\n    case CALENDAR_TYPES.US:\n      // start week with Sunday\n      return 6;\n    default:\n      // ISO as default\n      return 0;\n  }\n}\n\n// returns array of Options for day names, ordered according to given calendar\nfunction generateOrderedDays(dayOfWeekNames: { [key: number]: string }, refCalendarType: string) {\n  const optionsArray = Object.keys(dayOfWeekNames).map(key => {\n    return (\n      <Option key={dayOfWeekNames[Number(key)]} value={key.toString()}>\n        {dayOfWeekNames[Number(key)]}\n      </Option>\n    );\n  });\n\n  const startingDayIndex = getFirstWeekDayForCalendar(refCalendarType);\n\n  return [...optionsArray.slice(startingDayIndex), ...optionsArray.slice(0, startingDayIndex)];\n}\n\nconst DayOfWeekInput: FunctionComponent<DayOfWeekInputProps & ForwardProps> = (\n  props: DayOfWeekInputProps\n) => {\n  const { locale } = useConfiguration();\n  const { value, required, readOnly, disabled, onChange, ...restProps } = props;\n\n  // days ordered according to given calendar\n  const dayOfWeekOptions = useMemo(\n    () => generateOrderedDays(getDayOfWeekNamesMap(locale), getCalendarTypeFromLocale(locale)),\n    [locale]\n  );\n\n  const onChangeWrapper: SelectProps['onChange'] = ev => {\n    onChange?.(Number(ev.target.value) as DayOfWeek);\n  };\n\n  return (\n    <Select\n      required={required}\n      value={value ? value.toString() : undefined}\n      onChange={onChangeWrapper}\n      readOnly={readOnly}\n      disabled={disabled || readOnly}\n      {...restProps}\n    >\n      {!required && <Option> </Option>}\n      {dayOfWeekOptions}\n    </Select>\n  );\n};\n\nexport default DayOfWeekInput;\n"]}
+{"version":3,"file":"DayOfWeekInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DayOfWeekInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport { ForwardProps, TestIdProp } from '../../../types';\nimport Select, { Option } from '../../Select';\nimport { SelectProps } from '../../Select/Select';\nimport { FormControlProps } from '../../FormControl';\nimport { useConfiguration, useTestIds } from '../../../hooks';\nimport { getDayOfWeekInputTestIds } from '../DateTime.test-ids';\nimport { withTestIds } from '../../../utils';\n\nimport { CALENDAR_TYPES } from './local';\nimport { getCalendarTypeFromLocale, getWeekdays } from './utils';\n\nexport type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;\n\nexport interface DayOfWeekInputProps extends TestIdProp {\n  /**\n   * Number from range [1-7].\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: DayOfWeek;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Callback fired when input value changes. */\n  onChange?: (value: DayOfWeek) => void;\n}\n\n// returns object with properties for localized days names\n// properties are numbers corresponding to days order according to ISO_8601 calendar (1-Monday, 2-Tuesday etc.)\nfunction getDayOfWeekNamesMap(localeTag?: string) {\n  return getWeekdays(CALENDAR_TYPES.ISO_8601).reduce((accumulator, dayDate, index) => {\n    accumulator[index + 1] = dayDate.toLocaleString(localeTag, {\n      weekday: 'long',\n      timeZone: 'UTC'\n    });\n    return accumulator;\n  }, {} as { [key: number]: string });\n}\n\n// returns index of the first day of week according to given calendar type\n// returned value is a position of the day in base ISO calendar\nfunction getFirstWeekDayForCalendar(refCalendarType = CALENDAR_TYPES.ISO_8601) {\n  switch (refCalendarType) {\n    case CALENDAR_TYPES.ISO_8601:\n      // start week with Monday\n      return 0;\n    case CALENDAR_TYPES.ARABIC:\n      // start week with Saturday\n      return 5;\n    case CALENDAR_TYPES.HEBREW:\n    case CALENDAR_TYPES.US:\n      // start week with Sunday\n      return 6;\n    default:\n      // ISO as default\n      return 0;\n  }\n}\n\n// returns array of Options for day names, ordered according to given calendar\nfunction generateOrderedDays(dayOfWeekNames: { [key: number]: string }, refCalendarType: string) {\n  const optionsArray = Object.keys(dayOfWeekNames).map(key => {\n    return (\n      <Option key={dayOfWeekNames[Number(key)]} value={key.toString()}>\n        {dayOfWeekNames[Number(key)]}\n      </Option>\n    );\n  });\n\n  const startingDayIndex = getFirstWeekDayForCalendar(refCalendarType);\n\n  return [...optionsArray.slice(startingDayIndex), ...optionsArray.slice(0, startingDayIndex)];\n}\n\nconst DayOfWeekInput: FunctionComponent<DayOfWeekInputProps & ForwardProps> = (\n  props: DayOfWeekInputProps\n) => {\n  const { locale } = useConfiguration();\n  const { testId, value, required, readOnly, disabled, onChange, ...restProps } = props;\n\n  const testIds = useTestIds(testId, getDayOfWeekInputTestIds);\n\n  // days ordered according to given calendar\n  const dayOfWeekOptions = useMemo(\n    () => generateOrderedDays(getDayOfWeekNamesMap(locale), getCalendarTypeFromLocale(locale)),\n    [locale]\n  );\n\n  const onChangeWrapper: SelectProps['onChange'] = ev => {\n    onChange?.(Number(ev.target.value) as DayOfWeek);\n  };\n\n  return (\n    <Select\n      data-testid={testIds.control}\n      required={required}\n      value={value ? value.toString() : undefined}\n      onChange={onChangeWrapper}\n      readOnly={readOnly}\n      disabled={disabled || readOnly}\n      {...restProps}\n    >\n      {!required && <Option> </Option>}\n      {dayOfWeekOptions}\n    </Select>\n  );\n};\n\nexport default withTestIds(DayOfWeekInput, getDayOfWeekInputTestIds);\n"]}

package/lib/components/DateTime/Input/Duration/DurationInput.d.ts

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../../types';
 import DurationInputProps from './DurationInput.types';
-declare const DurationInput: FunctionComponent<DurationInputProps & ForwardProps>;
-export default DurationInput;
+declare const _default: FunctionComponent<DurationInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../../../types").TestIdsRecord<readonly ["control-hour", "control-minute", "control-second", "control-number", "control-unit", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=DurationInput.d.ts.map

package/lib/components/DateTime/Input/Duration/DurationInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,kBAA8B,MAAM,uBAAuB,CAAC;AAEnE,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8CvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,kBAA8B,MAAM,uBAAuB,CAAC;;;;AAsDnE,wBAAmE"}

package/lib/components/DateTime/Input/Duration/DurationInput.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useI18n } from '../../../../hooks';
+import { useI18n, useTestIds } from '../../../../hooks';
 import FormField from '../../../FormField';
+import { getDurationInputTestIds } from '../../DateTime.test-ids';
+import { withTestIds } from '../../../../utils';
 import Time from './Time';
 import NumberUnit from './NumberUnit';
 import { Format } from './DurationInput.types';
 const DurationInput = forwardRef((props, ref) => {
-    const { id, label, labelHidden, required, status, disabled, onChange, format = Format.Seconds, onSelect, additionalInfo, ...restProps } = props;
+    const { testId, id, label, labelHidden, required, status, disabled, onChange, format = Format.Seconds, onSelect, additionalInfo, ...restProps } = props;
+    const testIds = useTestIds(testId, getDurationInputTestIds);
     const t = useI18n();
-    const Comp = format === Format.Formatted ? (_jsx(Time, { ...{ status, disabled, onChange }, ...restProps })) : (_jsx(NumberUnit, { ...{ format, status, disabled, onChange, onSelect }, ...restProps }));
+    const Comp = format === Format.Formatted ? (_jsx(Time, { ...{ testId, status, disabled, onChange }, ...restProps })) : (_jsx(NumberUnit, { ...{ testId, format, status, disabled, onChange, onSelect }, ...restProps }));
     return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', info: format === Format.Formatted && t('time_format_info'), status: status, ...{
+            testId: testIds,
             label,
             labelHidden,
             id,
@@ -19,5 +23,5 @@ const DurationInput = forwardRef((props, ref) => {
             additionalInfo
         }, children: Comp })) : (Comp);
 });
-export default DurationInput;
+export default withTestIds(DurationInput, getDurationInputTestIds);
 //# sourceMappingURL=DurationInput.js.map

package/lib/components/DateTime/Input/Duration/DurationInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAA0B,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAG3C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAA2B,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA6B,EAAE,EAAE;IAC5E,MAAM,EACJ,EAAE,EACF,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,MAAM,CAAC,OAAO,EACvB,QAAQ,EACR,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,IAAI,GACR,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,OAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAM,SAAS,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAM,SAAS,GAAI,CACpF,CAAC;IAEJ,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,kBAAkB,CAAC,EAC1D,MAAM,EAAE,MAAM,KACV;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,QAAQ;YACR,QAAQ;YACR,GAAG;YACH,cAAc;SACf,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { PropsWithoutRef, forwardRef, Ref, FunctionComponent } from 'react';\n\nimport { useI18n } from '../../../../hooks';\nimport FormField from '../../../FormField';\nimport { ForwardProps } from '../../../../types';\n\nimport Time from './Time';\nimport NumberUnit from './NumberUnit';\nimport DurationInputProps, { Format } from './DurationInput.types';\n\nconst DurationInput: FunctionComponent<DurationInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DurationInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n    const {\n      id,\n      label,\n      labelHidden,\n      required,\n      status,\n      disabled,\n      onChange,\n      format = Format.Seconds,\n      onSelect,\n      additionalInfo,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const Comp =\n      format === Format.Formatted ? (\n        <Time {...{ status, disabled, onChange }} {...restProps} />\n      ) : (\n        <NumberUnit {...{ format, status, disabled, onChange, onSelect }} {...restProps} />\n      );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        info={format === Format.Formatted && t('time_format_info')}\n        status={status}\n        {...{\n          label,\n          labelHidden,\n          id,\n          required,\n          disabled,\n          ref,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default DurationInput;\n"]}
+{"version":3,"file":"DurationInput.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAA0B,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAA2B,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA6B,EAAE,EAAE;IAC5E,MAAM,EACJ,MAAM,EACN,EAAE,EACF,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,MAAM,CAAC,OAAO,EACvB,QAAQ,EACR,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,IAAI,GACR,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,OAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAM,SAAS,GAAI,CACpE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAM,SAAS,GAAI,CAC5F,CAAC;IAEJ,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,kBAAkB,CAAC,EAC1D,MAAM,EAAE,MAAM,KACV;YACF,MAAM,EAAE,OAAO;YACf,KAAK;YACL,WAAW;YACX,EAAE;YACF,QAAQ;YACR,QAAQ;YACR,GAAG;YACH,cAAc;SACf,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { PropsWithoutRef, forwardRef, Ref, FunctionComponent } from 'react';\n\nimport { useI18n, useTestIds } from '../../../../hooks';\nimport FormField from '../../../FormField';\nimport { ForwardProps } from '../../../../types';\nimport { getDurationInputTestIds } from '../../DateTime.test-ids';\nimport { withTestIds } from '../../../../utils';\n\nimport Time from './Time';\nimport NumberUnit from './NumberUnit';\nimport DurationInputProps, { Format } from './DurationInput.types';\n\nconst DurationInput: FunctionComponent<DurationInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DurationInputProps>, ref: Ref<HTMLFieldSetElement>) => {\n    const {\n      testId,\n      id,\n      label,\n      labelHidden,\n      required,\n      status,\n      disabled,\n      onChange,\n      format = Format.Seconds,\n      onSelect,\n      additionalInfo,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getDurationInputTestIds);\n\n    const t = useI18n();\n\n    const Comp =\n      format === Format.Formatted ? (\n        <Time {...{ testId, status, disabled, onChange }} {...restProps} />\n      ) : (\n        <NumberUnit {...{ testId, format, status, disabled, onChange, onSelect }} {...restProps} />\n      );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        info={format === Format.Formatted && t('time_format_info')}\n        status={status}\n        {...{\n          testId: testIds,\n          label,\n          labelHidden,\n          id,\n          required,\n          disabled,\n          ref,\n          additionalInfo\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(DurationInput, getDurationInputTestIds);\n"]}

package/lib/components/DateTime/Input/Duration/DurationInput.types.d.ts

@@ -1,4 +1,5 @@
 import { FormControlProps } from '../../../FormControl';
+import { TestIdProp } from '../../../../types';
 export declare enum Format {
     Seconds = "seconds",
     Minutes = "minutes",
@@ -6,7 +7,7 @@ export declare enum Format {
     Days = "days",
     Formatted = "formatted"
 }
-export default interface DurationInputProps {
+export default interface DurationInputProps extends TestIdProp {
     /** Number of milliseconds value for controlled input. */
     value?: number;
     /** Number of milliseconds value for uncontrolled input.

package/lib/components/DateTime/Input/Duration/DurationInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,oBAAY,MAAM;IAChB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,cAAc;CACxB;AAED,MAAM,CAAC,OAAO,WAAW,kBAAkB;IACzC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD"}
+{"version":3,"file":"DurationInput.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,oBAAY,MAAM;IAChB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,cAAc;CACxB;AAED,MAAM,CAAC,OAAO,WAAW,kBAAmB,SAAQ,UAAU;IAC5D,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD"}

package/lib/components/DateTime/Input/Duration/DurationInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.types.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,MAMX;AAND,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,6BAAmB,CAAA;IACnB,yBAAe,CAAA;IACf,uBAAa,CAAA;IACb,iCAAuB,CAAA;AACzB,CAAC,EANW,MAAM,KAAN,MAAM,QAMjB","sourcesContent":["import { FormControlProps } from '../../../FormControl';\n\nexport enum Format {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days',\n  Formatted = 'formatted'\n}\n\nexport default interface DurationInputProps {\n  /** Number of milliseconds value for controlled input. */\n  value?: number;\n  /** Number of milliseconds value for uncontrolled input.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Sets the duration format.\n   * @default seconds\n   */\n  format?: Format;\n  /** Callback fired on lost focus of the input field. */\n  onChange?: (value: number | undefined) => void;\n  /** Callback fired after new format option selected. */\n  onSelect?: (value: Format) => void;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n"]}
+{"version":3,"file":"DurationInput.types.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,MAMX;AAND,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,6BAAmB,CAAA;IACnB,yBAAe,CAAA;IACf,uBAAa,CAAA;IACb,iCAAuB,CAAA;AACzB,CAAC,EANW,MAAM,KAAN,MAAM,QAMjB","sourcesContent":["import { FormControlProps } from '../../../FormControl';\nimport { TestIdProp } from '../../../../types';\n\nexport enum Format {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days',\n  Formatted = 'formatted'\n}\n\nexport default interface DurationInputProps extends TestIdProp {\n  /** Number of milliseconds value for controlled input. */\n  value?: number;\n  /** Number of milliseconds value for uncontrolled input.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Sets the duration format.\n   * @default seconds\n   */\n  format?: Format;\n  /** Callback fired on lost focus of the input field. */\n  onChange?: (value: number | undefined) => void;\n  /** Callback fired after new format option selected. */\n  onSelect?: (value: Format) => void;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n"]}

package/lib/components/DateTime/Input/Duration/NumberUnit.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ForwardProps } from '../../../../types';
 import DurationInputProps from './DurationInput.types';
 export declare const StyledNumberUnit: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DurationInputProps, never>;
-declare type NumberUnitProps = DurationInputProps & ForwardProps;
+type NumberUnitProps = DurationInputProps & ForwardProps;
 declare const NumberUnit: FC<NumberUnitProps>;
 export default NumberUnit;
 //# sourceMappingURL=NumberUnit.d.ts.map

package/lib/components/DateTime/Input/Duration/NumberUnit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberUnit.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/NumberUnit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAmD,MAAM,OAAO,CAAC;AAOzF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,OAAO,kBAA8B,MAAM,uBAAuB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,yHA2B5B,CAAC;AAIF,aAAK,eAAe,GAAG,kBAAkB,GAAG,YAAY,CAAC;AAIzD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwGnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"NumberUnit.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/NumberUnit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAmD,MAAM,OAAO,CAAC;AAOzF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,OAAO,kBAA8B,MAAM,uBAAuB,CAAC;AAEnE,eAAO,MAAM,gBAAgB,yHA2B5B,CAAC;AAIF,KAAK,eAAe,GAAG,kBAAkB,GAAG,YAAY,CAAC;AAIzD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8GnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/DateTime/Input/Duration/NumberUnit.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useI18n, useUID } from '../../../../hooks';
+import { useI18n, useTestIds, useUID } from '../../../../hooks';
 import StyledInput from '../../../Input/Input.styles';
 import { StyledSelect } from '../../../Select/Select';
 import { msToTimeUnit, timeUnitToMs } from '../utils';
@@ -11,6 +11,7 @@ import Flex from '../../../Flex';
 import Input from '../../../Input';
 import Select, { Option } from '../../../Select';
 import { defaultThemeProp } from '../../../../theme';
+import { getDurationInputTestIds } from '../../DateTime.test-ids';
 import { Format } from './DurationInput.types';
 export const StyledNumberUnit = styled(StyledDateTime) `
   padding: 0;
@@ -43,7 +44,8 @@ export const StyledNumberUnit = styled(StyledDateTime) `
 StyledNumberUnit.defaultProps = defaultThemeProp;
 const OPTIONS = [Format.Seconds, Format.Minutes, Format.Hours, Format.Days];
 const NumberUnit = (props) => {
-    const { defaultValue = 0, value, onChange, format = Format.Seconds, onSelect, disabled, readOnly, required, status, autoFocus, ...restProps } = props;
+    const { testId, defaultValue = 0, value, onChange, format = Format.Seconds, onSelect, disabled, readOnly, required, status, autoFocus, ...restProps } = props;
+    const testIds = useTestIds(testId, getDurationInputTestIds);
     const t = useI18n();
     const [valueInMs, setValueInMs] = useState(value ?? defaultValue);
     const [unit, setUnit] = useState(format);
@@ -77,7 +79,7 @@ const NumberUnit = (props) => {
     }, [onSelect]);
     const unitOptions = OPTIONS.map(option => (_jsx(Option, { value: option, children: t(`${option}_text`) }, option)));
     const id = useUID();
-    return (_jsxs(Flex, { as: StyledNumberUnit, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ...restProps, children: [_jsx(Input, { type: 'number', placeholder: '0', "aria-labelledby": id, value: msToTimeUnit(valueInMs, unit), onChange: onNumberInputChange, onBlur: onInputBlur, onKeyDown: onInputKeyDown, required: required, status: status, readOnly: readOnly, disabled: disabled, autoFocus: autoFocus }, 'number'), _jsx(Select, { id: id, "aria-label": t('time_unit'), value: unit, required: required, status: status, readOnly: readOnly, disabled: disabled || readOnly, onChange: onSelectChange, children: unitOptions }, 'unit')] }));
+    return (_jsxs(Flex, { "data-testid": testIds.root, as: StyledNumberUnit, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ...restProps, children: [_jsx(Input, { "data-testid": testIds.controlNumber, type: 'number', placeholder: '0', "aria-labelledby": id, value: msToTimeUnit(valueInMs, unit), onChange: onNumberInputChange, onBlur: onInputBlur, onKeyDown: onInputKeyDown, required: required, status: status, readOnly: readOnly, disabled: disabled, autoFocus: autoFocus }, 'number'), _jsx(Select, { "data-testid": testIds.controlUnit, id: id, "aria-label": t('time_unit'), value: unit, required: required, status: status, readOnly: readOnly, disabled: disabled || readOnly, onChange: onSelectChange, children: unitOptions }, 'unit')] }));
 };
 export default NumberUnit;
 //# sourceMappingURL=NumberUnit.js.map

package/lib/components/DateTime/Input/Duration/NumberUnit.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberUnit.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/NumberUnit.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { TranslationPack } from '../../../../i18n';\nimport { useI18n, useUID } from '../../../../hooks';\nimport StyledInput from '../../../Input/Input.styles';\nimport { StyledSelect } from '../../../Select/Select';\nimport { ForwardProps } from '../../../../types';\nimport { msToTimeUnit, timeUnitToMs } from '../utils';\nimport StyledDateTime from '../DateTime.styles';\nimport { StyledFormControl } from '../../../FormControl';\nimport Flex from '../../../Flex';\nimport Input from '../../../Input';\nimport Select, { Option } from '../../../Select';\nimport { defaultThemeProp } from '../../../../theme';\n\nimport DurationInputProps, { Format } from './DurationInput.types';\n\nexport const StyledNumberUnit = styled(StyledDateTime)<DurationInputProps>`\n  padding: 0;\n  border: 0;\n  height: auto;\n  &:focus-within:not([readonly]):not([disabled]) {\n    box-shadow: none;\n  }\n  > ${StyledInput} {\n    background-color: transparent;\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n  > ${StyledSelect} {\n    max-width: max-content;\n    margin-inline-start: -0.0625rem;\n    background-color: transparent;\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n  &[readonly] > ${StyledSelect} {\n    color: currentcolor;\n    opacity: 1;\n    cursor: default;\n  }\n  > ${StyledInput}:hover:not([readonly]):not([disabled]) + ${StyledSelect} {\n    border-inline-start: transparent;\n  }\n`;\n\nStyledNumberUnit.defaultProps = defaultThemeProp;\n\ntype NumberUnitProps = DurationInputProps & ForwardProps;\n\nconst OPTIONS = [Format.Seconds, Format.Minutes, Format.Hours, Format.Days];\n\nconst NumberUnit: FC<NumberUnitProps> = (props: DurationInputProps) => {\n  const {\n    defaultValue = 0,\n    value,\n    onChange,\n    format = Format.Seconds,\n    onSelect,\n    disabled,\n    readOnly,\n    required,\n    status,\n    autoFocus,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const [valueInMs, setValueInMs] = useState<number>(value ?? defaultValue);\n  const [unit, setUnit] = useState<Format>(format);\n\n  useEffect(() => {\n    setUnit(format);\n  }, [format]);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setValueInMs(value);\n    }\n  }, [value]);\n\n  const onNumberInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = Number(ev.target.value);\n      if (Number.isNaN(inputValue) || inputValue < 0) return;\n      setValueInMs(timeUnitToMs(inputValue, unit));\n    },\n    [unit]\n  );\n\n  const onInputBlur = useCallback(() => {\n    if (!disabled && !readOnly && onChange) {\n      onChange(valueInMs);\n    }\n  }, [valueInMs, onChange]);\n\n  const onInputKeyDown = useCallback((ev: KeyboardEvent<HTMLInputElement>) => {\n    if (['e', 'E', '+', '-', ',', '.'].includes(ev.key)) ev.preventDefault();\n  }, []);\n\n  const onSelectChange = useCallback(\n    (ev: ChangeEvent<HTMLSelectElement>) => {\n      const selectedValue = ev.target.value as Format;\n      setUnit(selectedValue);\n      onSelect?.(selectedValue);\n    },\n    [onSelect]\n  );\n\n  const unitOptions = OPTIONS.map(option => (\n    <Option key={option} value={option}>\n      {t(`${option}_text` as keyof TranslationPack)}\n    </Option>\n  ));\n\n  const id = useUID();\n\n  return (\n    <Flex\n      as={StyledNumberUnit}\n      forwardedAs={StyledFormControl}\n      container={{ alignItems: 'center', wrap: 'nowrap' }}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      {...restProps}\n    >\n      <Input\n        type='number'\n        key='number'\n        placeholder='0'\n        aria-labelledby={id}\n        value={msToTimeUnit(valueInMs, unit) as any}\n        onChange={onNumberInputChange}\n        onBlur={onInputBlur}\n        onKeyDown={onInputKeyDown}\n        required={required}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        autoFocus={autoFocus}\n      />\n      <Select\n        id={id}\n        aria-label={t('time_unit')}\n        key='unit'\n        value={unit}\n        required={required}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled || readOnly}\n        onChange={onSelectChange}\n      >\n        {unitOptions}\n      </Select>\n    </Flex>\n  );\n};\n\nexport default NumberUnit;\n"]}
+{"version":3,"file":"NumberUnit.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/NumberUnit.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { TranslationPack } from '../../../../i18n';\nimport { useI18n, useTestIds, useUID } from '../../../../hooks';\nimport StyledInput from '../../../Input/Input.styles';\nimport { StyledSelect } from '../../../Select/Select';\nimport { ForwardProps } from '../../../../types';\nimport { msToTimeUnit, timeUnitToMs } from '../utils';\nimport StyledDateTime from '../DateTime.styles';\nimport { StyledFormControl } from '../../../FormControl';\nimport Flex from '../../../Flex';\nimport Input from '../../../Input';\nimport Select, { Option } from '../../../Select';\nimport { defaultThemeProp } from '../../../../theme';\nimport { getDurationInputTestIds } from '../../DateTime.test-ids';\n\nimport DurationInputProps, { Format } from './DurationInput.types';\n\nexport const StyledNumberUnit = styled(StyledDateTime)<DurationInputProps>`\n  padding: 0;\n  border: 0;\n  height: auto;\n  &:focus-within:not([readonly]):not([disabled]) {\n    box-shadow: none;\n  }\n  > ${StyledInput} {\n    background-color: transparent;\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n  > ${StyledSelect} {\n    max-width: max-content;\n    margin-inline-start: -0.0625rem;\n    background-color: transparent;\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n  &[readonly] > ${StyledSelect} {\n    color: currentcolor;\n    opacity: 1;\n    cursor: default;\n  }\n  > ${StyledInput}:hover:not([readonly]):not([disabled]) + ${StyledSelect} {\n    border-inline-start: transparent;\n  }\n`;\n\nStyledNumberUnit.defaultProps = defaultThemeProp;\n\ntype NumberUnitProps = DurationInputProps & ForwardProps;\n\nconst OPTIONS = [Format.Seconds, Format.Minutes, Format.Hours, Format.Days];\n\nconst NumberUnit: FC<NumberUnitProps> = (props: DurationInputProps) => {\n  const {\n    testId,\n    defaultValue = 0,\n    value,\n    onChange,\n    format = Format.Seconds,\n    onSelect,\n    disabled,\n    readOnly,\n    required,\n    status,\n    autoFocus,\n    ...restProps\n  } = props;\n  const testIds = useTestIds(testId, getDurationInputTestIds);\n\n  const t = useI18n();\n  const [valueInMs, setValueInMs] = useState<number>(value ?? defaultValue);\n  const [unit, setUnit] = useState<Format>(format);\n\n  useEffect(() => {\n    setUnit(format);\n  }, [format]);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setValueInMs(value);\n    }\n  }, [value]);\n\n  const onNumberInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = Number(ev.target.value);\n      if (Number.isNaN(inputValue) || inputValue < 0) return;\n      setValueInMs(timeUnitToMs(inputValue, unit));\n    },\n    [unit]\n  );\n\n  const onInputBlur = useCallback(() => {\n    if (!disabled && !readOnly && onChange) {\n      onChange(valueInMs);\n    }\n  }, [valueInMs, onChange]);\n\n  const onInputKeyDown = useCallback((ev: KeyboardEvent<HTMLInputElement>) => {\n    if (['e', 'E', '+', '-', ',', '.'].includes(ev.key)) ev.preventDefault();\n  }, []);\n\n  const onSelectChange = useCallback(\n    (ev: ChangeEvent<HTMLSelectElement>) => {\n      const selectedValue = ev.target.value as Format;\n      setUnit(selectedValue);\n      onSelect?.(selectedValue);\n    },\n    [onSelect]\n  );\n\n  const unitOptions = OPTIONS.map(option => (\n    <Option key={option} value={option}>\n      {t(`${option}_text` as keyof TranslationPack)}\n    </Option>\n  ));\n\n  const id = useUID();\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      as={StyledNumberUnit}\n      forwardedAs={StyledFormControl}\n      container={{ alignItems: 'center', wrap: 'nowrap' }}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      {...restProps}\n    >\n      <Input\n        data-testid={testIds.controlNumber}\n        type='number'\n        key='number'\n        placeholder='0'\n        aria-labelledby={id}\n        value={msToTimeUnit(valueInMs, unit) as any}\n        onChange={onNumberInputChange}\n        onBlur={onInputBlur}\n        onKeyDown={onInputKeyDown}\n        required={required}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        autoFocus={autoFocus}\n      />\n      <Select\n        data-testid={testIds.controlUnit}\n        id={id}\n        aria-label={t('time_unit')}\n        key='unit'\n        value={unit}\n        required={required}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled || readOnly}\n        onChange={onSelectChange}\n      >\n        {unitOptions}\n      </Select>\n    </Flex>\n  );\n};\n\nexport default NumberUnit;\n"]}

package/lib/components/DateTime/Input/Duration/Time.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ForwardProps } from '../../../../types';
 import DurationInputProps from './DurationInput.types';
-declare type TimeProps = DurationInputProps & ForwardProps;
+type TimeProps = DurationInputProps & ForwardProps;
 declare const Time: FC<TimeProps>;
 export default Time;
 //# sourceMappingURL=Time.d.ts.map

package/lib/components/DateTime/Input/Duration/Time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/Time.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASjD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,aAAK,SAAS,GAAG,kBAAkB,GAAG,YAAY,CAAC;AAEnD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA2GvB,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/Time.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAUjD,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,KAAK,SAAS,GAAG,kBAAkB,GAAG,YAAY,CAAC;AAEnD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAkHvB,CAAC;AACF,eAAe,IAAI,CAAC"}

package/lib/components/DateTime/Input/Duration/Time.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
-import { useI18n, useFocusWithin, useConfiguration } from '../../../../hooks';
+import { useI18n, useFocusWithin, useConfiguration, useTestIds } from '../../../../hooks';
 import { msToTimeFormat, timeFormatToMs } from '../utils';
 import StyledDateTime from '../DateTime.styles';
 import { StyledFormControl } from '../../../FormControl';
 import Flex from '../../../Flex';
 import PartInput from '../PartInput';
 import useAutoFocusNextInput from '../useAutoFocusNextInput';
-const Time = ({ value, onChange, disabled, readOnly, required, status, autoFocus, ...restProps }) => {
+import { getDurationInputTestIds } from '../../DateTime.test-ids';
+const Time = ({ testId, value, onChange, disabled, readOnly, required, status, autoFocus, ...restProps }) => {
+    const testIds = useTestIds(testId, getDurationInputTestIds);
     const { locale } = useConfiguration();
     const time = value !== undefined
         ? msToTimeFormat(value)
@@ -41,10 +43,10 @@ const Time = ({ value, onChange, disabled, readOnly, required, status, autoFocus
     const containerRef = useRef(null);
     useFocusWithin([containerRef], onFocusChange);
     const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
-    return (_jsxs(Flex, { as: StyledDateTime, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
+    return (_jsxs(Flex, { "data-testid": testIds.root, as: StyledDateTime, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
             if (e.target === containerRef.current)
                 hourInputRef.current?.focus();
-        }, ...restProps, children: [_jsx(PartInput, { placeholder: t('hour_placeholder'), "aria-label": displayNames.of('hour'), value: time.hour, readOnly: readOnly, ref: hourInputRef, autoFocus: autoFocus }, 'hour'), ":", _jsx(PartInput, { placeholder: t('minute_placeholder'), "aria-label": displayNames.of('minute'), value: time.minute, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'), ":", _jsx(PartInput, { placeholder: t('second_placeholder'), "aria-label": displayNames.of('second'), value: time.second, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second')] }));
+        }, ...restProps, children: [_jsx(PartInput, { "data-testid": testIds.controlHour, placeholder: t('hour_placeholder'), "aria-label": displayNames.of('hour'), value: time.hour, readOnly: readOnly, ref: hourInputRef, autoFocus: autoFocus }, 'hour'), ":", _jsx(PartInput, { "data-testid": testIds.controlMinute, placeholder: t('minute_placeholder'), "aria-label": displayNames.of('minute'), value: time.minute, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'), ":", _jsx(PartInput, { "data-testid": testIds.controlSecond, placeholder: t('second_placeholder'), "aria-label": displayNames.of('second'), value: time.second, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second')] }));
 };
 export default Time;
 //# sourceMappingURL=Time.js.map

package/lib/components/DateTime/Input/Duration/Time.js.map

@@ -1 +1 @@
-{"version":3,"file":"Time.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/Time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useCallback, useRef } from 'react';\n\nimport { ForwardProps } from '../../../../types';\nimport { useI18n, useFocusWithin, useConfiguration } from '../../../../hooks';\nimport { msToTimeFormat, timeFormatToMs } from '../utils';\nimport StyledDateTime from '../DateTime.styles';\nimport { StyledFormControl } from '../../../FormControl';\nimport Flex from '../../../Flex';\nimport PartInput from '../PartInput';\nimport useAutoFocusNextInput from '../useAutoFocusNextInput';\n\nimport DurationInputProps from './DurationInput.types';\n\ntype TimeProps = DurationInputProps & ForwardProps;\n\nconst Time: FC<TimeProps> = ({\n  value,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  status,\n  autoFocus,\n  ...restProps\n}: DurationInputProps) => {\n  const { locale } = useConfiguration();\n\n  const time =\n    value !== undefined\n      ? msToTimeFormat(value)\n      : { hour: undefined, minute: undefined, second: undefined };\n\n  const [hourInputRef, minuteInputRef, secondInputRef] = [\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(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      secondInputRef.current?.value || undefined\n    ];\n  };\n\n  const onFocusChange = useCallback(\n    (focused: boolean) => {\n      if (!focused && !disabled && !readOnly && onChange) {\n        const parts = pickParts();\n        onChange(\n          parts.some(v => v !== undefined)\n            ? timeFormatToMs({\n                hour: Number(parts[0] ?? 0),\n                minute: Number(parts[1] ?? 0),\n                second: Number(parts[2] ?? 0)\n              })\n            : undefined\n        );\n      }\n    },\n    [disabled, readOnly, onChange]\n  );\n\n  const t = useI18n();\n\n  const containerRef = useRef<HTMLElement>(null);\n  useFocusWithin([containerRef], onFocusChange);\n\n  const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n  return (\n    <Flex\n      as={StyledDateTime}\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      <PartInput\n        key='hour'\n        placeholder={t('hour_placeholder')}\n        aria-label={displayNames.of('hour')}\n        value={time.hour}\n        readOnly={readOnly}\n        ref={hourInputRef}\n        autoFocus={autoFocus}\n      />\n      :\n      <PartInput\n        key='minute'\n        placeholder={t('minute_placeholder')}\n        aria-label={displayNames.of('minute')}\n        value={time.minute}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={minuteInputRef}\n      />\n      :\n      <PartInput\n        key='second'\n        placeholder={t('second_placeholder')}\n        aria-label={displayNames.of('second')}\n        value={time.second}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={secondInputRef}\n      />\n    </Flex>\n  );\n};\nexport default Time;\n"]}
+{"version":3,"file":"Time.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/Time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useCallback, useRef } from 'react';\n\nimport { ForwardProps } from '../../../../types';\nimport { useI18n, useFocusWithin, useConfiguration, useTestIds } from '../../../../hooks';\nimport { msToTimeFormat, timeFormatToMs } from '../utils';\nimport StyledDateTime from '../DateTime.styles';\nimport { StyledFormControl } from '../../../FormControl';\nimport Flex from '../../../Flex';\nimport PartInput from '../PartInput';\nimport useAutoFocusNextInput from '../useAutoFocusNextInput';\nimport { getDurationInputTestIds } from '../../DateTime.test-ids';\n\nimport DurationInputProps from './DurationInput.types';\n\ntype TimeProps = DurationInputProps & ForwardProps;\n\nconst Time: FC<TimeProps> = ({\n  testId,\n  value,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  status,\n  autoFocus,\n  ...restProps\n}: DurationInputProps) => {\n  const testIds = useTestIds(testId, getDurationInputTestIds);\n\n  const { locale } = useConfiguration();\n\n  const time =\n    value !== undefined\n      ? msToTimeFormat(value)\n      : { hour: undefined, minute: undefined, second: undefined };\n\n  const [hourInputRef, minuteInputRef, secondInputRef] = [\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(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      secondInputRef.current?.value || undefined\n    ];\n  };\n\n  const onFocusChange = useCallback(\n    (focused: boolean) => {\n      if (!focused && !disabled && !readOnly && onChange) {\n        const parts = pickParts();\n        onChange(\n          parts.some(v => v !== undefined)\n            ? timeFormatToMs({\n                hour: Number(parts[0] ?? 0),\n                minute: Number(parts[1] ?? 0),\n                second: Number(parts[2] ?? 0)\n              })\n            : undefined\n        );\n      }\n    },\n    [disabled, readOnly, onChange]\n  );\n\n  const t = useI18n();\n\n  const containerRef = useRef<HTMLElement>(null);\n  useFocusWithin([containerRef], onFocusChange);\n\n  const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      as={StyledDateTime}\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      <PartInput\n        data-testid={testIds.controlHour}\n        key='hour'\n        placeholder={t('hour_placeholder')}\n        aria-label={displayNames.of('hour')}\n        value={time.hour}\n        readOnly={readOnly}\n        ref={hourInputRef}\n        autoFocus={autoFocus}\n      />\n      :\n      <PartInput\n        data-testid={testIds.controlMinute}\n        key='minute'\n        placeholder={t('minute_placeholder')}\n        aria-label={displayNames.of('minute')}\n        value={time.minute}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={minuteInputRef}\n      />\n      :\n      <PartInput\n        data-testid={testIds.controlSecond}\n        key='second'\n        placeholder={t('second_placeholder')}\n        aria-label={displayNames.of('second')}\n        value={time.second}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        max={59}\n        ref={secondInputRef}\n      />\n    </Flex>\n  );\n};\nexport default Time;\n"]}

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

@@ -7,6 +7,8 @@ export interface MonthInputProps extends DateTimeProps {
     additionalInfo?: FormControlProps['additionalInfo'];
 }
 export declare const StyledMonthInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MonthInputProps, never>;
-declare const MonthInput: FunctionComponent<MonthInputProps & ForwardProps>;
-export default MonthInput;
+declare const _default: FunctionComponent<MonthInputProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../../types").TestIdsRecord<readonly ["control-month", "control-year", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=MonthInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAO9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAK7E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sHAuB5B,CAAC;AA2CF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsIjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAO9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AACxE,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAO7E,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sHAuB5B,CAAC;;;;AAoNF,wBAA6D"}

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

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef, useReducer, useEffect } from 'react';
+import { useMemo, forwardRef, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
-import { range } from '../../../utils';
-import { useConfiguration, useConsolidatedRef, useFocusWithin } from '../../../hooks';
+import { range, withTestIds } from '../../../utils';
+import { useConfiguration, useConsolidatedRef, useFocusWithin, useTestIds } from '../../../hooks';
 import FormField from '../../FormField';
 import Select, { Option } from '../../Select';
 import { StyledSelect } from '../../Select/Select';
 import Flex from '../../Flex';
 import { StyledFormControl } from '../../FormControl';
+import { getMonthInputTestIds } from '../DateTime.test-ids';
 import { parseToDate, getLocalizedMonths } from './utils';
 import StyledDateTime from './DateTime.styles';
 export const StyledMonthInput = styled(StyledDateTime) `
@@ -36,18 +37,18 @@ export const StyledMonthInput = styled(StyledDateTime) `
   }
 `;
 StyledMonthInput.defaultProps = defaultThemeProp;
-const convertToCallbackParameter = (date, parts) => {
-    if (parts.every(Boolean)) {
-        const [year, month] = parts.map(Number);
-        date.setUTCFullYear(year, month);
+const convertToCallbackParameter = (date, { month, year }) => {
+    if ([month, year].every(Boolean)) {
+        const resultDate = new Date(date);
+        resultDate.setUTCFullYear(Number(year), Number(month));
         return {
-            valueAsISOString: date.toISOString(),
-            valueAsTimestamp: date.getTime()
+            valueAsISOString: resultDate.toISOString(),
+            valueAsTimestamp: resultDate.getTime()
         };
     }
-    if (parts.every(p => !p)) {
+    if ([year, month].every(p => !p)) {
         return {
-            valueAsISOString: '',
+            valueAsISOString: undefined,
             valueAsTimestamp: undefined
         };
     }
@@ -57,54 +58,72 @@ const convertToCallbackParameter = (date, parts) => {
         state: 'incomplete'
     };
 };
-const reducer = (state, action) => {
-    switch (action.field) {
-        case 'year':
-            return [action.value, state[1]];
-        case 'month':
-            return [state[0], action.value];
-        default:
-            return state.slice(0);
-    }
-};
 const MonthInput = forwardRef((props, ref) => {
     const { locale } = useConfiguration();
-    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info, status, required, readOnly, disabled, onChange, onFocus, onBlur, autoFocus, additionalInfo, ...restProps } = props;
+    const { testId, value, min, max, id, label, labelHidden, info, status, required, readOnly, disabled, onChange, onFocus, onBlur, autoFocus, additionalInfo, ...restProps } = props;
+    const testIds = useTestIds(testId, getMonthInputTestIds);
     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 dateToGetFullYearFrom = date ?? new Date();
+    const minDate = parseToDate(min ??
+        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() - 10));
+    const maxDate = parseToDate(max ??
+        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() + 10));
+    minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());
+    maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());
+    const minYear = minDate.getUTCFullYear();
+    const maxYear = maxDate.getUTCFullYear();
     const years = range(minYear, maxYear);
     const months = useMemo(() => getLocalizedMonths(locale), [locale]);
-    const [state, dispatch] = useReducer(reducer, [
-        date?.getUTCFullYear().toString(),
-        date?.getUTCMonth().toString()
-    ]);
+    const monthSelectRef = useRef(null);
+    const yearSelectRef = useRef(null);
     useEffect(() => {
-        dispatch({ field: 'month', value: date?.getUTCMonth().toString() });
-        dispatch({ field: 'year', value: date?.getUTCFullYear().toString() });
-    }, [date?.toLocaleDateString()]);
+        if (monthSelectRef.current && yearSelectRef.current) {
+            monthSelectRef.current.value = date?.getUTCMonth().toString() ?? '';
+            yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';
+        }
+    }, [date?.toDateString()]);
+    const pickParts = () => {
+        return {
+            month: monthSelectRef.current?.value || '',
+            year: yearSelectRef.current?.value || ''
+        };
+    };
     const onFocusChange = (focused) => {
-        const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), state);
+        const callbackParam = convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts());
         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 onSelectChange = () => {
+        onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));
     };
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
-    const monthOptions = months.map((month, index) => (_jsx(Option, { value: index.toString(), children: months[index] }, month)));
+    const isMonthOptionDisabled = (monthIndex) => {
+        const year = yearSelectRef.current && yearSelectRef.current.value
+            ? parseInt(yearSelectRef.current.value, 10)
+            : new Date().getUTCFullYear();
+        return ((year === minDate.getUTCFullYear() && monthIndex < minDate.getUTCMonth()) ||
+            (year === maxDate.getUTCFullYear() && monthIndex > maxDate.getUTCMonth()));
+    };
+    const monthOptions = months.map((month, index) => (_jsx(Option, { disabled: isMonthOptionDisabled(index), value: index.toString(), children: months[index] }, month)));
     const yearOptions = years.map(year => (_jsx(Option, { value: year.toString(), children: year.toString() }, year.toString())));
     const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
-    const Month = (_jsxs(Select, { "aria-label": displayNames.of('month'), readOnly: readOnly, required: required, value: state[1]?.toString() ?? '', onChange: onSelectChange('month'), status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), monthOptions] }, 'month'));
-    const Year = (_jsxs(Select, { "aria-label": displayNames.of('year'), 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, { as: StyledMonthInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, ...restProps, children: [Month, Year] }));
-    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled, additionalInfo }, children: Comp })) : (Comp);
+    const Month = (_jsxs(Select, { "data-testid": testIds.controlMonth, ref: monthSelectRef, "aria-label": displayNames.of('month'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), monthOptions] }, 'month'));
+    const Year = (_jsxs(Select, { "data-testid": testIds.controlYear, ref: yearSelectRef, "aria-label": displayNames.of('year'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, children: [!required && _jsx(Option, { children: " " }, 'null'), yearOptions] }, 'year'));
+    const Comp = (_jsxs(Flex, { "data-testid": testIds.root, as: StyledMonthInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, ...restProps, children: [Month, Year] }));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{
+            testId: testIds,
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            additionalInfo
+        }, children: Comp })) : (Comp);
 });
-export default MonthInput;
+export default withTestIds(MonthInput, getMonthInputTestIds);
 //# sourceMappingURL=MonthInput.js.map