@hitachivantara/uikit-react-core 5.55.0 → 5.56.0

package/dist/types/index.d.ts

@@ -4082,6 +4082,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.
  */
@@ -6951,6 +6984,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.56.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": "67ac3fbb762df89f4f55c563f24f691c775fe99c",
   "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;"}