@hitachivantara/uikit-react-core 5.0.0-next.17 → 5.0.0-next.18

package/dist/types/index.d.ts

@@ -15,6 +15,7 @@ import { Column } from 'react-table';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
 import { ContainerProps } from '@mui/material/Container';
+import type { Context } from 'react';
 import { CSSProperties } from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogContentProps } from '@mui/material/DialogContent';
@@ -112,6 +113,7 @@ import { TooltipProps } from '@mui/material';
 import { TransitionProps } from '@mui/material/transitions';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
+import { useEffect } from 'react';
 import { UseExpandedHooks } from 'react-table';
 import { UseExpandedInstanceProps } from 'react-table';
 import { UseExpandedOptions } from 'react-table';
@@ -157,6 +159,10 @@ export declare const accordionClasses: HvAccordionClasses;
 
 export declare const actionBarClasses: HvActionBarClasses;
 
+export declare const actionClasses: HvVerticalNavigationActionClasses;
+
+export declare const actionsClasses: HvVerticalNavigationActionsClasses;
+
 export declare const actionsGenericClasses: HvActionsGenericClasses;
 
 export declare const adornmentClasses: HvAdornmentClasses;
@@ -347,6 +353,24 @@ export declare const getClasses: <T>(keys: string[], name: string) => T;
 
 export declare const getComponentName: (Component: any) => any;
 
+/**
+ * Get the first and last focusable element from a node.
+ *
+ * @param nodeId
+ * @returns {{last: *, first: *}}
+ */
+export declare const getFirstAndLastFocus: (node: any) => {
+    first: any;
+    last: any;
+};
+
+/**
+ * Gets the list of focusable elements.
+ * @param node
+ * @returns {*|NodeListOf<HTMLElementTagNameMap[string]>|NodeListOf<*>|NodeListOf<SVGElementTagNameMap[string]>|*[]}
+ */
+export declare const getFocusableList: (node: any) => any;
+
 export declare const getHeaderFooterPropsHook: (props: any, { column }: {
     column: any;
 }) => any[];
@@ -367,6 +391,17 @@ export declare const getIdReferenceListFor: (formElementType: any, descriptors:
  */
 export declare const getKeyCodeFromEvent: (event: any) => any;
 
+/**
+ * Auxiliary function to find adjacent nodes to focus.
+ *
+ * @param nodeId
+ * @returns {{prevFocus: *, nextFocus: *}}
+ */
+export declare const getPrevNextFocus: (nodeId: any) => {
+    nextFocus: any;
+    prevFocus: any;
+};
+
 export declare const getSelectorIcons: (options: {
     disabled: boolean;
     semantic: boolean;
@@ -6030,6 +6065,411 @@ export declare type HvValidationMessages = {
     typeMismatchError?: string;
 };
 
+/**
+ * Navigation enables users to move through an app to complete tasks.
+ *
+ * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.
+ * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.
+ *
+ * Even thou both the hierarchically organized data and the visual style ressemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)
+ * isn't necessarily the most appropriate.
+ *
+ * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.
+ *
+ * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.
+ * However it can be tedious to TAB through all navigation items to reach the actions panel.
+ *
+ * Both modes are available via the `mode` property and each app should choose the most appropriate.
+ */
+export declare const HvVerticalNavigation: ({ id, className, classes, children, open, collapsedMode, ...others }: HvVerticalNavigationProps) => JSX_2.Element;
+
+export declare const HvVerticalNavigationAction: ({ className, classes, id, label, icon, onClick, ...others }: HvVerticalNavigationActionProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationActionClasses = {
+    action?: string;
+    noIcon?: string;
+    minimized?: string;
+};
+
+export declare type HvVerticalNavigationActionProps = {
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationActionClasses;
+    /**
+     * Id to be applied to the action.
+     */
+    id?: string;
+    /**
+     * Visual label.
+     */
+    label?: string;
+    /**
+     * Icon.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Callback called when clicked.
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export declare const HvVerticalNavigationActions: ({ className, classes, id, children, ...others }: HvVerticalNavigationActionsProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationActionsClasses = {
+    root?: string;
+    hide?: string;
+};
+
+export declare type HvVerticalNavigationActionsProps = {
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationActionsClasses;
+    /**
+     * Id to be applied to the actions container.
+     */
+    id?: string;
+    /**
+     * Node to be rendered
+     */
+    children?: React.ReactNode;
+};
+
+export declare type HvVerticalNavigationClasses = {
+    /** Style applied to the root of the component. */
+    root?: string;
+    /** Style applied to the root of the component when its collapsed. */
+    collapsed?: string;
+};
+
+export declare const HvVerticalNavigationHeader: ({ title, openIcon, closeIcon, buttonProps, className, classes, onClick, ...others }: HvVerticalNavigationHeaderProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationHeaderClasses = {
+    root?: string;
+    minimized?: string;
+};
+
+export declare type HvVerticalNavigationHeaderProps = {
+    id?: any;
+    title?: any;
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    buttonProps?: HvButtonProps_2;
+    className?: string;
+    classes?: HvVerticalNavigationHeaderClasses;
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export declare type HvVerticalNavigationMode = "icon" | "simple";
+
+export declare type HvVerticalNavigationPosition = "static" | "relative" | "fixed" | "absolute";
+
+export declare type HvVerticalNavigationProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationClasses;
+    /**
+     * Current State of the Vertical Navigation Collapse
+     */
+    open?: boolean;
+    /**
+     *  Collpased Mode for the Vertical Navigation, the default value is "simple".
+     */
+    collapsedMode?: HvVerticalNavigationMode;
+    /**
+     * The content inside the actions container.
+     */
+    children?: React.ReactNode;
+};
+
+export declare const HvVerticalNavigationTree: ({ id, className, classes, data, mode, collapsible, expanded: expandedProp, defaultExpanded, onToggle, selected: selectedProp, defaultSelected, onChange, ...others }: HvVerticalNavigationTreeProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationTreeClasses = {
+    root?: string;
+    list?: string;
+    listItem?: string;
+    collapsed?: string;
+};
+
+export declare type HvVerticalNavigationTreeProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied.
+     */
+    classes?: HvVerticalNavigationTreeClasses;
+    /**
+     * Modus operandi (role) of the widget instance.
+     */
+    mode?: NavigationMode;
+    /**
+     * Can non-leaf nodes be collapsed / expanded.
+     */
+    collapsible?: boolean;
+    /**
+     * The ID of the selected page.
+     */
+    selected?: string;
+    /**
+     * When uncontrolled, defines the initial selected page ID.
+     */
+    defaultSelected?: string;
+    /**
+     * Callback fired when a navigation item is selected.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {object} page The data of the selected page.
+     */
+    onChange?: (event: any, page: any) => void;
+    /**
+     * Expanded nodes' ids.
+     */
+    expanded?: string[];
+    /**
+     * When uncontrolled, defines the initial expanded nodes' ids.
+     *
+     * It also supports `true` for starting with all nodes expanded.
+     * With `false` all nodes will be collapsed.
+     *
+     * By default it expands the needed nodes to display the current selection, if any.
+     */
+    defaultExpanded?: string[] | boolean;
+    /**
+     * Callback fired when tree items are expanded/collapsed.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {array} nodeIds The ids of the expanded nodes (old and new).
+     */
+    onToggle?: (event: any, nodeIds: any) => void;
+    /**
+     * An array containing the data for each menu item.
+     *
+     * id - the id to be applied to the root element.
+     * label - the label to be rendered on the menu item.
+     * data - sub-menu items
+     * href - the url used for navigation.
+     * target - the behavior when opening an url.
+     */
+    data?: NavigationData[];
+};
+
+export declare const HvVerticalNavigationTreeView: ForwardRefExoticComponent<HvVerticalNavigationTreeViewProps & RefAttributes<unknown>>;
+
+export declare type HvVerticalNavigationTreeViewClasses = {
+    root?: string;
+};
+
+export declare const HvVerticalNavigationTreeViewItem: ForwardRefExoticComponent<HvVerticalNavigationTreeViewItemProps & RefAttributes<unknown>>;
+
+export declare type HvVerticalNavigationTreeViewItemClasses = {
+    /** Style applied to the root of the component. */
+    node?: string;
+    /** Style applied to the content. */
+    content?: string;
+    /** Style applied to the content when it is a link. */
+    link?: string;
+    /** Style applied to the group. */
+    group?: string;
+    /** Style applied when item is disabled. */
+    disabled?: string;
+    /** Style applied when item is expandable. */
+    expandable?: string;
+    /** Style applied when item is collapsed. */
+    collapsed?: string;
+    /** Style applied when item is expanded */
+    expanded?: string;
+    /** Style applied when item is selectable. */
+    selectable?: string;
+    /** Style applied when item is unselectable. */
+    unselectable?: string;
+    /** Style applied when item is selectable. */
+    selected?: string;
+    /** Style applied when item is unselectable. */
+    unselected?: string;
+    /** Style applied when item is focused. */
+    focused?: string;
+    /** Styled applied when navigation open is false */
+    minimized?: string;
+    hide?: string;
+};
+
+export declare type HvVerticalNavigationTreeViewItemProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the Radio button.
+     */
+    classes?: HvVerticalNavigationTreeViewItemClasses;
+    /**
+     * Is the node disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Can the node be selected.
+     */
+    selectable?: boolean;
+    /**
+     * The id of the node.
+     */
+    nodeId?: string;
+    /**
+     * The icon to display next to the node's label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The item label.
+     */
+    label?: React.ReactNode;
+    /**
+     * The url for the link.
+     */
+    href?: string;
+    /**
+     * The behavior when opening a link.
+     */
+    target?: string;
+    /**
+     * The node payload.
+     */
+    payload?: any;
+    /**
+     * @ignore
+     */
+    onClick?: any;
+    /**
+     * @ignore
+     */
+    onMouseDown?: any;
+    /**
+     * @ignore
+     */
+    onFocus?: any;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+};
+
+export declare type HvVerticalNavigationTreeViewProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the Radio button.
+     */
+    classes?: HvVerticalNavigationTreeClasses;
+    /**
+     * Modus operandi (role) of the widget instance.
+     */
+    mode?: NavigationMode;
+    /**
+     * Enables selection.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Enables the simultaneous selection of multiple items.
+     * @default false
+     */
+    multiSelect?: boolean;
+    /**
+     * The selected nodes' ids.
+     *
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     */
+    selected?: string[] | string;
+    /**
+     * When uncontrolled, defines the initial selected nodes' ids.
+     *
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     * @default []
+     */
+    defaultSelected?: string[] | string;
+    /**
+     * Can non-leaf nodes be collapsed / expanded.
+     */
+    collapsible?: boolean;
+    /**
+     * Callback fired when a tree item is selected.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {string} nodeId The id of the selected node.
+     */
+    onChange?: any;
+    /**
+     * Expanded nodes' ids.
+     */
+    expanded?: string[];
+    /**
+     * When uncontrolled, defines the initial expanded nodes' ids.
+     * @default []
+     */
+    defaultExpanded?: string[];
+    /**
+     * Callback fired when tree items are expanded/collapsed.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {array} nodeIds The ids of the expanded nodes (old and new).
+     */
+    onToggle?: (event: any, nodeIds: any) => void;
+    /**
+     * If `true`, will allow focus on disabled items.
+     * @default false
+     */
+    disabledItemsFocusable?: boolean;
+    /**
+     * @ignore
+     */
+    onFocus?: (event: React.FocusEvent<any>) => void;
+    /**
+     * @ignore
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * @ignore
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+};
+
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
  */
@@ -6230,6 +6670,47 @@ export declare const multiButtonClasses: HvMultiButtonClasses;
 
 export declare const multiSelectionEventHandler: (evt: any, index: any, selectionAnchor: any, allValues: any, selectedState: any, selectionCheck: any) => any[];
 
+export declare interface NavigationData {
+    /**
+     * the id to be applied to the root element.
+     */
+    id: string;
+    /**
+     * the label to be rendered on the menu item.
+     */
+    label: string;
+    /**
+     * The url for the link.
+     */
+    href?: string;
+    /**
+     * The behavior when opening a link.
+     */
+    target?: string;
+    /**
+     * Icon to be render.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Data subset.
+     */
+    data?: NavigationData[];
+    /**
+     * if `true` the item is disabled and is not interactive.
+     */
+    disabled?: boolean;
+    /**
+     * if `true` the item doesn't have a selected state.
+     */
+    selectable?: boolean;
+    /**
+     * Any other properties.
+     */
+    [otherProperty: string]: any;
+}
+
+export declare type NavigationMode = "treeview" | "navigation";
+
 export declare const normalizeProgressBar: (value: number, max: number) => number;
 
 export declare const outlineStyles: {
@@ -6344,6 +6825,10 @@ export { themes }
 
 export declare const tooltipClasses: HvTooltipClasses;
 
+export declare const treeViewClasses: HvVerticalNavigationTreeViewClasses;
+
+export declare const treeViewItemClasses: HvVerticalNavigationTreeViewItemClasses;
+
 export declare const typographyClasses: HvTypographyClasses;
 
 export declare type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
@@ -6356,6 +6841,8 @@ export declare function useComputation(valueFn: any, valueFallback?: any): any[]
 
 export declare const useControlled: (controlledProp: any, initialState: any) => any[];
 
+export declare const useEnhancedEffect: typeof useEffect;
+
 export declare type UseFiltersProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
 };
@@ -6655,6 +7142,19 @@ export declare const useWidth: () => string;
 
 declare type ValueOf<T> = T[keyof T];
 
+export declare const verticalNavigationClasses: HvVerticalNavigationClasses;
+
+export declare const VerticalNavigationContext: Context<VerticalNavigationContextValue>;
+
+declare interface VerticalNavigationContextValue {
+    isOpen: boolean;
+    collapsedMode: HvVerticalNavigationMode;
+}
+
+export declare const verticalNavigationHeaderClasses: HvVerticalNavigationHeaderClasses;
+
+export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
+
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
 
 export declare const warningTextClasses: HvWarningTextClasses;
@@ -6670,4 +7170,6 @@ declare interface WithIdProps extends HvExtraProps {
 
 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 wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);
+
 export { }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.0.0-next.17",
+  "version": "5.0.0-next.18",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
-  "description": "UI Kit core React components for the Next Design System.",
+  "description": "Core React components for the NEXT Design System.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
   "sideEffects": false,
   "keywords": [
@@ -54,7 +54,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d7e48206f2817c1894a0deb02e908bccaeb1b2a7",
+  "gitHead": "ff2ab576087579c7a8e836c5b97a96cf1976b153",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {