@hitachivantara/uikit-react-pentaho 0.2.0 → 0.4.0

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { CSSInterpolation } from '@emotion/serialize';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { ForwardRefExoticComponent } from 'react';
@@ -5,6 +6,10 @@ import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
 import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvIconButtonProps } from '@hitachivantara/uikit-react-core';
+import { PolymorphicComponentRef } from '@hitachivantara/uikit-react-core';
+import { PolymorphicRef } from '@hitachivantara/uikit-react-core';
+import { PropsWithoutRef } from 'react';
+import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { TabProps } from '@mui/base/Tab';
 import { TabsProps } from '@mui/base/Tabs';
@@ -14,6 +19,7 @@ export declare const canvasBottomPanelClasses: {
     root: "HvCanvasBottomPanel-root";
     tab: "HvCanvasBottomPanel-tab";
     closed: "HvCanvasBottomPanel-closed";
+    actionsDisabled: "HvCanvasBottomPanel-actionsDisabled";
     minimized: "HvCanvasBottomPanel-minimized";
     multipleTabs: "HvCanvasBottomPanel-multipleTabs";
     overflowing: "HvCanvasBottomPanel-overflowing";
@@ -39,7 +45,6 @@ export declare const canvasSidePanelClasses: {
     close: "HvCanvasSidePanel-close";
     handle: "HvCanvasSidePanel-handle";
     tabs: "HvCanvasSidePanel-tabs";
-    handleButton: "HvCanvasSidePanel-handleButton";
     handleOpen: "HvCanvasSidePanel-handleOpen";
     handleClose: "HvCanvasSidePanel-handleClose";
 };
@@ -51,6 +56,34 @@ export declare const canvasToolbarClasses: {
     back: "HvCanvasToolbar-back";
 };
 
+export declare const canvasToolbarTabsClasses: {
+    root: "HvCanvasToolbarTabs-root";
+    actionsContainer: "HvCanvasToolbarTabs-actionsContainer";
+    tab: "HvCanvasToolbarTabs-tab";
+    dropdownMenu: "HvCanvasToolbarTabs-dropdownMenu";
+    closeButton: "HvCanvasToolbarTabs-closeButton";
+    tabsContainer: "HvCanvasToolbarTabs-tabsContainer";
+    tabsList: "HvCanvasToolbarTabs-tabsList";
+    tabContent: "HvCanvasToolbarTabs-tabContent";
+    tabIcon: "HvCanvasToolbarTabs-tabIcon";
+    tabLabel: "HvCanvasToolbarTabs-tabLabel";
+    activeTabLabel: "HvCanvasToolbarTabs-activeTabLabel";
+    tabDivider: "HvCanvasToolbarTabs-tabDivider";
+};
+
+export declare const cardClasses: {
+    root: "HvCard-root";
+};
+
+export declare const cardMediaClasses: {
+    root: "HvCardMedia-root";
+    image: "HvCardMedia-image";
+};
+
+export declare const cardSectionClasses: {
+    root: "HvCardSection-root";
+};
+
 declare const DEFAULT_LABELS: {
     open: string;
     close: string;
@@ -60,6 +93,13 @@ declare const DEFAULT_LABELS_2: {
     back: string;
 };
 
+declare const DEFAULT_LABELS_3: {
+    create: string;
+    undefined: string;
+    close: string;
+    dropdownMenu: string;
+};
+
 /**
  * A bottom panel component to use in a canvas context.
  */
@@ -75,17 +115,30 @@ export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
     /** List of tabs visible on the panel. */
     tabs: {
         id: string | number;
-        title: React.ReactNode;
+        title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);
     }[];
     /** Id of the selected tab if it needs to be controlled. */
-    tab?: string | number;
+    selectedTabId?: string | number;
     /** Callback triggered when a tab changes/is clicked. */
     onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
-    /** Actions to be rendered in the left side of a tab. If more than one action is provided, a dropdown menu will be used. */
+    /**
+     * Actions to be rendered in the left side of a tab.
+     * If more than one action is provided, a dropdown menu will be used.
+     * These actions are not shown when the tab content is overflowing.
+     */
     leftActions?: HvActionsGenericProps["actions"];
-    /** Actions to be rendered in the right side of a tab.If more than two actions are provided, a dropdown menu will be used to add the remaining actions. */
+    /**
+     * Actions to be rendered in the right side of a tab.
+     * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.
+     * These actions are not shown when the tab content is overflowing.
+     */
     rightActions?: HvActionsGenericProps["actions"];
-    /** Callback triggered when a right or left action is clicked. */
+    /**
+     * Actions to be rendered in the right side of a tab when the tab content is overflowing.
+     * These actions will replace both `leftActions` and `rightActions`.
+     */
+    overflowActions?: HvActionsGenericProps["actions"];
+    /** Callback triggered when an action is clicked. */
     onAction?: (event: React.SyntheticEvent, action: HvActionGeneric, tabId: string | number) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvCanvasBottomPanelClasses;
@@ -167,12 +220,96 @@ export declare interface HvCanvasToolbarProps extends HvBaseProps<HTMLDivElement
     classes?: HvCanvasToolbarClasses;
 }
 
-declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
+/**
+ * A toolbar tabs component to use in a canvas context.
+ */
+export declare const HvCanvasToolbarTabs: ForwardRefExoticComponent<HvCanvasToolbarTabsProps & RefAttributes<HTMLDivElement>>;
+
+export declare type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses_6>;
+
+export declare interface HvCanvasToolbarTabsProps extends HvBaseProps<HTMLDivElement, "onChange"> {
+    /** When controlled, defines the tabs. */
+    tabs?: ToolbarTabsTab[];
+    /** When uncontrolled, defines the initial tabs. */
+    defaultTabs?: ToolbarTabsTab[];
+    /** Id of the selected tab if it needs to be controlled. */
+    selectedTabId?: string;
+    /** Defines the icon to be placed before the label when a new tab is created. If not defined, no icon is used. */
+    icon?: React.ReactNode;
+    /** Callback triggered when a tab changes/is clicked. */
+    onTabChange?: (event: React.SyntheticEvent | null, tabId: string | null) => void;
+    /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent, tabs: ToolbarTabsTab[]) => void;
+    /** An object containing all the labels. */
+    labels?: Partial<typeof DEFAULT_LABELS_3>;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCanvasToolbarTabsClasses;
+}
+
+/**
+ * The Pentaho Card component.
+ */
+export declare const HvCard: <C extends React.ElementType = "div">(props: {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardClasses;
+} & {
+    component?: C | undefined;
+} & {
+    children?: ReactNode | undefined;
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component"> ? T extends any ? T : never : never : never) & {
+    ref?: PolymorphicRef<C> | undefined;
+} & RefAttributes<unknown>) => React.ReactElement | null;
+
+export declare type HvCardClasses = ExtractNames<typeof useClasses_7>;
+
+/**
+ * A subcomponent to be used within the `HvCard` component. This component is used to display an image within the card.
+ */
+export declare const HvCardMedia: ForwardRefExoticComponent<HvCardMediaProps & RefAttributes<HTMLImageElement>>;
+
+export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_8>;
+
+export declare interface HvCardMediaProps extends HvBaseProps<HTMLImageElement> {
+    /** The source for the image to use in the card. */
+    src: string;
+    /** The height of the image container. */
+    height?: number;
+    /** A text alternative to the image. */
+    alt?: string;
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardMediaClasses;
+}
+
+export declare type HvCardProps<C extends React.ElementType = "div"> = PolymorphicComponentRef<C, {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardClasses;
+}>;
+
+/**
+ * A subcomponent to be used within the `HvCard` component. This component is used to display content on the card.
+ */
+export declare const HvCardSection: ForwardRefExoticComponent<HvCardSectionProps & RefAttributes<HTMLDivElement>>;
+
+export declare type HvCardSectionClasses = ExtractNames<typeof useClasses_9>;
+
+export declare interface HvCardSectionProps extends HvBaseProps {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvCardSectionClasses;
+}
+
+declare interface ToolbarTabsTab {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+
+declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "actionsDisabled" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         root: string;
         tab: string;
         closed: string;
+        actionsDisabled: string;
         minimized: string;
         multipleTabs: string;
         overflowing: string;
@@ -211,7 +348,7 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root" | "list", strin
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "open" | "close" | "handle" | "tabs" | "handleButton" | "handleOpen" | "handleClose", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "open" | "close" | "handle" | "tabs" | "handleOpen" | "handleClose", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         root: string;
@@ -219,7 +356,6 @@ declare const useClasses_4: (classesProp?: Partial<Record<"content" | "root" | "
         close: string;
         handle: string;
         tabs: string;
-        handleButton: string;
         handleOpen: string;
         handleClose: string;
     };
@@ -244,4 +380,60 @@ declare const useClasses_5: (classesProp?: Partial<Record<"root" | "title" | "ac
     cx: (...args: any) => string;
 };
 
+declare const useClasses_6: (classesProp?: Partial<Record<"root" | "actionsContainer" | "tab" | "dropdownMenu" | "closeButton" | "tabsContainer" | "tabsList" | "tabContent" | "tabIcon" | "tabLabel" | "activeTabLabel" | "tabDivider", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+        actionsContainer: string;
+        tab: string;
+        dropdownMenu: string;
+        closeButton: string;
+        tabsContainer: string;
+        tabsList: string;
+        tabContent: string;
+        tabIcon: string;
+        tabLabel: string;
+        activeTabLabel: string;
+        tabDivider: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_7: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_8: (classesProp?: Partial<Record<"root" | "image", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+        image: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.66.14",
-    "@hitachivantara/uikit-react-icons": "^5.10.5",
+    "@hitachivantara/uikit-react-core": "^5.67.0",
+    "@hitachivantara/uikit-react-icons": "^5.10.6",
     "@mui/base": "^5.0.0-beta.40",
     "react-resize-detector": "^8.1.0"
   },
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "143286b6fdeed50a3265683bebb09dba16ab0395",
+  "gitHead": "289001faba5169368b09237c91c3ea5adc9bf75b",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",