@hitachivantara/uikit-react-lab 5.40.7 → 5.41.0

package/dist/cjs/Blade/Blade.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Blade_styles = require("./Blade.styles.cjs");
 const HvBlade = (props) => {
@@ -27,7 +27,7 @@ const HvBlade = (props) => {
     expanded,
     Boolean(defaultExpanded)
   );
-  const handleAction = React.useCallback(
+  const handleAction = react.useCallback(
     (event) => {
       if (!disabled) {
         onChange?.(event, !isExpanded);
@@ -38,7 +38,7 @@ const HvBlade = (props) => {
     },
     [disabled, onChange, isExpanded, setIsExpanded]
   );
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
       handleAction(event);
       event.preventDefault();
@@ -46,7 +46,7 @@ const HvBlade = (props) => {
     },
     [handleAction]
   );
-  const handleKeyDown = React.useCallback(
+  const handleKeyDown = react.useCallback(
     (event) => {
       let isEventHandled = false;
       const { key } = event;
@@ -71,7 +71,7 @@ const HvBlade = (props) => {
   const id = uikitReactCore.useUniqueId(idProp);
   const bladeHeaderId = uikitReactCore.setId(id, "button");
   const bladeContainerId = uikitReactCore.setId(id, "container");
-  const bladeHeader = React.useMemo(() => {
+  const bladeHeader = react.useMemo(() => {
     const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
     const bladeButton = /* @__PURE__ */ jsxRuntime.jsx(
       uikitReactCore.HvTypography,
@@ -122,9 +122,9 @@ const HvBlade = (props) => {
     label,
     labelVariant
   ]);
-  const bladeRef = React.useRef(null);
-  const [maxWidth, setMaxWidth] = React.useState(void 0);
-  React.useEffect(() => {
+  const bladeRef = react.useRef(null);
+  const [maxWidth, setMaxWidth] = react.useState(void 0);
+  react.useEffect(() => {
     if (bladeRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         setMaxWidth(entries[0].target.clientWidth);

package/dist/cjs/Blades/Blades.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Blades_styles = require("./Blades.styles.cjs");
 function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
-  const childrenArray = React.Children.toArray(children);
+  const childrenArray = react.Children.toArray(children);
   const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
     const childIsControlled = child?.props?.expanded !== void 0;
     const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
@@ -44,7 +44,7 @@ const HvBlades = (props) => {
       atLeastOneExpanded
     )
   );
-  const onChildChangeInterceptor = React.useCallback(
+  const onChildChangeInterceptor = react.useCallback(
     (index, childOnChange, event, isExpanded) => {
       const newValue = [];
       if (atMostOneExpanded) {
@@ -68,10 +68,10 @@ const HvBlades = (props) => {
     },
     [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
   );
-  const modifiedChildren = React.useMemo(() => {
-    return React.Children.map(children, (child, i) => {
+  const modifiedChildren = react.useMemo(() => {
+    return react.Children.map(children, (child, i) => {
       const childIsExpanded = expanded.includes(i);
-      return React.cloneElement(child, {
+      return react.cloneElement(child, {
         expanded: childIsExpanded,
         fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
         buttonProps: {

package/dist/cjs/Dashboard/Dashboard.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const reactGridLayout = require("react-grid-layout");
-const react = require("@emotion/react");
+const react$1 = require("@emotion/react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Dashboard_styles = require("./Dashboard.styles.cjs");
 const GridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
@@ -26,12 +26,12 @@ const HvDashboard = (props) => {
   } = uikitReactCore.useDefaultProps("HvDashboard", props);
   const { classes, cx } = Dashboard_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactCore.useTheme();
-  const layouts = React.useMemo(() => {
+  const layouts = react.useMemo(() => {
     if (layoutsProp) return layoutsProp;
     if (!layout) return {};
     return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
   }, [layoutsProp, layout]);
-  const cols = React.useMemo(() => {
+  const cols = react.useMemo(() => {
     if (!colsProp) return defaultCols;
     if (typeof colsProp === "number") {
       return {
@@ -45,7 +45,7 @@ const HvDashboard = (props) => {
     return colsProp;
   }, [colsProp]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: Dashboard_styles.gridStyles }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: Dashboard_styles.gridStyles }),
     /* @__PURE__ */ jsxRuntime.jsx(
       GridLayout,
       {

package/dist/cjs/Flow/DroppableFlow.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const core = require("@dnd-kit/core");
-const react = require("@emotion/react");
+const react$1 = require("@emotion/react");
 const ReactFlow = require("reactflow");
 const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
@@ -72,10 +72,10 @@ const HvDroppableFlow = ({
   const { classes, cx } = Flow_styles.useClasses(classesProp);
   const elementId = uikitReactCore.useUniqueId(id);
   const reactFlowInstance = useFlowInstance.useFlowInstance();
-  const [nodes, setNodes] = React.useState(initialNodes);
-  const [edges, setEdges] = React.useState(initialEdges);
-  const nodesRef = React.useRef(initialNodes);
-  const edgesRef = React.useRef(initialEdges);
+  const [nodes, setNodes] = react.useState(initialNodes);
+  const [edges, setEdges] = react.useState(initialEdges);
+  const nodesRef = react.useRef(initialNodes);
+  const edgesRef = react.useRef(initialEdges);
   const updateNodes = (nds) => {
     setNodes(nds);
     nodesRef.current = nds;
@@ -87,7 +87,7 @@ const HvDroppableFlow = ({
   const { setNodeRef } = core.useDroppable({
     id: elementId
   });
-  const handleDragEnd = React.useCallback(
+  const handleDragEnd = react.useCallback(
     (event) => {
       if (event.over?.id !== elementId) return;
       const hvFlow = event.active.data.current?.hvFlow;
@@ -120,7 +120,7 @@ const HvDroppableFlow = ({
   core.useDndMonitor({
     onDragEnd: handleDragEnd
   });
-  const handleFlowChange = React.useCallback(
+  const handleFlowChange = react.useCallback(
     (nds, eds) => {
       const isDragging = nds.find((node) => node.dragging);
       if (!isDragging) {
@@ -129,7 +129,7 @@ const HvDroppableFlow = ({
     },
     [onFlowChange]
   );
-  const handleConnect = React.useCallback(
+  const handleConnect = react.useCallback(
     (connection) => {
       const eds = ReactFlow.addEdge(connection, edgesRef.current);
       updateEdges(eds);
@@ -138,7 +138,7 @@ const HvDroppableFlow = ({
     },
     [handleFlowChange, onConnectProp]
   );
-  const handleNodesChange = React.useCallback(
+  const handleNodesChange = react.useCallback(
     (changes) => {
       const nds = ReactFlow.applyNodeChanges(changes, nodesRef.current);
       updateNodes(nds);
@@ -147,7 +147,7 @@ const HvDroppableFlow = ({
     },
     [handleFlowChange, onNodesChangeProp]
   );
-  const handleEdgesChange = React.useCallback(
+  const handleEdgesChange = react.useCallback(
     (changes) => {
       const eds = ReactFlow.applyEdgeChanges(changes, edgesRef.current);
       updateEdges(eds);
@@ -171,7 +171,7 @@ const HvDroppableFlow = ({
     ...defaultEdgeOptionsProp
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: base.flowStyles }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: base.flowStyles }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {

package/dist/cjs/Flow/FlowContext/FlowContext.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const NodeMetaContext = require("./NodeMetaContext.cjs");
-const HvFlowContext = React.createContext({});
+const HvFlowContext = react.createContext({});
 const HvFlowProvider = ({
   nodeGroups,
   defaultActions,
   children
 }) => {
-  const [expandedNodeGroups, setExpandedNodeGroups] = React.useState([]);
-  const value = React.useMemo(
+  const [expandedNodeGroups, setExpandedNodeGroups] = react.useState([]);
+  const value = react.useMemo(
     () => ({
       nodeGroups,
       defaultActions,

package/dist/cjs/Flow/FlowContext/NodeMetaContext.cjs

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const HvFlowNodeMetaContext = React.createContext(void 0);
+const react = require("react");
+const HvFlowNodeMetaContext = react.createContext(void 0);
 const HvFlowNodeMetaProvider = ({
   children
 }) => {
-  const registryRef = React.useRef({});
-  const registerNode = React.useCallback((id, nodeInfo) => {
+  const registryRef = react.useRef({});
+  const registerNode = react.useCallback((id, nodeInfo) => {
     registryRef.current[id] = nodeInfo;
   }, []);
-  const unregisterNode = React.useCallback((id) => {
+  const unregisterNode = react.useCallback((id) => {
     delete registryRef.current[id];
   }, []);
-  const getRegistry = React.useCallback(() => {
+  const getRegistry = react.useCallback(() => {
     return registryRef.current;
   }, []);
-  const value = React.useMemo(
+  const value = react.useMemo(
     () => ({
       registerNode,
       unregisterNode,
@@ -27,7 +27,7 @@ const HvFlowNodeMetaProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(HvFlowNodeMetaContext.Provider, { value, children });
 };
 function useNodeMetaRegistry() {
-  const context = React.useContext(HvFlowNodeMetaContext);
+  const context = react.useContext(HvFlowNodeMetaContext);
   if (context === void 0) {
     throw new Error(
       "useNodeRegistry must be used within a HvFlowNodeMetaProvider"

package/dist/cjs/Flow/Node/Node.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const BaseNode = require("./BaseNode.cjs");
@@ -39,7 +39,7 @@ const HvFlowNode = ({
   ...props
 }) => {
   const { classes } = Node_styles.useClasses(classesProp);
-  const [showParams, setShowParams] = React.useState(expanded);
+  const [showParams, setShowParams] = react.useState(expanded);
   const { nodeGroups, defaultActions } = useFlowContext.useFlowContext();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const node = useFlowNode.useFlowNode();

package/dist/cjs/Flow/Node/Parameters/Select.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const useFlowNode = require("../../hooks/useFlowNode.cjs");
 const Select = ({ param, data }) => {
   const { id, label, multiple = false, options } = param;
   const { setNodeData } = useFlowNode.useFlowNodeUtils();
-  const [opts, setOpts] = React.useState(
+  const [opts, setOpts] = react.useState(
     data[id] ? Array.isArray(data[id]) ? data[id] : [data[id]] : void 0
   );
   const handleChange = (item) => {

package/dist/cjs/Flow/Node/utils.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
+const react = require("react");
 const isInputGroup = (input) => {
   return "inputs" in input;
 };
@@ -16,7 +16,7 @@ const isConnected = (id, type, handleId, edges) => {
   }
   return false;
 };
-const renderedIcon = (actionIcon) => React.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
+const renderedIcon = (actionIcon) => react.isValidElement(actionIcon) ? actionIcon : actionIcon?.();
 const identifyHandles = (handles) => {
   let idx = 0;
   return handles?.map(

package/dist/cjs/Flow/Sidebar/Sidebar.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const core = require("@dnd-kit/core");
 const modifiers = require("@dnd-kit/modifiers");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
@@ -31,8 +31,8 @@ const HvFlowSidebar = ({
 }) => {
   const { classes } = Sidebar_styles.useClasses(classesProp);
   const { nodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
-  const [filterValue, setFilterValue] = React.useState("");
-  const [draggingLabel, setDraggingLabel] = React.useState();
+  const [filterValue, setFilterValue] = react.useState("");
+  const [draggingLabel, setDraggingLabel] = react.useState();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
   const drawerElementId = uikitReactCore.useUniqueId(id);
   const groupsElementId = uikitReactCore.useUniqueId();
@@ -49,7 +49,7 @@ const HvFlowSidebar = ({
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart
   });
-  const filteredGroups = React.useMemo(() => {
+  const filteredGroups = react.useMemo(() => {
     if (!filterValue || !nodeGroups) return nodeGroups || {};
     return filterValue ? Object.entries(nodeGroups).reduce(
       (acc, [groupId, group]) => {
@@ -68,7 +68,7 @@ const HvFlowSidebar = ({
       {}
     ) : nodeGroups;
   }, [filterValue, nodeGroups]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
   }, [filterValue, filteredGroups, setExpandedNodeGroups]);
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
@@ -21,11 +21,11 @@ const HvFlowSidebarGroup = ({
 }) => {
   const { classes, cx, css } = SidebarGroup_styles.useClasses(classesProp);
   const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext.useFlowContext();
-  const opened = React.useMemo(
+  const opened = react.useMemo(
     () => !!expandedNodeGroups?.find((group) => group === id),
     [expandedNodeGroups, id]
   );
-  const handleClick = React.useCallback(() => {
+  const handleClick = react.useCallback(() => {
     setExpandedNodeGroups?.(
       (prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
     );

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const core = require("@dnd-kit/core");
 const utils = require("@mui/material/utils");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
@@ -13,7 +13,7 @@ const HvFlowDraggableSidebarGroupItem = ({
   data,
   ...others
 }) => {
-  const itemRef = React.useRef(null);
+  const itemRef = react.useRef(null);
   const id = uikitReactCore.useUniqueId(idProp);
   const { attributes, listeners, setNodeRef, isDragging, transform } = core.useDraggable({
     id,

package/dist/cjs/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
-const HvFlowSidebarGroupItem = React.forwardRef((props, ref) => {
+const HvFlowSidebarGroupItem = react.forwardRef((props, ref) => {
   const {
     label,
     isDragging,

package/dist/cjs/Flow/hooks/useFlowContext.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
+const react = require("react");
 const FlowContext = require("../FlowContext/FlowContext.cjs");
-const useFlowContext = () => React.useContext(FlowContext.HvFlowContext);
+const useFlowContext = () => react.useContext(FlowContext.HvFlowContext);
 exports.useFlowContext = useFlowContext;

package/dist/cjs/Flow/hooks/useFlowNode.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
+const react = require("react");
 const ReactFlow = require("reactflow");
 const shallow = require("zustand/shallow");
 const useFlowInstance = require("./useFlowInstance.cjs");
@@ -15,7 +15,7 @@ function relativePosition(positionA, positionB) {
 }
 function useFlowNode(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const nodeSelector = React.useCallback(
+  const nodeSelector = react.useCallback(
     (state) => state.getNodes().find((n) => n.id === nodeId),
     [nodeId]
   );
@@ -23,7 +23,7 @@ function useFlowNode(id) {
 }
 function useFlowNodeInputEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const inputEdgesSelector = React.useCallback(
+  const inputEdgesSelector = react.useCallback(
     (state) => state.edges.filter((e) => e.target === nodeId),
     [nodeId]
   );
@@ -31,7 +31,7 @@ function useFlowNodeInputEdges(id) {
 }
 function useFlowNodeOutputEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const outputEdgesSelector = React.useCallback(
+  const outputEdgesSelector = react.useCallback(
     (state) => state.edges.filter((e) => e.source === nodeId),
     [nodeId]
   );
@@ -39,7 +39,7 @@ function useFlowNodeOutputEdges(id) {
 }
 function useFlowNodeEdges(id) {
   const nodeId = useNodeId.useNodeId(id);
-  const edgesSelector = React.useCallback(
+  const edgesSelector = react.useCallback(
     (state) => state.edges.filter(
       (e) => e.source === nodeId || e.target === nodeId
     ),
@@ -49,7 +49,7 @@ function useFlowNodeEdges(id) {
 }
 function useFlowNodeParents(id) {
   const inputEdges = useFlowNodeInputEdges(id);
-  const parentNodesSelector = React.useCallback(
+  const parentNodesSelector = react.useCallback(
     (state) => {
       return inputEdges.map((e) => state.getNodes().find((n) => n.id === e.source)).filter((n) => n !== null);
     },
@@ -61,7 +61,7 @@ function useFlowInputNodes(id) {
   const nodeId = useNodeId.useNodeId(id);
   const nodes = ReactFlow.useNodes();
   const edges = ReactFlow.useEdges();
-  return React.useMemo(() => {
+  return react.useMemo(() => {
     return edges.filter((e) => e.target === nodeId).map((e) => nodes.find((n) => n.id === e.source)).filter((n) => n !== null);
   }, [edges, nodeId, nodes]);
 }
@@ -69,14 +69,14 @@ function useFlowOutputNodes(id) {
   const nodeId = useNodeId.useNodeId(id);
   const nodes = ReactFlow.useNodes();
   const edges = ReactFlow.useEdges();
-  return React.useMemo(() => {
+  return react.useMemo(() => {
     return edges.filter((e) => e.source === nodeId).map((e) => nodes.find((n) => n.id === e.target)).filter((n) => n !== null);
   }, [edges, nodeId, nodes]);
 }
 function useFlowNodeUtils(id) {
   const nodeId = useNodeId.useNodeId(id);
   const reactFlowInstance = useFlowInstance.useFlowInstance();
-  const setNodeData = React.useCallback(
+  const setNodeData = react.useCallback(
     (setNewData) => {
       if (!nodeId) return;
       reactFlowInstance.setNodes((nodes) => {
@@ -90,7 +90,7 @@ function useFlowNodeUtils(id) {
     },
     [nodeId, reactFlowInstance]
   );
-  const setNodeParent = React.useCallback(
+  const setNodeParent = react.useCallback(
     (node, extent) => {
       if (!nodeId) return;
       reactFlowInstance.setNodes((nodes) => {
@@ -109,7 +109,7 @@ function useFlowNodeUtils(id) {
     },
     [nodeId, reactFlowInstance]
   );
-  return React.useMemo(
+  return react.useMemo(
     () => ({
       setNodeData,
       setNodeParent

package/dist/cjs/Flow/hooks/useNode.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -31,9 +31,9 @@ function useHvNode(props) {
   } = props;
   const { registerNode, unregisterNode } = NodeMetaContext.useNodeMetaRegistry();
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
-  const inputs = React.useMemo(() => utils.identifyHandles(inputsProp), [inputsProp]);
+  const inputs = react.useMemo(() => utils.identifyHandles(inputsProp), [inputsProp]);
   const inputEdges = useFlowNode.useFlowNodeInputEdges();
-  const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
+  const outputs = react.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
   const outputEdges = useFlowNode.useFlowNodeOutputEdges();
   const { nodeGroups } = useFlowContext.useFlowContext();
   const intersections = useFlowNode.useFlowNodeIntersections();
@@ -44,13 +44,13 @@ function useHvNode(props) {
   const title = titleProp || nodeGroup?.label;
   const icon = iconProp || nodeGroup?.icon;
   const color = uikitStyles.getColor(colorProp || nodeGroup?.color);
-  const iconColor = React.isValidElement(icon) ? uikitStyles.getColor(icon.props.color || "base_dark") : uikitStyles.getColor("base_dark");
+  const iconColor = react.isValidElement(icon) ? uikitStyles.getColor(icon.props.color || "base_dark") : uikitStyles.getColor("base_dark");
   const subtitle = subtitleProp || node?.data.nodeLabel;
-  const [showActions, setShowActions] = React.useState(false);
-  const toggleShowActions = React.useCallback(() => {
+  const [showActions, setShowActions] = react.useState(false);
+  const toggleShowActions = react.useCallback(() => {
     setShowActions(!showActions);
   }, [showActions]);
-  const getNodeToolbarProps = React.useCallback(
+  const getNodeToolbarProps = react.useCallback(
     () => ({
       offset: 0,
       isVisible: showActions,
@@ -58,7 +58,7 @@ function useHvNode(props) {
     }),
     [nodeToolbarProps, showActions]
   );
-  const nodeActions = React.useMemo(
+  const nodeActions = react.useMemo(
     () => nodeActionsProp || [
       { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}) },
       {
@@ -69,7 +69,7 @@ function useHvNode(props) {
     ],
     [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     registerNode(id, {
       label: title || "",
       inputs,
@@ -77,7 +77,7 @@ function useHvNode(props) {
     });
     return () => unregisterNode(id);
   }, [id, title, inputs, outputs, registerNode, unregisterNode]);
-  const handleDefaultAction = React.useCallback(
+  const handleDefaultAction = react.useCallback(
     (action) => {
       if (!node) return;
       if (action.callback) {
@@ -106,7 +106,7 @@ function useHvNode(props) {
     },
     [node, reactFlowInstance]
   );
-  return React.useMemo(
+  return react.useMemo(
     () => ({
       // state
       id,

package/dist/cjs/Wizard/Wizard.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const Wizard_styles = require("./Wizard.styles.cjs");
 const WizardContext = require("./WizardContext/WizardContext.cjs");
 const WizardContainer = require("./WizardContainer/WizardContainer.cjs");
@@ -32,11 +32,11 @@ const HvWizard = ({
   classes: classesProp,
   ...others
 }) => {
-  const { classes } = Wizard_styles.useClasses(classesProp);
-  const [context, setContext] = React.useState({});
-  const [summary, setSummary] = React.useState(false);
-  const [tab, setTab] = React.useState(0);
-  const handleClose = React.useCallback(
+  const { classes, cx } = Wizard_styles.useClasses(classesProp);
+  const [context, setContext] = react.useState({});
+  const [summary, setSummary] = react.useState(false);
+  const [tab, setTab] = react.useState(0);
+  const handleClose = react.useCallback(
     (evt, reason) => {
       if (reason !== "backdropClick") {
         onClose?.(evt, reason);
@@ -44,7 +44,7 @@ const HvWizard = ({
     },
     [onClose]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     return () => {
       if (!open) {
         setContext(
@@ -60,15 +60,14 @@ const HvWizard = ({
       }
     };
   }, [open]);
-  const value = React.useMemo(
+  const value = react.useMemo(
     () => ({ context, setContext, summary, setSummary, tab, setTab }),
     [context, setContext, summary, setSummary, tab, setTab]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(
     WizardContainer.HvWizardContainer,
     {
-      className,
-      classes: { root: classes.root },
+      className: cx(classes.root, className),
       handleClose,
       open,
       ...others,

package/dist/cjs/Wizard/WizardActions/WizardActions.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const WizardActions_styles = require("./WizardActions.styles.cjs");
@@ -23,10 +23,10 @@ const HvWizardActions = ({
   handleBeforePrevious
 }) => {
   const { classes, css, cx } = WizardActions_styles.useClasses(classesProp);
-  const { context, setContext, tab, setTab } = React.useContext(WizardContext.default);
-  const [pages, setPages] = React.useState(0);
-  const [canSubmit, setCanSubmit] = React.useState(false);
-  React.useEffect(() => {
+  const { context, setContext, tab, setTab } = react.useContext(WizardContext.default);
+  const [pages, setPages] = react.useState(0);
+  const [canSubmit, setCanSubmit] = react.useState(false);
+  react.useEffect(() => {
     const contextEntries = Object.entries(context);
     if (contextEntries.length) {
       setPages(contextEntries.length);
@@ -40,7 +40,7 @@ const HvWizardActions = ({
   }, [context, canSubmit, setCanSubmit, setPages]);
   const lastPage = pages - 1;
   const isLastPage = tab >= lastPage;
-  const handleSkip = React.useCallback(() => {
+  const handleSkip = react.useCallback(() => {
     setContext(
       (c) => Object.entries(c).reduce((acc, [key, child]) => {
         acc[+key] = {
@@ -52,11 +52,11 @@ const HvWizardActions = ({
     );
     setTab(lastPage);
   }, [setTab, lastPage, setContext]);
-  const handleSubmitInternal = React.useCallback(
+  const handleSubmitInternal = react.useCallback(
     () => handleSubmit(context),
     [handleSubmit, context]
   );
-  const nextDisabled = React.useMemo(() => {
+  const nextDisabled = react.useMemo(() => {
     if (loading) return true;
     return !skippable && !context?.[tab]?.valid;
   }, [context, loading, skippable, tab]);

package/dist/cjs/Wizard/WizardContainer/WizardContainer.cjs

@@ -6,10 +6,8 @@ const WizardContainer_styles = require("./WizardContainer.styles.cjs");
 const HvWizardContainer = (props) => {
   const {
     classes: classesProp,
-    className,
     children,
     handleClose,
-    open,
     ...others
   } = uikitReactCore.useDefaultProps("HvWizardContainer", props);
   const { classes } = WizardContainer_styles.useClasses(classesProp);
@@ -17,11 +15,10 @@ const HvWizardContainer = (props) => {
     uikitReactCore.HvDialog,
     {
       classes: {
+        root: classes.root,
         closeButton: classes.closeButton,
         paper: classes.paper
       },
-      className: classes.root,
-      open,
       onClose: handleClose,
       maxWidth: "lg",
       ...others,

package/dist/cjs/Wizard/WizardContent/WizardContent.cjs

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const usehooksTs = require("usehooks-ts");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const WizardContent_styles = require("./WizardContent.styles.cjs");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
 const DRAWER_PERCENTAGE = 0.3;
 const DRAWER_MIN_WIDTH = 280;
 const HvWizardContent = ({
@@ -18,24 +16,15 @@ const HvWizardContent = ({
   summaryContent
 }) => {
   const { classes, cx } = WizardContent_styles.useClasses(classesProp);
-  const { context, setContext, summary, tab } = React.useContext(WizardContext.default);
-  const arrayChildren = React__default.default.Children.toArray(children);
-  const initialContext = arrayChildren.reduce(
-    (acc, child, index) => {
-      const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
-      const valid = invalid ?? (index === 0 || null);
-      acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
-      return acc;
-    },
-    {}
-  );
-  const summaryRef = React.useRef();
-  const resizedRef = React.useRef({ height: 0, width: 0 });
+  const { context, setContext, summary, tab } = react.useContext(WizardContext.default);
+  const arrayChildren = react.Children.toArray(children);
+  const summaryRef = react.useRef();
+  const resizedRef = react.useRef({ height: 0, width: 0 });
   const [containerRef, sizes] = usehooksTs.useElementSize();
-  const [summaryHeight, setSummaryHeight] = React.useState(0);
-  const [summaryWidth, setSummaryWidth] = React.useState(0);
-  const [summaryLeft, setSummaryLeft] = React.useState(0);
-  const updateSummaryMeasures = React.useCallback(({ height = 0, width = 0 }) => {
+  const [summaryHeight, setSummaryHeight] = react.useState(0);
+  const [summaryWidth, setSummaryWidth] = react.useState(0);
+  const [summaryLeft, setSummaryLeft] = react.useState(0);
+  const updateSummaryMeasures = react.useCallback(({ height = 0, width = 0 }) => {
     const drawerWidth = width * DRAWER_PERCENTAGE;
     setSummaryHeight(height);
     setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));
@@ -45,7 +34,7 @@ const HvWizardContent = ({
       width
     };
   }, []);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;
     if (summary && sizes.height !== resizedRef.current.height || sizes.width !== resizedRef.current.width) {
       updateSummaryMeasures(sizes);
@@ -57,10 +46,19 @@ const HvWizardContent = ({
       });
     }
   }, [tab, sizes, summary, updateSummaryMeasures]);
-  React.useEffect(() => {
+  react.useEffect(() => {
+    const initialContext = arrayChildren.reduce(
+      (acc, child, index) => {
+        const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
+        const valid = invalid ?? (index === 0 || null);
+        acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
+        return acc;
+      },
+      {}
+    );
     setContext(initialContext);
   }, []);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (tab && !context[tab]?.touched) {
       setContext(
         (oldContext) => Object.entries(oldContext).reduce(
@@ -109,13 +107,9 @@ const HvWizardContent = ({
               [classes.fixedHeight]: fixedHeight
             }),
             indentContent: true,
-            children: React__default.default.Children.map(arrayChildren, (child, index) => {
-              if (index === tab) {
-                return React__default.default.cloneElement(child, {
-                  tab
-                });
-              }
-              return null;
+            children: react.Children.map(arrayChildren, (child, index) => {
+              if (index !== tab) return null;
+              return react.cloneElement(child, { tab });
             })
           }
         ) })

package/dist/cjs/Wizard/WizardContext/WizardContext.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const React = require("react");
-const HvWizardContext = React.createContext({
+const react = require("react");
+const HvWizardContext = react.createContext({
   context: {},
   setContext: () => {
   },

package/dist/cjs/Wizard/WizardTitle/WizardTitle.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const WizardTitle_styles = require("./WizardTitle.styles.cjs");
@@ -23,10 +23,10 @@ const HvWizardTitle = ({
   classes: classesProp,
   customStep = {}
 }) => {
-  const { context, setSummary, tab, setTab } = React.useContext(WizardContext.default);
+  const { context, setSummary, tab, setTab } = react.useContext(WizardContext.default);
   const { classes } = WizardTitle_styles.useClasses(classesProp);
-  const [steps, setSteps] = React.useState([]);
-  React.useEffect(() => {
+  const [steps, setSteps] = react.useState([]);
+  react.useEffect(() => {
     return () => {
       setSummary(false);
     };
@@ -34,20 +34,17 @@ const HvWizardTitle = ({
   const toggleSummary = () => {
     setSummary((prevValue) => !prevValue);
   };
-  React.useEffect(() => {
+  react.useEffect(() => {
     const contextArray = Object.entries(context);
-    if (contextArray.length) {
-      const updatedSteps = contextArray.map(
-        ([, childState], index) => {
-          return {
-            title: childState?.name ?? `${index + 1}`,
-            state: switchTabState(childState, tab, index),
-            onClick: () => setTab(index)
-          };
-        }
-      );
-      setSteps(updatedSteps);
-    }
+    if (!contextArray.length) return;
+    const updatedSteps = contextArray.map(
+      ([, childState], index) => ({
+        title: childState?.["data-title"] ?? childState?.name ?? `${index + 1}`,
+        state: switchTabState(childState, tab, index),
+        onClick: () => setTab(index)
+      })
+    );
+    setSteps(updatedSteps);
   }, [context, tab, setTab]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactCore.HvDialogTitle,

package/dist/esm/Wizard/Wizard.js

@@ -31,7 +31,7 @@ const HvWizard = ({
   classes: classesProp,
   ...others
 }) => {
-  const { classes } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [context, setContext] = useState({});
   const [summary, setSummary] = useState(false);
   const [tab, setTab] = useState(0);
@@ -66,8 +66,7 @@ const HvWizard = ({
   return /* @__PURE__ */ jsx(HvWizardContext.Provider, { value, children: /* @__PURE__ */ jsxs(
     HvWizardContainer,
     {
-      className,
-      classes: { root: classes.root },
+      className: cx(classes.root, className),
       handleClose,
       open,
       ...others,

package/dist/esm/Wizard/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n  extends HvBaseProps,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  onClose: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** Function executed on submit. */\n  handleSubmit: (context: HvWizardTabs) => void;\n  /** Title for the wizard. */\n  title?: string;\n  /** An object containing all the labels for the wizard. */\n  labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n  className,\n  children,\n  onClose,\n  handleSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  summaryContent,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  classes: classesProp,\n  ...others\n}: HvWizardProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const [context, setContext] = useState<HvWizardTabs>({});\n  const [summary, setSummary] = useState(false);\n  const [tab, setTab] = useState(0);\n\n  const handleClose = useCallback(\n    (\n      evt: React.MouseEvent<HTMLButtonElement> | {},\n      reason?: \"backdropClick\" | \"escapeKeyDown\",\n    ) => {\n      if (reason !== \"backdropClick\") {\n        onClose?.(evt, reason);\n      }\n    },\n    [onClose],\n  );\n\n  // on unmount\n  useEffect(() => {\n    return () => {\n      if (!open) {\n        setContext((c) =>\n          Object.entries(c).reduce<HvWizardTabs>((acc, [key, child]) => {\n            acc[+key] = {\n              ...child,\n              touched: false,\n            };\n            return acc;\n          }, {}),\n        );\n        setTab(0);\n      }\n    };\n  }, [open]);\n\n  const value = useMemo(\n    () => ({ context, setContext, summary, setSummary, tab, setTab }),\n    [context, setContext, summary, setSummary, tab, setTab],\n  );\n\n  return (\n    <HvWizardContext.Provider value={value}>\n      <HvWizardContainer\n        className={className}\n        classes={{ root: classes.root }}\n        handleClose={handleClose}\n        open={open}\n        {...others}\n      >\n        <HvWizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          customStep={customStep}\n        />\n        <HvWizardContent\n          loading={loading}\n          fixedHeight={fixedHeight}\n          summaryContent={summaryContent}\n        >\n          {children}\n        </HvWizardContent>\n        <HvWizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          handleClose={handleClose}\n          handleSubmit={handleSubmit}\n        />\n      </HvWizardContainer>\n    </HvWizardContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAE,CAAA;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CACE,KACA,WACG;AACH,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIV,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE,OAAqB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACxD,gBAAA,CAAC,GAAG,IAAI;AAAA,cACV,GAAG;AAAA,cACH,SAAS;AAAA,YAAA;AAEJ,mBAAA;AAAA,UACT,GAAG,EAAE;AAAA,QAAA;AAEP,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EAAA;AAGxD,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,EAAE,MAAM,QAAQ,KAAK;AAAA,MAC9B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Wizard.js","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n  extends HvBaseProps,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  onClose: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** Function executed on submit. */\n  handleSubmit: (context: HvWizardTabs) => void;\n  /** Title for the wizard. */\n  title?: string;\n  /** An object containing all the labels for the wizard. */\n  labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n  className,\n  children,\n  onClose,\n  handleSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  summaryContent,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  classes: classesProp,\n  ...others\n}: HvWizardProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [context, setContext] = useState<HvWizardTabs>({});\n  const [summary, setSummary] = useState(false);\n  const [tab, setTab] = useState(0);\n\n  const handleClose = useCallback(\n    (\n      evt: React.MouseEvent<HTMLButtonElement> | {},\n      reason?: \"backdropClick\" | \"escapeKeyDown\",\n    ) => {\n      if (reason !== \"backdropClick\") {\n        onClose?.(evt, reason);\n      }\n    },\n    [onClose],\n  );\n\n  // on unmount\n  useEffect(() => {\n    return () => {\n      if (!open) {\n        setContext((c) =>\n          Object.entries(c).reduce<HvWizardTabs>((acc, [key, child]) => {\n            acc[+key] = {\n              ...child,\n              touched: false,\n            };\n            return acc;\n          }, {}),\n        );\n        setTab(0);\n      }\n    };\n  }, [open]);\n\n  const value = useMemo(\n    () => ({ context, setContext, summary, setSummary, tab, setTab }),\n    [context, setContext, summary, setSummary, tab, setTab],\n  );\n\n  return (\n    <HvWizardContext.Provider value={value}>\n      <HvWizardContainer\n        className={cx(classes.root, className)}\n        handleClose={handleClose}\n        open={open}\n        {...others}\n      >\n        <HvWizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          customStep={customStep}\n        />\n        <HvWizardContent\n          loading={loading}\n          fixedHeight={fixedHeight}\n          summaryContent={summaryContent}\n        >\n          {children}\n        </HvWizardContent>\n        <HvWizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          handleClose={handleClose}\n          handleSubmit={handleSubmit}\n        />\n      </HvWizardContainer>\n    </HvWizardContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAE,CAAA;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CACE,KACA,WACG;AACH,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIV,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE,OAAqB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACxD,gBAAA,CAAC,GAAG,IAAI;AAAA,cACV,GAAG;AAAA,cACH,SAAS;AAAA,YAAA;AAEJ,mBAAA;AAAA,UACT,GAAG,EAAE;AAAA,QAAA;AAEP,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EAAA;AAGxD,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Wizard/WizardContainer/WizardContainer.js

@@ -5,10 +5,8 @@ import { staticClasses } from "./WizardContainer.styles.js";
 const HvWizardContainer = (props) => {
   const {
     classes: classesProp,
-    className,
     children,
     handleClose,
-    open,
     ...others
   } = useDefaultProps("HvWizardContainer", props);
   const { classes } = useClasses(classesProp);
@@ -16,11 +14,10 @@ const HvWizardContainer = (props) => {
     HvDialog,
     {
       classes: {
+        root: classes.root,
         closeButton: classes.closeButton,
         paper: classes.paper
       },
-      className: classes.root,
-      open,
       onClose: handleClose,
       maxWidth: "lg",
       ...others,

package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n  extends Omit<HvBaseProps, \"onClose\">,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: HvDialogProps[\"onClose\"];\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    handleClose,\n    open,\n    ...others\n  } = useDefaultProps(\"HvWizardContainer\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvDialog\n      classes={{\n        closeButton: classes.closeButton,\n        paper: classes.paper,\n      }}\n      className={classes.root}\n      open={open}\n      onClose={handleClose}\n      maxWidth=\"lg\"\n      {...others}\n    >\n      {children}\n    </HvDialog>\n  );\n};\n"],"names":[],"mappings":";;;;AAyBa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"WizardContainer.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n  extends Omit<HvBaseProps, \"onClose\">,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: HvDialogProps[\"onClose\"];\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n  const {\n    classes: classesProp,\n    children,\n    handleClose,\n    ...others\n  } = useDefaultProps(\"HvWizardContainer\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvDialog\n      classes={{\n        root: classes.root,\n        closeButton: classes.closeButton,\n        paper: classes.paper,\n      }}\n      onClose={handleClose}\n      maxWidth=\"lg\"\n      {...others}\n    >\n      {children}\n    </HvDialog>\n  );\n};\n"],"names":[],"mappings":";;;;AAyBa,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Wizard/WizardContent/WizardContent.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
+import { useContext, Children, useRef, useState, useCallback, useEffect, cloneElement } from "react";
 import { useElementSize } from "usehooks-ts";
 import { HvLoadingContainer, HvDialogContent } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./WizardContent.styles.js";
@@ -16,16 +16,7 @@ const HvWizardContent = ({
 }) => {
   const { classes, cx } = useClasses(classesProp);
   const { context, setContext, summary, tab } = useContext(HvWizardContext);
-  const arrayChildren = React.Children.toArray(children);
-  const initialContext = arrayChildren.reduce(
-    (acc, child, index) => {
-      const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
-      const valid = invalid ?? (index === 0 || null);
-      acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
-      return acc;
-    },
-    {}
-  );
+  const arrayChildren = Children.toArray(children);
   const summaryRef = useRef();
   const resizedRef = useRef({ height: 0, width: 0 });
   const [containerRef, sizes] = useElementSize();
@@ -55,6 +46,15 @@ const HvWizardContent = ({
     }
   }, [tab, sizes, summary, updateSummaryMeasures]);
   useEffect(() => {
+    const initialContext = arrayChildren.reduce(
+      (acc, child, index) => {
+        const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
+        const valid = invalid ?? (index === 0 || null);
+        acc[index] = { ...child.props, form: {}, valid, touched: index === 0 };
+        return acc;
+      },
+      {}
+    );
     setContext(initialContext);
   }, []);
   useEffect(() => {
@@ -106,13 +106,9 @@ const HvWizardContent = ({
               [classes.fixedHeight]: fixedHeight
             }),
             indentContent: true,
-            children: React.Children.map(arrayChildren, (child, index) => {
-              if (index === tab) {
-                return React.cloneElement(child, {
-                  tab
-                });
-              }
-              return null;
+            children: Children.map(arrayChildren, (child, index) => {
+              if (index !== tab) return null;
+              return cloneElement(child, { tab });
             })
           }
         ) })

package/dist/esm/Wizard/WizardContent/WizardContent.js.map

@@ -1 +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 { 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 = React.Children.toArray(children) as ChildElement[];\n\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  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    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          {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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"}
+{"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":"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"}

package/dist/esm/Wizard/WizardTitle/WizardTitle.js

@@ -35,18 +35,15 @@ const HvWizardTitle = ({
   };
   useEffect(() => {
     const contextArray = Object.entries(context);
-    if (contextArray.length) {
-      const updatedSteps = contextArray.map(
-        ([, childState], index) => {
-          return {
-            title: childState?.name ?? `${index + 1}`,
-            state: switchTabState(childState, tab, index),
-            onClick: () => setTab(index)
-          };
-        }
-      );
-      setSteps(updatedSteps);
-    }
+    if (!contextArray.length) return;
+    const updatedSteps = contextArray.map(
+      ([, childState], index) => ({
+        title: childState?.["data-title"] ?? childState?.name ?? `${index + 1}`,
+        state: switchTabState(childState, tab, index),
+        onClick: () => setTab(index)
+      })
+    );
+    setSteps(updatedSteps);
   }, [context, tab, setTab]);
   return /* @__PURE__ */ jsx(
     HvDialogTitle,

package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, HvWizardTab } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (\n  state: HvWizardTab | undefined,\n  currentTab: number,\n  index: number,\n) => {\n  if (state?.loading) return \"Pending\";\n  if (index === currentTab) return \"Current\";\n  if (state?.valid) return \"Completed\";\n  if (state?.disabled) return \"Disabled\";\n  if (state?.valid === null) return \"Enabled\";\n  if (state?.touched && state?.valid === false) return \"Failed\";\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        },\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,iBAAiB,CACrB,OACA,YACA,UACG;AACC,MAAA,OAAO,QAAgB,QAAA;AACvB,MAAA,UAAU,WAAmB,QAAA;AAC7B,MAAA,OAAO,MAAc,QAAA;AACrB,MAAA,OAAO,SAAiB,QAAA;AACxB,MAAA,OAAO,UAAU,KAAa,QAAA;AAClC,MAAI,OAAO,WAAW,OAAO,UAAU,MAAc,QAAA;AAC9C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAC;AAChB,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,WAAW,WAAW,eAAe;AAEvE,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAE,CAAA;AAEpD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAAA;AAGtC,YAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAE3C,QAAI,aAAa,QAAQ;AACvB,YAAM,eAA8B,aAAa;AAAA,QAC/C,CAAC,CAAG,EAAA,UAAU,GAAG,UAAU;AAClB,iBAAA;AAAA,YACL,OAAO,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,YACvC,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,YAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAE/B;AAAA,MAAA;AAGF,eAAS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"WizardTitle.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, HvWizardTab } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (\n  state: HvWizardTab | undefined,\n  currentTab: number,\n  index: number,\n) => {\n  if (state?.loading) return \"Pending\";\n  if (index === currentTab) return \"Current\";\n  if (state?.valid) return \"Completed\";\n  if (state?.disabled) return \"Disabled\";\n  if (state?.valid === null) return \"Enabled\";\n  if (state?.touched && state?.valid === false) return \"Failed\";\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (!contextArray.length) return;\n\n    const updatedSteps = contextArray.map<HvStepProps>(\n      ([, childState], index) => ({\n        title: childState?.[\"data-title\"] ?? childState?.name ?? `${index + 1}`,\n        state: switchTabState(childState, tab, index),\n        onClick: () => setTab(index),\n      }),\n    );\n\n    setSteps(updatedSteps);\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,iBAAiB,CACrB,OACA,YACA,UACG;AACC,MAAA,OAAO,QAAgB,QAAA;AACvB,MAAA,UAAU,WAAmB,QAAA;AAC7B,MAAA,OAAO,MAAc,QAAA;AACrB,MAAA,OAAO,SAAiB,QAAA;AACxB,MAAA,OAAO,UAAU,KAAa,QAAA;AAClC,MAAI,OAAO,WAAW,OAAO,UAAU,MAAc,QAAA;AAC9C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAC;AAChB,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,WAAW,WAAW,eAAe;AAEvE,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAE,CAAA;AAEpD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAAA;AAGtC,YAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAEvC,QAAA,CAAC,aAAa,OAAQ;AAE1B,UAAM,eAAe,aAAa;AAAA,MAChC,CAAC,CAAG,EAAA,UAAU,GAAG,WAAW;AAAA,QAC1B,OAAO,aAAa,YAAY,KAAK,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,QACrE,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,QAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAC7B;AAGF,aAAS,YAAY;AAAA,EACpB,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/types/index.d.ts

@@ -8,7 +8,6 @@ import { Context } from 'react';
 import { ControlProps } from 'reactflow';
 import { CoordinateExtent } from 'reactflow';
 import { CSSProperties } from 'react';
-import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
 import { DndContextProps } from '@dnd-kit/core';
 import { DragEndEvent } from '@dnd-kit/core';
@@ -822,7 +821,7 @@ export declare interface HvWizardContentProps extends HvBaseProps {
     /** Whether the loading animation is shown. */
     loading?: boolean;
     /** The content of the summary. */
-    summaryContent?: default_2.ReactNode;
+    summaryContent?: React.ReactNode;
     /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
     classes?: HvWizardContentClasses;
 }
@@ -1208,6 +1207,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
@@ -1238,7 +1238,6 @@ export declare function useHvNode(props: HvUseNodeParams): {
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -1249,7 +1248,7 @@ export declare function useHvNode(props: HvUseNodeParams): {
         itemRef?: string | undefined;
         results?: number | undefined;
         security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
+        unselectable?: "off" | "on" | undefined;
         inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         children?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.40.7",
+  "version": "5.41.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,10 +33,10 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.74.0",
-    "@hitachivantara/uikit-react-icons": "^5.12.2",
-    "@hitachivantara/uikit-react-utils": "^0.2.7",
-    "@hitachivantara/uikit-styles": "^5.34.2",
+    "@hitachivantara/uikit-react-core": "^5.76.0",
+    "@hitachivantara/uikit-react-icons": "^5.12.3",
+    "@hitachivantara/uikit-react-utils": "^0.2.8",
+    "@hitachivantara/uikit-styles": "^5.35.0",
     "@mui/base": "^5.0.0-beta.40",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -52,7 +52,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "ebde08a1ca68acb95e6d98d5c9b310eee919fed5",
+  "gitHead": "dc2be087e44b98c1d1dd9e0b3f4a19b4e7dafcb2",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",