@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/tabs-next/hooks/useCollection.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+
+function sortBasedOnDOMPosition(items) {
+  const indexedItems = items.map((item, index) => [index, item]);
+  let orderChanged = false;
+  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {
+    const itemAElement = itemA.element;
+    const itemBElement = itemB.element;
+    if (itemAElement === itemBElement) return 0;
+    if (!itemAElement || !itemBElement) return 0;
+    if (itemAElement.compareDocumentPosition(itemBElement) & Node.DOCUMENT_POSITION_FOLLOWING) {
+      if (itemAIndex > itemBIndex) {
+        orderChanged = true;
+      }
+      return -1;
+    }
+    if (itemAIndex < itemBIndex) {
+      orderChanged = true;
+    }
+    return 1;
+  });
+  if (orderChanged) {
+    return indexedItems.map(([_, item]) => item);
+  }
+  return items;
+}
+function useCollection({ wrap }) {
+  const [items, setItems] = React.useState([]);
+  const itemsRef = React.useRef([]);
+  const itemMap = React.useRef(/* @__PURE__ */ new Map());
+  const registerItem = React.useCallback((item) => {
+    setItems((old) => {
+      const newItems = old.slice();
+      const index = newItems.findIndex(({ id }) => id === item.id);
+      if (index !== -1) {
+        const newItem = { ...newItems[index], ...item };
+        newItems[index] = newItem;
+        itemMap.current.set(item.id, newItem);
+      } else {
+        newItems.push(item);
+        itemMap.current.set(item.id, item);
+      }
+      const value = sortBasedOnDOMPosition(newItems);
+      itemsRef.current = value;
+      return value;
+    });
+    return () => {
+      setItems((old) => {
+        itemMap.current.delete(item.id);
+        return old.filter(({ id }) => id !== item.id);
+      });
+      return itemsRef;
+    };
+  }, []);
+  return {
+    registerItem,
+    item: (id) => {
+      if (!id) return null;
+      let item = itemMap.current.get(id);
+      if (!item) {
+        item = items.find((item2) => item2.id === id);
+        if (item) {
+          itemMap.current.set(item.id, item);
+        }
+      }
+      return item ?? null;
+    },
+    getNext: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = wrap ? (index + 1) % items.length : Math.min(index + 1, items.length - 1);
+      return items[newIndex] ?? null;
+    },
+    getPrevious: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = wrap ? (index - 1 + items.length) % items.length : Math.max(index - 1, 0);
+      return items[newIndex] ?? null;
+    },
+    getFirst: () => {
+      return items[0] ?? null;
+    },
+    getLast: () => {
+      return items[items.length - 1] ?? null;
+    },
+    items
+  };
+}
+
+exports.useCollection = useCollection;
+//# sourceMappingURL=useCollection.js.map

package/cjs/tabs-next/hooks/useCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollection.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useCollection.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nexport interface Item {\n  id: string;\n  element?: HTMLElement | null;\n  value: string;\n}\n\nfunction sortBasedOnDOMPosition(items: Item[]): Item[] {\n  const indexedItems = items.map((item, index) => [index, item] as const);\n  let orderChanged = false;\n  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {\n    const itemAElement = itemA.element;\n    const itemBElement = itemB.element;\n    if (itemAElement === itemBElement) return 0;\n    if (!itemAElement || !itemBElement) return 0;\n\n    if (\n      itemAElement.compareDocumentPosition(itemBElement) &\n      Node.DOCUMENT_POSITION_FOLLOWING\n    ) {\n      if (itemAIndex > itemBIndex) {\n        orderChanged = true;\n      }\n      return -1;\n    }\n\n    if (itemAIndex < itemBIndex) {\n      orderChanged = true;\n    }\n    return 1;\n  });\n\n  if (orderChanged) {\n    return indexedItems.map(([_, item]) => item);\n  }\n  return items;\n}\n\ninterface UseCollectionProps {\n  wrap: boolean;\n}\n\nexport function useCollection({ wrap }: UseCollectionProps) {\n  const [items, setItems] = useState<Item[]>([]);\n  const itemsRef = useRef<Item[]>([]);\n  const itemMap = useRef<Map<string, Item>>(new Map());\n\n  const registerItem = useCallback((item: Item) => {\n    setItems((old) => {\n      const newItems = old.slice();\n      const index = newItems.findIndex(({ id }) => id === item.id);\n      if (index !== -1) {\n        const newItem = { ...newItems[index], ...item };\n        newItems[index] = newItem;\n        itemMap.current.set(item.id, newItem);\n      } else {\n        newItems.push(item);\n        itemMap.current.set(item.id, item);\n      }\n      const value = sortBasedOnDOMPosition(newItems);\n      itemsRef.current = value;\n      return value;\n    });\n\n    return () => {\n      setItems((old) => {\n        itemMap.current.delete(item.id);\n        return old.filter(({ id }) => id !== item.id);\n      });\n      return itemsRef;\n    };\n  }, []);\n\n  return {\n    registerItem,\n    item: (id?: string | null): Item | null => {\n      if (!id) return null;\n      let item = itemMap.current.get(id);\n      if (!item) {\n        item = items.find((item) => item.id === id);\n        if (item) {\n          itemMap.current.set(item.id, item);\n        }\n      }\n      return item ?? null;\n    },\n    getNext: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index + 1) % items.length\n        : Math.min(index + 1, items.length - 1);\n\n      return items[newIndex] ?? null;\n    },\n    getPrevious: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index - 1 + items.length) % items.length\n        : Math.max(index - 1, 0);\n\n      return items[newIndex] ?? null;\n    },\n    getFirst: (): Item | null => {\n      return items[0] ?? null;\n    },\n    getLast: (): Item | null => {\n      return items[items.length - 1] ?? null;\n    },\n    items,\n  };\n}\n"],"names":["useState","useRef","useCallback","item"],"mappings":"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"}

package/cjs/tabs-next/hooks/useFocusOutside.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var window = require('@salt-ds/window');
+var React = require('react');
+
+function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
+  const targetWindow = window.useWindow();
+  React.useEffect(() => {
+    if (!enabled) return;
+    const handleFocus = (event) => {
+      const ignoreElement = elementRef.current?.ownerDocument?.querySelector(ignore) ;
+      if (event.target instanceof HTMLElement && !elementRef.current?.contains(event.target) && !ignoreElement?.contains(event.target)) {
+        onFocusOutside();
+      }
+    };
+    targetWindow?.addEventListener("focusin", handleFocus);
+    return () => {
+      targetWindow?.removeEventListener("focusin", handleFocus);
+    };
+  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
+}
+
+exports.useFocusOutside = useFocusOutside;
+//# sourceMappingURL=useFocusOutside.js.map

package/cjs/tabs-next/hooks/useFocusOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOutside.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n  elementRef: RefObject<HTMLElement | null>,\n  onFocusOutside: () => void,\n  enabled: boolean,\n  ignore?: string,\n) {\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleFocus = (event: FocusEvent) => {\n      const ignoreElement = ignore\n        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n        : undefined;\n\n      // If focus is outside the tabstrip (including the list) then close the list.\n      if (\n        event.target instanceof HTMLElement &&\n        !elementRef.current?.contains(event.target) &&\n        !ignoreElement?.contains(event.target)\n      ) {\n        onFocusOutside();\n      }\n    };\n\n    targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n    return () => {\n      targetWindow?.removeEventListener(\"focusin\", handleFocus);\n    };\n  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":["useWindow","useEffect"],"mappings":";;;;;AAGO,SAAS,eACd,CAAA,UAAA,EACA,cACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAE/B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,MAAM,gBACF,UAAA,CAAW,SAAS,aAAe,EAAA,aAAA,CAA2B,MAAM,CACpE,CAAA;AAGJ,MAAA,IACE,KAAM,CAAA,MAAA,YAAkB,WACxB,IAAA,CAAC,WAAW,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,MAAM,KAC1C,CAAC,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,MAAM,CACrC,EAAA;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACF;AAEA,IAAc,YAAA,EAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,OAAO,MAAM;AACX,MAAc,YAAA,EAAA,mBAAA,CAAoB,WAAW,WAAW,CAAA;AAAA,KAC1D;AAAA,KACC,CAAC,YAAA,EAAc,gBAAgB,UAAY,EAAA,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}

package/cjs/tabs-next/hooks/useOverflow.js

@@ -0,0 +1,138 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var React = require('react');
+
+function getTabWidth(element) {
+  const { width } = element.getBoundingClientRect();
+  return Math.ceil(width);
+}
+function useOverflow({
+  tabs,
+  container,
+  overflowButton,
+  children,
+  selected
+}) {
+  const [{ visibleCount, isMeasuring }, setVisibleItems] = core.useValueEffect({
+    visibleCount: tabs.length,
+    isMeasuring: false
+  });
+  const targetWindow = window.useWindow();
+  const updateOverflow = core.useEventCallback(() => {
+    const computeVisible = (visibleCount2) => {
+      if (container.current && targetWindow) {
+        const items = Array.from(
+          container.current.querySelectorAll(
+            "[data-overflowitem]"
+          )
+        );
+        const selectedTab = container.current.querySelector(
+          "[role=tab][aria-selected=true]"
+        )?.parentElement;
+        let maxWidth = container.current.clientWidth ?? 0;
+        const containerStyles = targetWindow.getComputedStyle(
+          container.current
+        );
+        const gap = Number.parseInt(containerStyles.gap || "0");
+        let currentWidth = 0;
+        let newVisibleCount = 0;
+        const visible2 = [];
+        while (newVisibleCount < items.length) {
+          const element = items[newVisibleCount];
+          if (element) {
+            if (currentWidth + getTabWidth(element) + gap > maxWidth) {
+              break;
+            }
+            currentWidth += getTabWidth(element) + gap;
+            visible2.push(element);
+          }
+          newVisibleCount++;
+        }
+        if (newVisibleCount >= items.length) {
+          return newVisibleCount;
+        }
+        const overflowButtonWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
+        maxWidth -= overflowButtonWidth;
+        while (currentWidth > maxWidth) {
+          const removed = visible2.pop();
+          if (!removed) break;
+          currentWidth -= getTabWidth(removed) + gap;
+          newVisibleCount--;
+        }
+        if (selectedTab && !visible2.includes(selectedTab)) {
+          const selectedTabWidth = getTabWidth(selectedTab) + gap;
+          while (currentWidth + selectedTabWidth > maxWidth) {
+            const removed = visible2.pop();
+            if (!removed) break;
+            currentWidth -= getTabWidth(selectedTab) + gap;
+            newVisibleCount--;
+          }
+        }
+        return Math.max(1, newVisibleCount);
+      }
+      return visibleCount2;
+    };
+    setVisibleItems(function* () {
+      yield {
+        visibleCount: tabs.length,
+        isMeasuring: true
+      };
+      const newVisibleCount = computeVisible(tabs.length);
+      const isMeasuring2 = newVisibleCount < tabs.length && newVisibleCount > 0;
+      yield {
+        visibleCount: newVisibleCount,
+        isMeasuring: isMeasuring2
+      };
+      if (isMeasuring2) {
+        yield {
+          visibleCount: computeVisible(newVisibleCount),
+          isMeasuring: false
+        };
+      }
+    });
+  });
+  core.useIsomorphicLayoutEffect(() => {
+    updateOverflow();
+  }, [selected]);
+  React.useEffect(() => {
+    const element = container?.current;
+    if (!element) return;
+    const win = core.ownerWindow(element);
+    const resizeObserver = new win.ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        if (entries.length === 0) return;
+        updateOverflow();
+      });
+    });
+    resizeObserver.observe(element);
+    if (element.parentElement) {
+      resizeObserver.observe(element.parentElement);
+    }
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [container, updateOverflow]);
+  const childArray = React.useMemo(() => React.Children.toArray(children), [children]);
+  const visible = childArray.slice(0, visibleCount || 1);
+  const hidden = childArray.slice(visibleCount || 1);
+  const hiddenSelectedIndex = hidden.findIndex(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    (child) => child?.props?.value === selected
+  );
+  if (selected && hiddenSelectedIndex !== -1) {
+    const removed = hidden.splice(hiddenSelectedIndex, 1);
+    visible.push(removed[0]);
+  }
+  if (isMeasuring) {
+    return [childArray, [], isMeasuring];
+  }
+  return [visible, hidden, isMeasuring];
+}
+
+exports.useOverflow = useOverflow;
+//# sourceMappingURL=useOverflow.js.map

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

@@ -0,0 +1 @@
+{"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":["useValueEffect","useWindow","useEventCallback","visibleCount","visible","isMeasuring","useIsomorphicLayoutEffect","useEffect","ownerWindow","useMemo","Children"],"mappings":"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"}

package/cjs/tabstrip/Tab.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = tabCss;
+//# sourceMappingURL=Tab.css.js.map

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

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

package/cjs/tabstrip/Tab.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var EditableLabel = require('../editable-label/EditableLabel.js');
+var TabMenu = require('./TabMenu.js');
+var Tab$1 = require('./Tab.css.js');
+
+const classBase = "vuuTab";
+const noop = () => void 0;
+const Tab = React.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 = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-tabstrip-tab",
+    css: Tab$1,
+    window: targetWindow
+  });
+  const rootRef = React.useRef(null);
+  const editableRef = React.useRef(null);
+  const setForkRef = core.useForkRef(ref, rootRef);
+  const handleClick = React.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__ */ jsxRuntime.jsx(
+        EditableLabel.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `${classBase}-text`,
+            "data-text": editable ? void 0 : label,
+            children: children ?? getLabel()
+          }
+        ) }),
+        showMenuButton ? /* @__PURE__ */ jsxRuntime.jsx(
+          TabMenu.TabMenu,
+          {
+            allowClose: closeable,
+            allowRename: editable,
+            controlledComponentId: ariaControls,
+            controlledComponentTitle: label,
+            location,
+            onMenuAction,
+            onMenuClose,
+            index
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+exports.Tab = Tab;
+//# sourceMappingURL=Tab.js.map

package/cjs/tabstrip/Tab.js.map

@@ -0,0 +1 @@
+{"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":["forwardRef","Tab","useWindow","useComponentCssInjection","tabCss","useRef","useForkRef","useCallback","jsx","EditableLabel","editable","jsxs","TabMenu"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,QAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA;AAEN,MAAA,GAAA,GAAMA,gBAAW,CAAA,SAASC,IACrC,CAAA;AAAA,EACE,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,QAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAQ,GAAA,CAAA,CAAA;AAAA,EACR,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAkB,GAAA,IAAA;AAAA,EAClB,cAAiB,GAAA,IAAA;AAAA,EACjB,OAAS,EAAA,WAAA;AAAA,EACT,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAiB,GAAA,SAAA,IAAa,QAAY,IAAA,OAAA,CAAQ,QAAQ,CAAA;AAAA,EAC1D,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACwB,EAAA;AACxB,EAAI,IAAA,cAAA,IAAkB,OAAO,YAAA,KAAiB,UAAY,EAAA;AACxD,IAAA,MAAM,MAAM,4DAA4D,CAAA;AAAA;AAG1E,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,eAAW,CAAA,GAAA,EAAK,OAAO,CAAA;AAC1C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,CAA+B,KAAA;AAC9B,MAAA,IAAI,CAAC,OAAS,EAAA;AACZ,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,OAAA,GAAU,GAAG,KAAK,CAAA;AAAA;AACpB,KACF;AAAA,IACA,CAAC,OAAS,EAAA,KAAA,EAAO,OAAO;AAAA,GAC1B;AAEA,EAAA,MAAM,oBAA6D,GAAA,CACjE,aAAgB,GAAA,EAAA,EAChB,WAAc,GAAA,EAAA,EACd,iBAAoB,GAAA,IAAA,KACjB,cAAe,CAAA,aAAA,EAAe,WAAa,EAAA,iBAAA,EAAmB,KAAK,CAAA;AAExE,EAAM,MAAA,WAAA,GAAc,CAAC,CAAqB,KAAA;AACxC,IAAA,QAAQ,EAAE,GAAK;AAAA,MACb,KAAK,WAAA;AAAA,MACL,KAAK,QAAA;AACH,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAA,OAAA,IAAW,QAAQ,KAAK,CAAA;AAAA;AAE1B,QAAA;AAAA,MACF;AACE,QAAW,OAAA,IAAA,OAAA,CAAQ,GAAG,KAAK,CAAA;AAAA;AAC/B,GACF;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,QAAU,EAAA;AACZ,MACE,uBAAAC,cAAA;AAAA,QAACC,2BAAA;AAAA,QAAA;AAAA,UACC,eAAa,EAAA,IAAA;AAAA,UACb,OAAA;AAAA,UACA,YAAc,EAAA,KAAA;AAAA,UAGd,eAAA;AAAA,UACA,cAAgB,EAAA,oBAAA;AAAA,UAChB,GAAK,EAAA;AAAA,SAAA;AAAA,QAHA;AAAA,OAIP;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,KAAA;AAAA;AACT,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,GAAiC,KAAA;AACpD,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,MAAMC,YAAW,WAAY,CAAA,OAAA;AAC7B,MAAA,MAAM,QAAQA,SAAS,CAAA,aAAA;AAAA,QACrB;AAAA,OACF;AACA,MAAA,KAAA,EAAO,KAAM,EAAA;AAAA;AAEf,IAAA,WAAA,GAAc,GAAG,CAAA;AAAA,GACnB;AAEA,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,eAAe,EAAA,YAAA;AAAA,MACf,YAAY,EAAA,KAAA;AAAA,MACZ,eAAe,EAAA,QAAA;AAAA,MACf,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,QAC5B,uBAAyB,EAAA,QAAA;AAAA,QACzB,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,QAC1B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAY,IAAA,KAAA,CAAA;AAAA,QACvC,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,WAAgB,KAAA,UAAA;AAAA,QAC3C,CAAC,iBAAiB,GAAG;AAAA,OACtB,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,GAAK,EAAA,UAAA;AAAA,MACL,IAAK,EAAA,KAAA;AAAA,MACL,QAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,KAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,YAOvB,WAAA,EAAW,WAAW,KAAY,CAAA,GAAA,KAAA;AAAA,YAEjC,sBAAY,QAAS;AAAA;AAAA,SAE1B,EAAA,CAAA;AAAA,QACC,cACC,mBAAAA,cAAA;AAAA,UAACI,eAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,SAAA;AAAA,YACZ,WAAa,EAAA,QAAA;AAAA,YACb,qBAAuB,EAAA,YAAA;AAAA,YACvB,wBAA0B,EAAA,KAAA;AAAA,YAC1B,QAAA;AAAA,YACA,YAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SAEA,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/cjs/tabstrip/TabMenu.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var tabMenuCss = ".vuuTabMenu {\n    top: var(--vuuTabMenu-top, 0px);\n}";
+
+module.exports = tabMenuCss;
+//# sourceMappingURL=TabMenu.css.js.map

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

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

package/cjs/tabstrip/TabMenu.js

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

package/cjs/tabstrip/TabMenu.js.map

@@ -0,0 +1 @@
+{"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":["useWindow","useComponentCssInjection","tabMenuCss","useMemo","renameCommand","closeCommand","jsx","PopupMenu"],"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,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,WAAa,EAAA,WAAW,CAAI,GAAAC,aAAA;AAAA,IACjC,MAA4C;AAAA,MAC1C,CAAC,WAAW,OAAY,KAAA;AACtB,QAAA,MAAM,YAAyC,EAAC;AAChD,QAAA,IAAI,WAAa,EAAA;AACf,UAAU,SAAA,CAAA,IAAA,CAAKC,4BAAc,CAAA,OAAsB,CAAC,CAAA;AAAA;AAEtD,QAAA,IAAI,UAAY,EAAA;AACd,UAAU,SAAA,CAAA,IAAA,CAAKC,2BAAa,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,uBAAAC,cAAA;AAAA,IAACC,mBAAA;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/cjs/tabstrip/TabMenuOptions.js

@@ -0,0 +1,20 @@
+'use strict';
+
+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
+});
+
+exports.closeCommand = closeCommand;
+exports.isTabMenuOptions = isTabMenuOptions;
+exports.renameCommand = renameCommand;
+//# sourceMappingURL=TabMenuOptions.js.map

package/cjs/tabstrip/TabMenuOptions.js.map

@@ -0,0 +1 @@
+{"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/cjs/tabstrip/Tabstrip.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = tabstripCss;
+//# sourceMappingURL=Tabstrip.css.js.map

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

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