@hitachivantara/uikit-react-pentaho 0.7.1 → 0.8.0

package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  HvTypography,\n  HvTypographyProps,\n  isKey,\n  theme,\n  useControlled,\n  useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs-editor\",\n  {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      overflow: \"hidden\",\n      \"&:has($label:hover:not($edit))\": {\n        color: theme.colors.secondary_80,\n        \"& $editIcon\": { visibility: \"visible\" },\n      },\n    },\n    edit: {\n      color: theme.colors.secondary_80,\n      borderColor: \"currentColor\",\n      backgroundColor: theme.colors.atmo1,\n      cursor: \"text\",\n    },\n    label: {\n      width: \"100%\",\n      boxSizing: \"border-box\",\n      border: \"1px solid transparent\",\n      borderRadius: theme.radii.base,\n      padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n      textAlign: \"start\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      outline: \"none\",\n      \"&:not($edit)\": {\n        textOverflow: \"ellipsis\",\n      },\n      \"&:hover:not($edit)\": {\n        color: theme.colors.secondary_80,\n        borderColor: theme.colors.containerBackgroundHover,\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    editIcon: {\n      position: \"absolute\",\n      right: theme.spacing(0.5),\n      top: 4,\n      width: 16,\n      height: 16,\n      visibility: \"hidden\",\n      pointerEvents: \"none\",\n    },\n  },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n  extends Omit<HvTypographyProps, \"classes\" | \"onBlur\" | \"onChange\"> {\n  /** The value of the component. When used, the component has to be controlled. */\n  value?: string;\n  /** The default value of the component. */\n  defaultValue?: string;\n  /** Whether the editor is in edit mode. When used, the prop has to be controlled. */\n  edit?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: ToolbarTabEditorClasses;\n  /** Called the field is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n    value: string,\n  ) => void;\n  /** Called the value changes. */\n  onChange?: (\n    event: React.FormEvent<Element> | React.KeyboardEvent<Element>,\n    value: string,\n  ) => void;\n  /** Called the `edit` prop changes. */\n  onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n  value\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n\nexport const ToolbarTabEditor = ({\n  id,\n  className,\n  edit: editProp,\n  value: valueProp,\n  defaultValue: defaultValueProp = \"\",\n  classes: classesProp,\n  onInput: onInputProp,\n  onClick: onClickProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  onChange: onChangeProp,\n  onEditChange: onEditChangeProp,\n  ...others\n}: ToolbarTabEditorProps) => {\n  const { cx, classes } = useClasses(classesProp);\n\n  const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n  // Sanitize content\n  const [value, setValue] = useControlled(\n    valueProp ? sanitize(valueProp) : valueProp,\n    defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n  );\n  const [cachedValue, setCachedValue] = useState(value);\n  const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n  const moveCursorToEnd = () => {\n    if (!contentEditableRef.current) return;\n    const element = contentEditableRef.current;\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n    element.scrollLeft = element.scrollWidth;\n  };\n\n  const scrollContentToStart = () => {\n    if (!contentEditableRef.current) return;\n    const element = contentEditableRef.current;\n    element.scrollLeft = 0;\n  };\n\n  const changeEdit = (edit: boolean) => {\n    setIsEditing(edit);\n    onEditChangeProp?.(edit);\n  };\n\n  // Update cursor when value updates: otherwise it goes to the start\n  useEnhancedEffect(() => {\n    if (isEditing) moveCursorToEnd();\n  }, [isEditing, value]);\n\n  const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n    // Sanitize content\n    const newValue = sanitize((event.target as any).textContent) || \"\";\n    setValue(newValue);\n    onInputProp?.(event);\n    onChangeProp?.(event, newValue);\n  };\n\n  const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n    setCachedValue(value);\n    changeEdit(true);\n    onClickProp?.(event);\n  };\n\n  const handleBlur = (\n    event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n  ) => {\n    changeEdit(false);\n    scrollContentToStart();\n\n    // Never leave the field empty\n    const newValue = value.trim() || cachedValue;\n    setValue(newValue);\n\n    onBlurProp?.(event, newValue);\n  };\n\n  const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Enter\")) {\n      // Blur field\n      handleBlur(event);\n    } else if (isKey(event, \"Esc\")) {\n      changeEdit(false);\n\n      // Cancel editing\n      setValue(cachedValue);\n      onChangeProp?.(event, cachedValue);\n    }\n    onKeyDownProp?.(event);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvTypography\n        ref={contentEditableRef}\n        contentEditable={isEditing}\n        className={cx(classes.label, { [classes.edit]: isEditing })}\n        variant=\"label\"\n        component=\"span\"\n        onInput={handleInput}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n        dangerouslySetInnerHTML={{\n          __html: value,\n        }}\n        {...others}\n      />\n      <Edit className={classes.editIcon} iconSize=\"XS\" />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTabs.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvOverflowTooltip,\n  isKey,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n  DROPDOWN_MENU_WIDTH,\n  MAX_TAB_WIDTH,\n  MIN_TAB_WIDTH,\n  staticClasses,\n  useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  create: \"Create new\",\n  undefined: \"Undefined\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n  fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /** When controlled, defines the tabs. */\n  tabs?: ToolbarTabsTab[];\n  /** When uncontrolled, defines the initial tabs. */\n  defaultTabs?: ToolbarTabsTab[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string;\n  /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Whether the tabs are editable or not. Default to `false`. */\n  disableTabEdit?: boolean;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | null,\n  ) => void;\n  /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    tabs: ToolbarTabsTab[],\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarTabsClasses;\n  /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n  hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasToolbarTabsProps\n>((props, ref) => {\n  const {\n    children,\n    className,\n    selectedTabId: selectedTabIdProp,\n    icon: iconProp,\n    disableTabEdit = false,\n    hideCreateNew = false,\n    tabs: tabsProp,\n    defaultTabs: defaultTabsProp = [],\n    labels: labelsProp,\n    classes: classesProp,\n    onTabChange: onTabChangeProp,\n    onChange: onChangeProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  // Actions resize detector: to know when to use the dropdown menu\n  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Root resize detector: to know when to use the dropdown menu\n  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n  const [selectedTab, setSelectedTab] = useControlled<string | null>(\n    selectedTabIdProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n  const [isEditing, setIsEditing] = useState(false);\n\n  const rootForkedRef = useForkRef(ref, rootRef);\n\n  const handleChangeTabs = (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    newTabs: ToolbarTabsTab[],\n  ) => {\n    setTabs(newTabs);\n    onChangeProp?.(event, newTabs);\n  };\n\n  const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    value,\n  ) => {\n    setSelectedTab(String(value));\n    onTabChangeProp?.(event, String(value));\n  };\n\n  const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n    const newTabs: ToolbarTabsTab[] = [...tabs];\n    const newTab: ToolbarTabsTab = {\n      id: uniqueId(),\n      label: `${labels.undefined} ${newTabs.length + 1}`,\n      icon: iconProp,\n    };\n    newTabs.push(newTab);\n    handleChangeSelectedTab(event, newTab.id);\n    handleChangeTabs?.(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.FormEvent<Element>,\n    value: string,\n    tabId: string,\n  ) =>\n    handleChangeTabs(\n      event,\n      tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n    );\n\n  const handleDeleteTab = (event: any, tabId: string) => {\n    const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n    if (tabId === selectedTab) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n    }\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleKeyDownTab = (\n    event: React.KeyboardEvent,\n    tabId: string,\n    removable: boolean,\n  ) => {\n    if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n      handleDeleteTab(event, tabId);\n\n      // We don't want the click to also select the tab\n      event.stopPropagation();\n    } else if (isKey(event, \"Enter\")) {\n      // Activate edit label mode\n      setIsEditing(true);\n    }\n  };\n\n  const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n    let availableWidth = rootWidth - actionsWidth;\n    let calculatedTabWidth = availableWidth / tabs.length;\n    let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n    // Overflowing\n    if (calculatedTabWidth < MIN_TAB_WIDTH) {\n      availableWidth -= DROPDOWN_MENU_WIDTH;\n      const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n      calculatedTabWidth = availableWidth / visibleCount;\n      clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n      const temporaryHiddenTabs = tabs.slice(visibleCount);\n      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n        (tab) => tab.id === selectedTab,\n      );\n      const excludedTabIndex = visibleCount - 1;\n      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n      if (shouldShuffle) {\n        return {\n          tabWidth: clamped,\n          visibleTabs: [\n            ...tabs.slice(0, excludedTabIndex),\n            temporaryHiddenTabs[selectedTabHiddenIndex],\n          ].filter((tab) => tab),\n          hiddenTabs: [\n            tabs[excludedTabIndex],\n            ...temporaryHiddenTabs.filter(\n              (tab, i) => i !== selectedTabHiddenIndex,\n            ),\n          ].filter((tab) => tab),\n        };\n      }\n\n      return {\n        tabWidth: clamped,\n        visibleTabs: tabs.slice(0, visibleCount),\n        hiddenTabs: temporaryHiddenTabs,\n      };\n    }\n\n    return {\n      tabWidth: clamped,\n      visibleTabs: tabs,\n      hiddenTabs: [],\n    };\n  }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n  return (\n    <div\n      ref={rootForkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <div className={classes.tabsContainer}>\n        {visibleTabs.length > 0 && (\n          <HvCanvasPanelTabs\n            classes={{ list: classes.tabsList }}\n            value={selectedTab}\n            onChange={handleChangeSelectedTab}\n          >\n            {visibleTabs.map((tab, index) => {\n              const btnSelected = selectedTab === tab.id;\n              const removable = !tab.fixed;\n              return (\n                <HvCanvasPanelTab\n                  style={{\n                    width: tabWidth,\n                  }}\n                  key={tab.id}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  onKeyDown={(event) =>\n                    handleKeyDownTab(event, tab.id, removable)\n                  }\n                >\n                  <div className={classes.tabContent}>\n                    {tab.icon && (\n                      <div className={classes.tabIconContainer}>{tab.icon}</div>\n                    )}\n                    {!btnSelected || disableTabEdit ? (\n                      <HvOverflowTooltip\n                        classes={{\n                          tooltipAnchor: classes.tabLabel,\n                        }}\n                        data={tab.label}\n                      />\n                    ) : (\n                      <ToolbarTabEditor\n                        classes={{\n                          label: cx(classes.tabLabel, classes.tabLabelEditor),\n                        }}\n                        value={tab.label}\n                        edit={isEditing}\n                        onEditChange={setIsEditing}\n                        onChange={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        onBlur={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        // We don't want the arrow keys to trigger the tab navigation\n                        onKeyDown={(e) => e.stopPropagation()}\n                      />\n                    )}\n                    {removable && (\n                      <div className={classes.closeIconContainer}>\n                        <CloseXS\n                          aria-hidden\n                          size=\"xs\"\n                          onClick={(event) => {\n                            handleDeleteTab(event, tab.id);\n\n                            // We don't want the click to also select the tab\n                            event.stopPropagation();\n                          }}\n                        />\n                      </div>\n                    )}\n                    {selectedTab !== tab.id &&\n                      visibleTabs[index + 1]?.id !== selectedTab && (\n                        <div className={classes.tabDivider} />\n                      )}\n                  </div>\n                </HvCanvasPanelTab>\n              );\n            })}\n          </HvCanvasPanelTabs>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            classes={{\n              container: classes.dropdownMenuContainer,\n              menuListRoot: classes.dropdownMenuListRoot,\n            }}\n            dataList={hiddenTabs}\n            icon={<MoreOptionsHorizontal />}\n            labels={{ dropdownMenu: labels.dropdownMenu }}\n            onClick={(event, value) =>\n              handleChangeSelectedTab(event, value.id ?? \"none\")\n            }\n          />\n        )}\n      </div>\n      <div ref={actionsRef} className={classes.actionsContainer}>\n        {children}\n        {!hideCreateNew && (\n          <HvButton\n            variant=\"primaryGhost\"\n            startIcon={<AddAlt />}\n            onClick={handleCreateNew}\n          >\n            {labels.create}\n          </HvButton>\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/pentaho/src/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.pp.primaryDimmed} 50%, ${theme.colors.pp.dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs\",\n  {\n    root: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n      transition: \"width 0.3s ease\",\n      height: TAB_HEIGHT,\n    },\n    tabsContainer: {\n      display: \"flex\",\n    },\n    tabsList: {\n      height: TAB_HEIGHT,\n      background: theme.colors.atmo1,\n      borderEndStartRadius: theme.radii.base,\n    },\n    tab: {\n      boxSizing: \"border-box\",\n      border: `1px solid ${theme.colors.atmo1}`,\n      borderBottom: \"none\",\n      borderRadius: \"10px 10px 0 0\",\n      boxShadow: \"none\",\n      backgroundColor: theme.colors.atmo1,\n      \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n      [`&.${tabClasses.selected}`]: {\n        color: theme.colors.primary,\n        backgroundColor: TAB_COLOR,\n        borderColor: theme.colors.atmo4,\n      },\n      [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n        {\n          borderRadius: 0,\n          backgroundColor: TAB_COLOR,\n          borderColor: TAB_COLOR,\n          \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n        },\n\n      // Hide icon when editor is hovered and focused\n      [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n        {\n          display: \"none\",\n        },\n      // Hide close when editor is focused\n      [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n        display: \"none\",\n      },\n    },\n    tabLabel: {\n      \"&:not($tabLabelEditor)\": {\n        margin: theme.spacing(0, \"xs\"),\n      },\n    },\n    tabLabelEditor: {\n      color: theme.colors.primary,\n    },\n    tabContent: {\n      position: \"relative\",\n      height: TAB_HEIGHT,\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      width: \"100%\",\n      padding: TAB_PADDING,\n    },\n    tabIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: TAB_ICON_SIZE,\n    },\n    closeIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      marginLeft: \"auto\",\n      marginRight: theme.spacing(-1),\n      width: CLOSE_ICON_SIZE,\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        borderRadius: theme.radii.circle,\n      },\n    },\n    tabDivider: {\n      position: \"absolute\",\n      height: 18,\n      width: 1,\n      backgroundColor: theme.colors.atmo3,\n      right: 0,\n    },\n    actionsContainer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n      alignItems: \"center\",\n      gap: theme.space.sm,\n    },\n    dropdownMenuContainer: {\n      width: DROPDOWN_MENU_WIDTH,\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    dropdownMenuListRoot: {\n      maxHeight: 220,\n    },\n  },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}

package/dist/esm/{index.js → pentaho/src/index.js}

@@ -10,10 +10,13 @@ import { staticClasses as staticClasses5 } from "./Canvas/Toolbar/Toolbar.styles
 import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
 import { staticClasses as staticClasses6 } from "./Canvas/ToolbarTabs/ToolbarTabs.styles.js";
 import { HvCanvasToolbarTabs } from "./Canvas/ToolbarTabs/ToolbarTabs.js";
+import { HvCanvasContext, HvCanvasProvider, useCanvasContext } from "./Canvas/CanvasContext.js";
 export {
   HvCanvasBottomPanel,
+  HvCanvasContext,
   HvCanvasPanelTab,
   HvCanvasPanelTabs,
+  HvCanvasProvider,
   HvCanvasSidePanel,
   HvCanvasToolbar,
   HvCanvasToolbarTabs,
@@ -22,5 +25,6 @@ export {
   staticClasses3 as canvasPanelTabsClasses,
   staticClasses4 as canvasSidePanelClasses,
   staticClasses5 as canvasToolbarClasses,
-  staticClasses6 as canvasToolbarTabsClasses
+  staticClasses6 as canvasToolbarTabsClasses,
+  useCanvasContext
 };

package/dist/esm/{index.js.map → pentaho/src/index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/utils/src/utils/styles.js

@@ -0,0 +1,15 @@
+function stripNullish(obj) {
+  return Object.entries(obj).reduce(
+    (acc, [key, value]) => {
+      if (value != null && value !== "") {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {}
+  );
+}
+const mergeStyles = (styleProp, styles) => ({ ...stripNullish(styles), ...styleProp });
+export {
+  mergeStyles
+};

package/dist/esm/utils/src/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../utils/src/utils/styles.ts"],"sourcesContent":["function stripNullish<T extends Record<string, unknown>>(obj: T) {\n  return Object.entries(obj).reduce<Record<string, unknown>>(\n    (acc, [key, value]) => {\n      if (value != null && value !== \"\") {\n        acc[key] = value;\n      }\n      return acc;\n    },\n    {},\n  );\n}\n\n/**\n * Utility that merges the `style` prop (`styleProp`) with an external `style` object.\n *\n * The external object accepts CSS vars (`--var`) and removes empty style entries.\n */\nexport const mergeStyles = (\n  styleProp: React.CSSProperties | undefined,\n  styles: Record<string, any>,\n): React.CSSProperties => ({ ...stripNullish(styles), ...styleProp });\n"],"names":[],"mappings":"AAAA,SAAS,aAAgD,KAAQ;AACxD,SAAA,OAAO,QAAQ,GAAG,EAAE;AAAA,IACzB,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AACjB,UAAA,SAAS,QAAQ,UAAU,IAAI;AACjC,YAAI,GAAG,IAAI;AAAA,MAAA;AAEN,aAAA;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EACF;AACF;AAOa,MAAA,cAAc,CACzB,WACA,YACyB,EAAE,GAAG,aAAa,MAAM,GAAG,GAAG,UAAU;"}

package/dist/types/index.d.ts

@@ -1,9 +1,13 @@
+/// <reference types="react" />
+
+import { Context } from 'react';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { ForwardRefExoticComponent } from 'react';
 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 { JSX as JSX_2 } from 'react/jsx-runtime';
 import { RefAttributes } from 'react';
 import { TabProps } from '@mui/base/Tab';
 import { TabsProps } from '@mui/base/Tabs';
@@ -125,6 +129,15 @@ export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
     classes?: HvCanvasBottomPanelClasses;
 }
 
+export declare const HvCanvasContext: Context<HvCanvasContextValue | null>;
+
+declare type HvCanvasContextValue = {
+    sidePanelOpen: boolean;
+    handleSidePanelOpen: (open: boolean) => void;
+    sidePanelWidth: number;
+    handleSidePanelWidth: (width: number) => void;
+};
+
 /**
  * The tab component to use inside `HvCanvasPanelTabs`.
  */
@@ -149,6 +162,11 @@ export declare interface HvCanvasPanelTabsProps extends TabsProps {
     classes?: HvCanvasPanelTabsClasses;
 }
 
+export declare const HvCanvasProvider: ({ children, }: {
+    children: React.ReactNode;
+    onSidePanelResize?: ((width: number) => void) | undefined;
+}) => JSX_2.Element;
+
 /**
  * A side panel component to use in a canvas context.
  */
@@ -156,7 +174,7 @@ export declare const HvCanvasSidePanel: ForwardRefExoticComponent<HvCanvasSidePa
 
 export declare type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses_4>;
 
-export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
+export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle" | "onResize"> {
     /** When controlled, defines id the panel is open or not. */
     open?: boolean;
     /** When uncontrolled, defines the initial state of the panel. */
@@ -174,6 +192,14 @@ export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivEleme
     onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
     /** An object containing all the labels. */
     labels?: Partial<typeof DEFAULT_LABELS>;
+    /** The minimum width of the side panel. */
+    minWidth?: number;
+    /** The maximum width of the side panel. */
+    maxWidth?: number;
+    /** The initial width of the side panel. */
+    initialWidth?: number;
+    /** Callback triggered when the panel width changes. */
+    onResize?: (width: number) => void;
     /** The content that will be rendered within the canvas panel. */
     children?: React.ReactNode;
     /** A Jss Object used to override or extend the styles applied. */
@@ -239,6 +265,8 @@ declare interface ToolbarTabsTab {
     fixed?: boolean;
 }
 
+export declare const useCanvasContext: () => HvCanvasContextValue | null;
+
 declare const useClasses: (classesProp?: Partial<Record<"content" | "root" | "tab" | "closed" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions" | "actionsDisabled", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho+ React components.",
@@ -43,7 +43,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "682ed1b9811e2a937a1c3fa0423d9ed2a544cb95",
+  "gitHead": "8c0ca52b994bdf8392213160de93a5e6c46dd095",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -1,42 +0,0 @@
-"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 Toolbar_styles = require("./Toolbar.styles.cjs");
-const DEFAULT_LABELS = {
-  back: "Back"
-};
-const HvCanvasToolbar = react.forwardRef(
-  (props, ref) => {
-    const {
-      title: titleProp,
-      backButton,
-      labels: labelsProp,
-      className,
-      children,
-      backButtonProps,
-      classes: classesProp,
-      ...others
-    } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
-    const { classes, cx } = Toolbar_styles.useClasses(classesProp);
-    const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-    const title = typeof titleProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: titleProp }) : titleProp;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactCore.HvIconButton,
-        {
-          title: labels.back,
-          variant: "primaryGhost",
-          ...backButtonProps,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
-      children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
-    ] });
-  }
-);
-exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
-exports.HvCanvasToolbar = HvCanvasToolbar;

package/dist/esm/Canvas/BottomPanel/BottomPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomPanel.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvActionGeneric,\n  HvActionsGeneric,\n  HvActionsGenericProps,\n  HvBaseProps,\n  HvPanel,\n  theme,\n  useControlled,\n  useDefaultProps,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./BottomPanel.styles\";\n\nexport { staticClasses as canvasBottomPanelClasses };\n\nexport type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasBottomPanelProps extends HvBaseProps {\n  /** Open state of the bottom panel. */\n  open?: boolean;\n  /** Minimize state of the bottom panel tabs'. */\n  minimize?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs: {\n    id: string | number;\n    title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string | number;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /**\n   * Actions to be rendered in the left side of a tab.\n   * If more than one action is provided, a dropdown menu will be used.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  leftActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab.\n   * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.\n   * These actions are not shown when the tab content is overflowing.\n   */\n  rightActions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * Actions to be rendered in the right side of a tab when the tab content is overflowing.\n   * These actions will replace both `leftActions` and `rightActions`.\n   */\n  overflowActions?: HvActionsGenericProps[\"actions\"];\n  /** Callback triggered when an action is clicked. */\n  onAction?: (\n    event: React.SyntheticEvent,\n    action: HvActionGeneric,\n    tabId: string | number,\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasBottomPanelClasses;\n}\n\n/**\n * A bottom panel component to use in a canvas context.\n */\nexport const HvCanvasBottomPanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasBottomPanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    children,\n    open,\n    tabs,\n    minimize,\n    leftActions,\n    rightActions,\n    overflowActions,\n    selectedTabId: selectedTabIdProp,\n    classes: classesProp,\n    onTabChange,\n    onAction,\n    ...others\n  } = useDefaultProps(\"HvCanvasBottomPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const id = useUniqueId(idProp);\n\n  // Tab resize detector: to position tab actions and set the panel top right border radius\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n  });\n  // Tab panel resize detector: to set the panel top right border radius\n  const { width: panelWidth = 0, ref: panelRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Left actions resize detector: to position tab title according with actions\n  const { width: leftActionWidth = 32, ref: leftActionRef } = useResizeDetector(\n    {\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    },\n  );\n  // Right actions resize detector: to position tab title according with actions\n  const { width: rightActionWidth = 32, ref: rightActionRef } =\n    useResizeDetector({\n      handleHeight: false,\n      refreshMode: \"debounce\",\n      refreshOptions: {\n        trailing: true,\n      },\n    });\n\n  const overflowing = useMemo(() => {\n    const availableWidth =\n      tabWidth -\n      (leftActions ? leftActionWidth : 0) -\n      (rightActions ? rightActionWidth : 0);\n\n    return availableWidth < 60;\n  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);\n\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    selectedTabIdProp,\n    tabs[0].id,\n  );\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <div\n      id={id}\n      ref={ref}\n      className={cx(\n        classes.root,\n        {\n          [classes.closed]: !open,\n          [classes.minimized]: minimize,\n          [classes.multipleTabs]: tabs.length > 1,\n          [classes.overflowing]: overflowing,\n        },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.tabsRoot}>\n        <HvCanvasPanelTabs\n          style={{\n            // @ts-ignore\n            \"--left-actions-width\":\n              overflowing || !leftActions\n                ? theme.space.sm\n                : `calc(${leftActionWidth}px + ${theme.space.xs})`,\n            \"--right-actions-width\":\n              !rightActions || (overflowing && !overflowActions)\n                ? theme.space.sm\n                : `calc(${overflowing ? 32 : rightActionWidth}px + ${theme.space.xs})`,\n          }}\n          onChange={handleTabChange}\n          value={selectedTab}\n        >\n          {tabs.map((tab, index) => (\n            <HvCanvasPanelTab\n              ref={index === 0 ? tabRef : undefined}\n              key={tab.id}\n              id={`${id}-${tab.id}`}\n              value={tab.id}\n              className={classes.tab}\n            >\n              <div className={classes.tabTitle}>\n                {typeof tab.title === \"function\"\n                  ? tab.title(overflowing)\n                  : tab.title}\n              </div>\n            </HvCanvasPanelTab>\n          ))}\n        </HvCanvasPanelTabs>\n        {/* For accessibility purposes, these buttons cannot be children of a tablist so they are rendered as HvCanvasTabs sibling. */}\n        {leftActions || rightActions || overflowActions\n          ? tabs.map((tab, index) => {\n              const btnsDisabled = selectedTab !== tab.id && !minimize;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--tab-width\": `${tabWidth}px`,\n                    \"--right\": `calc((${index} + 1) * var(--tab-width))`,\n                    \"--left\": `calc(${index} * var(--tab-width))`,\n                  }}\n                >\n                  {leftActions && !overflowing && (\n                    <div\n                      ref={leftActionRef}\n                      className={cx(classes.leftActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={1}\n                        actions={leftActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {rightActions && !overflowing && (\n                    <div\n                      ref={rightActionRef}\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={2}\n                        actions={rightActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                  {overflowActions && overflowing && (\n                    <div\n                      className={cx(classes.rightActions, {\n                        [classes.actionsDisabled]: btnsDisabled,\n                      })}\n                    >\n                      <HvActionsGeneric\n                        maxVisibleActions={0}\n                        actions={overflowActions}\n                        disabled={btnsDisabled}\n                        onAction={(event, action) =>\n                          onAction?.(event, action, tab.id)\n                        }\n                        variant=\"secondaryGhost\"\n                        iconOnly\n                      />\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          : null}\n      </div>\n      <HvPanel\n        ref={panelRef}\n        role=\"tabpanel\"\n        aria-labelledby={`${id}-${selectedTab}`}\n        className={classes.content}\n        style={{\n          // @ts-ignore\n          \"--right-border-radius\":\n            tabWidth * tabs.length >= panelWidth ? \"0px\" : \"16px\",\n        }}\n      >\n        {children}\n      </HvPanel>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"BottomPanel.styles.js","sources":["../../../../src/Canvas/BottomPanel/BottomPanel.styles.tsx"],"sourcesContent":["import {\n  buttonClasses,\n  createClasses,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasBottomPanel\",\n  {\n    root: {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      right: 0,\n      bottom: 0,\n      width: \"100%\",\n      maxHeight: \"500px\",\n      visibility: \"visible\",\n      transition: \"visibility 0.3s ease, max-height 0.3s ease, width 0.3s ease\",\n    },\n    closed: {\n      maxHeight: 0,\n      visibility: \"hidden\",\n    },\n    minimized: {\n      \"& $content\": {\n        display: \"none\",\n      },\n      \"& $tab\": {\n        backgroundColor: theme.colors.atmo1,\n        ...theme.typography.label,\n      },\n    },\n    multipleTabs: {\n      \"& $tab\": { maxWidth: \"288px\" },\n      \"& $rightActions\": {\n        right: `calc(100% - var(--right) + ${theme.space.xs})`,\n      },\n    },\n    overflowing: {},\n    tab: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"flex-start\",\n      width: \"100%\",\n    },\n    tabTitle: {\n      display: \"flex\",\n      width: \"100%\",\n      padding: theme.space.sm,\n      paddingLeft: \"var(--left-actions-width)\",\n      paddingRight: \"var(--right-actions-width)\",\n    },\n    tabsRoot: {\n      position: \"relative\",\n    },\n    leftActions: {\n      position: \"absolute\",\n      left: `calc(var(--left) + ${theme.space.xs})`,\n      top: 8,\n    },\n    rightActions: {\n      position: \"absolute\",\n      right: theme.space.xs,\n      top: 8,\n    },\n    actionsDisabled: {\n      pointerEvents: \"none\",\n      [`&& .${buttonClasses.disabled}`]: {\n        pointerEvents: \"none\",\n        backgroundColor: \"transparent\",\n        borderColor: \"transparent\",\n        \":hover\": {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n        },\n      },\n    },\n    content: { borderTopRightRadius: \"var(--right-border-radius)\" },\n  },\n);\n"],"names":[],"mappings":";AAMa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB,MAAM,OAAO;AAAA,QAC9B,GAAG,MAAM,WAAW;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,UAAU,EAAE,UAAU,QAAQ;AAAA,MAC9B,mBAAmB;AAAA,QACjB,OAAO,8BAA8B,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IAEvD;AAAA,IACA,aAAa,CAAC;AAAA,IACd,KAAK;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,SAAS,MAAM,MAAM;AAAA,MACrB,aAAa;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,MACX,UAAU;AAAA,MACV,MAAM,sBAAsB,MAAM,MAAM,EAAE;AAAA,MAC1C,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MACnB,KAAK;AAAA,IACP;AAAA,IACA,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,CAAC,OAAO,cAAc,QAAQ,EAAE,GAAG;AAAA,QACjC,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,QAAA;AAAA,MACf;AAAA,IAEJ;AAAA,IACA,SAAS,EAAE,sBAAsB,6BAA6B;AAAA,EAAA;AAElE;"}

package/dist/esm/Canvas/PanelTab/PanelTab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTab.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tab, TabProps } from \"@mui/base/Tab\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTab.styles\";\n\nexport { staticClasses as canvasPanelTabClasses };\n\nexport type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabProps extends TabProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabClasses;\n}\n\n/**\n * The tab component to use inside `HvCanvasPanelTabs`.\n */\nexport const HvCanvasPanelTab = forwardRef<\n  HTMLButtonElement,\n  HvCanvasPanelTabProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTab\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return <Tab ref={ref} className={cx(classes.root, className)} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAEvC,SAAA,oBAAC,KAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,OAAQ,CAAA;AAC5E,CAAC;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTab.styles.js","sources":["../../../../src/Canvas/PanelTab/PanelTab.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanelTab\", {\n  root: {\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flex: 1,\n    borderRadius: \"16px 16px 0 0\",\n    backgroundColor: theme.colors.atmo2,\n    color: theme.colors.secondary_60,\n    overflow: \"hidden\",\n    width: \"100%\",\n    boxShadow: \"0px -2px 8px 0px #4141410F\",\n    paddingInlineEnd: 0,\n    paddingInlineStart: 0,\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    [`&.${tabClasses.selected}`]: {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAOO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,KAAK,WAAW,QAAQ,EAAE,GAAG;AAAA,MAC5B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}

package/dist/esm/Canvas/PanelTabs/PanelTabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTabs.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./PanelTabs.styles\";\n\nexport { staticClasses as canvasPanelTabsClasses };\n\nexport type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasPanelTabsProps extends TabsProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasPanelTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasPanelTabsProps\n>((props, ref) => {\n  const {\n    selectionFollowsFocus = true,\n    children,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanelTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tabs\n      ref={ref}\n      className={cx(classes.root, className)}\n      selectionFollowsFocus={selectionFollowsFocus}\n      {...others}\n    >\n      <TabsList className={classes.list}>{children}</TabsList>\n    </Tabs>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,UAAA,EAAS,WAAW,QAAQ,MAAO,SAAS,CAAA;AAAA,IAAA;AAAA,EAC/C;AAEJ,CAAC;"}

package/dist/esm/Canvas/PanelTabs/PanelTabs.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTabs.styles.js","sources":["../../../../src/Canvas/PanelTabs/PanelTabs.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasPanelTabs\",\n  {\n    root: {},\n    list: {\n      display: \"flex\",\n      width: \"100%\",\n      height: 48,\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ;"}

package/dist/esm/Canvas/SidePanel/SidePanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidePanel.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvPanel,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { staticClasses, useClasses } from \"./SidePanel.styles\";\nimport { useResizable } from \"./useResizable\";\n\nexport { staticClasses as canvasSidePanelClasses };\n\nexport type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasSidePanelProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /** When controlled, defines id the panel is open or not. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpen?: boolean;\n  /** List of tabs visible on the panel. */\n  tabs?: {\n    id: string | number;\n    content: React.ReactNode;\n  }[];\n  /** Id of the selected tab if it needs to be controlled. */\n  tab?: string | number;\n  /** Callback triggered whenever the panel toggles. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | number | null,\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** The content that will be rendered within the canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasSidePanelClasses;\n}\n\n/**\n * A side panel component to use in a canvas context.\n */\nexport const HvCanvasSidePanel = forwardRef<\n  HTMLDivElement,\n  HvCanvasSidePanelProps\n>((props, ref) => {\n  const {\n    id: idProp,\n    tab: tabProp,\n    open: openProp,\n    defaultOpen = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasSidePanel\", props);\n\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpen));\n  const [selectedTab, setSelectedTab] = useControlled<string | number | null>(\n    tabProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n\n  const { width, isDragging, getContainerProps, getSeparatorProps } =\n    useResizable({\n      ref,\n      initialWidth: 320,\n      minWidth: 100,\n      maxWidth: 500,\n    });\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    tabId,\n  ) => {\n    setSelectedTab(tabId);\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...getContainerProps({ style: { ...(!open && { width: 0 }) } })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasPanelTabs\n            className={classes.tabs}\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            {tabs.map((tab) => (\n              <HvCanvasPanelTab\n                key={tab.id}\n                id={`${id}-${tab.id}`}\n                value={tab.id}\n              >\n                {tab.content}\n              </HvCanvasPanelTab>\n            ))}\n          </HvCanvasPanelTabs>\n        )}\n        <HvPanel\n          role={tabs ? \"tabpanel\" : undefined}\n          aria-labelledby={tabs ? `${id}-${selectedTab}` : undefined}\n          className={classes.content}\n        >\n          {children}\n        </HvPanel>\n      </div>\n      <div {...getSeparatorProps()} />\n      <HvIconButton\n        variant=\"primaryGhost\"\n        title={open ? labels.close : labels.open}\n        onClick={handleTogglePanel}\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        style={{\n          left: open ? width : 0,\n          transition: isDragging ? \"none\" : undefined,\n        }}\n      >\n        <End rotate={open} />\n      </HvIconButton>\n    </>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/SidePanel/SidePanel.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidePanel.styles.js","sources":["../../../../src/Canvas/SidePanel/SidePanel.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nconst boxShadow = `4px 0px 8px -4px ${theme.alpha(\"base_dark\", \"12%\")}`;\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasSidePanel\",\n  {\n    root: {\n      height: \"100%\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      boxShadow,\n      backgroundColor: \"transparent\",\n      transition: \"visibility 0.3s ease, width 0.3s ease\",\n      overflow: \"hidden\",\n      \"&$open\": {\n        width: 320,\n        visibility: \"visible\",\n      },\n      \"&$close\": {\n        width: 0,\n        visibility: \"hidden\",\n      },\n    },\n    tabs: {},\n    content: {\n      height: \"100%\",\n    },\n    handle: {\n      height: 44,\n      width: 44,\n      display: \"flex\",\n      justifyContent: \"center\",\n      boxShadow,\n      backgroundColor: theme.colors.atmo1,\n      borderRadius: \"0px 16px 16px 0px\",\n      position: \"absolute\",\n      transition: \"left 0.3s ease\",\n      top: \"calc(50% - 44px)\", // subtract handle's full height\n      \"&$handleOpen\": {\n        left: 320,\n      },\n      \"&$handleClose\": {\n        left: 0,\n      },\n    },\n    open: {},\n    close: {},\n    handleOpen: {},\n    handleClose: {},\n  },\n);\n"],"names":[],"mappings":";AAEA,MAAM,YAAY,oBAAoB,MAAM,MAAM,aAAa,KAAK,CAAC;AAExD,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,MAAM,CAAC;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB;AAAA,MACA,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA;AAAA,MACL,gBAAgB;AAAA,QACd,MAAM;AAAA,MACR;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,MAAM,CAAC;AAAA,IACP,OAAO,CAAC;AAAA,IACR,YAAY,CAAC;AAAA,IACb,aAAa,CAAA;AAAA,EAAC;AAElB;"}

package/dist/esm/Canvas/SidePanel/useResizable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResizable.js","sources":["../../../../src/Canvas/SidePanel/useResizable.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\ninterface ContainerProps {\n  ref: any;\n  style: React.CSSProperties;\n}\n\ninterface SeparatorProps {\n  style: React.CSSProperties;\n  onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onMouseLeave?: () => void;\n  onMouseDown?: () => void;\n  role: string;\n}\n\ninterface ResizableProps {\n  ref: any;\n  initialWidth?: number;\n  minWidth?: number;\n  maxWidth?: number;\n}\n\nexport const useResizable = (\n  resizableOptions: ResizableProps,\n): {\n  width: number;\n  isDragging: boolean;\n  getContainerProps: (overrides: any) => ContainerProps;\n  getSeparatorProps: () => SeparatorProps;\n} => {\n  const {\n    ref,\n    initialWidth = 320,\n    minWidth = 100,\n    maxWidth = 600,\n  } = resizableOptions;\n\n  const [width, setWidth] = useState(initialWidth);\n  const [isHover, setIsHover] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const forkedRef = useForkRef(ref, panelRef);\n\n  const mouseMove = (event: MouseEvent) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const newWidth = event.clientX - rect.left;\n      if (newWidth >= minWidth && newWidth <= maxWidth) {\n        setWidth(newWidth);\n      }\n    }\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (panelRef.current) {\n      const rect = panelRef.current.getBoundingClientRect();\n      const isHoverBorder =\n        event.clientX >= rect.right - 5 && event.clientX <= rect.right + 5;\n      setIsHover(isHoverBorder);\n    }\n  };\n\n  const handleMouseUp = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"\";\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mousemove\",\n      mouseMove,\n    );\n    panelRef.current?.parentElement?.removeEventListener(\n      \"mouseup\",\n      handleMouseUp,\n    );\n    setIsDragging(false);\n  };\n\n  const startResizing = () => {\n    if (!panelRef.current) return;\n\n    panelRef.current.style.userSelect = \"none\";\n    panelRef.current.parentElement?.addEventListener(\"mousemove\", mouseMove);\n    panelRef.current.parentElement?.addEventListener(\"mouseup\", handleMouseUp);\n    setIsDragging(true);\n  };\n\n  const getContainerProps = (\n    overrides: Partial<ContainerProps> = {},\n  ): ContainerProps => ({\n    ref: forkedRef,\n    style: {\n      width,\n      transition: isDragging ? \"none\" : undefined,\n      ...overrides.style,\n    },\n  });\n\n  const getSeparatorProps = (\n    overrides: Partial<SeparatorProps> = {},\n  ): SeparatorProps => ({\n    style: {\n      left: width,\n      position: \"absolute\",\n      top: 0,\n      bottom: 0,\n      width: 5,\n      cursor: \"col-resize\",\n      ...overrides.style,\n    },\n    onMouseMove: handleMouseMove,\n    onMouseLeave: () => setIsHover(false),\n    onMouseDown: () => {\n      if (isHover) startResizing();\n    },\n    role: \"separator\",\n  });\n\n  return { width, isDragging, getContainerProps, getSeparatorProps };\n};\n"],"names":[],"mappings":";;AAuBa,MAAA,eAAe,CAC1B,qBAMG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,IACT;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAE5C,QAAA,WAAW,OAAuB,IAAI;AAEtC,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,YAAY,CAAC,UAAsB;AACvC,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,WAAW,MAAM,UAAU,KAAK;AAClC,UAAA,YAAY,YAAY,YAAY,UAAU;AAChD,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAEM,QAAA,kBAAkB,CAAC,UAA4C;AACnE,QAAI,SAAS,SAAS;AACd,YAAA,OAAO,SAAS,QAAQ,sBAAsB;AAC9C,YAAA,gBACJ,MAAM,WAAW,KAAK,QAAQ,KAAK,MAAM,WAAW,KAAK,QAAQ;AACnE,iBAAW,aAAa;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,aAAS,SAAS,eAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IACF;AACA,kBAAc,KAAK;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,SAAS,QAAS;AAEd,aAAA,QAAQ,MAAM,aAAa;AACpC,aAAS,QAAQ,eAAe,iBAAiB,aAAa,SAAS;AACvE,aAAS,QAAQ,eAAe,iBAAiB,WAAW,aAAa;AACzE,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,KAAK;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,YAAY,aAAa,SAAS;AAAA,MAClC,GAAG,UAAU;AAAA,IAAA;AAAA,EACf;AAGF,QAAM,oBAAoB,CACxB,YAAqC,QACjB;AAAA,IACpB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,UAAU;AAAA,IACf;AAAA,IACA,aAAa;AAAA,IACb,cAAc,MAAM,WAAW,KAAK;AAAA,IACpC,aAAa,MAAM;AACjB,UAAI,QAAuB,eAAA;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAY,mBAAmB,kBAAkB;AACnE;"}

package/dist/esm/Canvas/Toolbar/Toolbar.js

@@ -1,43 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
-import { Previous } from "@hitachivantara/uikit-react-icons";
-import { useClasses } from "./Toolbar.styles.js";
-import { staticClasses } from "./Toolbar.styles.js";
-const DEFAULT_LABELS = {
-  back: "Back"
-};
-const HvCanvasToolbar = forwardRef(
-  (props, ref) => {
-    const {
-      title: titleProp,
-      backButton,
-      labels: labelsProp,
-      className,
-      children,
-      backButtonProps,
-      classes: classesProp,
-      ...others
-    } = useDefaultProps("HvCanvasToolbar", props);
-    const { classes, cx } = useClasses(classesProp);
-    const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
-    return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
-        HvIconButton,
-        {
-          title: labels.back,
-          variant: "primaryGhost",
-          ...backButtonProps,
-          children: /* @__PURE__ */ jsx(Previous, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
-      children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-    ] });
-  }
-);
-export {
-  HvCanvasToolbar,
-  staticClasses as canvasToolbarClasses
-};

package/dist/esm/Canvas/Toolbar/Toolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvIconButtonProps,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: React.ReactNode;\n  /** Fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children?: React.ReactNode;\n  /** Props for the default back button. */\n  backButtonProps?: Partial<HvIconButtonProps>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = forwardRef<HTMLDivElement, HvCanvasToolbarProps>(\n  (props, ref) => {\n    const {\n      title: titleProp,\n      backButton,\n      labels: labelsProp,\n      className,\n      children,\n      backButtonProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const title =\n      typeof titleProp === \"string\" ? (\n        <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n      ) : (\n        titleProp\n      );\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)} {...others}>\n        <div className={classes.back}>\n          {backButton ?? (\n            <HvIconButton\n              title={labels.back}\n              variant=\"primaryGhost\"\n              {...backButtonProps}\n            >\n              <Previous />\n            </HvIconButton>\n          )}\n        </div>\n        <div className={classes.title}>{title}</div>\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,UAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAA,CAAU,IAE1C;AAIF,WAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACzD,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,OAAO;AAAA,UACd,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ,8BAAC,UAAS,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,GAGhB;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,MACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,SAAS,CAAA;AAAA,IAAA,GAC1D;AAAA,EAAA;AAGN;"}

package/dist/esm/Canvas/Toolbar/Toolbar.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.styles.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: \"100%\",\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"auto\",\n    paddingRight: theme.space.md,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAAA;AAE9B,CAAC;"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarTabEditor.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  HvTypography,\n  HvTypographyProps,\n  isKey,\n  theme,\n  useControlled,\n  useEnhancedEffect,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\n// TODO - Extract component in the future: when we have more specs and/or is used in other components\n\nconst { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs-editor\",\n  {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      overflow: \"hidden\",\n      \"&:has($label:hover:not($edit))\": {\n        color: theme.colors.secondary_80,\n        \"& $editIcon\": { visibility: \"visible\" },\n      },\n    },\n    edit: {\n      color: theme.colors.secondary_80,\n      borderColor: \"currentColor\",\n      backgroundColor: theme.colors.atmo1,\n      cursor: \"text\",\n    },\n    label: {\n      width: \"100%\",\n      boxSizing: \"border-box\",\n      border: \"1px solid transparent\",\n      borderRadius: theme.radii.base,\n      padding: theme.spacing(0, \"sm\", 0, \"xs\"),\n      textAlign: \"start\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      outline: \"none\",\n      \"&:not($edit)\": {\n        textOverflow: \"ellipsis\",\n      },\n      \"&:hover:not($edit)\": {\n        color: theme.colors.secondary_80,\n        borderColor: theme.colors.containerBackgroundHover,\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    editIcon: {\n      position: \"absolute\",\n      right: theme.spacing(0.5),\n      top: 4,\n      width: 16,\n      height: 16,\n      visibility: \"hidden\",\n      pointerEvents: \"none\",\n    },\n  },\n);\n\nexport { staticClasses as toolbarTabEditorClasses };\n\ntype ToolbarTabEditorClasses = ExtractNames<typeof useClasses>;\n\ninterface ToolbarTabEditorProps\n  extends Omit<HvTypographyProps, \"classes\" | \"onBlur\" | \"onChange\"> {\n  /** The value of the component. When used, the component has to be controlled. */\n  value?: string;\n  /** The default value of the component. */\n  defaultValue?: string;\n  /** Whether the editor is in edit mode. When used, the prop has to be controlled. */\n  edit?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: ToolbarTabEditorClasses;\n  /** Called the field is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n    value: string,\n  ) => void;\n  /** Called the value changes. */\n  onChange?: (\n    event: React.FormEvent<Element> | React.KeyboardEvent<Element>,\n    value: string,\n  ) => void;\n  /** Called the `edit` prop changes. */\n  onEditChange?: (value: boolean) => void;\n}\n\nconst sanitize = (value: string) =>\n  value\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#039;\");\n\nexport const ToolbarTabEditor = ({\n  id,\n  className,\n  edit: editProp,\n  value: valueProp,\n  defaultValue: defaultValueProp = \"\",\n  classes: classesProp,\n  onInput: onInputProp,\n  onClick: onClickProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  onChange: onChangeProp,\n  onEditChange: onEditChangeProp,\n  ...others\n}: ToolbarTabEditorProps) => {\n  const { cx, classes } = useClasses(classesProp);\n\n  const contentEditableRef = useRef<HTMLSpanElement>(null);\n\n  // Sanitize content\n  const [value, setValue] = useControlled(\n    valueProp ? sanitize(valueProp) : valueProp,\n    defaultValueProp ? sanitize(defaultValueProp) : defaultValueProp,\n  );\n  const [cachedValue, setCachedValue] = useState(value);\n  const [isEditing, setIsEditing] = useControlled(editProp, false);\n\n  const moveCursorToEnd = () => {\n    if (!contentEditableRef.current) return;\n    const element = contentEditableRef.current;\n    const range = document.createRange();\n    const selection = window.getSelection();\n    range.selectNodeContents(element);\n    range.collapse(false);\n    selection?.removeAllRanges();\n    selection?.addRange(range);\n    element.scrollLeft = element.scrollWidth;\n  };\n\n  const scrollContentToStart = () => {\n    if (!contentEditableRef.current) return;\n    const element = contentEditableRef.current;\n    element.scrollLeft = 0;\n  };\n\n  const changeEdit = (edit: boolean) => {\n    setIsEditing(edit);\n    onEditChangeProp?.(edit);\n  };\n\n  // Update cursor when value updates: otherwise it goes to the start\n  useEnhancedEffect(() => {\n    if (isEditing) moveCursorToEnd();\n  }, [isEditing, value]);\n\n  const handleInput: HvTypographyProps[\"onInput\"] = (event) => {\n    // Sanitize content\n    const newValue = sanitize((event.target as any).textContent) || \"\";\n    setValue(newValue);\n    onInputProp?.(event);\n    onChangeProp?.(event, newValue);\n  };\n\n  const handleClick: HvTypographyProps[\"onClick\"] = (event) => {\n    setCachedValue(value);\n    changeEdit(true);\n    onClickProp?.(event);\n  };\n\n  const handleBlur = (\n    event: React.FocusEvent<Element> | React.KeyboardEvent<Element>,\n  ) => {\n    changeEdit(false);\n    scrollContentToStart();\n\n    // Never leave the field empty\n    const newValue = value.trim() || cachedValue;\n    setValue(newValue);\n\n    onBlurProp?.(event, newValue);\n  };\n\n  const handleKeyDown: HvTypographyProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Enter\")) {\n      // Blur field\n      handleBlur(event);\n    } else if (isKey(event, \"Esc\")) {\n      changeEdit(false);\n\n      // Cancel editing\n      setValue(cachedValue);\n      onChangeProp?.(event, cachedValue);\n    }\n    onKeyDownProp?.(event);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvTypography\n        ref={contentEditableRef}\n        contentEditable={isEditing}\n        className={cx(classes.label, { [classes.edit]: isEditing })}\n        variant=\"label\"\n        component=\"span\"\n        onInput={handleInput}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        // Using children is unstable in React for contentEditable so the value is rendered through dangerouslySetInnerHTML\n        dangerouslySetInnerHTML={{\n          __html: value,\n        }}\n        {...others}\n      />\n      <Edit className={classes.editIcon} iconSize=\"XS\" />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useMemo, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvOverflowTooltip,\n  isKey,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { clamp } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport { ToolbarTabEditor } from \"./ToolbarTabEditor\";\nimport {\n  DROPDOWN_MENU_WIDTH,\n  MAX_TAB_WIDTH,\n  MIN_TAB_WIDTH,\n  staticClasses,\n  useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  create: \"Create new\",\n  undefined: \"Undefined\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */\n  fixed?: boolean;\n}\n\nexport interface HvCanvasToolbarTabsProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /** When controlled, defines the tabs. */\n  tabs?: ToolbarTabsTab[];\n  /** When uncontrolled, defines the initial tabs. */\n  defaultTabs?: ToolbarTabsTab[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string;\n  /** Defines the icon to be placed before the label when a new tab is created through the \"Create new\" button. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Whether the tabs are editable or not. Default to `false`. */\n  disableTabEdit?: boolean;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | null,\n  ) => void;\n  /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    tabs: ToolbarTabsTab[],\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarTabsClasses;\n  /** Whether the \"Create new\" button, which enables to create new tabs, is hidden. Defaults to `false`. */\n  hideCreateNew?: boolean;\n}\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasToolbarTabsProps\n>((props, ref) => {\n  const {\n    children,\n    className,\n    selectedTabId: selectedTabIdProp,\n    icon: iconProp,\n    disableTabEdit = false,\n    hideCreateNew = false,\n    tabs: tabsProp,\n    defaultTabs: defaultTabsProp = [],\n    labels: labelsProp,\n    classes: classesProp,\n    onTabChange: onTabChangeProp,\n    onChange: onChangeProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  // Actions resize detector: to know when to use the dropdown menu\n  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Root resize detector: to know when to use the dropdown menu\n  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n  const [selectedTab, setSelectedTab] = useControlled<string | null>(\n    selectedTabIdProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n  const [isEditing, setIsEditing] = useState(false);\n\n  const rootForkedRef = useForkRef(ref, rootRef);\n\n  const handleChangeTabs = (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    newTabs: ToolbarTabsTab[],\n  ) => {\n    setTabs(newTabs);\n    onChangeProp?.(event, newTabs);\n  };\n\n  const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    value,\n  ) => {\n    setSelectedTab(String(value));\n    onTabChangeProp?.(event, String(value));\n  };\n\n  const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n    const newTabs: ToolbarTabsTab[] = [...tabs];\n    const newTab: ToolbarTabsTab = {\n      id: uniqueId(),\n      label: `${labels.undefined} ${newTabs.length + 1}`,\n      icon: iconProp,\n    };\n    newTabs.push(newTab);\n    handleChangeSelectedTab(event, newTab.id);\n    handleChangeTabs?.(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.FormEvent<Element>,\n    value: string,\n    tabId: string,\n  ) =>\n    handleChangeTabs(\n      event,\n      tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n    );\n\n  const handleDeleteTab = (event: any, tabId: string) => {\n    const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n    if (tabId === selectedTab) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n    }\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleKeyDownTab = (\n    event: React.KeyboardEvent,\n    tabId: string,\n    removable: boolean,\n  ) => {\n    if (removable && (isKey(event, \"Delete\") || isKey(event, \"Backspace\"))) {\n      handleDeleteTab(event, tabId);\n\n      // We don't want the click to also select the tab\n      event.stopPropagation();\n    } else if (isKey(event, \"Enter\")) {\n      // Activate edit label mode\n      setIsEditing(true);\n    }\n  };\n\n  const { tabWidth, hiddenTabs, visibleTabs } = useMemo(() => {\n    let availableWidth = rootWidth - actionsWidth;\n    let calculatedTabWidth = availableWidth / tabs.length;\n    let clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n    // Overflowing\n    if (calculatedTabWidth < MIN_TAB_WIDTH) {\n      availableWidth -= DROPDOWN_MENU_WIDTH;\n      const visibleCount = Math.floor(availableWidth / MIN_TAB_WIDTH);\n      calculatedTabWidth = availableWidth / visibleCount;\n      clamped = clamp(calculatedTabWidth, MAX_TAB_WIDTH, MIN_TAB_WIDTH);\n\n      const temporaryHiddenTabs = tabs.slice(visibleCount);\n      const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n        (tab) => tab.id === selectedTab,\n      );\n      const excludedTabIndex = visibleCount - 1;\n      const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n      if (shouldShuffle) {\n        return {\n          tabWidth: clamped,\n          visibleTabs: [\n            ...tabs.slice(0, excludedTabIndex),\n            temporaryHiddenTabs[selectedTabHiddenIndex],\n          ].filter((tab) => tab),\n          hiddenTabs: [\n            tabs[excludedTabIndex],\n            ...temporaryHiddenTabs.filter(\n              (tab, i) => i !== selectedTabHiddenIndex,\n            ),\n          ].filter((tab) => tab),\n        };\n      }\n\n      return {\n        tabWidth: clamped,\n        visibleTabs: tabs.slice(0, visibleCount),\n        hiddenTabs: temporaryHiddenTabs,\n      };\n    }\n\n    return {\n      tabWidth: clamped,\n      visibleTabs: tabs,\n      hiddenTabs: [],\n    };\n  }, [actionsWidth, rootWidth, selectedTab, tabs]);\n\n  return (\n    <div\n      ref={rootForkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <div className={classes.tabsContainer}>\n        {visibleTabs.length > 0 && (\n          <HvCanvasPanelTabs\n            classes={{ list: classes.tabsList }}\n            value={selectedTab}\n            onChange={handleChangeSelectedTab}\n          >\n            {visibleTabs.map((tab, index) => {\n              const btnSelected = selectedTab === tab.id;\n              const removable = !tab.fixed;\n              return (\n                <HvCanvasPanelTab\n                  style={{\n                    width: tabWidth,\n                  }}\n                  key={tab.id}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  onKeyDown={(event) =>\n                    handleKeyDownTab(event, tab.id, removable)\n                  }\n                >\n                  <div className={classes.tabContent}>\n                    {tab.icon && (\n                      <div className={classes.tabIconContainer}>{tab.icon}</div>\n                    )}\n                    {!btnSelected || disableTabEdit ? (\n                      <HvOverflowTooltip\n                        classes={{\n                          tooltipAnchor: classes.tabLabel,\n                        }}\n                        data={tab.label}\n                      />\n                    ) : (\n                      <ToolbarTabEditor\n                        classes={{\n                          label: cx(classes.tabLabel, classes.tabLabelEditor),\n                        }}\n                        value={tab.label}\n                        edit={isEditing}\n                        onEditChange={setIsEditing}\n                        onChange={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        onBlur={(event, value) =>\n                          handleEdit(event, value, tab.id)\n                        }\n                        // We don't want the arrow keys to trigger the tab navigation\n                        onKeyDown={(e) => e.stopPropagation()}\n                      />\n                    )}\n                    {removable && (\n                      <div className={classes.closeIconContainer}>\n                        <CloseXS\n                          aria-hidden\n                          size=\"xs\"\n                          onClick={(event) => {\n                            handleDeleteTab(event, tab.id);\n\n                            // We don't want the click to also select the tab\n                            event.stopPropagation();\n                          }}\n                        />\n                      </div>\n                    )}\n                    {selectedTab !== tab.id &&\n                      visibleTabs[index + 1]?.id !== selectedTab && (\n                        <div className={classes.tabDivider} />\n                      )}\n                  </div>\n                </HvCanvasPanelTab>\n              );\n            })}\n          </HvCanvasPanelTabs>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            classes={{\n              container: classes.dropdownMenuContainer,\n              menuListRoot: classes.dropdownMenuListRoot,\n            }}\n            dataList={hiddenTabs}\n            icon={<MoreOptionsHorizontal />}\n            labels={{ dropdownMenu: labels.dropdownMenu }}\n            onClick={(event, value) =>\n              handleChangeSelectedTab(event, value.id ?? \"none\")\n            }\n          />\n        )}\n      </div>\n      <div ref={actionsRef} className={classes.actionsContainer}>\n        {children}\n        {!hideCreateNew && (\n          <HvButton\n            variant=\"primaryGhost\"\n            startIcon={<AddAlt />}\n            onClick={handleCreateNew}\n          >\n            {labels.create}\n          </HvButton>\n        )}\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { toolbarTabEditorClasses } from \"./ToolbarTabEditor\";\n\nexport const MIN_TAB_WIDTH = 120;\nexport const MAX_TAB_WIDTH = 220;\nexport const DROPDOWN_MENU_WIDTH = 64;\nconst TAB_HEIGHT = 32;\nconst CLOSE_ICON_SIZE = 32;\nconst TAB_ICON_SIZE = 16;\nconst TAB_PADDING = theme.space.xs;\nconst TAB_COLOR = `color-mix(in srgb, ${theme.colors.pp.primaryDimmed} 50%, ${theme.colors.pp.dimmer})`;\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs\",\n  {\n    root: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n      transition: \"width 0.3s ease\",\n      height: TAB_HEIGHT,\n    },\n    tabsContainer: {\n      display: \"flex\",\n    },\n    tabsList: {\n      height: TAB_HEIGHT,\n      background: theme.colors.atmo1,\n      borderEndStartRadius: theme.radii.base,\n    },\n    tab: {\n      boxSizing: \"border-box\",\n      border: `1px solid ${theme.colors.atmo1}`,\n      borderBottom: \"none\",\n      borderRadius: \"10px 10px 0 0\",\n      boxShadow: \"none\",\n      backgroundColor: theme.colors.atmo1,\n      \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n      [`&.${tabClasses.selected}`]: {\n        color: theme.colors.primary,\n        backgroundColor: TAB_COLOR,\n        borderColor: theme.colors.atmo4,\n      },\n      [`&:hover:not(.${tabClasses.selected}), &:focus:not(.${tabClasses.selected})`]:\n        {\n          borderRadius: 0,\n          backgroundColor: TAB_COLOR,\n          borderColor: TAB_COLOR,\n          \"&:first-of-type\": { borderEndStartRadius: theme.radii.base },\n        },\n\n      // Hide icon when editor is hovered and focused\n      [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${toolbarTabEditorClasses.edit}) $tabIconContainer`]:\n        {\n          display: \"none\",\n        },\n      // Hide close when editor is focused\n      [`&:has(.${toolbarTabEditorClasses.edit}) $closeIconContainer`]: {\n        display: \"none\",\n      },\n    },\n    tabLabel: {\n      \"&:not($tabLabelEditor)\": {\n        margin: theme.spacing(0, \"xs\"),\n      },\n    },\n    tabLabelEditor: {\n      color: theme.colors.primary,\n    },\n    tabContent: {\n      position: \"relative\",\n      height: TAB_HEIGHT,\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      width: \"100%\",\n      padding: TAB_PADDING,\n    },\n    tabIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      width: TAB_ICON_SIZE,\n    },\n    closeIconContainer: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      marginLeft: \"auto\",\n      marginRight: theme.spacing(-1),\n      width: CLOSE_ICON_SIZE,\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        borderRadius: theme.radii.circle,\n      },\n    },\n    tabDivider: {\n      position: \"absolute\",\n      height: 18,\n      width: 1,\n      backgroundColor: theme.colors.atmo3,\n      right: 0,\n    },\n    actionsContainer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n      alignItems: \"center\",\n      gap: theme.space.sm,\n    },\n    dropdownMenuContainer: {\n      width: DROPDOWN_MENU_WIDTH,\n      display: \"flex\",\n      justifyContent: \"center\",\n    },\n    dropdownMenuListRoot: {\n      maxHeight: 220,\n    },\n  },\n);\n"],"names":["toolbarTabEditorClasses"],"mappings":"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"}