@hitachivantara/uikit-react-pentaho 6.0.13 → 6.0.14

package/dist/Canvas/BottomPanel/BottomPanel.js

@@ -1,183 +1,120 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { useCanvasContext } from "../CanvasContext.js";
+import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
+import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
+import { staticClasses, useClasses } from "./BottomPanel.styles.js";
 import { forwardRef, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDefaultProps, useUniqueId, useControlled, theme, HvActionsGeneric, HvPanel } from "@hitachivantara/uikit-react-core";
+import { HvActionsGeneric, HvPanel, theme, useControlled, useDefaultProps, useUniqueId } from "@hitachivantara/uikit-react-core";
 import { mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { useCanvasContext } from "../CanvasContext.js";
-import { useClasses, staticClasses } from "./BottomPanel.styles.js";
-import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
-import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
-const PANEL_RADIUS = 16;
-const HvCanvasBottomPanel = forwardRef(function HvCanvasBottomPanel2(props, ref) {
-  const {
-    id: idProp,
-    className,
-    children,
-    open,
-    tabs,
-    minimize,
-    leftActions,
-    rightActions,
-    overflowActions,
-    selectedTabId: selectedTabIdProp,
-    classes: classesProp,
-    onTabChange,
-    onAction,
-    ...others
-  } = useDefaultProps("HvCanvasBottomPanel", props);
-  const { classes, cx } = useClasses(classesProp);
-  const canvasContext = useCanvasContext();
-  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
-  const id = useUniqueId(idProp);
-  const buttonsWidthRef = useRef(0);
-  const [isTabsFullWidth, setIsTabsFullWidth] = useState(false);
-  const [overflowing, setOverflowing] = useState(false);
-  const { ref: tabRef } = useResizeDetector({
-    handleHeight: false,
-    disableRerender: true,
-    onResize({ width, entry }) {
-      if (!overflowing && !buttonsWidthRef.current) {
-        const tabContainer = entry?.target;
-        const leftActionsWidth = tabContainer?.querySelector(`.${staticClasses.leftActions}`)?.clientWidth ?? 0;
-        const rightActionsWidth = tabContainer?.querySelector(`.${staticClasses.rightActions}`)?.clientWidth ?? 0;
-        buttonsWidthRef.current = leftActionsWidth + rightActionsWidth;
-      }
-      const hasSpace = (width || 0) - buttonsWidthRef.current > 60;
-      setOverflowing(!hasSpace);
-    }
-  });
-  const { ref: panelRef } = useResizeDetector({
-    handleHeight: false,
-    disableRerender: true,
-    onResize({ entry }) {
-      const panelEl = entry?.target;
-      if (!panelEl) return;
-      const panelWidth = panelEl.clientWidth;
-      const firstTab = panelEl.previousElementSibling?.firstElementChild?.firstElementChild;
-      const tabWidth = firstTab?.clientWidth || 0;
-      const numTabs = tabs.length;
-      const tabsWidth = numTabs * tabWidth;
-      setIsTabsFullWidth(tabsWidth + PANEL_RADIUS >= panelWidth);
-    }
-  });
-  const [selectedTab, setSelectedTab] = useControlled(
-    selectedTabIdProp,
-    tabs[0].id
-  );
-  const handleTabChange = (event, tabId) => {
-    setSelectedTab(tabId);
-    onTabChange?.(event, tabId);
-  };
-  const renderEndActions = (tab) => {
-    const btnsDisabled = selectedTab !== tab.id && !minimize;
-    if (rightActions && !overflowing) {
-      return /* @__PURE__ */ jsx(
-        HvActionsGeneric,
-        {
-          maxVisibleActions: 2,
-          actions: rightActions,
-          disabled: btnsDisabled,
-          className: cx(classes.rightActions, {
-            [classes.actionsDisabled]: btnsDisabled
-          }),
-          onAction: (event, action) => onAction?.(event, action, tab.id),
-          variant: "secondaryGhost",
-          iconOnly: true
-        }
-      );
-    }
-    if (overflowActions && overflowing) {
-      return /* @__PURE__ */ jsx(
-        HvActionsGeneric,
-        {
-          maxVisibleActions: 0,
-          actions: overflowActions,
-          disabled: btnsDisabled,
-          className: cx(classes.rightActions, {
-            [classes.actionsDisabled]: btnsDisabled
-          }),
-          onAction: (event, action) => onAction?.(event, action, tab.id),
-          variant: "secondaryGhost",
-          iconOnly: true
-        }
-      );
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      ref,
-      className: cx(
-        classes.root,
-        {
-          [classes.closed]: !open,
-          [classes.minimized]: minimize,
-          [classes.multipleTabs]: tabs.length > 1,
-          [classes.overflowing]: overflowing
-        },
-        className
-      ),
-      style: {
-        width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,
-        right: theme.space.sm,
-        transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
-      },
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(
-          HvCanvasPanelTabs,
-          {
-            onChange: handleTabChange,
-            value: selectedTab,
-            className: classes.tabsRoot,
-            children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
-              HvCanvasPanelTab,
-              {
-                ref: index === 0 ? tabRef : void 0,
-                id: `${id}-${tab.id}`,
-                value: tab.id,
-                className: classes.tab,
-                startActions: leftActions && !overflowing && /* @__PURE__ */ jsx(
-                  HvActionsGeneric,
-                  {
-                    maxVisibleActions: 1,
-                    actions: leftActions,
-                    disabled: selectedTab !== tab.id && !minimize,
-                    className: cx(classes.leftActions, {
-                      [classes.actionsDisabled]: selectedTab !== tab.id && !minimize
-                    }),
-                    onAction: (event, action) => onAction?.(event, action, tab.id),
-                    variant: "secondaryGhost",
-                    iconOnly: true
-                  }
-                ),
-                endActions: renderEndActions(tab),
-                children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title
-              },
-              tab.id
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvPanel,
-          {
-            ref: panelRef,
-            role: "tabpanel",
-            "aria-labelledby": `${id}-${selectedTab}`,
-            className: classes.content,
-            style: mergeStyles(void 0, {
-              "--right-border-radius": isTabsFullWidth ? 0 : `${PANEL_RADIUS}px`
-            }),
-            children
-          }
-        )
-      ]
-    }
-  );
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Canvas/BottomPanel/BottomPanel.tsx
+var PANEL_RADIUS = 16;
+/**
+* A bottom panel component to use in a canvas context.
+*/
+var HvCanvasBottomPanel = forwardRef(function HvCanvasBottomPanel(props, ref) {
+	const { id: idProp, className, children, open, tabs, minimize, leftActions, rightActions, overflowActions, selectedTabId: selectedTabIdProp, classes: classesProp, onTabChange, onAction, ...others } = useDefaultProps("HvCanvasBottomPanel", props);
+	const { classes, cx } = useClasses(classesProp);
+	const canvasContext = useCanvasContext();
+	const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
+	const id = useUniqueId(idProp);
+	const buttonsWidthRef = useRef(0);
+	const [isTabsFullWidth, setIsTabsFullWidth] = useState(false);
+	const [overflowing, setOverflowing] = useState(false);
+	const { ref: tabRef } = useResizeDetector({
+		handleHeight: false,
+		disableRerender: true,
+		onResize({ width, entry }) {
+			if (!overflowing && !buttonsWidthRef.current) {
+				const tabContainer = entry?.target;
+				buttonsWidthRef.current = (tabContainer?.querySelector(`.${staticClasses.leftActions}`)?.clientWidth ?? 0) + (tabContainer?.querySelector(`.${staticClasses.rightActions}`)?.clientWidth ?? 0);
+			}
+			setOverflowing(!((width || 0) - buttonsWidthRef.current > 60));
+		}
+	});
+	const { ref: panelRef } = useResizeDetector({
+		handleHeight: false,
+		disableRerender: true,
+		onResize({ entry }) {
+			const panelEl = entry?.target;
+			if (!panelEl) return;
+			const panelWidth = panelEl.clientWidth;
+			const tabWidth = (panelEl.previousElementSibling?.firstElementChild?.firstElementChild)?.clientWidth || 0;
+			setIsTabsFullWidth(tabs.length * tabWidth + PANEL_RADIUS >= panelWidth);
+		}
+	});
+	const [selectedTab, setSelectedTab] = useControlled(selectedTabIdProp, tabs[0].id);
+	const handleTabChange = (event, tabId) => {
+		setSelectedTab(tabId);
+		onTabChange?.(event, tabId);
+	};
+	const renderEndActions = (tab) => {
+		const btnsDisabled = selectedTab !== tab.id && !minimize;
+		if (rightActions && !overflowing) return /* @__PURE__ */ jsx(HvActionsGeneric, {
+			maxVisibleActions: 2,
+			actions: rightActions,
+			disabled: btnsDisabled,
+			className: cx(classes.rightActions, { [classes.actionsDisabled]: btnsDisabled }),
+			onAction: (event, action) => onAction?.(event, action, tab.id),
+			variant: "secondaryGhost",
+			iconOnly: true
+		});
+		if (overflowActions && overflowing) return /* @__PURE__ */ jsx(HvActionsGeneric, {
+			maxVisibleActions: 0,
+			actions: overflowActions,
+			disabled: btnsDisabled,
+			className: cx(classes.rightActions, { [classes.actionsDisabled]: btnsDisabled }),
+			onAction: (event, action) => onAction?.(event, action, tab.id),
+			variant: "secondaryGhost",
+			iconOnly: true
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref,
+		className: cx(classes.root, {
+			[classes.closed]: !open,
+			[classes.minimized]: minimize,
+			[classes.multipleTabs]: tabs.length > 1,
+			[classes.overflowing]: overflowing
+		}, className),
+		style: {
+			width: `calc(100% - ${sidePanelWidth}px - 2 * ${theme.space.sm})`,
+			right: theme.space.sm,
+			transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
+		},
+		...others,
+		children: [/* @__PURE__ */ jsx(HvCanvasPanelTabs, {
+			onChange: handleTabChange,
+			value: selectedTab,
+			className: classes.tabsRoot,
+			children: tabs.map((tab, index) => /* @__PURE__ */ jsx(HvCanvasPanelTab, {
+				ref: index === 0 ? tabRef : void 0,
+				id: `${id}-${tab.id}`,
+				value: tab.id,
+				className: classes.tab,
+				startActions: leftActions && !overflowing && /* @__PURE__ */ jsx(HvActionsGeneric, {
+					maxVisibleActions: 1,
+					actions: leftActions,
+					disabled: selectedTab !== tab.id && !minimize,
+					className: cx(classes.leftActions, { [classes.actionsDisabled]: selectedTab !== tab.id && !minimize }),
+					onAction: (event, action) => onAction?.(event, action, tab.id),
+					variant: "secondaryGhost",
+					iconOnly: true
+				}),
+				endActions: renderEndActions(tab),
+				children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title
+			}, tab.id))
+		}), /* @__PURE__ */ jsx(HvPanel, {
+			ref: panelRef,
+			role: "tabpanel",
+			"aria-labelledby": `${id}-${selectedTab}`,
+			className: classes.content,
+			style: mergeStyles(void 0, { "--right-border-radius": isTabsFullWidth ? 0 : `${PANEL_RADIUS}px` }),
+			children
+		})]
+	});
 });
-export {
-  HvCanvasBottomPanel,
-  staticClasses as canvasBottomPanelClasses
-};
+//#endregion
+export { HvCanvasBottomPanel };

package/dist/Canvas/BottomPanel/BottomPanel.styles.js

@@ -1,56 +1,44 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses(
-  "HvCanvasBottomPanel",
-  {
-    root: {
-      position: "absolute",
-      display: "flex",
-      flexDirection: "column",
-      right: 0,
-      bottom: 0,
-      width: "100%",
-      maxHeight: "500px",
-      visibility: "visible"
-    },
-    closed: {
-      maxHeight: 0,
-      visibility: "hidden"
-    },
-    minimized: {
-      "& $content": {
-        display: "none"
-      },
-      "& $tab": {
-        backgroundColor: theme.colors.bgContainer,
-        ...theme.typography.label
-      }
-    },
-    multipleTabs: {
-      "& $tab": { maxWidth: "288px" }
-    },
-    overflowing: {},
-    tab: {
-      padding: theme.space.xs
-    },
-    tabsRoot: {
-      position: "relative"
-    },
-    leftActions: {},
-    rightActions: {},
-    actionsDisabled: {
-      pointerEvents: "none",
-      "&&& button": {
-        pointerEvents: "none",
-        "&,&:hover": {
-          backgroundColor: "transparent",
-          borderColor: "transparent"
-        }
-      }
-    },
-    content: { borderTopRightRadius: "var(--right-border-radius)" }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Canvas/BottomPanel/BottomPanel.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvCanvasBottomPanel", {
+	root: {
+		position: "absolute",
+		display: "flex",
+		flexDirection: "column",
+		right: 0,
+		bottom: 0,
+		width: "100%",
+		maxHeight: "500px",
+		visibility: "visible"
+	},
+	closed: {
+		maxHeight: 0,
+		visibility: "hidden"
+	},
+	minimized: {
+		"& $content": { display: "none" },
+		"& $tab": {
+			backgroundColor: theme.colors.bgContainer,
+			...theme.typography.label
+		}
+	},
+	multipleTabs: { "& $tab": { maxWidth: "288px" } },
+	overflowing: {},
+	tab: { padding: theme.space.xs },
+	tabsRoot: { position: "relative" },
+	leftActions: {},
+	rightActions: {},
+	actionsDisabled: {
+		pointerEvents: "none",
+		"&&& button": {
+			pointerEvents: "none",
+			"&,&:hover": {
+				backgroundColor: "transparent",
+				borderColor: "transparent"
+			}
+		}
+	},
+	content: { borderTopRightRadius: "var(--right-border-radius)" }
+});
+//#endregion
+export { staticClasses, useClasses };

package/dist/Canvas/CanvasContext.js

@@ -1,46 +1,42 @@
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState, useCallback, useMemo, useContext } from "react";
-const HvCanvasContext = createContext(null);
-const HvCanvasProvider = ({
-  children
-}) => {
-  const [sidePanelOpen, setSidePanelOpen] = useState(false);
-  const [width, setWidth] = useState(0);
-  const [sidePanelDragging, setSidePanelDragging] = useState(false);
-  const handleSidePanelWidth = useCallback((newWidth) => {
-    setWidth(newWidth);
-  }, []);
-  const handleSidePanelOpen = useCallback((open) => {
-    setSidePanelOpen(open);
-  }, []);
-  const handleSidePanelDragging = useCallback((dragging) => {
-    setSidePanelDragging(dragging);
-  }, []);
-  const value = useMemo(
-    () => ({
-      sidePanelOpen,
-      handleSidePanelOpen,
-      sidePanelWidth: sidePanelOpen ? width : 0,
-      handleSidePanelWidth,
-      sidePanelDragging,
-      handleSidePanelDragging
-    }),
-    [
-      sidePanelOpen,
-      handleSidePanelOpen,
-      width,
-      handleSidePanelWidth,
-      sidePanelDragging,
-      handleSidePanelDragging
-    ]
-  );
-  return /* @__PURE__ */ jsx(HvCanvasContext.Provider, { value, children });
+//#region src/Canvas/CanvasContext.tsx
+var HvCanvasContext = createContext(null);
+var HvCanvasProvider = ({ children }) => {
+	const [sidePanelOpen, setSidePanelOpen] = useState(false);
+	const [width, setWidth] = useState(0);
+	const [sidePanelDragging, setSidePanelDragging] = useState(false);
+	const handleSidePanelWidth = useCallback((newWidth) => {
+		setWidth(newWidth);
+	}, []);
+	const handleSidePanelOpen = useCallback((open) => {
+		setSidePanelOpen(open);
+	}, []);
+	const handleSidePanelDragging = useCallback((dragging) => {
+		setSidePanelDragging(dragging);
+	}, []);
+	const value = useMemo(() => ({
+		sidePanelOpen,
+		handleSidePanelOpen,
+		sidePanelWidth: sidePanelOpen ? width : 0,
+		handleSidePanelWidth,
+		sidePanelDragging,
+		handleSidePanelDragging
+	}), [
+		sidePanelOpen,
+		handleSidePanelOpen,
+		width,
+		handleSidePanelWidth,
+		sidePanelDragging,
+		handleSidePanelDragging
+	]);
+	return /* @__PURE__ */ jsx(HvCanvasContext.Provider, {
+		value,
+		children
+	});
 };
-const useCanvasContext = () => {
-  return useContext(HvCanvasContext);
-};
-export {
-  HvCanvasContext,
-  HvCanvasProvider,
-  useCanvasContext
+var useCanvasContext = () => {
+	return useContext(HvCanvasContext);
 };
+//#endregion
+export { HvCanvasContext, HvCanvasProvider, useCanvasContext };

package/dist/Canvas/PanelTab/PanelTab.js

@@ -1,42 +1,34 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { useClasses } from "./PanelTab.styles.js";
 import { forwardRef, useRef } from "react";
-import { Tab } from "@mui/base";
 import { useDefaultProps } from "@hitachivantara/uikit-react-core";
-import { useClasses } from "./PanelTab.styles.js";
-import { staticClasses } from "./PanelTab.styles.js";
-const HvCanvasPanelTab = forwardRef(function HvCanvasPanelTab2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    style,
-    startActions,
-    endActions,
-    ...others
-  } = useDefaultProps("HvCanvasPanelTab", props);
-  const tabRef = useRef(null);
-  const { classes, cx } = useClasses(classesProp);
-  return (
-    // oxlint-disable-next-line jsx_a11y/click-events-have-key-events,jsx_a11y/no-static-element-interactions, simulate tab click
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        style,
-        className: cx(classes.root, className),
-        onClick: (evt) => {
-          if (evt.target === tabRef.current) return;
-          tabRef.current?.click();
-        },
-        children: [
-          startActions,
-          /* @__PURE__ */ jsx(Tab, { ref: tabRef, className: classes.tab, ...others }),
-          endActions
-        ]
-      }
-    )
-  );
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab } from "@mui/base";
+//#region src/Canvas/PanelTab/PanelTab.tsx
+/**
+* The tab component to use inside `HvCanvasPanelTabs`.
+*/
+var HvCanvasPanelTab = forwardRef(function HvCanvasPanelTab(props, ref) {
+	const { classes: classesProp, className, style, startActions, endActions, ...others } = useDefaultProps("HvCanvasPanelTab", props);
+	const tabRef = useRef(null);
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		style,
+		className: cx(classes.root, className),
+		onClick: (evt) => {
+			if (evt.target === tabRef.current) return;
+			tabRef.current?.click();
+		},
+		children: [
+			startActions,
+			/* @__PURE__ */ jsx(Tab, {
+				ref: tabRef,
+				className: classes.tab,
+				...others
+			}),
+			endActions
+		]
+	});
 });
-export {
-  HvCanvasPanelTab,
-  staticClasses as canvasPanelTabClasses
-};
+//#endregion
+export { HvCanvasPanelTab };

package/dist/Canvas/PanelTab/PanelTab.styles.js

@@ -1,48 +1,41 @@
+import { createClasses, outlineStyles, theme } from "@hitachivantara/uikit-react-core";
 import { tabClasses } from "@mui/base";
-import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
-  root: {
-    height: "100%",
-    display: "flex",
-    position: "relative",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: `${theme.radii.large} ${theme.radii.large} 0 0`,
-    backgroundColor: theme.colors.bgPage,
-    overflow: "hidden",
-    width: "100%",
-    boxShadow: "0px -2px 8px 0px #4141410F",
-    color: theme.colors.textDisabled,
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:has(:focus)": {
-      backgroundColor: theme.colors.bgContainer
-    },
-    [`:has(.${tabClasses.selected})`]: {
-      color: theme.colors.text,
-      backgroundColor: theme.colors.bgContainer
-    },
-    "&:has(:focus-visible)": {
-      ...outlineStyles
-    }
-  },
-  tab: {
-    appearance: "none",
-    color: theme.colors.textSubtle,
-    backgroundColor: "inherit",
-    cursor: "inherit",
-    textAlign: "initial",
-    flex: 1,
-    paddingInlineEnd: 0,
-    paddingInlineStart: 0,
-    [`&.${tabClasses.selected}`]: {
-      color: theme.colors.text,
-      fontWeight: theme.fontWeights.semibold
-    }
-  }
+//#region src/Canvas/PanelTab/PanelTab.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
+	root: {
+		height: "100%",
+		display: "flex",
+		position: "relative",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: `${theme.radii.large} ${theme.radii.large} 0 0`,
+		backgroundColor: theme.colors.bgPage,
+		overflow: "hidden",
+		width: "100%",
+		boxShadow: "0px -2px 8px 0px #4141410F",
+		color: theme.colors.textDisabled,
+		"&:hover": { cursor: "pointer" },
+		"&:has(:focus)": { backgroundColor: theme.colors.bgContainer },
+		[`:has(.${tabClasses.selected})`]: {
+			color: theme.colors.text,
+			backgroundColor: theme.colors.bgContainer
+		},
+		"&:has(:focus-visible)": { ...outlineStyles }
+	},
+	tab: {
+		appearance: "none",
+		color: theme.colors.textSubtle,
+		backgroundColor: "inherit",
+		cursor: "inherit",
+		textAlign: "initial",
+		flex: 1,
+		paddingInlineEnd: 0,
+		paddingInlineStart: 0,
+		[`&.${tabClasses.selected}`]: {
+			color: theme.colors.text,
+			fontWeight: theme.fontWeights.semibold
+		}
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };