@hitachivantara/uikit-react-core 5.47.2 → 5.48.0

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ import { DividerProps } from '@mui/material/Divider';
 import { DrawerProps } from '@mui/material/Drawer';
 import { ds3 } from '@hitachivantara/uikit-styles';
 import { ds5 } from '@hitachivantara/uikit-styles';
+import { ElementType } from 'react';
 import { EmblaOptionsType } from 'embla-carousel-react';
 import { EmotionCache } from '@emotion/cache';
 import { EmotionContext } from '@hitachivantara/uikit-react-shared';
@@ -70,8 +71,9 @@ import { JSXElementConstructor } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { OptionsObject } from 'notistack';
-import { PopperProps } from '@mui/material/Popper';
+import { PopperProps } from 'react-popper';
 import { PropGetter } from 'react-table';
+import { PropsWithoutRef } from 'react';
 import { RadioProps } from '@mui/material/Radio';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
@@ -248,6 +250,7 @@ declare interface AskAction {
 }
 
 declare type AsProp<C extends React.ElementType> = {
+    /** Custom element type to override the root component */
     component?: C;
 };
 
@@ -941,6 +944,9 @@ export declare const findDescriptors: (children: any, descriptors?: {
 
 declare type FixComponentProps<T> = T extends any ? T : never;
 
+/** React.forwardRef with fixed type declarations */
+export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
 export declare const focusClasses: {
     root: "HvFocus-root";
     disabled: "HvFocus-disabled";
@@ -1633,7 +1639,7 @@ export declare interface HvBaseDropdownProps extends HvBaseProps {
     /**
      * An object containing props to be wired to the popper component.
      */
-    popperProps?: Partial<PopperProps>;
+    popperProps?: Partial<PopperProps<any>>;
     /**
      * Placement of the dropdown.
      */
@@ -1717,8 +1723,8 @@ export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" |
     classes?: HvBaseInputClasses;
 }
 
-/** HV Base Props. Extends `HTMLAttributes` of an element `E`, and filters `K` keys. */
-export declare type HvBaseProps<E extends HTMLElement = HTMLDivElement, K extends keyof HTMLAttributes<E> = never> = Omit<HTMLAttributes<E>, K>;
+/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */
+export declare type HvBaseProps<E extends HTMLElement = HTMLDivElement, K extends keyof React.HTMLAttributes<E> = never> = Omit<React.HTMLAttributes<E>, K>;
 
 /**
  * A Radio Button is a mechanism that allows user to select one or more options.
@@ -2000,11 +2006,55 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
 /**
  * Button component is used to trigger an action or event.
  */
-export declare const HvButton: <C extends React_2.ElementType = "button">(props: HvButtonProps<C>) => React_2.ReactElement | null;
+export declare const HvButton: <C extends ElementType<any> = "button">(props: {
+    /** 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. */
+    icon?: boolean | undefined;
+    /** Whether the Button is disabled or not. */
+    disabled?: boolean | undefined;
+    /** Class names to be applied. */
+    className?: string | undefined;
+    /** Element placed before the children. */
+    startIcon?: React.ReactNode;
+    /** Element placed after the children. */
+    endIcon?: React.ReactNode;
+    /** Button size. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    /** Button border radius. */
+    radius?: "base" | "none" | "round" | "circle" | "full" | undefined;
+    /** Defines the default colors of the button are forced into the icon. */
+    overrideIconColors?: boolean | undefined;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: Partial<{
+        secondary: string;
+        primary: string;
+        root: string;
+        disabled: string;
+        semantic: string;
+        secondarySubtle: string;
+        icon: string;
+        secondaryGhost: string;
+        primaryGhost: string;
+        primarySubtle: string;
+        ghost: string;
+        startIcon: string;
+        endIcon: string;
+        focusVisible: string;
+    }> | undefined;
+    /** Whether the Button is selected or not. */
+    selected?: 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) & {
+    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_2.ElementType = "button"> = PolymorphicComponentRef<C, {
+export declare type HvButtonProps<C extends React.ElementType = "button"> = PolymorphicComponentRef<C, {
     /** Use the variant prop to change the visual style of the Button. */
     variant?: HvButtonVariant;
     /** Whether the Button is an icon-only button. */
@@ -2014,9 +2064,9 @@ export declare type HvButtonProps<C extends React_2.ElementType = "button"> = Po
     /** Class names to be applied. */
     className?: string;
     /** Element placed before the children. */
-    startIcon?: ReactElement;
+    startIcon?: React.ReactNode;
     /** Element placed after the children. */
-    endIcon?: ReactElement;
+    endIcon?: React.ReactNode;
     /** Button size. */
     size?: HvButtonSize;
     /** Button border radius. */
@@ -3147,42 +3197,15 @@ export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement,
     classes?: HvDropDownMenuClasses;
 }
 
-export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, "onChange"> {
+export declare interface HvDropdownProps extends Omit<HvFormElementProps, "value" | "onChange">, Pick<HvBaseDropdownProps, "placement" | "popperProps" | "disablePortal" | "variableWidth" | "expanded" | "defaultExpanded"> {
     /**
      * A Jss Object used to override or extend the component styles applied.
      */
     classes?: HvDropdownClasses;
-    /**
-     * The form element name.
-     */
-    name?: string;
-    /**
-     * The label of the form element.
-     *
-     * The form element must be labeled for accessibility reasons.
-     * If not provided, an aria-label or aria-labelledby must be provided instead.
-     */
-    label?: any;
-    /**
-     * Provide additional descriptive text for the form element.
-     */
-    description?: any;
     /**
      * The placeholder value when nothing is selected.
      */
     placeholder?: string;
-    /**
-     * Indicates that the form element is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Indicates that the form element is in read only mode.
-     */
-    readOnly?: boolean;
-    /**
-     * Indicates that user input is required on the form element.
-     */
-    required?: boolean;
     /**
      * The status of the form element.
      *
@@ -3220,14 +3243,6 @@ export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, "on
      * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.
      */
     showSearch?: boolean;
-    /**
-     * If `true` the dropdown starts opened if `false` it starts closed.
-     */
-    expanded?: boolean;
-    /**
-     * When uncontrolled, defines the initial expanded state.
-     */
-    defaultExpanded?: boolean;
     /**
      * If 'true' the dropdown will notify on the first render.
      */
@@ -3240,28 +3255,10 @@ export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, "on
      * If `true` the dropdown will show tooltips when user mouseenter text in list
      */
     hasTooltips?: boolean;
-    /**
-     * Disable the portal behavior.
-     * The children stay within it's parent DOM hierarchy.
-     */
-    disablePortal?: boolean;
-    /**
-     * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
-     * Defaults to `false`.
-     */
-    variableWidth?: boolean;
     /**
      * If `true`, selection can be toggled when single selection.
      */
     singleSelectionToggle?: boolean;
-    /**
-     * Placement of the dropdown.
-     */
-    placement?: "left" | "right";
-    /**
-     * An object containing props to be wired to the popper component.
-     */
-    popperProps?: Partial<PopperProps>;
     /**
      * Callback called when the user cancels the changes.
      *
@@ -3310,7 +3307,7 @@ export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, "on
     /**
      * Extra props passed to the list.
      */
-    listProps?: HvDropdownListProps;
+    listProps?: Partial<HvDropdownListProps>;
 }
 
 export declare type HvDropdownStatus = "standBy" | "valid" | "invalid";
@@ -4375,6 +4372,8 @@ export declare interface HvListContainerProps extends HvBaseProps<HTMLUListEleme
     interactive?: boolean;
     /** If `true` compact the vertical spacing between list items. */
     condensed?: boolean;
+    /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */
+    selectable?: boolean;
     /** If `true`, the list items' left and right padding is removed. */
     disableGutters?: boolean;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -4391,6 +4390,8 @@ export declare type HvListItemClasses = ExtractNames<typeof useClasses_4>;
 export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement> {
     /** Indicates if the list item is selected. */
     selected?: boolean;
+    /** Indicated if the list item is _visually_ selectable */
+    selectable?: boolean;
     /** If true, the list item will be disabled. */
     disabled?: boolean;
     /**
@@ -6656,7 +6657,42 @@ declare interface HvThemeProviderProps {
 /**
  * The HvTimeAgo component implements the Design System relative time format guidelines.
  */
-export declare const HvTimeAgo: <C extends React.ElementType = "p">(props: HvTimeAgoProps<C>) => React.ReactElement | null;
+export declare const HvTimeAgo: <C extends ElementType<any> = "p">(props: {
+    /**
+     * The timestamp to format, in seconds or milliseconds.
+     * Defaults to `emptyElement` if value is null or 0
+     */
+    timestamp?: number | undefined;
+    /**
+     * The locale to be used. Should be on of the dayjs supported locales and explicitly imported
+     * @see https://day.js.org/docs/en/i18n/i18n
+     */
+    locale?: string | undefined;
+    /**
+     * The element to render when the timestamp is null or 0
+     * Defaults to `—` (Em Dash)
+     */
+    emptyElement?: React.ReactNode;
+    /** Disables periodic date refreshes */
+    disableRefresh?: boolean | undefined;
+    /** Whether to show seconds in the rendered time */
+    showSeconds?: boolean | undefined;
+    /**
+     * Whether the component should render just the string
+     * Consider using `useTimeAgo` instead
+     */
+    justText?: boolean | undefined;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: Partial<{
+        root: string;
+    }> | undefined;
+} & {
+    component?: C | undefined;
+} & {
+    children?: ReactNode;
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> ? T extends any ? T : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
 export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_111>;
 
@@ -6897,23 +6933,82 @@ export declare interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {
  * </HvTreeView>
  * ```
  */
-export declare const HvTreeView: HvTreeViewComponent;
+export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
 export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_113>;
 
-declare type HvTreeViewComponent = <Multiple extends boolean | undefined = undefined>(props: HvTreeViewProps<Multiple>) => React.JSX.Element;
-
 export declare interface HvTreeViewProps<Multiple extends boolean | undefined> extends HvBaseProps<HTMLUListElement>, DefaultTreeViewPluginParameters<Multiple> {
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvTreeViewClasses;
     /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */
-    children?: ReactNode;
+    children?: React.ReactNode;
 }
 
 /**
  * Typography component is used to render text and paragraphs within an interface.
  */
-export declare const HvTypography: <C extends React.ElementType = "p">(props: HvTypographyProps<C>) => React.ReactElement | null;
+export declare const HvTypography: <C extends ElementType<any> = "p">(props: {
+    /** Use the variant prop to change the visual style of the Typography. */
+    variant?: "display" | "title1" | "title2" | "title3" | "title4" | "label" | "body" | "caption1" | "caption2" | HvTypographyLegacyVariants | undefined;
+    /** If `true` the typography will display the look of a link. */
+    link?: boolean | undefined;
+    /** If `true` the typography will display the look of a disabled state. */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the typography will render a "p" element
+     * @deprecated use `component="p"` instead
+     * */
+    paragraph?: boolean | undefined;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     *
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     */
+    noWrap?: boolean | undefined;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: Partial<{
+        display: string;
+        "5xlTitle": string;
+        "4xlTitle": string;
+        title1: string;
+        title2: string;
+        title3: string;
+        title4: string;
+        label: string;
+        body: string;
+        caption1: string;
+        caption2: string;
+        xxlTitle: string;
+        lTitle: string;
+        sTitle: string;
+        xxsTitle: string;
+        sectionTitle: string;
+        placeholderText: string;
+        link: string;
+        disabledText: string;
+        selectedNavText: string;
+        vizTextDisabled: string;
+        xsInlineLink: string;
+        root: string;
+        disabled: string;
+        "3xlTitle": string;
+        xlTitle: string;
+        mTitle: string;
+        xsTitle: string;
+        highlightText: string;
+        normalText: string;
+        vizText: string;
+        isLink: string;
+        noWrap: string;
+    }> | undefined;
+} & {
+    component?: C | undefined;
+} & {
+    children?: ReactNode;
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "component" | "noWrap" | "variant" | "paragraph"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "component" | "noWrap" | "variant" | "paragraph"> ? T extends any ? T : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & RefAttributes<unknown>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
 export declare type HvTypographyClasses = ExtractNames<typeof useClasses>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.47.2",
+  "version": "5.48.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": "d47ae985a5ccb7c13d43ba47f293523caab14636",
+  "gitHead": "e7726b2e22a291fa4d2dc3b21c1e943f2a45feb0",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {