@hitachivantara/uikit-react-core 5.0.2 → 5.1.0

package/dist/types/index.d.ts

@@ -55,6 +55,7 @@ import type { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { Renderer } from 'react-table';
 import { Row } from 'react-table';
+import { SliderProps } from 'rc-slider';
 import { SnackbarCloseReason } from '@mui/material/Snackbar';
 import { SnackbarContentProps } from '@mui/material/SnackbarContent';
 import type { SnackbarKey } from 'notistack';
@@ -3562,6 +3563,16 @@ declare type HvInputValidity = {
     valueMissing?: boolean;
 };
 
+export declare interface HvKnobProperty {
+    color?: string;
+    defaultValue?: number;
+    hidden?: boolean;
+    fixed?: boolean;
+    hoverColor?: string;
+    trackColor?: string;
+    dragColor?: string;
+}
+
 /**
  * Key Performance Indicator is a type of performance measurement. It monitors a business indicator
  * and its success/failure against a given target. KPIs are the first item read on a dashboard.
@@ -3952,6 +3963,11 @@ export declare type HvLoginProps = HvBaseProps & {
     classes?: HvLoginClasses;
 };
 
+export declare interface HvMarkProperty {
+    position?: number;
+    label?: string;
+}
+
 declare type HvMenuBarProps = HvBaseProps<"div", {
     onClick: any;
 }> & {
@@ -4640,6 +4656,165 @@ export declare type HvSimpleGridProps = HvBaseProps & {
     cols?: number;
 };
 
+/**
+ * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
+ */
+export declare const HvSlider: ({ id, className, name, label, status, statusMessage, disabled, classes, sliderProps, knobProps, inputProps, requiredMessage, noOverlap, hideInput, required, readOnly, markProperties, defaultValues, values: valuesProp, knobProperties: knobPropertiesProp, "aria-errormessage": ariaErrorMessage, maxPointValue, minPointValue, divisionQuantity, markStep, markDigits, formatMark, onChange, onBlur, onBeforeChange, onAfterChange, formatTooltip, ...others }: HvSliderProps) => JSX_2.Element;
+
+export declare interface HvSliderClasses {
+    root?: string;
+    rootRange?: string;
+    labelContainer?: string;
+    label?: string;
+    handle?: string;
+    handleContainer?: string;
+    sliderBase?: string;
+    sliderRoot?: string;
+    trackDragging?: string;
+    rootDisabled?: string;
+    trackStandBy?: string;
+    error?: string;
+    handleHiddenContainer?: string;
+    handleContainerDisabled?: string;
+    labelIncluded?: string;
+    onlyInput?: string;
+    sliderTooltip?: string;
+    sliderContainer?: string;
+}
+
+export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, {
+    onChange: any;
+    onBlur: any;
+}> {
+    /**
+     * The slider name.
+     */
+    name?: string;
+    /**
+     * The label of the slider.
+     *
+     * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.
+     */
+    label?: React_2.ReactNode;
+    /**
+     * Indicates that the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that the slider is not editable.
+     */
+    readOnly?: boolean;
+    /**
+     * Indicates that user slider is required on the form element.
+     */
+    required?: boolean;
+    /**
+     * What message to render when the value is required.
+     */
+    requiredMessage?: string;
+    /**
+     * If `true` the input that controls the slider is hidden.
+     */
+    hideInput?: boolean;
+    /**
+     * Attributes applied to the slider element.
+     */
+    sliderProps?: SliderProps;
+    /**
+     * The status of the slider element.
+     *
+     * Valid is correct, invalid is incorrect and standBy means no validations have run.
+     *
+     * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+     * or "invalid" after any change to the state.
+     */
+    status?: HvFormStatus | HvFormStatus[];
+    /**
+     * The error message to show when `status` is "invalid".
+     */
+    statusMessage?: React_2.ReactNode;
+    /**
+     * The values array to apply to the component
+     */
+    values?: number[];
+    /**
+     * The default values array to apply to the component
+     */
+    defaultValues?: (number | undefined)[];
+    /**
+     * The object used to set the knob properties,
+     * for every item in the array a new knob will be created.
+     */
+    knobProperties?: HvKnobProperty[];
+    /**
+     * The object used to set the mark properties individually.
+     */
+    markProperties?: HvMarkProperty[];
+    /**
+     * The function executed before a change will occur in the slider.
+     */
+    onBeforeChange?: (value: number[]) => void;
+    /**
+     * The function executed while a change is occurring in the slider.
+     */
+    onChange?: (value: number[]) => void;
+    /**
+     * The function executed after a change ocurred in the slider.
+     */
+    onAfterChange?: (value: number[]) => void;
+    /**
+     * The function executed after a blur ocurred in the slider.
+     */
+    onBlur?: (event: React_2.FocusEvent, knobsValues: number[], status?: HvFormStatus | HvFormStatus[]) => void;
+    /**
+     * The separation in points between marks.
+     * example: if 10 divisions and a markstep of 2 there will be 5 marks.
+     */
+    markStep?: number;
+    /**
+     * How many subdivisions there are in the slider.
+     */
+    divisionQuantity?: number;
+    /**
+     * The value of the first point in the slider from left to right.
+     */
+    minPointValue?: number;
+    /**
+     * The value of the last point in the slider from left to right.
+     */
+    maxPointValue?: number;
+    /**
+     * The nax number of decimals if no format function is applied
+     */
+    markDigits?: number;
+    /**
+     * A formatting function used to add format to the marks in the track,
+     * the function receives the mark text
+     */
+    formatMark?: (label: React_2.ReactNode) => React_2.ReactNode;
+    /**
+     * A formatting function used to add format to the tooltip in the track,
+     * the function receives the mark text
+     */
+    formatTooltip?: (label: React_2.ReactNode) => React_2.ReactNode;
+    /**
+     * If `true` the knobs can't have the same value, if `false` knobs can have the same value.
+     */
+    noOverlap?: boolean;
+    /**
+     * Attributes applied to the input element.
+     */
+    inputProps?: HvInputProps[];
+    /**
+     * Attributes applied to the knob element.
+     */
+    knobProps?: React_2.HTMLAttributes<HTMLDivElement>[];
+    /**
+     * The classes object to be applied into the root object.
+     */
+    classes?: HvSliderClasses;
+}
+
 /**
  * A Snackbar provides brief messages about app processes.
  * It is dismissed automatically after a given interval.
@@ -4998,10 +5173,10 @@ export declare const HvTable: ForwardRefExoticComponent<HvTableProps & RefAttrib
  */
 export declare const HvTableBody: React_2.ForwardRefExoticComponent<HvTableBodyProps & React_2.RefAttributes<HTMLElement>>;
 
-export declare type HvTableBodyClasses = {
+export declare interface HvTableBodyClasses {
     /** Styles applied to the component root class. */
     root?: string;
-};
+}
 
 export declare interface HvTableBodyProps extends HvBaseProps<HTMLTableSectionElement, {
     children: any;
@@ -5037,7 +5212,7 @@ export declare const HvTableCell: ForwardRefExoticComponent<HvTableCellProps & R
 
 export declare type HvTableCellAlign = "center" | "inherit" | "justify" | "left" | "right";
 
-export declare type HvTableCellClasses = {
+export declare interface HvTableCellClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied to the cell when it's in the table head. */
@@ -5088,7 +5263,7 @@ export declare type HvTableCellClasses = {
     resizable?: string;
     /** Styles applied to the cell when it's part of a resizing column. */
     resizing?: string;
-};
+}
 
 export declare interface HvTableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */
@@ -5127,7 +5302,7 @@ export declare type HvTableCellType = "body" | "footer" | "head";
 
 export declare type HvTableCellVariant = "checkbox" | "expand" | "actions" | "default" | "none";
 
-export declare type HvTableClasses = {
+export declare interface HvTableClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied to the component root class when it has a sticky header. */
@@ -5136,7 +5311,7 @@ export declare type HvTableClasses = {
     stickyColumns?: string;
     /** Styles applied to the component root class when it has sticky columns. */
     listRow?: string;
-};
+}
 
 export declare type HvTableColumnConfig<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvColumnGroup<D, H> | HvColumnWithLooseAccessor<D, H> | HvColumnWithStrictAccessor<D, H>;
 
@@ -5150,10 +5325,10 @@ export declare interface HvTableColumnOptions<D extends object = Record<string,
  */
 export declare const HvTableContainer: ForwardRefExoticComponent<HvTableContainerProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableContainerClasses = {
+export declare interface HvTableContainerClasses {
     /** Styles applied to the component root class. */
     root?: string;
-};
+}
 
 export declare interface HvTableContainerProps extends HvBaseProps<HTMLDivElement, {
     children: any;
@@ -5179,19 +5354,19 @@ export declare type HvTableDefinitionConfig<D extends object = Record<string, un
  */
 export declare const HvTableHead: ForwardRefExoticComponent<HvTableHeadProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableHeadClasses = {
+export declare interface HvTableHeadClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied when the table has a sticky header. */
     stickyHeader?: string;
-};
+}
 
 /**
  * `HvTableHeader` acts as a `th` element and inherits styles from its context
  */
 export declare const HvTableHeader: ForwardRefExoticComponent<HvTableHeaderProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableHeaderClasses = {
+export declare interface HvTableHeaderClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied to the cell when it's in the table head. */
@@ -5258,7 +5433,7 @@ export declare type HvTableHeaderClasses = {
     resizing?: string;
     /** Styles applied to the resizer object when column is resizable. */
     resizer?: string;
-};
+}
 
 export declare interface HvTableHeaderProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */
@@ -5399,7 +5574,7 @@ export declare interface HvTableProps extends TableHTMLAttributes<HTMLTableEleme
  */
 export declare const HvTableRow: ForwardRefExoticComponent<HvTableRowProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableRowClasses = {
+export declare interface HvTableRowClasses {
     /** Styles applied to the component root class. */
     root?: string;
     /** Styles applied to the component root when selected. */
@@ -5420,7 +5595,7 @@ export declare type HvTableRowClasses = {
     variantList?: string;
     /** Styles applied to the component root when its table variant is list. */
     variantListHead?: string;
-};
+}
 
 export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, {
     children: any;
@@ -6263,6 +6438,7 @@ export declare type HvVerticalNavigationTreeClasses = {
     list?: string;
     listItem?: string;
     collapsed?: string;
+    popup?: string;
 };
 
 export declare type HvVerticalNavigationTreeProps = HvBaseProps<HTMLDivElement, {
@@ -6436,6 +6612,14 @@ export declare type HvVerticalNavigationTreeViewItemProps = {
      * The content of the component.
      */
     children?: React.ReactNode;
+    /**
+     * @ignore
+     */
+    onMouseEnter?: any;
+    /**
+     * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)
+     */
+    disableTooltip?: boolean;
 };
 
 export declare type HvVerticalNavigationTreeViewProps = {
@@ -6835,6 +7019,8 @@ export declare const setId: (...args: any[]) => string | undefined;
 
 export declare const setUid: (id: any, suffix: any) => string | undefined;
 
+export declare const sliderClasses: HvSliderClasses;
+
 export declare const snackbarClasses: HvSnackbarClasses;
 
 export declare const snackbarContentClasses: HvSnackbarContentClasses;
@@ -7216,6 +7402,7 @@ declare interface VerticalNavigationContextValue {
     setParentData?: React.Dispatch<React.SetStateAction<any>>;
     parentSelected?: any;
     setParentSelected?: React.Dispatch<React.SetStateAction<any>>;
+    hasAnyChildWithData?: boolean;
 }
 
 export declare const verticalNavigationHeaderClasses: HvVerticalNavigationHeaderClasses;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.0.1",
-    "@hitachivantara/uikit-react-shared": "^5.0.1",
-    "@hitachivantara/uikit-styles": "^5.0.1",
+    "@hitachivantara/uikit-react-icons": "^5.0.2",
+    "@hitachivantara/uikit-react-shared": "^5.0.2",
+    "@hitachivantara/uikit-styles": "^5.1.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -42,6 +42,8 @@
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4.17.21",
     "notistack": "^2.0.8",
+    "rc-slider": "^10.1.1",
+    "rc-tooltip": "^6.0.1",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^8.0.4",
     "react-table": "^7.8.0",
@@ -54,7 +56,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "09e0e6cb9d325e30032dad45b3472303e685c4e4",
+  "gitHead": "021f98edd28c964a67329124bbd687203aa2fcb2",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {