@hitachivantara/uikit-react-core 5.55.0 → 5.57.0

package/dist/types/index.d.ts

@@ -1183,24 +1183,34 @@ export declare interface HvActionBarProps extends HvBaseProps {
 
 declare type HvActionContainerClasses = ExtractNames<typeof useClasses_27>;
 
-declare interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement> {
-    /** onClose function. */
+declare interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement>, Pick<Partial<HvActionsGenericProps>, "onAction"> {
+    /** Function called when clicking on the close button. */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Actions to display. */
-    action?: React.ReactNode | HvActionGeneric[];
-    /**  The callback function ran when an action is triggered, receiving `action` as param */
-    actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    action?: HvActionsGenericProps["actions"];
+    /**
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionCallback?: HvActionsGenericProps["actionsCallback"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvActionContainerClasses;
 }
 
 export declare interface HvActionGeneric {
+    /** Action id. */
     id: string;
+    /** Action label. */
     label: string;
-    icon?: React_2.ReactNode | ((params: {
+    /** Action icon. */
+    icon?: React.ReactNode | ((params: {
         isDisabled?: boolean;
-    }) => React_2.ReactNode);
+    }) => React.ReactNode);
+    /** Whether the action is disabled or not. */
     disabled?: boolean;
+    /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */
+    iconOnly?: boolean;
 }
 
 export declare const HvActionsGeneric: (props: HvActionsGenericProps) => JSX_3.Element | null;
@@ -1208,15 +1218,29 @@ export declare const HvActionsGeneric: (props: HvActionsGenericProps) => JSX_3.E
 export declare type HvActionsGenericClasses = ExtractNames<typeof useClasses_20>;
 
 export declare interface HvActionsGenericProps extends HvBaseProps {
-    /** Button category. */
+    /**
+     * The button category for all actions.
+     *
+     * @deprecated Use `variant` instead.
+     */
     category?: HvButtonVariant;
-    /**  Whether actions should be all disabled */
+    /** The button variant for all actions. */
+    variant?: HvButtonVariant;
+    /** Whether the actions should be all disabled. */
     disabled?: boolean;
-    /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */
-    actions: React_2.ReactNode | HvActionGeneric[];
-    /**  The callback function ran when an action is triggered, receiving `action` as param */
-    actionsCallback?: (event: React_2.SyntheticEvent, id: string, action: HvActionGeneric) => void;
-    /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */
+    /** Whether the actions should be all icon buttons when visible. */
+    iconOnly?: boolean;
+    /** The renderable content inside the actions slot of the footer, or an array of actions. */
+    actions: React.ReactNode | HvActionGeneric[];
+    /**
+     * The callback function called when an action is triggered, receiving the `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionsCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    /** The callback function called when an action is triggered, receiving the `action` as parameter. */
+    onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;
+    /** The maximum number of visible actions before they're collapsed into a dropdown menu. */
     maxVisibleActions?: number;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvActionsGenericClasses;
@@ -1462,12 +1486,18 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
     showIcon?: boolean;
     /** Custom icon to replace the variant default. */
     customIcon?: React.ReactNode;
-    /** onClose function. */
+    /** Function called when clicking on the close button. */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Actions to display on the right side. */
-    actions?: React.ReactNode | HvActionGeneric[];
-    /**  The callback function ran when an action is triggered, receiving `action` as param */
-    actionsCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    actions?: HvActionsGenericProps["actions"];
+    /**
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionsCallback?: HvActionsGenericProps["actionsCallback"];
+    /** The callback function called when an action is triggered, receiving `action` as parameter. */
+    onAction?: HvActionsGenericProps["onAction"];
     /** The position property of the header. */
     actionsPosition?: HvBannerActionPosition;
     /** The props to pass down to the Action Container. */
@@ -1479,7 +1509,11 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
 export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose"> {
     /** If true, the snackbar is open. */
     open: boolean;
-    /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */
+    /**
+     * Callback fired when the component requests to be closed.
+     * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.
+     * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.
+     * */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** The message to display. */
     label?: string;
@@ -1492,9 +1526,15 @@ export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin
     /** Controls if the associated icon to the variant should be shown. */
     showIcon?: boolean;
     /** Actions to display on the right side. */
-    actions?: React.ReactNode | HvActionGeneric[];
-    /** The callback function ran when an action is triggered, receiving `action` as param */
-    actionsCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    actions?: HvActionsGenericProps["actions"];
+    /**
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionsCallback?: HvActionsGenericProps["actionsCallback"];
+    /** The callback function called when an action is triggered, receiving `action` as parameter. */
+    onAction?: HvActionsGenericProps["onAction"];
     /** The position property of the header. */
     actionsPosition?: HvBannerActionPosition;
     /** How much the transition animation last in milliseconds, if 0 no animation is played. */
@@ -1947,67 +1987,41 @@ export declare type HvBulkActionsClasses = ExtractNames<typeof useClasses_34>;
 export declare type HvBulkActionsPropGetter<D extends object> = PropGetter<D, HvTAbleBulkActionsProps>;
 
 export declare interface HvBulkActionsProps extends HvBaseProps {
-    /**
-     * Custom label for select all checkbox
-     */
+    /** Custom label for select all checkbox */
     selectAllLabel?: React.ReactNode;
-    /**
-     * Custom label for select all checkbox conjunction
-     */
+    /** Custom label for select all checkbox conjunction */
     selectAllConjunctionLabel?: string;
-    /**
-     * Custom label for select all pages button
-     */
+    /** Custom label for select all pages button */
     selectAllPagesLabel?: React.ReactNode;
-    /**
-     * Whether select all pages element should be visible
-     */
+    /** Whether select all pages element should be visible */
     showSelectAllPages?: boolean;
-    /**
-     * The total number of elements
-     */
+    /** The total number of elements */
     numTotal?: number;
-    /**
-     * The number of elements currently selected
-     */
+    /** The number of elements currently selected */
     numSelected?: number;
-    /**
-     * Function called when the "select all" Checkbox is toggled.
-     */
+    /** Function called when the "select all" Checkbox is toggled. */
     onSelectAll?: HvCheckBoxProps["onChange"];
-    /**
-     * Function called when the "select all pages" button is clicked toggled.
-     */
+    /** Function called when the "select all pages" button is clicked toggled. */
     onSelectAllPages?: HvButtonProps["onClick"];
-    /**
-     * Whether the bulk actions should use the semantic styles when there are selected elements.
-     */
+    /** Whether the bulk actions should use the semantic styles when there are selected elements. */
     semantic?: boolean;
-    /**
-     * The renderable content inside the right actions slot,
-     * or an Array of actions `{ id, label, icon, disabled, ... }`
-     */
-    actions?: React.ReactNode | HvActionGeneric[];
-    /**
-     *  Whether actions should be all disabled
-     */
+    /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */
+    actions?: HvActionsGenericProps["actions"];
+    /** Whether actions should be all disabled */
     actionsDisabled?: boolean;
     /**
-     *  The callback function ran when an action is triggered, receiving `action` as param
-     */
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
     actionsCallback?: HvActionsGenericProps["actionsCallback"];
-    /**
-     *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.
-     */
+    /** The callback function called when an action is triggered, receiving `action` as parameter. */
+    onAction?: HvActionsGenericProps["onAction"];
+    /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */
     maxVisibleActions?: number;
-    /**
-     * Properties to be passed onto the checkbox component, the values of the object are equivalent to the
-     * HvCheckbox API.
-     */
+    /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */
     checkboxProps?: HvCheckBoxProps;
-    /**
-     * A Jss Object used to override or extend the styles applied.
-     */
+    /** A Jss Object used to override or extend the styles applied. */
     classes?: HvBulkActionsClasses;
 }
 
@@ -4082,6 +4096,39 @@ export declare interface HvHooks<D extends object = Record<string, unknown>, H e
 
 export declare type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses_96>;
 
+/**
+ * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content.
+ * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.
+ * This component provides this behavior out of the box.
+ */
+export declare const HvIconButton: <C extends ElementType<any, keyof JSX_2.IntrinsicElements> = "button">(props: Omit<HvButtonProps<C>, "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled"> & {
+    /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */
+    title: React.ReactNode;
+    /** Number of milliseconds to wait before showing the tooltip. @default 500 */
+    enterDelay?: HvTooltipProps["enterDelay"];
+    /** Tooltip placement. @default top */
+    placement?: HvTooltipProps["placement"];
+    /** Extra tooltip properties. */
+    tooltipProps?: Omit<Partial<HvTooltipProps>, "children"> | undefined;
+} & {
+    component?: C | undefined;
+} & {
+    children?: ReactNode;
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (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), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "size" | "component" | "className" | "radius" | "variant" | "placement" | "overrideIconColors" | "enterDelay" | "tooltipProps" | Exclude<keyof (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), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+
+export declare type HvIconButtonProps<C extends React.ElementType = "button"> = PolymorphicComponentRef<C, Omit<HvButtonProps<C>, "icon" | "focusableWhenDisabled" | "title" | "startIcon" | "endIcon" | "children" | "ref" | "component"> & {
+    /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */
+    title: React.ReactNode;
+    /** Number of milliseconds to wait before showing the tooltip. @default 500 */
+    enterDelay?: HvTooltipProps["enterDelay"];
+    /** Tooltip placement. @default top */
+    placement?: HvTooltipProps["placement"];
+    /** Extra tooltip properties. */
+    tooltipProps?: Omit<Partial<HvTooltipProps>, "children">;
+}>;
+
 /**
  * Provides the user with additional descriptive text for the form element.
  */
@@ -5889,7 +5936,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, container, 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, onAction, transitionDuration, transitionDirection, container, offset, snackbarContentProps, ...others }: HvSnackbarProps) => JSX_3.Element;
 
 export declare type HvSnackbarClasses = ExtractNames<typeof useClasses_101>;
 
@@ -5908,8 +5955,14 @@ export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProp
     customIcon?: React.ReactNode;
     /** Action to display. */
     action?: React.ReactNode | HvActionGeneric;
-    /** The callback function ran when an action is triggered, receiving `action` as param */
-    actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    /**
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionCallback?: HvActionsGenericProps["actionsCallback"];
+    /** The callback function called when an action is triggered, receiving `action` as parameter. */
+    onAction?: HvActionsGenericProps["onAction"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSnackbarContentClasses;
 }
@@ -5917,11 +5970,17 @@ export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProp
 export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" | "classes" | "children"> {
     /** If true, Snackbar is open. */
     open?: boolean;
-    /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */
+    /**
+     * Callback fired when the component requests to be closed.
+     * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.
+     * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.
+     * */
     onClose?: ((event: Event | SyntheticEvent<any, Event>, reason: SnackbarCloseReason) => void) | undefined;
     /** The message to display. */
     label?: React.ReactNode;
-    /** The anchor of the Snackbar. vertical: "top", "bottom" | horizontal: "left","center","right. It defines where the snackbar will end his animation */
+    /**
+     * The anchor of the Snackbar. vertical: "top", "bottom" | horizontal: "left", "center", "right".
+     * It defines where the snackbar will end his animation */
     anchorOrigin?: SnackbarOrigin;
     /** The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar */
     autoHideDuration?: number;
@@ -5933,8 +5992,14 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     showIcon?: boolean;
     /** Action to display. */
     action?: React.ReactNode | HvActionGeneric;
-    /** The callback function ran when an action is triggered, receiving `action` as param */
-    actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
+    /**
+     * The callback function called when an action is triggered, receiving `action` as parameter.
+     *
+     * @deprecated Use `onAction` instead.
+     * */
+    actionCallback?: HvActionsGenericProps["actionsCallback"];
+    /** The callback function called when an action is triggered, receiving `action` as parameter. */
+    onAction?: HvActionsGenericProps["onAction"];
     /** Duration of transition in milliseconds. */
     transitionDuration?: number;
     /** Direction of slide transition. */
@@ -6951,6 +7016,9 @@ export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonEleme
 /**
  * Tooltips display informative text when users hover over, focus on, or tap an element.
  * Accessibility-wise, the tooltip automatically labels the `children` content.
+ *
+ * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component
+ * which offers you thus behavior out of the box.
  */
 export declare const HvTooltip: ForwardRefExoticComponent<Omit<HvTooltipProps, "ref"> & RefAttributes<unknown>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.55.0",
+  "version": "5.57.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "234825f75fb09872e06901116a798496e415e50e",
+  "gitHead": "2ee2a5f6502b55ac9f6aafd36baf96bbb8c9d765",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Button = require("../../Button/Button.cjs");
-const Tooltip = require("../../Tooltip/Tooltip.cjs");
-const IconButton = ({
-  title,
-  placement = "top",
-  ...others
-}) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { enterDelay: 500, title, placement, children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { focusableWhenDisabled: true, icon: true, ...others }) });
-exports.IconButton = IconButton;

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

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/utils/IconButton/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../../Tooltip\";\n\nexport interface IconButtonProps\n  extends Omit<HvButtonProps, \"icon\" | \"title\" | \"component\"> {\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 focusableWhenDisabled icon {...others} />\n  </HvTooltip>\n);\n"],"names":["jsx","HvTooltip","HvButton"],"mappings":";;;;;AAWO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACGA,2BAAAA,IAAAC,QAAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAAAD,2BAAA,IAACE,OAAS,UAAA,EAAA,uBAAqB,MAAC,MAAI,MAAE,GAAG,QAAQ,EACnD,CAAA;;"}

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

@@ -1,11 +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, { focusableWhenDisabled: true, icon: true, ...others }) });
-export {
-  IconButton
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/utils/IconButton/IconButton.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTooltip, HvTooltipProps } from \"../../Tooltip\";\n\nexport interface IconButtonProps\n  extends Omit<HvButtonProps, \"icon\" | \"title\" | \"component\"> {\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 focusableWhenDisabled icon {...others} />\n  </HvTooltip>\n);\n"],"names":[],"mappings":";;;AAWO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MACG,oBAAA,WAAA,EAAU,YAAY,KAAK,OAAc,WACxC,UAAA,oBAAC,UAAS,EAAA,uBAAqB,MAAC,MAAI,MAAE,GAAG,QAAQ,EACnD,CAAA;"}