@elliemae/ds-floating-context 3.44.0-rc.1
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/DSFloatingContext.js +151 -0
- package/dist/cjs/DSFloatingContext.js.map +7 -0
- package/dist/cjs/index.js +42 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js +95 -0
- package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/config/useFloatingWrapper.js +58 -0
- package/dist/cjs/parts/FloatingWrapper/config/useFloatingWrapper.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/config/useValidateProps.js +39 -0
- package/dist/cjs/parts/FloatingWrapper/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/constants/index.js +40 -0
- package/dist/cjs/parts/FloatingWrapper/constants/index.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/index.js +37 -0
- package/dist/cjs/parts/FloatingWrapper/index.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/react-desc-prop-types.js +63 -0
- package/dist/cjs/parts/FloatingWrapper/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/FloatingWrapper/styled.js +77 -0
- package/dist/cjs/parts/FloatingWrapper/styled.js.map +7 -0
- package/dist/cjs/parts/PopoverArrow.js +114 -0
- package/dist/cjs/parts/PopoverArrow.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +84 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/utils/computeOffsets.js +90 -0
- package/dist/cjs/utils/computeOffsets.js.map +7 -0
- package/dist/cjs/utils/computePosition.js +105 -0
- package/dist/cjs/utils/computePosition.js.map +7 -0
- package/dist/cjs/utils/detectOverflow.js +82 -0
- package/dist/cjs/utils/detectOverflow.js.map +7 -0
- package/dist/cjs/utils/getAlteredPosition.js +44 -0
- package/dist/cjs/utils/getAlteredPosition.js.map +7 -0
- package/dist/cjs/utils/getArrowOffset.js +41 -0
- package/dist/cjs/utils/getArrowOffset.js.map +7 -0
- package/dist/cjs/utils/getExpandedFallbackPlacements.js +58 -0
- package/dist/cjs/utils/getExpandedFallbackPlacements.js.map +7 -0
- package/dist/cjs/utils/getOppositePlacement.js +44 -0
- package/dist/cjs/utils/getOppositePlacement.js.map +7 -0
- package/dist/cjs/utils/getOppositeVariationPlacement.js +46 -0
- package/dist/cjs/utils/getOppositeVariationPlacement.js.map +7 -0
- package/dist/esm/DSFloatingContext.js +125 -0
- package/dist/esm/DSFloatingContext.js.map +7 -0
- package/dist/esm/index.js +12 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/package.json +7 -0
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js +65 -0
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/config/useFloatingWrapper.js +28 -0
- package/dist/esm/parts/FloatingWrapper/config/useFloatingWrapper.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/config/useValidateProps.js +9 -0
- package/dist/esm/parts/FloatingWrapper/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/constants/index.js +10 -0
- package/dist/esm/parts/FloatingWrapper/constants/index.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/index.js +7 -0
- package/dist/esm/parts/FloatingWrapper/index.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/react-desc-prop-types.js +38 -0
- package/dist/esm/parts/FloatingWrapper/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/styled.js +47 -0
- package/dist/esm/parts/FloatingWrapper/styled.js.map +7 -0
- package/dist/esm/parts/PopoverArrow.js +84 -0
- package/dist/esm/parts/PopoverArrow.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +54 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/utils/computeOffsets.js +60 -0
- package/dist/esm/utils/computeOffsets.js.map +7 -0
- package/dist/esm/utils/computePosition.js +75 -0
- package/dist/esm/utils/computePosition.js.map +7 -0
- package/dist/esm/utils/detectOverflow.js +52 -0
- package/dist/esm/utils/detectOverflow.js.map +7 -0
- package/dist/esm/utils/getAlteredPosition.js +14 -0
- package/dist/esm/utils/getAlteredPosition.js.map +7 -0
- package/dist/esm/utils/getArrowOffset.js +11 -0
- package/dist/esm/utils/getArrowOffset.js.map +7 -0
- package/dist/esm/utils/getExpandedFallbackPlacements.js +28 -0
- package/dist/esm/utils/getExpandedFallbackPlacements.js.map +7 -0
- package/dist/esm/utils/getOppositePlacement.js +14 -0
- package/dist/esm/utils/getOppositePlacement.js.map +7 -0
- package/dist/esm/utils/getOppositeVariationPlacement.js +16 -0
- package/dist/esm/utils/getOppositeVariationPlacement.js.map +7 -0
- package/dist/types/DSFloatingContext.d.ts +34 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/parts/FloatingWrapper/FloatingWrapper.d.ts +5 -0
- package/dist/types/parts/FloatingWrapper/config/useFloatingWrapper.d.ts +12 -0
- package/dist/types/parts/FloatingWrapper/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/FloatingWrapper/constants/index.d.ts +4 -0
- package/dist/types/parts/FloatingWrapper/index.d.ts +1 -0
- package/dist/types/parts/FloatingWrapper/react-desc-prop-types.d.ts +30 -0
- package/dist/types/parts/FloatingWrapper/styled.d.ts +8 -0
- package/dist/types/parts/PopoverArrow.d.ts +8 -0
- package/dist/types/react-desc-prop-types.d.ts +23 -0
- package/dist/types/utils/computeOffsets.d.ts +5 -0
- package/dist/types/utils/computePosition.d.ts +23 -0
- package/dist/types/utils/detectOverflow.d.ts +7 -0
- package/dist/types/utils/getAlteredPosition.d.ts +1 -0
- package/dist/types/utils/getArrowOffset.d.ts +7 -0
- package/dist/types/utils/getExpandedFallbackPlacements.d.ts +2 -0
- package/dist/types/utils/getOppositePlacement.d.ts +1 -0
- package/dist/types/utils/getOppositeVariationPlacement.d.ts +1 -0
- package/package.json +68 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getAlteredPosition_exports = {};
|
|
30
|
+
__export(getAlteredPosition_exports, {
|
|
31
|
+
default: () => getAlteredPosition
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getAlteredPosition_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const hash = {
|
|
36
|
+
left: "top",
|
|
37
|
+
right: "bottom",
|
|
38
|
+
bottom: "right",
|
|
39
|
+
top: "left"
|
|
40
|
+
};
|
|
41
|
+
function getAlteredPosition(placement) {
|
|
42
|
+
return placement.replace(/left|right|bottom|top/g, (matched) => hash[matched]);
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=getAlteredPosition.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getAlteredPosition.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["const hash = {\n left: 'top',\n right: 'bottom',\n bottom: 'right',\n top: 'left',\n} as const;\n\ntype Placements = keyof typeof hash;\n\nexport default function getAlteredPosition(placement: string) {\n return placement.replace(/left|right|bottom|top/g, (matched: string) => hash[matched as Placements]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,MAAM,OAAO;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAIe,SAAR,mBAAoC,WAAmB;AAC5D,SAAO,UAAU,QAAQ,0BAA0B,CAAC,YAAoB,KAAK,OAAqB,CAAC;AACrG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getArrowOffset_exports = {};
|
|
30
|
+
__export(getArrowOffset_exports, {
|
|
31
|
+
getArrowOffset: () => getArrowOffset
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getArrowOffset_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const getArrowOffset = (placement, isVertical) => {
|
|
36
|
+
if (isVertical) {
|
|
37
|
+
return { left: placement.endsWith("end") ? "95%" : placement.endsWith("start") ? "5%" : "50%" };
|
|
38
|
+
}
|
|
39
|
+
return { top: placement.endsWith("start") ? "75%" : placement.endsWith("end") ? "25%" : "50%" };
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=getArrowOffset.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getArrowOffset.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\nexport const getArrowOffset = (placement: string, isVertical: boolean) => {\n if (isVertical) {\n return { left: placement.endsWith('end') ? '95%' : placement.endsWith('start') ? '5%' : '50%' };\n }\n return { top: placement.endsWith('start') ? '75%' : placement.endsWith('end') ? '25%' : '50%' };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADChB,MAAM,iBAAiB,CAAC,WAAmB,eAAwB;AACxE,MAAI,YAAY;AACd,WAAO,EAAE,MAAM,UAAU,SAAS,KAAK,IAAI,QAAQ,UAAU,SAAS,OAAO,IAAI,OAAO,MAAM;AAAA,EAChG;AACA,SAAO,EAAE,KAAK,UAAU,SAAS,OAAO,IAAI,QAAQ,UAAU,SAAS,KAAK,IAAI,QAAQ,MAAM;AAChG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getExpandedFallbackPlacements_exports = {};
|
|
30
|
+
__export(getExpandedFallbackPlacements_exports, {
|
|
31
|
+
getExpandedFallbackPlacements: () => getExpandedFallbackPlacements
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getExpandedFallbackPlacements_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_getOppositePlacement = __toESM(require("./getOppositePlacement.js"));
|
|
36
|
+
var import_getOppositeVariationPlacement = __toESM(require("./getOppositeVariationPlacement.js"));
|
|
37
|
+
var import_getAlteredPosition = __toESM(require("./getAlteredPosition.js"));
|
|
38
|
+
const hash = {
|
|
39
|
+
left: "bottom-start",
|
|
40
|
+
right: "top-start",
|
|
41
|
+
bottom: "top-start",
|
|
42
|
+
top: "bottom-start"
|
|
43
|
+
};
|
|
44
|
+
function getAuxPlacement(placement) {
|
|
45
|
+
return placement.replace(/left|right|bottom|top/g, (matched) => hash[matched]);
|
|
46
|
+
}
|
|
47
|
+
const getExpandedFallbackPlacements = (placement) => {
|
|
48
|
+
const oppositePlacement = (0, import_getOppositePlacement.default)(placement);
|
|
49
|
+
return [
|
|
50
|
+
oppositePlacement,
|
|
51
|
+
(0, import_getOppositeVariationPlacement.default)(placement),
|
|
52
|
+
(0, import_getAlteredPosition.default)(placement),
|
|
53
|
+
(0, import_getOppositePlacement.default)((0, import_getAlteredPosition.default)(placement)),
|
|
54
|
+
getAuxPlacement(placement),
|
|
55
|
+
(0, import_getOppositePlacement.default)(getAuxPlacement(placement))
|
|
56
|
+
];
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=getExpandedFallbackPlacements.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getExpandedFallbackPlacements.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import getOppositePlacement from './getOppositePlacement.js';\nimport getOppositeVariationPlacement from './getOppositeVariationPlacement.js';\nimport getAlteredPosition from './getAlteredPosition.js';\nimport type { DSHookFloatingContextT } from '../react-desc-prop-types.js';\n\nconst hash = {\n left: 'bottom-start',\n right: 'top-start',\n bottom: 'top-start',\n top: 'bottom-start',\n} as const;\n\nfunction getAuxPlacement(placement: string) {\n return placement.replace(/left|right|bottom|top/g, (matched: string) => hash[matched as keyof typeof hash]);\n}\n\nexport const getExpandedFallbackPlacements = (placement: DSHookFloatingContextT.PopperPlacementsT) => {\n const oppositePlacement = getOppositePlacement(placement);\n return [\n oppositePlacement,\n getOppositeVariationPlacement(placement),\n getAlteredPosition(placement),\n getOppositePlacement(getAlteredPosition(placement)),\n getAuxPlacement(placement),\n getOppositePlacement(getAuxPlacement(placement)),\n ];\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kCAAiC;AACjC,2CAA0C;AAC1C,gCAA+B;AAG/B,MAAM,OAAO;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAEA,SAAS,gBAAgB,WAAmB;AAC1C,SAAO,UAAU,QAAQ,0BAA0B,CAAC,YAAoB,KAAK,OAA4B,CAAC;AAC5G;AAEO,MAAM,gCAAgC,CAAC,cAAwD;AACpG,QAAM,wBAAoB,4BAAAA,SAAqB,SAAS;AACxD,SAAO;AAAA,IACL;AAAA,QACA,qCAAAC,SAA8B,SAAS;AAAA,QACvC,0BAAAC,SAAmB,SAAS;AAAA,QAC5B,4BAAAF,aAAqB,0BAAAE,SAAmB,SAAS,CAAC;AAAA,IAClD,gBAAgB,SAAS;AAAA,QACzB,4BAAAF,SAAqB,gBAAgB,SAAS,CAAC;AAAA,EACjD;AACF;",
|
|
6
|
+
"names": ["getOppositePlacement", "getOppositeVariationPlacement", "getAlteredPosition"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getOppositePlacement_exports = {};
|
|
30
|
+
__export(getOppositePlacement_exports, {
|
|
31
|
+
default: () => getOppositePlacement
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getOppositePlacement_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const hash = {
|
|
36
|
+
left: "right",
|
|
37
|
+
right: "left",
|
|
38
|
+
bottom: "top",
|
|
39
|
+
top: "bottom"
|
|
40
|
+
};
|
|
41
|
+
function getOppositePlacement(placement) {
|
|
42
|
+
return placement.replace(/left|right|bottom|top/g, (matched) => hash[matched]);
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=getOppositePlacement.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getOppositePlacement.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["const hash = {\n left: 'right',\n right: 'left',\n bottom: 'top',\n top: 'bottom',\n} as const;\n\ntype Placements = keyof typeof hash;\n\nexport default function getOppositePlacement(placement: string) {\n return placement.replace(/left|right|bottom|top/g, (matched: string) => hash[matched as Placements]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,MAAM,OAAO;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAIe,SAAR,qBAAsC,WAAmB;AAC9D,SAAO,UAAU,QAAQ,0BAA0B,CAAC,YAAoB,KAAK,OAAqB,CAAC;AACrG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getOppositeVariationPlacement_exports = {};
|
|
30
|
+
__export(getOppositeVariationPlacement_exports, {
|
|
31
|
+
default: () => getOppositeVariationPlacement
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getOppositeVariationPlacement_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const hash = {
|
|
36
|
+
start: "end",
|
|
37
|
+
end: "start"
|
|
38
|
+
};
|
|
39
|
+
function getOppositeVariationPlacement(placement) {
|
|
40
|
+
const replace = placement.replace(/start|end/g, (matched) => hash[matched]);
|
|
41
|
+
if (replace === placement) {
|
|
42
|
+
return placement === `right` ? `left` : `right`;
|
|
43
|
+
}
|
|
44
|
+
return replace;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=getOppositeVariationPlacement.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getOppositeVariationPlacement.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["const hash = {\n start: 'end',\n end: 'start',\n} as const;\n\ntype Placements = keyof typeof hash;\n\nexport default function getOppositeVariationPlacement(placement: string) {\n const replace = placement.replace(/start|end/g, (matched: string) => hash[matched as Placements]);\n if (replace === placement) {\n return placement === `right` ? `left` : `right`;\n }\n return replace;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,KAAK;AACP;AAIe,SAAR,8BAA+C,WAAmB;AACvE,QAAM,UAAU,UAAU,QAAQ,cAAc,CAAC,YAAoB,KAAK,OAAqB,CAAC;AAChG,MAAI,YAAY,WAAW;AACzB,WAAO,cAAc,UAAU,SAAS;AAAA,EAC1C;AACA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useState, useEffect, useMemo } from "react";
|
|
3
|
+
import { debounce } from "lodash";
|
|
4
|
+
import {
|
|
5
|
+
useMemoMergePropsWithDefault,
|
|
6
|
+
useValidateTypescriptPropTypes,
|
|
7
|
+
describe
|
|
8
|
+
} from "@elliemae/ds-props-helpers";
|
|
9
|
+
import { useHeadlessTooltip } from "@elliemae/ds-hooks-headless-tooltip";
|
|
10
|
+
import { mergeRefs } from "@elliemae/ds-system";
|
|
11
|
+
import { computePosition } from "./utils/computePosition.js";
|
|
12
|
+
import { defaultProps, DSFloatingContextPropTypes } from "./react-desc-prop-types.js";
|
|
13
|
+
const useFloatingContext = (props = {}) => {
|
|
14
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
15
|
+
useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, "FloatingContext");
|
|
16
|
+
const {
|
|
17
|
+
withoutPortal,
|
|
18
|
+
withoutAnimation,
|
|
19
|
+
portalDOMContainer,
|
|
20
|
+
animationDuration,
|
|
21
|
+
placement,
|
|
22
|
+
customOffset,
|
|
23
|
+
placementOrderPreference,
|
|
24
|
+
onOpen,
|
|
25
|
+
onClose
|
|
26
|
+
} = propsWithDefault;
|
|
27
|
+
const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });
|
|
28
|
+
const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
|
|
29
|
+
const [floatingStyles, setFloatingStyles] = useState({
|
|
30
|
+
position: "absolute",
|
|
31
|
+
zIndex: 3e3,
|
|
32
|
+
top: 0,
|
|
33
|
+
left: 0
|
|
34
|
+
});
|
|
35
|
+
const [arrowStyles, setArrowStyles] = useState({
|
|
36
|
+
style: { left: 0 },
|
|
37
|
+
placement: "top"
|
|
38
|
+
});
|
|
39
|
+
const [reference, _setReference] = React2.useState(null);
|
|
40
|
+
const [floating, setFloating] = React2.useState(null);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
const update = () => {
|
|
43
|
+
if (reference && floating) {
|
|
44
|
+
const { coordsStyle, finalPlacement, coordsArrow } = computePosition({
|
|
45
|
+
reference,
|
|
46
|
+
floating,
|
|
47
|
+
placement,
|
|
48
|
+
placementOrderPreference,
|
|
49
|
+
customOffset,
|
|
50
|
+
withoutPortal
|
|
51
|
+
});
|
|
52
|
+
const styles = {
|
|
53
|
+
position: "absolute",
|
|
54
|
+
zIndex: 3e3,
|
|
55
|
+
top: 0,
|
|
56
|
+
left: 0,
|
|
57
|
+
...coordsStyle
|
|
58
|
+
};
|
|
59
|
+
setFloatingStyles(styles);
|
|
60
|
+
setArrowStyles({ style: coordsArrow, placement: finalPlacement });
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
update();
|
|
64
|
+
const debouncedCb = debounce(update, 300);
|
|
65
|
+
window.addEventListener("scroll", debouncedCb);
|
|
66
|
+
return () => {
|
|
67
|
+
window.removeEventListener("scroll", debouncedCb);
|
|
68
|
+
};
|
|
69
|
+
}, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
|
|
70
|
+
const setReference = mergeRefs(_setReference, setReferenceElement);
|
|
71
|
+
const refs = React2.useMemo(
|
|
72
|
+
() => ({
|
|
73
|
+
setReference,
|
|
74
|
+
setFloating
|
|
75
|
+
}),
|
|
76
|
+
[setReference, setFloating]
|
|
77
|
+
);
|
|
78
|
+
const handlers = React2.useMemo(
|
|
79
|
+
() => ({
|
|
80
|
+
onMouseEnter: tooltipHelpers.onMouseEnter,
|
|
81
|
+
onMouseLeave: tooltipHelpers.onMouseLeave,
|
|
82
|
+
onFocus: tooltipHelpers.onFocus,
|
|
83
|
+
onBlur: tooltipHelpers.onBlur
|
|
84
|
+
}),
|
|
85
|
+
[tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave]
|
|
86
|
+
);
|
|
87
|
+
return useMemo(
|
|
88
|
+
() => ({
|
|
89
|
+
refs,
|
|
90
|
+
floatingStyles,
|
|
91
|
+
handlers,
|
|
92
|
+
isOpen: tooltipHelpers.shouldShowPopover,
|
|
93
|
+
arrowStyles,
|
|
94
|
+
hideTooltip,
|
|
95
|
+
showTooltip,
|
|
96
|
+
context: {
|
|
97
|
+
withoutPortal,
|
|
98
|
+
withoutAnimation,
|
|
99
|
+
portalDOMContainer,
|
|
100
|
+
animationDuration
|
|
101
|
+
}
|
|
102
|
+
}),
|
|
103
|
+
[
|
|
104
|
+
animationDuration,
|
|
105
|
+
arrowStyles,
|
|
106
|
+
floatingStyles,
|
|
107
|
+
handlers,
|
|
108
|
+
hideTooltip,
|
|
109
|
+
portalDOMContainer,
|
|
110
|
+
refs,
|
|
111
|
+
showTooltip,
|
|
112
|
+
tooltipHelpers.shouldShowPopover,
|
|
113
|
+
withoutAnimation,
|
|
114
|
+
withoutPortal
|
|
115
|
+
]
|
|
116
|
+
);
|
|
117
|
+
};
|
|
118
|
+
useFloatingContext.displayName = "FloatingContext";
|
|
119
|
+
const UseFloatingContextWithSchema = describe(useFloatingContext);
|
|
120
|
+
UseFloatingContextWithSchema.propTypes = DSFloatingContextPropTypes;
|
|
121
|
+
export {
|
|
122
|
+
UseFloatingContextWithSchema,
|
|
123
|
+
useFloatingContext
|
|
124
|
+
};
|
|
125
|
+
//# sourceMappingURL=DSFloatingContext.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFloatingContext.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { type CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n const {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n placement,\n customOffset,\n placementOrderPreference,\n onOpen,\n onClose,\n } = propsWithDefault;\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n });\n const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n style: { left: 0 },\n placement: 'top',\n });\n\n const [reference, _setReference] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n useEffect(() => {\n const update = () => {\n if (reference && floating) {\n const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n });\n\n const styles: CSSProperties = {\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n ...coordsStyle,\n };\n setFloatingStyles(styles);\n setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n }\n };\n\n // initial position calculation\n update();\n\n const debouncedCb = debounce(update, 300);\n\n // auto update position on scrolling\n window.addEventListener('scroll', debouncedCb);\n\n return () => {\n window.removeEventListener('scroll', debouncedCb);\n };\n }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const setReference = mergeRefs(_setReference, setReferenceElement);\n\n const refs = React.useMemo(\n () => ({\n setReference,\n setFloating,\n }),\n [setReference, setFloating],\n );\n\n const handlers = React.useMemo(\n () => ({\n onMouseEnter: tooltipHelpers.onMouseEnter,\n onMouseLeave: tooltipHelpers.onMouseLeave,\n onFocus: tooltipHelpers.onFocus,\n onBlur: tooltipHelpers.onBlur,\n }),\n [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n );\n\n return useMemo(\n () => ({\n refs,\n floatingStyles,\n handlers,\n isOpen: tooltipHelpers.shouldShowPopover,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n }),\n [\n animationDuration,\n arrowStyles,\n floatingStyles,\n handlers,\n hideTooltip,\n portalDOMContainer,\n refs,\n showTooltip,\n tooltipHelpers.shouldShowPopover,\n withoutAnimation,\n withoutPortal,\n ],\n );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useFloatingContext, UseFloatingContextWithSchema } from "./DSFloatingContext.js";
|
|
3
|
+
import { PopoverArrow } from "./parts/PopoverArrow.js";
|
|
4
|
+
import { FloatingWrapper, FloatingWrapperWithSchema } from "./parts/FloatingWrapper/index.js";
|
|
5
|
+
export {
|
|
6
|
+
FloatingWrapper,
|
|
7
|
+
FloatingWrapperWithSchema,
|
|
8
|
+
PopoverArrow,
|
|
9
|
+
UseFloatingContextWithSchema,
|
|
10
|
+
useFloatingContext
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { useFloatingContext, UseFloatingContextWithSchema } from './DSFloatingContext.js';\nexport { PopoverArrow } from './parts/PopoverArrow.js';\nexport { FloatingWrapper, FloatingWrapperWithSchema } from './parts/FloatingWrapper/index.js';\nexport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,iCAAiC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo, useState, useCallback, useEffect } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
|
+
import { StyledFloatingAnimation, StyledFloatingWrapper } from "./styled.js";
|
|
7
|
+
import { DSFloatingWrapperPropTypes } from "./react-desc-prop-types.js";
|
|
8
|
+
import { useFloatingWrapper } from "./config/useFloatingWrapper.js";
|
|
9
|
+
import { DSFloatingWrapperName } from "./constants/index.js";
|
|
10
|
+
const FloatingWrapper = (props) => {
|
|
11
|
+
const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);
|
|
12
|
+
const {
|
|
13
|
+
children,
|
|
14
|
+
innerRef,
|
|
15
|
+
floatingStyles,
|
|
16
|
+
isOpen,
|
|
17
|
+
context: { portalDOMContainer, withoutPortal, animationDuration, withoutAnimation }
|
|
18
|
+
} = propsWithDefault;
|
|
19
|
+
const [isAnimating, setIsAnimating] = useState(false);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (isOpen && !withoutAnimation) {
|
|
22
|
+
setIsAnimating(true);
|
|
23
|
+
}
|
|
24
|
+
}, [isOpen, withoutAnimation]);
|
|
25
|
+
const checkAnimationStatus = useCallback(() => {
|
|
26
|
+
if (!isOpen && !withoutAnimation) {
|
|
27
|
+
setIsAnimating(false);
|
|
28
|
+
}
|
|
29
|
+
}, [isOpen, withoutAnimation]);
|
|
30
|
+
const contentJSX = useMemo(
|
|
31
|
+
() => /* @__PURE__ */ jsx(StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, children: /* @__PURE__ */ jsx(
|
|
32
|
+
StyledFloatingAnimation,
|
|
33
|
+
{
|
|
34
|
+
onAnimationEnd: checkAnimationStatus,
|
|
35
|
+
isOpen,
|
|
36
|
+
animationDuration,
|
|
37
|
+
withoutAnimation,
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
) }),
|
|
41
|
+
[
|
|
42
|
+
animationDuration,
|
|
43
|
+
checkAnimationStatus,
|
|
44
|
+
children,
|
|
45
|
+
floatingStyles,
|
|
46
|
+
innerRef,
|
|
47
|
+
isOpen,
|
|
48
|
+
withoutAnimation,
|
|
49
|
+
xstyledProps
|
|
50
|
+
]
|
|
51
|
+
);
|
|
52
|
+
if (isOpen || isAnimating) {
|
|
53
|
+
if (withoutPortal === true) return contentJSX;
|
|
54
|
+
if (!withoutPortal) return /* @__PURE__ */ jsx(Fragment, { children: createPortal(contentJSX, portalDOMContainer || document.body) });
|
|
55
|
+
}
|
|
56
|
+
return null;
|
|
57
|
+
};
|
|
58
|
+
FloatingWrapper.displayName = DSFloatingWrapperName;
|
|
59
|
+
const FloatingWrapperWithSchema = describe(FloatingWrapper);
|
|
60
|
+
FloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes;
|
|
61
|
+
export {
|
|
62
|
+
FloatingWrapper,
|
|
63
|
+
FloatingWrapperWithSchema
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=FloatingWrapper.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useState, useCallback, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { StyledFloatingAnimation, StyledFloatingWrapper } from './styled.js';\nimport { type DSFloatingWrapperT, DSFloatingWrapperPropTypes } from './react-desc-prop-types.js';\nimport { useFloatingWrapper } from './config/useFloatingWrapper.js';\nimport { DSFloatingWrapperName } from './constants/index.js';\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n const {\n children,\n innerRef,\n floatingStyles,\n isOpen,\n context: { portalDOMContainer, withoutPortal, animationDuration, withoutAnimation },\n } = propsWithDefault;\n const [isAnimating, setIsAnimating] = useState(false);\n useEffect(() => {\n if (isOpen && !withoutAnimation) {\n setIsAnimating(true);\n }\n }, [isOpen, withoutAnimation]);\n\n const checkAnimationStatus = useCallback(() => {\n if (!isOpen && !withoutAnimation) {\n setIsAnimating(false);\n }\n }, [isOpen, withoutAnimation]);\n\n const contentJSX = useMemo(\n () => (\n <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps}>\n <StyledFloatingAnimation\n onAnimationEnd={checkAnimationStatus}\n isOpen={isOpen}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n >\n {children}\n </StyledFloatingAnimation>\n </StyledFloatingWrapper>\n ),\n [\n animationDuration,\n checkAnimationStatus,\n children,\n floatingStyles,\n innerRef,\n isOpen,\n withoutAnimation,\n xstyledProps,\n ],\n );\n if (isOpen || isAnimating) {\n if (withoutPortal === true) return contentJSX;\n if (!withoutPortal) return <>{createPortal(contentJSX, portalDOMContainer || document.body)}</>;\n }\n return null;\n};\n\nFloatingWrapper.displayName = DSFloatingWrapperName;\nconst FloatingWrapperWithSchema = describe(FloatingWrapper);\nFloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\nexport { FloatingWrapper, FloatingWrapperWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiCf,SAuBuB,UAvBvB;AAjCR,SAAgB,SAAS,UAAU,aAAa,iBAAiB;AACjE,SAAS,oBAAoB;AAC7B,SAAS,gBAAoC;AAC7C,SAAS,yBAAyB,6BAA6B;AAC/D,SAAkC,kCAAkC;AACpE,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAEtC,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,aAAa,IAAI,mBAAmB,KAAK;AACnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,EAAE,oBAAoB,eAAe,mBAAmB,iBAAiB;AAAA,EACpF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,YAAU,MAAM;AACd,QAAI,UAAU,CAAC,kBAAkB;AAC/B,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAE7B,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,UAAU,CAAC,kBAAkB;AAChC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAE7B,QAAM,aAAa;AAAA,IACjB,MACE,oBAAC,yBAAsB,UAAoB,OAAO,gBAAiB,GAAG,cACpE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAgB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,UAAU,aAAa;AACzB,QAAI,kBAAkB,KAAM,QAAO;AACnC,QAAI,CAAC,cAAe,QAAO,gCAAG,uBAAa,YAAY,sBAAsB,SAAS,IAAI,GAAE;AAAA,EAC9F;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import { uid } from "uid";
|
|
5
|
+
import { defaultProps } from "../react-desc-prop-types.js";
|
|
6
|
+
const useFloatingWrapper = (propsFromUser) => {
|
|
7
|
+
const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
|
|
8
|
+
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
9
|
+
const instanceUid = React2.useMemo(() => uid(5), []);
|
|
10
|
+
return React2.useMemo(
|
|
11
|
+
() => ({
|
|
12
|
+
propsWithDefault,
|
|
13
|
+
xstyledProps,
|
|
14
|
+
instanceUid
|
|
15
|
+
// ...eventHandlers,
|
|
16
|
+
}),
|
|
17
|
+
[
|
|
18
|
+
propsWithDefault,
|
|
19
|
+
xstyledProps,
|
|
20
|
+
instanceUid
|
|
21
|
+
// eventHandlers,
|
|
22
|
+
]
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
useFloatingWrapper
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=useFloatingWrapper.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FloatingWrapper/config/useFloatingWrapper.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSFloatingWrapperT, defaultProps } from '../react-desc-prop-types.js';\n\nexport interface DSFloatingWrapperCTX {\n propsWithDefault: DSFloatingWrapperT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useFloatingWrapper = (propsFromUser: DSFloatingWrapperT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSFloatingWrapperT.InternalProps>(propsFromUser, defaultProps);\n // useValidateProps(propsWithDefault, DSFloatingWrapperPropTypes);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const instanceUid = React.useMemo(() => uid(5), []);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n instanceUid,\n // ...eventHandlers,\n }),\n [\n propsWithDefault,\n xstyledProps,\n instanceUid,\n // eventHandlers,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAAkC,oBAAoB;AAQ/C,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AAKnH,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAMlD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
|
+
const useValidateProps = (props, propTypes) => {
|
|
4
|
+
useValidateTypescriptPropTypes(props, propTypes, "FloatingWrapper");
|
|
5
|
+
};
|
|
6
|
+
export {
|
|
7
|
+
useValidateProps
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FloatingWrapper/config/useValidateProps.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSFloatingWrapperT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (\n props: DSFloatingWrapperT.InternalProps,\n propTypes: WeakValidationMap<unknown>,\n): void => {\n useValidateTypescriptPropTypes(props, propTypes, 'FloatingWrapper');\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAIxC,MAAM,mBAAmB,CAC9B,OACA,cACS;AACT,iCAA+B,OAAO,WAAW,iBAAiB;AACpE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/FloatingWrapper/constants/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSFloatingWrapperName = 'DSFloatingWrapper';\n\nexport const DSFloatingWrapperSlots = {\n ROOT: 'root',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AACR;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|