@elliemae/ds-form-date-time-picker 3.70.0-next.3 → 3.70.0-next.6
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.
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js +36 -7
- package/dist/cjs/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +36 -7
- package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js +36 -7
- package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js +37 -8
- package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js +37 -8
- package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map +2 -2
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js +36 -7
- package/dist/esm/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map +2 -2
- package/package.json +10 -10
|
@@ -33,30 +33,59 @@ __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
|
|
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
|
|
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
|
+
withoutAnimation: true,
|
|
58
|
+
customOffset: [0, 0]
|
|
59
|
+
});
|
|
60
|
+
(0, import_react.useEffect)(() => {
|
|
61
|
+
refs.setReference(referenceElement);
|
|
62
|
+
}, [referenceElement, refs]);
|
|
63
|
+
const floatingEl = refs.floating;
|
|
64
|
+
(0, import_react.useEffect)(() => {
|
|
65
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
66
|
+
};
|
|
67
|
+
const listener = (event) => {
|
|
68
|
+
const target = event.target;
|
|
69
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
70
|
+
closeCalendar();
|
|
71
|
+
};
|
|
72
|
+
document.addEventListener("mousedown", listener, true);
|
|
73
|
+
document.addEventListener("touchstart", listener, true);
|
|
74
|
+
return () => {
|
|
75
|
+
document.removeEventListener("mousedown", listener, true);
|
|
76
|
+
document.removeEventListener("touchstart", listener, true);
|
|
77
|
+
};
|
|
78
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);
|
|
50
79
|
if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarContent.CalendarContent, {});
|
|
51
80
|
if (!referenceElement) return null;
|
|
52
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
-
|
|
82
|
+
StyledFloatingWrapper,
|
|
54
83
|
{
|
|
55
|
-
|
|
84
|
+
innerRef: refs.setFloating,
|
|
85
|
+
isOpen: isFloatingOpen,
|
|
86
|
+
floatingStyles,
|
|
87
|
+
context,
|
|
56
88
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
|
|
57
|
-
referenceElement,
|
|
58
|
-
withoutArrow: true,
|
|
59
|
-
onClickOutside: closeCalendar,
|
|
60
89
|
getOwnerProps: getProps,
|
|
61
90
|
"aria-label": "calendar header",
|
|
62
91
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext, useEffect } 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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeCalendar();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);\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;ADoDQ;AApD/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAA6C;AAC7C,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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,8BAAU,MAAM;AACd,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,8BAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,oBAAc;AAAA,IAChB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,aAAa,CAAC;AAElE,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,59 @@ __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
|
|
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_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
|
|
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
|
+
withoutAnimation: true,
|
|
58
|
+
customOffset: [0, 0]
|
|
59
|
+
});
|
|
60
|
+
(0, import_react.useEffect)(() => {
|
|
61
|
+
refs.setReference(referenceElement);
|
|
62
|
+
}, [referenceElement, refs]);
|
|
63
|
+
const floatingEl = refs.floating;
|
|
64
|
+
(0, import_react.useEffect)(() => {
|
|
65
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
66
|
+
};
|
|
67
|
+
const listener = (event) => {
|
|
68
|
+
const target = event.target;
|
|
69
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
70
|
+
closeCalendar();
|
|
71
|
+
};
|
|
72
|
+
document.addEventListener("mousedown", listener, true);
|
|
73
|
+
document.addEventListener("touchstart", listener, true);
|
|
74
|
+
return () => {
|
|
75
|
+
document.removeEventListener("mousedown", listener, true);
|
|
76
|
+
document.removeEventListener("touchstart", listener, true);
|
|
77
|
+
};
|
|
78
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);
|
|
50
79
|
if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
|
|
51
80
|
if (!referenceElement) return null;
|
|
52
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
-
|
|
82
|
+
StyledFloatingWrapper,
|
|
54
83
|
{
|
|
55
|
-
|
|
84
|
+
innerRef: refs.setFloating,
|
|
85
|
+
isOpen: isFloatingOpen,
|
|
86
|
+
floatingStyles,
|
|
87
|
+
context,
|
|
56
88
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
|
|
57
|
-
referenceElement,
|
|
58
|
-
withoutArrow: true,
|
|
59
|
-
onClickOutside: closeCalendar,
|
|
60
89
|
getOwnerProps: getProps,
|
|
61
90
|
"aria-label": "calendar header",
|
|
62
91
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext, useEffect } 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';\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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeCalendar();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);\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;ADoDQ;AApD/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAA6C;AAC7C,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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,8BAAU,MAAM;AACd,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,8BAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,oBAAc;AAAA,IAChB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,aAAa,CAAC;AAElE,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,59 @@ __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
|
|
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
|
|
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
|
+
withoutAnimation: true,
|
|
58
|
+
customOffset: [0, 0]
|
|
59
|
+
});
|
|
60
|
+
import_react.default.useEffect(() => {
|
|
61
|
+
refs.setReference(referenceElement);
|
|
62
|
+
}, [referenceElement, refs]);
|
|
63
|
+
const floatingEl = refs.floating;
|
|
64
|
+
import_react.default.useEffect(() => {
|
|
65
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
66
|
+
};
|
|
67
|
+
const listener = (event) => {
|
|
68
|
+
const target = event.target;
|
|
69
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
70
|
+
closeTimePicker();
|
|
71
|
+
};
|
|
72
|
+
document.addEventListener("mousedown", listener, true);
|
|
73
|
+
document.addEventListener("touchstart", listener, true);
|
|
74
|
+
return () => {
|
|
75
|
+
document.removeEventListener("mousedown", listener, true);
|
|
76
|
+
document.removeEventListener("touchstart", listener, true);
|
|
77
|
+
};
|
|
78
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeTimePicker]);
|
|
50
79
|
if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {});
|
|
51
80
|
if (!referenceElement) return null;
|
|
52
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
-
|
|
82
|
+
StyledFloatingWrapper,
|
|
54
83
|
{
|
|
55
|
-
|
|
84
|
+
innerRef: refs.setFloating,
|
|
85
|
+
isOpen: isFloatingOpen,
|
|
86
|
+
floatingStyles,
|
|
87
|
+
context,
|
|
56
88
|
"data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
|
|
57
|
-
referenceElement,
|
|
58
|
-
withoutArrow: true,
|
|
59
|
-
onClickOutside: closeTimePicker,
|
|
60
89
|
getOwnerProps: getProps,
|
|
61
90
|
"aria-label": "time wheel header",
|
|
62
91
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n React.useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n React.useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeTimePicker();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeTimePicker]);\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;ADoDQ;AApD/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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,eAAAA,QAAM,UAAU,MAAM;AACpB,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,sBAAgB;AAAA,IAClB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,eAAe,CAAC;AAEpE,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,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
|
-
import { useContext } from "react";
|
|
5
|
+
import { useContext, useEffect } from "react";
|
|
6
6
|
import {
|
|
7
7
|
ControlledDateTimePickerDatatestid,
|
|
8
8
|
DSControlledDateTimePickerName,
|
|
@@ -11,23 +11,52 @@ import {
|
|
|
11
11
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
12
12
|
import { CalendarContent } from "./CalendarContent.js";
|
|
13
13
|
import { CalendarContext } from "./CalendarContext.js";
|
|
14
|
-
const
|
|
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
|
+
withoutAnimation: true,
|
|
29
|
+
customOffset: [0, 0]
|
|
30
|
+
});
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
refs.setReference(referenceElement);
|
|
33
|
+
}, [referenceElement, refs]);
|
|
34
|
+
const floatingEl = refs.floating;
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
37
|
+
};
|
|
38
|
+
const listener = (event) => {
|
|
39
|
+
const target = event.target;
|
|
40
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
41
|
+
closeCalendar();
|
|
42
|
+
};
|
|
43
|
+
document.addEventListener("mousedown", listener, true);
|
|
44
|
+
document.addEventListener("touchstart", listener, true);
|
|
45
|
+
return () => {
|
|
46
|
+
document.removeEventListener("mousedown", listener, true);
|
|
47
|
+
document.removeEventListener("touchstart", listener, true);
|
|
48
|
+
};
|
|
49
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);
|
|
21
50
|
if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarContent, {});
|
|
22
51
|
if (!referenceElement) return null;
|
|
23
52
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
53
|
+
StyledFloatingWrapper,
|
|
25
54
|
{
|
|
26
|
-
|
|
55
|
+
innerRef: refs.setFloating,
|
|
56
|
+
isOpen: isFloatingOpen,
|
|
57
|
+
floatingStyles,
|
|
58
|
+
context,
|
|
27
59
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeCalendar,
|
|
31
60
|
getOwnerProps: getProps,
|
|
32
61
|
"aria-label": "calendar header",
|
|
33
62
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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, useEffect } 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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeCalendar();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);\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;ACoDQ;AApD/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAgB,YAAY,iBAAiB;AAC7C;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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,YAAU,MAAM;AACd,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,oBAAc;AAAA,IAChB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,aAAa,CAAC;AAElE,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 {
|
|
3
|
+
import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
|
-
import { useContext } from "react";
|
|
5
|
+
import { useContext, useEffect } from "react";
|
|
6
6
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
7
7
|
import {
|
|
8
8
|
ControlledDateTimePickerDatatestid,
|
|
@@ -11,23 +11,52 @@ import {
|
|
|
11
11
|
} from "../../../constants/index.js";
|
|
12
12
|
import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
|
|
13
13
|
import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
|
|
14
|
-
const
|
|
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
|
+
withoutAnimation: true,
|
|
29
|
+
customOffset: [0, 0]
|
|
30
|
+
});
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
refs.setReference(referenceElement);
|
|
33
|
+
}, [referenceElement, refs]);
|
|
34
|
+
const floatingEl = refs.floating;
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
37
|
+
};
|
|
38
|
+
const listener = (event) => {
|
|
39
|
+
const target = event.target;
|
|
40
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
41
|
+
closeCalendar();
|
|
42
|
+
};
|
|
43
|
+
document.addEventListener("mousedown", listener, true);
|
|
44
|
+
document.addEventListener("touchstart", listener, true);
|
|
45
|
+
return () => {
|
|
46
|
+
document.removeEventListener("mousedown", listener, true);
|
|
47
|
+
document.removeEventListener("touchstart", listener, true);
|
|
48
|
+
};
|
|
49
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);
|
|
21
50
|
if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
|
|
22
51
|
if (!referenceElement) return null;
|
|
23
52
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
53
|
+
StyledFloatingWrapper,
|
|
25
54
|
{
|
|
26
|
-
|
|
55
|
+
innerRef: refs.setFloating,
|
|
56
|
+
isOpen: isFloatingOpen,
|
|
57
|
+
floatingStyles,
|
|
58
|
+
context,
|
|
27
59
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeCalendar,
|
|
31
60
|
getOwnerProps: getProps,
|
|
32
61
|
"aria-label": "calendar header",
|
|
33
62
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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, useEffect } 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';\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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeCalendar();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeCalendar]);\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;ACoDQ;AApD/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAgB,YAAY,iBAAiB;AAC7C,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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,YAAU,MAAM;AACd,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,oBAAc;AAAA,IAChB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,aAAa,CAAC;AAElE,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 {
|
|
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,52 @@ import {
|
|
|
11
11
|
import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
|
|
12
12
|
import { TimeWheelContent } from "./TimeWheelContent.js";
|
|
13
13
|
import { TimeWheelContext } from "./TimeWheelContext.js";
|
|
14
|
-
const
|
|
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
|
+
withoutAnimation: true,
|
|
29
|
+
customOffset: [0, 0]
|
|
30
|
+
});
|
|
31
|
+
React2.useEffect(() => {
|
|
32
|
+
refs.setReference(referenceElement);
|
|
33
|
+
}, [referenceElement, refs]);
|
|
34
|
+
const floatingEl = refs.floating;
|
|
35
|
+
React2.useEffect(() => {
|
|
36
|
+
if (!floatingEl || !referenceElement || isControllerOnly) return () => {
|
|
37
|
+
};
|
|
38
|
+
const listener = (event) => {
|
|
39
|
+
const target = event.target;
|
|
40
|
+
if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;
|
|
41
|
+
closeTimePicker();
|
|
42
|
+
};
|
|
43
|
+
document.addEventListener("mousedown", listener, true);
|
|
44
|
+
document.addEventListener("touchstart", listener, true);
|
|
45
|
+
return () => {
|
|
46
|
+
document.removeEventListener("mousedown", listener, true);
|
|
47
|
+
document.removeEventListener("touchstart", listener, true);
|
|
48
|
+
};
|
|
49
|
+
}, [floatingEl, referenceElement, isControllerOnly, closeTimePicker]);
|
|
21
50
|
if (isControllerOnly) return /* @__PURE__ */ jsx(TimeWheelContent, {});
|
|
22
51
|
if (!referenceElement) return null;
|
|
23
52
|
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
53
|
+
StyledFloatingWrapper,
|
|
25
54
|
{
|
|
26
|
-
|
|
55
|
+
innerRef: refs.setFloating,
|
|
56
|
+
isOpen: isFloatingOpen,
|
|
57
|
+
floatingStyles,
|
|
58
|
+
context,
|
|
27
59
|
"data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
|
|
28
|
-
referenceElement,
|
|
29
|
-
withoutArrow: true,
|
|
30
|
-
onClickOutside: closeTimePicker,
|
|
31
60
|
getOwnerProps: getProps,
|
|
32
61
|
"aria-label": "time wheel header",
|
|
33
62
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n React.useEffect(() => {\n refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const floatingEl = refs.floating;\n React.useEffect(() => {\n if (!floatingEl || !referenceElement || isControllerOnly) return () => {};\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target || floatingEl.contains(target) || referenceElement.contains(target)) return;\n closeTimePicker();\n };\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [floatingEl, referenceElement, isControllerOnly, closeTimePicker]);\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;ACoDQ;AApD/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,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,EAAAA,OAAM,UAAU,MAAM;AACpB,SAAK,aAAa,gBAAgB;AAAA,EACpC,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,aAAa,KAAK;AACxB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,CAAC,cAAc,CAAC,oBAAoB,iBAAkB,QAAO,MAAM;AAAA,IAAC;AACxE,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,UAAU,WAAW,SAAS,MAAM,KAAK,iBAAiB,SAAS,MAAM,EAAG;AACjF,sBAAgB;AAAA,IAClB;AACA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AACtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,kBAAkB,eAAe,CAAC;AAEpE,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.
|
|
3
|
+
"version": "3.70.0-next.6",
|
|
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-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
40
|
+
"@elliemae/ds-floating-context": "3.70.0-next.6",
|
|
41
|
+
"@elliemae/ds-button-v2": "3.70.0-next.6",
|
|
42
|
+
"@elliemae/ds-grid": "3.70.0-next.6",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.6",
|
|
44
|
+
"@elliemae/ds-icons": "3.70.0-next.6",
|
|
45
|
+
"@elliemae/ds-system": "3.70.0-next.6",
|
|
46
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.6"
|
|
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-
|
|
55
|
-
"@elliemae/ds-
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.6",
|
|
55
|
+
"@elliemae/ds-test-utils": "3.70.0-next.6"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@elliemae/pui-theme": "~2.13.0",
|