@hitachivantara/uikit-react-lab 6.1.9 → 6.1.11

package/dist/Blades/Blades.js

@@ -1,105 +1,74 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, Children, cloneElement } from "react";
-import { useDefaultProps, useControlled } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Blades.styles.js";
-import { staticClasses } from "./Blades.styles.js";
+import { Children, cloneElement, useCallback, useMemo } from "react";
+import { useControlled, useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Blades/Blades.tsx
 function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
-  const childrenArray = 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;
-    return childIsExpanded ? i : void 0;
-  }).filter((v) => v !== void 0);
-  const numberOfExpandedBlades = expandedBlades.length;
-  if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
-    return [0];
-  }
-  if (atMostOneExpanded && numberOfExpandedBlades > 1) {
-    return [expandedBlades[0]];
-  }
-  return expandedBlades;
+	const childrenArray = Children.toArray(children);
+	const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
+		return (child?.props?.expanded !== void 0 ? child?.props?.expanded : child?.props?.defaultExpanded) ? i : void 0;
+	}).filter((v) => v !== void 0);
+	const numberOfExpandedBlades = expandedBlades.length;
+	if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) return [0];
+	if (atMostOneExpanded && numberOfExpandedBlades > 1) return [expandedBlades[0]];
+	return expandedBlades;
 }
-const HvBlades = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    children,
-    expanded: expandedProp,
-    defaultExpanded,
-    atMostOneExpanded = false,
-    atLeastOneExpanded = false,
-    fullWidthBlades = false,
-    onChange,
-    ...others
-  } = useDefaultProps("HvBlades", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [expanded, setExpanded] = useControlled(
-    expandedProp,
-    () => getExpandedBlades(
-      defaultExpanded,
-      children,
-      atMostOneExpanded,
-      atLeastOneExpanded
-    )
-  );
-  const onChildChangeInterceptor = useCallback(
-    (index, childOnChange, event, isExpanded) => {
-      const newValue = [];
-      if (atMostOneExpanded) {
-        if (isExpanded) {
-          newValue.push(index);
-        }
-      } else {
-        newValue.push(...expanded);
-        if (isExpanded) {
-          newValue.push(index);
-        } else {
-          newValue.splice(newValue.indexOf(index), 1);
-        }
-      }
-      if (atLeastOneExpanded && newValue.length === 0) {
-        newValue.push(index);
-      }
-      childOnChange?.(event, isExpanded);
-      onChange?.(event, newValue);
-      setExpanded(newValue);
-    },
-    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
-  );
-  const modifiedChildren = useMemo(() => {
-    return Children.map(children, (child, i) => {
-      const childIsExpanded = expanded.includes(i);
-      return cloneElement(child, {
-        expanded: childIsExpanded,
-        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
-        buttonProps: {
-          ...child?.props?.buttonProps,
-          "aria-disabled": (
-            // If the accordion panel associated with an accordion header is visible,
-            // and if the accordion does not permit the panel to be collapsed, the header
-            // button element has aria-disabled set to true.
-            child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
-          )
-        },
-        onChange: (event, isExpanded) => onChildChangeInterceptor(
-          i,
-          child?.props?.onChange,
-          event,
-          isExpanded
-        )
-      });
-    });
-  }, [
-    children,
-    expanded,
-    fullWidthBlades,
-    atMostOneExpanded,
-    onChildChangeInterceptor
-  ]);
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
-};
-export {
-  HvBlades,
-  staticClasses as bladesClasses
+/**
+* `HvBlades` is a component that groups multiple `HvBlade` components.
+*
+* It allows for better control over the expanded state of blades, suitable for both
+* controlled and uncontrolled scenarios.
+*/
+var HvBlades = (props) => {
+	const { id, className, classes: classesProp, children, expanded: expandedProp, defaultExpanded, atMostOneExpanded = false, atLeastOneExpanded = false, fullWidthBlades = false, onChange, ...others } = useDefaultProps("HvBlades", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [expanded, setExpanded] = useControlled(expandedProp, () => getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded));
+	const onChildChangeInterceptor = useCallback((index, childOnChange, event, isExpanded) => {
+		const newValue = [];
+		if (atMostOneExpanded) {
+			if (isExpanded) newValue.push(index);
+		} else {
+			newValue.push(...expanded);
+			if (isExpanded) newValue.push(index);
+			else newValue.splice(newValue.indexOf(index), 1);
+		}
+		if (atLeastOneExpanded && newValue.length === 0) newValue.push(index);
+		childOnChange?.(event, isExpanded);
+		onChange?.(event, newValue);
+		setExpanded(newValue);
+	}, [
+		onChange,
+		expanded,
+		setExpanded,
+		atMostOneExpanded,
+		atLeastOneExpanded
+	]);
+	const modifiedChildren = useMemo(() => {
+		return Children.map(children, (child, i) => {
+			const childIsExpanded = expanded.includes(i);
+			return cloneElement(child, {
+				expanded: childIsExpanded,
+				fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
+				buttonProps: {
+					...child?.props?.buttonProps,
+					"aria-disabled": child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
+				},
+				onChange: (event, isExpanded) => onChildChangeInterceptor(i, child?.props?.onChange, event, isExpanded)
+			});
+		});
+	}, [
+		children,
+		expanded,
+		fullWidthBlades,
+		atMostOneExpanded,
+		onChildChangeInterceptor
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cx(classes.root, className),
+		...others,
+		children: modifiedChildren
+	});
 };
+//#endregion
+export { HvBlades };

package/dist/Blades/Blades.styles.js

@@ -1,11 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvBlades", {
-  root: {
-    position: "relative",
-    display: "flex"
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Blades/Blades.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBlades", { root: {
+	position: "relative",
+	display: "flex"
+} });
+//#endregion
+export { staticClasses, useClasses };

package/dist/Dashboard/Dashboard.js

@@ -1,64 +1,61 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { gridStyles, useClasses } from "./Dashboard.styles.js";
 import { useMemo } from "react";
-import { WidthProvider, Responsive } from "react-grid-layout";
-import { Global } from "@emotion/react";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-core";
-import { useClasses, gridStyles } from "./Dashboard.styles.js";
-import { staticClasses } from "./Dashboard.styles.js";
-const GridLayout = WidthProvider(Responsive);
-const defaultCols = {
-  xs: 12,
-  sm: 12,
-  md: 12,
-  lg: 12,
-  xl: 12
-};
-const HvDashboard = (props) => {
-  const {
-    children,
-    className,
-    layout,
-    cols: colsProp,
-    layouts: layoutsProp,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvDashboard", props);
-  const { classes, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
-  const layouts = useMemo(() => {
-    if (layoutsProp) return layoutsProp;
-    if (!layout) return {};
-    return { xs: layout, sm: layout, md: layout, lg: layout, xl: layout };
-  }, [layoutsProp, layout]);
-  const cols = useMemo(() => {
-    if (!colsProp) return defaultCols;
-    if (typeof colsProp === "number") {
-      return {
-        xs: colsProp,
-        sm: colsProp,
-        md: colsProp,
-        lg: colsProp,
-        xl: colsProp
-      };
-    }
-    return colsProp;
-  }, [colsProp]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Global, { styles: gridStyles }),
-    /* @__PURE__ */ jsx(
-      GridLayout,
-      {
-        className: cx(classes.root, className),
-        breakpoints: activeTheme?.breakpoints.values,
-        cols,
-        layouts,
-        ...others,
-        children
-      }
-    )
-  ] });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Responsive, WidthProvider } from "react-grid-layout";
+import { Global } from "@emotion/react";
+//#region src/Dashboard/Dashboard.tsx
+var GridLayout = WidthProvider(Responsive);
+/** Default column breakpoints. For now, use always 12-column */
+var defaultCols = {
+	xs: 12,
+	sm: 12,
+	md: 12,
+	lg: 12,
+	xl: 12
 };
-export {
-  HvDashboard,
-  staticClasses as dashboardClasses
+/**
+* A Dashboard grid layout component, based on `react-grid-layout`.
+* The children elements are grid items and must be `key`ed.
+*
+* @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props
+*
+* DISCLAIMER: This component is a work in progress and there might be breaking changes.
+*/
+var HvDashboard = (props) => {
+	const { children, className, layout, cols: colsProp, layouts: layoutsProp, classes: classesProp, ...others } = useDefaultProps("HvDashboard", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { activeTheme } = useTheme();
+	const layouts = useMemo(() => {
+		if (layoutsProp) return layoutsProp;
+		if (!layout) return {};
+		return {
+			xs: layout,
+			sm: layout,
+			md: layout,
+			lg: layout,
+			xl: layout
+		};
+	}, [layoutsProp, layout]);
+	const cols = useMemo(() => {
+		if (!colsProp) return defaultCols;
+		if (typeof colsProp === "number") return {
+			xs: colsProp,
+			sm: colsProp,
+			md: colsProp,
+			lg: colsProp,
+			xl: colsProp
+		};
+		return colsProp;
+	}, [colsProp]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Global, { styles: gridStyles }), /* @__PURE__ */ jsx(GridLayout, {
+		className: cx(classes.root, className),
+		breakpoints: activeTheme?.breakpoints.values,
+		cols,
+		layouts,
+		...others,
+		children
+	})] });
 };
+//#endregion
+export { HvDashboard };

package/dist/Dashboard/Dashboard.styles.js

@@ -1,9 +1,8 @@
-import { css } from "@emotion/react";
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvDashboard", {
-  root: {}
-});
-const gridStyles = css`
+import { css } from "@emotion/react";
+//#region src/Dashboard/Dashboard.styles.ts
+var { staticClasses, useClasses } = createClasses("HvDashboard", { root: {} });
+var gridStyles = css`
   .react-grid-layout {
     position: relative;
     transition: height 200ms ease;
@@ -189,8 +188,5 @@ const gridStyles = css`
     transform: rotate(45deg);
   }
 `;
-export {
-  gridStyles,
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { gridStyles, staticClasses, useClasses };

package/dist/Flow/Background/Background.js

@@ -1,19 +1,13 @@
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { jsx } from "react/jsx-runtime";
 import { Background } from "reactflow";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
-const HvFlowBackground = ({
-  color = "text",
-  ...others
-}) => {
-  return /* @__PURE__ */ jsx(
-    Background,
-    {
-      color: getColor(color, theme.colors.textSubtle),
-      gap: 16,
-      ...others
-    }
-  );
-};
-export {
-  HvFlowBackground
+//#region src/Flow/Background/Background.tsx
+var HvFlowBackground = ({ color = "text", ...others }) => {
+	return /* @__PURE__ */ jsx(Background, {
+		color: getColor(color, theme.colors.textSubtle),
+		gap: 16,
+		...others
+	});
 };
+//#endregion
+export { HvFlowBackground };

package/dist/Flow/Controls/Controls.js

@@ -1,96 +1,82 @@
+import { useFlowInstance } from "../hooks/useFlowInstance.js";
+import { HvButton, HvMultiButton, useLabels } from "@hitachivantara/uikit-react-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useStore, useStoreApi, Panel } from "reactflow";
+import { Panel, useStore, useStoreApi } from "reactflow";
 import { shallow } from "zustand/shallow";
-import { useLabels, HvMultiButton, HvButton } from "@hitachivantara/uikit-react-core";
-import { ZoomIn, ZoomOut, Focus, Unlock, Lock } from "@hitachivantara/uikit-react-icons";
-import { useFlowInstance } from "../hooks/useFlowInstance.js";
-const DEFAULT_LABELS = {
-  fitView: "Fit view",
-  zoomIn: "Zoom in",
-  zoomOut: "Zoom out",
-  interactive: "Interactive"
+import { Focus, Lock, Unlock, ZoomIn, ZoomOut } from "@hitachivantara/uikit-react-icons";
+//#region src/Flow/Controls/Controls.tsx
+var DEFAULT_LABELS = {
+	fitView: "Fit view",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	interactive: "Interactive"
 };
-const selector = (state) => ({
-  isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
-  minZoomReached: state.transform[2] <= state.minZoom,
-  maxZoomReached: state.transform[2] >= state.maxZoom
+var selector = (state) => ({
+	isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
+	minZoomReached: state.transform[2] <= state.minZoom,
+	maxZoomReached: state.transform[2] >= state.maxZoom
 });
-const HvFlowControls = ({
-  onZoomIn: onZoomInProp,
-  onZoomOut: onZoomOutProp,
-  onFitView: onFitViewProp,
-  labels: labelsProps,
-  hideInteractive,
-  hideFitView,
-  hideZoom,
-  position = "bottom-center",
-  orientation = "horizontal",
-  onInteractiveChange,
-  fitViewOptions,
-  children,
-  ...others
-}) => {
-  const { isInteractive, minZoomReached, maxZoomReached } = useStore(
-    selector,
-    shallow
-  );
-  const store = useStoreApi();
-  const { zoomIn, zoomOut, fitView } = useFlowInstance();
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const handleZoomIn = () => {
-    zoomIn();
-    onZoomInProp?.();
-  };
-  const handleZoomOut = () => {
-    zoomOut();
-    onZoomOutProp?.();
-  };
-  const handleFitView = () => {
-    fitView(fitViewOptions);
-    onFitViewProp?.();
-  };
-  const handleInteractive = () => {
-    store.setState({
-      nodesDraggable: !isInteractive,
-      nodesConnectable: !isInteractive,
-      elementsSelectable: !isInteractive
-    });
-    onInteractiveChange?.(!isInteractive);
-  };
-  return /* @__PURE__ */ jsx(Panel, { position, ...others, children: /* @__PURE__ */ jsxs(HvMultiButton, { vertical: orientation === "vertical", children: [
-    !hideZoom && /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        icon: true,
-        title: labels?.zoomIn,
-        onClick: handleZoomIn,
-        disabled: maxZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomIn, {})
-      }
-    ),
-    !hideZoom && /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        icon: true,
-        title: labels?.zoomOut,
-        onClick: handleZoomOut,
-        disabled: minZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomOut, {})
-      }
-    ),
-    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, {}) }),
-    !hideInteractive && /* @__PURE__ */ jsx(
-      HvButton,
-      {
-        icon: true,
-        title: labels?.interactive,
-        onClick: handleInteractive,
-        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {}) : /* @__PURE__ */ jsx(Lock, {})
-      }
-    ),
-    children
-  ] }) });
-};
-export {
-  HvFlowControls
+var HvFlowControls = ({ onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onFitView: onFitViewProp, labels: labelsProps, hideInteractive, hideFitView, hideZoom, position = "bottom-center", orientation = "horizontal", onInteractiveChange, fitViewOptions, children, ...others }) => {
+	const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
+	const store = useStoreApi();
+	const { zoomIn, zoomOut, fitView } = useFlowInstance();
+	const labels = useLabels(DEFAULT_LABELS, labelsProps);
+	const handleZoomIn = () => {
+		zoomIn();
+		onZoomInProp?.();
+	};
+	const handleZoomOut = () => {
+		zoomOut();
+		onZoomOutProp?.();
+	};
+	const handleFitView = () => {
+		fitView(fitViewOptions);
+		onFitViewProp?.();
+	};
+	const handleInteractive = () => {
+		store.setState({
+			nodesDraggable: !isInteractive,
+			nodesConnectable: !isInteractive,
+			elementsSelectable: !isInteractive
+		});
+		onInteractiveChange?.(!isInteractive);
+	};
+	return /* @__PURE__ */ jsx(Panel, {
+		position,
+		...others,
+		children: /* @__PURE__ */ jsxs(HvMultiButton, {
+			vertical: orientation === "vertical",
+			children: [
+				!hideZoom && /* @__PURE__ */ jsx(HvButton, {
+					icon: true,
+					title: labels?.zoomIn,
+					onClick: handleZoomIn,
+					disabled: maxZoomReached,
+					children: /* @__PURE__ */ jsx(ZoomIn, {})
+				}),
+				!hideZoom && /* @__PURE__ */ jsx(HvButton, {
+					icon: true,
+					title: labels?.zoomOut,
+					onClick: handleZoomOut,
+					disabled: minZoomReached,
+					children: /* @__PURE__ */ jsx(ZoomOut, {})
+				}),
+				!hideFitView && /* @__PURE__ */ jsx(HvButton, {
+					icon: true,
+					title: labels?.fitView,
+					onClick: handleFitView,
+					children: /* @__PURE__ */ jsx(Focus, {})
+				}),
+				!hideInteractive && /* @__PURE__ */ jsx(HvButton, {
+					icon: true,
+					title: labels?.interactive,
+					onClick: handleInteractive,
+					children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {}) : /* @__PURE__ */ jsx(Lock, {})
+				}),
+				children
+			]
+		})
+	});
 };
+//#endregion
+export { HvFlowControls };