@hitachivantara/uikit-react-lab 5.22.2 → 5.23.0

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ import { Edge } from 'reactflow';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { FC } from 'react';
 import { GetMiniMapNodeAttribute } from 'reactflow';
+import { HTMLAttributes } from 'react';
 import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
 import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
 import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
@@ -21,6 +22,7 @@ import { HvDialogProps } from '@hitachivantara/uikit-react-core';
 import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
 import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
 import { HvSliderProps } from '@hitachivantara/uikit-react-core';
+import { HvTypographyVariants } from '@hitachivantara/uikit-react-core';
 import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { MiniMapProps } from 'reactflow';
 import { ModalProps } from '@mui/material/Modal';
@@ -32,6 +34,22 @@ import { ReactFlowProps } from 'reactflow';
 import { ReactGridLayoutProps } from 'react-grid-layout';
 import { ResponsiveProps } from 'react-grid-layout';
 import { SetStateAction } from 'react';
+import { SyntheticEvent } from 'react';
+
+export declare const bladeClasses: {
+    container: "HvBlade-container";
+    root: "HvBlade-root";
+    disabled: "HvBlade-disabled";
+    button: "HvBlade-button";
+    expanded: "HvBlade-expanded";
+    heading: "HvBlade-heading";
+    fullWidth: "HvBlade-fullWidth";
+    textOnlyLabel: "HvBlade-textOnlyLabel";
+};
+
+export declare const bladesClasses: {
+    root: "HvBlades-root";
+};
 
 export declare const dashboardClasses: {
     root: "HvDashboard-root";
@@ -85,6 +103,143 @@ export declare const flowSidebarClasses: {
     nodeType: "HvFlowSidebar-nodeType";
 };
 
+/**
+ * A blade is a design element that expands horizontally to reveal information, similar to an accordion.
+ *
+ * It is usually stacked horizontally with other blades and works best when used within a flex container.
+ * The `HvBlades` component is recommended for this purpose, as it also provides better management of the
+ * blades' expanded state.
+ */
+export declare const HvBlade: (props: HvBladeProps) => JSX_2.Element;
+
+export declare type HvBladeClasses = ExtractNames<typeof useClasses>;
+
+export declare interface HvBladeProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
+    /**
+     * The content that will be rendered within the blade.
+     */
+    children: React_2.ReactNode;
+    /**
+     * The content of the blade's button.
+     *
+     * If a render function is provided, it will be called with the expanded state as an argument.
+     */
+    label?: React_2.ReactNode | ((expanded: boolean) => React_2.ReactNode);
+    /**
+     * Typography variant for the blade's button label.
+     */
+    labelVariant?: HvTypographyVariants;
+    /**
+     * Heading Level to apply to blade button.
+     *
+     * If 'undefined', the button will not have a header wrapper.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Indicates whether the blade is expanded or not.
+     *
+     * When defined the expanded state becomes controlled.
+     *
+     * @default undefined
+     */
+    expanded?: boolean;
+    /**
+     * Specifies the initial expanded state of the blade when it is uncontrolled.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Callback function triggered when the blade's button is pressed.
+     * It receives the event and the new expanded state as arguments.
+     *
+     * If the blade is uncontrolled, this new state will be effective.
+     * If the blade is controlled, it is up to the parent component to manage this state.
+     *
+     * @param {SyntheticEvent} event The event source of the callback.
+     * @param {boolean} value The new value.
+     */
+    onChange?: (event: React_2.SyntheticEvent, value: boolean) => void;
+    /**
+     * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the blade will take up the maximum width of the container when expanded.
+     */
+    fullWidth?: boolean;
+    /**
+     * Props to be passed to the button that toggles the blade's expanded state.
+     * This can be used to further customize the appearance or behavior of the blade's button,
+     * e.g. to set the aria-label attribute.
+     */
+    buttonProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props to be passed to the container div that holds the blade's children.
+     * This can be used to further customize the appearance or behavior of the blade's content area.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * A Jss Object used to override or extend the styles applied.
+     */
+    classes?: HvBladeClasses;
+}
+
+/**
+ * `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.
+ */
+export declare const HvBlades: (props: HvBladesProps) => JSX_2.Element;
+
+export declare type HvBladesClasses = ExtractNames<typeof useClasses_2>;
+
+export declare interface HvBladesProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
+    /**
+     * Array of indices representing the expanded state of each blade.
+     *
+     * When defined, the expanded state of the blades becomes controlled.
+     */
+    expanded?: number[];
+    /**
+     * Initial expanded state of the blades when in an uncontrolled state.
+     *
+     * It's an array of indices representing the blades that should be initially expanded.
+     */
+    defaultExpanded?: number[];
+    /**
+     * If true, ensures that only one blade can be expanded at a time.
+     */
+    atMostOneExpanded?: boolean;
+    /**
+     * If true, ensures that at least one blade is always expanded.
+     */
+    atLeastOneExpanded?: boolean;
+    /**
+     * If true, the blades will take up the full width of the container by default.
+     */
+    fullWidthBlades?: boolean;
+    /**
+     * Callback function triggered when the expanded state of any blade changes.
+     * It receives the event and the new array of expanded indices as arguments.
+     *
+     * If uncontrolled, this new state will be effective.
+     * If controlled, it is up to the parent component to manage this state.
+     *
+     * @param {SyntheticEvent} event The event source of the callback.
+     * @param {number[]} value Array of indices of the blades that are expanded.
+     */
+    onChange?: (event: SyntheticEvent, value: number[]) => void;
+    /**
+     * The blades to be rendered within the group.
+     * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.
+     */
+    children: React_2.ReactNode;
+    /**
+     * A Jss Object used to override or extend the styles applied.
+     */
+    classes?: HvBladesClasses;
+}
+
 /**
  * A Dashboard grid layout component, based on `react-grid-layout`.
  * The children elements are grid items and must be `key`ed.
@@ -95,11 +250,11 @@ export declare const flowSidebarClasses: {
  */
 export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;
 
-export declare type HvDashboardClasses = ExtractNames<typeof useClasses>;
+export declare type HvDashboardClasses = ExtractNames<typeof useClasses_3>;
 
 export declare const HvDashboardNode: (props: HvDashboardNodeProps) => JSX_2.Element;
 
-export declare interface HvDashboardNodeClasses extends ExtractNames<typeof useClasses_7>, HvFlowNodeClasses {
+export declare interface HvDashboardNodeClasses extends ExtractNames<typeof useClasses_9>, HvFlowNodeClasses {
 }
 
 export declare const hvDashboardNodeClasses: {
@@ -180,7 +335,7 @@ export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "co
 
 export declare const HvFlowBaseNode: ({ id, title, headerItems, icon, color: colorProp, inputs, outputs, nodeActions, footer, classes: classesProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;
 
-export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_5>;
+export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_7>;
 
 export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps, "id">, NodeProps<T> {
     /** Header title */
@@ -209,7 +364,7 @@ export declare type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callba
     id: HvFlowBuiltInAction;
 };
 
-export declare type HvFlowClasses = ExtractNames<typeof useClasses_2>;
+export declare type HvFlowClasses = ExtractNames<typeof useClasses_4>;
 
 declare interface HvFlowContextValue<NodeGroups extends keyof any = string> {
     /** Flow nodes types. */
@@ -255,7 +410,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_3>;
+export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
     /** Node color. Defaults to `atmo4`. */
@@ -276,7 +431,7 @@ export declare interface HvFlowNodeAction extends HvActionGeneric {
     callback?: (node: Node_2) => void;
 }
 
-export declare interface HvFlowNodeClasses extends ExtractNames<typeof useClasses_6>, HvFlowBaseNodeClasses {
+export declare interface HvFlowNodeClasses extends ExtractNames<typeof useClasses_8>, HvFlowBaseNodeClasses {
 }
 
 export declare interface HvFlowNodeComponentClass<GroupId extends keyof any = string, NodeData = any> extends ComponentClass<NodeProps>, NodeExtras<GroupId, NodeData> {
@@ -403,7 +558,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_4>;
+export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_6>;
 
 export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes" | "title"> {
     /** Sidebar title. */
@@ -429,7 +584,7 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
     defaultGroupProps?: HvFlowNodeGroup;
 }
 
-declare type HvStepClasses = ExtractNames<typeof useClasses_9>;
+declare type HvStepClasses = ExtractNames<typeof useClasses_11>;
 
 /**
  * Navigation page with steps.
@@ -454,7 +609,7 @@ declare type HvStepClasses = ExtractNames<typeof useClasses_9>;
  */
 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_8>;
+export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_10>;
 
 export declare interface HvStepNavigationProps extends HvBaseProps {
     /** Type of step navigation. Values = {"Simple", "Default"} */
@@ -500,7 +655,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_11>;
+export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvWizardActionsProps extends HvBaseProps {
     /** Function to handle the cancel button. */
@@ -528,11 +683,11 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
     classes?: HvWizardActionsClasses;
 }
 
-export declare type HvWizardClasses = ExtractNames<typeof useClasses_10>;
+export declare type HvWizardClasses = ExtractNames<typeof useClasses_12>;
 
 export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;
 
-export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_13>;
+export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_15>;
 
 export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose">, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
     /** Current state of the Wizard. */
@@ -545,7 +700,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_14>;
+export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_16>;
 
 export declare interface HvWizardContentProps extends HvBaseProps {
     /** Forces minimum height to the component. */
@@ -612,7 +767,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_12>;
+export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_14>;
 
 export declare interface HvWizardTitleProps extends HvBaseProps {
     /** Title for the wizard. */
@@ -642,9 +797,16 @@ export declare const stepNavigationClasses: {
     titles: "HvStepNavigation-titles";
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"container" | "root" | "disabled" | "button" | "expanded" | "heading" | "fullWidth" | "textOnlyLabel", string>>, addStatic?: boolean) => {
     classes: {
+        container: string;
         root: string;
+        disabled: string;
+        button: string;
+        expanded: string;
+        heading: string;
+        fullWidth: string;
+        textOnlyLabel: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -653,9 +815,13 @@ declare const useClasses: (classesProp?: Partial<Record<"root", string>>, addSta
     cx: (...args: any) => string;
 };
 
-declare const useClasses_10: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
+        separator: string;
+        li: string;
+        ol: string;
+        titles: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -664,7 +830,38 @@ declare const useClasses_10: (classesProp?: Partial<Record<"root", string>>, add
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
+    classes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        root: string;
+        ghost: string;
+        avatar: string;
+        ghostDisabled: string;
+        notCurrent: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_12: (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_13: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
     classes: {
         actionsContainer: string;
         buttonWidth: string;
@@ -678,7 +875,7 @@ declare const useClasses_11: (classesProp?: Partial<Record<"actionsContainer" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_14: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
         titleContainer: string;
         messageContainer: string;
@@ -694,7 +891,7 @@ declare const useClasses_12: (classesProp?: Partial<Record<"titleContainer" | "m
     cx: (...args: any) => string;
 };
 
-declare const useClasses_13: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
+declare const useClasses_15: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         paper: string;
@@ -707,7 +904,7 @@ declare const useClasses_13: (classesProp?: Partial<Record<"root" | "paper" | "c
     cx: (...args: any) => string;
 };
 
-declare const useClasses_14: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_16: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
     classes: {
         contentContainer: string;
         fixedHeight: string;
@@ -744,7 +941,29 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"description" | "titleContainer" | "drawerPaper" | "contentContainer" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (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_5: (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_6: (classesProp?: Partial<Record<"description" | "titleContainer" | "drawerPaper" | "contentContainer" | "searchRoot" | "groupsContainer" | "nodeType", string>>, addStatic?: boolean) => {
     classes: {
         description: string;
         titleContainer: string;
@@ -761,7 +980,7 @@ declare const useClasses_4: (classesProp?: Partial<Record<"description" | "title
     cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"root" | "title" | "titleContainer" | "mandatory" | "footerContainer" | "inputContainer" | "contentContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "inputsContainer" | "outputsContainer" | "outputContainer", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         title: string;
@@ -784,7 +1003,7 @@ declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "ti
     cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"actions" | "subtitleContainer" | "paramsContainer", string>>, addStatic?: boolean) => {
     classes: {
         actions: string;
         subtitleContainer: string;
@@ -797,7 +1016,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"actions" | "subtitleC
     cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"empty" | "actions", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"empty" | "actions", string>>, addStatic?: boolean) => {
     classes: {
         empty: string;
         actions: string;
@@ -809,41 +1028,6 @@ declare const useClasses_7: (classesProp?: Partial<Record<"empty" | "actions", s
     cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
-    classes: {
-        root: string;
-        separator: string;
-        li: string;
-        ol: string;
-        titles: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
-declare const useClasses_9: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
-    classes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        root: string;
-        ghost: string;
-        avatar: string;
-        ghostDisabled: string;
-        notCurrent: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
 export declare const useFlowContext: () => HvFlowContextValue<string>;
 
 export declare function useFlowInputNodes<T = any>(id: string): Node_2<T, string | undefined>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.22.2",
+  "version": "5.23.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,8 +32,8 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.44.2",
-    "@hitachivantara/uikit-react-icons": "^5.7.14",
+    "@hitachivantara/uikit-react-core": "^5.44.3",
+    "@hitachivantara/uikit-react-icons": "^5.8.0",
     "@hitachivantara/uikit-styles": "^5.17.2",
     "@types/react-grid-layout": "^1.3.5",
     "lodash": "^4.17.21",
@@ -50,7 +50,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "8bfd5f2420d58ddc196ab2b6e1a1474c4c2d9831",
+  "gitHead": "5cf0119ea66c034bda2108043eb3c6b09ab4b7ff",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {