@hitachivantara/uikit-react-pentaho 0.4.3 → 0.4.4

package/dist/cjs/Canvas/BottomPanel/BottomPanel.cjs

@@ -95,7 +95,6 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
                   className: classes.tab,
-                  tabIndex: 0,
                   children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
                 },
                 tab.id

package/dist/cjs/Canvas/SidePanel/SidePanel.cjs

@@ -65,7 +65,6 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
                 {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
-                  tabIndex: 0,
                   children: tab.content
                 },
                 tab.id

package/dist/cjs/Canvas/SidePanel/SidePanel.styles.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const boxShadow = `4px 0px 8px -4px ${uikitReactCore.theme.alpha("base_dark", "12%")}`;
 const { staticClasses, useClasses } = uikitReactCore.createClasses(
   "HvCanvasSidePanel",
   {
@@ -9,7 +10,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       position: "absolute",
       top: 0,
       left: 0,
-      boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+      boxShadow,
       backgroundColor: "transparent",
       transition: "visibility 0.3s ease, width 0.3s ease",
       overflow: "hidden",
@@ -31,7 +32,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       width: "35px",
       display: "flex",
       justifyContent: "center",
-      boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+      boxShadow,
       backgroundColor: uikitReactCore.theme.colors.atmo1,
       borderRadius: "0px 16px 16px 0px",
       position: "absolute",

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabEditor.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const { staticClasses, useClasses } = uikitReactCore.createClasses(
+  "HvCanvasToolbarTabs-editor",
+  {
+    root: {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+      overflow: "hidden",
+      "&:has($label:hover:not($edit))": {
+        color: uikitReactCore.theme.colors.secondary_80,
+        "& $editIcon": { visibility: "visible" }
+      }
+    },
+    edit: {
+      color: uikitReactCore.theme.colors.secondary_80,
+      borderColor: "currentColor",
+      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      cursor: "text"
+    },
+    label: {
+      width: "100%",
+      boxSizing: "border-box",
+      border: "1px solid transparent",
+      borderRadius: uikitReactCore.theme.radii.base,
+      padding: uikitReactCore.theme.spacing(0, "sm", 0, "xs"),
+      textAlign: "start",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      outline: "none",
+      "&:not($edit)": {
+        textOverflow: "ellipsis"
+      },
+      "&:hover:not($edit)": {
+        color: uikitReactCore.theme.colors.secondary_80,
+        borderColor: uikitReactCore.theme.colors.containerBackgroundHover,
+        backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover
+      }
+    },
+    editIcon: {
+      position: "absolute",
+      right: uikitReactCore.theme.spacing(0.5),
+      top: 4,
+      width: 16,
+      height: 16,
+      visibility: "hidden",
+      pointerEvents: "none"
+    }
+  }
+);
+const ToolbarTabEditor = ({
+  id,
+  className,
+  edit: editProp,
+  value: valueProp,
+  defaultValue: defaultValueProp = "",
+  classes: classesProp,
+  onInput: onInputProp,
+  onClick: onClickProp,
+  onBlur: onBlurProp,
+  onKeyDown: onKeyDownProp,
+  onChange: onChangeProp,
+  onEditChange: onEditChangeProp,
+  ...others
+}) => {
+  const { cx, classes } = useClasses(classesProp);
+  const contentEditableRef = react.useRef(null);
+  const [value, setValue] = uikitReactCore.useControlled(valueProp, defaultValueProp);
+  const [cachedValue, setCachedValue] = react.useState(value);
+  const [isEditing, setIsEditing] = uikitReactCore.useControlled(editProp, false);
+  const moveCursorToEnd = () => {
+    if (!contentEditableRef.current) return;
+    const element = contentEditableRef.current;
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    element.scrollLeft = element.scrollWidth;
+  };
+  const scrollContentToStart = () => {
+    if (!contentEditableRef.current) return;
+    const element = contentEditableRef.current;
+    element.scrollLeft = 0;
+  };
+  const changeEdit = (edit) => {
+    setIsEditing(edit);
+    onEditChangeProp?.(edit);
+  };
+  react.useLayoutEffect(() => {
+    if (isEditing) moveCursorToEnd();
+  }, [isEditing, value]);
+  const handleInput = (event) => {
+    const newValue = event.target.innerText || "";
+    setValue(newValue);
+    onInputProp?.(event);
+    onChangeProp?.(event, newValue);
+  };
+  const handleClick = (event) => {
+    setCachedValue(value);
+    changeEdit(true);
+    onClickProp?.(event);
+  };
+  const handleBlur = (event) => {
+    changeEdit(false);
+    scrollContentToStart();
+    const newValue = value.trim() || cachedValue;
+    setValue(newValue);
+    onBlurProp?.(event, newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (uikitReactCore.isKey(event, "Enter")) {
+      handleBlur(event);
+    } else if (uikitReactCore.isKey(event, "Esc")) {
+      changeEdit(false);
+      setValue(cachedValue);
+      onChangeProp?.(event, cachedValue);
+    }
+    onKeyDownProp?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvTypography,
+      {
+        ref: contentEditableRef,
+        contentEditable: isEditing,
+        className: cx(classes.label, { [classes.edit]: isEditing }),
+        variant: "label",
+        component: "span",
+        onInput: handleInput,
+        onClick: handleClick,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        dangerouslySetInnerHTML: {
+          __html: value
+        },
+        ...others
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, { className: classes.editIcon, iconSize: "XS" })
+  ] });
+};
+exports.ToolbarTabEditor = ToolbarTabEditor;
+exports.toolbarTabEditorClasses = staticClasses;

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.cjs

@@ -5,23 +5,23 @@ const react = require("react");
 const reactResizeDetector = require("react-resize-detector");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const ToolbarTabEditor = require("./ToolbarTabEditor.cjs");
 const ToolbarTabs_styles = require("./ToolbarTabs.styles.cjs");
 const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
 const PanelTab = require("../PanelTab/PanelTab.cjs");
 const DEFAULT_LABELS = {
   create: "Create new",
   undefined: "Undefined",
-  close: "Close",
   dropdownMenu: "Dropdown menu"
 };
-const DROPDOWN_MENU_WIDTH = 64;
-const BORDER_WIDTH = 2;
 const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
   const {
     children,
     className,
     selectedTabId: selectedTabIdProp,
     icon: iconProp,
+    allowTabEdit = true,
     tabs: tabsProp,
     defaultTabs: defaultTabsProp = [],
     labels: labelsProp,
@@ -32,13 +32,6 @@ const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
   } = uikitReactCore.useDefaultProps("HvCanvasToolbarTabs", props);
   const { classes, cx } = ToolbarTabs_styles.useClasses(classesProp);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-  const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
-    handleHeight: false,
-    refreshMode: "debounce",
-    refreshOptions: {
-      leading: true
-    }
-  });
   const { width: actionsWidth = 0, ref: actionsRef } = reactResizeDetector.useResizeDetector({
     handleHeight: false
   });
@@ -50,56 +43,7 @@ const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
     selectedTabIdProp,
     tabs?.[0]?.id ?? "none"
   );
-  const rootWidthLimitReached = react.useRef(false);
-  const groupTabs = react.useCallback(
-    (allTabs) => {
-      let fullTabWidth = ToolbarTabs_styles.MIN_TAB_WIDTH;
-      const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;
-      if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {
-        fullTabWidth = tabWidth + BORDER_WIDTH;
-        rootWidthLimitReached.current = true;
-      }
-      const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;
-      if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {
-        const visibleCount = Math.floor(
-          (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth
-        );
-        const temporaryHiddenTabs = allTabs.slice(visibleCount);
-        const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
-          (tab) => tab.id === selectedTab
-        );
-        const excludedTabIndex = visibleCount - 1;
-        const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
-        if (shouldShuffle) {
-          return {
-            visibleTabs: [
-              ...tabs.slice(0, excludedTabIndex),
-              temporaryHiddenTabs[selectedTabHiddenIndex]
-            ].filter((tab) => tab),
-            hiddenTabs: [
-              tabs[excludedTabIndex],
-              ...temporaryHiddenTabs.filter(
-                (tab, i) => i !== selectedTabHiddenIndex
-              )
-            ].filter((tab) => tab)
-          };
-        }
-        return {
-          visibleTabs: tabs.slice(0, visibleCount),
-          hiddenTabs: temporaryHiddenTabs
-        };
-      }
-      return {
-        visibleTabs: allTabs,
-        hiddenTabs: []
-      };
-    },
-    [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs]
-  );
-  const { hiddenTabs, visibleTabs } = react.useMemo(
-    () => groupTabs(tabs),
-    [groupTabs, tabs]
-  );
+  const [isEditing, setIsEditing] = react.useState(false);
   const rootForkedRef = uikitReactCore.useForkRef(ref, rootRef);
   const handleChangeTabs = (event, newTabs) => {
     setTabs(newTabs);
@@ -120,20 +64,69 @@ const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
     handleChangeSelectedTab(event, newTab.id);
     handleChangeTabs?.(event, newTabs);
   };
-  const handleClose = (event, tabId) => {
+  const handleEdit = (event, value, tabId) => handleChangeTabs(
+    event,
+    tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
+  );
+  const handleDeleteTab = (event, tabId) => {
     const newTabs = tabs.filter((tab) => tab.id !== tabId);
     if (tabId === selectedTab) {
       const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
       const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
       handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? "none");
     }
-    if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;
     handleChangeTabs(event, newTabs);
   };
-  const handleEdit = (event, value, tabId) => handleChangeTabs(
-    event,
-    tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
-  );
+  const handleKeyDownTab = (event, tabId) => {
+    if (uikitReactCore.isKey(event, "Delete") || uikitReactCore.isKey(event, "Backspace")) {
+      handleDeleteTab(event, tabId);
+      event.stopPropagation();
+    } else if (uikitReactCore.isKey(event, "Enter")) {
+      setIsEditing(true);
+    }
+  };
+  const { tabWidth, hiddenTabs, visibleTabs } = react.useMemo(() => {
+    let availableWidth = rootWidth - actionsWidth;
+    let calculatedTabWidth = availableWidth / tabs.length;
+    let clamped = uikitReactUtils.clamp(calculatedTabWidth, ToolbarTabs_styles.MAX_TAB_WIDTH, ToolbarTabs_styles.MIN_TAB_WIDTH);
+    if (calculatedTabWidth < ToolbarTabs_styles.MIN_TAB_WIDTH) {
+      availableWidth -= ToolbarTabs_styles.DROPDOWN_MENU_WIDTH;
+      const visibleCount = Math.floor(availableWidth / ToolbarTabs_styles.MIN_TAB_WIDTH);
+      calculatedTabWidth = availableWidth / visibleCount;
+      clamped = uikitReactUtils.clamp(calculatedTabWidth, ToolbarTabs_styles.MAX_TAB_WIDTH, ToolbarTabs_styles.MIN_TAB_WIDTH);
+      const temporaryHiddenTabs = tabs.slice(visibleCount);
+      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
+        (tab) => tab.id === selectedTab
+      );
+      const excludedTabIndex = visibleCount - 1;
+      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
+      if (shouldShuffle) {
+        return {
+          tabWidth: clamped,
+          visibleTabs: [
+            ...tabs.slice(0, excludedTabIndex),
+            temporaryHiddenTabs[selectedTabHiddenIndex]
+          ].filter((tab) => tab),
+          hiddenTabs: [
+            tabs[excludedTabIndex],
+            ...temporaryHiddenTabs.filter(
+              (tab, i) => i !== selectedTabHiddenIndex
+            )
+          ].filter((tab) => tab)
+        };
+      }
+      return {
+        tabWidth: clamped,
+        visibleTabs: tabs.slice(0, visibleCount),
+        hiddenTabs: temporaryHiddenTabs
+      };
+    }
+    return {
+      tabWidth: clamped,
+      visibleTabs: tabs,
+      hiddenTabs: []
+    };
+  }, [actionsWidth, rootWidth, selectedTab, tabs]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -142,99 +135,74 @@ const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
       ...others,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsContainer, children: [
-          visibleTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              PanelTabs.HvCanvasPanelTabs,
-              {
-                classes: { list: classes.tabsList },
-                value: selectedTab,
-                onChange: handleChangeSelectedTab,
-                children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          visibleTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            PanelTabs.HvCanvasPanelTabs,
+            {
+              classes: { list: classes.tabsList },
+              value: selectedTab,
+              onChange: handleChangeSelectedTab,
+              children: visibleTabs.map((tab, index) => {
+                const btnSelected = selectedTab === tab.id;
+                return /* @__PURE__ */ jsxRuntime.jsx(
                   PanelTab.HvCanvasPanelTab,
                   {
-                    ref: index === 0 ? tabRef : void 0,
+                    style: {
+                      width: tabWidth
+                    },
                     id: String(tab.id),
                     className: classes.tab,
                     value: tab.id,
-                    tabIndex: 0,
-                    "aria-label": tab.label,
+                    onKeyDown: (event) => handleKeyDownTab(event, tab.id),
                     children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabContent, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
+                      tab.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabIconContainer, children: tab.icon }),
+                      !btnSelected || !allowTabEdit ? /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvOverflowTooltip,
+                        {
+                          classes: {
+                            tooltipAnchor: classes.tabLabel
+                          },
+                          data: tab.label
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        ToolbarTabEditor.ToolbarTabEditor,
                         {
-                          className: cx({
-                            [classes.tabIcon]: !!tab.icon
-                          }),
-                          children: tab.icon
+                          classes: {
+                            label: cx(classes.tabLabel, classes.tabLabelEditor)
+                          },
+                          value: tab.label,
+                          edit: isEditing,
+                          onEditChange: setIsEditing,
+                          onChange: (event, value) => handleEdit(event, value, tab.id),
+                          onBlur: (event, value) => handleEdit(event, value, tab.id),
+                          onKeyDown: (e) => e.stopPropagation()
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: tab.label }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.closeIconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactIcons.CloseXS,
+                        {
+                          "aria-hidden": true,
+                          iconSize: "XS",
+                          onClick: (event) => {
+                            handleDeleteTab(event, tab.id);
+                            event.stopPropagation();
+                          }
+                        }
+                      ) }),
                       selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabDivider })
                     ] })
                   },
                   tab.id
-                ))
-              }
-            ),
-            visibleTabs.map((tab, index) => {
-              const btnDisabled = selectedTab !== tab.id;
-              const num = index + 1;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: {
-                    // @ts-ignore
-                    "--full-tab-width": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,
-                    "--right": `calc(${num} * var(--full-tab-width))`,
-                    "--editor-width": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ToolbarTabs_styles.ICON_WIDTH}px - ${uikitReactCore.theme.space.xs})`
-                  },
-                  children: [
-                    btnDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: classes.tabLabel,
-                        onClick: (event) => handleChangeSelectedTab(event, tab.id),
-                        "aria-label": tab.label,
-                        tabIndex: -1,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvOverflowTooltip, { data: tab.label })
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      uikitReactCore.HvInlineEditor,
-                      {
-                        className: cx(classes.tabLabel, classes.activeTabLabel),
-                        "aria-label": tab.label,
-                        value: tab.label,
-                        buttonProps: { size: "sm" },
-                        onChange: (event, value) => handleEdit(event, value, tab.id)
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      uikitReactCore.HvIconButton,
-                      {
-                        style: {
-                          // @ts-ignore
-                          "--close-color": btnDisabled ? uikitReactCore.theme.colors.secondary_60 : uikitReactCore.theme.colors.primary
-                        },
-                        className: classes.closeButton,
-                        title: labels.close,
-                        variant: "primaryGhost",
-                        onClick: (event) => handleClose(event, tab.id),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
-                      },
-                      tab.id
-                    )
-                  ]
-                },
-                tab.id
-              );
-            })
-          ] }),
+                );
+              })
+            }
+          ),
           hiddenTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             uikitReactCore.HvDropDownMenu,
             {
-              className: classes.dropdownMenu,
+              classes: {
+                container: classes.dropdownMenuContainer,
+                menuListRoot: classes.dropdownMenuListRoot
+              },
               dataList: hiddenTabs,
               icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, {}),
               labels: { dropdownMenu: labels.dropdownMenu },