@hitachivantara/uikit-react-core 5.54.0 → 5.56.0

package/dist/types/index.d.ts

@@ -71,6 +71,7 @@ import { MouseEventHandler } from 'react';
 import { OptionGroupProps } from '@mui/base/OptionGroup';
 import { OptionOwnProps } from '@mui/base/Option';
 import { OptionsObject } from 'notistack';
+import { pentahoPlus } from '@hitachivantara/uikit-styles';
 import { PopperProps } from 'react-popper';
 import { PropGetter } from 'react-table';
 import { PropsWithoutRef } from 'react';
@@ -4081,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.
  */
@@ -6950,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>>;
 
@@ -7925,6 +7962,8 @@ export declare const panelClasses: {
     root: "HvPanel-root";
 };
 
+export { pentahoPlus }
+
 declare type PolymorphicComponent<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & FixComponentProps<Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>>;
 
 export declare type PolymorphicComponentRef<C extends React.ElementType, Props = {}> = PolymorphicComponent<C, Props> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.54.0",
+  "version": "5.56.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.5",
-    "@hitachivantara/uikit-react-shared": "^5.1.30",
-    "@hitachivantara/uikit-styles": "^5.21.0",
+    "@hitachivantara/uikit-react-icons": "^5.8.6",
+    "@hitachivantara/uikit-react-shared": "^5.1.31",
+    "@hitachivantara/uikit-styles": "^5.22.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.34",
     "@popperjs/core": "^2.11.8",
@@ -63,7 +63,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "a86ed9e82bb9741981adb18844aab682ef3eddfb",
+  "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;"}