@hitachivantara/uikit-react-lab 5.31.1 → 5.32.0
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/Wizard/WizardContent/WizardContent.cjs +12 -16
- package/dist/cjs/Wizard/WizardContent/WizardContent.cjs.map +1 -1
- package/dist/esm/Wizard/WizardContent/WizardContent.js +13 -17
- package/dist/esm/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/package.json +5 -5
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.cjs +0 -39
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.cjs.map +0 -1
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.styles.cjs +0 -23
- package/dist/cjs/Wizard/WizardContent/LoadingContainer.styles.cjs.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js +0 -39
- package/dist/esm/Wizard/WizardContent/LoadingContainer.js.map +0 -1
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js +0 -23
- package/dist/esm/Wizard/WizardContent/LoadingContainer.styles.js.map +0 -1
|
@@ -5,7 +5,6 @@ const React = require("react");
|
|
|
5
5
|
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
6
6
|
const usehooksTs = require("usehooks-ts");
|
|
7
7
|
const WizardContent_styles = require("./WizardContent.styles.cjs");
|
|
8
|
-
const LoadingContainer = require("./LoadingContainer.cjs");
|
|
9
8
|
const WizardContext = require("../WizardContext/WizardContext.cjs");
|
|
10
9
|
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
11
10
|
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
@@ -21,17 +20,14 @@ const HvWizardContent = ({
|
|
|
21
20
|
const { classes, cx } = WizardContent_styles.useClasses(classesProp);
|
|
22
21
|
const { context, setContext, summary, tab } = React.useContext(WizardContext.default);
|
|
23
22
|
const arrayChildren = React__default.default.Children.toArray(children);
|
|
24
|
-
const initialContext = arrayChildren.reduce(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
{}
|
|
34
|
-
);
|
|
23
|
+
const initialContext = arrayChildren.reduce((acc, child, index) => {
|
|
24
|
+
const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
|
|
25
|
+
const valid = invalid ?? (index === 0 || null);
|
|
26
|
+
return {
|
|
27
|
+
...acc,
|
|
28
|
+
[index]: { ...child.props, form: {}, valid, touched: index === 0 }
|
|
29
|
+
};
|
|
30
|
+
}, {});
|
|
35
31
|
const summaryRef = React.useRef();
|
|
36
32
|
const resizedRef = React.useRef({ height: 0, width: 0 });
|
|
37
33
|
const [containerRef, sizes] = usehooksTs.useElementSize();
|
|
@@ -107,23 +103,23 @@ const HvWizardContent = ({
|
|
|
107
103
|
children: summaryContent
|
|
108
104
|
}
|
|
109
105
|
) }),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvLoadingContainer, { hidden: !loading, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
111
107
|
uikitReactCore.HvDialogContent,
|
|
112
108
|
{
|
|
113
109
|
className: cx(classes.contentContainer, {
|
|
114
110
|
[classes.fixedHeight]: fixedHeight
|
|
115
111
|
}),
|
|
116
112
|
indentContent: true,
|
|
117
|
-
children:
|
|
113
|
+
children: React__default.default.Children.map(arrayChildren, (child, index) => {
|
|
118
114
|
if (index === tab) {
|
|
119
115
|
return React__default.default.cloneElement(child, {
|
|
120
116
|
tab
|
|
121
117
|
});
|
|
122
118
|
}
|
|
123
119
|
return null;
|
|
124
|
-
})
|
|
120
|
+
})
|
|
125
121
|
}
|
|
126
|
-
)
|
|
122
|
+
) })
|
|
127
123
|
]
|
|
128
124
|
}
|
|
129
125
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.cjs","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"WizardContent.cjs","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvLoadingContainer hidden={!loading}>\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </HvDialogContent>\n </HvLoadingContainer>\n </div>\n );\n};\n"],"names":["useClasses","useContext","HvWizardContext","React","useRef","useElementSize","useState","useCallback","useEffect","jsxs","jsx","HvLoadingContainer","HvDialogContent"],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
|
|
3
|
-
import { HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
3
|
+
import { HvLoadingContainer, HvDialogContent } from "@hitachivantara/uikit-react-core";
|
|
4
4
|
import { useElementSize } from "usehooks-ts";
|
|
5
5
|
import { useClasses } from "./WizardContent.styles.js";
|
|
6
6
|
import { staticClasses } from "./WizardContent.styles.js";
|
|
7
|
-
import { LoadingContainer } from "./LoadingContainer.js";
|
|
8
7
|
import HvWizardContext from "../WizardContext/WizardContext.js";
|
|
9
8
|
const DRAWER_PERCENTAGE = 0.3;
|
|
10
9
|
const DRAWER_MIN_WIDTH = 280;
|
|
@@ -18,17 +17,14 @@ const HvWizardContent = ({
|
|
|
18
17
|
const { classes, cx } = useClasses(classesProp);
|
|
19
18
|
const { context, setContext, summary, tab } = useContext(HvWizardContext);
|
|
20
19
|
const arrayChildren = React.Children.toArray(children);
|
|
21
|
-
const initialContext = arrayChildren.reduce(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
{}
|
|
31
|
-
);
|
|
20
|
+
const initialContext = arrayChildren.reduce((acc, child, index) => {
|
|
21
|
+
const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
|
|
22
|
+
const valid = invalid ?? (index === 0 || null);
|
|
23
|
+
return {
|
|
24
|
+
...acc,
|
|
25
|
+
[index]: { ...child.props, form: {}, valid, touched: index === 0 }
|
|
26
|
+
};
|
|
27
|
+
}, {});
|
|
32
28
|
const summaryRef = useRef();
|
|
33
29
|
const resizedRef = useRef({ height: 0, width: 0 });
|
|
34
30
|
const [containerRef, sizes] = useElementSize();
|
|
@@ -104,23 +100,23 @@ const HvWizardContent = ({
|
|
|
104
100
|
children: summaryContent
|
|
105
101
|
}
|
|
106
102
|
) }),
|
|
107
|
-
/* @__PURE__ */ jsx(
|
|
103
|
+
/* @__PURE__ */ jsx(HvLoadingContainer, { hidden: !loading, children: /* @__PURE__ */ jsx(
|
|
108
104
|
HvDialogContent,
|
|
109
105
|
{
|
|
110
106
|
className: cx(classes.contentContainer, {
|
|
111
107
|
[classes.fixedHeight]: fixedHeight
|
|
112
108
|
}),
|
|
113
109
|
indentContent: true,
|
|
114
|
-
children:
|
|
110
|
+
children: React.Children.map(arrayChildren, (child, index) => {
|
|
115
111
|
if (index === tab) {
|
|
116
112
|
return React.cloneElement(child, {
|
|
117
113
|
tab
|
|
118
114
|
});
|
|
119
115
|
}
|
|
120
116
|
return null;
|
|
121
|
-
})
|
|
117
|
+
})
|
|
122
118
|
}
|
|
123
|
-
)
|
|
119
|
+
) })
|
|
124
120
|
]
|
|
125
121
|
}
|
|
126
122
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /** Forces minimum height to the component. */\n fixedHeight?: boolean;\n /** Whether the loading animation is shown. */\n loading?: boolean;\n /** The content of the summary. */\n summaryContent?: React.ReactNode;\n /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce((acc, child, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 || null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n }, {});\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) ||\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvLoadingContainer hidden={!loading}>\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </HvDialogContent>\n </HvLoadingContainer>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.32.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"@dnd-kit/core": "^6.1.0",
|
|
33
33
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
34
34
|
"@emotion/css": "^11.11.0",
|
|
35
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
36
|
-
"@hitachivantara/uikit-react-icons": "^5.9.
|
|
37
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
35
|
+
"@hitachivantara/uikit-react-core": "^5.61.0",
|
|
36
|
+
"@hitachivantara/uikit-react-icons": "^5.9.4",
|
|
37
|
+
"@hitachivantara/uikit-styles": "^5.26.0",
|
|
38
38
|
"@types/react-grid-layout": "^1.3.5",
|
|
39
39
|
"react-grid-layout": "^1.4.4",
|
|
40
40
|
"reactflow": "^11.10.1",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"access": "public",
|
|
50
50
|
"directory": "package"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "ebb3a87c5349dd9ba1de3c50bd638cad56f7c938",
|
|
53
53
|
"main": "dist/cjs/index.cjs",
|
|
54
54
|
"exports": {
|
|
55
55
|
".": {
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
5
|
-
const LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
|
|
6
|
-
const LoadingContainer = ({
|
|
7
|
-
children,
|
|
8
|
-
hidden,
|
|
9
|
-
classes: classesProp,
|
|
10
|
-
...others
|
|
11
|
-
}) => {
|
|
12
|
-
const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
|
|
13
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
14
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
15
|
-
"div",
|
|
16
|
-
{
|
|
17
|
-
style: {
|
|
18
|
-
top: 0,
|
|
19
|
-
left: 0,
|
|
20
|
-
height: "100%",
|
|
21
|
-
width: "100%"
|
|
22
|
-
},
|
|
23
|
-
className: cx(classes.overlay, { [classes.blur]: !hidden }),
|
|
24
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
-
uikitReactCore.HvLoading,
|
|
26
|
-
{
|
|
27
|
-
classes: {
|
|
28
|
-
root: classes.loading
|
|
29
|
-
},
|
|
30
|
-
hidden,
|
|
31
|
-
...others
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flow-root" }, children })
|
|
37
|
-
] });
|
|
38
|
-
};
|
|
39
|
-
exports.LoadingContainer = LoadingContainer;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.cjs","sources":["../../../../src/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n HvLoading,\n HvLoadingProps,\n ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes: classesProp,\n ...others\n}: LoadingContainerProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(classes.overlay, { [classes.blur]: !hidden })}\n >\n <HvLoading\n classes={{\n root: classes.loading,\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n );\n};\n"],"names":["useClasses","jsxs","Fragment","jsx","HvLoading"],"mappings":";;;;;AAcO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAA6B;AAC3B,QAAM,EAAE,SAAS,GAAG,IAAIA,mCAAW,WAAW;AAE9C,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,QACA,WAAW,GAAG,QAAQ,SAAS,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ;AAAA,QAE1D,UAAAA,2BAAA;AAAA,UAACC,eAAA;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IACF;AAAA,mCACC,OAAI,EAAA,OAAO,EAAE,SAAS,YAAA,GAAgB,UAAS;AAAA,EAClD,EAAA,CAAA;AAEJ;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
4
|
-
const { staticClasses, useClasses } = uikitReactCore.createClasses(
|
|
5
|
-
"HvWizard-LoadingContainer",
|
|
6
|
-
{
|
|
7
|
-
loading: {
|
|
8
|
-
width: "100%",
|
|
9
|
-
height: "100%"
|
|
10
|
-
},
|
|
11
|
-
overlay: {
|
|
12
|
-
position: "absolute",
|
|
13
|
-
transition: "background-Color .2s ease",
|
|
14
|
-
zIndex: -1
|
|
15
|
-
},
|
|
16
|
-
blur: {
|
|
17
|
-
backgroundColor: uikitReactCore.theme.alpha("atmo2", 0.8),
|
|
18
|
-
zIndex: uikitReactCore.theme.zIndices.modal
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
exports.staticClasses = staticClasses;
|
|
23
|
-
exports.useClasses = useClasses;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.styles.cjs","sources":["../../../../src/Wizard/WizardContent/LoadingContainer.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizard-LoadingContainer\",\n {\n loading: {\n width: \"100%\",\n height: \"100%\",\n },\n overlay: {\n position: \"absolute\",\n transition: \"background-Color .2s ease\",\n zIndex: -1,\n },\n blur: {\n backgroundColor: theme.alpha(\"atmo2\", 0.8),\n zIndex: theme.zIndices.modal,\n },\n }\n);\n"],"names":["createClasses","theme"],"mappings":";;;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeA,eAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiBC,eAAA,MAAM,MAAM,SAAS,GAAG;AAAA,MACzC,QAAQA,eAAAA,MAAM,SAAS;AAAA,IACzB;AAAA,EACF;AACF;;;"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { HvLoading } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { useClasses } from "./LoadingContainer.styles.js";
|
|
4
|
-
const LoadingContainer = ({
|
|
5
|
-
children,
|
|
6
|
-
hidden,
|
|
7
|
-
classes: classesProp,
|
|
8
|
-
...others
|
|
9
|
-
}) => {
|
|
10
|
-
const { classes, cx } = useClasses(classesProp);
|
|
11
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
12
|
-
/* @__PURE__ */ jsx(
|
|
13
|
-
"div",
|
|
14
|
-
{
|
|
15
|
-
style: {
|
|
16
|
-
top: 0,
|
|
17
|
-
left: 0,
|
|
18
|
-
height: "100%",
|
|
19
|
-
width: "100%"
|
|
20
|
-
},
|
|
21
|
-
className: cx(classes.overlay, { [classes.blur]: !hidden }),
|
|
22
|
-
children: /* @__PURE__ */ jsx(
|
|
23
|
-
HvLoading,
|
|
24
|
-
{
|
|
25
|
-
classes: {
|
|
26
|
-
root: classes.loading
|
|
27
|
-
},
|
|
28
|
-
hidden,
|
|
29
|
-
...others
|
|
30
|
-
}
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
),
|
|
34
|
-
/* @__PURE__ */ jsx("div", { style: { display: "flow-root" }, children })
|
|
35
|
-
] });
|
|
36
|
-
};
|
|
37
|
-
export {
|
|
38
|
-
LoadingContainer
|
|
39
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.js","sources":["../../../../src/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n HvLoading,\n HvLoadingProps,\n ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n children,\n hidden,\n classes: classesProp,\n ...others\n}: LoadingContainerProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <>\n <div\n style={{\n top: 0,\n left: 0,\n height: \"100%\",\n width: \"100%\",\n }}\n className={cx(classes.overlay, { [classes.blur]: !hidden })}\n >\n <HvLoading\n classes={{\n root: classes.loading,\n }}\n hidden={hidden}\n {...others}\n />\n </div>\n <div style={{ display: \"flow-root\" }}>{children}</div>\n </>\n );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAA6B;AAC3B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,QACA,WAAW,GAAG,QAAQ,SAAS,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,QAAQ;AAAA,QAE1D,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IACF;AAAA,wBACC,OAAI,EAAA,OAAO,EAAE,SAAS,YAAA,GAAgB,UAAS;AAAA,EAClD,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { createClasses, theme } from "@hitachivantara/uikit-react-core";
|
|
2
|
-
const { staticClasses, useClasses } = createClasses(
|
|
3
|
-
"HvWizard-LoadingContainer",
|
|
4
|
-
{
|
|
5
|
-
loading: {
|
|
6
|
-
width: "100%",
|
|
7
|
-
height: "100%"
|
|
8
|
-
},
|
|
9
|
-
overlay: {
|
|
10
|
-
position: "absolute",
|
|
11
|
-
transition: "background-Color .2s ease",
|
|
12
|
-
zIndex: -1
|
|
13
|
-
},
|
|
14
|
-
blur: {
|
|
15
|
-
backgroundColor: theme.alpha("atmo2", 0.8),
|
|
16
|
-
zIndex: theme.zIndices.modal
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
-
export {
|
|
21
|
-
staticClasses,
|
|
22
|
-
useClasses
|
|
23
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../../src/Wizard/WizardContent/LoadingContainer.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvWizard-LoadingContainer\",\n {\n loading: {\n width: \"100%\",\n height: \"100%\",\n },\n overlay: {\n position: \"absolute\",\n transition: \"background-Color .2s ease\",\n zIndex: -1,\n },\n blur: {\n backgroundColor: theme.alpha(\"atmo2\", 0.8),\n zIndex: theme.zIndices.modal,\n },\n }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiB,MAAM,MAAM,SAAS,GAAG;AAAA,MACzC,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,EACF;AACF;"}
|