pds-dev-kit-web 1.9.0-beta.6 → 1.9.0-beta.7
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/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/src/common/styles/movement/keyframes.d.ts +2 -0
- package/dist/src/common/styles/movement/keyframes.js +9 -7
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js +8 -8
- package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js +41 -16
- package/dist/src/sub/DynamicLayout/hooks/index.d.ts +2 -0
- package/dist/src/sub/DynamicLayout/hooks/index.js +5 -1
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/index.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/index.js +8 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.d.ts +10 -0
- package/dist/src/sub/DynamicLayout/hooks/useUnmountStyle/useUmountStyle.js +65 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.d.ts → 0.47127a3a.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{0.2023c95c.iframe.bundle.js → 0.47127a3a.iframe.bundle.js} +7 -7
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.d.ts → 4.27d0b6b3.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{4.d1de0501.iframe.bundle.js → 4.27d0b6b3.iframe.bundle.js} +70 -70
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.d.ts → 5.ccee87a9.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{5.2f192ddf.iframe.bundle.js → 5.ccee87a9.iframe.bundle.js} +13 -13
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.d.ts → 6.935fc424.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{6.62fc7663.iframe.bundle.js → 6.935fc424.iframe.bundle.js} +6 -6
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.d.ts → 7.9097368c.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{7.3518bf24.iframe.bundle.js → 7.9097368c.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{main.c8ffb728.iframe.bundle.d.ts → main.6d823b88.iframe.bundle.d.ts} +3 -1
- package/dist/storybook-static/{main.c8ffb728.iframe.bundle.js → main.6d823b88.iframe.bundle.js} +1004 -967
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.d.ts → runtime~main.98015d18.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{runtime~main.54fba058.iframe.bundle.js → runtime~main.98015d18.iframe.bundle.js} +1 -1
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.d.ts → vendors~main.3af2bf31.iframe.bundle.d.ts} +0 -0
- package/dist/storybook-static/{vendors~main.dd7c8d3f.iframe.bundle.js → vendors~main.3af2bf31.iframe.bundle.js} +557 -557
- package/package.json +1 -1
- package/release-note.md +5 -18
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSi
|
|
|
2
2
|
export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PDSIconType, ForwardedRefType };
|
|
3
3
|
export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
|
|
4
4
|
export { theme };
|
|
5
|
+
export * from './src/common/styles/movement/keyframes';
|
|
5
6
|
export * from './src/common/styles/movement/animationStyle';
|
|
6
7
|
export * from './src/common/styles/movement/transitionStyle';
|
|
7
8
|
export { Form };
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,8 @@ Object.defineProperty(exports, "uiColors", { enumerable: true, get: function ()
|
|
|
32
32
|
Object.defineProperty(exports, "customTheme", { enumerable: true, get: function () { return common_1.customTheme; } });
|
|
33
33
|
Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return common_1.theme; } });
|
|
34
34
|
Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return common_1.Form; } });
|
|
35
|
+
// keyframes
|
|
36
|
+
__exportStar(require("./src/common/styles/movement/keyframes"), exports);
|
|
35
37
|
// animation style
|
|
36
38
|
__exportStar(require("./src/common/styles/movement/animationStyle"), exports);
|
|
37
39
|
// transition style
|
|
@@ -8,6 +8,8 @@ export declare const scaleDownIncludeTranslate: import("styled-components").Keyf
|
|
|
8
8
|
export declare const gelatine: import("styled-components").Keyframes;
|
|
9
9
|
export declare const scaleBounceIn: import("styled-components").Keyframes;
|
|
10
10
|
export declare const scaleBounceIn02: import("styled-components").Keyframes;
|
|
11
|
+
export declare const scaleBounceOut: import("styled-components").Keyframes;
|
|
12
|
+
export declare const scaleBounceOut02: import("styled-components").Keyframes;
|
|
11
13
|
export declare const scaleBounceInIncludeTranslate: import("styled-components").Keyframes;
|
|
12
14
|
export declare const scaleBounceOutIncludeTranslate: import("styled-components").Keyframes;
|
|
13
15
|
export declare const scaleBounceInIncludeTranslate02: import("styled-components").Keyframes;
|
|
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
|
|
7
|
+
exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceOut02 = exports.scaleBounceOut = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
9
|
exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0.7; }\n to { opacity: 1; }\n"])));
|
|
10
10
|
exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0.7; }\n"])));
|
|
@@ -14,10 +14,12 @@ exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (temp
|
|
|
14
14
|
exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"], ["\n from { transform: scale(0.97) translate(-50%, -50%); }\n to { transform: scale(1) translate(-50%, -50%); }\n"])));
|
|
15
15
|
exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"], ["\n from { transform: scale(1) translate(-50%, -50%); }\n to { transform: scale(0.97) translate(-50%, -50%); }\n"])));
|
|
16
16
|
exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"], ["\n from, to {\n transform: scale(1, 1);\n }\n 25% {\n transform: scale(0.95, 1.1);\n }\n 50% {\n transform: scale(1.05, 0.9);\n }\n 75% {\n transform: scale(0.97, 1.05);\n }\n"])));
|
|
17
|
-
exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n
|
|
17
|
+
exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n 33% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"], ["\n from, to {\n transform: scale(1);\n }\n 33% {\n transform: scale(1.03);\n }\n 66% {\n transform: scale(0.99);\n }\n"])));
|
|
18
18
|
exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"], ["\n from {\n transform: scale(0.9);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(1);\n }\n"])));
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.
|
|
22
|
-
exports.
|
|
23
|
-
|
|
19
|
+
exports.scaleBounceOut = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n from, to {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.99);\n }\n 66% {\n transform: scale(1.03);\n }\n"], ["\n from, to {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.99);\n }\n 66% {\n transform: scale(1.03);\n }\n"])));
|
|
20
|
+
exports.scaleBounceOut02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n from {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(0.9);\n }\n"], ["\n from {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.01);\n }\n to {\n transform: scale(0.9);\n }\n"])));
|
|
21
|
+
exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n 66% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n"])));
|
|
22
|
+
exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"], ["\n from, to {\n transform: scale(1) translate(-50%, -50%);\n }\n 33% {\n transform: scale(0.99) translate(-50%, -50%);\n }\n 66% {\n transform: scale(1.03) translate(-50%, -50%);\n }\n"])));
|
|
23
|
+
exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(0.9) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(1) translate(-50%, -50%);\n }\n"])));
|
|
24
|
+
exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"], ["\n from {\n transform: scale(1) translate(-50%, -50%);\n }\n 50% {\n transform: scale(1.01) translate(-50%, -50%);\n }\n to {\n transform: scale(0.9) translate(-50%, -50%);\n }\n"])));
|
|
25
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
|
|
@@ -18,30 +18,30 @@ function OverlayBorders(_a) {
|
|
|
18
18
|
react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
|
|
19
19
|
}
|
|
20
20
|
exports.default = OverlayBorders;
|
|
21
|
-
var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"], ["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
21
|
+
var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n top: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
22
22
|
var theme = _a.theme;
|
|
23
|
-
return theme.
|
|
23
|
+
return theme.ui_editor_preview_editing;
|
|
24
24
|
}, function (_a) {
|
|
25
25
|
var zIndex = _a.zIndex;
|
|
26
26
|
return zIndex;
|
|
27
27
|
});
|
|
28
|
-
var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n z-index: ", ";\n"], ["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
28
|
+
var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n left: 0;\n width: 4px;\n height: 100%;\n position: absolute;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
29
29
|
var theme = _a.theme;
|
|
30
|
-
return theme.
|
|
30
|
+
return theme.ui_editor_preview_editing;
|
|
31
31
|
}, function (_a) {
|
|
32
32
|
var zIndex = _a.zIndex;
|
|
33
33
|
return zIndex;
|
|
34
34
|
});
|
|
35
|
-
var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n"], ["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
35
|
+
var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n transition: background-color 0.2s ease-out;\n"], ["\n right: 0;\n position: absolute;\n height: 100%;\n width: 4px;\n background-color: ", ";\n z-index: ", ";\n transition: background-color 0.2s ease-out;\n"])), function (_a) {
|
|
36
36
|
var theme = _a.theme;
|
|
37
|
-
return theme.
|
|
37
|
+
return theme.ui_editor_preview_editing;
|
|
38
38
|
}, function (_a) {
|
|
39
39
|
var zIndex = _a.zIndex;
|
|
40
40
|
return zIndex;
|
|
41
41
|
});
|
|
42
|
-
var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"], ["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n z-index: ", ";\n"])), function (_a) {
|
|
42
|
+
var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"], ["\n bottom: 0;\n position: absolute;\n height: 4px;\n width: 100%;\n background-color: ", ";\n transition: background-color 0.2s ease-out;\n z-index: ", ";\n"])), function (_a) {
|
|
43
43
|
var theme = _a.theme;
|
|
44
|
-
return theme.
|
|
44
|
+
return theme.ui_editor_preview_editing;
|
|
45
45
|
}, function (_a) {
|
|
46
46
|
var zIndex = _a.zIndex;
|
|
47
47
|
return zIndex;
|
|
@@ -37,7 +37,15 @@ function SectionBox(_a) {
|
|
|
37
37
|
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
38
38
|
var sectionRef = (0, react_1.useRef)(null);
|
|
39
39
|
var _b = (0, react_1.useState)(false), isHover = _b[0], setIsHover = _b[1];
|
|
40
|
-
var
|
|
40
|
+
var _c = (0, react_1.useState)(false), fadeOut = _c[0], setFadeout = _c[1];
|
|
41
|
+
var _d = (0, react_1.useState)(false), hasNoChild = _d[0], setHasNoChild = _d[1];
|
|
42
|
+
var onMouseLeaveAsync = (0, useLazyUnmount_1.useLazyUnmount)({ doUnmount: function () { return setIsHover(false); } }, 150);
|
|
43
|
+
var onClickDelayedAsync = (0, useLazyUnmount_1.useLazyUnmount)({
|
|
44
|
+
doUnmount: function () {
|
|
45
|
+
onClick();
|
|
46
|
+
setFadeout(false);
|
|
47
|
+
}
|
|
48
|
+
}, 150);
|
|
41
49
|
(0, react_1.useEffect)(function () {
|
|
42
50
|
var _a;
|
|
43
51
|
if (!sectionRef) {
|
|
@@ -47,30 +55,46 @@ function SectionBox(_a) {
|
|
|
47
55
|
(_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
48
56
|
}
|
|
49
57
|
}, [scrollIntoThisSection]);
|
|
58
|
+
(0, react_1.useEffect)(function () {
|
|
59
|
+
if (!sectionRef.current) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (sectionRef.current.getBoundingClientRect().height === 0) {
|
|
63
|
+
setHasNoChild(true);
|
|
64
|
+
}
|
|
65
|
+
}, [isEditing, children]);
|
|
50
66
|
var onMouseEnter = function () {
|
|
51
67
|
setIsHover(true);
|
|
52
68
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(
|
|
60
|
-
react_1.default.createElement(
|
|
61
|
-
|
|
69
|
+
var onClickSectionBox = function () {
|
|
70
|
+
setFadeout(true);
|
|
71
|
+
onClickDelayedAsync();
|
|
72
|
+
};
|
|
73
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
74
|
+
react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
|
|
75
|
+
isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, { isMounting: true },
|
|
76
|
+
react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
|
|
77
|
+
react_1.default.createElement(TopRightAbsoluteBox, null,
|
|
78
|
+
react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
|
|
79
|
+
isHover && !isEditing && (react_1.default.createElement(DimmedEditOverlay, { fadeOut: fadeOut },
|
|
80
|
+
react_1.default.createElement(S_EditButton, null,
|
|
81
|
+
react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
|
|
82
|
+
children)));
|
|
62
83
|
}
|
|
63
84
|
exports.default = SectionBox;
|
|
64
|
-
var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n"], ["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n"])), function (_a) {
|
|
85
|
+
var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n transition: background-color 0.2s ease-out;\n"], ["\n top: 0;\n right: 0;\n position: absolute;\n z-index: 4;\n background-color: ", ";\n padding: 8px 10px;\n transition: background-color 0.2s ease-out;\n"])), function (_a) {
|
|
65
86
|
var theme = _a.theme;
|
|
66
|
-
return theme.
|
|
87
|
+
return theme.ui_editor_preview_editing;
|
|
67
88
|
});
|
|
68
89
|
var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
69
|
-
var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color:
|
|
90
|
+
var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color: ", ";\n opacity: 0;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 0.2s ease-out;\n\n &:hover {\n opacity: 1;\n }\n\n animation: ", ";\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 0;\n }\n }\n"], ["\n position: absolute;\n background-color: ", ";\n opacity: 0;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 0.2s ease-out;\n\n &:hover {\n opacity: 1;\n }\n\n animation: ", ";\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 0;\n }\n }\n"])), function (_a) {
|
|
70
91
|
var theme = _a.theme;
|
|
71
92
|
return theme.ui_pages_section_dimmed;
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var fadeOut = _a.fadeOut;
|
|
95
|
+
return fadeOut && 'fadeOut 0.2s ease-out';
|
|
72
96
|
});
|
|
73
|
-
var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n
|
|
97
|
+
var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n font-weight: bold;\n height: 56px;\n display: flex;\n border-radius: 14px;\n justify-content: center;\n align-items: center;\n padding: 0 ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
74
98
|
var theme = _a.theme;
|
|
75
99
|
return theme.ui_71;
|
|
76
100
|
}, function (_a) {
|
|
@@ -82,5 +106,6 @@ var S_EditButton = styled_components_1.default.div(templateObject_4 || (template
|
|
|
82
106
|
}, function (_a) {
|
|
83
107
|
var theme = _a.theme;
|
|
84
108
|
return theme.ui_73;
|
|
85
|
-
}
|
|
86
|
-
var
|
|
109
|
+
});
|
|
110
|
+
var S_Editing = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & > div {\n animation: fadeIn 0.2s ease-out;\n }\n\n @keyframes fadeIn {\n 0% {\n opacity: 0.2;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 1;\n }\n }\n"], ["\n & > div {\n animation: fadeIn 0.2s ease-out;\n }\n\n @keyframes fadeIn {\n 0% {\n opacity: 0.2;\n }\n\n 50% {\n opacity: 0.6;\n }\n\n 100% {\n opacity: 1;\n }\n }\n"])));
|
|
111
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.usePrevious = void 0;
|
|
3
|
+
exports.useLazyUnmount = exports.usePrevious = exports.useUnmountStyle = void 0;
|
|
4
|
+
var useUnmountStyle_1 = require("./useUnmountStyle");
|
|
5
|
+
Object.defineProperty(exports, "useUnmountStyle", { enumerable: true, get: function () { return useUnmountStyle_1.useUnmountStyle; } });
|
|
4
6
|
var usePrevious_1 = require("./usePrevious");
|
|
5
7
|
Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return usePrevious_1.usePrevious; } });
|
|
8
|
+
var useLazyUnmount_1 = require("./useLazyUnmount");
|
|
9
|
+
Object.defineProperty(exports, "useLazyUnmount", { enumerable: true, get: function () { return useLazyUnmount_1.useLazyUnmount; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as useUnmountStyle } from './useUmountStyle';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useUnmountStyle = void 0;
|
|
7
|
+
var useUmountStyle_1 = require("./useUmountStyle");
|
|
8
|
+
Object.defineProperty(exports, "useUnmountStyle", { enumerable: true, get: function () { return __importDefault(useUmountStyle_1).default; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare type Options = {
|
|
2
|
+
mountStyle: Record<string, unknown>;
|
|
3
|
+
unmountStyle: Record<string, unknown>;
|
|
4
|
+
handleUnmount: () => void;
|
|
5
|
+
};
|
|
6
|
+
export default function useUnmountStyle({ mountStyle, unmountStyle, handleUnmount }: Options, delayTime: number): {
|
|
7
|
+
animationStyle: Record<string, unknown>;
|
|
8
|
+
handleUnmountWithAnimation: () => Promise<void>;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
12
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
13
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
14
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
15
|
+
function step(op) {
|
|
16
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
17
|
+
while (_) try {
|
|
18
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
19
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
20
|
+
switch (op[0]) {
|
|
21
|
+
case 0: case 1: t = op; break;
|
|
22
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
23
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
24
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
25
|
+
default:
|
|
26
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
27
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
28
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
29
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
30
|
+
if (t[2]) _.ops.pop();
|
|
31
|
+
_.trys.pop(); continue;
|
|
32
|
+
}
|
|
33
|
+
op = body.call(thisArg, _);
|
|
34
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
35
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
var react_1 = require("react");
|
|
40
|
+
// NOTE: promise의 delay time은 정확하지 않기때문에, 애니메이션 딜레이보다 짧게 가는것이 보기 좋습니다.
|
|
41
|
+
function useUnmountStyle(_a, delayTime) {
|
|
42
|
+
var mountStyle = _a.mountStyle, unmountStyle = _a.unmountStyle, handleUnmount = _a.handleUnmount;
|
|
43
|
+
var _b = (0, react_1.useState)(mountStyle), animationStyle = _b[0], setAnimationStyle = _b[1];
|
|
44
|
+
function handleUnmountWithAnimation() {
|
|
45
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
46
|
+
return __generator(this, function (_a) {
|
|
47
|
+
switch (_a.label) {
|
|
48
|
+
case 0:
|
|
49
|
+
setAnimationStyle(unmountStyle);
|
|
50
|
+
return [4 /*yield*/, new Promise(function (resolve) {
|
|
51
|
+
setTimeout(function () {
|
|
52
|
+
handleUnmount();
|
|
53
|
+
resolve(true);
|
|
54
|
+
}, delayTime);
|
|
55
|
+
})];
|
|
56
|
+
case 1:
|
|
57
|
+
_a.sent();
|
|
58
|
+
return [2 /*return*/];
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
return { animationStyle: animationStyle, handleUnmountWithAnimation: handleUnmountWithAnimation };
|
|
64
|
+
}
|
|
65
|
+
exports.default = useUnmountStyle;
|
package/dist/storybook-static/{0.2023c95c.iframe.bundle.d.ts → 0.47127a3a.iframe.bundle.d.ts}
RENAMED
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(window.webpackJsonp = window.webpackJsonp || []).push([[0], {
|
|
1
|
+
(window.webpackJsonp = window.webpackJsonp || []).push([[0], { 2211: function (module, exports) { var hasElementType = "undefined" != typeof Element, hasMap = "function" == typeof Map, hasSet = "function" == typeof Set, hasArrayBuffer = "function" == typeof ArrayBuffer && !!ArrayBuffer.isView; function equal(a, b) { if (a === b)
|
|
2
2
|
return !0; if (a && b && "object" == typeof a && "object" == typeof b) {
|
|
3
3
|
if (a.constructor !== b.constructor)
|
|
4
4
|
return !1;
|
|
@@ -62,15 +62,15 @@
|
|
|
62
62
|
if ((error.message || "").match(/stack|recursion/i))
|
|
63
63
|
return console.warn("react-fast-compare cannot handle circular refs"), !1;
|
|
64
64
|
throw error;
|
|
65
|
-
} }; },
|
|
65
|
+
} }; }, 2212: function (module, exports, __webpack_require__) {
|
|
66
66
|
"use strict";
|
|
67
67
|
var warning = function () { };
|
|
68
68
|
module.exports = warning;
|
|
69
|
-
},
|
|
69
|
+
}, 698: function (module, __webpack_exports__, __webpack_require__) {
|
|
70
70
|
"use strict";
|
|
71
71
|
__webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, "WithTooltipPure", (function () { return WithTooltip_WithTooltipPure; })), __webpack_require__.d(__webpack_exports__, "WithToolTipState", (function () { return WithTooltip_WithToolTipState; })), __webpack_require__.d(__webpack_exports__, "WithTooltip", (function () { return WithTooltip_WithToolTipState; }));
|
|
72
72
|
__webpack_require__(16), __webpack_require__(45), __webpack_require__(26), __webpack_require__(7), __webpack_require__(19), __webpack_require__(12), __webpack_require__(10), __webpack_require__(21), __webpack_require__(15), __webpack_require__(17), __webpack_require__(9), __webpack_require__(30), __webpack_require__(18), __webpack_require__(54);
|
|
73
|
-
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(
|
|
73
|
+
var react = __webpack_require__(0), react_default = __webpack_require__.n(react), esm = __webpack_require__(3), global_window = __webpack_require__(11), window_default = __webpack_require__.n(global_window), objectWithoutPropertiesLoose = __webpack_require__(118), esm_extends = __webpack_require__(23), inheritsLoose = __webpack_require__(60), react_dom = __webpack_require__(63), ManagerReferenceNodeContext = react.createContext(), ManagerReferenceNodeSetterContext = react.createContext();
|
|
74
74
|
function Manager(_ref) { var children = _ref.children, _React$useState = react.useState(null), referenceNode = _React$useState[0], setReferenceNode = _React$useState[1], hasUnmounted = react.useRef(!1); react.useEffect((function () { return function () { hasUnmounted.current = !0; }; }), []); var handleSetReferenceNode = react.useCallback((function (node) { hasUnmounted.current || setReferenceNode(node); }), []); return react.createElement(ManagerReferenceNodeContext.Provider, { value: referenceNode }, react.createElement(ManagerReferenceNodeSetterContext.Provider, { value: handleSetReferenceNode }, children)); }
|
|
75
75
|
var unwrapArray = function unwrapArray(arg) { return Array.isArray(arg) ? arg[0] : arg; }, safeInvoke = function safeInvoke(fn) { if ("function" == typeof fn) {
|
|
76
76
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
|
|
@@ -227,12 +227,12 @@
|
|
|
227
227
|
} }, requiresIfExists: ["offset"] }, { name: "arrow", enabled: !0, phase: "main", fn: function arrow(_ref) { var _state$modifiersData$, state = _ref.state, name = _ref.name, options = _ref.options, arrowElement = state.elements.arrow, popperOffsets = state.modifiersData.popperOffsets, basePlacement = getBasePlacement(state.placement), axis = getMainAxisFromPlacement(basePlacement), len = [left, right].indexOf(basePlacement) >= 0 ? "height" : "width"; if (arrowElement && popperOffsets) {
|
|
228
228
|
var paddingObject = function toPaddingObject(padding, state) { return mergePaddingObject("number" != typeof (padding = "function" == typeof padding ? padding(Object.assign({}, state.rects, { placement: state.placement })) : padding) ? padding : expandToHashMap(padding, basePlacements)); }(options.padding, state), arrowRect = getLayoutRect(arrowElement), minProp = "y" === axis ? enums_top : left, maxProp = "y" === axis ? bottom : right, endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len], startDiff = popperOffsets[axis] - state.rects.reference[axis], arrowOffsetParent = getOffsetParent(arrowElement), clientSize = arrowOffsetParent ? "y" === axis ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0, centerToReference = endDiff / 2 - startDiff / 2, min = paddingObject[minProp], max = clientSize - arrowRect[len] - paddingObject[maxProp], center = clientSize / 2 - arrowRect[len] / 2 + centerToReference, offset = within(min, center, max), axisProp = axis;
|
|
229
229
|
state.modifiersData[name] = ((_state$modifiersData$ = {})[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
|
|
230
|
-
} }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(
|
|
230
|
+
} }, effect: function arrow_effect(_ref2) { var state = _ref2.state, _options$element = _ref2.options.element, arrowElement = void 0 === _options$element ? "[data-popper-arrow]" : _options$element; null != arrowElement && ("string" != typeof arrowElement || (arrowElement = state.elements.popper.querySelector(arrowElement))) && contains(state.elements.popper, arrowElement) && (state.elements.arrow = arrowElement); }, requires: ["popperOffsets"], requiresIfExists: ["preventOverflow"] }, { name: "hide", enabled: !0, phase: "main", requiresIfExists: ["preventOverflow"], fn: function hide(_ref) { var state = _ref.state, name = _ref.name, referenceRect = state.rects.reference, popperRect = state.rects.popper, preventedOffsets = state.modifiersData.preventOverflow, referenceOverflow = detectOverflow(state, { elementContext: "reference" }), popperAltOverflow = detectOverflow(state, { altBoundary: !0 }), referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect), popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets), isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets), hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); state.modifiersData[name] = { referenceClippingOffsets: referenceClippingOffsets, popperEscapeOffsets: popperEscapeOffsets, isReferenceHidden: isReferenceHidden, hasPopperEscaped: hasPopperEscaped }, state.attributes.popper = Object.assign({}, state.attributes.popper, { "data-popper-reference-hidden": isReferenceHidden, "data-popper-escaped": hasPopperEscaped }); } }] }), react_fast_compare = __webpack_require__(2211), react_fast_compare_default = __webpack_require__.n(react_fast_compare), EMPTY_MODIFIERS = [], NOOP = function NOOP() { }, NOOP_PROMISE = function NOOP_PROMISE() { return Promise.resolve(null); }, Popper_EMPTY_MODIFIERS = [];
|
|
231
231
|
function Popper(_ref) { var _ref$placement = _ref.placement, placement = void 0 === _ref$placement ? "bottom" : _ref$placement, _ref$strategy = _ref.strategy, strategy = void 0 === _ref$strategy ? "absolute" : _ref$strategy, _ref$modifiers = _ref.modifiers, modifiers = void 0 === _ref$modifiers ? Popper_EMPTY_MODIFIERS : _ref$modifiers, referenceElement = _ref.referenceElement, onFirstUpdate = _ref.onFirstUpdate, innerRef = _ref.innerRef, children = _ref.children, referenceNode = react.useContext(ManagerReferenceNodeContext), _React$useState = react.useState(null), popperElement = _React$useState[0], setPopperElement = _React$useState[1], _React$useState2 = react.useState(null), arrowElement = _React$useState2[0], setArrowElement = _React$useState2[1]; react.useEffect((function () { setRef(innerRef, popperElement); }), [innerRef, popperElement]); var options = react.useMemo((function () { return { placement: placement, strategy: strategy, onFirstUpdate: onFirstUpdate, modifiers: [].concat(modifiers, [{ name: "arrow", enabled: null != arrowElement, options: { element: arrowElement } }]) }; }), [placement, strategy, onFirstUpdate, modifiers, arrowElement]), _usePopper = function usePopper(referenceElement, popperElement, options) { void 0 === options && (options = {}); var prevOptions = react.useRef(null), optionsWithDefaults = { onFirstUpdate: options.onFirstUpdate, placement: options.placement || "bottom", strategy: options.strategy || "absolute", modifiers: options.modifiers || EMPTY_MODIFIERS }, _React$useState = react.useState({ styles: { popper: { position: optionsWithDefaults.strategy, left: "0", top: "0" }, arrow: { position: "absolute" } }, attributes: {} }), state = _React$useState[0], setState = _React$useState[1], updateStateModifier = react.useMemo((function () { return { name: "updateState", enabled: !0, phase: "write", fn: function fn(_ref) { var state = _ref.state, elements = Object.keys(state.elements); setState({ styles: fromEntries(elements.map((function (element) { return [element, state.styles[element] || {}]; }))), attributes: fromEntries(elements.map((function (element) { return [element, state.attributes[element]]; }))) }); }, requires: ["computeStyles"] }; }), []), popperOptions = react.useMemo((function () { var newOptions = { onFirstUpdate: optionsWithDefaults.onFirstUpdate, placement: optionsWithDefaults.placement, strategy: optionsWithDefaults.strategy, modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, { name: "applyStyles", enabled: !1 }]) }; return react_fast_compare_default()(prevOptions.current, newOptions) ? prevOptions.current || newOptions : (prevOptions.current = newOptions, newOptions); }), [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]), popperInstanceRef = react.useRef(); return useIsomorphicLayoutEffect((function () { popperInstanceRef.current && popperInstanceRef.current.setOptions(popperOptions); }), [popperOptions]), useIsomorphicLayoutEffect((function () { if (null != referenceElement && null != popperElement) {
|
|
232
232
|
var popperInstance = (options.createPopper || popper_createPopper)(referenceElement, popperElement, popperOptions);
|
|
233
233
|
return popperInstanceRef.current = popperInstance, function () { popperInstance.destroy(), popperInstanceRef.current = null; };
|
|
234
234
|
} }), [referenceElement, popperElement, options.createPopper]), { state: popperInstanceRef.current ? popperInstanceRef.current.state : null, styles: state.styles, attributes: state.attributes, update: popperInstanceRef.current ? popperInstanceRef.current.update : null, forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null }; }(referenceElement || referenceNode, popperElement, options), state = _usePopper.state, styles = _usePopper.styles, forceUpdate = _usePopper.forceUpdate, update = _usePopper.update, childrenProps = react.useMemo((function () { return { ref: setPopperElement, style: styles.popper, placement: state ? state.placement : placement, hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null, isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null, arrowProps: { style: styles.arrow, ref: setArrowElement }, forceUpdate: forceUpdate || NOOP, update: update || NOOP_PROMISE }; }), [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]); return unwrapArray(children)(childrenProps); }
|
|
235
|
-
var warning = __webpack_require__(
|
|
235
|
+
var warning = __webpack_require__(2212), warning_default = __webpack_require__.n(warning);
|
|
236
236
|
function Reference(_ref) { var children = _ref.children, innerRef = _ref.innerRef, setReferenceNode = react.useContext(ManagerReferenceNodeSetterContext), refHandler = react.useCallback((function (node) { setRef(innerRef, node), safeInvoke(setReferenceNode, node); }), [innerRef, setReferenceNode]); return react.useEffect((function () { return function () { return setRef(innerRef, null); }; })), react.useEffect((function () { warning_default()(Boolean(setReferenceNode), "`Reference` should not be used outside of a `Manager` component."); }), [setReferenceNode]), unwrapArray(children)({ ref: refHandler }); }
|
|
237
237
|
var TooltipContext = react_default.a.createContext({}), callAll = function callAll() { for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++)
|
|
238
238
|
fns[_key] = arguments[_key]; return function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++)
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
style.transform = "translate3d(" + x + "px, " + y + "px, 0";
|
|
259
259
|
} return react_default.a.createElement(react_popper_tooltip_Tooltip, Object(esm_extends.a)({ arrowProps: arrowProps, closeOnReferenceHidden: closeOnReferenceHidden, isReferenceHidden: isReferenceHidden, placement: placement, update: update, style: style, tooltip: tooltip, trigger: trigger, mutationObserverOptions: mutationObserverOptions }, { clearScheduled: _this2.clearScheduled, hideTooltip: _this2.hideTooltip, innerRef: ref })); })); return react_default.a.createElement(Manager, null, react_default.a.createElement(Reference, { innerRef: getTriggerRef }, (function (_ref4) { var ref = _ref4.ref; return children({ getTriggerProps: _this2.getTriggerProps, triggerRef: ref }); })), this.getState() && (usePortal ? Object(react_dom.createPortal)(popper, portalContainer) : popper)); }, _proto.isControlled = function isControlled() { return void 0 !== this.props.tooltipShown; }, _proto.getState = function getState() { return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown; }, _proto.isTriggeredBy = function isTriggeredBy(event) { var trigger = this.props.trigger; return trigger === event || Array.isArray(trigger) && trigger.includes(event); }, TooltipTrigger; }(react.Component);
|
|
260
260
|
react_popper_tooltip_TooltipTrigger.defaultProps = { closeOnReferenceHidden: !0, defaultTooltipShown: !1, delayHide: 0, delayShow: 0, followCursor: !1, onVisibilityChange: function noop() { }, placement: "right", portalContainer: canUseDOM() ? document.body : null, trigger: "hover", usePortal: canUseDOM(), mutationObserverOptions: { childList: !0, subtree: !0 }, modifiers: [] };
|
|
261
|
-
var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(85), __webpack_require__(32), __webpack_require__(
|
|
261
|
+
var react_popper_tooltip = react_popper_tooltip_TooltipTrigger, memoizerific = (__webpack_require__(85), __webpack_require__(32), __webpack_require__(178), __webpack_require__(24), __webpack_require__(166)), memoizerific_default = __webpack_require__.n(memoizerific), utils = __webpack_require__(114);
|
|
262
262
|
function _extends() { return _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {
|
|
263
263
|
var source = arguments[i];
|
|
264
264
|
for (var key in source)
|
package/dist/storybook-static/{4.d1de0501.iframe.bundle.d.ts → 4.27d0b6b3.iframe.bundle.d.ts}
RENAMED
|
File without changes
|