@hitachivantara/uikit-react-lab 5.43.8 → 5.43.9
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.
|
@@ -18,7 +18,7 @@ const HvWizardContent = ({
|
|
|
18
18
|
const { classes, cx } = WizardContent_styles.useClasses(classesProp);
|
|
19
19
|
const { context, setContext, summary, tab } = react.useContext(WizardContext.default);
|
|
20
20
|
const arrayChildren = react.Children.toArray(children);
|
|
21
|
-
const summaryRef = react.useRef();
|
|
21
|
+
const summaryRef = react.useRef(void 0);
|
|
22
22
|
const resizedRef = react.useRef({ height: 0, width: 0 });
|
|
23
23
|
const [containerRef, sizes] = usehooksTs.useElementSize();
|
|
24
24
|
const [summaryHeight, setSummaryHeight] = react.useState(0);
|
|
@@ -17,7 +17,7 @@ const HvWizardContent = ({
|
|
|
17
17
|
const { classes, cx } = useClasses(classesProp);
|
|
18
18
|
const { context, setContext, summary, tab } = useContext(HvWizardContext);
|
|
19
19
|
const arrayChildren = Children.toArray(children);
|
|
20
|
-
const summaryRef = useRef();
|
|
20
|
+
const summaryRef = useRef(void 0);
|
|
21
21
|
const resizedRef = useRef({ height: 0, width: 0 });
|
|
22
22
|
const [containerRef, sizes] = useElementSize();
|
|
23
23
|
const [summaryHeight, setSummaryHeight] = useState(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useElementSize } from \"usehooks-ts\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\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 = Children.toArray(children) as ChildElement[];\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(({ height = 0, width = 0 }) => {\n const drawerWidth = width * DRAWER_PERCENTAGE;\n setSummaryHeight(height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height,\n 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 const initialContext = arrayChildren.reduce<HvWizardTabs>(\n (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 acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };\n return acc;\n },\n {},\n );\n\n setContext(initialContext);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n setContext((oldContext) =>\n Object.entries(oldContext).reduce<HvWizardTabs>(\n (acc, [key, childState]) => {\n acc[Number(key)] =\n +key <= tab\n ? {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n }\n : childState;\n return acc;\n },\n {},\n ),\n );\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 {Children.map(arrayChildren, (child, index) => {\n if (index !== tab) return null;\n return cloneElement(child as React.ReactElement, { tab });\n })}\n </HvDialogContent>\n </HvLoadingContainer>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAqCA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAElB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,SAAS,YAAY,SAAS,IAAI,IAAI,WAAW,eAAe;AAElE,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;
|
|
1
|
+
{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useElementSize } from \"usehooks-ts\";\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\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 = Children.toArray(children) as ChildElement[];\n\n const summaryRef = useRef<HTMLElement | undefined>(undefined);\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(({ height = 0, width = 0 }) => {\n const drawerWidth = width * DRAWER_PERCENTAGE;\n setSummaryHeight(height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(width - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height,\n 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 const initialContext = arrayChildren.reduce<HvWizardTabs>(\n (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 acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };\n return acc;\n },\n {},\n );\n\n setContext(initialContext);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n setContext((oldContext) =>\n Object.entries(oldContext).reduce<HvWizardTabs>(\n (acc, [key, childState]) => {\n acc[Number(key)] =\n +key <= tab\n ? {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n }\n : childState;\n return acc;\n },\n {},\n ),\n );\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 {Children.map(arrayChildren, (child, index) => {\n if (index !== tab) return null;\n return cloneElement(child as React.ReactElement, { tab });\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.43.
|
|
3
|
+
"version": "5.43.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -25,18 +25,18 @@
|
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"@emotion/react": "^11.11.1",
|
|
27
27
|
"@emotion/styled": "^11.11.0",
|
|
28
|
-
"@mui/material": "^5.
|
|
29
|
-
"react": "
|
|
30
|
-
"react-dom": "
|
|
28
|
+
"@mui/material": "^5.16.14",
|
|
29
|
+
"react": ">=17.0.0",
|
|
30
|
+
"react-dom": ">=17.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@dnd-kit/core": "^6.1.0",
|
|
34
34
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
35
35
|
"@emotion/css": "^11.11.0",
|
|
36
|
-
"@hitachivantara/uikit-react-core": "^5.91.
|
|
37
|
-
"@hitachivantara/uikit-react-icons": "^5.14.
|
|
38
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
39
|
-
"@hitachivantara/uikit-styles": "^5.44.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.91.2",
|
|
37
|
+
"@hitachivantara/uikit-react-icons": "^5.14.4",
|
|
38
|
+
"@hitachivantara/uikit-react-utils": "^0.2.30",
|
|
39
|
+
"@hitachivantara/uikit-styles": "^5.44.2",
|
|
40
40
|
"@mui/base": "5.0.0-beta.68",
|
|
41
41
|
"@types/react-grid-layout": "^1.3.5",
|
|
42
42
|
"react-grid-layout": "^1.4.4",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"access": "public",
|
|
53
53
|
"directory": "package"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "223ba8f31c9f8bae7aa56087ce03602518ebb2a9",
|
|
56
56
|
"exports": {
|
|
57
57
|
".": {
|
|
58
58
|
"types": "./dist/types/index.d.ts",
|