npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.53.0-alpha.1 → 3.53.0-alpha.3 - Mend

@elliemae/ds-form-date-time-picker 3.53.0-alpha.1 → 3.53.0-alpha.3

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 (232) hide show

package/dist/esm/parts/Pickers/Calendar/CalendarFooter.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
 import { AlertsSmallFill } from "@elliemae/ds-icons";
+import { useContext } from "react";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { CalendarFooterMessage } from "./Styleds.js";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
 const CalendarFooter = () => {
   const {
     props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },

package/dist/esm/parts/Pickers/Calendar/CalendarFooter.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarFooter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nimport { CalendarFooterMessage } from './Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },\n    getProps,\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return (\n      <CalendarFooterMessage\n        role=\"alert\"\n        getOwnerProps={getProps}\n        data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR}\n        readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        <AlertsSmallFill\n          width={8}\n          height={8}\n          color={['danger', '900']}\n          style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n        />\n        {pickerFooterMsg}\n      </CalendarFooterMessage>\n    );\n  return null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcjB,SAME,KANF;AAdN,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,uCAAuC;AAEhD,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AAC5C,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAa,mCAAmC,QAAQ;AAAA,QACxD,gBAAgB,YAAY;AAAA,QAE5B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO,CAAC,UAAU,KAAK;AAAA,cACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,UACtD;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAEJ,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { AlertsSmallFill } from '@elliemae/ds-icons';\nimport React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { CalendarFooterMessage } from './Styleds.js';\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },\n    getProps,\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return (\n      <CalendarFooterMessage\n        role=\"alert\"\n        getOwnerProps={getProps}\n        data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR}\n        readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        <AlertsSmallFill\n          width={8}\n          height={8}\n          color={['danger', '900']}\n          style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n        />\n        {pickerFooterMsg}\n      </CalendarFooterMessage>\n    );\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcjB,SAME,KANF;AAdN,SAAS,uBAAuB;AAChC,SAAgB,kBAAkB;AAClC,SAAS,uCAAuC;AAEhD,SAAS,0CAA0C;AACnD,SAAS,6BAA6B;AAC/B,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAa,mCAAmC,QAAQ;AAAA,QACxD,gBAAgB,YAAY;AAAA,QAE5B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO,CAAC,UAAU,KAAK;AAAA,cACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,UACtD;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAEJ,SAAO;AACT;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useMemo } from "react";
 import { BUTTON_SIZES } from "@elliemae/ds-button-v2";
-import { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from "@elliemae/ds-icons";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
-import { getMonthNameByMonthNumber } from "../../../utils/dateHelpers.js";
+import { ChevronDoubleLeft, ChevronDoubleRight, ChevronLeft, ChevronRight } from "@elliemae/ds-icons";
+import { useCallback, useContext, useMemo } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
-import { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from "./Styleds.js";
+import { getMonthNameByMonthNumber } from "../../../utils/dateHelpers.js";
 import { CalendarContext } from "./CalendarContext.js";
+import { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from "./Styleds.js";
 const useGetFormattedCurrentDate = () => {
   const { currentMonth, currentYear } = useContext(CalendarContext);
   const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : "";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 0}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderLabel\n        aria-live=\"polite\"\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}\n        getOwnerProps={getProps}\n      >\n        {currentFormatedDate}\n      </StyledHeaderLabel>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ChevronDoubleLeft, ChevronDoubleRight, ChevronLeft, ChevronRight } from '@elliemae/ds-icons';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds.js';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 0}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderLabel\n        aria-live=\"polite\"\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}\n        getOwnerProps={getProps}\n      >\n        {currentFormatedDate}\n      </StyledHeaderLabel>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFnB,SAcI,KAdJ;AA/EJ,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,oBAAoB,aAAa,oBAAoB;AACjF,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAChC,SAAS,cAAc,oBAAoB,yBAAyB;AAEpE,MAAM,6BAA6B,MAAM;AACvC,QAAM,EAAE,cAAc,YAAY,IAAI,WAAW,eAAe;AAEhE,QAAM,cAAc,gBAAgB,KAAK,gBAAgB,KAAK,GAAG,0BAA0B,YAAY,CAAC,MAAM;AAE9G,SAAO,QAAQ,MAAM,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,aAAa,WAAW,CAAC;AACjF;AACO,MAAM,eAAe,MAAmB;AAC7C,QAAM,sBAAsB,2BAA2B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,oBAAoB;AAAA,IACxB,CAAC,kBAAqC;AACpC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AACA,QAAM,qBAAqB;AAAA,IACzB,CAAC,kBAAqC;AACpC,sBAAgB,UAAU;AAC1B,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,qBAAqB;AAAA,IACzB,CAAC,kBAAqC;AACpC,sBAAgB,UAAU;AAC1B,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,oBAAoB;AAAA,IACxB,CAAC,kBAAqC;AACpC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AAEA,SACE,qBAAC,gBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU,mBAAmB,KAAK;AAAA,QAClC,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,qBAAkB,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IAC3D;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAGf,8BAAC,eAAY,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IACrD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAa,mCAAmC,SAAS;AAAA,QACzD,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,gBAAa,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IACtD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,sBAAmB,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IAC5D;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
 import { BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { DatePicker } from "@elliemae/ds-icons";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
+import { useContext, useMemo } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { CalendarContext } from "./CalendarContext.js";
 import { StyledIconTriggerButton } from "./Styleds.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled, tabIndex },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <DatePicker color={disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      handleSetTriggerRef,\n      tabIndex,\n      handleToggleCalendar,\n      handlePickerIconKeyDown,\n      disabled,\n      getProps,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCf;AAhCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,wBAAwB,IAAI,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC,yBAAyB;AAAA,QAC1E,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,cAAW,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAC/E;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled, tabIndex },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <DatePicker color={disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      handleSetTriggerRef,\n      tabIndex,\n      handleToggleCalendar,\n      handlePickerIconKeyDown,\n      disabled,\n      getProps,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCf;AAhCR,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,YAAY,eAAe;AACpC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,wBAAwB,IAAI,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC,yBAAyB;AAAA,QAC1E,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,cAAW,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAC/E;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { styled } from "@elliemae/ds-system";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
-import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
-import { CalendarContent } from "./CalendarContent.js";
-import { CalendarContext } from "./CalendarContext.js";
+import { useContext } from "react";
 import {
+  ControlledDateTimePickerDatatestid,
   DSControlledDateTimePickerName,
   DSControlledDateTimePickerSlots
-} from "../../../ControlledDateTimePickerDefinitions.js";
+} from "../../../constants/index.js";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
+import { CalendarContent } from "./CalendarContent.js";
+import { CalendarContext } from "./CalendarContext.js";
 const StyledPopper = styled(DSPopperJS, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR

package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\nexport const CalendarWrapper = (): JSX.Element | null => {\n  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n  const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n  if (isControllerOnly) return <CalendarContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarContent />\n    </StyledPopper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AACM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\nexport const CalendarWrapper = (): JSX.Element | null => {\n  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n  const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n  if (isControllerOnly) return <CalendarContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarContent />\n    </StyledPopper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AACM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
   "names": []
 }

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

@@ -1,18 +1,18 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback, useMemo } from "react";
 import { useLiveRegion } from "@elliemae/ds-accessibility";
+import { useCallback, useContext, useMemo } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
+import { defaultMetaInfo, weekDays } from "../../../utils/constants.js";
 import {
+  compareTwoDatesDayEquality,
   getDateStringFromDay,
-  getDayFromDateString,
   getDateValuesFromDate,
-  isSameDateMoment,
-  compareTwoDatesDayEquality
+  getDayFromDateString,
+  isSameDateMoment
 } from "../../../utils/dateHelpers.js";
-import { defaultMetaInfo, weekDays } from "../../../utils/constants.js";
 import { getAriaDayFromDateString } from "../../../utils/stringHelpers.js";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
-import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { CalendarContext } from "./CalendarContext.js";
 import { StyledDayBtn } from "./Styleds.js";
 const displayNone = { display: "none" };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Day.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { useLiveRegion } from '@elliemae/ds-accessibility';\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, readOnly, applyAriaDisabled },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n    fromDate,\n    toDate,\n  } = useContext(ControlledDateTimePickerContext);\n  const { read, LiveRegion } = useLiveRegion({});\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 dayAriaLabel = useMemo(\n    () => `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,\n    [dayAsString, metaDay],\n  );\n\n  const rangeSelectionAnnouncement = useMemo(() => {\n    if (fromDate && toDate) {\n      if (fromDate === toDate) return `Please select another day to complete range selection.`;\n      return `Range from ${fromDate} to ${toDate} selected.`;\n    }\n    if (fromDate && !toDate) return `Please select another day to complete range selection.`;\n    return '';\n  }, [fromDate, toDate]);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange && !readOnly && !applyAriaDisabled) {\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        read(`${dayAriaLabel} selected.`, {});\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      readOnly,\n      applyAriaDisabled,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n      read,\n      dayAriaLabel,\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      ${readOnly || applyAriaDisabled ? 'readOnly' : ''}`,\n    [\n      isSelected,\n      isDisabled,\n      isOutOfRange,\n      isFocused,\n      isStartRangeDay,\n      isDayInRangeImproper,\n      isDayInRange,\n      isEndRangeDay,\n      isCurrMonthDay,\n      readOnly,\n      applyAriaDisabled,\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) {\n    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n    if (isFocused) read(`${dayAriaLabel} selected. ${rangeSelectionAnnouncement}`, {});\n  }\n  if (isEndRangeDay) {\n    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n    if (isFocused) read(`${dayAriaLabel} selected. ${rangeSelectionAnnouncement}`, {});\n  }\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role=\"gridcell\"\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={dayAriaLabel}\n        aria-disabled={isOutOfRange || isDisabled || readOnly || applyAriaDisabled}\n        applyAriaDisabled={applyAriaDisabled}\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        readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n      <LiveRegion />\n    </div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { useLiveRegion } from '@elliemae/ds-accessibility';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport { defaultMetaInfo, weekDays } from '../../../utils/constants.js';\nimport {\n  compareTwoDatesDayEquality,\n  getDateStringFromDay,\n  getDateValuesFromDate,\n  getDayFromDateString,\n  isSameDateMoment,\n} from '../../../utils/dateHelpers.js';\nimport { getAriaDayFromDateString } from '../../../utils/stringHelpers.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledDayBtn } from './Styleds.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, readOnly, applyAriaDisabled },\n    getIsDisabledDay,\n    getIsOutOfRangeDay,\n    getIsStartRangeDay,\n    getIsDayInRange,\n    getIsEndRangeDay,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    latestInteractionRegion,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n    fromDate,\n    toDate,\n  } = useContext(ControlledDateTimePickerContext);\n  const { read, LiveRegion } = useLiveRegion({});\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 dayAriaLabel = useMemo(\n    () => `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,\n    [dayAsString, metaDay],\n  );\n\n  const rangeSelectionAnnouncement = useMemo(() => {\n    if (fromDate && toDate) {\n      if (fromDate === toDate) return `Please select another day to complete range selection.`;\n      return `Range from ${fromDate} to ${toDate} selected.`;\n    }\n    if (fromDate && !toDate) return `Please select another day to complete range selection.`;\n    return '';\n  }, [fromDate, toDate]);\n\n  const handleOnDayClick = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleFocusMetaDayByDay(day);\n      if (!isDisabled && !isOutOfRange && !readOnly && !applyAriaDisabled) {\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        read(`${dayAriaLabel} selected.`, {});\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      day,\n      isDisabled,\n      isOutOfRange,\n      readOnly,\n      applyAriaDisabled,\n      appOnMonthChange,\n      appOnDayChange,\n      appOnYearChange,\n      handleChangeComposedDateString,\n      trackFocusCalendarMetafocusedDay,\n      isWithTimeWheelToo,\n      preventCloseOnSelection,\n      closeCalendar,\n      read,\n      dayAriaLabel,\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      ${readOnly || applyAriaDisabled ? 'readOnly' : ''}`,\n    [\n      isSelected,\n      isDisabled,\n      isOutOfRange,\n      isFocused,\n      isStartRangeDay,\n      isDayInRangeImproper,\n      isDayInRange,\n      isEndRangeDay,\n      isCurrMonthDay,\n      readOnly,\n      applyAriaDisabled,\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) {\n    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;\n    if (isFocused) read(`${dayAriaLabel} selected. ${rangeSelectionAnnouncement}`, {});\n  }\n  if (isEndRangeDay) {\n    dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;\n    if (isFocused) read(`${dayAriaLabel} selected. ${rangeSelectionAnnouncement}`, {});\n  }\n  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;\n\n  return (\n    <div\n      className={dayClassModifiers}\n      style={isHidden ? displayNone : undefined}\n      role=\"gridcell\"\n      {...(Number.isInteger(colIndex) && { 'aria-colindex': colIndex })}\n    >\n      <StyledDayBtn\n        aria-label={dayAriaLabel}\n        aria-disabled={isOutOfRange || isDisabled || readOnly || applyAriaDisabled}\n        applyAriaDisabled={applyAriaDisabled}\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        readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        {`${day.getDate()}`}\n      </StyledDayBtn>\n      <LiveRegion />\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/Styleds.js CHANGED Viewed

@@ -1,11 +1,8 @@
 import * as React from "react";
-import { css, styled } from "@elliemae/ds-system";
-import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import {
-  DSControlledDateTimePickerName,
-  DSControlledDateTimePickerSlots
-} from "../../../ControlledDateTimePickerDefinitions.js";
+import { Grid } from "@elliemae/ds-grid";
+import { css, styled } from "@elliemae/ds-system";
+import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
 const diagonalLine = css`
   &:before {
     position: absolute;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.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['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div<{ readOnlyStyles?: boolean }>`\n  display: grid;\n  min-width: 260px;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : 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: 2.1538rem;\n  height: 2.1538rem;\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})<{ readOnlyStyles?: boolean }>`\n  height: 2.4615rem;\n  width: 2.4615rem;\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  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  justify-items: 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    &: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      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &:not(.readOnly) {\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        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n    &.selectedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.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  .dayWrapper.readOnly {\n    ${StyledDayBtn} {\n      :hover {\n        cursor: not-allowed;\n        background-color: ${({ theme }) => theme.colors.neutral['100']};\n        color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      font-weight: semibold;\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n      :hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\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/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  min-width: 2.4615rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ readOnlyStyles?: boolean }>`\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-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.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['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div<{ readOnlyStyles?: boolean }>`\n  display: grid;\n  min-width: 260px;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : 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: 2.1538rem;\n  height: 2.1538rem;\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})<{ readOnlyStyles?: boolean }>`\n  height: 2.4615rem;\n  width: 2.4615rem;\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  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  justify-items: 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    &: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      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &:not(.readOnly) {\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        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n    &.selectedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.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  .dayWrapper.readOnly {\n    ${StyledDayBtn} {\n      :hover {\n        cursor: not-allowed;\n        background-color: ${({ theme }) => theme.colors.neutral['100']};\n        color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      font-weight: semibold;\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n      :hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\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/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  min-width: 2.4615rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ readOnlyStyles?: boolean }>`\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-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/useKeyboardHandlers.js CHANGED Viewed

@@ -25,7 +25,8 @@ const useKeyboardHandlers = ({
     trackFocusCalendarNextYear,
     trackFocusCalendarPrevYear,
     trackFocusTimewheelCurrMeridiem,
-    trackFocusCalendarMetafocusedDay
+    trackFocusCalendarMetafocusedDay,
+    trackFocusTimewheelCurrHour
   } = useContext(ControlledDateTimePickerContext);
   const {
     focusedDay,
@@ -99,6 +100,10 @@ const useKeyboardHandlers = ({
         e.preventDefault();
         trackFocusCalendarPrevMonth();
       }
+      if (key === "Tab" && !shiftKey && isControllerOnly === false && isWithTimeWheelToo) {
+        e.preventDefault();
+        trackFocusTimewheelCurrHour();
+      }
     },
     [
       handleFocusMetaDayByDay,
@@ -109,7 +114,8 @@ const useKeyboardHandlers = ({
       onEndKeyDownInsideCalendar,
       onHomeKeyDownInsideCalendar,
       shouldPreventMonthChange,
-      trackFocusCalendarPrevMonth
+      trackFocusCalendarPrevMonth,
+      trackFocusTimewheelCurrHour
     ]
   );
   const handlePrevYearKeyDown = useCallback(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/useKeyboardHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport {\n  compareTwoDateAreInSameMonth,\n  isSecondDateInNextMonth,\n  isSecondDateInPreviousMonth,\n  sumValuesToDate,\n} from '../../../utils/dateHelpers.js';\nimport type { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';\nimport type { useFocusLogic } from './useFocusLogic.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 there\u2019s a focusedDay, check if it\u2019s still visible\n    const isFocusedStillVisible = focusedDay\n      ? daysArray.some(({ day }) => compareTwoDateAreInSameMonth(day, focusedDay.day))\n      : false;\n\n    // If no focusedDay or the existing one went off-screen, pick the first current-month day\n    if (!focusedDay || !isFocusedStillVisible) {\n      const firstCurrMonth = daysArray.find((d) => d.isCurrMonthDay);\n      if (firstCurrMonth) {\n        handleFocusMetaDay(firstCurrMonth);\n      }\n    }\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  // pending ux deciding what's going to happen, should we prevent changing month?\n  //  as a strict \"picker\" interpretation we should prevent it if disabled/readonly/ariaDisabled\n  //  as a more general \"calendar\" interpretation we can choose to allow it.\n  const shouldPreventMonthChange = false;\n\n  const handleDayOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay) => {\n      let newFocusedDayDate: Date | undefined;\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') newFocusedDayDate = sumValuesToDate(day, { daysToSum: -1 });\n      if (key === 'ArrowRight') newFocusedDayDate = sumValuesToDate(day, { daysToSum: 1 });\n\n      if (newFocusedDayDate) {\n        const newDayShareTheSameMonth = compareTwoDateAreInSameMonth(day, newFocusedDayDate);\n        if (!newDayShareTheSameMonth && shouldPreventMonthChange) return;\n        if (isSecondDateInPreviousMonth(day, newFocusedDayDate)) handlePrevMonth();\n        if (isSecondDateInNextMonth(day, newFocusedDayDate)) handleNextMonth();\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      handleFocusMetaDayByDay,\n      handleNextMonth,\n      handlePrevMonth,\n      isControllerOnly,\n      isWithTimeWheelToo,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      shouldPreventMonthChange,\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport {\n  compareTwoDateAreInSameMonth,\n  isSecondDateInNextMonth,\n  isSecondDateInPreviousMonth,\n  sumValuesToDate,\n} from '../../../utils/dateHelpers.js';\nimport type { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';\nimport type { useFocusLogic } from './useFocusLogic.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    trackFocusTimewheelCurrHour,\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 there\u2019s a focusedDay, check if it\u2019s still visible\n    const isFocusedStillVisible = focusedDay\n      ? daysArray.some(({ day }) => compareTwoDateAreInSameMonth(day, focusedDay.day))\n      : false;\n\n    // If no focusedDay or the existing one went off-screen, pick the first current-month day\n    if (!focusedDay || !isFocusedStillVisible) {\n      const firstCurrMonth = daysArray.find((d) => d.isCurrMonthDay);\n      if (firstCurrMonth) {\n        handleFocusMetaDay(firstCurrMonth);\n      }\n    }\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  // pending ux deciding what's going to happen, should we prevent changing month?\n  //  as a strict \"picker\" interpretation we should prevent it if disabled/readonly/ariaDisabled\n  //  as a more general \"calendar\" interpretation we can choose to allow it.\n  const shouldPreventMonthChange = false;\n\n  const handleDayOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, metaDay: DSControlledDateTimePickerInternalsT.MetaMonthDay) => {\n      let newFocusedDayDate: Date | undefined;\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') newFocusedDayDate = sumValuesToDate(day, { daysToSum: -1 });\n      if (key === 'ArrowRight') newFocusedDayDate = sumValuesToDate(day, { daysToSum: 1 });\n\n      if (newFocusedDayDate) {\n        const newDayShareTheSameMonth = compareTwoDateAreInSameMonth(day, newFocusedDayDate);\n        if (!newDayShareTheSameMonth && shouldPreventMonthChange) return;\n        if (isSecondDateInPreviousMonth(day, newFocusedDayDate)) handlePrevMonth();\n        if (isSecondDateInNextMonth(day, newFocusedDayDate)) handleNextMonth();\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      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        trackFocusTimewheelCurrHour();\n      }\n    },\n    [\n      handleFocusMetaDayByDay,\n      handleNextMonth,\n      handlePrevMonth,\n      isControllerOnly,\n      isWithTimeWheelToo,\n      onEndKeyDownInsideCalendar,\n      onHomeKeyDownInsideCalendar,\n      shouldPreventMonthChange,\n      trackFocusCalendarPrevMonth,\n      trackFocusTimewheelCurrHour,\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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
-import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from "./Styleds.js";
-import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter.js";
-import { TimeWheelContent } from "../TimeWheel/TimeWheelContent.js";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
+import { TimeWheelContent } from "../TimeWheel/TimeWheelContent.js";
+import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter.js";
+import { StyledCalendar, StyledCalendarWithTimeWheelWrapper } from "./Styleds.js";
 const CalendarWithTimeWheelContent = () => {
   const {
     getProps,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n      readOnlyStyles={readOnly || applyAriaDisabled}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACanB,SAKE,KALF;AAbJ,SAAgB,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,oCAAoC,sBAAsB;AACnE,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,gBAAgB,YAAY;AAAA,MAE5B;AAAA,4BAAC,kBAAe;AAAA,QAChB,oBAAC,oBAAiB;AAAA,QAClB,oBAAC,+BAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent.js';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter.js';\nimport { StyledCalendar, StyledCalendarWithTimeWheelWrapper } from './Styleds.js';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n      readOnlyStyles={readOnly || applyAriaDisabled}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACanB,SAKE,KALF;AAbJ,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB,0CAA0C;AAE5D,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,gBAAgB,YAAY;AAAA,MAE5B;AAAA,4BAAC,kBAAe;AAAA,QAChB,oBAAC,oBAAiB;AAAA,QAClB,oBAAC,+BAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
 import { AlertsSmallFill } from "@elliemae/ds-icons";
+import { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { CalendarWithTimeWheelFooterMessage } from "./Styleds.js";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
 const CalendarWithTimeWheelFooter = () => {
   const {
     props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { AlertsSmallFill } from '@elliemae/ds-icons';\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, readOnly, applyAriaDisabled },\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      readOnlyStyles={readOnly || applyAriaDisabled}\n    >\n      <AlertsSmallFill\n        width={8}\n        height={8}\n        color={['danger', '900']}\n        style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n      />\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAME,KANF;AAZJ,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AACnD,SAAS,0CAA0C;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,mCAAmC,QAAQ;AAAA,MACxD,eAAe;AAAA,MACf,gBAAgB,YAAY;AAAA,MAE5B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAO,CAAC,UAAU,KAAK;AAAA,YACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,QACtD;AAAA,QACC;AAAA;AAAA;AAAA,EACH,IACE;AACN;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { AlertsSmallFill } from '@elliemae/ds-icons';\nimport React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds.js';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },\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      readOnlyStyles={readOnly || applyAriaDisabled}\n    >\n      <AlertsSmallFill\n        width={8}\n        height={8}\n        color={['danger', '900']}\n        style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n      />\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SAME,KANF;AAZJ,SAAS,uBAAuB;AAChC,SAAgB,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,mCAAmC,QAAQ;AAAA,MACxD,eAAe;AAAA,MACf,gBAAgB,YAAY;AAAA,MAE5B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAO,CAAC,UAAU,KAAK;AAAA,YACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,QACtD;AAAA,QACC;AAAA;AAAA;AAAA,EACH,IACE;AACN;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
 import { BUTTON_SIZES } from "@elliemae/ds-button-v2";
 import { DatePicker } from "@elliemae/ds-icons";
+import { useContext, useMemo } from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
 import { StyledIconTriggerButton } from "./Styleds.js";
-import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
 const CalendarWithTimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,