@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

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 { useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport type { BaseProps, ForwardProps, TestIdProp } from '../../../types';\nimport Select, { Option } from '../../Select';\nimport type { SelectProps } from '../../Select/Select';\nimport type { FormControlProps } from '../../FormControl';\nimport { useConfiguration, useTestIds } from '../../../hooks';\nimport { getDayOfWeekInputTestIds } from '../DateTime.test-ids';\nimport { createClassName, withTestIds } from '../../../utils';\n\nimport { CALENDAR_TYPES } from './local';\nimport { getCalendarTypeFromLocale, getDayOfWeekNamesMap } from './utils';\n\nexport type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;\n\nexport interface DayOfWeekInputProps extends TestIdProp, BaseProps {\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 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, className, status, ...restProps } =\n    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      status={status}\n      {...restProps}\n      className={createClassName('day-of-week-input', className, { status })}\n    >\n      {!required && <Option> </Option>}\n      {dayOfWeekOptions}\n    </Select>\n  );\n};\n\nexport default withTestIds(DayOfWeekInput, getDayOfWeekInputTestIds);\n"]}
+{"version":3,"file":"DayOfWeekInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DayOfWeekInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport type { BaseProps, ForwardProps, TestIdProp } from '../../../types';\nimport Select, { Option } from '../../Select';\nimport type { SelectProps } from '../../Select/Select';\nimport type { FormControlProps } from '../../FormControl';\nimport { useConfiguration, useTestIds } from '../../../hooks';\nimport { getDayOfWeekInputTestIds } from '../DateTime.test-ids';\nimport { createClassName, withTestIds } from '../../../utils';\n\nimport { CALENDAR_TYPES, type CalendarType } from './local';\nimport { getCalendarTypeFromLocale, getDayOfWeekNamesMap } from './utils';\n\nexport type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7;\n\nexport interface DayOfWeekInputProps extends TestIdProp, BaseProps {\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 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: CalendarType = 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(\n  dayOfWeekNames: { [key: number]: string },\n  refCalendarType: CalendarType\n) {\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, className, status, ...restProps } =\n    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      status={status}\n      {...restProps}\n      className={createClassName('day-of-week-input', className, { status })}\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.map

@@ -1 +1 @@
-{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;;;;AAmF5D,wBAAmE"}
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;;;;AAgF5D,wBAAmE"}

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

@@ -10,15 +10,13 @@ import NumberUnit from './NumberUnit';
 import { Format } from './DurationInput.types';
 const DurationInput = forwardRef(function DurationInput(props, ref) {
     const { testId, id, label, labelHidden, required, status, disabled, onChange, format = Format.Seconds, onSelect, additionalInfo, className: classNameProp, ...restProps } = props;
-    const className = createClassName('duration-input', classNameProp, {
-        status
-    });
+    const className = createClassName('duration-input', classNameProp);
     const testIds = useTestIds(testId, getDurationInputTestIds);
     const t = useI18n();
     // Refs are actually handled in Time component rendered below.
     const { description, descriptionID } = useAutoFocusNextInput([]);
     const Comp = format === Format.Formatted ? (_jsx(Time, { testId: testId, status: status, disabled: disabled, onChange: onChange, ...restProps, className: className })) : (_jsx(NumberUnit, { testId: testId, format: format, status: status, disabled: disabled, onChange: onChange, onSelect: onSelect, ...restProps, className: className }));
-    return label ? (_jsxs(_Fragment, { children: [_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...(format === Format.Formatted ? { info: t('time_format_info') } : undefined), status: status, testId: testIds, label: label, labelHidden: labelHidden, id: id, required: required, disabled: disabled, ref: ref, additionalInfo: additionalInfo, "aria-describedby": format === Format.Formatted ? descriptionID : undefined, children: Comp }), format === Format.Formatted ? description : null] })) : (Comp);
+    return label ? (_jsxs(_Fragment, { children: [_jsx(FormField, { as: 'fieldset', ...(format === Format.Formatted ? { info: t('time_format_info') } : undefined), status: status, testId: testIds, label: label, labelHidden: labelHidden, id: id, required: required, disabled: disabled, ref: ref, additionalInfo: additionalInfo, "aria-describedby": format === Format.Formatted ? descriptionID : undefined, children: Comp }), format === Format.Formatted ? description : null] })) : (Comp);
 });
 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,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,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,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAE7D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,KAA0C,EAC1C,GAA6B;IAE7B,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,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,eAAe,CAAC,gBAAgB,EAAE,aAAa,EAAE;QACjE,MAAM;KACP,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,8DAA8D;IAC9D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC,EAAE,CAAC,CAAC;IAEjE,MAAM,IAAI,GACR,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IAEJ,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,KACZ,CAAC,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAC/E,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,sBACZ,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,YAExE,IAAI,GACK,EACX,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,IAChD,CACJ,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, FunctionComponent } from 'react';\n\nimport { useI18n, useTestIds } from '../../../../hooks';\nimport FormField from '../../../FormField';\nimport type { ForwardProps } from '../../../../types';\nimport { getDurationInputTestIds } from '../../DateTime.test-ids';\nimport { createClassName, withTestIds } from '../../../../utils';\nimport useAutoFocusNextInput from '../useAutoFocusNextInput';\n\nimport Time from './Time';\nimport NumberUnit from './NumberUnit';\nimport type DurationInputProps from './DurationInput.types';\nimport { Format } from './DurationInput.types';\n\nconst DurationInput: FunctionComponent<DurationInputProps & ForwardProps> = forwardRef(\n  function DurationInput(\n    props: PropsWithoutRef<DurationInputProps>,\n    ref: Ref<HTMLFieldSetElement>\n  ) {\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      className: classNameProp,\n      ...restProps\n    } = props;\n    const className = createClassName('duration-input', classNameProp, {\n      status\n    });\n    const testIds = useTestIds(testId, getDurationInputTestIds);\n\n    const t = useI18n();\n\n    // Refs are actually handled in Time component rendered below.\n    const { description, descriptionID } = useAutoFocusNextInput([]);\n\n    const Comp =\n      format === Format.Formatted ? (\n        <Time\n          testId={testId}\n          status={status}\n          disabled={disabled}\n          onChange={onChange}\n          {...restProps}\n          className={className}\n        />\n      ) : (\n        <NumberUnit\n          testId={testId}\n          format={format}\n          status={status}\n          disabled={disabled}\n          onChange={onChange}\n          onSelect={onSelect}\n          {...restProps}\n          className={className}\n        />\n      );\n\n    return label ? (\n      <>\n        <FormField\n          as='fieldset'\n          labelAs='legend'\n          {...(format === Format.Formatted ? { info: t('time_format_info') } : undefined)}\n          status={status}\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          required={required}\n          disabled={disabled}\n          ref={ref}\n          additionalInfo={additionalInfo}\n          aria-describedby={format === Format.Formatted ? descriptionID : undefined}\n        >\n          {Comp}\n        </FormField>\n        {format === Format.Formatted ? description : null}\n      </>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(DurationInput, getDurationInputTestIds);\n"]}
+{"version":3,"file":"DurationInput.js","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/DurationInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,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,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAE7D,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CACpB,KAA0C,EAC1C,GAA6B;IAE7B,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,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,eAAe,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,8DAA8D;IAC9D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC,EAAE,CAAC,CAAC;IAEjE,MAAM,IAAI,GACR,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;IAEJ,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,KACT,CAAC,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAC/E,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,sBACZ,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,YAExE,IAAI,GACK,EACX,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,IAChD,CACJ,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, FunctionComponent } from 'react';\n\nimport { useI18n, useTestIds } from '../../../../hooks';\nimport FormField from '../../../FormField';\nimport type { ForwardProps } from '../../../../types';\nimport { getDurationInputTestIds } from '../../DateTime.test-ids';\nimport { createClassName, withTestIds } from '../../../../utils';\nimport useAutoFocusNextInput from '../useAutoFocusNextInput';\n\nimport Time from './Time';\nimport NumberUnit from './NumberUnit';\nimport type DurationInputProps from './DurationInput.types';\nimport { Format } from './DurationInput.types';\n\nconst DurationInput: FunctionComponent<DurationInputProps & ForwardProps> = forwardRef(\n  function DurationInput(\n    props: PropsWithoutRef<DurationInputProps>,\n    ref: Ref<HTMLFieldSetElement>\n  ) {\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      className: classNameProp,\n      ...restProps\n    } = props;\n    const className = createClassName('duration-input', classNameProp);\n    const testIds = useTestIds(testId, getDurationInputTestIds);\n\n    const t = useI18n();\n\n    // Refs are actually handled in Time component rendered below.\n    const { description, descriptionID } = useAutoFocusNextInput([]);\n\n    const Comp =\n      format === Format.Formatted ? (\n        <Time\n          testId={testId}\n          status={status}\n          disabled={disabled}\n          onChange={onChange}\n          {...restProps}\n          className={className}\n        />\n      ) : (\n        <NumberUnit\n          testId={testId}\n          format={format}\n          status={status}\n          disabled={disabled}\n          onChange={onChange}\n          onSelect={onSelect}\n          {...restProps}\n          className={className}\n        />\n      );\n\n    return label ? (\n      <>\n        <FormField\n          as='fieldset'\n          {...(format === Format.Formatted ? { info: t('time_format_info') } : undefined)}\n          status={status}\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          required={required}\n          disabled={disabled}\n          ref={ref}\n          additionalInfo={additionalInfo}\n          aria-describedby={format === Format.Formatted ? descriptionID : undefined}\n        >\n          {Comp}\n        </FormField>\n        {format === Format.Formatted ? description : null}\n      </>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(DurationInput, getDurationInputTestIds);\n"]}

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

@@ -1,7 +1,9 @@
 import type { FC } from 'react';
 import type { ForwardProps } from '../../../../types';
 import type DurationInputProps from './DurationInput.types';
-export declare const StyledNumberUnit: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DurationInputProps, never>;
+export declare const StyledNumberUnit: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, DurationInputProps>> & string;
 type NumberUnitProps = DurationInputProps & ForwardProps;
 declare const NumberUnit: FC<NumberUnitProps>;
 export default NumberUnit;

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":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiB,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWtD,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAG5D,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"}
+{"version":3,"file":"NumberUnit.d.ts","sourceRoot":"","sources":["../../../../../src/components/DateTime/Input/Duration/NumberUnit.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiB,MAAM,OAAO,CAAC;AAO5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWtD,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAG5D,eAAO,MAAM,gBAAgB;;gCA2B5B,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/MonthInput.d.ts

@@ -11,7 +11,9 @@ export interface MonthInputProps extends DateTimeProps {
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
 }
-export declare const StyledMonthInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MonthInputProps, never>;
+export declare const StyledMonthInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, MonthInputProps>> & string;
 declare const _default: FunctionComponent<MonthInputProps & ForwardProps> & {
     getTestIds: (testIdProp?: import("../../../types").TestIdProp["testId"]) => import("../../../types").TestIdsRecord<readonly ["control-month", "control-year", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sHAkC5B,CAAC;;;;AAmOF,wBAA6D"}
+{"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB;;6BAkC5B,CAAC;;;;AA+NF,wBAA6D"}

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

@@ -27,23 +27,23 @@ export const StyledMonthInput = styled(StyledDateTime) `
       z-index: 1;
     }
 
-    :first-child {
+    &:first-child {
       flex-grow: 1;
     }
 
-    :first-child > ${StyledSelect} {
+    &:first-child > ${StyledSelect} {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    :last-child > ${StyledSelect} {
+    &:last-child > ${StyledSelect} {
       width: max-content;
       margin-inline-start: -0.0625rem;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
 
-    :first-child > ${StyledFormFieldInfo}, :last-child > ${StyledFormFieldInfo} {
+    &:first-child > ${StyledFormFieldInfo}, &:last-child > ${StyledFormFieldInfo} {
       display: none;
     }
   }
@@ -84,8 +84,6 @@ const MonthInput = forwardRef(function MonthInput(props, ref) {
         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);
@@ -131,8 +129,8 @@ const MonthInput = forwardRef(function MonthInput(props, ref) {
     }), [locale]);
     const Month = (_jsxs(Select, { "data-testid": testIds.controlMonth, label: cap(displayNames.of('month')), labelHidden: innerLabelsHidden, 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, label: cap(displayNames.of('year')), labelHidden: innerLabelsHidden, 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, { as: StyledMonthInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, ...restProps, className: createClassName('month-input', className, { status }), children: [Month, Year] }));
-    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
+    const Comp = (_jsxs(Flex, { as: StyledMonthInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, ...restProps, className: createClassName('month-input', className), children: [Month, Year] }));
+    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
 });
 export default withTestIds(MonthInput, getMonthInputTestIds);
 //# sourceMappingURL=MonthInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport type { ForwardProps } from '../../../types';\nimport { cap, createClassName, range, withTestIds } from '../../../utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useTestIds } from '../../../hooks';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport { StyledSelect } from '../../Select/Select';\nimport Flex from '../../Flex';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { getMonthInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField, StyledFormFieldInfo } from '../../FormField/FormField';\n\nimport { parseToDate, getLocalizedMonths, getLocalizedYear } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface MonthInputProps extends DateTimeProps {\n  /**\n   * Toggles visibility of inner labels form Month and Year\n   * @default true\n   */\n  innerLabelsHidden?: boolean;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledMonthInput = styled(StyledDateTime)<MonthInputProps>`\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n\n  ${StyledFormField}:enabled > &:focus-within {\n    box-shadow: none;\n  }\n\n  ${StyledFormField} {\n    > ${StyledSelect}:focus {\n      z-index: 1;\n    }\n\n    :first-child {\n      flex-grow: 1;\n    }\n\n    :first-child > ${StyledSelect} {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    :last-child > ${StyledSelect} {\n      width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n\n    :first-child > ${StyledFormFieldInfo}, :last-child > ${StyledFormFieldInfo} {\n      display: none;\n    }\n  }\n`;\n\nStyledMonthInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  { month, year }: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([month, year].every(Boolean)) {\n    const resultDate = new Date(date);\n    resultDate.setUTCFullYear(Number(year), Number(month));\n    // handle month overflowing\n    if (resultDate.getUTCMonth() !== Number(month)) {\n      resultDate.setUTCDate(0);\n    }\n    return {\n      valueAsISOString: resultDate.toISOString(),\n      valueAsTimestamp: resultDate.getTime()\n    };\n  }\n  if ([year, month].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst MonthInput: FunctionComponent<MonthInputProps & ForwardProps> = forwardRef(\n  function MonthInput(props: PropsWithoutRef<MonthInputProps>, ref: Ref<HTMLFieldSetElement>) {\n    const { locale } = useConfiguration();\n    const {\n      testId,\n      value,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      innerLabelsHidden = true,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      autoFocus,\n      additionalInfo,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getMonthInputTestIds);\n\n    const date = value ? parseToDate(value) : undefined;\n\n    const dateToGetFullYearFrom = date ?? new Date();\n\n    const minDate = parseToDate(\n      min ??\n        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() - 10)\n    );\n    const maxDate = parseToDate(\n      max ??\n        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() + 10)\n    );\n\n    minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());\n    maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());\n\n    const minYear = minDate.getUTCFullYear();\n    const maxYear = maxDate.getUTCFullYear();\n\n    const years = range(minYear, maxYear);\n    const months = useMemo(() => getLocalizedMonths(locale), [locale]);\n\n    const monthSelectRef = useRef<HTMLSelectElement>(null);\n    const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n    useEffect(() => {\n      if (monthSelectRef.current && yearSelectRef.current) {\n        monthSelectRef.current.value = date?.getUTCMonth().toString() ?? '';\n        yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n      }\n    }, [date?.toDateString()]);\n\n    const pickParts = (): DateParts<string | undefined> => {\n      return {\n        month: monthSelectRef.current?.value || '',\n        year: yearSelectRef.current?.value || ''\n      };\n    };\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      else if (onBlur && !focused) onBlur(callbackParam);\n    };\n\n    const onSelectChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n    };\n\n    const containerRef = useConsolidatedRef<HTMLElement>(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const isMonthOptionDisabled = (monthIndex: number) => {\n      const year =\n        yearSelectRef.current && yearSelectRef.current.value\n          ? parseInt(yearSelectRef.current.value, 10)\n          : new Date().getUTCFullYear();\n\n      return (\n        (year === minDate.getUTCFullYear() && monthIndex < minDate.getUTCMonth()) ||\n        (year === maxDate.getUTCFullYear() && monthIndex > maxDate.getUTCMonth())\n      );\n    };\n\n    const monthOptions = months.map((month, index) => (\n      <Option disabled={isMonthOptionDisabled(index)} key={month} value={index.toString()}>\n        {months[index]}\n      </Option>\n    ));\n    const yearOptions = years.map(year => (\n      <Option key={year.toString()} value={year.toString()}>\n        {getLocalizedYear(year, locale).toString()}\n      </Option>\n    ));\n\n    const displayNames = useMemo(\n      () =>\n        new Intl.DisplayNames(locale, {\n          style: 'long',\n          type: 'dateTimeField'\n        }) as Intl.DateTimeDisplayNames,\n      [locale]\n    );\n\n    const Month = (\n      <Select\n        data-testid={testIds.controlMonth}\n        label={cap(displayNames.of('month'))}\n        labelHidden={innerLabelsHidden}\n        key='month'\n        ref={monthSelectRef}\n        aria-label={displayNames.of('month')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\n        status={status}\n        disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {!required && <Option key='null'> </Option>}\n        {monthOptions}\n      </Select>\n    );\n\n    const Year = (\n      <Select\n        data-testid={testIds.controlYear}\n        label={cap(displayNames.of('year'))}\n        labelHidden={innerLabelsHidden}\n        key='year'\n        ref={yearSelectRef}\n        aria-label={displayNames.of('year')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        as={StyledMonthInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...restProps}\n        className={createClassName('month-input', className, { status })}\n      >\n        {Month}\n        {Year}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(MonthInput, getMonthInputTestIds);\n"]}
+{"version":3,"file":"MonthInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEjF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAa/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAiB;;;;;IAKnE,eAAe;;;;IAIf,eAAe;QACX,YAAY;;;;;;;;sBAQE,YAAY;;;;;qBAKb,YAAY;;;;;;;sBAOX,mBAAmB,oBAAoB,mBAAmB;;;;CAI/E,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,0BAA0B,GAAG,CACjC,IAAU,EACV,EAAE,KAAK,EAAE,IAAI,EAAiC,EACnB,EAAE;IAC7B,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACvD,2BAA2B;QAC3B,IAAI,UAAU,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/C,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO;YACL,gBAAgB,EAAE,UAAU,CAAC,WAAW,EAAE;YAC1C,gBAAgB,EAAE,UAAU,CAAC,OAAO,EAAE;SACvC,CAAC;IACJ,CAAC;IACD,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACjC,OAAO;YACL,gBAAgB,EAAE,SAAS;YAC3B,gBAAgB,EAAE,SAAS;SAC5B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,gBAAgB,EAAE,EAAE;QACpB,gBAAgB,EAAE,GAAG;QACrB,KAAK,EAAE,YAAY;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAsD,UAAU,CAC9E,SAAS,UAAU,CAAC,KAAuC,EAAE,GAA6B;IACxF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EACJ,MAAM,EACN,KAAK,EACL,GAAG,EACH,GAAG,EACH,EAAE,EACF,KAAK,EACL,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,cAAc,EACd,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpD,MAAM,qBAAqB,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;IAEjD,MAAM,OAAO,GAAG,WAAW,CACzB,GAAG;QACD,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,cAAc,CAAC,qBAAqB,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC,CAC9F,CAAC;IACF,MAAM,OAAO,GAAG,WAAW,CACzB,GAAG;QACD,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,cAAc,CAAC,qBAAqB,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC,CAC9F,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAEzC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnE,MAAM,cAAc,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACpD,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;YACpE,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,EAAE,cAAc,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QACxE,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,GAAkC,EAAE;QACpD,OAAO;YACL,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;YAC1C,IAAI,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;SACzC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,OAAgB,EAAE,EAAE;QACzC,MAAM,aAAa,GAAG,0BAA0B,CAC9C,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,EAClC,SAAS,EAAE,CACZ,CAAC;QACF,IAAI,OAAO,IAAI,OAAO;YAAE,OAAO,CAAC,aAAa,CAAC,CAAC;aAC1C,IAAI,MAAM,IAAI,CAAC,OAAO;YAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,QAAQ,EAAE,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,kBAAkB,CAAc,GAAG,CAAC,CAAC;IAC1D,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAAC,UAAkB,EAAE,EAAE;QACnD,MAAM,IAAI,GACR,aAAa,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK;YAClD,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;YAC3C,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC;QAElC,OAAO,CACL,CAAC,IAAI,KAAK,OAAO,CAAC,cAAc,EAAE,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;YACzE,CAAC,IAAI,KAAK,OAAO,CAAC,cAAc,EAAE,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,CAC1E,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,MAAM,IAAC,QAAQ,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAc,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,YAChF,MAAM,CAAC,KAAK,CAAC,IADqC,KAAK,CAEjD,CACV,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACpC,KAAC,MAAM,IAAuB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,YACjD,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,QAAQ,EAAE,IAD/B,IAAI,CAAC,QAAQ,EAAE,CAEnB,CACV,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,eAAe;KACtB,CAA8B,EACjC,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,KAAK,GAAG,CACZ,MAAC,MAAM,mBACQ,OAAO,CAAC,YAAY,EACjC,KAAK,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EACpC,WAAW,EAAE,iBAAiB,EAE9B,GAAG,EAAE,cAAc,gBACP,YAAY,CAAC,EAAE,CAAC,OAAO,CAAC,EACpC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,aAEnB,CAAC,QAAQ,IAAI,KAAC,MAAM,qBAAK,MAAM,CAAW,EAC1C,YAAY,KAXT,OAAO,CAYJ,CACV,CAAC;IAEF,MAAM,IAAI,GAAG,CACX,MAAC,MAAM,mBACQ,OAAO,CAAC,WAAW,EAChC,KAAK,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EACnC,WAAW,EAAE,iBAAiB,EAE9B,GAAG,EAAE,aAAa,gBACN,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,aAEjB,CAAC,QAAQ,IAAI,KAAC,MAAM,qBAAK,MAAM,CAAW,EAC1C,WAAW,KAVR,MAAM,CAWH,CACV,CAAC;IAEF,MAAM,IAAI,GAAG,CACX,MAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,EACb,SAAS,EAAE,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,aAEnD,KAAK,EACL,IAAI,IACA,CACR,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,EAAE,EAAC,UAAU,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,YAE7B,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { useMemo, forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport type { ForwardProps } from '../../../types';\nimport { cap, createClassName, range, withTestIds } from '../../../utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin, useTestIds } from '../../../hooks';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport { StyledSelect } from '../../Select/Select';\nimport Flex from '../../Flex';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { getMonthInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField, StyledFormFieldInfo } from '../../FormField/FormField';\n\nimport { parseToDate, getLocalizedMonths, getLocalizedYear } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface MonthInputProps extends DateTimeProps {\n  /**\n   * Toggles visibility of inner labels form Month and Year\n   * @default true\n   */\n  innerLabelsHidden?: boolean;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledMonthInput = styled(StyledDateTime)<MonthInputProps>`\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n\n  ${StyledFormField}:enabled > &:focus-within {\n    box-shadow: none;\n  }\n\n  ${StyledFormField} {\n    > ${StyledSelect}:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      flex-grow: 1;\n    }\n\n    &:first-child > ${StyledSelect} {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    &:last-child > ${StyledSelect} {\n      width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n\n    &:first-child > ${StyledFormFieldInfo}, &:last-child > ${StyledFormFieldInfo} {\n      display: none;\n    }\n  }\n`;\n\nStyledMonthInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  { month, year }: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([month, year].every(Boolean)) {\n    const resultDate = new Date(date);\n    resultDate.setUTCFullYear(Number(year), Number(month));\n    // handle month overflowing\n    if (resultDate.getUTCMonth() !== Number(month)) {\n      resultDate.setUTCDate(0);\n    }\n    return {\n      valueAsISOString: resultDate.toISOString(),\n      valueAsTimestamp: resultDate.getTime()\n    };\n  }\n  if ([year, month].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst MonthInput: FunctionComponent<MonthInputProps & ForwardProps> = forwardRef(\n  function MonthInput(props: PropsWithoutRef<MonthInputProps>, ref: Ref<HTMLFieldSetElement>) {\n    const { locale } = useConfiguration();\n    const {\n      testId,\n      value,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      innerLabelsHidden = true,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      autoFocus,\n      additionalInfo,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getMonthInputTestIds);\n\n    const date = value ? parseToDate(value) : undefined;\n\n    const dateToGetFullYearFrom = date ?? new Date();\n\n    const minDate = parseToDate(\n      min ??\n        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() - 10)\n    );\n    const maxDate = parseToDate(\n      max ??\n        new Date(dateToGetFullYearFrom).setUTCFullYear(dateToGetFullYearFrom.getUTCFullYear() + 10)\n    );\n\n    const minYear = minDate.getUTCFullYear();\n    const maxYear = maxDate.getUTCFullYear();\n\n    const years = range(minYear, maxYear);\n    const months = useMemo(() => getLocalizedMonths(locale), [locale]);\n\n    const monthSelectRef = useRef<HTMLSelectElement>(null);\n    const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n    useEffect(() => {\n      if (monthSelectRef.current && yearSelectRef.current) {\n        monthSelectRef.current.value = date?.getUTCMonth().toString() ?? '';\n        yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n      }\n    }, [date?.toDateString()]);\n\n    const pickParts = (): DateParts<string | undefined> => {\n      return {\n        month: monthSelectRef.current?.value || '',\n        year: yearSelectRef.current?.value || ''\n      };\n    };\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      else if (onBlur && !focused) onBlur(callbackParam);\n    };\n\n    const onSelectChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n    };\n\n    const containerRef = useConsolidatedRef<HTMLElement>(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const isMonthOptionDisabled = (monthIndex: number) => {\n      const year =\n        yearSelectRef.current && yearSelectRef.current.value\n          ? parseInt(yearSelectRef.current.value, 10)\n          : new Date().getUTCFullYear();\n\n      return (\n        (year === minDate.getUTCFullYear() && monthIndex < minDate.getUTCMonth()) ||\n        (year === maxDate.getUTCFullYear() && monthIndex > maxDate.getUTCMonth())\n      );\n    };\n\n    const monthOptions = months.map((month, index) => (\n      <Option disabled={isMonthOptionDisabled(index)} key={month} value={index.toString()}>\n        {months[index]}\n      </Option>\n    ));\n    const yearOptions = years.map(year => (\n      <Option key={year.toString()} value={year.toString()}>\n        {getLocalizedYear(year, locale).toString()}\n      </Option>\n    ));\n\n    const displayNames = useMemo(\n      () =>\n        new Intl.DisplayNames(locale, {\n          style: 'long',\n          type: 'dateTimeField'\n        }) as Intl.DateTimeDisplayNames,\n      [locale]\n    );\n\n    const Month = (\n      <Select\n        data-testid={testIds.controlMonth}\n        label={cap(displayNames.of('month'))}\n        labelHidden={innerLabelsHidden}\n        key='month'\n        ref={monthSelectRef}\n        aria-label={displayNames.of('month')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\n        status={status}\n        disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {!required && <Option key='null'> </Option>}\n        {monthOptions}\n      </Select>\n    );\n\n    const Year = (\n      <Select\n        data-testid={testIds.controlYear}\n        label={cap(displayNames.of('year'))}\n        labelHidden={innerLabelsHidden}\n        key='year'\n        ref={yearSelectRef}\n        aria-label={displayNames.of('year')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        as={StyledMonthInput}\n        forwardedAs={StyledFormControl}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...restProps}\n        className={createClassName('month-input', className)}\n      >\n        {Month}\n        {Year}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(MonthInput, getMonthInputTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"PartInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/PartInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAWpD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,UAAU,EAAE,cAAc,GAAG,OAAO,GAAG,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CA8E7D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PartInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/PartInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAWpD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,UAAU,EAAE,cAAc,GAAG,OAAO,GAAG,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAwF7D,CAAC;AAEH,eAAe,SAAS,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { useConsolidatedRef, useEvent } from '../../../hooks';
 import { BareInput } from './DateTime.styles';
 const regexPattern = /[0-9]/;
@@ -10,38 +10,47 @@ const padNumberWithZeros = (maxLength, value = '') => {
 };
 const PartInput = forwardRef(function PartInput({ value, onChange, readOnly, min = 0, max = Infinity, size = 2, maxLength = Infinity, padWithZeros = true, ...restProps }, ref) {
     const inputRef = useConsolidatedRef(ref);
+    // Track whether the input value has been modified by the user.
+    // Due to the nature of the input, we must track this through a ref instead of state.
+    const modifiedRef = useRef(false);
     useEffect(() => {
         if (inputRef.current && !Number.isNaN(value)) {
             inputRef.current.value = padNumberWithZeros(maxLength, value?.toString());
+            modifiedRef.current = false;
         }
-    }, [value, inputRef.current]);
+    }, [value, maxLength]);
     useLayoutEffect(() => {
         if (inputRef.current) {
             inputRef.current.style.width = `calc(${size}ch + ${size} * ${getComputedStyle(inputRef.current).letterSpacing})`;
         }
-    }, [size, inputRef.current]);
+    }, [size]);
     useEvent('beforeinput', (event) => {
         if (event.data && !regexPattern.test(event.data)) {
             event.preventDefault();
         }
     }, { target: inputRef });
-    const onInputChange = useCallback((ev) => {
-        const targetEl = ev.target;
+    const onInputChange = useCallback((e) => {
+        const targetEl = e.target;
         if (targetEl.value.length > maxLength)
             targetEl.value = targetEl.value.slice(0, maxLength);
         else if (size !== maxLength)
             targetEl.style.width = `${Math.max(targetEl.value.length, size)}ch`;
-    }, [maxLength]);
-    const onBlur = useCallback((ev) => {
-        const targetElValue = ev.target.value;
+        modifiedRef.current = true;
+    }, [maxLength, size]);
+    const onBlur = useCallback((e) => {
+        const targetElValue = e.target.value;
         const paddedValue = padWithZeros
             ? padNumberWithZeros(maxLength, targetElValue)
             : targetElValue;
-        ev.target.value = paddedValue;
-        onChange?.(paddedValue);
-    }, [onChange]);
+        e.target.value = paddedValue;
+        if (modifiedRef.current) {
+            // Only trigger onChange if the value has been modified
+            onChange?.(paddedValue);
+            modifiedRef.current = false;
+        }
+    }, [onChange, padWithZeros, maxLength]);
     const defaultValue = value !== undefined ? padNumberWithZeros(maxLength, value?.toString()) : '';
-    return (_jsx(BareInput, { type: 'number', defaultValue: defaultValue, onBlur: onBlur, onChange: onInputChange, step: 1, min: min, max: max, maxLength: maxLength, readOnly: readOnly, ref: inputRef, size: size, ...restProps }));
+    return (_jsx(BareInput, { type: 'number', defaultValue: defaultValue, onBlur: onBlur, onChange: onInputChange, step: 1, min: min, max: max, maxLength: maxLength, readOnly: readOnly, ref: inputRef, size: size, autoComplete: '_off', ...restProps }));
 });
 export default PartInput;
 //# sourceMappingURL=PartInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PartInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/PartInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useLayoutEffect } from 'react';\nimport type { FocusEvent, PropsWithoutRef, ChangeEvent } from 'react';\n\nimport { useConsolidatedRef, useEvent } from '../../../hooks';\nimport type { ForwardRefForwardPropsComponent, OmitStrict } from '../../../types';\nimport type { InputProps } from '../../Input/Input';\n\nimport { BareInput } from './DateTime.styles';\n\nconst regexPattern = /[0-9]/;\n\nconst padNumberWithZeros = (maxLength: number, value: string = '') => {\n  if (value === '') return '';\n\n  return value.padStart(Number.isFinite(maxLength) ? maxLength : 0, '0');\n};\nexport interface PartInputProps\n  extends OmitStrict<InputProps, 'defaultValue' | 'value' | 'onChange'> {\n  value?: number;\n  min?: number;\n  max?: number;\n  maxLength?: number;\n  padWithZeros?: boolean;\n  size?: number;\n  onChange?: (value?: string) => void;\n}\n\nconst PartInput: ForwardRefForwardPropsComponent<PartInputProps> = forwardRef(function PartInput(\n  {\n    value,\n    onChange,\n    readOnly,\n    min = 0,\n    max = Infinity,\n    size = 2,\n    maxLength = Infinity,\n    padWithZeros = true,\n    ...restProps\n  }: PropsWithoutRef<PartInputProps>,\n  ref: PartInputProps['ref']\n) {\n  const inputRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    if (inputRef.current && !Number.isNaN(value)) {\n      inputRef.current.value = padNumberWithZeros(maxLength, value?.toString());\n    }\n  }, [value, inputRef.current]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.style.width = `calc(${size}ch + ${size} * ${getComputedStyle(inputRef.current).letterSpacing})`;\n    }\n  }, [size, inputRef.current]);\n\n  useEvent(\n    'beforeinput',\n    (event: InputEvent) => {\n      if (event.data && !regexPattern.test(event.data)) {\n        event.preventDefault();\n      }\n    },\n    { target: inputRef }\n  );\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const targetEl = ev.target;\n      if (targetEl.value.length > maxLength) targetEl.value = targetEl.value.slice(0, maxLength);\n      else if (size !== maxLength)\n        targetEl.style.width = `${Math.max(targetEl.value.length, size)}ch`;\n    },\n    [maxLength]\n  );\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      const targetElValue = ev.target.value;\n      const paddedValue = padWithZeros\n        ? padNumberWithZeros(maxLength, targetElValue)\n        : targetElValue;\n      ev.target.value = paddedValue;\n      onChange?.(paddedValue);\n    },\n    [onChange]\n  );\n\n  const defaultValue = value !== undefined ? padNumberWithZeros(maxLength, value?.toString()) : '';\n\n  return (\n    <BareInput\n      type='number'\n      defaultValue={defaultValue}\n      onBlur={onBlur}\n      onChange={onInputChange}\n      step={1}\n      min={min}\n      max={max}\n      maxLength={maxLength}\n      readOnly={readOnly}\n      ref={inputRef}\n      size={size}\n      {...restProps}\n    />\n  );\n});\n\nexport default PartInput;\n"]}
+{"version":3,"file":"PartInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/PartInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { FocusEvent, PropsWithoutRef, ChangeEvent } from 'react';\n\nimport { useConsolidatedRef, useEvent } from '../../../hooks';\nimport type { ForwardRefForwardPropsComponent, OmitStrict } from '../../../types';\nimport type { InputProps } from '../../Input/Input';\n\nimport { BareInput } from './DateTime.styles';\n\nconst regexPattern = /[0-9]/;\n\nconst padNumberWithZeros = (maxLength: number, value: string = '') => {\n  if (value === '') return '';\n\n  return value.padStart(Number.isFinite(maxLength) ? maxLength : 0, '0');\n};\nexport interface PartInputProps\n  extends OmitStrict<InputProps, 'defaultValue' | 'value' | 'onChange'> {\n  value?: number;\n  min?: number;\n  max?: number;\n  maxLength?: number;\n  padWithZeros?: boolean;\n  size?: number;\n  onChange?: (value?: string) => void;\n}\n\nconst PartInput: ForwardRefForwardPropsComponent<PartInputProps> = forwardRef(function PartInput(\n  {\n    value,\n    onChange,\n    readOnly,\n    min = 0,\n    max = Infinity,\n    size = 2,\n    maxLength = Infinity,\n    padWithZeros = true,\n    ...restProps\n  }: PropsWithoutRef<PartInputProps>,\n  ref: PartInputProps['ref']\n) {\n  const inputRef = useConsolidatedRef(ref);\n  // Track whether the input value has been modified by the user.\n  // Due to the nature of the input, we must track this through a ref instead of state.\n  const modifiedRef = useRef(false);\n\n  useEffect(() => {\n    if (inputRef.current && !Number.isNaN(value)) {\n      inputRef.current.value = padNumberWithZeros(maxLength, value?.toString());\n      modifiedRef.current = false;\n    }\n  }, [value, maxLength]);\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.style.width = `calc(${size}ch + ${size} * ${getComputedStyle(inputRef.current).letterSpacing})`;\n    }\n  }, [size]);\n\n  useEvent(\n    'beforeinput',\n    (event: InputEvent) => {\n      if (event.data && !regexPattern.test(event.data)) {\n        event.preventDefault();\n      }\n    },\n    { target: inputRef }\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const targetEl = e.target;\n      if (targetEl.value.length > maxLength) targetEl.value = targetEl.value.slice(0, maxLength);\n      else if (size !== maxLength)\n        targetEl.style.width = `${Math.max(targetEl.value.length, size)}ch`;\n      modifiedRef.current = true;\n    },\n    [maxLength, size]\n  );\n\n  const onBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      const targetElValue = e.target.value;\n      const paddedValue = padWithZeros\n        ? padNumberWithZeros(maxLength, targetElValue)\n        : targetElValue;\n      e.target.value = paddedValue;\n      if (modifiedRef.current) {\n        // Only trigger onChange if the value has been modified\n        onChange?.(paddedValue);\n        modifiedRef.current = false;\n      }\n    },\n    [onChange, padWithZeros, maxLength]\n  );\n\n  const defaultValue = value !== undefined ? padNumberWithZeros(maxLength, value?.toString()) : '';\n\n  return (\n    <BareInput\n      type='number'\n      defaultValue={defaultValue}\n      onBlur={onBlur}\n      onChange={onInputChange}\n      step={1}\n      min={min}\n      max={max}\n      maxLength={maxLength}\n      readOnly={readOnly}\n      ref={inputRef}\n      size={size}\n      autoComplete='_off'\n      {...restProps}\n    />\n  );\n});\n\nexport default PartInput;\n"]}

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

@@ -6,7 +6,9 @@ export interface QuarterInputProps extends DateTimeProps {
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
 }
-export declare const StyledQuarterInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, QuarterInputProps, never>;
+export declare const StyledQuarterInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, QuarterInputProps>> & string;
 declare const _default: FunctionComponent<QuarterInputProps & ForwardProps> & {
     getTestIds: (testIdProp?: import("../../../types").TestIdProp["testId"]) => import("../../../types").TestIdsRecord<readonly ["control-quarter", "control-year", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"QuarterInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAcnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAS1D,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB,wHA2B9B,CAAC;;;;AAkMF,wBAAiE"}
+{"version":3,"file":"QuarterInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAcnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAS1D,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB;;+BA2B9B,CAAC;;;;AAiMF,wBAAiE"}

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

@@ -106,8 +106,8 @@ const QuarterInput = forwardRef(function QuarterInput(props, ref) {
     const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
     const Quarter = (_jsxs(Select, { "data-testid": testIds.controlQuarter, ref: quarterSelectRef, "aria-label": displayNames.of('quarter'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), quarterOptions] }, 'quarter'));
     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": label ? undefined : testIds.root, ...restProps, as: StyledQuarterInput, className: createClassName('quarter-input', className, { status }), forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, children: [Quarter, Year] }));
-    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
+    const Comp = (_jsxs(Flex, { "data-testid": label ? undefined : testIds.root, ...restProps, as: StyledQuarterInput, className: createClassName('quarter-input', className), forwardedAs: StyledFormControl, container: { alignItems: 'center' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, children: [Quarter, Year] }));
+    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
 });
 export default withTestIds(QuarterInput, getQuarterInputTestIds);
 //# sourceMappingURL=QuarterInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuarterInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport Flex from '../../Flex';\nimport { createClassName, range, withTestIds } from '../../../utils';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useTestIds\n} from '../../../hooks';\nimport { StyledSelect } from '../../Select/Select';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport { getQuarterInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField } from '../../FormField/FormField';\n\nimport { getQuarter, parseToDate } from './utils';\nimport type { QuarterNumber } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface QuarterInputProps extends DateTimeProps {\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledQuarterInput = styled(StyledDateTime)<QuarterInputProps>`\n  padding: 0;\n  border: 0;\n\n  ${StyledFormField}:enabled > &:focus-within {\n    box-shadow: none;\n  }\n\n  ${StyledSelect} {\n    min-width: 0;\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    &:last-child {\n      max-width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n`;\n\nStyledQuarterInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([parts.quarter, parts.year].every(Boolean)) {\n    const quarterStartMonth = [0, 3, 6, 9][Number(parts.quarter) - 1];\n\n    const resultDate = new Date(date);\n    resultDate.setUTCFullYear(Number(parts.year), quarterStartMonth, 1);\n    return {\n      valueAsISOString: resultDate.toISOString(),\n      valueAsTimestamp: resultDate.getTime()\n    };\n  }\n  if ([parts.year, parts.quarter].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst QuarterInput: FunctionComponent<QuarterInputProps & ForwardProps> = forwardRef(\n  function QuarterInput(props: PropsWithoutRef<QuarterInputProps>, ref: Ref<HTMLFieldSetElement>) {\n    const {\n      testId,\n      value,\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      additionalInfo,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getQuarterInputTestIds);\n\n    const { locale } = useConfiguration();\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 quarterSelectRef = useRef<HTMLSelectElement>(null);\n    const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n    useEffect(() => {\n      if (quarterSelectRef.current && yearSelectRef.current) {\n        quarterSelectRef.current.value = date ? getQuarter(date).toString() : '';\n        yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n      }\n    }, [date?.toDateString()]);\n\n    const pickParts = (): DateParts<string | undefined> => {\n      return {\n        quarter: quarterSelectRef.current?.value || '',\n        year: yearSelectRef.current?.value || ''\n      };\n    };\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      else if (onBlur && !focused) onBlur(callbackParam);\n    };\n\n    const onSelectChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\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 displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const Quarter = (\n      <Select\n        data-testid={testIds.controlQuarter}\n        key='quarter'\n        ref={quarterSelectRef}\n        aria-label={displayNames.of('quarter')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        data-testid={testIds.controlYear}\n        key='year'\n        ref={yearSelectRef}\n        aria-label={displayNames.of('year')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        data-testid={label ? undefined : testIds.root}\n        {...restProps}\n        as={StyledQuarterInput}\n        className={createClassName('quarter-input', className, { status })}\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        testId={testIds}\n        as='fieldset'\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(QuarterInput, getQuarterInputTestIds);\n"]}
+{"version":3,"file":"QuarterInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/QuarterInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Select, { Option } from '../../Select';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport Flex from '../../Flex';\nimport { createClassName, range, withTestIds } from '../../../utils';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useTestIds\n} from '../../../hooks';\nimport { StyledSelect } from '../../Select/Select';\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport { getQuarterInputTestIds } from '../DateTime.test-ids';\nimport { StyledFormField } from '../../FormField/FormField';\n\nimport { getQuarter, parseToDate } from './utils';\nimport type { QuarterNumber } from './utils';\nimport StyledDateTime from './DateTime.styles';\nimport type { DateParts } from './DateTimeInput.types';\n\nexport interface QuarterInputProps extends DateTimeProps {\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport const StyledQuarterInput = styled(StyledDateTime)<QuarterInputProps>`\n  padding: 0;\n  border: 0;\n\n  ${StyledFormField}:enabled > &:focus-within {\n    box-shadow: none;\n  }\n\n  ${StyledSelect} {\n    min-width: 0;\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    &:last-child {\n      max-width: max-content;\n      margin-inline-start: -0.0625rem;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n`;\n\nStyledQuarterInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([parts.quarter, parts.year].every(Boolean)) {\n    const quarterStartMonth = [0, 3, 6, 9][Number(parts.quarter) - 1];\n\n    const resultDate = new Date(date);\n    resultDate.setUTCFullYear(Number(parts.year), quarterStartMonth, 1);\n    return {\n      valueAsISOString: resultDate.toISOString(),\n      valueAsTimestamp: resultDate.getTime()\n    };\n  }\n  if ([parts.year, parts.quarter].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst QuarterInput: FunctionComponent<QuarterInputProps & ForwardProps> = forwardRef(\n  function QuarterInput(props: PropsWithoutRef<QuarterInputProps>, ref: Ref<HTMLFieldSetElement>) {\n    const {\n      testId,\n      value,\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      additionalInfo,\n      className,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getQuarterInputTestIds);\n\n    const { locale } = useConfiguration();\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 quarterSelectRef = useRef<HTMLSelectElement>(null);\n    const yearSelectRef = useRef<HTMLSelectElement>(null);\n\n    useEffect(() => {\n      if (quarterSelectRef.current && yearSelectRef.current) {\n        quarterSelectRef.current.value = date ? getQuarter(date).toString() : '';\n        yearSelectRef.current.value = date?.getUTCFullYear().toString() ?? '';\n      }\n    }, [date?.toDateString()]);\n\n    const pickParts = (): DateParts<string | undefined> => {\n      return {\n        quarter: quarterSelectRef.current?.value || '',\n        year: yearSelectRef.current?.value || ''\n      };\n    };\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      else if (onBlur && !focused) onBlur(callbackParam);\n    };\n\n    const onSelectChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\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 displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const Quarter = (\n      <Select\n        data-testid={testIds.controlQuarter}\n        key='quarter'\n        ref={quarterSelectRef}\n        aria-label={displayNames.of('quarter')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        data-testid={testIds.controlYear}\n        key='year'\n        ref={yearSelectRef}\n        aria-label={displayNames.of('year')}\n        readOnly={readOnly}\n        required={required}\n        onChange={onSelectChange}\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        data-testid={label ? undefined : testIds.root}\n        {...restProps}\n        as={StyledQuarterInput}\n        className={createClassName('quarter-input', className)}\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        testId={testIds}\n        as='fieldset'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(QuarterInput, getQuarterInputTestIds);\n"]}

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

@@ -20,7 +20,9 @@ export interface TimeInputProps extends DateTimeProps {
     /** Pass a heading and content to show additional information on the field. */
     additionalInfo?: FormControlProps['additionalInfo'];
 }
-export declare const StyledTimeInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TimeInputProps, never>;
+export declare const StyledTimeInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, TimeInputProps>> & string;
 declare const _default: FunctionComponent<TimeInputProps & ForwardProps> & {
     getTestIds: (testIdProp?: import("../../../types").TestIdProp["testId"]) => import("../../../types").TestIdsRecord<readonly ["control-hour", "control-minute", "control-second", "control-period", "open-close-picker", "picker", "clear-current-time", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgBnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAYjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;;;;AA2ZF,wBAA2D"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgBnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAYjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,eAAe;;4BAE3B,CAAC;;;;AA2ZF,wBAA2D"}

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

@@ -157,7 +157,7 @@ const TimeInput = forwardRef(function TimeInput(props, ref) {
         }, readOnly: readOnly, children: [_jsx(Option, { value: 'AM', children: t('meridiem_value_am') }), _jsx(Option, { value: 'PM', children: t('meridiem_value_pm') })] }, 'period'));
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
-    const Picker = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setTimePickerButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": t(open ? 'close_time_button_a11y' : 'open_time_button_a11y'), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: 'clock' }) }), _jsx(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [sameWidth], children: _jsx(TimePicker, { testId: testIds.picker, selected: currentlySelectedTime(), interval: pickerInterval, onSelect: selected => {
+    const Picker = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setTimePickerButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": t(open ? 'close_time_button_a11y' : 'open_time_button_a11y'), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: 'clock' }) }), _jsx(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [sameWidth], children: _jsx(TimePicker, { testId: testIds.picker, selected: currentlySelectedTime(), interval: pickerInterval, withSeconds: withSeconds, onSelect: selected => {
                         hourInputRef.current.value = (is12h ? convertTo12h(selected.getUTCHours()) : selected.getUTCHours())
                             .toString()
                             .padStart(2, '0');
@@ -174,7 +174,7 @@ const TimeInput = forwardRef(function TimeInput(props, ref) {
     const Comp = (_jsxs(Flex, { "data-testid": label ? undefined : testIds.root, as: StyledTimeInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap', justify: 'between' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
             if (e.target === containerRef.current)
                 hourInputRef.current?.focus();
-        }, ...restProps, className: createClassName('time-input', className, { status }), children: [_jsx(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' }, children: getDateTimeParts(locale, getTimeOptions(withSeconds, is12h)).map(part => {
+        }, ...restProps, className: createClassName('time-input', className), children: [_jsx(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' }, children: getDateTimeParts(locale, getTimeOptions(withSeconds, is12h)).map(part => {
                     switch (part) {
                         case 'hour':
                             return HourInput;
@@ -197,7 +197,7 @@ const TimeInput = forwardRef(function TimeInput(props, ref) {
                             setTimeout(() => timePickerButtonEl?.focus());
                             onInputChange();
                         }, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) })), Picker] }))] }));
-    return label ? (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, "aria-describedby": descriptionID, ref: ref, children: Comp }), description] })) : (Comp);
+    return label ? (_jsxs(_Fragment, { children: [_jsx(FormField, { testId: testIds, as: 'fieldset', label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, "aria-describedby": descriptionID, ref: ref, children: Comp }), description] })) : (Comp);
 });
 export default withTestIds(TimeInput, getTimeInputTestIds);
 //# sourceMappingURL=TimeInput.js.map