@elliemae/ds-form-date-time-picker 3.0.0-next.47 → 3.0.0-next.48

package/dist/cjs/parts/ClearButton/ClearButton.js

@@ -63,7 +63,8 @@ const ClearButton = () => {
         DomElem?.focus?.();
     },
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown
+    onKeyDown: onClearButtonKeyDown,
+    type: "button"
   }, styledsAttrs), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseMedium, {
     color: import_ds_icon.DSIconColors.PRIMARY
   }));

package/dist/cjs/parts/ClearButton/ClearButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/ClearButton/ClearButton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA6B;AAC7B,qBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,4BAA+B;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,iBAAiB,0CAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,uBAAuB,6BAAW,kEAA+B;AAElG,SACE,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,eAAa,6EAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,KACP,eAEJ,mDAAC;AAAA,IAAY,OAAO,4BAAa;AAAA,GAAS,CAC5C;AAEJ;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA6B;AAC7B,qBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,4BAA+B;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,iBAAiB,0CAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,uBAAuB,6BAAW,kEAA+B;AAElG,SACE,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,eAAa,6EAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAK;AAAA,KACD,eAEJ,mDAAC;AAAA,IAAY,OAAO,4BAAa;AAAA,GAAS,CAC5C;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js

@@ -92,7 +92,8 @@ const CalendarHead = () => {
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDoubleLeft, {
     height: 14,
     width: 14,
@@ -106,7 +107,8 @@ const CalendarHead = () => {
     innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronLeft, {
     height: 14,
     width: 14,
@@ -119,7 +121,8 @@ const CalendarHead = () => {
     innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronRight, {
     height: 14,
     width: 14,
@@ -132,7 +135,8 @@ const CalendarHead = () => {
     innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDoubleRight, {
     height: 14,
     width: 14,

package/dist/cjs/parts/Pickers/Calendar/CalendarHead.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -45,7 +45,8 @@ const CalendarIconTrigger = () => {
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
-    disabled
+    disabled,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.DatePicker, null)), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 //# sourceMappingURL=CalendarIconTrigger.js.map

package/dist/cjs/parts/Pickers/Calendar/CalendarIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledIconTriggerButton } from './Styleds';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,uBAA6C;AAC7C,sBAA2B;AAC3B,gDAAmD;AACnD,yCAAgD;AAChD,6BAAgC;AAChC,qBAAwC;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,4BAA4B,6BAAW,sCAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kEAA+B;AAC9C,SAAO,0BACL,MACE,mDAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,6EAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,mDAAC,gCAAW,CACd,GAEF,CAAC,2BAA2B,qBAAqB,sBAAsB,yBAAyB,QAAQ,CAC1G;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledIconTriggerButton } from './Styleds';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,uBAA6C;AAC7C,sBAA2B;AAC3B,gDAAmD;AACnD,yCAAgD;AAChD,6BAAgC;AAChC,qBAAwC;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,4BAA4B,6BAAW,sCAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kEAA+B;AAC9C,SAAO,0BACL,MACE,mDAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,6EAAmC,aAAa;AAAA,IAC7D;AAAA,IACA,MAAK;AAAA,KAEL,mDAAC,gCAAW,CACd,GAEF,CAAC,2BAA2B,qBAAqB,sBAAsB,yBAAyB,QAAQ,CAC1G;AACF;",
   "names": []
 }

package/dist/cjs/parts/Pickers/Calendar/Day.js

@@ -151,7 +151,8 @@ const Day = ({ metaDay, colIndex, isInvisible }) => {
     innerRef: handleInnerRef,
     tabIndex: isSelected ? 0 : -1,
     "data-isfocused": isFocused,
-    "data-testid": dataTestid
+    "data-testid": dataTestid,
+    type: "button"
   }, `${day.getDate()}`));
 };
 //# sourceMappingURL=Day.js.map

package/dist/cjs/parts/Pickers/Calendar/Day.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/Day.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport {\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n  isSameDateMoment,\n  compareTwoDatesDayEquality,\n} from '../../../utils/dateHelpers';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledDayBtn } from './Styleds';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\n\ninterface CalendarDayPropsT {\n  metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  colIndex?: number;\n  isInvisible?: boolean;\n}\nconst displayNone = { display: 'none' };\n\nexport const Day = ({ metaDay, colIndex, isInvisible }: CalendarDayPropsT): JSX.Element => {\n  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;\n  const {\n    handleChangeComposedDateString,\n    dateStringFromProps,\n    props: { preventCloseOnSelection },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n  const { focusedDay, handleDayOnKeyDown, handleFocusMetaDayByDay, closeCalendar } = useContext(CalendarContext);\n  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;\n  const isSelected = useMemo(() => {\n    const selectedDate = getDayFromDateString(dateStringFromProps);\n    return selectedDate ? isSameDateMoment(day, selectedDate) : false;\n  }, [dateStringFromProps, day]);\n  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;\n  const isDisabled = getIsDisabledDay(metaDay.dayAsString);\n  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);\n  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);\n  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange) {\n        const newDateString = getDateStringFromDay(day);\n        const metaInfo = { ...defaultMetaInfo, newDateString };\n        const { month, day: dayNumber, year } = getDateValuesFromDate(day);\n        appOnMonthChange(`${month + 1}`, e, metaInfo);\n        if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);\n        appOnYearChange(`${year}`, e, metaInfo);\n        handleChangeComposedDateString(newDateString, metaInfo);\n        trackFocusCalendarMetafocusedDay();\n        if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n    ],\n  );\n\n  const handleInnerRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      window.requestAnimationFrame(() => {\n        dayBtnRef.current = ButtonDomNode;\n        if (isFocused) ButtonDomNode?.focus?.();\n      });\n    },\n    [dayBtnRef, isFocused],\n  );\n\n  const handleOnDayFocus = useCallback(() => {\n    trackFocusCalendarMetafocusedDay('calendar-days');\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${\n        isEndRangeDay ? 'endRangeDay ' : ''\n      }${isCurrMonthDay ? '' : 'notCurrentMonth'}`,\n    [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay],\n  );\n\n  let dataTestid: string = ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;\n  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;\n  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;\n  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role={!isInvisible ? 'gridcell' : undefined}\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={`${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`}\n        aria-disabled={isOutOfRange || isDisabled}\n        aria-hidden={!!isInvisible}\n        buttonType=\"raw\"\n        size=\"m\"\n        onClick={handleOnDayClick} // DSButton triggers this with \"spacebar\" and \"enter\" too...\n        onFocus={handleOnDayFocus}\n        onKeyDown={(e: React.KeyboardEvent<Element>) => {\n          handleDayOnKeyDown(e, metaDay);\n        }}\n        innerRef={handleInnerRef}\n        tabIndex={isSelected ? 0 : -1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport {\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n  isSameDateMoment,\n  compareTwoDatesDayEquality,\n} from '../../../utils/dateHelpers';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledDayBtn } from './Styleds';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\n\ninterface CalendarDayPropsT {\n  metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  colIndex?: number;\n  isInvisible?: boolean;\n}\nconst displayNone = { display: 'none' };\n\nexport const Day = ({ metaDay, colIndex, isInvisible }: CalendarDayPropsT): JSX.Element => {\n  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;\n  const {\n    handleChangeComposedDateString,\n    dateStringFromProps,\n    props: { preventCloseOnSelection },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n  const { focusedDay, handleDayOnKeyDown, handleFocusMetaDayByDay, closeCalendar } = useContext(CalendarContext);\n  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;\n  const isSelected = useMemo(() => {\n    const selectedDate = getDayFromDateString(dateStringFromProps);\n    return selectedDate ? isSameDateMoment(day, selectedDate) : false;\n  }, [dateStringFromProps, day]);\n  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;\n  const isDisabled = getIsDisabledDay(metaDay.dayAsString);\n  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);\n  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);\n  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange) {\n        const newDateString = getDateStringFromDay(day);\n        const metaInfo = { ...defaultMetaInfo, newDateString };\n        const { month, day: dayNumber, year } = getDateValuesFromDate(day);\n        appOnMonthChange(`${month + 1}`, e, metaInfo);\n        if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);\n        appOnYearChange(`${year}`, e, metaInfo);\n        handleChangeComposedDateString(newDateString, metaInfo);\n        trackFocusCalendarMetafocusedDay();\n        if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n    ],\n  );\n\n  const handleInnerRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      window.requestAnimationFrame(() => {\n        dayBtnRef.current = ButtonDomNode;\n        if (isFocused) ButtonDomNode?.focus?.();\n      });\n    },\n    [dayBtnRef, isFocused],\n  );\n\n  const handleOnDayFocus = useCallback(() => {\n    trackFocusCalendarMetafocusedDay('calendar-days');\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${\n        isEndRangeDay ? 'endRangeDay ' : ''\n      }${isCurrMonthDay ? '' : 'notCurrentMonth'}`,\n    [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay],\n  );\n\n  let dataTestid: string = ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;\n  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;\n  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;\n  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role={!isInvisible ? 'gridcell' : undefined}\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={`${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`}\n        aria-disabled={isOutOfRange || isDisabled}\n        aria-hidden={!!isInvisible}\n        buttonType=\"raw\"\n        size=\"m\"\n        onClick={handleOnDayClick} // DSButton triggers this with \"spacebar\" and \"enter\" too...\n        onFocus={handleOnDayFocus}\n        onKeyDown={(e: React.KeyboardEvent<Element>) => {\n          handleDayOnKeyDown(e, metaDay);\n        }}\n        innerRef={handleInnerRef}\n        tabIndex={isSelected ? 0 : -1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n        type=\"button\"\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js

@@ -83,7 +83,8 @@ const HoursList = () => {
     onClick: handlePrevHour,
     innerRef: prevHourBtnRef,
     "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), visibleHours.map((hourString) => {
@@ -122,7 +123,8 @@ const HoursList = () => {
       "aria-valuemax": 12,
       "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
-      "aria-valuetext": `${hourString} hours`
+      "aria-valuetext": `${hourString} hours`,
+      type: "button"
     }), btnProps), hourString));
   }), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one hour",
@@ -131,7 +133,8 @@ const HoursList = () => {
     onClick: handleNextHour,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          tabIndex={-1}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              {...btnProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kEAA+B;AAC9C,QAAM,oBAAoB,8BACxB,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AACA,SACE,mDAAC,sCACC,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,KAEV,mDAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,aAAa,IAAI,CAAC,eAAe;AAChC,UAAM,MAAM,kBAAkB,cAAc;AAC5C,QAAI,CAAC;AAAY,aAAO,mDAAC;AAAA,QAAoB;AAAA,OAAU;AACvD,UAAM,qBAAqB,GAAG,cAAc,iBAAiB;AAE7D,UAAM,kCAAkC,CAAC,SAAS,4DAAkC,UAAU,MAAM;AACpG,UAAM,oBAAoB,mCAAmC,UAAU;AACvE,UAAM,aAAa,kBAAkB,kBAAkB;AACvD,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,0BAA0B;AAAA,MACzD,UAAU,oBAAoB,oBAAoB;AAAA,IACpD;AACA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AACA,WACE,mDAAC;AAAA,MAAoB;AAAA,MAAsC;AAAA,OACzD,mDAAC,8EACK,aADL;AAAA,MAEC,WAAW,0BAA0B;AAAA,MACrC,eAAa,6EAAmC,UAAU,oBAAoB,iBAAiB;AAAA,MAC/F,UAAU,MAAM,WAAW,KAAK,4DAAkC,UAAU,MAAM;AAAA,MAClF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,8BAA8B,YAAY,CAAC;AAAA,MAChG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,QACf,WAEH,UACH,CACF;AAAA,EAEJ,CAAC,GACD,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,KAE1D,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kEAA+B;AAC9C,QAAM,oBAAoB,8BACxB,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AACA,SACE,mDAAC,sCACC,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,aAAa,IAAI,CAAC,eAAe;AAChC,UAAM,MAAM,kBAAkB,cAAc;AAC5C,QAAI,CAAC;AAAY,aAAO,mDAAC;AAAA,QAAoB;AAAA,OAAU;AACvD,UAAM,qBAAqB,GAAG,cAAc,iBAAiB;AAE7D,UAAM,kCAAkC,CAAC,SAAS,4DAAkC,UAAU,MAAM;AACpG,UAAM,oBAAoB,mCAAmC,UAAU;AACvE,UAAM,aAAa,kBAAkB,kBAAkB;AACvD,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,0BAA0B;AAAA,MACzD,UAAU,oBAAoB,oBAAoB;AAAA,IACpD;AACA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AACA,WACE,mDAAC;AAAA,MAAoB;AAAA,MAAsC;AAAA,OACzD,mDAAC,8EACK,aADL;AAAA,MAEC,WAAW,0BAA0B;AAAA,MACrC,eAAa,6EAAmC,UAAU,oBAAoB,iBAAiB;AAAA,MAC/F,UAAU,MAAM,WAAW,KAAK,4DAAkC,UAAU,MAAM;AAAA,MAClF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,8BAA8B,YAAY,CAAC;AAAA,MAChG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,MACnB,MAAK;AAAA,QACD,WAEH,UACH,CACF;AAAA,EAEJ,CAAC,GACD,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js

@@ -86,7 +86,8 @@ const MeridiemList = () => {
     size: "m",
     onClick: (e) => handleTimeWheelBtnChangeMeridiem("AM", e),
     innerRef: prevMeridiemBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, null) : null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, {
@@ -106,7 +107,8 @@ const MeridiemList = () => {
     "aria-valuemax": 1,
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
-    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem"
+    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
+    type: "button"
   }), "AM")), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
   }, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledTimeBtn, __spreadProps(__spreadValues({}, styledPropsCurrentPmMeridiem), {
@@ -124,7 +126,8 @@ const MeridiemList = () => {
     "aria-valuemax": 1,
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
-    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem"
+    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
+    type: "button"
   }), "PM")), currMeridiem === "PM" ? /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, null) : null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelChangeTimeBtn, __spreadProps(__spreadValues({}, styledPropsNextMeridiem), {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
@@ -133,7 +136,8 @@ const MeridiemList = () => {
     size: "m",
     onClick: (e) => handleTimeWheelBtnChangeMeridiem("PM", e),
     innerRef: nextMeridiemBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,eAAe,MAAmB;AAC7C,QAAM,EAAE,cAAc,kCAAkC,gCAAgC,6BAAW,wCAAgB;AACnH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kEAA+B;AAC9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,cAAc,iBAAiB;AACrC,QAAM,mBAAmB,GAAG,SAAS,QAAQ,WAAW;AACxD,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,wBAAwB,8BAC5B,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,yBAAmB,UAAU;AAC7B,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,kBAAkB,CAClE;AACA,SACE,mDAAC,sCACC,mDAAC,0CACC,mDAAC,0EACK,0BADL;AAAA,IAEC,cAAW;AAAA,IACX,iBAAe;AAAA,IACf,eAAa,6EAAmC,UAAU;AAAA,IAC1D,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,IAC7F,UAAU;AAAA,IACV,UAAU;AAAA,MAEV,mDAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,iBAAiB,QAAQ,iBAAiB,KAAK,mDAAC,wCAAoB,IAAK,MAC1E,mDAAC;AAAA,IAAoB,mBAAmB;AAAA,KACtC,mDAAC,+DACK,+BADL;AAAA,IAEC,eAAa,6EAAmC,UAAU,cAAc,qBAAqB;AAAA,IAC7F,UAAU,iBAAiB;AAAA,IAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,IAC7C,iBAAe;AAAA,IACf,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,IAC7F,WAAW,cAAc,8BAA8B;AAAA,IACvD,UAAU,cAAc,wBAAwB;AAAA,IAChD,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAe,cAAc,IAAI;AAAA,IACjC,kBAAgB,cAAc,kBAAkB;AAAA,MACjD,IAED,CACF,GACA,mDAAC;AAAA,IAAoB,mBAAmB;AAAA,KACtC,mDAAC,+DACK,+BADL;AAAA,IAEC,eAAa,6EAAmC,UAAU,cAAc,qBAAqB;AAAA,IAC7F,UAAU,iBAAiB;AAAA,IAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,IAC7C,iBAAe;AAAA,IACf,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,IAC7F,WAAW,cAAc,8BAA8B;AAAA,IACvD,UAAU,cAAc,wBAAwB;AAAA,IAChD,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAe,cAAc,IAAI;AAAA,IACjC,kBAAgB,cAAc,kBAAkB;AAAA,MACjD,IAED,CACF,GACC,iBAAiB,OAAO,mDAAC,wCAAoB,IAAK,MACnD,mDAAC,0CACC,mDAAC,0EACK,0BADL;AAAA,IAEC,cAAW;AAAA,IACX,iBAAe;AAAA,IACf,eAAa,6EAAmC,UAAU;AAAA,IAC1D,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,IAC7F,UAAU;AAAA,IACV,UAAU;AAAA,MAEV,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;AAEA,IAAO,uBAAQ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js

@@ -83,7 +83,8 @@ const MinutesList = () => {
     onClick: handlePrevMinute,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), visibleMinutes.map((minutesString) => {
@@ -119,7 +120,8 @@ const MinutesList = () => {
       "aria-valuemax": 59,
       "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": `${minutesString} minutes`,
+      type: "button"
     }), btnProps), minutesString));
   }), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelListItem, null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
@@ -128,7 +130,8 @@ const MinutesList = () => {
     onClick: handleNextMinute,
     innerRef: nextMinutesBtnRef,
     "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              {...btnProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kEAA+B;AAC9C,QAAM,wBAAwB,8BAC5B,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,wBAAkB,UAAU;AAC5B,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,iBAAiB,CACjE;AACA,SACE,mDAAC,sCACC,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,KAE1D,mDAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,UAAM,MAAM,qBAAqB,iBAAiB;AAClD,QAAI,CAAC;AAAe,aAAO,mDAAC;AAAA,QAAoB;AAAA,OAAU;AAC1D,UAAM,wBAAwB,GAAG,eAAe,iBAAiB;AACjE,UAAM,kCACJ,CAAC,WAAW,4DAAkC,aAAa,MAAM;AACnE,UAAM,oBAAoB,mCAAmC,YAAY;AACzE,UAAM,aAAa,kBAAkB,qBAAqB;AAE1D,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,6BAA6B;AAAA,MAC5D,UAAU,oBAAoB,wBAAwB;AAAA,IACxD;AACA,UAAM,cAAc,EAAE,mBAAmB,WAAW;AACpD,WACE,mDAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,4DAAkC,aAAa,MAAM;AAAA,OAE/D,mDAAC,8EACK,cADL;AAAA,MAEC,eACE,6EAAmC,UAAU,oBAAoB,mBAAmB;AAAA,MAEtF,UAAU,QAAQ,WAAW,KAAK,4DAAkC,aAAa,MAAM;AAAA,MACvF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,gCAAgC,eAAe,CAAC;AAAA,MACrG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,QACf,WAEH,aACH,CACF;AAAA,EAEJ,CAAC,GACD,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,KAEV,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW,kEAA+B;AAC9C,QAAM,wBAAwB,8BAC5B,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,wBAAkB,UAAU;AAC5B,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,iBAAiB,CACjE;AACA,SACE,mDAAC,sCACC,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,UAAM,MAAM,qBAAqB,iBAAiB;AAClD,QAAI,CAAC;AAAe,aAAO,mDAAC;AAAA,QAAoB;AAAA,OAAU;AAC1D,UAAM,wBAAwB,GAAG,eAAe,iBAAiB;AACjE,UAAM,kCACJ,CAAC,WAAW,4DAAkC,aAAa,MAAM;AACnE,UAAM,oBAAoB,mCAAmC,YAAY;AACzE,UAAM,aAAa,kBAAkB,qBAAqB;AAE1D,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,6BAA6B;AAAA,MAC5D,UAAU,oBAAoB,wBAAwB;AAAA,IACxD;AACA,UAAM,cAAc,EAAE,mBAAmB,WAAW;AACpD,WACE,mDAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,4DAAkC,aAAa,MAAM;AAAA,OAE/D,mDAAC,8EACK,cADL;AAAA,MAEC,eACE,6EAAmC,UAAU,oBAAoB,mBAAmB;AAAA,MAEtF,UAAU,QAAQ,WAAW,KAAK,4DAAkC,aAAa,MAAM;AAAA,MACvF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,gCAAgC,eAAe,CAAC;AAAA,MACrG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,MACnB,MAAK;AAAA,QACD,WAEH,aACH,CACF;AAAA,EAEJ,CAAC,GACD,mDAAC,0CACC,mDAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,6EAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,mDAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -45,7 +45,8 @@ const TimeWheelIconTrigger = () => {
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
-    disabled
+    disabled,
+    type: "button"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.RecentDocuments, null)), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 //# sourceMappingURL=TimeWheelIconTrigger.js.map

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,4BAA4B,6BAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kEAA+B;AAC9C,SAAO,0BACL,MACE,mDAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,6EAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,mDAAC,qCAAgB,CACnB,GAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB,CAC5G;AACF;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,4BAA4B,6BAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kEAA+B;AAC9C,SAAO,0BACL,MACE,mDAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,8BAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,6EAAmC,aAAa;AAAA,IAC7D;AAAA,IACA,MAAK;AAAA,KAEL,mDAAC,qCAAgB,CACnB,GAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB,CAC5G;AACF;",
   "names": []
 }

package/dist/esm/parts/ClearButton/ClearButton.js

@@ -40,7 +40,8 @@ const ClearButton = () => {
         DomElem?.focus?.();
     },
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown
+    onKeyDown: onClearButtonKeyDown,
+    type: "button"
   }, styledsAttrs), /* @__PURE__ */ React2.createElement(CloseMedium, {
     color: DSIconColors.PRIMARY
   }));

package/dist/esm/parts/ClearButton/ClearButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/ClearButton/ClearButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,iBAAiB,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,uBAAuB,WAAW,+BAA+B;AAElG,SACE,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,eAAa,mCAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,KACP,eAEJ,qCAAC;AAAA,IAAY,OAAO,aAAa;AAAA,GAAS,CAC5C;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,iBAAiB,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,uBAAuB,WAAW,+BAA+B;AAElG,SACE,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,eAAa,mCAAmC;AAAA,IAChD,UAAU,CAAC,YAA+B;AACxC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AAAa,iBAAS,QAAQ;AAAA,IACtG;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAK;AAAA,KACD,eAEJ,qCAAC;AAAA,IAAY,OAAO,aAAa;AAAA,GAAS,CAC5C;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/CalendarHead.js

@@ -67,7 +67,8 @@ const CalendarHead = () => {
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronDoubleLeft, {
     height: 14,
     width: 14,
@@ -81,7 +82,8 @@ const CalendarHead = () => {
     innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronLeft, {
     height: 14,
     width: 14,
@@ -94,7 +96,8 @@ const CalendarHead = () => {
     innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronRight, {
     height: 14,
     width: 14,
@@ -107,7 +110,8 @@ const CalendarHead = () => {
     innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronDoubleRight, {
     height: 14,
     width: 14,

package/dist/esm/parts/Pickers/Calendar/CalendarHead.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
+  "mappings": "AAAA;ACCA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,6BAA6B,MAAM;AACvC,QAAM,EAAE,cAAc,gBAAgB,WAAW,eAAe;AAEhE,QAAM,cAAc,gBAAgB,KAAK,gBAAgB,KAAK,GAAG,0BAA0B,YAAY,OAAO;AAE9G,SAAO,QAAQ,MAAM,GAAG,cAAc,eAAe,CAAC,aAAa,WAAW,CAAC;AACjF;AACO,MAAM,eAAe,MAAmB;AAC7C,QAAM,sBAAsB,2BAA2B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAE9C,QAAM,oBAAoB,YACxB,CAAC,kBAAqC;AACpC,mBAAe,UAAU;AACzB,QAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,qBAAe,QAAQ;AAAA,EAC3B,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AACA,QAAM,qBAAqB,YACzB,CAAC,kBAAqC;AACpC,oBAAgB,UAAU;AAC1B,QAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,qBAAe,QAAQ;AAAA,EAC3B,GACA,CAAC,oBAAoB,yBAAyB,eAAe,CAC/D;AACA,QAAM,qBAAqB,YACzB,CAAC,kBAAqC;AACpC,oBAAgB,UAAU;AAC1B,QAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,qBAAe,QAAQ;AAAA,EAC3B,GACA,CAAC,oBAAoB,yBAAyB,eAAe,CAC/D;AACA,QAAM,oBAAoB,YACxB,CAAC,kBAAqC;AACpC,mBAAe,UAAU;AACzB,QAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,qBAAe,QAAQ;AAAA,EAC3B,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AAEA,SACE,qCAAC,oBACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU,mBAAmB,KAAK;AAAA,IAClC,eAAa,mCAAmC,SAAS;AAAA,IACzD,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAkB,QAAQ;AAAA,IAAI,OAAO;AAAA,IAAI,MAAK;AAAA,GAAU,CAC3D,GACA,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAa,mCAAmC,SAAS;AAAA,IACzD,MAAK;AAAA,KAGL,qCAAC;AAAA,IAAY,QAAQ;AAAA,IAAI,OAAO;AAAA,IAAI,MAAK;AAAA,GAAU,CACrD,GACA,qCAAC,YAAI,mBAAoB,GACzB,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAa,mCAAmC,SAAS;AAAA,IACzD,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAa,QAAQ;AAAA,IAAI,OAAO;AAAA,IAAI,MAAK;AAAA,GAAU,CACtD,GACA,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAa,mCAAmC,SAAS;AAAA,IACzD,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAmB,QAAQ;AAAA,IAAI,OAAO;AAAA,IAAI,MAAK;AAAA,GAAU,CAC5D,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -20,7 +20,8 @@ const CalendarIconTrigger = () => {
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
-    disabled
+    disabled,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(DatePicker, null)), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 export {

package/dist/esm/parts/Pickers/Calendar/CalendarIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledIconTriggerButton } from './Styleds';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled],\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,4BAA4B,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,+BAA+B;AAC9C,SAAO,QACL,MACE,qCAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,qCAAC,gBAAW,CACd,GAEF,CAAC,2BAA2B,qBAAqB,sBAAsB,yBAAyB,QAAQ,CAC1G;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledIconTriggerButton } from './Styleds';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,4BAA4B,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,+BAA+B;AAC9C,SAAO,QACL,MACE,qCAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,IACA,MAAK;AAAA,KAEL,qCAAC,gBAAW,CACd,GAEF,CAAC,2BAA2B,qBAAqB,sBAAsB,yBAAyB,QAAQ,CAC1G;AACF;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/Day.js

@@ -134,7 +134,8 @@ const Day = ({ metaDay, colIndex, isInvisible }) => {
     innerRef: handleInnerRef,
     tabIndex: isSelected ? 0 : -1,
     "data-isfocused": isFocused,
-    "data-testid": dataTestid
+    "data-testid": dataTestid,
+    type: "button"
   }, `${day.getDate()}`));
 };
 export {

package/dist/esm/parts/Pickers/Calendar/Day.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Day.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport {\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n  isSameDateMoment,\n  compareTwoDatesDayEquality,\n} from '../../../utils/dateHelpers';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledDayBtn } from './Styleds';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\n\ninterface CalendarDayPropsT {\n  metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  colIndex?: number;\n  isInvisible?: boolean;\n}\nconst displayNone = { display: 'none' };\n\nexport const Day = ({ metaDay, colIndex, isInvisible }: CalendarDayPropsT): JSX.Element => {\n  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;\n  const {\n    handleChangeComposedDateString,\n    dateStringFromProps,\n    props: { preventCloseOnSelection },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n  const { focusedDay, handleDayOnKeyDown, handleFocusMetaDayByDay, closeCalendar } = useContext(CalendarContext);\n  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;\n  const isSelected = useMemo(() => {\n    const selectedDate = getDayFromDateString(dateStringFromProps);\n    return selectedDate ? isSameDateMoment(day, selectedDate) : false;\n  }, [dateStringFromProps, day]);\n  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;\n  const isDisabled = getIsDisabledDay(metaDay.dayAsString);\n  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);\n  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);\n  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange) {\n        const newDateString = getDateStringFromDay(day);\n        const metaInfo = { ...defaultMetaInfo, newDateString };\n        const { month, day: dayNumber, year } = getDateValuesFromDate(day);\n        appOnMonthChange(`${month + 1}`, e, metaInfo);\n        if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);\n        appOnYearChange(`${year}`, e, metaInfo);\n        handleChangeComposedDateString(newDateString, metaInfo);\n        trackFocusCalendarMetafocusedDay();\n        if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n    ],\n  );\n\n  const handleInnerRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      window.requestAnimationFrame(() => {\n        dayBtnRef.current = ButtonDomNode;\n        if (isFocused) ButtonDomNode?.focus?.();\n      });\n    },\n    [dayBtnRef, isFocused],\n  );\n\n  const handleOnDayFocus = useCallback(() => {\n    trackFocusCalendarMetafocusedDay('calendar-days');\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${\n        isEndRangeDay ? 'endRangeDay ' : ''\n      }${isCurrMonthDay ? '' : 'notCurrentMonth'}`,\n    [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay],\n  );\n\n  let dataTestid: string = ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;\n  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;\n  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;\n  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role={!isInvisible ? 'gridcell' : undefined}\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={`${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`}\n        aria-disabled={isOutOfRange || isDisabled}\n        aria-hidden={!!isInvisible}\n        buttonType=\"raw\"\n        size=\"m\"\n        onClick={handleOnDayClick} // DSButton triggers this with \"spacebar\" and \"enter\" too...\n        onFocus={handleOnDayFocus}\n        onKeyDown={(e: React.KeyboardEvent<Element>) => {\n          handleDayOnKeyDown(e, metaDay);\n        }}\n        innerRef={handleInnerRef}\n        tabIndex={isSelected ? 0 : -1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport {\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n  isSameDateMoment,\n  compareTwoDatesDayEquality,\n} from '../../../utils/dateHelpers';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from './CalendarContext';\nimport { StyledDayBtn } from './Styleds';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\n\ninterface CalendarDayPropsT {\n  metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  colIndex?: number;\n  isInvisible?: boolean;\n}\nconst displayNone = { display: 'none' };\n\nexport const Day = ({ metaDay, colIndex, isInvisible }: CalendarDayPropsT): JSX.Element => {\n  const { day, isCurrMonthDay, isHidden, dayBtnRef, dayAsString } = metaDay;\n  const {\n    handleChangeComposedDateString,\n    dateStringFromProps,\n    props: { preventCloseOnSelection },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n  const { focusedDay, handleDayOnKeyDown, handleFocusMetaDayByDay, closeCalendar } = useContext(CalendarContext);\n  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;\n  const isSelected = useMemo(() => {\n    const selectedDate = getDayFromDateString(dateStringFromProps);\n    return selectedDate ? isSameDateMoment(day, selectedDate) : false;\n  }, [dateStringFromProps, day]);\n  const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;\n  const isDisabled = getIsDisabledDay(metaDay.dayAsString);\n  const isOutOfRange = getIsOutOfRangeDay(metaDay.dayAsString);\n  const isStartRangeDay = getIsStartRangeDay(metaDay.dayAsString);\n  const isEndRangeDay = getIsEndRangeDay(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && getIsDayInRange(metaDay.dayAsString);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange) {\n        const newDateString = getDateStringFromDay(day);\n        const metaInfo = { ...defaultMetaInfo, newDateString };\n        const { month, day: dayNumber, year } = getDateValuesFromDate(day);\n        appOnMonthChange(`${month + 1}`, e, metaInfo);\n        if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);\n        appOnYearChange(`${year}`, e, metaInfo);\n        handleChangeComposedDateString(newDateString, metaInfo);\n        trackFocusCalendarMetafocusedDay();\n        if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n    ],\n  );\n\n  const handleInnerRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      window.requestAnimationFrame(() => {\n        dayBtnRef.current = ButtonDomNode;\n        if (isFocused) ButtonDomNode?.focus?.();\n      });\n    },\n    [dayBtnRef, isFocused],\n  );\n\n  const handleOnDayFocus = useCallback(() => {\n    trackFocusCalendarMetafocusedDay('calendar-days');\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${\n        isEndRangeDay ? 'endRangeDay ' : ''\n      }${isCurrMonthDay ? '' : 'notCurrentMonth'}`,\n    [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay],\n  );\n\n  let dataTestid: string = ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n  if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;\n  if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;\n  if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;\n  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role={!isInvisible ? 'gridcell' : undefined}\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={`${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`}\n        aria-disabled={isOutOfRange || isDisabled}\n        aria-hidden={!!isInvisible}\n        buttonType=\"raw\"\n        size=\"m\"\n        onClick={handleOnDayClick} // DSButton triggers this with \"spacebar\" and \"enter\" too...\n        onFocus={handleOnDayFocus}\n        onKeyDown={(e: React.KeyboardEvent<Element>) => {\n          handleDayOnKeyDown(e, metaDay);\n        }}\n        innerRef={handleInnerRef}\n        tabIndex={isSelected ? 0 : -1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n        type=\"button\"\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/TimeWheel/HoursList.js

@@ -60,7 +60,8 @@ const HoursList = () => {
     onClick: handlePrevHour,
     innerRef: prevHourBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), visibleHours.map((hourString) => {
@@ -99,7 +100,8 @@ const HoursList = () => {
       "aria-valuemax": 12,
       "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
-      "aria-valuetext": `${hourString} hours`
+      "aria-valuetext": `${hourString} hours`,
+      type: "button"
     }), btnProps), hourString));
   }), /* @__PURE__ */ React2.createElement(StyledWheelListItem, null, /* @__PURE__ */ React2.createElement(StyledWheelChangeTimeBtn, {
     "aria-label": "add one hour",
@@ -108,7 +110,8 @@ const HoursList = () => {
     onClick: handleNextHour,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          tabIndex={-1}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              {...btnProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAC9C,QAAM,oBAAoB,YACxB,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AACA,SACE,qCAAC,uBACC,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,KAEV,qCAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,aAAa,IAAI,CAAC,eAAe;AAChC,UAAM,MAAM,kBAAkB,cAAc;AAC5C,QAAI,CAAC;AAAY,aAAO,qCAAC;AAAA,QAAoB;AAAA,OAAU;AACvD,UAAM,qBAAqB,GAAG,cAAc,iBAAiB;AAE7D,UAAM,kCAAkC,CAAC,SAAS,kCAAkC,UAAU,MAAM;AACpG,UAAM,oBAAoB,mCAAmC,UAAU;AACvE,UAAM,aAAa,kBAAkB,kBAAkB;AACvD,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,0BAA0B;AAAA,MACzD,UAAU,oBAAoB,oBAAoB;AAAA,IACpD;AACA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AACA,WACE,qCAAC;AAAA,MAAoB;AAAA,MAAsC;AAAA,OACzD,qCAAC,+DACK,aADL;AAAA,MAEC,WAAW,0BAA0B;AAAA,MACrC,eAAa,mCAAmC,UAAU,oBAAoB,iBAAiB;AAAA,MAC/F,UAAU,MAAM,WAAW,KAAK,kCAAkC,UAAU,MAAM;AAAA,MAClF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,8BAA8B,YAAY,CAAC;AAAA,MAChG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,QACf,WAEH,UACH,CACF;AAAA,EAEJ,CAAC,GACD,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,KAE1D,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAC9C,QAAM,oBAAoB,YACxB,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,qBAAe,UAAU;AACzB,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,cAAc,CAC9D;AACA,SACE,qCAAC,uBACC,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,aAAa,IAAI,CAAC,eAAe;AAChC,UAAM,MAAM,kBAAkB,cAAc;AAC5C,QAAI,CAAC;AAAY,aAAO,qCAAC;AAAA,QAAoB;AAAA,OAAU;AACvD,UAAM,qBAAqB,GAAG,cAAc,iBAAiB;AAE7D,UAAM,kCAAkC,CAAC,SAAS,kCAAkC,UAAU,MAAM;AACpG,UAAM,oBAAoB,mCAAmC,UAAU;AACvE,UAAM,aAAa,kBAAkB,kBAAkB;AACvD,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,0BAA0B;AAAA,MACzD,UAAU,oBAAoB,oBAAoB;AAAA,IACpD;AACA,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,IACF;AACA,WACE,qCAAC;AAAA,MAAoB;AAAA,MAAsC;AAAA,OACzD,qCAAC,+DACK,aADL;AAAA,MAEC,WAAW,0BAA0B;AAAA,MACrC,eAAa,mCAAmC,UAAU,oBAAoB,iBAAiB;AAAA,MAC/F,UAAU,MAAM,WAAW,KAAK,kCAAkC,UAAU,MAAM;AAAA,MAClF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,8BAA8B,YAAY,CAAC;AAAA,MAChG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,MACnB,MAAK;AAAA,QACD,WAEH,UACH,CACF;AAAA,EAEJ,CAAC,GACD,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js

@@ -62,7 +62,8 @@ const MeridiemList = () => {
     size: "m",
     onClick: (e) => handleTimeWheelBtnChangeMeridiem("AM", e),
     innerRef: prevMeridiemBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }), /* @__PURE__ */ React2.createElement(ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ React2.createElement(StyledWheelListItem, null) : null, /* @__PURE__ */ React2.createElement(StyledWheelListItem, {
@@ -82,7 +83,8 @@ const MeridiemList = () => {
     "aria-valuemax": 1,
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
-    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem"
+    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
+    type: "button"
   }), "AM")), /* @__PURE__ */ React2.createElement(StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
   }, /* @__PURE__ */ React2.createElement(StyledTimeBtn, __spreadProps(__spreadValues({}, styledPropsCurrentPmMeridiem), {
@@ -100,7 +102,8 @@ const MeridiemList = () => {
     "aria-valuemax": 1,
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
-    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem"
+    "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
+    type: "button"
   }), "PM")), currMeridiem === "PM" ? /* @__PURE__ */ React2.createElement(StyledWheelListItem, null) : null, /* @__PURE__ */ React2.createElement(StyledWheelListItem, null, /* @__PURE__ */ React2.createElement(StyledWheelChangeTimeBtn, __spreadProps(__spreadValues({}, styledPropsNextMeridiem), {
     "aria-label": "set pm meridiem",
     "aria-disabled": isDisabledPm,
@@ -109,7 +112,8 @@ const MeridiemList = () => {
     size: "m",
     onClick: (e) => handleTimeWheelBtnChangeMeridiem("PM", e),
     innerRef: nextMeridiemBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }), /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js

@@ -59,7 +59,8 @@ const MinutesList = () => {
     onClick: handlePrevMinute,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronSmallUp, {
     color: ["brand-primary", 700]
   }))), visibleMinutes.map((minutesString) => {
@@ -95,7 +96,8 @@ const MinutesList = () => {
       "aria-valuemax": 59,
       "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": `${minutesString} minutes`,
+      type: "button"
     }), btnProps), minutesString));
   }), /* @__PURE__ */ React2.createElement(StyledWheelListItem, null, /* @__PURE__ */ React2.createElement(StyledWheelChangeTimeBtn, {
     "aria-label": "add one minute",
@@ -104,7 +106,8 @@ const MinutesList = () => {
     onClick: handleNextMinute,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(ChevronSmallDown, {
     color: ["brand-primary", 700]
   }))));

package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              {...btnProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAC9C,QAAM,wBAAwB,YAC5B,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,wBAAkB,UAAU;AAC5B,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,iBAAiB,CACjE;AACA,SACE,qCAAC,uBACC,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,KAE1D,qCAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,UAAM,MAAM,qBAAqB,iBAAiB;AAClD,QAAI,CAAC;AAAe,aAAO,qCAAC;AAAA,QAAoB;AAAA,OAAU;AAC1D,UAAM,wBAAwB,GAAG,eAAe,iBAAiB;AACjE,UAAM,kCACJ,CAAC,WAAW,kCAAkC,aAAa,MAAM;AACnE,UAAM,oBAAoB,mCAAmC,YAAY;AACzE,UAAM,aAAa,kBAAkB,qBAAqB;AAE1D,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,6BAA6B;AAAA,MAC5D,UAAU,oBAAoB,wBAAwB;AAAA,IACxD;AACA,UAAM,cAAc,EAAE,mBAAmB,WAAW;AACpD,WACE,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,kCAAkC,aAAa,MAAM;AAAA,OAE/D,qCAAC,+DACK,cADL;AAAA,MAEC,eACE,mCAAmC,UAAU,oBAAoB,mBAAmB;AAAA,MAEtF,UAAU,QAAQ,WAAW,KAAK,kCAAkC,aAAa,MAAM;AAAA,MACvF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,gCAAgC,eAAe,CAAC;AAAA,MACrG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,QACf,WAEH,aACH,CACF;AAAA,EAEJ,CAAC,GACD,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,KAEV,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', 700]} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAC9C,QAAM,wBAAwB,YAC5B,CAAC,kBAAqC;AACpC,eAAW,MAAM;AACf,wBAAkB,UAAU;AAC5B,UAAI,4BAA4B,eAAe,uBAAuB;AACpE,uBAAe,QAAQ;AAAA,IAC3B,CAAC;AAAA,EACH,GACA,CAAC,oBAAoB,yBAAyB,iBAAiB,CACjE;AACA,SACE,qCAAC,uBACC,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAe,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACjD,CACF,GACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,UAAM,MAAM,qBAAqB,iBAAiB;AAClD,QAAI,CAAC;AAAe,aAAO,qCAAC;AAAA,QAAoB;AAAA,OAAU;AAC1D,UAAM,wBAAwB,GAAG,eAAe,iBAAiB;AACjE,UAAM,kCACJ,CAAC,WAAW,kCAAkC,aAAa,MAAM;AACnE,UAAM,oBAAoB,mCAAmC,YAAY;AACzE,UAAM,aAAa,kBAAkB,qBAAqB;AAE1D,UAAM,WAAW,oBAAoB,IAAI;AACzC,UAAM,WAAW;AAAA,MACf,WAAW,oBAAoB,6BAA6B;AAAA,MAC5D,UAAU,oBAAoB,wBAAwB;AAAA,IACxD;AACA,UAAM,cAAc,EAAE,mBAAmB,WAAW;AACpD,WACE,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,kCAAkC,aAAa,MAAM;AAAA,OAE/D,qCAAC,+DACK,cADL;AAAA,MAEC,eACE,mCAAmC,UAAU,oBAAoB,mBAAmB;AAAA,MAEtF,UAAU,QAAQ,WAAW,KAAK,kCAAkC,aAAa,MAAM;AAAA,MACvF,cAAY,GAAG;AAAA,MACf,iBAAe;AAAA,MACf,YAAW;AAAA,MACX,MAAK;AAAA,MACL,SAAS,CAAC,MAA2C,gCAAgC,eAAe,CAAC;AAAA,MACrG;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB,GAAG;AAAA,MACnB,MAAK;AAAA,QACD,WAEH,aACH,CACF;AAAA,EAEJ,CAAC,GACD,qCAAC,2BACC,qCAAC;AAAA,IACC,cAAW;AAAA,IACX,YAAW;AAAA,IACX,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,mCAAmC,UAAU;AAAA,IAC1D,UAAU;AAAA,IACV,MAAK;AAAA,KAEL,qCAAC;AAAA,IAAiB,OAAO,CAAC,iBAAiB,GAAG;AAAA,GAAG,CACnD,CACF,CACF;AAEJ;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -20,7 +20,8 @@ const TimeWheelIconTrigger = () => {
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
-    disabled
+    disabled,
+    type: "button"
   }, /* @__PURE__ */ React2.createElement(RecentDocuments, null)), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 export {

package/dist/esm/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAKO,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,4BAA4B,WAAW,gBAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,+BAA+B;AAC9C,SAAO,QACL,MACE,qCAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,qCAAC,qBAAgB,CACnB,GAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB,CAC5G;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAKO,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,4BAA4B,WAAW,gBAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,+BAA+B;AAC9C,SAAO,QACL,MACE,qCAAC;AAAA,IACC,cAAY,qCAAqC;AAAA,IACjD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,IACA,MAAK;AAAA,KAEL,qCAAC,qBAAgB,CACnB,GAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB,CAC5G;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-date-time-picker",
-  "version": "3.0.0-next.47",
+  "version": "3.0.0-next.48",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
   "files": [
@@ -35,12 +35,12 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-next.47",
-    "@elliemae/ds-grid": "3.0.0-next.47",
-    "@elliemae/ds-icon": "3.0.0-next.29",
-    "@elliemae/ds-icons": "3.0.0-next.47",
-    "@elliemae/ds-system": "3.0.0-next.29",
-    "@elliemae/ds-utilities": "3.0.0-next.47",
+    "@elliemae/ds-button": "3.0.0-next.48",
+    "@elliemae/ds-grid": "3.0.0-next.48",
+    "@elliemae/ds-icon": "3.0.0-next.48",
+    "@elliemae/ds-icons": "3.0.0-next.48",
+    "@elliemae/ds-system": "3.0.0-next.48",
+    "@elliemae/ds-utilities": "3.0.0-next.48",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",
     "uid": "~2.0.0"