@elliemae/ds-form-date-time-picker 3.4.3-rc.1 → 3.4.3

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

@@ -41,26 +41,35 @@ const usePopperTriggerLogic = ({
     else
       closeCalendar();
   }, [closeCalendar, openCalendar, showCalendar]);
-  const handleSetTriggerRef = useCallback((newRef) => {
-    pickerButtonRef.current = newRef;
-    setReferenceElement(newRef);
-    if (latestInteractionRegion === "picker-icon" && currFocusDescriber === "date-picker-icon")
-      newRef?.focus();
-  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
-  const handleMenuWrapperKeyDown = useCallback((e) => {
-    const { key } = e;
-    if (key === "Escape") {
-      closeCalendar();
-      trackFocusPicker();
-    }
-  }, [closeCalendar, trackFocusPicker]);
-  return useMemo(() => ({
-    referenceElement,
-    closeCalendar,
-    handleSetTriggerRef,
-    handleToggleCalendar,
-    handleMenuWrapperKeyDown
-  }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement]);
+  const handleSetTriggerRef = useCallback(
+    (newRef) => {
+      pickerButtonRef.current = newRef;
+      setReferenceElement(newRef);
+      if (latestInteractionRegion === "picker-icon" && currFocusDescriber === "date-picker-icon")
+        newRef?.focus();
+    },
+    [currFocusDescriber, latestInteractionRegion, pickerButtonRef]
+  );
+  const handleMenuWrapperKeyDown = useCallback(
+    (e) => {
+      const { key } = e;
+      if (key === "Escape") {
+        closeCalendar();
+        trackFocusPicker();
+      }
+    },
+    [closeCalendar, trackFocusPicker]
+  );
+  return useMemo(
+    () => ({
+      referenceElement,
+      closeCalendar,
+      handleSetTriggerRef,
+      handleToggleCalendar,
+      handleMenuWrapperKeyDown
+    }),
+    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement]
+  );
 };
 export {
   usePopperTriggerLogic

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

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

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CalendarWithTimeWheelIconTrigger } from "./CalendarWithTimeWheelIconTrigger";
 import { CalendarWithTimeWheelWrapper } from "./CalendarWithTimeWheelWrapper";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
@@ -9,13 +9,24 @@ import { WrappedTimeWheelContext } from "../TimeWheel/TimeWheel";
 const CalendarWithTimeWheelContent = () => {
   const ctx = useConfigCalendarWithTimeWheelCTX();
   const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;
-  return /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContext.Provider, {
-    value: ctx
-  }, isControllerOnly ? null : /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelIconTrigger, null), isControllerOnly || showCalendarWithTimeWheel ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
-    onKeyDown: handleMenuWrapperKeyDown
-  }, /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelWrapper, null))) : null);
+  return /* @__PURE__ */ jsxs(CalendarWithTimeWheelContext.Provider, {
+    value: ctx,
+    children: [
+      isControllerOnly ? null : /* @__PURE__ */ jsx(CalendarWithTimeWheelIconTrigger, {}),
+      isControllerOnly || showCalendarWithTimeWheel ? /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx("div", {
+          onKeyDown: handleMenuWrapperKeyDown,
+          children: /* @__PURE__ */ jsx(CalendarWithTimeWheelWrapper, {})
+        })
+      }) : null
+    ]
+  });
 };
-const CalendarWithTimeWheel = () => /* @__PURE__ */ React2.createElement(WrappedCalendarContext, null, /* @__PURE__ */ React2.createElement(WrappedTimeWheelContext, null, /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null)));
+const CalendarWithTimeWheel = () => /* @__PURE__ */ jsx(WrappedCalendarContext, {
+  children: /* @__PURE__ */ jsx(WrappedTimeWheelContext, {
+    children: /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {})
+  })
+});
 export {
   CalendarWithTimeWheel
 };

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport React from 'react';\nimport { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger';\nimport { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX';\nimport { WrappedCalendarContext } from '../Calendar/Calendar';\nimport { WrappedTimeWheelContext } from '../TimeWheel/TimeWheel';\n\nconst CalendarWithTimeWheelContent = () => {\n  const ctx = useConfigCalendarWithTimeWheelCTX();\n  const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;\n\n  return (\n    <CalendarWithTimeWheelContext.Provider value={ctx}>\n      {isControllerOnly ? null : <CalendarWithTimeWheelIconTrigger />}\n      {isControllerOnly || showCalendarWithTimeWheel ? (\n        <>\n          {/* The <div> element is catching the \"ESC\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <CalendarWithTimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </CalendarWithTimeWheelContext.Provider>\n  );\n};\n\n// we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized\nexport const CalendarWithTimeWheel = () => (\n  <WrappedCalendarContext>\n    <WrappedTimeWheelContext>\n      <CalendarWithTimeWheelContent />\n    </WrappedTimeWheelContext>\n  </WrappedCalendarContext>\n);\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,+BAA+B,MAAM;AACzC,QAAM,MAAM,kCAAkC;AAC9C,QAAM,EAAE,2BAA2B,kBAAkB,6BAA6B;AAElF,SACE,qCAAC,6BAA6B,UAA7B;AAAA,IAAsC,OAAO;AAAA,KAC3C,mBAAmB,OAAO,qCAAC,sCAAiC,GAC5D,oBAAoB,4BACnB,4DAIE,qCAAC;AAAA,IAAI,WAAW;AAAA,KACd,qCAAC,kCAA6B,CAChC,CACF,IACE,IACN;AAEJ;AAGO,MAAM,wBAAwB,MACnC,qCAAC,8BACC,qCAAC,+BACC,qCAAC,kCAA6B,CAChC,CACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,yCAAyC;AAClD,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AAExC,MAAM,+BAA+B,MAAM;AACzC,QAAM,MAAM,kCAAkC;AAC9C,QAAM,EAAE,2BAA2B,kBAAkB,yBAAyB,IAAI;AAElF,SACE,qBAAC,6BAA6B,UAA7B;AAAA,IAAsC,OAAO;AAAA,IAC3C;AAAA,yBAAmB,OAAO,oBAAC,oCAAiC;AAAA,MAC5D,oBAAoB,4BACnB;AAAA,QAIE,8BAAC;AAAA,UAAI,WAAW;AAAA,UACd,8BAAC,gCAA6B;AAAA,SAChC;AAAA,OACF,IACE;AAAA;AAAA,GACN;AAEJ;AAGO,MAAM,wBAAwB,MACnC,oBAAC;AAAA,EACC,8BAAC;AAAA,IACC,8BAAC,gCAA6B;AAAA,GAChC;AAAA,CACF;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from "./Styleds";
 import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter";
@@ -7,10 +8,15 @@ import { TimeWheelContent } from "../TimeWheel/TimeWheelContent";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 const CalendarWithTimeWheelContent = () => {
   const { isControllerOnly } = useContext(ControlledDateTimePickerContext);
-  return /* @__PURE__ */ React2.createElement(StyledCalendarWithTimeWheelWrapper, {
+  return /* @__PURE__ */ jsxs(StyledCalendarWithTimeWheelWrapper, {
     isControllerOnly,
-    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
-  }, /* @__PURE__ */ React2.createElement(StyledCalendar, null), /* @__PURE__ */ React2.createElement(TimeWheelContent, null), /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooter, null));
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,
+    children: [
+      /* @__PURE__ */ jsx(StyledCalendar, {}),
+      /* @__PURE__ */ jsx(TimeWheelContent, {}),
+      /* @__PURE__ */ jsx(CalendarWithTimeWheelFooter, {})
+    ]
+  });
 };
 export {
   CalendarWithTimeWheelContent

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

@@ -2,6 +2,6 @@
   "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';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,qBAAqB,WAAW,+BAA+B;AACvE,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC,oBAAe,GAChB,qCAAC,sBAAiB,GAClB,qCAAC,iCAA4B,CAC/B;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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,EAAE,iBAAiB,IAAI,WAAW,+BAA+B;AACvE,SACE,qBAAC;AAAA,IACC;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,IAErE;AAAA,0BAAC,kBAAe;AAAA,MAChB,oBAAC,oBAAiB;AAAA,MAClB,oBAAC,+BAA4B;AAAA;AAAA,GAC/B;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { createContext } from "react";
 const defaultCalendarWithTimeWheelContext = {};
-const CalendarWithTimeWheelContext = createContext(defaultCalendarWithTimeWheelContext);
+const CalendarWithTimeWheelContext = createContext(
+  defaultCalendarWithTimeWheelContext
+);
 var CalendarWithTimeWheelContext_default = CalendarWithTimeWheelContext;
 export {
   CalendarWithTimeWheelContext,

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js.map

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

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { CalendarWithTimeWheelFooterMessage } from "./Styleds";
@@ -7,10 +8,11 @@ const CalendarWithTimeWheelFooter = () => {
   const {
     props: { pickerFooterMsg, hasError }
   } = useContext(ControlledDateTimePickerContext);
-  return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooterMessage, {
+  return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ jsx(CalendarWithTimeWheelFooterMessage, {
     role: "alert",
-    "data-testid": ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL
-  }, pickerFooterMsg) : null;
+    "data-testid": ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL,
+    children: pickerFooterMsg
+  }) : null;
 };
 export {
   CalendarWithTimeWheelFooter

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

@@ -2,6 +2,6 @@
   "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 { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage\n      role=\"alert\"\n      data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n    >\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAa,mCAAmC,QAAQ;AAAA,KAEvD,eACH,IACE;AACN;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC,oBAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAa,mCAAmC,QAAQ;AAAA,IAEvD;AAAA,GACH,IACE;AACN;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { BUTTON_SIZES } from "@elliemae/ds-button";
 import { DatePicker } from "@elliemae/ds-icons";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
@@ -13,23 +14,27 @@ const CalendarWithTimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs,
     disabled
   } = useContext(CalendarWithTimeWheelContext);
-  return useMemo(() => /* @__PURE__ */ React2.createElement(StyledIconTriggerButton, {
-    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
-    buttonType: "icon",
-    type: "button",
-    size: BUTTON_SIZES.M,
-    innerRef: handleSetTriggerRef,
-    onClick: handleToggleCalendarWithTimeWheel,
-    onKeyDown: handlePickerIconKeyDown,
-    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
-    disabled
-  }, /* @__PURE__ */ React2.createElement(DatePicker, null)), [
-    ariaCurrentValueForInputs,
-    disabled,
-    handlePickerIconKeyDown,
-    handleSetTriggerRef,
-    handleToggleCalendarWithTimeWheel
-  ]);
+  return useMemo(
+    () => /* @__PURE__ */ jsx(StyledIconTriggerButton, {
+      "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+      buttonType: "icon",
+      type: "button",
+      size: BUTTON_SIZES.M,
+      innerRef: handleSetTriggerRef,
+      onClick: handleToggleCalendarWithTimeWheel,
+      onKeyDown: handlePickerIconKeyDown,
+      "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+      disabled,
+      children: /* @__PURE__ */ jsx(DatePicker, {})
+    }),
+    [
+      ariaCurrentValueForInputs,
+      disabled,
+      handlePickerIconKeyDown,
+      handleSetTriggerRef,
+      handleToggleCalendarWithTimeWheel
+    ]
+  );
 };
 export {
   CalendarWithTimeWheelIconTrigger

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { StyledIconTriggerButton } from './Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAKO,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,4BAA4B;AAC3C,SAAO,QACL,MACE,qCAAC;AAAA,IACC,cAAY,0CAA0C;AAAA,IACtD,YAAW;AAAA,IACX,MAAK;AAAA,IACL,MAAM,aAAa;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,qCAAC,gBAAW,CACd,GAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,cAAY,0CAA0C;AAAA,MACtD,YAAW;AAAA,MACX,MAAK;AAAA,MACL,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAa,mCAAmC,aAAa;AAAA,MAC7D;AAAA,MAEA,8BAAC,cAAW;AAAA,KACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent";
@@ -7,14 +8,15 @@ import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);
   if (isControllerOnly)
-    return /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null);
-  return /* @__PURE__ */ React2.createElement(DSPopperJS, {
+    return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
+  return /* @__PURE__ */ jsx(DSPopperJS, {
     showPopover: true,
     "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
     referenceElement,
     withoutArrow: true,
-    onClickOutside: closeCalendar
-  }, /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null));
+    onClickOutside: closeCalendar,
+    children: /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {})
+  });
 };
 export {
   CalendarWithTimeWheelWrapper

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n\n  return (\n    <DSPopperJS\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n    >\n      <CalendarWithTimeWheelContent />\n    </DSPopperJS>\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,qBAAqB,WAAW,4BAA4B;AACrG,MAAI;AAAkB,WAAO,qCAAC,kCAA6B;AAE3D,SACE,qCAAC;AAAA,IACC,aAAW;AAAA,IACX,eAAa,mCAAmC,gBAAgB;AAAA,IAChE;AAAA,IACA,cAAY;AAAA,IACZ,gBAAgB;AAAA,KAEhB,qCAAC,kCAA6B,CAChC;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAEtC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,MAAI;AAAkB,WAAO,oBAAC,gCAA6B;AAE3D,SACE,oBAAC;AAAA,IACC,aAAW;AAAA,IACX,eAAa,mCAAmC,gBAAgB;AAAA,IAChE;AAAA,IACA,cAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,8BAAC,gCAA6B;AAAA,GAChC;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  grid-column: 1/3;\n  background-color: white;\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,OAAO;AAAA,gBACzC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAOvB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,gCAAgC,uCAAuC;AAEzE,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,OAAO;AAAA,gBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAOvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -24,21 +24,24 @@ const useConfigCalendarWithTimeWheelCTX = () => {
   const onHomeKeyDown = useCallback(() => {
     trackFocusFirstSegment();
   }, [trackFocusFirstSegment]);
-  const handlePickerIconKeyDown = useCallback((e) => {
-    const { key } = e;
-    if (["Home", "End"].includes(key))
-      e.preventDefault();
-    if (["Home", "End"].includes(key))
-      e.stopPropagation();
-    if (key === "Home")
-      onHomeKeyDown();
-    if (key === "Backspace" && withAnyInputs) {
-      if (isWithTimeInputs)
-        trackFocusMeridiemInput();
-      else
-        trackFocusYearInput();
-    }
-  }, [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
+  const handlePickerIconKeyDown = useCallback(
+    (e) => {
+      const { key } = e;
+      if (["Home", "End"].includes(key))
+        e.preventDefault();
+      if (["Home", "End"].includes(key))
+        e.stopPropagation();
+      if (key === "Home")
+        onHomeKeyDown();
+      if (key === "Backspace" && withAnyInputs) {
+        if (isWithTimeInputs)
+          trackFocusMeridiemInput();
+        else
+          trackFocusYearInput();
+      }
+    },
+    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]
+  );
   const [referenceElement, setReferenceElement] = useState(null);
   const openCalendar = useCallback(() => {
     setShowCalendarWithTimeWheel(true);
@@ -58,43 +61,52 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     else
       closeCalendar();
   }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
-  const handleSetTriggerRef = useCallback((newRef) => {
-    pickerButtonRef.current = newRef;
-    setReferenceElement(newRef);
-    if (latestInteractionRegion === "picker-icon" && currFocusDescriber === "datetime-picker-icon")
-      newRef?.focus();
-  }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
-  const handleMenuWrapperKeyDown = useCallback((e) => {
-    const { key } = e;
-    if (key === "Escape") {
-      closeCalendar();
-      trackFocusPicker();
-    }
-  }, [closeCalendar, trackFocusPicker]);
+  const handleSetTriggerRef = useCallback(
+    (newRef) => {
+      pickerButtonRef.current = newRef;
+      setReferenceElement(newRef);
+      if (latestInteractionRegion === "picker-icon" && currFocusDescriber === "datetime-picker-icon")
+        newRef?.focus();
+    },
+    [currFocusDescriber, latestInteractionRegion, pickerButtonRef]
+  );
+  const handleMenuWrapperKeyDown = useCallback(
+    (e) => {
+      const { key } = e;
+      if (key === "Escape") {
+        closeCalendar();
+        trackFocusPicker();
+      }
+    },
+    [closeCalendar, trackFocusPicker]
+  );
   const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
-  return useMemo(() => ({
-    referenceElement,
-    showCalendarWithTimeWheel,
-    closeCalendar,
-    handleToggleCalendarWithTimeWheel,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    handlePickerIconKeyDown,
-    isControllerOnly,
-    disabled,
-    ariaCurrentValueForInputs
-  }), [
-    referenceElement,
-    showCalendarWithTimeWheel,
-    closeCalendar,
-    handleToggleCalendarWithTimeWheel,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    handlePickerIconKeyDown,
-    isControllerOnly,
-    disabled,
-    ariaCurrentValueForInputs
-  ]);
+  return useMemo(
+    () => ({
+      referenceElement,
+      showCalendarWithTimeWheel,
+      closeCalendar,
+      handleToggleCalendarWithTimeWheel,
+      handleSetTriggerRef,
+      handleMenuWrapperKeyDown,
+      handlePickerIconKeyDown,
+      isControllerOnly,
+      disabled,
+      ariaCurrentValueForInputs
+    }),
+    [
+      referenceElement,
+      showCalendarWithTimeWheel,
+      closeCalendar,
+      handleToggleCalendarWithTimeWheel,
+      handleSetTriggerRef,
+      handleMenuWrapperKeyDown,
+      handlePickerIconKeyDown,
+      isControllerOnly,
+      disabled,
+      ariaCurrentValueForInputs
+    ]
+  );
 };
 export {
   useConfigCalendarWithTimeWheelCTX

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useMemo, useState, useCallback, useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from '../Calendar/CalendarContext';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAcO,MAAM,oCAAoC,MAAqC;AACpF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,MAAM,cAAc,eAAe;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,+BAA+B;AAC9C,QAAM,EAAE,yBAAyB,WAAW,eAAe;AAC3D,QAAM,EAAE,2BAA2B,WAAW,gBAAgB;AAC9D,QAAM,CAAC,2BAA2B,gCAAgC,SAAS,KAAK;AAChF,QAAM,gBAAgB,YAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,0BAA6F,YACjG,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,QAAI,CAAC,QAAQ,KAAK,EAAE,SAAS,GAAG;AAAG,QAAE,eAAe;AACpD,QAAI,CAAC,QAAQ,KAAK,EAAE,SAAS,GAAG;AAAG,QAAE,gBAAgB;AACrD,QAAI,QAAQ;AAAQ,oBAAc;AAClC,QAAI,QAAQ,eAAe,eAAe;AACxC,UAAI;AAAkB,gCAAwB;AAAA;AACzC,4BAAoB;AAAA,IAC3B;AAAA,EACF,GACA,CAAC,kBAAkB,eAAe,yBAAyB,qBAAqB,aAAa,CAC/F;AACA,QAAM,CAAC,kBAAkB,uBAAuB,SAAmC,IAAI;AACvF,QAAM,eAAe,YAAY,MAAM;AACrC,iCAA6B,IAAI;AACjC,iBAAa;AACb,eAAW,MAAM,qBAAqB,CAAC;AACvC,eAAW,MAAM,uBAAuB,CAAC;AAAA,EAC3C,GAAG,CAAC,sBAAsB,wBAAwB,YAAY,CAAC;AAC/D,QAAM,gBAAgB,YAAY,MAAM;AACtC,iCAA6B,KAAK;AAClC,kBAAc;AACd,eAAW,MAAM,qBAAqB,CAAC;AACvC,eAAW,MAAM,uBAAuB,CAAC;AAAA,EAC3C,GAAG,CAAC,sBAAsB,wBAAwB,aAAa,CAAC;AAEhE,QAAM,oCAAoC,YAAY,MAAM;AAC1D,QAAI,CAAC;AAA2B,mBAAa;AAAA;AACxC,oBAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,yBAAyB,CAAC;AAE3D,QAAM,sBAAsB,YAC1B,CAAC,WAA8B;AAC7B,oBAAgB,UAAU;AAC1B,wBAAoB,MAAM;AAC1B,QAAI,4BAA4B,iBAAiB,uBAAuB;AAAwB,cAAQ,MAAM;AAAA,EAChH,GACA,CAAC,oBAAoB,yBAAyB,eAAe,CAC/D;AACA,QAAM,2BAA2B,YAC/B,CAAC,MAAwC;AACvC,UAAM,EAAE,QAAQ;AAChB,QAAI,QAAQ,UAAU;AACpB,oBAAc;AACd,uBAAiB;AAAA,IACnB;AAAA,EACF,GACA,CAAC,eAAe,gBAAgB,CAClC;AAEA,QAAM,mBAAmB,QAAQ,MAAM,SAAS,kCAAkC,UAAU,iBAAiB,CAAC,IAAI,CAAC;AAEnH,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/PickersIcons.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
 import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
 import { StyledPickersIconsWrapperGrid } from "../Styleds";
@@ -13,10 +14,15 @@ const PickersIcons = () => {
     isControllerOnly,
     props: { hasError }
   } = React2.useContext(ControlledDateTimePickerContext);
-  return /* @__PURE__ */ React2.createElement(StyledPickersIconsWrapperGrid, {
+  return /* @__PURE__ */ jsxs(StyledPickersIconsWrapperGrid, {
     hasError,
-    isControllerOnly
-  }, !hideDatePicker && hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ React2.createElement(Calendar, null) : null, hideDatePicker && !hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ React2.createElement(TimeWheel, null) : null, hideDatePicker && hideTimePicker && !hideDateTimePicker ? /* @__PURE__ */ React2.createElement(CalendarWithTimeWheel, null) : null);
+    isControllerOnly,
+    children: [
+      !hideDatePicker && hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ jsx(Calendar, {}) : null,
+      hideDatePicker && !hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ jsx(TimeWheel, {}) : null,
+      hideDatePicker && hideTimePicker && !hideDateTimePicker ? /* @__PURE__ */ jsx(CalendarWithTimeWheel, {}) : null
+    ]
+  });
 };
 export {
   PickersIcons

package/dist/esm/parts/Pickers/PickersIcons.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Pickers/PickersIcons.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel';\nimport { Calendar } from './Calendar/Calendar';\nimport { TimeWheel } from './TimeWheel/TimeWheel';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE;AAAA,MACP,OAAM,WAAW,+BAA+B;AAEpD,SACE,qCAAC;AAAA,IAA8B;AAAA,IAAoB;AAAA,KAChD,CAAC,kBAAkB,kBAAkB,qBAAqB,qCAAC,cAAS,IAAK,MACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,qCAAC,eAAU,IAAK,MAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,qCAAC,2BAAsB,IAAK,IACzF;AAEJ;",
-  "names": []
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,YAAW;AAClB,SAAS,uCAAuC;AAChD,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAIA,OAAM,WAAW,+BAA+B;AAEpD,SACE,qBAAC;AAAA,IAA8B;AAAA,IAAoB;AAAA,IAChD;AAAA,OAAC,kBAAkB,kBAAkB,qBAAqB,oBAAC,YAAS,IAAK;AAAA,MACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,oBAAC,aAAU,IAAK;AAAA,MAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,oBAAC,yBAAsB,IAAK;AAAA;AAAA,GACzF;AAEJ;",
+  "names": ["React"]
 }