npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.22.0-next.3 → 3.22.0-next.30 - Mend

@elliemae/ds-form-date-time-picker 3.22.0-next.3 → 3.22.0-next.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

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

@@ -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.js';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants.js';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledDayBtn } from './Styleds.js';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\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    getProps,\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\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 isDayInRangeImproper = getIsDayInRange(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && isDayInRangeImproper;\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();\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${\n        isDayInRangeImproper ? 'inRangeImproperDay ' : ''\n      }${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${\n        isCurrMonthDay ? '' : 'notCurrentMonth'\n      }`,\n    [\n      isSelected,\n      isDisabled,\n      isOutOfRange,\n      isFocused,\n      isStartRangeDay,\n      isDayInRangeImproper,\n      isDayInRange,\n      isEndRangeDay,\n      isCurrMonthDay,\n    ],\n  );\n\n  let dataTestid: (typeof ControlledDateTimePickerDatatestid)['CALENDAR'][keyof (typeof ControlledDateTimePickerDatatestid)['CALENDAR']] =\n    ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n\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={-1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "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.js';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants.js';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledDayBtn } from './Styleds.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\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    getProps,\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\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 isDayInRangeImproper = getIsDayInRange(metaDay.dayAsString);\n  const isDayInRange = !isStartRangeDay && !isEndRangeDay && isDayInRangeImproper;\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();\n  }, [trackFocusCalendarMetafocusedDay]);\n\n  const dayClassModifiers = useMemo(\n    () =>\n      `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${\n        isOutOfRange ? 'outOfRangeDay ' : ''\n      }${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${\n        isDayInRangeImproper ? 'inRangeImproperDay ' : ''\n      }${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${\n        isCurrMonthDay ? '' : 'notCurrentMonth'\n      }`,\n    [\n      isSelected,\n      isDisabled,\n      isOutOfRange,\n      isFocused,\n      isStartRangeDay,\n      isDayInRangeImproper,\n      isDayInRange,\n      isEndRangeDay,\n      isCurrMonthDay,\n    ],\n  );\n\n  let dataTestid: (typeof ControlledDateTimePickerDatatestid)['CALENDAR'][keyof (typeof ControlledDateTimePickerDatatestid)['CALENDAR']] =\n    ControlledDateTimePickerDatatestid.CALENDAR.DAY;\n\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={-1}\n        data-isfocused={isFocused}\n        data-testid={dataTestid}\n        type=\"button\"\n        getOwnerProps={getProps}\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/Calendar/Styleds.js CHANGED Viewed

@@ -92,7 +92,10 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
   width: 26px;
   height: 26px;
 `;
-const StyledShadowWrapper = import_ds_system.styled.div``;
+const StyledShadowWrapper = (0, import_ds_system.styled)("div", {
+  name: import_theming.DSControlledDateTimePickerName,
+  slot: import_theming.DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR
+})``;
 const StyledCalendarWrapper = import_ds_system.styled.div`
   display: grid;
   width: 260px;

package/dist/cjs/parts/Pickers/Calendar/Styleds.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled.div``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sources": ["../../../../../src/parts/Pickers/Calendar/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/Calendar/useConfigCalendarCTX.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/useConfigCalendarCTX.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/Calendar/useConfigCalendarCTX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useMemo, useContext, useCallback } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';\nimport { useFocusLogic } from './useFocusLogic.js';\nimport { usePopperTriggerLogic } from './usePopperTriggerLogic.js';\nimport { useKeyboardHandlers } from './useKeyboardHandlers.js';\n\nexport type CalendarContextT = ReturnType<typeof useCurrentDisplayedMonthYearLogic> &\n  ReturnType<typeof useFocusLogic> &\n  ReturnType<typeof usePopperTriggerLogic> &\n  ReturnType<typeof useKeyboardHandlers> & {\n    showCalendar: boolean;\n    setShowCalendar: StateSetter<boolean>;\n\n    onPrevYearFocus: React.FocusEventHandler;\n    onPrevMonthFocus: React.FocusEventHandler;\n    onNextMonthFocus: React.FocusEventHandler;\n    onNextYearFocus: React.FocusEventHandler;\n  };\n\nexport const useConfigCalendarCTX = (): CalendarContextT => {\n  const {\n    trackFocusCalendarPrevYear,\n    trackFocusCalendarNextYear,\n    trackFocusCalendarPrevMonth,\n    trackFocusCalendarNextMonth,\n  } = useContext(ControlledDateTimePickerContext);\n  const [showCalendar, setShowCalendar] = useState(false);\n\n  const onPrevYearFocus = useCallback(() => {\n    trackFocusCalendarPrevYear();\n  }, [trackFocusCalendarPrevYear]);\n  const onPrevMonthFocus = useCallback(() => {\n    trackFocusCalendarPrevMonth();\n  }, [trackFocusCalendarPrevMonth]);\n  const onNextMonthFocus = useCallback(() => {\n    trackFocusCalendarNextMonth();\n  }, [trackFocusCalendarNextMonth]);\n  const onNextYearFocus = useCallback(() => {\n    trackFocusCalendarNextYear();\n  }, [trackFocusCalendarNextYear]);\n\n  const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic();\n  const focusLogic = useFocusLogic({ currentDisplayedMonthLogic, showCalendar });\n  const popperTriggerLogic = usePopperTriggerLogic({\n    focusLogic,\n    showCalendar,\n    setShowCalendar,\n  });\n  const keyboardHandlers = useKeyboardHandlers({\n    currentDisplayedMonthLogic,\n    focusLogic,\n  });\n\n  return useMemo(\n    () => ({\n      showCalendar,\n      setShowCalendar,\n\n      onPrevYearFocus,\n      onPrevMonthFocus,\n      onNextMonthFocus,\n      onNextYearFocus,\n\n      ...currentDisplayedMonthLogic,\n      ...focusLogic,\n      ...popperTriggerLogic,\n      ...keyboardHandlers,\n    }),\n    [\n      showCalendar,\n      onPrevYearFocus,\n      onPrevMonthFocus,\n      onNextMonthFocus,\n      onNextYearFocus,\n      currentDisplayedMonthLogic,\n      focusLogic,\n      popperTriggerLogic,\n      keyboardHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA2D;AAC3D,yCAAgD;AAChD,+CAAkD;AAClD,2BAA8B;AAC9B,mCAAsC;AACtC,iCAAoC;AAe7B,MAAM,uBAAuB,MAAwB;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,QAAM,sBAAkB,0BAAY,MAAM;AACxC,+BAA2B;AAAA,EAC7B,GAAG,CAAC,0BAA0B,CAAC;AAC/B,QAAM,uBAAmB,0BAAY,MAAM;AACzC,gCAA4B;AAAA,EAC9B,GAAG,CAAC,2BAA2B,CAAC;AAChC,QAAM,uBAAmB,0BAAY,MAAM;AACzC,gCAA4B;AAAA,EAC9B,GAAG,CAAC,2BAA2B,CAAC;AAChC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,+BAA2B;AAAA,EAC7B,GAAG,CAAC,0BAA0B,CAAC;AAE/B,QAAM,iCAA6B,4EAAkC;AACrE,QAAM,iBAAa,oCAAc,EAAE,4BAA4B,aAAa,CAAC;AAC7E,QAAM,yBAAqB,oDAAsB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,uBAAmB,gDAAoB;AAAA,IAC3C;AAAA,IACA;AAAA,EACF,CAAC;AAED,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []

package/dist/cjs/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';\nimport {\n  getSixBySevenCurrentMonthDaysMatrix,\n  sumFromDateValues,\n  sumValuesToDate,\n  getDateStringFromDay,\n} from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n  const res = [];\n  for (let i = 0; i < arr.length; i += chunkSize) {\n    const chunk = arr.slice(i, i + chunkSize);\n    res.push(chunk);\n  }\n  return res;\n}\ninterface UseCurrentDisplayedMonthYearLogicT {\n  currentMonth: DSControlledDateTimePickerInternalsT.DateMonth;\n  currentYear: number;\n  daysArray: DSControlledDateTimePickerInternalsT.MetaMonthDay[];\n  invisibleFirstDay?: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  daysMatrixByWeekday: DSControlledDateTimePickerInternalsT.MetaMonthDay[][];\n  invisibleLastDay?: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  handlePrevMonth: () => void;\n  handlePrevYear: () => void;\n  handleNextMonth: () => void;\n  handleNextYear: () => void;\n}\nexport const useCurrentDisplayedMonthYearLogic = (): UseCurrentDisplayedMonthYearLogicT => {\n  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();\n  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);\n  const [currentYear, setCurrentYear] = useState(yearFromDateString);\n\n  // side-effects are really really controlled in this case so use-effect should be fine\n  // don't add 200 side-effects to those or else Chaos would hunt us for the years to come\n  useEffect(() => {\n    setCurrentMonth(monthFromDateString);\n  }, [monthFromDateString]);\n  useEffect(() => {\n    setCurrentYear(yearFromDateString);\n  }, [yearFromDateString]);\n\n  const daysArray = useMemo(() => {\n    const newDaysArray = getSixBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n    const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n      daysToSum: -1,\n    });\n    const hiddenPrevMetaday = {\n      day: hiddenPrevDay,\n      dayAsString: getDateStringFromDay(hiddenPrevDay),\n      isPrevMonthDay: true,\n      isNextMonthDay: false,\n      isCurrMonthDay: false,\n      dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n      isHidden: true,\n    };\n    const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n      daysToSum: 1,\n    });\n    const hiddenNextMetaday = {\n      day: hiddenNextDay,\n      dayAsString: getDateStringFromDay(hiddenNextDay),\n      isPrevMonthDay: false,\n      isNextMonthDay: true,\n      isCurrMonthDay: false,\n      dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n      isHidden: true,\n    };\n    return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n  }, [currentMonth, currentYear]);\n\n  const handlePrevYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handlePrevMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: -1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: 1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {\n    const [invisible1stDay, ...otherDays] = [...daysArray];\n    const invisibleDayLast = otherDays.pop();\n    return {\n      invisibleFirstDay: invisible1stDay,\n      daysMatrixByWeekday: sliceIntoChunks<DSControlledDateTimePickerInternalsT.MetaMonthDay>(otherDays, 7),\n      invisibleLastDay: invisibleDayLast,\n    };\n  }, [daysArray]);\n\n  return useMemo(\n    () => ({\n      currentMonth,\n      currentYear,\n      daysArray,\n      invisibleFirstDay,\n      daysMatrixByWeekday,\n      invisibleLastDay,\n      handlePrevYear,\n      handlePrevMonth,\n      handleNextMonth,\n      handleNextYear,\n    }),\n    [\n      currentMonth,\n      currentYear,\n      daysArray,\n      daysMatrixByWeekday,\n      handleNextMonth,\n      handleNextYear,\n      handlePrevMonth,\n      handlePrevYear,\n      invisibleFirstDay,\n      invisibleLastDay,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAqE;AAErE,+DAAkE;AAClE,yBAKO;AAIP,SAAS,gBAAyB,KAAe,WAAoC;AACnF,QAAM,MAAM,CAAC;AACb,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK,WAAW;AAC9C,UAAM,QAAQ,IAAI,MAAM,GAAG,IAAI,SAAS;AACxC,QAAI,KAAK,KAAK;AAAA,EAChB;AACA,SAAO;AACT;AAaO,MAAM,oCAAoC,MAA0C;AACzF,QAAM,EAAE,OAAO,qBAAqB,MAAM,mBAAmB,QAAI,4GAAkD;AACnH,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,mBAAmB;AACpE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AAIjE,8BAAU,MAAM;AACd,oBAAgB,mBAAmB;AAAA,EACrC,GAAG,CAAC,mBAAmB,CAAC;AACxB,8BAAU,MAAM;AACd,mBAAe,kBAAkB;AAAA,EACnC,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,mBAAe,wDAAoC,cAAc,WAAW;AAClF,UAAM,oBAAgB,oCAAgB,aAAa,CAAC,EAAE,KAAK;AAAA,MACzD,WAAW;AAAA,IACb,CAAC;AACD,UAAM,oBAAoB;AAAA,MACxB,KAAK;AAAA,MACL,iBAAa,yCAAqB,aAAa;AAAA,MAC/C,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,eAAW,wBAA6B;AAAA,MACxC,UAAU;AAAA,IACZ;AACA,UAAM,oBAAgB,oCAAgB,aAAa,aAAa,SAAS,CAAC,EAAE,KAAK;AAAA,MAC/E,WAAW;AAAA,IACb,CAAC;AACD,UAAM,oBAAoB;AAAA,MACxB,KAAK;AAAA,MACL,iBAAa,yCAAqB,aAAa;AAAA,MAC/C,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,eAAW,wBAA6B;AAAA,MACxC,UAAU;AAAA,IACZ;AACA,WAAO,CAAC,mBAAmB,GAAG,cAAc,iBAAiB;AAAA,EAC/D,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,qBAAiB,0BAAY,MAAM;AACvC,UAAM,EAAE,MAAM,QAAQ,QAAI,sCAAkB,EAAE,OAAO,cAAc,MAAM,YAAY,GAAG,EAAE,YAAY,GAAG,CAAC;AAC1G,mBAAe,OAAO;AAAA,EACxB,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,sBAAkB,0BAAY,MAAM;AACxC,UAAM,EAAE,OAAO,UAAU,MAAM,QAAQ,QAAI;AAAA,MACzC,EAAE,OAAO,cAAc,MAAM,YAAY;AAAA,MACzC,EAAE,aAAa,GAAG;AAAA,IACpB;AACA,oBAAgB,QAAQ;AACxB,mBAAe,OAAO;AAAA,EACxB,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,sBAAkB,0BAAY,MAAM;AACxC,UAAM,EAAE,OAAO,UAAU,MAAM,QAAQ,QAAI;AAAA,MACzC,EAAE,OAAO,cAAc,MAAM,YAAY;AAAA,MACzC,EAAE,aAAa,EAAE;AAAA,IACnB;AACA,oBAAgB,QAAQ;AACxB,mBAAe,OAAO;AAAA,EACxB,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,qBAAiB,0BAAY,MAAM;AACvC,UAAM,EAAE,MAAM,QAAQ,QAAI,sCAAkB,EAAE,OAAO,cAAc,MAAM,YAAY,GAAG,EAAE,YAAY,EAAE,CAAC;AACzG,mBAAe,OAAO;AAAA,EACxB,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,EAAE,mBAAmB,qBAAqB,iBAAiB,QAAI,sBAAQ,MAAM;AACjF,UAAM,CAAC,iBAAiB,GAAG,SAAS,IAAI,CAAC,GAAG,SAAS;AACrD,UAAM,mBAAmB,UAAU,IAAI;AACvC,WAAO;AAAA,MACL,mBAAmB;AAAA,MACnB,qBAAqB,gBAAmE,WAAW,CAAC;AAAA,MACpG,kBAAkB;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []

package/dist/cjs/parts/Pickers/Calendar/useFocusLogic.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/useFocusLogic.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/Calendar/useFocusLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState } from 'react';\nimport { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';\nimport { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';\nimport type { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\ninterface UseFocusLogicArgsT {\n  currentDisplayedMonthLogic: ReturnType<typeof useCurrentDisplayedMonthYearLogic>;\n  showCalendar: boolean;\n}\ninterface FocusLogicT {\n  focusedDay?: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  resetFocusedDayToStartDate: () => void;\n  handleFocusMetaDay: (metaDayToFocus: DSControlledDateTimePickerInternalsT.MetaMonthDay) => void;\n  handleFocusMetaDayByDay: (day: Date) => void;\n}\n\nexport const useFocusLogic = ({ currentDisplayedMonthLogic }: UseFocusLogicArgsT): FocusLogicT => {\n  const { daysArray } = currentDisplayedMonthLogic;\n  const { startFocusedDate } = useGetStartingFocusedDay();\n  const [metadayToFocus, setMetadayToFocus] = useState<DSControlledDateTimePickerInternalsT.MetaMonthDay | undefined>(\n    () =>\n      startFocusedDate\n        ? daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate))\n        : undefined,\n  );\n\n  // this is required because we have to focus based on the inputs values too,\n  // useGetStartingFocusedDay does this already,\n  // this \"useMemo\" is here just to trigger it functionally by changing the metadayToFocus state\n  // which is required for arrow key navigation in the calendar\n  const focusedDay = useMemo(() => {\n    let newFocusedDay;\n    if (metadayToFocus)\n      newFocusedDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, metadayToFocus.day));\n    else if (startFocusedDate)\n      newFocusedDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, startFocusedDate));\n    return newFocusedDay;\n  }, [daysArray, startFocusedDate, metadayToFocus]);\n\n  const handleFocusMetaDay = useCallback(\n    (metaDayToFocus: DSControlledDateTimePickerInternalsT.MetaMonthDay) => {\n      // if focusedDay is inside current daysArray we set Focused day\n      const newFocusedMetaDay = daysArray.find(({ day: currDay }) =>\n        compareTwoDatesDayEquality(currDay, metaDayToFocus.day),\n      );\n      if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);\n    },\n    [daysArray, focusedDay],\n  );\n\n  const handleFocusMetaDayByDay = useCallback(\n    (dayDate: Date) => {\n      // if focusedDay is inside current daysArray we set Focused day\n      const newFocusedMetaDay = daysArray.find(({ day: currDay }) => compareTwoDatesDayEquality(currDay, dayDate));\n      if (focusedDay !== newFocusedMetaDay) setMetadayToFocus(newFocusedMetaDay);\n    },\n    [daysArray, focusedDay],\n  );\n\n  const resetFocusedDayToStartDate = useCallback(() => {\n    setMetadayToFocus(undefined);\n  }, []);\n\n  return useMemo(\n    () => ({\n      focusedDay,\n      resetFocusedDayToStartDate,\n      handleFocusMetaDay,\n      handleFocusMetaDayByDay,\n    }),\n    [focusedDay, resetFocusedDayToStartDate, handleFocusMetaDay, handleFocusMetaDayByDay],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA+C;AAC/C,yBAA2C;AAC3C,sCAAyC;AAelC,MAAM,gBAAgB,CAAC,EAAE,2BAA2B,MAAuC;AAChG,QAAM,EAAE,UAAU,IAAI;AACtB,QAAM,EAAE,iBAAiB,QAAI,0DAAyB;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,IAC1C,MACE,mBACI,UAAU,KAAK,CAAC,EAAE,KAAK,QAAQ,UAAM,+CAA2B,SAAS,gBAAgB,CAAC,IAC1F;AAAA,EACR;AAMA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI;AACJ,QAAI;AACF,sBAAgB,UAAU,KAAK,CAAC,EAAE,KAAK,QAAQ,UAAM,+CAA2B,SAAS,eAAe,GAAG,CAAC;AAAA,aACrG;AACP,sBAAgB,UAAU,KAAK,CAAC,EAAE,KAAK,QAAQ,UAAM,+CAA2B,SAAS,gBAAgB,CAAC;AAC5G,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,kBAAkB,cAAc,CAAC;AAEhD,QAAM,yBAAqB;AAAA,IACzB,CAAC,mBAAsE;AAErE,YAAM,oBAAoB,UAAU;AAAA,QAAK,CAAC,EAAE,KAAK,QAAQ,UACvD,+CAA2B,SAAS,eAAe,GAAG;AAAA,MACxD;AACA,UAAI,eAAe;AAAmB,0BAAkB,iBAAiB;AAAA,IAC3E;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,EACxB;AAEA,QAAM,8BAA0B;AAAA,IAC9B,CAAC,YAAkB;AAEjB,YAAM,oBAAoB,UAAU,KAAK,CAAC,EAAE,KAAK,QAAQ,UAAM,+CAA2B,SAAS,OAAO,CAAC;AAC3G,UAAI,eAAe;AAAmB,0BAAkB,iBAAiB;AAAA,IAC3E;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,EACxB;AAEA,QAAM,iCAA6B,0BAAY,MAAM;AACnD,sBAAkB,MAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,4BAA4B,oBAAoB,uBAAuB;AAAA,EACtF;AACF;",
   "names": []

package/dist/cjs/parts/Pickers/Calendar/useKeyboardHandlers.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/useKeyboardHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/Calendar/useKeyboardHandlers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useContext, useCallback } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { sumValuesToDate } from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\nimport type { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';\n\ninterface UseKeyboardHandlersArgsT {\n  currentDisplayedMonthLogic: ReturnType<typeof useCurrentDisplayedMonthYearLogic>;\n  focusLogic: ReturnType<typeof useFocusLogic>;\n}\ntype HandleDayOnKeyDownT = (e: React.KeyboardEvent, day: DSControlledDateTimePickerInternalsT.MetaMonthDay) => void;\ninterface KeyboardHandlersT {\n  handleDayOnKeyDown: HandleDayOnKeyDownT;\n  handlePrevYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePrevMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextMonthKeyDown: (e: React.KeyboardEvent) => void;\n  handleNextYearKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({\n  currentDisplayedMonthLogic,\n  focusLogic,\n}: UseKeyboardHandlersArgsT): KeyboardHandlersT => {\n  const {\n    isControllerOnly,\n    isWithTimeWheelToo,\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusCalendarPrevMonth,\n    trackFocusCalendarNextMonth,\n    trackFocusCalendarNextYear,\n    trackFocusCalendarPrevYear,\n    trackFocusTimewheelCurrMeridiem,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n  const {\n    focusedDay,\n    handleFocusMetaDay,\n    handleFocusMetaDayByDay,\n    //  tryToFocusCurrentlyDataIsFocusedDay\n  } = focusLogic;\n  const { daysArray, handlePrevMonth, handleNextMonth } = currentDisplayedMonthLogic;\n\n  const tryToFocusDayRegion = useCallback(() => {\n    if (!focusedDay) {\n      const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);\n      if (newFocusDay) handleFocusMetaDay(newFocusDay);\n    }\n    trackFocusCalendarMetafocusedDay();\n  }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);\n\n  const onHomeKeyDownInsideCalendar = useCallback(() => {\n    trackFocusCalendarPrevMonth();\n  }, [trackFocusCalendarPrevMonth]);\n  const onEndKeyDownInsideCalendar = useCallback(() => {\n    if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();\n    else tryToFocusDayRegion();\n  }, [isWithTimeWheelToo, trackFocusTimewheelCurrMeridiem, tryToFocusDayRegion]);\n\n  const onHomeKeyDownTriggerIcon = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDownTriggerIcon();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onHomeKeyDownTriggerIcon,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  const handleDayOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay) => {\n      let newFocusedDayDate;\n      const { day } = metaDay;\n      const { key, shiftKey } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n\n      if (key === 'ArrowUp') newFocusedDayDate = sumValuesToDate(day, { daysToSum: -7 });\n      if (key === 'ArrowDown') newFocusedDayDate = sumValuesToDate(day, { daysToSum: 7 });\n      if (key === 'ArrowLeft') {\n        newFocusedDayDate = sumValuesToDate(day, { daysToSum: -1 });\n        if (metaDay === daysArray[1]) {\n          handlePrevMonth();\n        }\n      }\n      if (key === 'ArrowRight') {\n        newFocusedDayDate = sumValuesToDate(day, { daysToSum: 1 });\n        if (metaDay === daysArray[daysArray.length - 2]) {\n          handleNextMonth();\n        }\n      }\n      if (newFocusedDayDate) {\n        handleFocusMetaDayByDay(newFocusedDayDate);\n      }\n      if (key === 'Home') onHomeKeyDownInsideCalendar();\n      if (key === 'End') onEndKeyDownInsideCalendar();\n      // TAB CYCLE IMPLEMENTATION\n      if (key === 'Tab' && !shiftKey && isControllerOnly === false && !isWithTimeWheelToo) {\n        // MUST prevent default since this is a custom focus switch\n        // NOT preventing the default event will cause unexpected result\n        e.preventDefault();\n        trackFocusCalendarPrevMonth();\n      }\n    },\n    [\n      daysArray,\n      handleFocusMetaDayByDay,\n      handleNextMonth,\n      handlePrevMonth,\n      isControllerOnly,\n      isWithTimeWheelToo,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      trackFocusCalendarPrevMonth,\n    ],\n  );\n  const handlePrevYearKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          trackFocusCalendarNextMonth();\n        } else {\n          trackFocusCalendarNextYear();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarNextMonth, trackFocusCalendarNextYear],\n  );\n  const handlePrevMonthKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        if (shiftKey) {\n          // TAB CYCLE IMPLEMENTATION\n          if (!isControllerOnly) {\n            e.preventDefault();\n            if (isWithTimeWheelToo) trackFocusTimewheelCurrMeridiem();\n            else tryToFocusDayRegion();\n          }\n        } else {\n          e.preventDefault();\n          trackFocusCalendarNextMonth();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [\n      isControllerOnly,\n      isWithTimeWheelToo,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      trackFocusCalendarNextMonth,\n      trackFocusTimewheelCurrMeridiem,\n      tryToFocusDayRegion,\n    ],\n  );\n  const handleNextMonthKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          trackFocusCalendarPrevMonth();\n        } else {\n          trackFocusCalendarPrevYear();\n        }\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [onEndKeyDownInsideCalendar, onHomeKeyDownInsideCalendar, trackFocusCalendarPrevMonth, trackFocusCalendarPrevYear],\n  );\n  const handleNextYearKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (key === 'Tab') {\n        e.preventDefault();\n        if (shiftKey) {\n          trackFocusCalendarPrevYear();\n        }\n        if (!shiftKey) tryToFocusDayRegion();\n      }\n      if (key === 'Home') {\n        onHomeKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n      if (key === 'End') {\n        onEndKeyDownInsideCalendar();\n        e.preventDefault();\n      }\n    },\n    [tryToFocusDayRegion, trackFocusCalendarPrevYear, onHomeKeyDownInsideCalendar, onEndKeyDownInsideCalendar],\n  );\n\n  return useMemo(\n    () => ({\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n    }),\n    [\n      handleDayOnKeyDown,\n      handlePrevYearKeyDown,\n      handlePrevMonthKeyDown,\n      handleNextMonthKeyDown,\n      handleNextYearKeyDown,\n      handlePickerIconKeyDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []

package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/Calendar/usePopperTriggerLogic.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/Calendar/usePopperTriggerLogic.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n  focusLogic: ReturnType<typeof useFocusLogic>;\n  showCalendar: boolean;\n  setShowCalendar: StateSetter<boolean>;\n}\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  closeCalendar: () => void;\n  handleToggleCalendar: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n  focusLogic,\n  showCalendar,\n  setShowCalendar,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n  const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n  const {\n    props: { onPickerOpen, onPickerClose },\n    pickerButtonRef,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n  }, [onPickerOpen]);\n  const openCalendar = useCallback(() => {\n    if (focusedDay) trackFocusCalendarMetafocusedDay();\n    else setTimeout(() => trackFocusCalendarPrevMonth());\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [focusedDay, handleOnPickerOpen, setShowCalendar, trackFocusCalendarMetafocusedDay, trackFocusCalendarPrevMonth]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    trackFocusPicker();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      closeCalendar,\n      handleSetTriggerRef,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA2D;AAC3D,yCAAgD;AAezC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,cAAc;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;AAEvF,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI;AAAY,uCAAiC;AAAA;AAC5C,iBAAW,MAAM,4BAA4B,CAAC;AACnD,oBAAgB,IAAI;AACpB,uBAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,oBAAoB,iBAAiB,kCAAkC,2BAA2B,CAAC;AAEnH,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,KAAK;AACrB,kBAAc;AACd,+BAA2B;AAC3B,qBAAiB;AAAA,EACnB,GAAG,CAAC,iBAAiB,eAAe,4BAA4B,gBAAgB,CAAC;AAEjF,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI;AAAW,mBAAa;AAAA;AACvB,oBAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,YAAY,CAAC;AAE9C,QAAM,0BAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAC1B,UAAI,4BAA4B,iBAAiB,uBAAuB;AAAoB,gBAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,sBAAc;AACd,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB,gBAAgB;AAAA,EACvG;AACF;",
   "names": []

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-len */\nimport React from 'react';\nimport { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger.js';\nimport { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX.js';\nimport { WrappedCalendarContext } from '../Calendar/Calendar.js';\nimport { WrappedTimeWheelContext } from '../TimeWheel/TimeWheel.js';\n\nconst CalendarWithTimeWheelContent = () => {\n  const ctx = useConfigCalendarWithTimeWheelCTX();\n  const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;\n\n  return (\n    <CalendarWithTimeWheelContext.Provider value={ctx}>\n      {isControllerOnly ? null : <CalendarWithTimeWheelIconTrigger />}\n      {isControllerOnly || showCalendarWithTimeWheel ? (\n        <>\n          {/* The <div> element is catching the \"ESC\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <CalendarWithTimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </CalendarWithTimeWheelContext.Provider>\n  );\n};\n\n// we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized\nexport const CalendarWithTimeWheel = () => (\n  <WrappedCalendarContext>\n    <WrappedTimeWheelContext>\n      <CalendarWithTimeWheelContent />\n    </WrappedTimeWheelContext>\n  </WrappedCalendarContext>\n);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,8CAAiD;AACjD,0CAA6C;AAC7C,0CAA6C;AAC7C,+CAAkD;AAClD,sBAAuC;AACvC,uBAAwC;AAExC,MAAM,+BAA+B,MAAM;AACzC,QAAM,UAAM,4EAAkC;AAC9C,QAAM,EAAE,2BAA2B,kBAAkB,yBAAyB,IAAI;AAElF,SACE,6CAAC,iEAA6B,UAA7B,EAAsC,OAAO,KAC3C;AAAA,uBAAmB,OAAO,4CAAC,4EAAiC;AAAA,IAC5D,oBAAoB,4BACnB,2EAIE,sDAAC,SAAI,WAAW,0BACd,sDAAC,oEAA6B,GAChC,GACF,IACE;AAAA,KACN;AAEJ;AAGO,MAAM,wBAAwB,MACnC,4CAAC,0CACC,sDAAC,4CACC,sDAAC,gCAA6B,GAChC,GACF;",
   "names": []

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds.js';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter.js';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AAVJ,mBAAkC;AAClC,gDAAmD;AACnD,qBAAmE;AACnE,yCAA4C;AAC5C,8BAAiC;AACjC,yCAAgD;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6EAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MAEf;AAAA,oDAAC,iCAAe;AAAA,QAChB,4CAAC,4CAAiB;AAAA,QAClB,4CAAC,kEAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
   "names": []

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { createContext } from 'react';\nimport type { CalendarWithTimeWheelContextT } from './useConfigCalendarWithTimeWheelCTX.js';\nexport const defaultCalendarWithTimeWheelContext = {} as CalendarWithTimeWheelContextT;\n\n/** Context for cross component communication */\nexport const CalendarWithTimeWheelContext = createContext<CalendarWithTimeWheelContextT>(\n  defaultCalendarWithTimeWheelContext,\n);\n\nexport default CalendarWithTimeWheelContext;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAEvB,MAAM,sCAAsC,CAAC;AAG7C,MAAM,mCAA+B;AAAA,EAC1C;AACF;AAEA,IAAO,uCAAQ;",
   "names": []

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js CHANGED Viewed

@@ -34,9 +34,9 @@ module.exports = __toCommonJS(CalendarWithTimeWheelFooter_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 var import_Styleds = require("./Styleds.js");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 const CalendarWithTimeWheelFooter = () => {
   const {
     props: { pickerFooterMsg, hasError },

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds.js';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage\n      role=\"alert\"\n      data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n    >\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWnB;AAXJ,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,IACnC;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,6EAAmC,QAAQ;AAAA,MACxD,eAAe;AAAA,MAEd;AAAA;AAAA,EACH,IACE;AACN;",
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage\n      role=\"alert\"\n      data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n    >\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWnB;AAXJ,mBAAkC;AAClC,yCAAgD;AAChD,qBAAmD;AACnD,gDAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,IACnC;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,6EAAmC,QAAQ;AAAA,MACxD,eAAe;AAAA,MAEd;AAAA;AAAA,EACH,IACE;AACN;",
   "names": []
 }

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\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 CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        getOwnerProps={getProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCf;AAlCR,mBAA2C;AAC3C,0BAA6B;AAC7B,sBAA2B;AAC3B,0CAA6C;AAC7C,qBAAwC;AACxC,yCAAgD;AAChD,gDAAmD;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gEAA4B;AAC3C,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,iCAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,eAAe;AAAA,QAEf,sDAAC,8BAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js CHANGED Viewed

@@ -40,12 +40,18 @@ var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelConten
 var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 var import_ds_system = require("@elliemae/ds-system");
-const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS)``;
+var import_theming = require("../../../exported-related/theming.js");
+const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
+  name: import_theming.DSControlledDateTimePickerName,
+  slot: import_theming.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
+})``;
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
   const { getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   if (isControllerOnly)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
+  if (!referenceElement)
+    return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledPopper,
     {

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledPopper = styled(DSPopperJS)``;\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaQ;AAb/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAC7C,yCAAgD;AAChD,uBAAuB;AAEvB,MAAM,mBAAe,yBAAO,6BAAU;AAE/B,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,MAAI;AAAkB,WAAO,4CAAC,oEAA6B;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,6EAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MAEf,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBQ;AAhB/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAC7C,yCAAgD;AAChD,uBAAuB;AACvB,qBAAgF;AAChF,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,+CAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,MAAI;AAAkB,WAAO,4CAAC,oEAA6B;AAC3D,MAAI,CAAC;AAAkB,WAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,6EAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MAEf,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js CHANGED Viewed

@@ -47,7 +47,10 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
   width: 26px;
   height: 26px;
 `;
-const StyledCalendarWithTimeWheelWrapper = import_ds_system.styled.div`
+const StyledCalendarWithTimeWheelWrapper = (0, import_ds_system.styled)("div", {
+  name: import_theming.DSControlledDateTimePickerName,
+  slot: import_theming.DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
+})`
   background: ${({ theme }) => theme.colors.neutral["000"]};
   display: grid;
   grid-template-columns: 260px 192px;

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,6BAAgC;AAChC,qBAAgF;AAEzE,MAAM,8BAA0B,yBAAO,gCAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAK3C,MAAM,qCAAqC,wBAAO;AAAA,gBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAO5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7D,MAAM,qBAAiB,yBAAO,sCAAe;AAAA;AAAA;AAI7C,MAAM,yCAAqC,yBAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,+CAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,cACnD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA,iBAEhC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;",
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,6BAAgC;AAChC,qBAAgF;AAEzE,MAAM,8BAA0B,yBAAO,gCAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAK3C,MAAM,yCAAqC,yBAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,+CAAgC,qBAAqB;AAC7D,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAO5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI7D,MAAM,qBAAiB,yBAAO,sCAAe;AAAA;AAAA;AAI7C,MAAM,yCAAqC,yBAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,+CAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,cACnD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA,iBAEhC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useState, useCallback, useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from '../Calendar/CalendarContext.js';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []

package/dist/cjs/parts/Pickers/PickersIcons.js.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/Pickers/PickersIcons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/parts/Pickers/PickersIcons.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAkB;AAClB,yCAAgD;AAChD,qBAA8C;AAC9C,mCAAsC;AACtC,sBAAyB;AACzB,uBAA0B;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAEpD,SACE,6CAAC,gDAA8B,UAAoB,kBAChD;AAAA,KAAC,kBAAkB,kBAAkB,qBAAqB,4CAAC,4BAAS,IAAK;AAAA,IACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,4CAAC,8BAAU,IAAK;AAAA,IAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,4CAAC,sDAAsB,IAAK;AAAA,KACzF;AAEJ;",
   "names": ["React"]

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\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    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\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          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\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              getOwnerProps={getProps}\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          getOwnerProps={getProps}\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": "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",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\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    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\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          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\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          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\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.map CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "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.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\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    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\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          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n                handleTimeWheelBtnChangeMinutes(minutesString, e)\n              }\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              getOwnerProps={getProps}\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          getOwnerProps={getProps}\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": "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",
   "names": []

package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js CHANGED Viewed

@@ -128,7 +128,10 @@ const StyledWheelList = import_ds_system.styled.div`
     }
   }
 `;
-const StyledTimePickerContainer = import_ds_system.styled.div`
+const StyledTimePickerContainer = (0, import_ds_system.styled)("div", {
+  name: import_theming.DSControlledDateTimePickerName,
+  slot: import_theming.DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL
+})`
   display: grid;
   position: relative;
   grid-template-columns: 192px;