@hitachivantara/uikit-react-lab 5.16.5 → 5.18.0

package/dist/types/index.d.ts

@@ -28,8 +28,14 @@ import { NodeProps } from 'reactflow';
 import { PanelPosition } from 'reactflow';
 import { default as React_2 } from 'react';
 import { ReactFlowProps } from 'reactflow';
+import { ReactGridLayoutProps } from 'react-grid-layout';
+import { ResponsiveProps } from 'react-grid-layout';
 import { SetStateAction } from 'react';
 
+export declare const dashboardClasses: {
+    root: "HvDashboard-root";
+};
+
 export declare const flowBaseNodeClasses: {
     root: "HvFlowBaseNode-root";
     title: "HvFlowBaseNode-title";
@@ -62,13 +68,42 @@ export declare const flowNodeClasses: {
 export declare const flowSidebarClasses: {
     description: "HvFlowSidebar-description";
     titleContainer: "HvFlowSidebar-titleContainer";
-    contentContainer: "HvFlowSidebar-contentContainer";
     drawerPaper: "HvFlowSidebar-drawerPaper";
+    contentContainer: "HvFlowSidebar-contentContainer";
     searchRoot: "HvFlowSidebar-searchRoot";
     groupsContainer: "HvFlowSidebar-groupsContainer";
     nodeType: "HvFlowSidebar-nodeType";
 };
 
+/**
+ * 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.
+ */
+export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;
+
+export declare type HvDashboardClasses = ExtractNames<typeof useClasses>;
+
+export declare interface HvDashboardProps extends Omit<ResponsiveProps, "cols"> {
+    /** Dashboard items. Each node must be `key`'ed  */
+    children: React.ReactNode;
+    /** An object used to override or extend the styles applied. */
+    classes?: HvDashboardClasses;
+    /**
+     * Layout is an array of object with the format:
+     *
+     * `{i: string, x: number, y: number, w: number, h: number}`
+     *
+     * The `i` must match the key used on each item component.
+     */
+    layout?: ReactGridLayoutProps["layout"];
+    /** Number of grid columns or an object of breakpoint -> #columns */
+    cols?: number | ResponsiveProps["cols"];
+}
+
 declare interface HvDroppableFlowProps<NodeType extends string | undefined = string | undefined, NodeData = any> extends Omit<ReactFlowProps, "nodes" | "edges" | "nodeTypes"> {
     /** Flow content: background, controls, and minimap. */
     children?: React.ReactNode;
@@ -113,7 +148,7 @@ export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "co
 
 export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: colorProp, inputs, outputs, nodeActions, classes: classesProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;
 
-export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_11>;
+export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps, "id">, NodeProps<T> {
     /** Header title */
@@ -140,7 +175,7 @@ export declare type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callba
     id: HvFlowBuiltInAction;
 };
 
-export declare type HvFlowClasses = ExtractNames<typeof useClasses_8>;
+export declare type HvFlowClasses = ExtractNames<typeof useClasses_2>;
 
 declare interface HvFlowContextValue<NodeGroups extends keyof any = string> {
     /** Flow nodes types. */
@@ -186,7 +221,7 @@ export declare interface HvFlowEmptyProps extends HvEmptyStateProps {
 
 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 type HvFlowMinimapClasses = ExtractNames<typeof useClasses_3>;
 
 export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
     /** Node color. Defaults to `atmo4`. */
@@ -207,7 +242,7 @@ export declare interface HvFlowNodeAction extends HvActionGeneric {
     callback?: (node: Node_2) => void;
 }
 
-export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_12>;
+export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_6>;
 
 export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = string, NodeData = any> extends ComponentClass<NodeProps>, NodeExtras<GroupId, NodeData> {
 }
@@ -236,6 +271,7 @@ export declare interface HvFlowNodeGroup {
 export declare type HvFlowNodeGroups<GroupId extends keyof any = string> = Record<GroupId, HvFlowNodeGroup>;
 
 export declare type HvFlowNodeInput = {
+    id?: string;
     label: string;
     isMandatory?: boolean;
     accepts?: string[];
@@ -251,6 +287,7 @@ export declare interface HvFlowNodeMeta {
 export declare type HvFlowNodeMetaRegistry = Record<string, HvFlowNodeMeta>;
 
 export declare type HvFlowNodeOutput = {
+    id?: string;
     label: string;
     isMandatory?: boolean;
     provides?: string;
@@ -325,7 +362,7 @@ export declare interface HvFlowProps<NodeGroups extends keyof any = string, Node
 
 export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, classes: classesProp, labels: labelsProps, dragOverlayProps, defaultGroupProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;
 
-export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_10>;
+export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_4>;
 
 export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes" | "title"> {
     /** Sidebar title. */
@@ -351,7 +388,7 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
     defaultGroupProps?: HvFlowNodeGroup;
 }
 
-declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
+declare type HvStepClasses = ExtractNames<typeof useClasses_8>;
 
 /**
  * Navigation page with steps.
@@ -376,7 +413,7 @@ declare type HvStepClasses = ExtractNames<typeof useClasses_2>;
  */
 export declare const HvStepNavigation: ({ className, classes: classesProp, width, steps, stepSize, showTitles, type, "aria-label": ariaLabel, ...others }: HvStepNavigationProps) => JSX_2.Element;
 
-export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses>;
+export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_7>;
 
 export declare interface HvStepNavigationProps extends HvBaseProps {
     /** Type of step navigation. Values = {"Simple", "Default"} */
@@ -422,7 +459,7 @@ export declare const HvWizard: ({ className, children, onClose, handleSubmit, ti
 
 export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, }: HvWizardActionsProps) => JSX_2.Element;
 
-export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_4>;
+export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_10>;
 
 export declare interface HvWizardActionsProps extends HvBaseProps {
     /** Function to handle the cancel button. */
@@ -450,11 +487,11 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
     classes?: HvWizardActionsClasses;
 }
 
-export declare type HvWizardClasses = ExtractNames<typeof useClasses_3>;
+export declare type HvWizardClasses = ExtractNames<typeof useClasses_9>;
 
 export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;
 
-export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_6>;
+export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_12>;
 
 export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose">, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
     /** Current state of the Wizard. */
@@ -467,7 +504,7 @@ export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClo
 
 export declare const HvWizardContent: ({ classes: classesProp, fixedHeight, loading, children, summaryContent, }: HvWizardContentProps) => JSX_2.Element;
 
-export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_7>;
+export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvWizardContentProps extends HvBaseProps {
     /** Forces minimum height to the component. */
@@ -534,7 +571,7 @@ export declare type HvWizardTabs = {
 
 export declare const HvWizardTitle: ({ title, hasSummary, labels, classes: classesProp, customStep, }: HvWizardTitleProps) => JSX_2.Element;
 
-export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_5>;
+export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_11>;
 
 export declare interface HvWizardTitleProps extends HvBaseProps {
     /** Title for the wizard. */
@@ -564,13 +601,9 @@ export declare const stepNavigationClasses: {
     titles: "HvStepNavigation-titles";
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
-        separator: string;
-        li: string;
-        ol: string;
-        titles: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -579,15 +612,12 @@ declare const useClasses: (classesProp?: Partial<Record<"root" | "separator" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
     classes: {
-        description: string;
-        titleContainer: string;
-        contentContainer: string;
-        drawerPaper: string;
-        searchRoot: string;
-        groupsContainer: string;
-        nodeType: string;
+        actionsContainer: string;
+        buttonWidth: string;
+        buttonsContainer: string;
+        buttonSpacing: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -596,20 +626,14 @@ declare const useClasses_10: (classesProp?: Partial<Record<"description" | "titl
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
-        root: string;
-        title: string;
         titleContainer: string;
-        mandatory: string;
-        inputContainer: string;
-        contentContainer: string;
+        messageContainer: string;
         headerContainer: string;
-        inputsTitleContainer: string;
-        outputsTitleContainer: string;
-        inputsContainer: string;
-        outputsContainer: string;
-        outputContainer: string;
+        buttonWidth: string;
+        rootSummaryButton: string;
+        stepContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -618,11 +642,11 @@ declare const useClasses_11: (classesProp?: Partial<Record<"root" | "title" | "t
     cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_12: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     classes: {
-        actions: string;
-        subtitleContainer: string;
-        paramsContainer: string;
+        root: string;
+        paper: string;
+        closeButton: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -631,18 +655,24 @@ declare const useClasses_12: (classesProp?: Partial<Record<"actions" | "subtitle
     cx: (...args: any) => string;
 };
 
-declare const useClasses_2: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "ghost" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
+declare const useClasses_13: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+    classes: {
+        contentContainer: string;
+        fixedHeight: string;
+        summaryRef: string;
+        summarySticky: string;
+        summaryContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_2: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
         root: string;
-        avatar: string;
-        ghost: string;
-        ghostDisabled: string;
-        notCurrent: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -662,12 +692,15 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"description" | "titleContainer" | "drawerPaper" | "contentContainer" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
     classes: {
-        actionsContainer: string;
-        buttonWidth: string;
-        buttonsContainer: string;
-        buttonSpacing: string;
+        description: string;
+        titleContainer: string;
+        drawerPaper: string;
+        contentContainer: string;
+        searchRoot: string;
+        groupsContainer: string;
+        nodeType: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -676,14 +709,20 @@ declare const useClasses_4: (classesProp?: Partial<Record<"actionsContainer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "buttonWidth" | "rootSummaryButton" | "headerContainer" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
     classes: {
+        root: string;
+        title: string;
         titleContainer: string;
-        messageContainer: string;
-        buttonWidth: string;
-        rootSummaryButton: string;
+        mandatory: string;
+        inputContainer: string;
+        contentContainer: string;
         headerContainer: string;
-        stepContainer: string;
+        inputsTitleContainer: string;
+        outputsTitleContainer: string;
+        inputsContainer: string;
+        outputsContainer: string;
+        outputContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -692,11 +731,11 @@ declare const useClasses_5: (classesProp?: Partial<Record<"titleContainer" | "me
     cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
+declare const useClasses_6: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
     classes: {
-        root: string;
-        paper: string;
-        closeButton: string;
+        actions: string;
+        subtitleContainer: string;
+        paramsContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -705,13 +744,13 @@ declare const useClasses_6: (classesProp?: Partial<Record<"root" | "paper" | "cl
     cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
     classes: {
-        contentContainer: string;
-        fixedHeight: string;
-        summaryRef: string;
-        summarySticky: string;
-        summaryContainer: string;
+        root: string;
+        separator: string;
+        li: string;
+        ol: string;
+        titles: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -720,9 +759,18 @@ declare const useClasses_7: (classesProp?: Partial<Record<"contentContainer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "ghost" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         root: string;
+        avatar: string;
+        ghost: string;
+        ghostDisabled: string;
+        notCurrent: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -744,10 +792,17 @@ declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addS
 
 export declare const useFlowContext: () => HvFlowContextValue<string>;
 
-export declare function useFlowNode<T = any>(id: string): {
-    readonly node: Node_2<T, string | undefined> | undefined;
-    readonly parentNodes: Node_2<any, string | undefined>[];
-};
+export declare function useFlowNode<T extends Node_2 = Node_2>(id: string): T | undefined;
+
+export declare function useFlowNodeEdges(id: string): Edge<any>[];
+
+export declare function useFlowNodeInputEdges(id: string): Edge<any>[];
+
+export declare function useFlowNodeMeta(id: string): HvFlowNodeMeta;
+
+export declare function useFlowNodeOutputEdges(id: string): Edge<any>[];
+
+export declare function useFlowNodeParents(id: string): Node_2<any, string | undefined>[];
 
 export declare const wizardActionsClasses: {
     actionsContainer: "HvWizardActions-actionsContainer";
@@ -777,9 +832,9 @@ export declare const wizardContentClasses: {
 export declare const wizardTitleClasses: {
     titleContainer: "HvWizardTitle-titleContainer";
     messageContainer: "HvWizardTitle-messageContainer";
+    headerContainer: "HvWizardTitle-headerContainer";
     buttonWidth: "HvWizardTitle-buttonWidth";
     rootSummaryButton: "HvWizardTitle-rootSummaryButton";
-    headerContainer: "HvWizardTitle-headerContainer";
     stepContainer: "HvWizardTitle-stepContainer";
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.16.5",
+  "version": "5.18.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,10 +32,11 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.36.9",
-    "@hitachivantara/uikit-react-icons": "^5.7.4",
-    "@hitachivantara/uikit-styles": "^5.16.2",
+    "@hitachivantara/uikit-react-core": "^5.36.11",
+    "@hitachivantara/uikit-react-icons": "^5.7.5",
+    "@hitachivantara/uikit-styles": "^5.16.3",
     "lodash": "^4.17.21",
+    "react-grid-layout": "^1.4.3",
     "reactflow": "^11.9.4",
     "uid": "^2.0.2",
     "usehooks-ts": "^2.9.1",
@@ -48,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d9f1b922b3a7eca8ff451d3fbc0b3803b3531a51",
+  "gitHead": "c069d4317b2f46289ca7d681939843544f3ecfd2",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {