@elliemae/ds-form-date-time-picker 3.70.0-next.2 → 3.70.0-next.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -33,30 +33,42 @@ __export(CalendarWrapper_exports, {
33
33
  module.exports = __toCommonJS(CalendarWrapper_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_ds_popperjs = require("@elliemae/ds-popperjs");
36
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
37
37
  var import_ds_system = require("@elliemae/ds-system");
38
38
  var import_react = require("react");
39
39
  var import_constants = require("../../../constants/index.js");
40
40
  var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
41
41
  var import_CalendarContent = require("./CalendarContent.js");
42
42
  var import_CalendarContext = require("./CalendarContext.js");
43
- const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
43
+ const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
44
44
  name: import_constants.DSControlledDateTimePickerName,
45
45
  slot: import_constants.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR
46
46
  })``;
47
47
  const CalendarWrapper = () => {
48
48
  const { isControllerOnly, getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
49
49
  const { referenceElement, closeCalendar } = (0, import_react.useContext)(import_CalendarContext.CalendarContext);
50
+ const {
51
+ refs,
52
+ floatingStyles,
53
+ context,
54
+ isOpen: isFloatingOpen
55
+ } = (0, import_ds_floating_context.useFloatingContext)({
56
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
57
+ externalReferenceElement: referenceElement,
58
+ withoutAnimation: true,
59
+ customOffset: [0, 0],
60
+ onClickOutside: isControllerOnly ? void 0 : closeCalendar
61
+ });
50
62
  if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarContent.CalendarContent, {});
51
63
  if (!referenceElement) return null;
52
64
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
- StyledPopper,
65
+ StyledFloatingWrapper,
54
66
  {
55
- showPopover: true,
67
+ innerRef: refs.setFloating,
68
+ isOpen: isFloatingOpen,
69
+ floatingStyles,
70
+ context,
56
71
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
57
- referenceElement,
58
- withoutArrow: true,
59
- onClickOutside: closeCalendar,
60
72
  getOwnerProps: getProps,
61
73
  "aria-label": "calendar header",
62
74
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeCalendar}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledPopper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBQ;AAnB/B,yBAA2B;AAC3B,uBAAuB;AACvB,mBAA2B;AAC3B,uBAIO;AACP,yCAAgD;AAChD,6BAAgC;AAChC,6BAAgC;AAChC,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AACM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,QAAI,yBAAW,kEAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,QAAI,yBAAW,sCAAe;AAEtE,MAAI,iBAAkB,QAAO,4CAAC,0CAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,oDAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,0CAAgB;AAAA;AAAA,EACnB;AAEJ;",
4
+ "sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\n\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledFloatingWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAAkC;AAClC,uBAIO;AACP,yCAAgD;AAChD,6BAAgC;AAChC,6BAAgC;AAEhC,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,QAAI,yBAAW,kEAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,QAAI,yBAAW,sCAAe;AAEtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,0CAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,0CAAgB;AAAA;AAAA,EACnB;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -33,30 +33,42 @@ __export(CalendarWithTimeWheelWrapper_exports, {
33
33
  module.exports = __toCommonJS(CalendarWithTimeWheelWrapper_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_ds_popperjs = require("@elliemae/ds-popperjs");
37
- var import_ds_system = require("@elliemae/ds-system");
38
36
  var import_react = require("react");
37
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
38
+ var import_ds_system = require("@elliemae/ds-system");
39
39
  var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
40
40
  var import_constants = require("../../../constants/index.js");
41
41
  var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent.js");
42
42
  var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
43
- const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
43
+ const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
44
44
  name: import_constants.DSControlledDateTimePickerName,
45
45
  slot: import_constants.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
46
46
  })``;
47
47
  const CalendarWithTimeWheelWrapper = () => {
48
48
  const { referenceElement, closeCalendar, isControllerOnly } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
49
49
  const { getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
50
+ const {
51
+ refs,
52
+ floatingStyles,
53
+ context,
54
+ isOpen: isFloatingOpen
55
+ } = (0, import_ds_floating_context.useFloatingContext)({
56
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
57
+ externalReferenceElement: referenceElement,
58
+ withoutAnimation: true,
59
+ customOffset: [0, 0],
60
+ onClickOutside: isControllerOnly ? void 0 : closeCalendar
61
+ });
50
62
  if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
51
63
  if (!referenceElement) return null;
52
64
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
- StyledPopper,
65
+ StyledFloatingWrapper,
54
66
  {
55
- showPopover: true,
67
+ innerRef: refs.setFloating,
68
+ isOpen: isFloatingOpen,
69
+ floatingStyles,
70
+ context,
56
71
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
57
- referenceElement,
58
- withoutArrow: true,
59
- onClickOutside: closeCalendar,
60
72
  getOwnerProps: getProps,
61
73
  "aria-label": "calendar header",
62
74
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n const { getProps } = useContext(ControlledDateTimePickerContext);\n if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeCalendar}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarWithTimeWheelContent />\n </StyledPopper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBQ;AAnB/B,yBAA2B;AAC3B,uBAAuB;AACvB,mBAA2B;AAC3B,yCAAgD;AAChD,uBAIO;AACP,0CAA6C;AAC7C,0CAA6C;AAC7C,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,MAAI,iBAAkB,QAAO,4CAAC,oEAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,oDAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n const { getProps } = useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarWithTimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,mBAAkC;AAClC,iCAAoD;AACpD,uBAAuB;AACvB,yCAAgD;AAChD,uBAIO;AACP,0CAA6C;AAC7C,0CAA6C;AAE7C,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAE/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,oEAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -33,30 +33,42 @@ __export(TimeWheelWrapper_exports, {
33
33
  module.exports = __toCommonJS(TimeWheelWrapper_exports);
34
34
  var React = __toESM(require("react"));
35
35
  var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_ds_popperjs = require("@elliemae/ds-popperjs");
36
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
37
37
  var import_ds_system = require("@elliemae/ds-system");
38
38
  var import_react = __toESM(require("react"));
39
39
  var import_constants = require("../../../constants/index.js");
40
40
  var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
41
41
  var import_TimeWheelContent = require("./TimeWheelContent.js");
42
42
  var import_TimeWheelContext = require("./TimeWheelContext.js");
43
- const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
43
+ const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
44
44
  name: import_constants.DSControlledDateTimePickerName,
45
45
  slot: import_constants.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL
46
46
  })``;
47
47
  const TimeWheelWrapper = () => {
48
48
  const { referenceElement, closeTimePicker } = import_react.default.useContext(import_TimeWheelContext.TimeWheelContext);
49
49
  const { isControllerOnly, getProps } = import_react.default.useContext(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
50
+ const {
51
+ refs,
52
+ floatingStyles,
53
+ context,
54
+ isOpen: isFloatingOpen
55
+ } = (0, import_ds_floating_context.useFloatingContext)({
56
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
57
+ externalReferenceElement: referenceElement,
58
+ withoutAnimation: true,
59
+ customOffset: [0, 0],
60
+ onClickOutside: isControllerOnly ? void 0 : closeTimePicker
61
+ });
50
62
  if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {});
51
63
  if (!referenceElement) return null;
52
64
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
- StyledPopper,
65
+ StyledFloatingWrapper,
54
66
  {
55
- showPopover: true,
67
+ innerRef: refs.setFloating,
68
+ isOpen: isFloatingOpen,
69
+ floatingStyles,
70
+ context,
56
71
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
57
- referenceElement,
58
- withoutArrow: true,
59
- onClickOutside: closeTimePicker,
60
72
  getOwnerProps: getProps,
61
73
  "aria-label": "time wheel header",
62
74
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n if (isControllerOnly) return <TimeWheelContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeTimePicker}\n getOwnerProps={getProps}\n aria-label=\"time wheel header\"\n role=\"dialog\"\n >\n <TimeWheelContent />\n </StyledPopper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBQ;AApB/B,yBAA2B;AAC3B,uBAAuB;AACvB,mBAAkB;AAClB,uBAIO;AACP,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAEjC,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AACvF,MAAI,iBAAkB,QAAO,4CAAC,4CAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,oDAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,4CAAiB;AAAA;AAAA,EACpB;AAEJ;",
4
+ "sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeTimePicker,\n });\n\n if (isControllerOnly) return <TimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"time wheel header\"\n role=\"dialog\"\n >\n <TimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAAkB;AAClB,uBAIO;AACP,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAEjC,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,4CAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,4CAAiB;AAAA;AAAA,EACpB;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { DSPopperJS } from "@elliemae/ds-popperjs";
3
+ import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
4
4
  import { styled } from "@elliemae/ds-system";
5
5
  import { useContext } from "react";
6
6
  import {
@@ -11,23 +11,35 @@ import {
11
11
  import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
12
12
  import { CalendarContent } from "./CalendarContent.js";
13
13
  import { CalendarContext } from "./CalendarContext.js";
14
- const StyledPopper = styled(DSPopperJS, {
14
+ const StyledFloatingWrapper = styled(FloatingWrapper, {
15
15
  name: DSControlledDateTimePickerName,
16
16
  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR
17
17
  })``;
18
18
  const CalendarWrapper = () => {
19
19
  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);
20
20
  const { referenceElement, closeCalendar } = useContext(CalendarContext);
21
+ const {
22
+ refs,
23
+ floatingStyles,
24
+ context,
25
+ isOpen: isFloatingOpen
26
+ } = useFloatingContext({
27
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
28
+ externalReferenceElement: referenceElement,
29
+ withoutAnimation: true,
30
+ customOffset: [0, 0],
31
+ onClickOutside: isControllerOnly ? void 0 : closeCalendar
32
+ });
21
33
  if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarContent, {});
22
34
  if (!referenceElement) return null;
23
35
  return /* @__PURE__ */ jsx(
24
- StyledPopper,
36
+ StyledFloatingWrapper,
25
37
  {
26
- showPopover: true,
38
+ innerRef: refs.setFloating,
39
+ isOpen: isFloatingOpen,
40
+ floatingStyles,
41
+ context,
27
42
  "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
28
- referenceElement,
29
- withoutArrow: true,
30
- onClickOutside: closeCalendar,
31
43
  getOwnerProps: getProps,
32
44
  "aria-label": "calendar header",
33
45
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeCalendar}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledPopper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AACM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\n\nexport const CalendarWrapper = (): JSX.Element | null => {\n const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarContent />\n </StyledFloatingWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEhC,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { DSPopperJS } from "@elliemae/ds-popperjs";
4
- import { styled } from "@elliemae/ds-system";
5
3
  import { useContext } from "react";
4
+ import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
5
+ import { styled } from "@elliemae/ds-system";
6
6
  import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
7
7
  import {
8
8
  ControlledDateTimePickerDatatestid,
@@ -11,23 +11,35 @@ import {
11
11
  } from "../../../constants/index.js";
12
12
  import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
13
13
  import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
14
- const StyledPopper = styled(DSPopperJS, {
14
+ const StyledFloatingWrapper = styled(FloatingWrapper, {
15
15
  name: DSControlledDateTimePickerName,
16
16
  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
17
17
  })``;
18
18
  const CalendarWithTimeWheelWrapper = () => {
19
19
  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);
20
20
  const { getProps } = useContext(ControlledDateTimePickerContext);
21
+ const {
22
+ refs,
23
+ floatingStyles,
24
+ context,
25
+ isOpen: isFloatingOpen
26
+ } = useFloatingContext({
27
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
28
+ externalReferenceElement: referenceElement,
29
+ withoutAnimation: true,
30
+ customOffset: [0, 0],
31
+ onClickOutside: isControllerOnly ? void 0 : closeCalendar
32
+ });
21
33
  if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
22
34
  if (!referenceElement) return null;
23
35
  return /* @__PURE__ */ jsx(
24
- StyledPopper,
36
+ StyledFloatingWrapper,
25
37
  {
26
- showPopover: true,
38
+ innerRef: refs.setFloating,
39
+ isOpen: isFloatingOpen,
40
+ floatingStyles,
41
+ context,
27
42
  "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
28
- referenceElement,
29
- withoutArrow: true,
30
- onClickOutside: closeCalendar,
31
43
  getOwnerProps: getProps,
32
44
  "aria-label": "calendar header",
33
45
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n const { getProps } = useContext(ControlledDateTimePickerContext);\n if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeCalendar}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarWithTimeWheelContent />\n </StyledPopper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAC/D,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n const { getProps } = useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeCalendar,\n });\n\n if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"calendar header\"\n role=\"dialog\"\n >\n <CalendarWithTimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAE7C,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAE/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { DSPopperJS } from "@elliemae/ds-popperjs";
3
+ import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
4
4
  import { styled } from "@elliemae/ds-system";
5
5
  import React2 from "react";
6
6
  import {
@@ -11,23 +11,35 @@ import {
11
11
  import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
12
12
  import { TimeWheelContent } from "./TimeWheelContent.js";
13
13
  import { TimeWheelContext } from "./TimeWheelContext.js";
14
- const StyledPopper = styled(DSPopperJS, {
14
+ const StyledFloatingWrapper = styled(FloatingWrapper, {
15
15
  name: DSControlledDateTimePickerName,
16
16
  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL
17
17
  })``;
18
18
  const TimeWheelWrapper = () => {
19
19
  const { referenceElement, closeTimePicker } = React2.useContext(TimeWheelContext);
20
20
  const { isControllerOnly, getProps } = React2.useContext(ControlledDateTimePickerContext);
21
+ const {
22
+ refs,
23
+ floatingStyles,
24
+ context,
25
+ isOpen: isFloatingOpen
26
+ } = useFloatingContext({
27
+ externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
28
+ externalReferenceElement: referenceElement,
29
+ withoutAnimation: true,
30
+ customOffset: [0, 0],
31
+ onClickOutside: isControllerOnly ? void 0 : closeTimePicker
32
+ });
21
33
  if (isControllerOnly) return /* @__PURE__ */ jsx(TimeWheelContent, {});
22
34
  if (!referenceElement) return null;
23
35
  return /* @__PURE__ */ jsx(
24
- StyledPopper,
36
+ StyledFloatingWrapper,
25
37
  {
26
- showPopover: true,
38
+ innerRef: refs.setFloating,
39
+ isOpen: isFloatingOpen,
40
+ floatingStyles,
41
+ context,
27
42
  "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
28
- referenceElement,
29
- withoutArrow: true,
30
- onClickOutside: closeTimePicker,
31
43
  getOwnerProps: getProps,
32
44
  "aria-label": "time wheel header",
33
45
  role: "dialog",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledPopper = styled(DSPopperJS, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n if (isControllerOnly) return <TimeWheelContent />;\n if (!referenceElement) return null;\n return (\n <StyledPopper\n showPopover\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n referenceElement={referenceElement}\n withoutArrow\n onClickOutside={closeTimePicker}\n getOwnerProps={getProps}\n aria-label=\"time wheel header\"\n role=\"dialog\"\n >\n <TimeWheelContent />\n </StyledPopper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoBQ;AApB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAIA,OAAM,WAAW,gBAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAIA,OAAM,WAAW,+BAA+B;AACvF,MAAI,iBAAkB,QAAO,oBAAC,oBAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n ControlledDateTimePickerDatatestid,\n DSControlledDateTimePickerName,\n DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n name: DSControlledDateTimePickerName,\n slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n externalReferenceElement: referenceElement,\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: isControllerOnly ? undefined : closeTimePicker,\n });\n\n if (isControllerOnly) return <TimeWheelContent />;\n if (!referenceElement) return null;\n\n return (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={floatingStyles}\n context={context}\n data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n getOwnerProps={getProps}\n aria-label=\"time wheel header\"\n role=\"dialog\"\n >\n <TimeWheelContent />\n </StyledFloatingWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAIA,OAAM,WAAW,gBAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAIA,OAAM,WAAW,+BAA+B;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,oBAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-date-time-picker",
3
- "version": "3.70.0-next.2",
3
+ "version": "3.70.0-next.20",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
6
6
  "files": [
@@ -37,13 +37,13 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "uid": "^2.0.2",
40
- "@elliemae/ds-button-v2": "3.70.0-next.2",
41
- "@elliemae/ds-grid": "3.70.0-next.2",
42
- "@elliemae/ds-icons": "3.70.0-next.2",
43
- "@elliemae/ds-popperjs": "3.70.0-next.2",
44
- "@elliemae/ds-system": "3.70.0-next.2",
45
- "@elliemae/ds-props-helpers": "3.70.0-next.2",
46
- "@elliemae/ds-typescript-helpers": "3.70.0-next.2"
40
+ "@elliemae/ds-button-v2": "3.70.0-next.20",
41
+ "@elliemae/ds-grid": "3.70.0-next.20",
42
+ "@elliemae/ds-props-helpers": "3.70.0-next.20",
43
+ "@elliemae/ds-floating-context": "3.70.0-next.20",
44
+ "@elliemae/ds-system": "3.70.0-next.20",
45
+ "@elliemae/ds-icons": "3.70.0-next.20",
46
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.20"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-theme": "~2.13.0",
@@ -51,8 +51,8 @@
51
51
  "jest": "^30.0.0",
52
52
  "styled-components": "~5.3.9",
53
53
  "styled-system": "^5.1.5",
54
- "@elliemae/ds-monorepo-devops": "3.70.0-next.2",
55
- "@elliemae/ds-test-utils": "3.70.0-next.2"
54
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.20",
55
+ "@elliemae/ds-test-utils": "3.70.0-next.20"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "@elliemae/pui-theme": "~2.13.0",