@hitachivantara/uikit-react-lab 5.4.50 → 5.5.0

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroupItem.styles.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvFlowSidebarGroupItem\",\n  {\n    root: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      border: `1px solid ${theme.colors.atmo4}`,\n      padding: theme.spacing(0, 0, 0, \"sm\"),\n      cursor: \"pointer\",\n      boxShadow: `0 1px 0 ${theme.colors.shad1}`,\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n    },\n    dragging: { borderColor: theme.colors.primary_80 },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","justifyContent","border","theme","colors","atmo4","padding","spacing","cursor","boxShadow","shad1","outlineStyles","dragging","borderColor","primary_80"],"mappings":";AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,0BACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,QAAS,aAAYC,MAAMC,OAAOC,KAAM;AAAA,IACxCC,SAASH,MAAMI,QAAQ,GAAG,GAAG,GAAG,IAAI;AAAA,IACpCC,QAAQ;AAAA,IACRC,WAAY,WAAUN,MAAMC,OAAOM,KAAM;AAAA,IAEzC,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IAAEC,aAAaV,MAAMC,OAAOU;AAAAA,EAAW;AACnD,CACF;"}

package/dist/esm/components/Flow/Sidebar/utils.js

@@ -0,0 +1,27 @@
+const buildGroups = (nodeGroups, nodeTypes) => {
+  if (nodeGroups) {
+    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {
+      const nodes = nodeTypes ? Object.entries(nodeTypes).reduce((accN, currN) => {
+        var _a, _b;
+        if (((_a = currN[1].meta) == null ? void 0 : _a.groupId) === curr[0]) {
+          accN.push({
+            id: currN[0],
+            label: (_b = currN[1].meta) == null ? void 0 : _b.label
+          });
+        }
+        return accN;
+      }, []) : [];
+      acc[curr[0]] = {
+        ...curr[1],
+        nodes
+      };
+      return acc;
+    }, {});
+    return groups;
+  }
+  return {};
+};
+export {
+  buildGroups
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Flow/Sidebar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/Flow/Sidebar/utils.ts"],"sourcesContent":["import { HvFlowContextValue } from \"../FlowContext\";\nimport { HvFlowNodeGroup } from \"../types\";\nimport { HvFlowSidebarGroupNodes } from \"./SidebarGroup\";\n\nexport const buildGroups = (\n  nodeGroups: HvFlowContextValue[\"nodeGroups\"],\n  nodeTypes: HvFlowContextValue[\"nodeTypes\"]\n): {\n  [key: string]: HvFlowNodeGroup & { nodes: HvFlowSidebarGroupNodes };\n} => {\n  if (nodeGroups) {\n    const groups = Object.entries(nodeGroups).reduce((acc, curr) => {\n      const nodes = nodeTypes\n        ? Object.entries(nodeTypes).reduce(\n            (accN: HvFlowSidebarGroupNodes, currN) => {\n              if (currN[1].meta?.groupId === curr[0]) {\n                accN.push({\n                  id: currN[0],\n                  label: currN[1].meta?.label,\n                });\n              }\n              return accN;\n            },\n            []\n          )\n        : [];\n\n      acc[curr[0]] = {\n        ...curr[1],\n        nodes,\n      };\n\n      return acc;\n    }, {});\n\n    return groups;\n  }\n\n  return {};\n};\n"],"names":["buildGroups","nodeGroups","nodeTypes","groups","Object","entries","reduce","acc","curr","nodes","accN","currN","meta","groupId","push","id","label"],"mappings":"AAIaA,MAAAA,cAAcA,CACzBC,YACAC,cAGG;AACH,MAAID,YAAY;AACRE,UAAAA,SAASC,OAAOC,QAAQJ,UAAU,EAAEK,OAAO,CAACC,KAAKC,SAAS;AACxDC,YAAAA,QAAQP,YACVE,OAAOC,QAAQH,SAAS,EAAEI,OACxB,CAACI,MAA+BC,UAAU;AAVzCX;AAWC,cAAIW,WAAM,CAAC,EAAEC,SAATD,mBAAeE,aAAYL,KAAK,CAAC,GAAG;AACtCE,eAAKI,KAAK;AAAA,YACRC,IAAIJ,MAAM,CAAC;AAAA,YACXK,QAAOL,WAAM,CAAC,EAAEC,SAATD,mBAAeK;AAAAA,UAAAA,CACvB;AAAA,QACH;AACON,eAAAA;AAAAA,MAAAA,GAET,CAAA,CACF,IACA;AAEAF,UAAAA,KAAK,CAAC,CAAC,IAAI;AAAA,QACb,GAAGA,KAAK,CAAC;AAAA,QACTC;AAAAA,MAAAA;AAGKF,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AAEEJ,WAAAA;AAAAA,EACT;AAEA,SAAO;AACT;"}

package/dist/esm/index.js

@@ -11,7 +11,20 @@ import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent
 import { default as default2 } from "./components/Wizard/WizardContext/WizardContext.js";
 import { staticClasses as staticClasses6 } from "./components/Wizard/WizardTitle/WizardTitle.styles.js";
 import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
+import { staticClasses as staticClasses7 } from "./components/Flow/Flow.styles.js";
+import { HvFlowBackground } from "./components/Flow/Background/Background.js";
+import { HvFlowControls } from "./components/Flow/Controls/Controls.js";
+import { staticClasses as staticClasses8 } from "./components/Flow/Minimap/Minimap.styles.js";
+import { HvFlowMinimap } from "./components/Flow/Minimap/Minimap.js";
+import { staticClasses as staticClasses9 } from "./components/Flow/Sidebar/Sidebar.styles.js";
+import { HvFlowSidebar } from "./components/Flow/Sidebar/Sidebar.js";
+import { HvFlow } from "./components/Flow/Flow.js";
 export {
+  HvFlow,
+  HvFlowBackground,
+  HvFlowControls,
+  HvFlowMinimap,
+  HvFlowSidebar,
   HvStepNavigation,
   HvWizard,
   HvWizardActions,
@@ -19,6 +32,9 @@ export {
   HvWizardContent,
   default2 as HvWizardContext,
   HvWizardTitle,
+  staticClasses7 as flowClasses,
+  staticClasses8 as flowMinimapClasses,
+  staticClasses9 as flowSidebarClasses,
   staticClasses as stepNavigationClasses,
   staticClasses3 as wizardActionsClasses,
   staticClasses2 as wizardClasses,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -1,16 +1,194 @@
+import { BackgroundProps } from 'reactflow';
+import { ComponentClass } from 'react';
+import { ControlProps } from 'reactflow';
 import type { CSSInterpolation } from '@emotion/serialize';
 import { Dispatch } from 'react';
+import { DndContextProps } from '@dnd-kit/core';
+import { Edge } from 'reactflow';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
+import { FunctionComponent } from 'react';
+import { GetMiniMapNodeAttribute } from 'reactflow';
 import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
 import { HvButtonProps } from '@hitachivantara/uikit-react-core';
+import { HvColorAny } from '@hitachivantara/uikit-styles';
 import { HvDialogProps } from '@hitachivantara/uikit-react-core';
+import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+import { MiniMapProps } from 'reactflow';
 import { ModalProps } from '@mui/material';
+import { Node as Node_2 } from 'reactflow';
+import { NodeProps } from 'reactflow';
+import { PanelPosition } from 'reactflow';
 import { default as React_2 } from 'react';
+import { ReactFlowProps } from 'reactflow';
 import { SetStateAction } from 'react';
 
+export declare const flowClasses: {
+    root: "HvFlow-root";
+};
+
+export declare const flowMinimapClasses: {
+    root: "HvFlowMinimap-root";
+};
+
+export declare const flowSidebarClasses: {
+    description: "HvFlowSidebar-description";
+    titleContainer: "HvFlowSidebar-titleContainer";
+    contentContainer: "HvFlowSidebar-contentContainer";
+    drawerPaper: "HvFlowSidebar-drawerPaper";
+    searchRoot: "HvFlowSidebar-searchRoot";
+    groupsContainer: "HvFlowSidebar-groupsContainer";
+};
+
+declare interface HvDroppableFlowProps<NodeData = any, NodeType extends string | undefined = string | undefined> extends Omit<ReactFlowProps, "nodes" | "edges" | "nodeTypes"> {
+    /** Flow content: background, controls, and minimap. */
+    children?: React.ReactNode;
+    /** Flow nodes. */
+    nodes?: HvFlowNode<NodeData, NodeType>[];
+    /** Flow edges. */
+    edges?: HvFlowEdge[];
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvFlowClasses;
+    /** Function called when the flow changes. Returns the updated nodes and edges. */
+    onFlowChange?: (nodes: HvFlowNode<NodeData, NodeType>[], edges: HvFlowEdge[]) => void;
+}
+
+/**
+ * Flow component to build interactive node-based UIs.
+ *
+ * This implementation leverages [React Flow](https://reactflow.dev).
+ * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)
+ *
+ * DISCLAIMER: This component is a work in progress and there might be breaking changes.
+ */
+export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
+
+export declare const HvFlowBackground: ({ color, ...others }: HvFlowBackgroundProps) => JSX_2.Element;
+
+export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "color"> {
+    /** Color for the background dots. Defaults to `secondary`. */
+    color?: HvColorAny;
+}
+
+export declare type HvFlowClasses = ExtractNames<typeof useClasses_8>;
+
+export declare const HvFlowControls: ({ onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onFitView: onFitViewProp, labels: labelsProps, hideInteractive, hideFitView, hideZoom, position, orientation, onInteractiveChange, fitViewOptions, children, ...others }: HvFlowControlsProps) => JSX_2.Element;
+
+export declare type HvFlowControlsPosition = PanelPosition;
+
+export declare interface HvFlowControlsProps extends Omit<ControlProps, "position" | "showFitView" | "showInteractive" | "showZoom"> {
+    /** Controls position. Defaults to `bottom-center`. */
+    position?: HvFlowControlsPosition;
+    /** Controls orientation. Defaults to `horizontal`. */
+    orientation?: "vertical" | "horizontal";
+    /** Labels used on the controls buttons. */
+    labels?: {
+        zoomIn?: string;
+        zoomOut?: string;
+        fitView?: string;
+        interactive?: string;
+    };
+    /** Whether to hide the zoom controls. */
+    hideZoom?: boolean;
+    /** Whether to hide the fit view controls. */
+    hideFitView?: boolean;
+    /** Whether to hide the interactive controls. */
+    hideInteractive?: boolean;
+}
+
+/** Edge */
+export declare type HvFlowEdge = Edge;
+
+export declare const HvFlowMinimap: ({ nodeColor, maskColor, maskStrokeColor, nodeStrokeColor, classes: classesProp, className, ...others }: HvFlowMinimapProps) => JSX_2.Element;
+
+export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_9>;
+
+export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
+    /** Node color. Defaults to `atmo4`. */
+    nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
+    /** Node stroke color. Defaults to `atmo4`. */
+    nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
+    /** Mask color. Defaults to `atmo3`. */
+    maskColor?: HvColorAny;
+    /** Mask stroke color. Defaults to `atmo3`. */
+    maskStrokeColor?: HvColorAny;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvFlowMinimapClasses;
+}
+
+/** Node */
+export declare type HvFlowNode<NodeData = any, NodeType extends string | undefined = string | undefined> = Node_2<NodeData, NodeType>;
+
+export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = string> extends ComponentClass<NodeProps> {
+    /** Metadata used on the HvFlowSidebar component to group the node */
+    meta?: {
+        groupId: GroupId;
+        label: string;
+    };
+}
+
+export declare type HvFlowNodeComponentType<GroupId extends keyof any = string> = HvFlowNodeComponentClass<GroupId> | HvFlowNodeFunctionComponent<GroupId>;
+
+/** Node types */
+export declare interface HvFlowNodeFunctionComponent<GroupId extends keyof any = string> extends FunctionComponent<NodeProps> {
+    /** Metadata used on the HvFlowSidebar component to group the node */
+    meta?: {
+        groupId: GroupId;
+        label: string;
+    };
+}
+
+/** Node groups */
+export declare interface HvFlowNodeGroup {
+    label: string;
+    description?: string;
+    color?: HvColorAny;
+    icon?: React.ReactNode;
+}
+
+export declare type HvFlowNodeGroups<GroupId extends keyof any = string> = Record<GroupId, HvFlowNodeGroup>;
+
+export declare type HvFlowNodeTypes<GroupId extends keyof any = string> = {
+    [key: string]: HvFlowNodeComponentType<GroupId>;
+};
+
+export declare interface HvFlowProps<NodeData = any, NodeType extends string | undefined = string | undefined, NodeGroups extends keyof any = string> extends HvDroppableFlowProps<NodeData, NodeType> {
+    /** Flow nodes groups. */
+    nodeGroups?: HvFlowNodeGroups<NodeGroups>;
+    /** Flow nodes types. */
+    nodeTypes?: HvFlowNodeTypes<NodeGroups>;
+    /** Flow sidebar. */
+    sidebar?: React.ReactNode;
+    /**
+     * Dnd Kit context props. This should be used for accessibility purposes.
+     *
+     * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)
+     */
+    dndContextProps?: Pick<DndContextProps, "accessibility">;
+}
+
+export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
+
+export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_10>;
+
+export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes" | "title"> {
+    /** Sidebar title. */
+    title?: string;
+    /** Sidebar description. */
+    description?: string;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvFlowSidebarClasses;
+    /** Labels used on the sidebar. */
+    labels?: {
+        itemAriaRoleDescription?: string;
+        expandGroupButtonAriaLabel?: string;
+        searchPlaceholder?: string;
+        searchAriaLabel?: string;
+    };
+}
+
 declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
 
 /**
@@ -235,6 +413,22 @@ declare const useClasses: (classesProp?: Partial<Record<"li" | "ol" | "root" | "
     cx: (...args: any) => string;
 };
 
+declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer", string>>, addStatic?: boolean) => {
+    classes: {
+        description: string;
+        titleContainer: string;
+        contentContainer: string;
+        drawerPaper: string;
+        searchRoot: string;
+        groupsContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 declare const useClasses_2: (classesProp?: Partial<Record<"xl" | "lg" | "md" | "sm" | "xs" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
         xl: string;
@@ -324,6 +518,28 @@ declare const useClasses_7: (classesProp?: Partial<Record<"fixedHeight" | "conte
     cx: (...args: any) => string;
 };
 
+declare const useClasses_8: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 export declare const wizardActionsClasses: {
     buttonWidth: "HvWizardActions-buttonWidth";
     actionsContainer: "HvWizardActions-actionsContainer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.4.50",
+  "version": "5.5.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -29,11 +29,17 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.27.4",
+    "@hitachivantara/uikit-react-core": "^5.27.5",
     "@hitachivantara/uikit-react-icons": "^5.6.6",
     "@hitachivantara/uikit-styles": "^5.12.1",
-    "usehooks-ts": "^2.9.1"
+    "lodash": "^4.17.21",
+    "reactflow": "^11.8.3",
+    "uid": "^2.0.2",
+    "usehooks-ts": "^2.9.1",
+    "zustand": "^4.4.1"
   },
   "files": [
     "dist"
@@ -42,7 +48,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e948ae1d26c9b60721df3576ae833340422b119b",
+  "gitHead": "435a519a26417bd9b599a7b0b57ad441ae3a0436",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {