@hitachivantara/uikit-react-core 5.7.5 → 5.8.1

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ import { CheckboxProps } from '@mui/material';
 import { ChipProps } from '@mui/material/Chip';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
+import { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import type { Context } from 'react';
 import { CSSProperties } from 'react';
@@ -22,6 +23,7 @@ import { DialogTitleProps } from '@mui/material/DialogTitle';
 import { DividerProps } from '@mui/material/Divider';
 import { ds3 } from '@hitachivantara/uikit-styles';
 import { ds5 } from '@hitachivantara/uikit-styles';
+import { EmblaOptionsType } from 'embla-carousel-react';
 import type { ForwardRefExoticComponent } from 'react';
 import { GridProps } from '@mui/material';
 import { Hooks } from 'react-table';
@@ -47,6 +49,7 @@ import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { PopperProps } from '@mui/material';
+import type { Property } from 'csstype';
 import { PropGetter } from 'react-table';
 import { RadioProps } from '@mui/material';
 import { default as React_2 } from 'react';
@@ -425,6 +428,38 @@ export declare const cardMediaClasses: {
     root: "HvCard-Media-root";
 };
 
+export declare const carouselClasses: {
+    main: "HvCarousel-main";
+    title: "HvCarousel-title";
+    dot: "HvCarousel-dot";
+    controls: "HvCarousel-controls";
+    xs: "HvCarousel-xs";
+    root: "HvCarousel-root";
+    actions: "HvCarousel-actions";
+    panel: "HvCarousel-panel";
+    fullscreen: "HvCarousel-fullscreen";
+    closeButton: "HvCarousel-closeButton";
+    mainContainer: "HvCarousel-mainContainer";
+    pageCounter: "HvCarousel-pageCounter";
+    mainXs: "HvCarousel-mainXs";
+    mainFullscreen: "HvCarousel-mainFullscreen";
+    counterContainer: "HvCarousel-counterContainer";
+    counter: "HvCarousel-counter";
+    slideControls: "HvCarousel-slideControls";
+    slidesViewport: "HvCarousel-slidesViewport";
+    slidesContainer: "HvCarousel-slidesContainer";
+    dots: "HvCarousel-dots";
+    dotsXs: "HvCarousel-dotsXs";
+    dotSelected: "HvCarousel-dotSelected";
+    thumbnail: "HvCarousel-thumbnail";
+    thumbnailSelected: "HvCarousel-thumbnailSelected";
+};
+
+export declare const cc: {
+    image: "HvCarouselSlide-image";
+    slide: "HvCarouselSlide-slide";
+};
+
 declare type CellValue<V = any> = V;
 
 export declare const CellWithCheckBox: ({ row, labels: labelsProp }: {
@@ -561,8 +596,8 @@ export declare const dialogActionClasses: {
 export declare const dialogClasses: {
     background: "HvDialog-background";
     root: "HvDialog-root";
-    closeButton: "HvDialog-closeButton";
     fullscreen: "HvDialog-fullscreen";
+    closeButton: "HvDialog-closeButton";
     paper: "HvDialog-paper";
 };
 
@@ -2182,6 +2217,64 @@ export declare interface HvCardProps extends HvBaseProps {
     classes?: HvCardClasses;
 }
 
+/**
+ * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.
+ * It allows you to focus on a particular content while having a notion of how many you have to explore.
+ */
+export declare const HvCarousel: (props: HvCarouselProps) => JSX_2.Element;
+
+export declare type HvCarouselClasses = Record<keyof typeof styles, string>;
+
+export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "title" | "onChange"> {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: Partial<HvCarouselClasses>;
+    /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */
+    height?: CSSProperties["height"];
+    /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */
+    thumbnailWidth?: CSSProperties["width"];
+    /** Title of the carousel */
+    title?: React_2.ReactNode;
+    /** Content slides to be displayed. @see `<HvCarouselSlide />` */
+    children?: React_2.ReactNode;
+    /** Custom content to render in the actions area */
+    actions?: React_2.ReactNode;
+    /** Whether Carousel is in "xs mode" - to use in embedded contexts */
+    xs?: boolean;
+    /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */
+    showDots?: boolean;
+    /** Whether to show the counter on the top-right corner of the active slide */
+    showCounter?: boolean;
+    /** Whether to show the back/forwards buttons over the active slide */
+    showSlideControls?: boolean;
+    /** Whether to enable the fullscreen toggle button */
+    showFullscreen?: boolean;
+    /** Whether to hide the thumbnails. Hidden by default in "xs" mode */
+    hideThumbnails?: boolean;
+    /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */
+    carouselOptions?: EmblaOptionsType;
+    /** */
+    renderThumbnail?: (index: number) => React_2.ReactNode;
+    /** The callback fired when the active slide changes. */
+    onChange?: (index: number) => void;
+}
+
+/**
+ * A container to use as `children` of `HvCarousel`.
+ * Pass `img` props directly to it, or `children` for any custom content
+ */
+export declare const HvCarouselSlide: ({ classes: classesProp, children, size: flexBasis, src, alt, ...props }: HvCarouselSlideProps) => JSX_2.Element;
+
+export declare type HvCarouselSlideClasses = Record<keyof typeof styles_2, string>;
+
+export declare interface HvCarouselSlideProps extends ImgHTMLAttributes<HTMLImageElement> {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: Partial<HvCarouselSlideClasses>;
+    /** The width of the Slide. Defaults to `100%` */
+    size?: string;
+    /** Content of a slide to be displayed */
+    children?: React.ReactNode;
+}
+
 export declare type HvCategoricalColorKeys = "cat1" | "cat1_180" | "cat1_160" | "cat1_140" | "cat1_120" | "cat1_80" | "cat1_60" | "cat1_40" | "cat1_20" | "cat2" | "cat2_180" | "cat2_160" | "cat2_140" | "cat2_120" | "cat2_80" | "cat2_60" | "cat2_40" | "cat2_20" | "cat3" | "cat3_180" | "cat3_160" | "cat3_140" | "cat3_120" | "cat3_80" | "cat3_60" | "cat3_40" | "cat3_20" | "cat4" | "cat4_180" | "cat4_160" | "cat4_140" | "cat4_120" | "cat4_80" | "cat4_60" | "cat4_40" | "cat4_20" | "cat5" | "cat5_180" | "cat5_160" | "cat5_140" | "cat5_120" | "cat5_80" | "cat5_60" | "cat5_40" | "cat5_20" | "cat6" | "cat6_180" | "cat6_160" | "cat6_140" | "cat6_120" | "cat6_80" | "cat6_60" | "cat6_40" | "cat6_20" | "cat7" | "cat7_180" | "cat7_160" | "cat7_140" | "cat7_120" | "cat7_80" | "cat7_60" | "cat7_40" | "cat7_20" | "cat8" | "cat8_180" | "cat8_160" | "cat8_140" | "cat8_120" | "cat8_80" | "cat8_60" | "cat8_40" | "cat8_20" | "cat9" | "cat9_180" | "cat9_160" | "cat9_140" | "cat9_120" | "cat9_80" | "cat9_60" | "cat9_40" | "cat9_20" | "cat10" | "cat10_180" | "cat10_160" | "cat10_140" | "cat10_120" | "cat10_80" | "cat10_60" | "cat10_40" | "cat10_20" | "cat11" | "cat11_180" | "cat11_160" | "cat11_140" | "cat11_120" | "cat11_80" | "cat11_60" | "cat11_40" | "cat11_20" | "cat12" | "cat12_180" | "cat12_160" | "cat12_140" | "cat12_120" | "cat12_80" | "cat12_60" | "cat12_40" | "cat12_20" | "cat13" | "cat14" | "cat15" | "cat16" | "cat17" | "cat18" | "cat19" | "cat20";
 
 export declare interface HvCellInstance<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, V = any> extends Omit<Cell<D, V>, "column" | "row" | "getCellProps">, Partial<UseGroupByCellProps<D>> {
@@ -2885,7 +2978,11 @@ export declare interface HvDialogProps extends Omit<DialogProps, "fullScreen" |
     maxWidth?: DialogProps["maxWidth"];
     /** @inheritdoc */
     fullWidth?: DialogProps["fullWidth"];
-    /** Element id that should be focus when the Dialog opens. */
+    /**
+     * Element id that should be focus when the Dialog opens.
+     * Auto-focusing elements can cause usability issues, so this should be avoided.
+     * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.
+     */
     firstFocusable?: string;
     /** Title for the button close. */
     buttonTitle?: string;
@@ -7247,7 +7344,7 @@ export declare interface HvValidationMessages {
  * 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)
+ * Although both the hierarchically organized data and the visual style resemble 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.
@@ -8037,44 +8134,20 @@ export declare const multiButtonClasses: {
 
 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.
-     */
+export declare type NavigationData<T extends React.ElementType = "a"> = ComponentProps<T> & Record<string, any> & {
+    /** The id to be applied to the root element. */
     id: string;
-    /**
-     * the label to be rendered on the menu item.
-     */
+    /** 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.
-     */
+    /** The icon to be rendered. */
     icon?: React.ReactNode;
-    /**
-     * Data subset.
-     */
-    data?: NavigationData[];
-    /**
-     * if `true` the item is disabled and is not interactive.
-     */
+    /** The Data children subset. */
+    data?: NavigationData<T>[];
+    /** Whether the item is disabled and not interactive. */
     disabled?: boolean;
-    /**
-     * if `true` the item doesn't have a selected state.
-     */
+    /** Whether the item has a selected state. */
     selectable?: boolean;
-    /**
-     * Any other properties.
-     */
-    [otherProperty: string]: any;
-}
+};
 
 export declare type NavigationMode = "treeview" | "navigation" | "slider";
 
@@ -8426,6 +8499,180 @@ export declare const stackClasses: {
 
 declare type StringKey<D> = Extract<keyof D, string>;
 
+declare const styles: {
+    /** Styles applied to the component root class. */
+    root: {
+        display: "flex";
+        alignItems: "stretch";
+        flexDirection: "column";
+        backgroundColor: string;
+        margin: number;
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    xs: {
+        "&:not(._)": {
+            padding: number;
+        };
+        "& $dots": {
+            position: "relative";
+            top: string;
+        };
+        "& $actions": {
+            top: number;
+        };
+        "& $controls": {
+            display: string;
+        };
+    };
+    fullscreen: {
+        width: string;
+        height: string;
+        position: "fixed";
+        inset: number;
+        zIndex: string;
+        "&:not(._)": {
+            padding: string;
+        };
+    };
+    title: {
+        display: "flex";
+        justifyContent: "flex-start";
+        marginBottom: string;
+    };
+    actions: {
+        display: "flex";
+        justifyContent: "flex-end";
+        height: number;
+        zIndex: number;
+        position: "relative";
+        top: string;
+    };
+    closeButton: {};
+    mainContainer: {
+        display: "flex";
+        flexDirection: Property.FlexDirection | undefined;
+    };
+    controls: {
+        display: "flex";
+        alignItems: "center";
+        height: number;
+        justifyContent: string;
+        backgroundColor: string;
+        border: string;
+        gap: string;
+        "&:has($dots)": {
+            justifyContent: "center";
+        };
+    };
+    pageCounter: {};
+    main: {
+        padding: number;
+        display: "flex";
+        flexDirection: "column";
+        position: "relative";
+        "&:hover $slideControls": {
+            opacity: number;
+        };
+    };
+    mainXs: {};
+    mainFullscreen: {
+        maxHeight: string;
+    };
+    counterContainer: {
+        position: "absolute";
+        top: string;
+        right: string;
+        zIndex: number;
+        display: string;
+    };
+    counter: {
+        color: string;
+        backgroundColor: string;
+        padding: string;
+    };
+    slideControls: {
+        position: "absolute";
+        left: number;
+        right: number;
+        top: string;
+        padding: string;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        opacity: number;
+        "& button": {
+            zIndex: number;
+        };
+        "&:focus-within": {
+            opacity: number;
+        };
+    };
+    slidesViewport: {
+        overflow: "hidden";
+    };
+    slidesContainer: {
+        display: "flex";
+        flexDirection: "row";
+        height: string;
+    };
+    dots: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: string;
+        height: string;
+    };
+    dotsXs: {};
+    dot: {
+        width: number;
+        height: number;
+        margin: string;
+        borderRadius: string;
+        backgroundColor: string;
+    };
+    dotSelected: {
+        width: number;
+        height: number;
+        backgroundColor: string;
+    };
+    panel: {
+        display: "flex";
+        width: string;
+        overflowX: "auto";
+        overflowY: "hidden";
+        padding: string;
+    };
+    thumbnail: {
+        height: string;
+        padding: number;
+        "& img": {
+            width: string;
+            height: string;
+            textAlign: "center";
+            aspectRatio: "16/9";
+            opacity: "50%";
+            borderRadius: string;
+        };
+    };
+    thumbnailSelected: {
+        "& img": {
+            border: string;
+            opacity: "100%";
+        };
+    };
+};
+
+declare const styles_2: {
+    slide: {};
+    image: {
+        aspectRatio: "16/9";
+        width: string;
+        height: string;
+    };
+};
+
 export declare const suggestionsClasses: {
     list: "HvSuggestions-list";
     root: "HvSuggestions-root";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.7.5",
+  "version": "5.8.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -30,15 +30,16 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.1.7",
-    "@hitachivantara/uikit-react-shared": "^5.0.11",
-    "@hitachivantara/uikit-styles": "^5.6.2",
+    "@hitachivantara/uikit-react-icons": "^5.1.8",
+    "@hitachivantara/uikit-react-shared": "^5.0.12",
+    "@hitachivantara/uikit-styles": "^5.7.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "detect-browser": "^5.3.0",
+    "embla-carousel-react": "^8.0.0-rc03",
     "hoist-non-react-statics": "^3.3.2",
     "lodash": "^4.17.21",
     "notistack": "^2.0.8",
@@ -57,7 +58,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f741d028c5523357e9cf472cd5a124cd395ebb22",
+  "gitHead": "26926baeded1a7e543655d96170f985bad7c4cbe",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {