@hitachivantara/uikit-react-lab 6.1.8 → 6.1.10

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 };