npm - @hitachivantara/uikit-react-core - Versions diffs - 5.2.0 → 5.4.0 - Mend

@hitachivantara/uikit-react-core 5.2.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/types/index.d.ts CHANGED Viewed

@@ -394,6 +394,11 @@ export declare const getTableHeadPropsHook: (props: any, { instance }: {
     instance: any;
 }) => any[];
+/**
+ * Returns the computed value of a theme CSS var
+ */
+export declare const getVarValue: (cssVar: string) => string;
 export declare const globalActionsClasses: HvGlobalActionsClasses;
 export declare const gridClasses: HvGridClasses;
@@ -408,6 +413,8 @@ export declare const headerNavigationClasses: HvHeaderNavigationClasses;
 export declare const hexToRgbA: (hex: any, factor?: number) => string;
+export declare const horizontalScrollListItemClasses: HvHorizontalScrollListItemClasses;
 export declare type HvAccentColorKeys = "primary" | "primary_80" | "primary_20" | "brand" | "secondary" | "secondary_60" | "secondary_80";
 export declare type HvAccentColors = Record<HvAccentColorKeys, string>;
@@ -1505,6 +1512,7 @@ export declare const HvButton: React_2.ForwardRefExoticComponent<HvButtonProps &
 export declare interface HvButtonClasses {
     root?: string;
     startIcon?: string;
+    endIcon?: string;
     focusVisible?: string;
 }
@@ -1517,6 +1525,8 @@ export declare interface HvButtonProps extends React_2.ButtonHTMLAttributes<HTML
     className?: string;
     /** Element placed before the children. */
     startIcon?: ReactElement;
+    /** Element placed after the children. */
+    endIcon?: ReactElement;
     /** Button size. */
     size?: HvButtonSize;
     /** Button border radius. */
@@ -2140,6 +2150,198 @@ declare interface HvDateColumnCellProp {
     date?: string;
 }
+/**
+ * A date picker, popup calendar or date range picker is a graphical user
+ * interface widget which allows the user to select a date from a calendar.
+ */
+export declare const HvDatePicker: ({ classes, className, id, name, required, disabled, readOnly, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, "aria-errormessage": ariaErrorMessage, placeholder, labels: labelsProp, value, startValue, endValue, rangeMode, startAdornment, horizontalPlacement, locale: localeProp, showActions, showClear, disablePortal, escapeWithReference, dropdownProps, calendarProps, ...others }: HvDatePickerProps) => JSX_2.Element;
+declare type HvDatePickerClasses = {
+    root?: string;
+    labelContainer?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder?: string;
+    selectionDisabled?: string;
+    dropdown?: string;
+    panel?: string;
+    action?: string;
+    icon?: string;
+    dropdownHeader?: string;
+    dropdownHeaderInvalid?: string;
+    dropdownHeaderOpen?: string;
+    actionContainer?: string;
+    leftContainer?: string;
+    rightContainer?: string;
+};
+export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, {
+    onChange: any;
+}> {
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the component styles applied.
+     */
+    classes?: HvDatePickerClasses;
+    /**
+     * Id to be applied to the form element root node.
+     */
+    id?: string;
+    /**
+     * 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?: React.ReactNode;
+    /**
+     * @ignore
+     */
+    "aria-label"?: string;
+    /**
+     * @ignore
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Provide additional descriptive text for the form element.
+     */
+    description?: React.ReactNode;
+    /**
+     * @ignore
+     */
+    "aria-describedby"?: string;
+    /**
+     * The placeholder value when nothing is selected.
+     */
+    placeholder?: string;
+    /**
+     * Indicates that the form element is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that user input is required on the form element.
+     */
+    required?: boolean;
+    /**
+     * The status of the form 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?: HvDatePickerStatus;
+    /**
+     * The error message to show when the validation status is "invalid".
+     *
+     * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
+     */
+    statusMessage?: React.ReactNode;
+    /**
+     * Identifies the element that provides an error message for the date picker.
+     *
+     * Will only be used when the validation status is invalid.
+     */
+    "aria-errormessage"?: string;
+    /**
+     * The callback fired when the value changes.
+     */
+    onChange?: (date?: Date, endDate?: Date) => void;
+    /**
+     * The callback fired when user clicks on cancel.
+     */
+    onCancel?: () => void;
+    /**
+     * The callback fired when user clicks on clear.
+     */
+    onClear?: () => void;
+    /**
+     * An object containing all the labels for the datepicker.
+     */
+    labels?: {
+        /**
+         * Apply button label.
+         */
+        applyLabel?: string;
+        /**
+         * Cancel button label.
+         */
+        cancelLabel?: string;
+        /**
+         * Clear button label.
+         */
+        clearLabel?: string;
+    };
+    /**
+     * The initial value of the input when in single calendar mode.
+     */
+    value?: Date;
+    /**
+     * The initial value for the start date when in range mode.
+     */
+    startValue?: Date;
+    /**
+     * The initial value for the end date when in range mode.
+     */
+    endValue?: Date;
+    /**
+     * Flag informing if the the component should be in range mode or in single mode.
+     */
+    rangeMode?: boolean;
+    /**
+     * The placement where the calendar should be placed according to the input. Options are `left` or `right`.
+     * Note this prop only affects the calendar when in `rangeMode`.
+     */
+    horizontalPlacement?: "left" | "right";
+    /**
+     * The calendar locale. If undefined, it uses calendar default
+     */
+    locale?: string;
+    /**
+     * Controls if actions buttons are visible at the calendar.
+     */
+    showActions?: boolean;
+    /**
+     * Controls if clear button is visible at the calendar,
+     * only works if showing actions or in range mode.
+     */
+    showClear?: boolean;
+    /**
+     * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+     */
+    disablePortal?: boolean;
+    /**
+     * Sets if the calendar container should follow the date picker input out of the screen or stay visible.
+     */
+    escapeWithReference?: boolean;
+    /**
+     * An element placed before the Calendar
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * An object containing props to be passed onto the baseDropdown.
+     */
+    dropdownProps?: Object;
+    /**
+     * If `true` the DatePicker will be in read only mode, unable to be interacted.
+     */
+    readOnly?: boolean;
+    /**
+     * Additional props passed to the HvCalendar component.
+     */
+    calendarProps?: Partial<HvCalendarProps>;
+}
+export declare type HvDatePickerStatus = "standBy" | "valid" | "invalid";
 export declare const HvDialog: ({ classes, className, id, children, open, onClose, firstFocusable, buttonTitle, fullscreen, disableBackdropClick, ...others }: HvDialogProps) => JSX_2.Element;
 export declare interface HvDialogActionClasses {
@@ -3477,6 +3679,13 @@ export declare interface HvHooks<D extends object = Record<string, unknown>, H e
     useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;
 }
+export declare interface HvHorizontalScrollListItemClasses {
+    root?: string;
+    selected?: string;
+    button?: string;
+    text?: string;
+}
 /**
  * Provides the user with additional descriptive text for the form element.
  */
@@ -3497,6 +3706,46 @@ export declare interface HvInfoMessageProps extends HvBaseProps {
     classes?: HvInfoMessageClasses;
 }
+/**
+ * An Inline Editor allows the user to edit a record without making a major switch
+ * between viewing and editing, making it an efficient method of updating a record.
+ */
+export declare const HvInlineEditor: ({ className, classes, value: valueProp, defaultValue, showIcon, component: InputComponent, variant, placeholder, onBlur, onChange, onKeyDown, buttonProps, typographyProps, ...others }: HvInlineEditorProps) => JSX_2.Element;
+export declare interface HvInlineEditorClasses {
+    root?: string;
+    button?: string;
+    largeText?: string;
+    text?: string;
+    textEmpty?: string;
+    icon?: string;
+    iconVisible?: string;
+    inputRoot?: string;
+    input?: string;
+    inputBorderContainer?: string;
+}
+export declare interface HvInlineEditorProps extends Omit<HvBaseProps<HTMLDivElement>, "onBlur" | "onChange"> {
+    /** The value of the form element. */
+    value?: string;
+    /** Whether the Edit icon should always be visible */
+    showIcon?: boolean;
+    /** Component to use as the input. The component "inherit" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */
+    component?: React_2.ElementType;
+    /** Variant of the HvTypography to display */
+    variant?: HvTypographyVariants;
+    /** Called when the input is blurred. */
+    onBlur?: (event: React_2.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, value: string) => void;
+    /** Called when the input value changes. */
+    onChange?: (event: React_2.SyntheticEvent, value: string) => void;
+    /** Props passed to the HvButton component */
+    buttonProps?: HvButtonProps;
+    /** Props passed to the HvTypography text component */
+    typographyProps?: HvTypographyProps;
+    /** A Jss Object used to override or extend the styles applied to the empty state component. */
+    classes?: HvInlineEditorClasses;
+}
 /**
  * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
  */
@@ -4662,6 +4911,127 @@ declare type HvRowPropGetter<D extends object = Record<string, unknown>, H exten
     row: HvRowInstance<D, H>;
 }>;
+/**
+ * The horizontal scroll to element can be used to quickly navigate in a page.
+ */
+export declare const HvScrollToHorizontal: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToHorizontalProps) => JSX_2.Element;
+export declare interface HvScrollToHorizontalClasses {
+    root?: string;
+    positionSticky?: string;
+    positionFixed?: string;
+    notSelectedRoot?: string;
+    notSelected?: string;
+    selected?: string;
+}
+export declare interface HvScrollToHorizontalOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+export declare type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relative";
+export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, {
+    onChange: any;
+    onClick: any;
+}> {
+    /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
+    options: HvScrollToHorizontalOption[];
+    /** True if the href location link should be applied. It will create an a element around every list item */
+    href?: boolean;
+    /** Default selected index passed from the parent. */
+    defaultSelectedIndex?: number;
+    /**
+     * The Id of the scrollable container containing displayed elements.
+     *
+     * Defaults to `window` if unspecified.
+     */
+    scrollElementId?: string;
+    /**
+     * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+     * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+     * or to put more breathing room between the targeted element and the edges of the container.
+     *
+     * Each element can also have a specific offset via the options property.
+     */
+    offset?: number;
+    /** Position of the Horizontal scroll to. */
+    position?: HvScrollToHorizontalPositions;
+    /** Position of tooltip identifying the current item. */
+    tooltipPosition?: HvScrollToTooltipPositions;
+    /** A function called each time the selected index changes. */
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user clicks on a tab element. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user press enter on a tab element. */
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvScrollToHorizontalClasses;
+}
+export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bottom";
+/**
+ * The vertical scroll to element can be used to quickly navigate in a page.
+ */
+export declare const HvScrollToVertical: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToVerticalProps) => JSX_2.Element;
+export declare interface HvScrollToVerticalClasses {
+    root?: string;
+    positionAbsolute?: string;
+    positionFixed?: string;
+}
+export declare interface HvScrollToVerticalOption {
+    key?: string;
+    label: string;
+    value: string;
+    offset?: number;
+}
+export declare type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
+export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, {
+    onChange: any;
+    onClick: any;
+}> {
+    /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
+    options: HvScrollToVerticalOption[];
+    /** True if the href location link should be applied. It will create an a element around every list item */
+    href?: boolean;
+    /** Default selected index passed from the parent. */
+    defaultSelectedIndex?: number;
+    /**
+     * The Id of the scrollable container containing displayed elements.
+     *
+     * Defaults to `window` if unspecified.
+     */
+    scrollElementId?: string;
+    /**
+     * Defines the offset from the top of each element for getting an optimal viewing region in the container.
+     * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)
+     * or to put more breathing room between the targeted element and the edges of the container.
+     *
+     * Each element can also have a specific offset via the options property.
+     */
+    offset?: number;
+    /** Position of the Vertical scroll to. */
+    position?: HvScrollToVerticalPositions;
+    /** Position of tooltip identifying the current item. */
+    tooltipPosition?: HvScrollToTooltipPositions;
+    /** A function called each time the selected index changes. */
+    onChange?: (event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user clicks on a tab element. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;
+    /** A function called each time an user press enter on a tab element. */
+    onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvScrollToVerticalClasses;
+}
 /**
  * Allows the user to select one or more items from a list of choices.
  *
@@ -6813,6 +7183,13 @@ export declare interface HvVerticalNavigationTreeViewProps {
     children?: React.ReactNode;
 }
+export declare interface HvVerticalScrollListItemClasses {
+    root?: string;
+    notSelected?: string;
+    button?: string;
+    text?: string;
+}
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
  */
@@ -6855,6 +7232,8 @@ export declare const increaseSize: (size: string) => "S" | "M" | "L" | "XL";
 export declare const infoMessageClasses: HvInfoMessageClasses;
+export declare const inlineEditorClasses: HvInlineEditorClasses;
 export declare const inputClasses: HvInputClasses;
 export declare const isBrowser: (browsers: any) => boolean | null;
@@ -7109,6 +7488,10 @@ export declare function reducer(state: any, action: any, previousState: any, ins
 export declare const rightControlClasses: HvRightControlClasses;
+export declare const scrollToHorizontalClasses: HvScrollToHorizontalClasses;
+export declare const scrollToVerticalClasses: HvScrollToVerticalClasses;
 export declare const selectionListClasses: HvSelectionListClasses;
 /**
@@ -7473,6 +7856,8 @@ export declare type UseRowSelectionProps = (<D extends object = Record<string, u
 export declare function useSavedState<T>(defaultState: T): [T | undefined, (v?: T, s?: boolean) => void, () => void, T | undefined, T];
+export declare const useScrollTo: (selectedIndexProp?: number, scrollElementId?: string | undefined, href?: boolean, offset?: number, options?: HvScrollToVerticalOption[], onChange?: ((event: Event | React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void) | undefined, direction?: "column" | "row") => [number, (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, id: string, index: number, wrappedOnChange?: ((index: number) => void) | undefined) => void];
 export declare const useSelectionPath: (data: any, selectedId: any) => string[];
 export declare type UseTableStylesProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
@@ -7514,6 +7899,8 @@ export declare const verticalNavigationSliderClasses: HvVerticalNavigationSlider
 export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
+export declare const verticalScrollListItemClasses: HvVerticalScrollListItemClasses;
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
 export declare const warningTextClasses: HvWarningTextClasses;
@@ -7527,7 +7914,7 @@ declare interface WithIdProps extends HvExtraProps {
     id?: string;
 }
-export declare const withTooltip: (Component: any, label: string | undefined, placement: any, hideTooltip: any, tooltipProps: any, tooltipContainerProps: any) => (props: any) => JSX_2.Element;
+export declare const withTooltip: (Component: React.FunctionComponent, label: string | undefined, placement: HvTooltipPlacementType, hideTooltip?: ((event: React.MouseEvent<HTMLDivElement>) => boolean) | undefined, tooltipProps?: HvTooltipProps, tooltipContainerProps?: HvBaseProps) => (props: any) => JSX_2.Element;
 export declare const wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.2.0",
+  "version": "5.4.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.1.1",
-    "@hitachivantara/uikit-react-shared": "^5.0.5",
-    "@hitachivantara/uikit-styles": "^5.2.0",
+    "@hitachivantara/uikit-react-icons": "^5.1.3",
+    "@hitachivantara/uikit-react-shared": "^5.0.7",
+    "@hitachivantara/uikit-styles": "^5.4.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -56,7 +56,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "cc3664804d0cd97461a994caacc15ce31ad41ffc",
+  "gitHead": "6a771d68070e4bfb03ca573900704d35934c0573",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {