@hitachivantara/uikit-react-core 5.48.1 → 5.50.0

package/dist/types/index.d.ts

@@ -10,10 +10,8 @@ import { Cell } from 'react-table';
 import { ChangeEvent } from 'react';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { ChipProps } from '@mui/material/Chip';
-import { ClassNameMap } from '@mui/material/styles';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
-import { CombinedClassKey } from 'notistack';
 import { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import { Context } from 'react';
@@ -84,6 +82,7 @@ import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { Renderer } from 'react-table';
 import { Row } from 'react-table';
+import { SlideProps } from '@mui/material/Slide';
 import { SliderProps } from 'rc-slider';
 import { SliderRef } from 'rc-slider';
 import { SnackbarCloseReason } from '@mui/material/Snackbar';
@@ -91,6 +90,7 @@ import { SnackbarContentProps } from '@mui/material/SnackbarContent';
 import { SnackbarKey } from 'notistack';
 import { SnackbarOrigin } from '@mui/material/Snackbar';
 import { SnackbarProps } from '@mui/material/Snackbar';
+import { SnackbarProviderProps } from 'notistack';
 import { SwitchProps } from '@mui/material/Switch';
 import { SyntheticEvent } from 'react';
 import { TableCellProps } from 'react-table';
@@ -1035,13 +1035,14 @@ export declare const getVarValue: (cssVar: string, rootElementId?: string) => st
 export declare const globalActionsClasses: {
     name: "HvGlobalActions-name";
     root: "HvGlobalActions-root";
+    section: "HvGlobalActions-section";
     wrapper: "HvGlobalActions-wrapper";
-    globalSectionArea: "HvGlobalActions-globalSectionArea";
     sectionName: "HvGlobalActions-sectionName";
     actions: "HvGlobalActions-actions";
     positionSticky: "HvGlobalActions-positionSticky";
     positionFixed: "HvGlobalActions-positionFixed";
     global: "HvGlobalActions-global";
+    globalSectionArea: "HvGlobalActions-globalSectionArea";
     globalWrapperComplement: "HvGlobalActions-globalWrapperComplement";
     backButton: "HvGlobalActions-backButton";
 };
@@ -1496,9 +1497,11 @@ export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin
     transitionDuration?: number;
     /** Direction of slide transition. */
     transitionDirection?: "up" | "down" | "left" | "right";
+    /** The container the banner should slide from. */
+    container?: SlideProps["container"];
     /** Offset from top/bottom of the page, in px. Defaults to 60px. */
     offset?: number;
-    /** Props to pass down to the Banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */
+    /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */
     bannerContentProps?: HvBannerContentProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvBannerClasses;
@@ -2008,11 +2011,11 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
  * Button component is used to trigger an action or event.
  */
 export declare const HvButton: <C extends ElementType<any, keyof JSX_2.IntrinsicElements> = "button">(props: {
-    /** Use the variant prop to change the visual style of the Button. */
+    /** Use the variant prop to change the visual style of the button. */
     variant?: "secondary" | "primary" | "semantic" | "secondarySubtle" | "secondaryGhost" | "primaryGhost" | "primarySubtle" | "ghost" | undefined;
-    /** Whether the Button is an icon-only button. */
+    /** Whether the button is an icon-only button. */
     icon?: boolean | undefined;
-    /** Whether the Button is disabled or not. */
+    /** Whether the button is disabled or not. */
     disabled?: boolean | undefined;
     /** Class names to be applied. */
     className?: string | undefined;
@@ -2043,24 +2046,30 @@ export declare const HvButton: <C extends ElementType<any, keyof JSX_2.Intrinsic
         endIcon: string;
         focusVisible: string;
     }> | undefined;
-    /** Whether the Button is selected or not. */
+    /** Whether the button is selected or not. */
     selected?: boolean | undefined;
+    /**
+     * Whether the button is focusable when disabled.
+     * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.
+     * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.
+     */
+    focusableWhenDisabled?: boolean | undefined;
 } & {
     component?: C | undefined;
 } & {
     children?: ReactNode;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
 export declare type HvButtonClasses = ExtractNames<typeof useClasses_33>;
 
 export declare type HvButtonProps<C extends React.ElementType = "button"> = PolymorphicComponentRef<C, {
-    /** Use the variant prop to change the visual style of the Button. */
+    /** Use the variant prop to change the visual style of the button. */
     variant?: HvButtonVariant;
-    /** Whether the Button is an icon-only button. */
+    /** Whether the button is an icon-only button. */
     icon?: boolean;
-    /** Whether the Button is disabled or not. */
+    /** Whether the button is disabled or not. */
     disabled?: boolean;
     /** Class names to be applied. */
     className?: string;
@@ -2076,8 +2085,14 @@ export declare type HvButtonProps<C extends React.ElementType = "button"> = Poly
     overrideIconColors?: boolean;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvButtonClasses;
-    /** Whether the Button is selected or not. */
+    /** Whether the button is selected or not. */
     selected?: boolean;
+    /**
+     * Whether the button is focusable when disabled.
+     * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.
+     * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.
+     */
+    focusableWhenDisabled?: boolean;
 }>;
 
 export declare type HvButtonRadius = (typeof buttonRadius)[number];
@@ -3811,7 +3826,7 @@ export declare interface HvGlobalActionsProps extends HvBaseProps<HTMLDivElement
     headingLevel?: HvGlobalActionsHeadingLevel;
     /**
      * Position of the Global Actions.
-     * Defaults to `sticky` when it is a global title and `relative` when it's a section title.
+     * @default variant === "global" ? "sticky" : "relative"
      */
     position?: HvGlobalActionsPosition;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -5392,8 +5407,37 @@ export declare type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relati
 export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
     options: HvScrollToHorizontalOption[];
-    /** True if the href location link should be applied. It will create an a element around every list item */
+    /**
+     * Should the active element be reflected in the URL.
+     *
+     * @default true
+     *
+     * @deprecated Use `navigationMode` instead.
+     * */
     href?: boolean;
+    /**
+     * The navigation mode to be used when the user clicks on a tab element.
+     * - `push` will add a new entry to the history stack.
+     * - `replace` will replace the current entry on the history stack.
+     * - `none` will not add any entry to the history stack.
+     *
+     * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.
+     *
+     * When set to `none`, then each element will render a button instead of a link.
+     *
+     * @default "push"
+     */
+    navigationMode?: "push" | "replace" | "none";
+    /**
+     * When set to `true`, the generated links will be relative (e.g. `#section`).
+     * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).
+     * This can lead to unexpected behavior.
+     *
+     * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).
+     *
+     * @default false
+     */
+    relativeLinks?: boolean;
     /** Default selected index passed from the parent. */
     defaultSelectedIndex?: number;
     /**
@@ -5415,15 +5459,22 @@ export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOList
     /** Position of tooltip identifying the current item. */
     tooltipPosition?: HvScrollToTooltipPositions;
     /** A function called each time the selected index changes. */
-    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user clicks on a tab element. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user press enter on a tab element. */
-    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvScrollToHorizontalClasses;
 }
 
+export declare interface HvScrollToOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+
 export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bottom";
 
 /**
@@ -5433,20 +5484,44 @@ export declare const HvScrollToVertical: (props: HvScrollToVerticalProps) => JSX
 
 export declare type HvScrollToVerticalClasses = ExtractNames<typeof useClasses_92>;
 
-export declare interface HvScrollToVerticalOption {
-    key?: string;
-    label: string;
-    value: string;
-    offset?: number;
-}
+export declare type HvScrollToVerticalOption = HvScrollToOption;
 
 export declare type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
 
 export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
-    options: HvScrollToVerticalOption[];
-    /** True if the href location link should be applied. It will create an a element around every list item */
+    options: HvScrollToOption[];
+    /**
+     * Should the active element be reflected in the URL.
+     *
+     * @default true
+     *
+     * @deprecated Use `navigationMode` instead.
+     * */
     href?: boolean;
+    /**
+     * The navigation mode to be used when the user clicks on a tab element.
+     * - `push` will add a new entry to the history stack.
+     * - `replace` will replace the current entry on the history stack.
+     * - `none` will not add any entry to the history stack.
+     *
+     * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`.
+     *
+     * When set to `none`, then each element will render a button instead of a link.
+     *
+     * @default "push"
+     */
+    navigationMode?: "push" | "replace" | "none";
+    /**
+     * When set to `true`, the generated links will be relative (e.g. `#section`).
+     * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `<base>` tag).
+     * This can lead to unexpected behavior.
+     *
+     * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`).
+     *
+     * @default false
+     */
+    relativeLinks?: boolean;
     /** Default selected index passed from the parent. */
     defaultSelectedIndex?: number;
     /**
@@ -5468,11 +5543,11 @@ export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListEl
     /** Position of tooltip identifying the current item. */
     tooltipPosition?: HvScrollToTooltipPositions;
     /** A function called each time the selected index changes. */
-    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user clicks on a tab element. */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A function called each time an user press enter on a tab element. */
-    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>, index: number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvScrollToVerticalClasses;
 }
@@ -5503,6 +5578,8 @@ export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>
     raisedHeader?: boolean;
     /** A Jss Object used to override or extend the styles applied to the empty state component. */
     classes?: HvSectionClasses;
+    /** Content container ref. */
+    contentRef?: React.Ref<HTMLDivElement>;
 }
 
 /**
@@ -5756,7 +5833,7 @@ export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onCh
  * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.
  * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.
  */
-export declare const HvSnackbar: ({ classes: classesProp, className, id, open, onClose, label, anchorOrigin, autoHideDuration, variant, showIcon, customIcon, action, actionCallback, transitionDuration, transitionDirection, offset, snackbarContentProps, ...others }: HvSnackbarProps) => JSX_3.Element;
+export declare const HvSnackbar: ({ classes: classesProp, className, id, open, onClose, label, anchorOrigin, autoHideDuration, variant, showIcon, customIcon, action, actionCallback, transitionDuration, transitionDirection, container, offset, snackbarContentProps, ...others }: HvSnackbarProps) => JSX_3.Element;
 
 export declare type HvSnackbarClasses = ExtractNames<typeof useClasses_98>;
 
@@ -5806,6 +5883,8 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     transitionDuration?: number;
     /** Direction of slide transition. */
     transitionDirection?: "up" | "down" | "left" | "right";
+    /** The container the snackbar should slide from. */
+    container?: SlideProps["container"];
     /** Custom offset from top/bottom of the page, in px. */
     offset?: number;
     /** Others applied to the content of the snackbar. */
@@ -5816,7 +5895,7 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     ref?: SnackbarProps["ref"];
 }
 
-export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, ...others }: HvSnackbarProviderProps) => JSX_3.Element;
+export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, container, ...others }: HvSnackbarProviderProps) => JSX_3.Element;
 
 export declare type HvSnackbarProviderClasses = ExtractNames<typeof useClasses_100>;
 
@@ -5830,10 +5909,13 @@ export declare interface HvSnackbarProviderProps {
     /** Where is the snackbar placed. */
     anchorOrigin?: SnackbarOrigin;
     /** Class object used to override notistack classes. */
-    notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;
+    notistackClassesOverride?: SnackbarProviderProps["classes"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSnackbarProviderClasses;
+    /** Class names to be applied. */
     className?: string;
+    /** The container the snackbar should slide from. */
+    container?: SnackbarProviderProps["domRoot"];
 }
 
 export declare type HvSnackbarVariant = "default" | "success" | "warning" | "error";
@@ -9980,17 +10062,18 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_70: (classesProp?: Partial<Record<"name" | "root" | "wrapper" | "globalSectionArea" | "sectionName" | "actions" | "positionSticky" | "positionFixed" | "global" | "globalWrapperComplement" | "backButton", string>>, addStatic?: boolean) => {
+declare const useClasses_70: (classesProp?: Partial<Record<"name" | "root" | "section" | "wrapper" | "sectionName" | "actions" | "positionSticky" | "positionFixed" | "global" | "globalSectionArea" | "globalWrapperComplement" | "backButton", string>>, addStatic?: boolean) => {
     classes: {
         name: string;
         root: string;
+        section: string;
         wrapper: string;
-        globalSectionArea: string;
         sectionName: string;
         actions: string;
         positionSticky: string;
         positionFixed: string;
         global: string;
+        globalSectionArea: string;
         globalWrapperComplement: string;
         backButton: string;
     };
@@ -10855,8 +10938,6 @@ export declare type UseRowSelectionProps = (<D extends object = Record<string, u
 
 export declare function useSavedState<T>(defaultState: T): readonly [T | undefined, (value?: T, save?: boolean) => void, () => void, T | undefined, T];
 
-export declare const useScrollTo: (selectedIndexProp?: number, scrollElementId?: string | undefined, href?: boolean, offset?: number, options?: HvScrollToVerticalOption[], onChange?: ((event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void) | undefined, direction?: "column" | "row") => [number, (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, id: string, index: number, wrappedOnChange?: ((index: number) => void) | undefined) => void];
-
 export declare const useSelectionPath: (data: HvHeaderNavigationItemProp[], selectedId?: string) => string[];
 
 export declare type UseTableStylesProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.48.1",
+  "version": "5.50.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -33,9 +33,9 @@
     "@emotion/css": "^11.11.2",
     "@emotion/serialize": "^1.1.2",
     "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.8.2",
-    "@hitachivantara/uikit-react-shared": "^5.1.27",
-    "@hitachivantara/uikit-styles": "^5.18.0",
+    "@hitachivantara/uikit-react-icons": "^5.8.3",
+    "@hitachivantara/uikit-react-shared": "^5.1.28",
+    "@hitachivantara/uikit-styles": "^5.19.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "55151d9d8e1f3fd2ca2407efa1446ea50095f5ed",
+  "gitHead": "cec1b26e604a5c6084e7a4f7da14d830d84dbbda",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/utils/IconButton.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../src/utils/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\n\nexport interface IconButtonProps extends Omit<HvButtonProps, \"icon\" | \"title\"> {\n  title: React.ReactNode;\n  placement?: HvTooltipProps[\"placement\"];\n  onClick?: HvButtonProps[\"onClick\"];\n}\n\n/** An `HvButton` of type icon wrapped in a tooltip  */\nexport const IconButton = ({\n  title,\n  placement = \"top\",\n  ...others\n}: IconButtonProps) => (\n  <HvTooltip enterDelay={500} title={title} placement={placement}>\n    <HvButton icon {...others} />\n  </HvTooltip>\n);\n"],"names":["jsx","HvTooltip","HvButton"],"mappings":";;;;;AAUO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACGA,2BAAAA,IAAAC,QAAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAACD,2BAAA,IAAAE,OAAA,UAAA,EAAS,MAAI,MAAE,GAAG,OAAA,CAAQ,EAC7B,CAAA;;"}

package/dist/esm/utils/IconButton.js

@@ -1,12 +0,0 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvButton } from "../Button/Button.js";
-import { HvTooltip } from "../Tooltip/Tooltip.js";
-const IconButton = ({
-  title,
-  placement = "top",
-  ...others
-}) => /* @__PURE__ */ jsx(HvTooltip, { enterDelay: 500, title, placement, children: /* @__PURE__ */ jsx(HvButton, { icon: true, ...others }) });
-export {
-  IconButton
-};
-//# sourceMappingURL=IconButton.js.map

package/dist/esm/utils/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/utils/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\n\nexport interface IconButtonProps extends Omit<HvButtonProps, \"icon\" | \"title\"> {\n  title: React.ReactNode;\n  placement?: HvTooltipProps[\"placement\"];\n  onClick?: HvButtonProps[\"onClick\"];\n}\n\n/** An `HvButton` of type icon wrapped in a tooltip  */\nexport const IconButton = ({\n  title,\n  placement = \"top\",\n  ...others\n}: IconButtonProps) => (\n  <HvTooltip enterDelay={500} title={title} placement={placement}>\n    <HvButton icon {...others} />\n  </HvTooltip>\n);\n"],"names":[],"mappings":";;;AAUO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACG,oBAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAAC,oBAAA,UAAA,EAAS,MAAI,MAAE,GAAG,OAAA,CAAQ,EAC7B,CAAA;"}