@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.1

package/esm/tabs-next/hooks/useOverflow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflow.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement | null>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement | null>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\");\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(selectedTab) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        return Math.max(1, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = childArray.slice(0, visibleCount || 1);\n  const hidden = childArray.slice(visibleCount || 1);\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    (child) => child?.props?.value === selected,\n  );\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring] as const;\n  }\n\n  return [visible, hidden, isMeasuring] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":";;;;AAwBA,SAAS,YAAY,OAAsB,EAAA;AACzC,EAAA,MAAM,EAAE,KAAA,EAAU,GAAA,OAAA,CAAQ,qBAAsB,EAAA;AAChD,EAAO,OAAA,IAAA,CAAK,KAAK,KAAK,CAAA;AACxB;AAEO,SAAS,WAAY,CAAA;AAAA,EAC1B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,EAAE,YAAA,EAAc,aAAe,EAAA,eAAe,IAAI,cAAe,CAAA;AAAA,IACtE,cAAc,IAAK,CAAA,MAAA;AAAA,IACnB,WAAa,EAAA;AAAA,GACd,CAAA;AACD,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAM,MAAA,cAAA,GAAiB,iBAAiB,MAAM;AAC5C,IAAM,MAAA,cAAA,GAAiB,CAACA,aAAyB,KAAA;AAC/C,MAAI,IAAA,SAAA,CAAU,WAAW,YAAc,EAAA;AACrC,QAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,UAClB,UAAU,OAAQ,CAAA,gBAAA;AAAA,YAChB;AAAA;AACF,SACF;AACA,QAAM,MAAA,WAAA,GAAc,UAAU,OAAQ,CAAA,aAAA;AAAA,UACpC;AAAA,SACC,EAAA,aAAA;AAEH,QAAI,IAAA,QAAA,GAAW,SAAU,CAAA,OAAA,CAAQ,WAAe,IAAA,CAAA;AAEhD,QAAA,MAAM,kBAAkB,YAAa,CAAA,gBAAA;AAAA,UACnC,SAAU,CAAA;AAAA,SACZ;AACA,QAAA,MAAM,GAAM,GAAA,MAAA,CAAO,QAAS,CAAA,eAAA,CAAgB,OAAO,GAAG,CAAA;AAEtD,QAAA,IAAI,YAAe,GAAA,CAAA;AACnB,QAAA,IAAI,eAAkB,GAAA,CAAA;AAEtB,QAAA,MAAMC,WAAU,EAAC;AAEjB,QAAO,OAAA,eAAA,GAAkB,MAAM,MAAQ,EAAA;AACrC,UAAM,MAAA,OAAA,GAAU,MAAM,eAAe,CAAA;AACrC,UAAA,IAAI,OAAS,EAAA;AACX,YAAA,IAAI,YAAe,GAAA,WAAA,CAAY,OAAO,CAAA,GAAI,MAAM,QAAU,EAAA;AACxD,cAAA;AAAA;AAEF,YAAgB,YAAA,IAAA,WAAA,CAAY,OAAO,CAAI,GAAA,GAAA;AACvC,YAAAA,QAAAA,CAAQ,KAAK,OAAO,CAAA;AAAA;AAEtB,UAAA,eAAA,EAAA;AAAA;AAGF,QAAI,IAAA,eAAA,IAAmB,MAAM,MAAQ,EAAA;AACnC,UAAO,OAAA,eAAA;AAAA;AAGT,QAAA,MAAM,sBAAsB,cAAe,CAAA,OAAA,GACvC,cAAe,CAAA,OAAA,CAAQ,cAAc,GACrC,GAAA,CAAA;AACJ,QAAY,QAAA,IAAA,mBAAA;AAEZ,QAAA,OAAO,eAAe,QAAU,EAAA;AAC9B,UAAM,MAAA,OAAA,GAAUA,SAAQ,GAAI,EAAA;AAC5B,UAAA,IAAI,CAAC,OAAS,EAAA;AACd,UAAgB,YAAA,IAAA,WAAA,CAAY,OAAO,CAAI,GAAA,GAAA;AACvC,UAAA,eAAA,EAAA;AAAA;AAGF,QAAA,IAAI,WAAe,IAAA,CAACA,QAAQ,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACjD,UAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,WAAW,CAAI,GAAA,GAAA;AACpD,UAAO,OAAA,YAAA,GAAe,mBAAmB,QAAU,EAAA;AACjD,YAAM,MAAA,OAAA,GAAUA,SAAQ,GAAI,EAAA;AAC5B,YAAA,IAAI,CAAC,OAAS,EAAA;AACd,YAAgB,YAAA,IAAA,WAAA,CAAY,WAAW,CAAI,GAAA,GAAA;AAC3C,YAAA,eAAA,EAAA;AAAA;AACF;AAGF,QAAO,OAAA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,eAAe,CAAA;AAAA;AAEpC,MAAOD,OAAAA,aAAAA;AAAA,KACT;AAEA,IAAA,eAAA,CAAgB,aAAa;AAE3B,MAAM,MAAA;AAAA,QACJ,cAAc,IAAK,CAAA,MAAA;AAAA,QACnB,WAAa,EAAA;AAAA,OACf;AAGA,MAAM,MAAA,eAAA,GAAkB,cAAe,CAAA,IAAA,CAAK,MAAM,CAAA;AAClD,MAAA,MAAME,YAAc,GAAA,eAAA,GAAkB,IAAK,CAAA,MAAA,IAAU,eAAkB,GAAA,CAAA;AACvE,MAAM,MAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,WAAAA,EAAAA;AAAA,OACF;AAGA,MAAA,IAAIA,YAAa,EAAA;AACf,QAAM,MAAA;AAAA,UACJ,YAAA,EAAc,eAAe,eAAe,CAAA;AAAA,UAC5C,WAAa,EAAA;AAAA,SACf;AAAA;AACF,KACD,CAAA;AAAA,GACF,CAAA;AAGD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAe,cAAA,EAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,SAAW,EAAA,OAAA;AAC3B,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,GAAA,GAAM,YAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAiB,GAAA,IAAI,GAAI,CAAA,cAAA,CAAe,CAAC,OAAY,KAAA;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AAE1B,QAAe,cAAA,EAAA;AAAA,OAChB,CAAA;AAAA,KACF,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAC9B,IAAA,IAAI,QAAQ,aAAe,EAAA;AACzB,MAAe,cAAA,CAAA,OAAA,CAAQ,QAAQ,aAAa,CAAA;AAAA;AAG9C,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA;AAClC,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM,QAAA,CAAS,QAAQ,QAAQ,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AACvE,EAAA,MAAM,OAAU,GAAA,UAAA,CAAW,KAAM,CAAA,CAAA,EAAG,gBAAgB,CAAC,CAAA;AACrD,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,KAAM,CAAA,YAAA,IAAgB,CAAC,CAAA;AAEjD,EAAA,MAAM,sBAAsB,MAAO,CAAA,SAAA;AAAA;AAAA;AAAA,IAGjC,CAAC,KAAA,KAAU,KAAO,EAAA,KAAA,EAAO,KAAU,KAAA;AAAA,GACrC;AAEA,EAAI,IAAA,QAAA,IAAY,wBAAwB,CAAI,CAAA,EAAA;AAC1C,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,MAAO,CAAA,mBAAA,EAAqB,CAAC,CAAA;AACpD,IAAQ,OAAA,CAAA,IAAA,CAAK,OAAQ,CAAA,CAAC,CAAC,CAAA;AAAA;AAGzB,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,OAAO,CAAC,UAAA,EAAY,EAAC,EAAG,WAAW,CAAA;AAAA;AAGrC,EAAO,OAAA,CAAC,OAAS,EAAA,MAAA,EAAQ,WAAW,CAAA;AACtC;;;;"}

package/esm/tabstrip/Tab.css.js

@@ -1,4 +0,0 @@
-var tabCss = "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 2px;\n\n  --tab-background: var(--vuuTab-background, transparent);\n  --tab-cursor: pointer;\n  --tab-position: relative;\n\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border-color: var(--vuuTab-borderColor, transparent);\n  border-style: var(--vuuTab-borderStyle, none);\n  border-width: var(--vuuTab-borderWidth, 0px);\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTabHeight, var(--tab-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  margin: 0 var(--tab-spacing) 0 0;\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width);\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  outline: none;\n  position: relative;\n}\n\n.vuuTabstrip.vuuOrientation-horizontal {\n  .vuuTab-main {\n    height: calc(var(--tab-height) - var(--tab-thumb-height));\n    margin-bottom: var(--tab-thumb-height);\n  }\n}\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-text {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  line-height: var(--tab-height);\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.vuuTab.vuuFocusVisible {\n  background: var(\n    --vuuTab-hover-background,\n    var(--salt-navigable-primary-background-hover)\n  );\n  outline-color: var(\n    --vuuTab-focusVisible-color,\n    var(--salt-focused-outlineColor)\n  );\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px;\n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {\n  background: var(\n    --vuuTab-hover-background,\n    var(--salt-navigable-primary-background-hover)\n  );\n}\n";
-
-export { tabCss as default };
-//# sourceMappingURL=Tab.css.js.map

package/esm/tabstrip/Tab.css.js.map

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

package/esm/tabstrip/Tab.js

@@ -1,151 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useForkRef } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { forwardRef, useRef, useCallback } from 'react';
-import { EditableLabel } from '../editable-label/EditableLabel.js';
-import { TabMenu } from './TabMenu.js';
-import tabCss from './Tab.css.js';
-
-const classBase = "vuuTab";
-const noop = () => void 0;
-const Tab = forwardRef(function Tab2({
-  ariaControls,
-  children,
-  className,
-  closeable = false,
-  dragging,
-  editable = false,
-  editing,
-  focusVisible,
-  index = -1,
-  label,
-  location,
-  onClick,
-  onClose,
-  onEnterEditMode = noop,
-  onExitEditMode = noop,
-  onFocus: onFocusProp,
-  onKeyUp,
-  onMenuAction,
-  onMenuClose,
-  orientation,
-  selected,
-  showMenuButton = closeable || editable || Boolean(location),
-  tabIndex,
-  ...props
-}, ref) {
-  if (showMenuButton && typeof onMenuAction !== "function") {
-    throw Error("Tab onMenuAction must be provided if showMenuButton is set");
-  }
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-tabstrip-tab",
-    css: tabCss,
-    window: targetWindow
-  });
-  const rootRef = useRef(null);
-  const editableRef = useRef(null);
-  const setForkRef = useForkRef(ref, rootRef);
-  const handleClick = useCallback(
-    (e) => {
-      if (!editing) {
-        e.preventDefault();
-        onClick?.(e, index);
-      }
-    },
-    [editing, index, onClick]
-  );
-  const handleOnExitEditMode = (originalValue = "", editedValue = "", allowDeactivation = true) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);
-  const handleKeyUp = (e) => {
-    switch (e.key) {
-      case "Backspace":
-      case "Delete":
-        if (closeable) {
-          e.stopPropagation();
-          onClose && onClose(index);
-        }
-        break;
-      default:
-        onKeyUp && onKeyUp(e, index);
-    }
-  };
-  const getLabel = () => {
-    if (editable) {
-      return /* @__PURE__ */ jsx(
-        EditableLabel,
-        {
-          "data-embedded": true,
-          editing,
-          defaultValue: label,
-          onEnterEditMode,
-          onExitEditMode: handleOnExitEditMode,
-          ref: editableRef
-        },
-        label
-      );
-    } else {
-      return label;
-    }
-  };
-  const handleFocus = (evt) => {
-    if (editableRef.current) {
-      const editable2 = editableRef.current;
-      const input = editable2.querySelector(
-        ".vuuEditableLabel-input"
-      );
-      input?.focus();
-    }
-    onFocusProp?.(evt);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...props,
-      "aria-controls": ariaControls,
-      "aria-label": label,
-      "aria-selected": selected,
-      className: cx(classBase, className, {
-        [`${classBase}-closeable`]: closeable,
-        "vuuDraggable-dragAway": dragging,
-        [`${classBase}-editing`]: editing,
-        [`${classBase}-selected`]: selected || void 0,
-        [`${classBase}-vertical`]: orientation === "vertical",
-        [`vuuFocusVisible`]: focusVisible
-      }),
-      onClick: handleClick,
-      onFocus: handleFocus,
-      onKeyUp: handleKeyUp,
-      ref: setForkRef,
-      role: "tab",
-      tabIndex,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `${classBase}-text`,
-            "data-text": editable ? void 0 : label,
-            children: children ?? getLabel()
-          }
-        ) }),
-        showMenuButton ? /* @__PURE__ */ jsx(
-          TabMenu,
-          {
-            allowClose: closeable,
-            allowRename: editable,
-            controlledComponentId: ariaControls,
-            controlledComponentTitle: label,
-            location,
-            onMenuAction,
-            onMenuClose,
-            index
-          }
-        ) : null
-      ]
-    }
-  );
-});
-
-export { Tab };
-//# sourceMappingURL=Tab.js.map

package/esm/tabstrip/Tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabMenu } from \"./TabMenu\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTab\";\n\nconst noop = () => undefined;\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable = false,\n    dragging,\n    editable = false,\n    editing,\n    focusVisible,\n    index = -1,\n    label,\n    location,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyUp,\n    onMenuAction,\n    onMenuClose,\n    orientation,\n    selected,\n    showMenuButton = closeable || editable || Boolean(location),\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n): ReactElement<TabProps> {\n  if (showMenuButton && typeof onMenuAction !== \"function\") {\n    throw Error(\"Tab onMenuAction must be provided if showMenuButton is set\");\n  }\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, rootRef);\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick?.(e, index);\n      }\n    },\n    [editing, index, onClick],\n  );\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true,\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          data-embedded\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".vuuEditableLabel-input\",\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-label={label}\n      aria-selected={selected}\n      className={cx(classBase, className, {\n        [`${classBase}-closeable`]: closeable,\n        \"vuuDraggable-dragAway\": dragging,\n        [`${classBase}-editing`]: editing,\n        [`${classBase}-selected`]: selected || undefined,\n        [`${classBase}-vertical`]: orientation === \"vertical\",\n        [`vuuFocusVisible`]: focusVisible,\n      })}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyUp={handleKeyUp}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={`${classBase}-main`}>\n        <span\n          className={`${classBase}-text`}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {showMenuButton ? (\n        <TabMenu\n          allowClose={closeable}\n          allowRename={editable}\n          controlledComponentId={ariaControls}\n          controlledComponentTitle={label}\n          location={location}\n          onMenuAction={onMenuAction as MenuActionHandler}\n          onMenuClose={onMenuClose}\n          index={index}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","editable"],"mappings":"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"}

package/esm/tabstrip/TabMenu.css.js

@@ -1,4 +0,0 @@
-var tabMenuCss = ".vuuTabMenu {\n    top: var(--vuuTabMenu-top, 0px);\n}";
-
-export { tabMenuCss as default };
-//# sourceMappingURL=TabMenu.css.js.map

package/esm/tabstrip/TabMenu.css.js.map

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

package/esm/tabstrip/TabMenu.js

@@ -1,70 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { PopupMenu } from '@vuu-ui/vuu-popups';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { useMemo } from 'react';
-import { renameCommand, closeCommand } from './TabMenuOptions.js';
-import tabMenuCss from './TabMenu.css.js';
-
-const classBase = "vuuTabMenu";
-const TabMenu = ({
-  allowClose,
-  allowRename,
-  controlledComponentId,
-  controlledComponentTitle,
-  location,
-  onMenuAction,
-  onMenuClose,
-  index
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-tab-menu",
-    css: tabMenuCss,
-    window: targetWindow
-  });
-  const [menuBuilder, menuOptions] = useMemo(
-    () => [
-      (_location, options) => {
-        const menuItems = [];
-        if (allowRename) {
-          menuItems.push(renameCommand(options));
-        }
-        if (allowClose) {
-          menuItems.push(closeCommand(options));
-        }
-        return menuItems;
-      },
-      {
-        controlledComponentId,
-        controlledComponentTitle,
-        tabIndex: index
-      }
-    ],
-    [
-      allowClose,
-      allowRename,
-      controlledComponentId,
-      controlledComponentTitle,
-      index
-    ]
-  );
-  return /* @__PURE__ */ jsx(
-    PopupMenu,
-    {
-      "aria-label": "context menu",
-      className: classBase,
-      "data-embedded": true,
-      menuBuilder,
-      menuActionHandler: onMenuAction,
-      menuLocation: cx("tab", location),
-      menuOptions,
-      onMenuClose,
-      tabIndex: -1
-    }
-  );
-};
-
-export { TabMenu };
-//# sourceMappingURL=TabMenu.js.map

package/esm/tabstrip/TabMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabMenu.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx"],"sourcesContent":["import { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { MenuOptions, closeCommand, renameCommand } from \"./TabMenuOptions\";\n\nimport tabMenuCss from \"./TabMenu.css\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuTabMenu\";\n\nexport type TabContextMenuOptions = {\n  controlledComponentId?: string;\n  controlledComponentTitle?: string;\n  tabIndex: number;\n};\n\nexport interface TabMenuProps {\n  allowClose: boolean;\n  allowRename: boolean;\n  index: number;\n  location?: string;\n  onMenuAction: MenuActionHandler;\n  onMenuClose?: () => void;\n  /**\n   * The id of associated component, if available\n   */\n  controlledComponentId?: string;\n  /**\n   * The label of Tab, if available\n   */\n  controlledComponentTitle?: string;\n}\n\nexport const TabMenu = ({\n  allowClose,\n  allowRename,\n  controlledComponentId,\n  controlledComponentTitle,\n  location,\n  onMenuAction,\n  onMenuClose,\n  index,\n}: TabMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tab-menu\",\n    css: tabMenuCss,\n    window: targetWindow,\n  });\n\n  const [menuBuilder, menuOptions] = useMemo(\n    (): [MenuBuilder, TabContextMenuOptions] => [\n      (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n      {\n        controlledComponentId,\n        controlledComponentTitle,\n        tabIndex: index,\n      },\n    ],\n    [\n      allowClose,\n      allowRename,\n      controlledComponentId,\n      controlledComponentTitle,\n      index,\n    ],\n  );\n\n  return (\n    <PopupMenu\n      aria-label=\"context menu\"\n      className={classBase}\n      data-embedded\n      menuBuilder={menuBuilder}\n      menuActionHandler={onMenuAction}\n      menuLocation={cx(\"tab\", location)}\n      menuOptions={menuOptions}\n      onMenuClose={onMenuClose}\n      tabIndex={-1}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,YAAA;AAyBX,MAAM,UAAU,CAAC;AAAA,EACtB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,qBAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAoB,KAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAA,OAAA;AAAA,IACjC,MAA4C;AAAA,MAC1C,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAK,aAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAK,YAAa,CAAA,OAAsB,CAAC,CAAA;AAAA;AAErD,QAAO,OAAA,SAAA;AAAA,OACT;AAAA,MACA;AAAA,QACE,qBAAA;AAAA,QACA,wBAAA;AAAA,QACA,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,cAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAA;AAAA,MACA,iBAAmB,EAAA,YAAA;AAAA,MACnB,YAAA,EAAc,EAAG,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA,MAChC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}

package/esm/tabstrip/TabMenuOptions.js

@@ -1,16 +0,0 @@
-const isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
-const closeCommand = (options) => ({
-  label: `Close`,
-  location: "tab",
-  id: `close-tab`,
-  options
-});
-const renameCommand = (options) => ({
-  label: `Rename`,
-  location: "tab",
-  id: `rename-tab`,
-  options
-});
-
-export { closeCommand, isTabMenuOptions, renameCommand };
-//# sourceMappingURL=TabMenuOptions.js.map

package/esm/tabstrip/TabMenuOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabMenuOptions.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/TabMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface TabMenuOptions {\n  tabIndex: number;\n}\n\nexport const isTabMenuOptions = (options: unknown): options is TabMenuOptions =>\n  typeof options === \"object\" &&\n  options !== null &&\n  \"tabIndex\" in options &&\n  typeof options.tabIndex === \"number\";\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"tab\",\n    id: `close-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"tab\",\n    id: `rename-tab`,\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":"AAQO,MAAM,gBAAmB,GAAA,CAAC,OAC/B,KAAA,OAAO,OAAY,KAAA,QAAA,IACnB,OAAY,KAAA,IAAA,IACZ,UAAc,IAAA,OAAA,IACd,OAAO,OAAA,CAAQ,QAAa,KAAA;AAEjB,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,SAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,KAAA;AAAA,EACV,EAAI,EAAA,CAAA,UAAA,CAAA;AAAA,EACJ;AACF,CAAA;;;;"}

package/esm/tabstrip/Tabstrip.css.js

@@ -1,4 +0,0 @@
-var tabstripCss = "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);\n  --vuuOverflowContainer-width: var(--tabstrip-width);\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  display: flex;\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  min-width: 28px;\n  position: relative;\n  overflow: visible;\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip.vuuOrientation-horizontal {\n  --vuuOverflowContainer-borderStyle: none none solid none;\n  --vuuOverflowContainer-borderBottomWidth: 1px;\n\n  --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-height: var(--tabstrip-height);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  /* border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor)); */\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip.vuuOrientation-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-height: 50px;\n  --tab-width: 100%;\n  --tab-thumb-height: 0;\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-subtle-background-active);\n  --saltButton-text-color: var(--salt-actionable-subtle-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n  --overflow-item-height: var(--tabstrip-height);\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: 0px;\n  --tabstrip-display: inline-flex;\n  --tabstrip-height: 28px;\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
-
-export { tabstripCss as default };
-//# sourceMappingURL=Tabstrip.css.js.map

package/esm/tabstrip/Tabstrip.css.js.map

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

package/esm/tabstrip/Tabstrip.js

@@ -1,158 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useRef, useMemo, createElement } from 'react';
-import { useId, asReactElements } from '@vuu-ui/vuu-utils';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { useTabstrip } from './useTabstrip.js';
-import { IconButton } from '../icon-button/IconButton.js';
-import { OverflowContainer } from '../overflow-container/OverflowContainer.js';
-import tabstripCss from './Tabstrip.css.js';
-
-const classBase = "vuuTabstrip";
-const Tabstrip = ({
-  activeTabIndex: activeTabIndexProp,
-  allowAddTab,
-  allowCloseTab,
-  allowDragDrop = false,
-  allowRenameTab = false,
-  animateSelectionThumb = false,
-  children,
-  className: classNameProp,
-  id: idProp,
-  keyBoardActivation = "manual",
-  location,
-  onActiveChange,
-  onAddTab,
-  onCloseTab,
-  onExitEditMode,
-  onMoveTab,
-  orientation = "horizontal",
-  showTabMenuButton,
-  style: styleProp,
-  tabClassName,
-  variant = "secondary",
-  ...htmlAttributes
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-tabstrip",
-    css: tabstripCss,
-    window: targetWindow
-  });
-  const rootRef = useRef(null);
-  const {
-    activeTabIndex,
-    containerStyle,
-    focusVisible,
-    draggedItemIndex,
-    onClickAddTab,
-    interactedTabState,
-    tabProps,
-    ...tabstripHook
-  } = useTabstrip({
-    activeTabIndex: activeTabIndexProp,
-    allowDragDrop,
-    animateSelectionThumb,
-    containerRef: rootRef,
-    keyBoardActivation,
-    onActiveChange,
-    onAddTab,
-    onCloseTab,
-    onExitEditMode,
-    onMoveTab,
-    orientation
-  });
-  const id = useId(idProp);
-  const className = cx(classBase, classNameProp);
-  const style = styleProp || containerStyle ? {
-    ...styleProp,
-    ...containerStyle
-  } : void 0;
-  const tabs = useMemo(
-    () => asReactElements(children).map((child, index) => {
-      const {
-        id: tabId = `${id}-tab-${index}`,
-        className: className2,
-        closeable = allowCloseTab,
-        editable = allowRenameTab,
-        location: tabLocation,
-        showMenuButton = showTabMenuButton
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } = child.props;
-      const selected = index === activeTabIndex;
-      return React.cloneElement(child, {
-        ...tabProps,
-        ...tabstripHook.navigationProps,
-        className: cx(className2, tabClassName),
-        closeable,
-        "data-overflow-priority": selected ? "1" : void 0,
-        dragging: draggedItemIndex === index,
-        editable,
-        editing: interactedTabState?.index === index,
-        focusVisible: focusVisible === index,
-        id: tabId,
-        index,
-        key: index,
-        location: cx(location, tabLocation),
-        selected,
-        showMenuButton,
-        tabIndex: selected ? 0 : -1
-      });
-    }).concat(
-      allowAddTab ? /* @__PURE__ */ createElement(
-        IconButton,
-        {
-          ...tabstripHook.navigationProps,
-          "aria-label": "Create Tab",
-          className: `${classBase}-addTabButton`,
-          "data-embedded": true,
-          icon: "add",
-          "data-overflow-priority": "1",
-          key: "addButton",
-          onClick: onClickAddTab,
-          variant: "secondary",
-          tabIndex: -1
-        }
-      ) : []
-    ),
-    [
-      children,
-      allowAddTab,
-      tabstripHook.navigationProps,
-      onClickAddTab,
-      id,
-      allowCloseTab,
-      allowRenameTab,
-      showTabMenuButton,
-      activeTabIndex,
-      tabProps,
-      tabClassName,
-      draggedItemIndex,
-      interactedTabState,
-      focusVisible,
-      location
-    ]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      OverflowContainer,
-      {
-        ...htmlAttributes,
-        ...tabstripHook.containerProps,
-        className: cx(className, `${classBase}-${variant}`),
-        id,
-        orientation,
-        overflowIcon: "more-horiz",
-        ref: rootRef,
-        style,
-        role: "tablist",
-        children: tabs
-      }
-    ),
-    tabstripHook.draggable
-  ] });
-};
-
-export { Tabstrip };
-//# sourceMappingURL=Tabstrip.js.map

package/esm/tabstrip/Tabstrip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabstrip.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx"],"sourcesContent":["import { asReactElements, useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, { useMemo, useRef } from \"react\";\nimport { TabProps, TabstripProps } from \"./TabsTypes\";\nimport { useTabstrip } from \"./useTabstrip\";\nimport { IconButton } from \"../icon-button\";\nimport { OverflowContainer } from \"../overflow-container\";\n\nimport tabstripCss from \"./Tabstrip.css\";\n\nconst classBase = \"vuuTabstrip\";\n\nexport const Tabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowAddTab,\n  allowCloseTab,\n  allowDragDrop = false,\n  allowRenameTab = false,\n  animateSelectionThumb = false,\n  children,\n  className: classNameProp,\n  id: idProp,\n  keyBoardActivation = \"manual\",\n  location,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation = \"horizontal\",\n  showTabMenuButton,\n  style: styleProp,\n  tabClassName,\n  variant = \"secondary\",\n  ...htmlAttributes\n}: TabstripProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabstrip\",\n    css: tabstripCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const {\n    activeTabIndex,\n    containerStyle,\n    focusVisible,\n    draggedItemIndex,\n    onClickAddTab,\n    interactedTabState,\n    tabProps,\n    ...tabstripHook\n  } = useTabstrip({\n    activeTabIndex: activeTabIndexProp,\n    allowDragDrop,\n    animateSelectionThumb,\n    containerRef: rootRef,\n    keyBoardActivation,\n    onActiveChange,\n    onAddTab,\n    onCloseTab,\n    onExitEditMode,\n    onMoveTab,\n    orientation,\n  });\n  const id = useId(idProp);\n  const className = cx(classBase, classNameProp);\n  const style =\n    styleProp || containerStyle\n      ? {\n          ...styleProp,\n          ...containerStyle,\n        }\n      : undefined;\n\n  const tabs = useMemo(\n    () =>\n      asReactElements(children)\n        .map((child, index) => {\n          const {\n            id: tabId = `${id}-tab-${index}`,\n            className,\n            closeable = allowCloseTab,\n            editable = allowRenameTab,\n            location: tabLocation,\n            showMenuButton = showTabMenuButton,\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          } = child.props as any;\n          const selected = index === activeTabIndex;\n          return React.cloneElement(child, {\n            ...tabProps,\n            ...tabstripHook.navigationProps,\n            className: cx(className, tabClassName),\n            closeable,\n            \"data-overflow-priority\": selected ? \"1\" : undefined,\n            dragging: draggedItemIndex === index,\n            editable,\n            editing: interactedTabState?.index === index,\n            focusVisible: focusVisible === index,\n            id: tabId,\n            index,\n            key: index,\n            location: cx(location, tabLocation),\n            selected,\n            showMenuButton,\n            tabIndex: selected ? 0 : -1,\n          } as Partial<TabProps>);\n        })\n        .concat(\n          allowAddTab ? (\n            <IconButton\n              {...tabstripHook.navigationProps}\n              aria-label=\"Create Tab\"\n              className={`${classBase}-addTabButton`}\n              data-embedded\n              icon=\"add\"\n              data-overflow-priority=\"1\"\n              key=\"addButton\"\n              onClick={onClickAddTab}\n              variant=\"secondary\"\n              tabIndex={-1}\n            />\n          ) : (\n            []\n          ),\n        ),\n    [\n      children,\n      allowAddTab,\n      tabstripHook.navigationProps,\n      onClickAddTab,\n      id,\n      allowCloseTab,\n      allowRenameTab,\n      showTabMenuButton,\n      activeTabIndex,\n      tabProps,\n      tabClassName,\n      draggedItemIndex,\n      interactedTabState,\n      focusVisible,\n      location,\n    ],\n  );\n\n  return (\n    <>\n      <OverflowContainer\n        {...htmlAttributes}\n        {...tabstripHook.containerProps}\n        className={cx(className, `${classBase}-${variant}`)}\n        id={id}\n        orientation={orientation}\n        overflowIcon=\"more-horiz\"\n        ref={rootRef}\n        style={style}\n        role=\"tablist\"\n      >\n        {tabs}\n      </OverflowContainer>\n      {tabstripHook.draggable}\n    </>\n  );\n};\n"],"names":["className"],"mappings":"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"}

package/esm/tabstrip/tabstrip-dom-utils.js

@@ -1,16 +0,0 @@
-import { getElementDataIndex } from '@vuu-ui/vuu-utils';
-
-const getIndexOfItem = (container, query) => {
-  if (container) {
-    const targetTab = container.querySelector(
-      `[data-index]:has(${query})`
-    );
-    return getElementDataIndex(targetTab);
-  }
-  return -1;
-};
-const getIndexOfSelectedTab = (container) => getIndexOfItem(container, '[aria-selected="true"]');
-const getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
-
-export { getIndexOfEditedItem, getIndexOfSelectedTab };
-//# sourceMappingURL=tabstrip-dom-utils.js.map

package/esm/tabstrip/tabstrip-dom-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabstrip-dom-utils.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/tabstrip-dom-utils.ts"],"sourcesContent":["import { getElementDataIndex } from \"@vuu-ui/vuu-utils\";\n\nconst getIndexOfItem = (container: HTMLElement | null, query: string) => {\n  if (container) {\n    const targetTab = container.querySelector(\n      `[data-index]:has(${query})`,\n    ) as HTMLElement;\n    return getElementDataIndex(targetTab);\n  }\n  return -1;\n};\n\nexport const getIndexOfSelectedTab = (container: HTMLElement | null) =>\n  getIndexOfItem(container, '[aria-selected=\"true\"]');\n\nexport const getIndexOfEditedItem = (container: HTMLElement | null) =>\n  getIndexOfItem(container, \".vuuEditableLabel-editing\");\n"],"names":[],"mappings":";;AAEA,MAAM,cAAA,GAAiB,CAAC,SAAA,EAA+B,KAAkB,KAAA;AACvE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,MAAM,YAAY,SAAU,CAAA,aAAA;AAAA,MAC1B,oBAAoB,KAAK,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,OAAO,oBAAoB,SAAS,CAAA;AAAA;AAEtC,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,SACpC,KAAA,cAAA,CAAe,WAAW,wBAAwB;AAE7C,MAAM,oBAAuB,GAAA,CAAC,SACnC,KAAA,cAAA,CAAe,WAAW,2BAA2B;;;;"}

package/esm/tabstrip/useAnimatedSelectionThumb.js

@@ -1,83 +0,0 @@
-import { MEASURES, isValidNumber } from '@vuu-ui/vuu-utils';
-import { useRef, useCallback, useMemo } from 'react';
-
-const useAnimatedSelectionThumb = (containerRef, activeTabIndex, orientation = "horizontal") => {
-  const animationSuspendedRef = useRef(false);
-  const suspendAnimation = useCallback(() => {
-    animationSuspendedRef.current = true;
-  }, []);
-  const resumeAnimation = useCallback(() => {
-    animationSuspendedRef.current = false;
-  }, []);
-  const onTransitionEnd = useCallback(() => {
-    containerRef.current?.style.setProperty("--tab-thumb-transition", "none");
-    containerRef.current?.removeEventListener("transitionend", onTransitionEnd);
-  }, [containerRef]);
-  const lastSelectedRef = useRef(-1);
-  return useMemo(() => {
-    let offset = 0;
-    let size = 0;
-    if (lastSelectedRef.current !== -1) {
-      const oldSelected = containerRef.current?.querySelector(".vuuTab-selected");
-      const newSelected = containerRef.current?.querySelector(
-        `[data-index="${activeTabIndex}"] .vuuTab`
-      );
-      const { positionProp, sizeProp } = MEASURES[orientation];
-      if (oldSelected && newSelected && !animationSuspendedRef.current) {
-        const { [positionProp]: oldPosition, [sizeProp]: oldSize } = oldSelected.getBoundingClientRect();
-        const { [positionProp]: newPosition } = newSelected.getBoundingClientRect();
-        if (isValidNumber(oldPosition) && isValidNumber(newPosition) && isValidNumber(oldSize)) {
-          offset = oldPosition - newPosition;
-          size = oldSize;
-          const speed = orientation === "horizontal" ? 1100 : 700;
-          const duration = Math.abs(offset / speed);
-          requestAnimationFrame(() => {
-            containerRef.current?.style.setProperty(
-              "--tab-thumb-offset",
-              "0px"
-            );
-            containerRef.current?.style.setProperty("--tab-thumb-size", "100%");
-            containerRef.current?.style.setProperty(
-              "--tab-thumb-transition",
-              `all ${duration}s ease`
-            );
-            containerRef.current?.addEventListener(
-              "transitionend",
-              onTransitionEnd
-            );
-          });
-        }
-      }
-    }
-    lastSelectedRef.current = activeTabIndex;
-    if (animationSuspendedRef.current) {
-      return {
-        containerStyle: {
-          "--tab-thumb-offset": "0px",
-          "--tab-thumb-size": "100%"
-        },
-        resumeAnimation,
-        suspendAnimation
-      };
-    } else {
-      return {
-        containerStyle: {
-          "--tab-thumb-offset": `${offset}px`,
-          "--tab-thumb-size": size ? `${size}px` : void 0
-        },
-        resumeAnimation,
-        suspendAnimation
-      };
-    }
-  }, [
-    activeTabIndex,
-    containerRef,
-    orientation,
-    onTransitionEnd,
-    resumeAnimation,
-    suspendAnimation
-  ]);
-};
-
-export { useAnimatedSelectionThumb };
-//# sourceMappingURL=useAnimatedSelectionThumb.js.map

package/esm/tabstrip/useAnimatedSelectionThumb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnimatedSelectionThumb.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/useAnimatedSelectionThumb.ts"],"sourcesContent":["import { isValidNumber, MEASURES, orientationType } from \"@vuu-ui/vuu-utils\";\nimport { CSSProperties, RefObject, useCallback, useMemo, useRef } from \"react\";\n\nexport const useAnimatedSelectionThumb = (\n  containerRef: RefObject<HTMLElement | null>,\n  activeTabIndex: number,\n  orientation: orientationType = \"horizontal\",\n) => {\n  const animationSuspendedRef = useRef(false);\n  const suspendAnimation = useCallback(() => {\n    animationSuspendedRef.current = true;\n  }, []);\n\n  const resumeAnimation = useCallback(() => {\n    animationSuspendedRef.current = false;\n  }, []);\n\n  const onTransitionEnd = useCallback(() => {\n    containerRef.current?.style.setProperty(\"--tab-thumb-transition\", \"none\");\n    containerRef.current?.removeEventListener(\"transitionend\", onTransitionEnd);\n  }, [containerRef]);\n  const lastSelectedRef = useRef(-1);\n  return useMemo(() => {\n    let offset = 0;\n    let size = 0;\n    if (lastSelectedRef.current !== -1) {\n      const oldSelected =\n        containerRef.current?.querySelector(\".vuuTab-selected\");\n      const newSelected = containerRef.current?.querySelector(\n        `[data-index=\"${activeTabIndex}\"] .vuuTab`,\n      );\n      const { positionProp, sizeProp } = MEASURES[orientation];\n      if (oldSelected && newSelected && !animationSuspendedRef.current) {\n        const { [positionProp]: oldPosition, [sizeProp]: oldSize } =\n          oldSelected.getBoundingClientRect();\n        const { [positionProp]: newPosition } =\n          newSelected.getBoundingClientRect();\n        if (\n          isValidNumber(oldPosition) &&\n          isValidNumber(newPosition) &&\n          isValidNumber(oldSize)\n        ) {\n          offset = oldPosition - newPosition;\n          size = oldSize;\n          const speed = orientation === \"horizontal\" ? 1100 : 700;\n          const duration = Math.abs(offset / speed);\n          requestAnimationFrame(() => {\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-offset\",\n              \"0px\",\n            );\n            containerRef.current?.style.setProperty(\"--tab-thumb-size\", \"100%\");\n            containerRef.current?.style.setProperty(\n              \"--tab-thumb-transition\",\n              `all ${duration}s ease`,\n            );\n            containerRef.current?.addEventListener(\n              \"transitionend\",\n              onTransitionEnd,\n            );\n          });\n        }\n      }\n    }\n    lastSelectedRef.current = activeTabIndex;\n    if (animationSuspendedRef.current) {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": \"0px\",\n          \"--tab-thumb-size\": \"100%\",\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    } else {\n      return {\n        containerStyle: {\n          \"--tab-thumb-offset\": `${offset}px`,\n          \"--tab-thumb-size\": size ? `${size}px` : undefined,\n        } as CSSProperties,\n        resumeAnimation,\n        suspendAnimation,\n      };\n    }\n  }, [\n    activeTabIndex,\n    containerRef,\n    orientation,\n    onTransitionEnd,\n    resumeAnimation,\n    suspendAnimation,\n  ]);\n};\n"],"names":[],"mappings":"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"}