@elliemae/ds-controlled-form 3.0.0-next.1 → 3.0.0-next.10

package/dist/esm/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { useMemo, useCallback, useState, useContext } from "react";
+import { usePopper } from "react-popper";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { useOnClickOutside } from "../../../utils/hooks/useOnClickOutside";
+const usePopperTriggerLogic = ({
+  focusedDay,
+  resetFocusedDayToStartDate,
+  showCalendar,
+  setShowCalendar,
+  tryToFocusCurrentlyDataIsFocusedDay
+}) => {
+  const {
+    props: { onPickerOpen, onPickerClose },
+    prevMonthBtnRef,
+    pickerButtonRef
+  } = useContext(ControlledDateTimePickerContext);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }]
+  });
+  const handleOnPickerOpen = useCallback(() => {
+    onPickerOpen();
+    tryToFocusCurrentlyDataIsFocusedDay();
+  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  const openCalendar = useCallback(() => {
+    if (focusedDay)
+      setTimeout(() => focusedDay?.dayBtnRef?.current?.focus?.(), 100);
+    else
+      setTimeout(() => prevMonthBtnRef?.current?.focus?.(), 100);
+    setShowCalendar(true);
+    handleOnPickerOpen();
+  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  const closeCalendar = useCallback(() => {
+    setShowCalendar(false);
+    onPickerClose();
+    resetFocusedDayToStartDate();
+    pickerButtonRef?.current?.focus?.();
+  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
+  const handleToggleCalendar = useCallback(() => {
+    const isOpening = !showCalendar;
+    if (isOpening)
+      openCalendar();
+    else
+      closeCalendar();
+  }, [closeCalendar, openCalendar, showCalendar]);
+  const handleSetTriggerRef = useCallback((newRef) => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = useCallback((e) => {
+    const { key } = e;
+    if (key === "Escape") {
+      closeCalendar();
+      pickerButtonRef?.current?.focus?.();
+    }
+  }, [closeCalendar, pickerButtonRef]);
+  useOnClickOutside(popperElement, (e) => {
+    if (!pickerButtonRef?.current?.contains?.(e?.target))
+      closeCalendar();
+  });
+  return useMemo(() => ({
+    closeCalendar,
+    handleSetTriggerRef,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendar,
+    handleMenuWrapperKeyDown
+  }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
+};
+export {
+  usePopperTriggerLogic
+};
+//# sourceMappingURL=usePopperTriggerLogic.js.map

package/dist/esm/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/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 { usePopper } from 'react-popper';\n\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside';\nimport type { metaMonthDayT } from '../../../index.d';\nimport type { PopperTriggerLogicT } from './CalendarContext';\n\ninterface usePopperTriggerLogicT {\n  tryToFocusCurrentlyDataIsFocusedDay: () => void;\n  resetFocusedDayToStartDate: () => void;\n  focusedDay: metaMonthDayT;\n  showCalendar: boolean;\n  setShowCalendar: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport const usePopperTriggerLogic = ({\n  focusedDay,\n  resetFocusedDayToStartDate,\n  showCalendar,\n  setShowCalendar,\n  tryToFocusCurrentlyDataIsFocusedDay,\n}: usePopperTriggerLogicT): PopperTriggerLogicT => {\n  const {\n    props: { onPickerOpen, onPickerClose },\n    prevMonthBtnRef,\n    pickerButtonRef,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const usePopperHelpers = usePopper(referenceElement, popperElement, {\n    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],\n  });\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n    tryToFocusCurrentlyDataIsFocusedDay();\n  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);\n  const openCalendar = useCallback(() => {\n    if (focusedDay) setTimeout(() => focusedDay?.dayBtnRef?.current?.focus?.(), 100);\n    else setTimeout(() => prevMonthBtnRef?.current?.focus?.(), 100);\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    pickerButtonRef?.current?.focus?.();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);\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) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n    },\n    [pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        pickerButtonRef?.current?.focus?.();\n      }\n    },\n    [closeCalendar, pickerButtonRef],\n  );\n  useOnClickOutside(popperElement, (e) => {\n    if (!pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();\n  });\n\n  return useMemo(\n    () => ({\n      closeCalendar,\n      handleSetTriggerRef,\n      setPopperElement,\n      setArrowElement,\n      usePopperHelpers,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers],\n  );\n};\n"],
+  "mappings": "AAAA;ACGA;AACA;AAEA;AACA;AAWO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiD;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc;AAAA,IACvB;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,CAAC,kBAAkB,uBAAuB,SAAS;AACzD,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,mBAAmB,UAAU,kBAAkB,eAAe;AAAA,IAClE,WAAW,CAAC,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS;AAAA;AAGnD,QAAM,qBAAqB,YAAY,MAAM;AAC3C;AACA;AAAA,KACC,CAAC,cAAc;AAClB,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI;AAAY,iBAAW,MAAM,YAAY,WAAW,SAAS,WAAW;AAAA;AACvE,iBAAW,MAAM,iBAAiB,SAAS,WAAW;AAC3D,oBAAgB;AAChB;AAAA,KACC,CAAC,YAAY,oBAAoB,iBAAiB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB;AAChB;AACA;AACA,qBAAiB,SAAS;AAAA,KACzB,CAAC,iBAAiB,eAAe,4BAA4B;AAEhE,QAAM,uBAAuB,YAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI;AAAW;AAAA;AACV;AAAA,KACJ,CAAC,eAAe,cAAc;AAEjC,QAAM,sBAAsB,YAC1B,CAAC,WAAW;AACV,oBAAgB,UAAU;AAC1B,wBAAoB;AAAA,KAEtB,CAAC;AAEH,QAAM,2BAA2B,YAC/B,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,QAAI,QAAQ,UAAU;AACpB;AACA,uBAAiB,SAAS;AAAA;AAAA,KAG9B,CAAC,eAAe;AAElB,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,iBAAiB,SAAS,WAAW,GAAG;AAAS;AAAA;AAGxD,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import React2 from "react";
+import { CalendarWithTimeWheelIconTrigger } from "./CalendarWithTimeWheelIconTrigger";
+import { CalendarWithTimeWheelWrapper } from "./CalendarWithTimeWheelWrapper";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+import { useConfigCalendarWithTimeWheelCTX } from "./useConfigCalendarWithTimeWheelCTX";
+import { WrapWithCalendarContext } from "../Calendar/Calendar";
+import { WrapWithTimeWheelContext } from "../TimeWheel/TimeWheel";
+const CalendarWithTimeWheel = WrapWithCalendarContext(WrapWithTimeWheelContext(() => {
+  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);
+}));
+export {
+  CalendarWithTimeWheel
+};
+//# sourceMappingURL=CalendarWithTimeWheel.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/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 { WrapWithCalendarContext } from '../Calendar/Calendar';\nimport { WrapWithTimeWheelContext } from '../TimeWheel/TimeWheel';\n\n// we must use the HoC for wrapping the context\n// or else useConfigCalendarWithTimeWheelCTX won't have access to the context functions\nexport const CalendarWithTimeWheel = WrapWithCalendarContext(\n  WrapWithTimeWheelContext((): JSX.Element => {\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"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAIO,MAAM,wBAAwB,wBACnC,yBAAyB,MAAmB;AAC1C,QAAM,MAAM;AACZ,QAAM,EAAE,2BAA2B,kBAAkB,6BAA6B;AAElF,SACE,qCAAC,6BAA6B,UAA9B;AAAA,IAAuC,OAAO;AAAA,KAC3C,mBAAmB,OAAO,qCAAC,kCAAD,OAC1B,oBAAoB,4BACnB,4DAIE,qCAAC,OAAD;AAAA,IAAK,WAAW;AAAA,KACd,qCAAC,8BAAD,UAGF;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from "./Styleds";
+import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter";
+import { TimeWheelContent } from "../TimeWheel/TimeWheelContent";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+const CalendarWithTimeWheelContent = () => {
+  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);
+  return /* @__PURE__ */ React2.createElement(StyledCalendarWithTimeWheelWrapper, {
+    isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
+  }, /* @__PURE__ */ React2.createElement(StyledCalendar, null), /* @__PURE__ */ React2.createElement(TimeWheelContent, null), /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooter, null));
+};
+export {
+  CalendarWithTimeWheelContent
+};
+//# sourceMappingURL=CalendarWithTimeWheelContent.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/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;AACxC,SACE,qCAAC,oCAAD;AAAA,IACE;AAAA,IACA,eAAa,mCAAmC,qBAAqB;AAAA,KAErE,qCAAC,gBAAD,OACA,qCAAC,kBAAD,OACA,qCAAC,6BAAD;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { createContext } from "react";
+const noop = () => {
+};
+const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: "",
+  showCalendarWithTimeWheel: false,
+  setPopperElement: noop,
+  setArrowElement: noop,
+  usePopperHelpers: null,
+  handleSetTriggerRef: noop,
+  handleToggleCalendarWithTimeWheel: noop,
+  handleMenuWrapperKeyDown: noop,
+  handlePickerIconKeyDown: noop,
+  isControllerOnly: false,
+  disabled: false
+};
+const CalendarWithTimeWheelContext = createContext(defaultCalendarWithTimeWheelContext);
+var CalendarWithTimeWheelContext_default = CalendarWithTimeWheelContext;
+export {
+  CalendarWithTimeWheelContext,
+  CalendarWithTimeWheelContext_default as default,
+  defaultCalendarWithTimeWheelContext
+};
+//# sourceMappingURL=CalendarWithTimeWheelContext.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\n\nexport interface CalendarWithTimeWheelContextT {\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  setPopperElement: (instance: HTMLDivElement) => void;\n  setArrowElement: (instance: HTMLDivElement) => void;\n  usePopperHelpers: {\n    attributes: Record<string, unknown>;\n    styles: Record<string, React.CSSProperties>;\n  };\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}\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nexport const defaultCalendarWithTimeWheelContext: CalendarWithTimeWheelContextT = {\n  ariaCurrentValueForInputs: '',\n  showCalendarWithTimeWheel: false,\n  setPopperElement: noop,\n  setArrowElement: noop,\n  usePopperHelpers: null,\n  handleSetTriggerRef: noop,\n  handleToggleCalendarWithTimeWheel: noop,\n  handleMenuWrapperKeyDown: noop,\n  handlePickerIconKeyDown: noop,\n  isControllerOnly: false,\n  disabled: false,\n};\n\n/** Context for cross component communication */\nexport const CalendarWithTimeWheelContext = createContext(defaultCalendarWithTimeWheelContext);\n\nexport default CalendarWithTimeWheelContext;\n"],
+  "mappings": "AAAA;ACAA;AAmBA,MAAM,OAAO,MAAY;AAAA;AAClB,MAAM,sCAAqE;AAAA,EAChF,2BAA2B;AAAA,EAC3B,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,mCAAmC;AAAA,EACnC,0BAA0B;AAAA,EAC1B,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,UAAU;AAAA;AAIL,MAAM,+BAA+B,cAAc;AAE1D,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { CalendarWithTimeWheelFooterMessage } from "./Styleds";
+const CalendarWithTimeWheelFooter = () => {
+  const {
+    props: { pickerFooterMsg, hasError }
+  } = useContext(ControlledDateTimePickerContext);
+  return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelFooterMessage, {
+    role: "alert"
+  }, pickerFooterMsg) : null;
+};
+export {
+  CalendarWithTimeWheelFooter
+};
+//# sourceMappingURL=CalendarWithTimeWheelFooter.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter = (): JSX.Element => {\n  const {\n    props: { pickerFooterMsg, hasError },\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage role=\"alert\">{pickerFooterMsg}</CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,8BAA8B,MAAmB;AAC5D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,MACxB,WAAW;AACf,SAAO,oBAAoB,UAAa,WACtC,qCAAC,oCAAD;AAAA,IAAoC,MAAK;AAAA,KAAS,mBAChD;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import React2, { useContext, useMemo } from "react";
+import { BUTTON_VARIANT, BUTTON_SIZES } from "@elliemae/ds-button";
+import { DatePicker } from "@elliemae/ds-icons";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+import { StyledIconTriggerButton } from "./Styleds";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+const CalendarWithTimeWheelIconTrigger = () => {
+  const {
+    handleSetTriggerRef,
+    handleToggleCalendarWithTimeWheel,
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
+  } = useContext(CalendarWithTimeWheelContext);
+  return useMemo(() => /* @__PURE__ */ React2.createElement(StyledIconTriggerButton, {
+    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    variant: BUTTON_VARIANT.DEFAULT,
+    innerRef: handleSetTriggerRef,
+    onClick: handleToggleCalendarWithTimeWheel,
+    onKeyDown: handlePickerIconKeyDown,
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+    disabled
+  }, /* @__PURE__ */ React2.createElement(DatePicker, null)), [
+    ariaCurrentValueForInputs,
+    disabled,
+    handlePickerIconKeyDown,
+    handleSetTriggerRef,
+    handleToggleCalendarWithTimeWheel
+  ]);
+};
+export {
+  CalendarWithTimeWheelIconTrigger
+};
+//# sourceMappingURL=CalendarWithTimeWheelIconTrigger.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_VARIANT, 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        size={BUTTON_SIZES.M}\n        variant={BUTTON_VARIANT.DEFAULT}\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;AACf,SAAO,QACL,MACE,qCAAC,yBAAD;AAAA,IACE,cAAY,0CAA0C;AAAA,IACtD,YAAW;AAAA,IACX,MAAM,aAAa;AAAA,IACnB,SAAS,eAAe;AAAA,IACxB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAa,mCAAmC,aAAa;AAAA,IAC7D;AAAA,KAEA,qCAAC,YAAD,QAGJ;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
+import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+const CalendarWithTimeWheelWrapper = () => {
+  const {
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers: { attributes, styles },
+    isControllerOnly
+  } = useContext(CalendarWithTimeWheelContext);
+  if (isControllerOnly)
+    return /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null);
+  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
+    ref: setPopperElement,
+    style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
+  }, attributes.popper), {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
+  }), /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null), /* @__PURE__ */ React2.createElement("div", {
+    ref: setArrowElement,
+    style: styles.arrow
+  }));
+};
+export {
+  CalendarWithTimeWheelWrapper
+};
+//# sourceMappingURL=CalendarWithTimeWheelWrapper.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const {\n    setPopperElement,\n    setArrowElement,\n    usePopperHelpers: { attributes, styles },\n    isControllerOnly,\n  } = useContext(CalendarWithTimeWheelContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  return (\n    <div\n      ref={setPopperElement}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n    >\n      <CalendarWithTimeWheelContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,IAChC;AAAA,MACE,WAAW;AACf,MAAI;AAAkB,WAAO,qCAAC,8BAAD;AAC7B,SACE,qCAAC,OAAD;AAAA,IACE,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ;AAAA,KACpD,WAAW,SAHjB;AAAA,IAIE,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,8BAAD,OACA,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import styled from "styled-components";
+import { DSButtonV2 } from "@elliemae/ds-button";
+import { CalendarContent } from "../Calendar/CalendarContent";
+const StyledIconTriggerButton = styled(DSButtonV2)`
+  color: ${({ theme }) => theme.colors.brand["600"]};
+  width: 26px;
+  height: 26px;
+`;
+const StyledCalendarWithTimeWheelWrapper = styled.div`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  ${({ isControllerOnly }) => isControllerOnly ? void 0 : "box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);"}
+  display: grid;
+  grid-template-columns: 260px 192px;
+  grid-template-rows: 1fr;
+  column-gap: 0;
+
+  & > div:last-of-type {
+    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};
+    margin-left: 1px;
+  }
+`;
+const StyledCalendar = styled(CalendarContent)`
+  box-shadow: none;
+`;
+const CalendarWithTimeWheelFooterMessage = styled.footer`
+  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
+  margin: 0 ${({ theme }) => theme.space.xxs2};
+  padding: ${({ theme }) => theme.space.xxs2} 0;
+  color: ${({ theme }) => theme.colors.danger[900]};
+  font-style: italic;
+  font-weight: ${({ theme }) => theme.fontWeights.thin};
+  font-size: ${({ theme }) => theme.fontSizes.microText[200]};
+  text-align: right;
+  grid-column: 1/3;
+`;
+export {
+  CalendarWithTimeWheelFooterMessage,
+  StyledCalendar,
+  StyledCalendarWithTimeWheelWrapper,
+  StyledIconTriggerButton
+};
+//# sourceMappingURL=Styleds.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2)`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div<{ isControllerOnly: boolean }>`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  ${({ isControllerOnly }) =>\n    isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);'}\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    margin-left: 1px;\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled.footer`\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`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,0BAA0B,OAAO;AAAA,WACnC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,OAAO;AAAA,gBACzC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,IAChD,CAAC,EAAE,uBACH,mBAAmB,SAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAON,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAK1D,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,qCAAqC,OAAO;AAAA,0BAC/B,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;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { useMemo, useState, useCallback, useContext } from "react";
+import { usePopper } from "react-popper";
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "../../../ControlledDateTimePickerTypes";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
+import { useOnClickOutside } from "../../../utils/hooks/useOnClickOutside";
+import { CalendarContext } from "../Calendar/CalendarContext";
+import { TimeWheelContext } from "../TimeWheel/TimeWheelContext";
+import { homeEndKeys } from "../../../utils/constants";
+const useConfigCalendarWithTimeWheelCTX = () => {
+  const {
+    pickerButtonRef,
+    props: { type, onPickerOpen, onPickerClose, disabled },
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    yearInputRef,
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
+  const { handleToggleCalendar } = useContext(CalendarContext);
+  const { handleToggleTimePicker } = useContext(TimeWheelContext);
+  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);
+  const onHomeKeyDown = useCallback(() => {
+    if (!hideDate)
+      monthInputRef?.current?.focus?.();
+    else if (!hideTime)
+      hourInputRef?.current?.focus?.();
+  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+  const handlePickerIconKeyDown = useCallback((e) => {
+    const { key } = e;
+    if (homeEndKeys.includes(key))
+      e.preventDefault();
+    if (homeEndKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "Backspace" && withAnyInputs) {
+      if (isWithTimeInputs)
+        meridiemInputRef?.current?.focus?.();
+      else
+        yearInputRef?.current?.focus?.();
+    }
+  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }]
+  });
+  const openCalendar = useCallback((e) => {
+    setShowCalendarWithTimeWheel(true);
+    onPickerOpen();
+    setTimeout(() => handleToggleCalendar(e));
+    setTimeout(() => handleToggleTimePicker(e));
+  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);
+  const closeCalendar = useCallback((e) => {
+    setShowCalendarWithTimeWheel(false);
+    onPickerClose();
+    setTimeout(() => handleToggleCalendar(e));
+    setTimeout(() => handleToggleTimePicker(e));
+  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);
+  const handleToggleCalendarWithTimeWheel = useCallback((e) => {
+    if (!showCalendarWithTimeWheel)
+      openCalendar(e);
+    else
+      closeCalendar(e);
+  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
+  useOnClickOutside(popperElement, (e) => {
+    if (!pickerButtonRef?.current?.contains?.(e?.target))
+      closeCalendar(e);
+  });
+  const handleSetTriggerRef = useCallback((newRef) => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = useCallback((e) => {
+    const { key } = e;
+    if (key === "Escape") {
+      closeCalendar(e);
+      pickerButtonRef?.current?.focus?.();
+    }
+  }, [closeCalendar, pickerButtonRef]);
+  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
+  return useMemo(() => ({
+    showCalendarWithTimeWheel,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendarWithTimeWheel,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown,
+    handlePickerIconKeyDown,
+    isControllerOnly,
+    disabled,
+    ariaCurrentValueForInputs
+  }), [
+    showCalendarWithTimeWheel,
+    usePopperHelpers,
+    handleToggleCalendarWithTimeWheel,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown,
+    handlePickerIconKeyDown,
+    isControllerOnly,
+    disabled,
+    ariaCurrentValueForInputs
+  ]);
+};
+export {
+  useConfigCalendarWithTimeWheelCTX
+};
+//# sourceMappingURL=useConfigCalendarWithTimeWheelCTX.js.map

package/dist/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useState, useCallback, useContext } from 'react';\nimport { usePopper } from 'react-popper';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside';\nimport type { onKeyDownT } from '../../../index.d';\nimport { CalendarContext } from '../Calendar/CalendarContext';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext';\nimport type { CalendarWithTimeWheelContextT } from './CalendarWithTimeWheelContext';\nimport { homeEndKeys } from '../../../utils/constants';\n\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled },\n    hideDate,\n    hideTime,\n    monthInputRef,\n    hourInputRef,\n    withAnyInputs,\n    isWithTimeInputs,\n    meridiemInputRef,\n    yearInputRef,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    if (!hideDate) monthInputRef?.current?.focus?.();\n    else if (!hideTime) hourInputRef?.current?.focus?.();\n  }, [hideDate, hideTime, monthInputRef, hourInputRef]);\n  const handlePickerIconKeyDown: onKeyDownT<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (homeEndKeys.includes(key)) e.preventDefault();\n      if (homeEndKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) meridiemInputRef?.current?.focus?.();\n        else yearInputRef?.current?.focus?.();\n      }\n    },\n    [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef],\n  );\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const usePopperHelpers = usePopper(referenceElement, popperElement, {\n    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],\n  });\n  const openCalendar = useCallback(\n    (e) => {\n      setShowCalendarWithTimeWheel(true);\n      onPickerOpen();\n      setTimeout(() => handleToggleCalendar(e));\n      setTimeout(() => handleToggleTimePicker(e));\n    },\n    [handleToggleCalendar, handleToggleTimePicker, onPickerOpen],\n  );\n  const closeCalendar = useCallback(\n    (e) => {\n      setShowCalendarWithTimeWheel(false);\n      onPickerClose();\n      setTimeout(() => handleToggleCalendar(e));\n      setTimeout(() => handleToggleTimePicker(e));\n    },\n    [handleToggleCalendar, handleToggleTimePicker, onPickerClose],\n  );\n\n  const handleToggleCalendarWithTimeWheel = useCallback(\n    (e) => {\n      if (!showCalendarWithTimeWheel) openCalendar(e);\n      else closeCalendar(e);\n    },\n    [closeCalendar, openCalendar, showCalendarWithTimeWheel],\n  );\n\n  useOnClickOutside(popperElement, (e) => {\n    if (!pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar(e);\n  });\n\n  const handleSetTriggerRef = useCallback(\n    (newRef) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n    },\n    [pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar(e);\n        pickerButtonRef?.current?.focus?.();\n      }\n    },\n    [closeCalendar, pickerButtonRef],\n  );\n\n  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      showCalendarWithTimeWheel,\n      setPopperElement,\n      setArrowElement,\n      usePopperHelpers,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      showCalendarWithTimeWheel,\n      usePopperHelpers,\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;AAEA;AACA;AAEA;AAEO,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;AACf,QAAM,EAAE,yBAAyB,WAAW;AAC5C,QAAM,EAAE,2BAA2B,WAAW;AAC9C,QAAM,CAAC,2BAA2B,gCAAgC,SAAS;AAC3E,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,CAAC;AAAU,qBAAe,SAAS;AAAA,aAC9B,CAAC;AAAU,oBAAc,SAAS;AAAA,KAC1C,CAAC,UAAU,UAAU,eAAe;AACvC,QAAM,0BAAyD,YAC7D,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,QAAI,YAAY,SAAS;AAAM,QAAE;AACjC,QAAI,YAAY,SAAS;AAAM,QAAE;AACjC,QAAI,QAAQ;AAAQ;AACpB,QAAI,QAAQ,eAAe,eAAe;AACxC,UAAI;AAAkB,0BAAkB,SAAS;AAAA;AAC5C,sBAAc,SAAS;AAAA;AAAA,KAGhC,CAAC,kBAAkB,kBAAkB,eAAe,eAAe;AAErE,QAAM,CAAC,kBAAkB,uBAAuB,SAAS;AACzD,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,mBAAmB,UAAU,kBAAkB,eAAe;AAAA,IAClE,WAAW,CAAC,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS;AAAA;AAEnD,QAAM,eAAe,YACnB,CAAC,MAAM;AACL,iCAA6B;AAC7B;AACA,eAAW,MAAM,qBAAqB;AACtC,eAAW,MAAM,uBAAuB;AAAA,KAE1C,CAAC,sBAAsB,wBAAwB;AAEjD,QAAM,gBAAgB,YACpB,CAAC,MAAM;AACL,iCAA6B;AAC7B;AACA,eAAW,MAAM,qBAAqB;AACtC,eAAW,MAAM,uBAAuB;AAAA,KAE1C,CAAC,sBAAsB,wBAAwB;AAGjD,QAAM,oCAAoC,YACxC,CAAC,MAAM;AACL,QAAI,CAAC;AAA2B,mBAAa;AAAA;AACxC,oBAAc;AAAA,KAErB,CAAC,eAAe,cAAc;AAGhC,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,iBAAiB,SAAS,WAAW,GAAG;AAAS,oBAAc;AAAA;AAGtE,QAAM,sBAAsB,YAC1B,CAAC,WAAW;AACV,oBAAgB,UAAU;AAC1B,wBAAoB;AAAA,KAEtB,CAAC;AAEH,QAAM,2BAA2B,YAC/B,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,QAAI,QAAQ,UAAU;AACpB,oBAAc;AACd,uBAAiB,SAAS;AAAA;AAAA,KAG9B,CAAC,eAAe;AAGlB,QAAM,mBAAmB,QAAQ,MAAM,SAAS,kCAAkC,UAAU,iBAAiB,CAAC;AAE9G,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/date-time-picker/parts/Pickers/PickersIcons.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2 from "react";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import { StyledPickersIconsWrapperGrid } from "../Styleds";
+import { CalendarWithTimeWheel } from "./CalendarWithTimeWheel/CalendarWithTimeWheel";
+import { Calendar } from "./Calendar/Calendar";
+import { TimeWheel } from "./TimeWheel/TimeWheel";
+const PickersIcons = () => {
+  const {
+    hideDatePicker,
+    hideTimePicker,
+    hideDateTimePicker,
+    isControllerOnly,
+    props: { hasError }
+  } = React2.useContext(ControlledDateTimePickerContext);
+  return /* @__PURE__ */ React2.createElement(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);
+};
+export {
+  PickersIcons
+};
+//# sourceMappingURL=PickersIcons.js.map

package/dist/esm/date-time-picker/parts/Pickers/PickersIcons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/date-time-picker/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;AAErB,SACE,qCAAC,+BAAD;AAAA,IAA+B;AAAA,IAAoB;AAAA,KAChD,CAAC,kBAAkB,kBAAkB,qBAAqB,qCAAC,UAAD,QAAe,MACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,qCAAC,WAAD,QAAgB,MAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,qCAAC,uBAAD,QAA4B;AAAA;",
+  "names": []
+}