@elliemae/ds-form-date-time-picker 3.0.0-next.76 → 3.0.0-next.79

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

@@ -42,6 +42,7 @@ __export(CalendarWrapper_exports, {
 module.exports = __toCommonJS(CalendarWrapper_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
 var import_CalendarContent = require("./CalendarContent");
@@ -55,7 +56,7 @@ const CalendarWrapper = () => {
   } = (0, import_react.useContext)(import_CalendarContext.CalendarContext);
   if (isControllerOnly)
     return /* @__PURE__ */ import_react.default.createElement(import_CalendarContent.CalendarContent, null);
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -63,6 +64,6 @@ const CalendarWrapper = () => {
   }), /* @__PURE__ */ import_react.default.createElement(import_CalendarContent.CalendarContent, null), /* @__PURE__ */ import_react.default.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 //# sourceMappingURL=CalendarWrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\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}\n    >\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,6BAAgC;AAChC,6BAAgC;AAEzB,MAAM,kBAAkB,MAAmB;AAChD,QAAM,EAAE,qBAAqB,6BAAW,kEAA+B;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,MACE,6BAAW,sCAAe;AAC9B,MAAI;AAAkB,WAAO,mDAAC,4CAAgB;AAC9C,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC,4CAAgB,GACjB,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\n  return createPortal(\n    <div\n      ref={setPopperElement}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n    >\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>,\n    document.body,\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uBAA6B;AAC7B,gDAAmD;AACnD,yCAAgD;AAChD,6BAAgC;AAChC,6BAAgC;AAEzB,MAAM,kBAAkB,MAAmB;AAChD,QAAM,EAAE,qBAAqB,6BAAW,kEAA+B;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,MACE,6BAAW,sCAAe;AAC9B,MAAI;AAAkB,WAAO,mDAAC,4CAAgB;AAC9C,SAAO,mCACL,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC,4CAAgB,GACjB,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD,GACA,SAAS,IACX;AACF;",
   "names": []
 }

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

@@ -42,6 +42,7 @@ __export(CalendarWithTimeWheelWrapper_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
 var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent");
 var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext");
@@ -54,7 +55,7 @@ const CalendarWithTimeWheelWrapper = () => {
   } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
   if (isControllerOnly)
     return /* @__PURE__ */ import_react.default.createElement(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, null);
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -62,6 +63,6 @@ const CalendarWithTimeWheelWrapper = () => {
   }), /* @__PURE__ */ import_react.default.createElement(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, null), /* @__PURE__ */ import_react.default.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 //# sourceMappingURL=CalendarWithTimeWheelWrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAEtC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,IAChC;AAAA,MACE,6BAAW,gEAA4B;AAC3C,MAAI;AAAkB,WAAO,mDAAC,sEAA6B;AAC3D,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC,sEAA6B,GAC9B,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\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 createPortal(\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    document.body,\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uBAA6B;AAC7B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAEtC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,IAChC;AAAA,MACE,6BAAW,gEAA4B;AAC3C,MAAI;AAAkB,WAAO,mDAAC,sEAA6B;AAC3D,SAAO,mCACL,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC,sEAA6B,GAC9B,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD,GACA,SAAS,IACX;AACF;",
   "names": []
 }

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

@@ -42,6 +42,7 @@ __export(TimeWheelWrapper_exports, {
 module.exports = __toCommonJS(TimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
 var import_TimeWheelContent = require("./TimeWheelContent");
@@ -57,7 +58,7 @@ const TimeWheelWrapper = () => {
     return /* @__PURE__ */ import_react.default.createElement(import_TimeWheelContent.TimeWheelContent, {
       showShadow: true
     });
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -67,6 +68,6 @@ const TimeWheelWrapper = () => {
   }), /* @__PURE__ */ import_react.default.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 //# sourceMappingURL=TimeWheelWrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const {\n    setArrowElement,\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n  } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent showShadow />;\n  return (\n    <div\n      ref={setPopperElement as (instance: HTMLDivElement | null) => void}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n    >\n      <TimeWheelContent showShadow />\n      <div ref={setArrowElement as (instance: HTMLDivElement | null) => void} style={styles.arrow} />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAE1B,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,MAC1B,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,qBAAqB,6BAAW,kEAA+B;AACvE,MAAI;AAAkB,WAAO,mDAAC;AAAA,MAAiB,YAAU;AAAA,KAAC;AAC1D,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC;AAAA,IAAiB,YAAU;AAAA,GAAC,GAC7B,mDAAC;AAAA,IAAI,KAAK;AAAA,IAA8D,OAAO,OAAO;AAAA,GAAO,CAC/F;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const {\n    setArrowElement,\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n  } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent showShadow />;\n  return createPortal(\n    <div\n      ref={setPopperElement as (instance: HTMLDivElement | null) => void}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n    >\n      <TimeWheelContent showShadow />\n      <div ref={setArrowElement as (instance: HTMLDivElement | null) => void} style={styles.arrow} />\n    </div>,\n    document.body,\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uBAA6B;AAC7B,gDAAmD;AACnD,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAE1B,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,MAC1B,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,qBAAqB,6BAAW,kEAA+B;AACvE,MAAI;AAAkB,WAAO,mDAAC;AAAA,MAAiB,YAAU;AAAA,KAAC;AAC1D,SAAO,mCACL,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,6EAAmC,gBAAgB;AAAA,MAEhE,mDAAC;AAAA,IAAiB,YAAU;AAAA,GAAC,GAC7B,mDAAC;AAAA,IAAI,KAAK;AAAA,IAA8D,OAAO,OAAO;AAAA,GAAO,CAC/F,GACA,SAAS,IACX;AACF;",
   "names": []
 }

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

@@ -19,6 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useContext } from "react";
+import { createPortal } from "react-dom";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { CalendarContent } from "./CalendarContent";
@@ -32,7 +33,7 @@ const CalendarWrapper = () => {
   } = useContext(CalendarContext);
   if (isControllerOnly)
     return /* @__PURE__ */ React2.createElement(CalendarContent, null);
-  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
+  return createPortal(/* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -40,7 +41,7 @@ const CalendarWrapper = () => {
   }), /* @__PURE__ */ React2.createElement(CalendarContent, null), /* @__PURE__ */ React2.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 export {
   CalendarWrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\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}\n    >\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAmB;AAChD,QAAM,EAAE,qBAAqB,WAAW,+BAA+B;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,MACE,WAAW,eAAe;AAC9B,MAAI;AAAkB,WAAO,qCAAC,qBAAgB;AAC9C,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,qBAAgB,GACjB,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContent } from './CalendarContent';\nimport { CalendarContext } from './CalendarContext';\n\nexport const CalendarWrapper = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  const {\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n    setArrowElement,\n  } = useContext(CalendarContext);\n  if (isControllerOnly) return <CalendarContent />;\n  return createPortal(\n    <div\n      ref={setPopperElement}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n    >\n      <CalendarContent />\n      <div ref={setArrowElement} style={styles.arrow} />\n    </div>,\n    document.body,\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAmB;AAChD,QAAM,EAAE,qBAAqB,WAAW,+BAA+B;AACvE,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,IAC5B;AAAA,MACE,WAAW,eAAe;AAC9B,MAAI;AAAkB,WAAO,qCAAC,qBAAgB;AAC9C,SAAO,aACL,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,qBAAgB,GACjB,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD,GACA,SAAS,IACX;AACF;",
   "names": []
 }

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

@@ -19,6 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useContext } from "react";
+import { createPortal } from "react-dom";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
@@ -31,7 +32,7 @@ const CalendarWithTimeWheelWrapper = () => {
   } = useContext(CalendarWithTimeWheelContext);
   if (isControllerOnly)
     return /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null);
-  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
+  return createPortal(/* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -39,7 +40,7 @@ const CalendarWithTimeWheelWrapper = () => {
   }), /* @__PURE__ */ React2.createElement(CalendarWithTimeWheelContent, null), /* @__PURE__ */ React2.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 export {
   CalendarWithTimeWheelWrapper

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

@@ -1,7 +1,7 @@
 {
   "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 { 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,4BAA4B;AAC3C,MAAI;AAAkB,WAAO,qCAAC,kCAA6B;AAC3D,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,kCAA6B,GAC9B,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\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 createPortal(\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    document.body,\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,YAAY;AAAA,IAChC;AAAA,MACE,WAAW,4BAA4B;AAC3C,MAAI;AAAkB,WAAO,qCAAC,kCAA6B;AAC3D,SAAO,aACL,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC,kCAA6B,GAC9B,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO,OAAO;AAAA,GAAO,CAClD,GACA,SAAS,IACX;AACF;",
   "names": []
 }

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

@@ -19,6 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import React2, { useContext } from "react";
+import { createPortal } from "react-dom";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { TimeWheelContent } from "./TimeWheelContent";
@@ -34,7 +35,7 @@ const TimeWheelWrapper = () => {
     return /* @__PURE__ */ React2.createElement(TimeWheelContent, {
       showShadow: true
     });
-  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
+  return createPortal(/* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({
     ref: setPopperElement,
     style: __spreadProps(__spreadValues({}, styles.popper), { background: "white", zIndex: 110 })
   }, attributes.popper), {
@@ -44,7 +45,7 @@ const TimeWheelWrapper = () => {
   }), /* @__PURE__ */ React2.createElement("div", {
     ref: setArrowElement,
     style: styles.arrow
-  }));
+  })), document.body);
 };
 export {
   TimeWheelWrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const {\n    setArrowElement,\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n  } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent showShadow />;\n  return (\n    <div\n      ref={setPopperElement as (instance: HTMLDivElement | null) => void}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n    >\n      <TimeWheelContent showShadow />\n      <div ref={setArrowElement as (instance: HTMLDivElement | null) => void} style={styles.arrow} />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,MAC1B,WAAW,gBAAgB;AAC/B,QAAM,EAAE,qBAAqB,WAAW,+BAA+B;AACvE,MAAI;AAAkB,WAAO,qCAAC;AAAA,MAAiB,YAAU;AAAA,KAAC;AAC1D,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC;AAAA,IAAiB,YAAU;AAAA,GAAC,GAC7B,qCAAC;AAAA,IAAI,KAAK;AAAA,IAA8D,OAAO,OAAO;AAAA,GAAO,CAC/F;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const {\n    setArrowElement,\n    setPopperElement,\n    usePopperHelpers: { styles, attributes },\n  } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent showShadow />;\n  return createPortal(\n    <div\n      ref={setPopperElement as (instance: HTMLDivElement | null) => void}\n      style={{ ...styles.popper, background: 'white', zIndex: 110 }}\n      {...attributes.popper}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n    >\n      <TimeWheelContent showShadow />\n      <div ref={setArrowElement as (instance: HTMLDivElement | null) => void} style={styles.arrow} />\n    </div>,\n    document.body,\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,QAAQ;AAAA,MAC1B,WAAW,gBAAgB;AAC/B,QAAM,EAAE,qBAAqB,WAAW,+BAA+B;AACvE,MAAI;AAAkB,WAAO,qCAAC;AAAA,MAAiB,YAAU;AAAA,KAAC;AAC1D,SAAO,aACL,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,iCAAK,OAAO,SAAZ,EAAoB,YAAY,SAAS,QAAQ,IAAI;AAAA,KACxD,WAAW,SAHhB;AAAA,IAIC,eAAa,mCAAmC,gBAAgB;AAAA,MAEhE,qCAAC;AAAA,IAAiB,YAAU;AAAA,GAAC,GAC7B,qCAAC;AAAA,IAAI,KAAK;AAAA,IAA8D,OAAO,OAAO;AAAA,GAAO,CAC/F,GACA,SAAS,IACX;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-date-time-picker",
-  "version": "3.0.0-next.76",
+  "version": "3.0.0-next.79",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
   "files": [