@vuu-ui/vuu-ui-controls 0.0.26

package/esm/overflow-container/useOverflowContainer.js

@@ -0,0 +1,141 @@
+import { MEASURES, isValidNumber, useLayoutEffectSkipFirst } from '@vuu-ui/vuu-utils';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { NO_WRAPPED_ITEMS, getNonWrappedAndWrappedItems, applyOverflowClassToWrappedItems, overflowIndicatorHasWrappedButShouldNotHave, correctForWrappedOverflowIndicator, highPriorityItemsHaveWrappedButShouldNotHave, correctForWrappedHighPriorityItems, removeOverflowIndicatorIfNoLongerNeeded, switchWrappedItemIntoView } from './overflow-utils.js';
+import '../drag-drop/DragDropProvider.js';
+import { useDragDrop } from '../drag-drop/useDragDrop.js';
+
+const useOverflowContainer = ({
+  allowDragDrop = false,
+  itemCount,
+  onMoveItem,
+  onSwitchWrappedItemIntoView,
+  orientation
+}) => {
+  const [container, setContainer] = useState(null);
+  const wrappedItemsRef = useRef(NO_WRAPPED_ITEMS);
+  const containerRef = useRef(null);
+  const setOverflowTabIndex = useCallback((tabIndex) => {
+    if (containerRef.current) {
+      containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")?.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+  const handleResize = useCallback(async () => {
+    if (container) {
+      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
+        container,
+        orientation
+      );
+      applyOverflowClassToWrappedItems(
+        container,
+        wrapped,
+        "vuuOverflowContainer-wrapContainer"
+      );
+      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
+        wrapped = await correctForWrappedOverflowIndicator(
+          container,
+          wrapped,
+          orientation
+        );
+      }
+      while (highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)) {
+        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(
+          container,
+          nonWrapped,
+          wrapped,
+          orientation
+        );
+      }
+      if (wrapped.length === 1) {
+        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {
+          wrapped = NO_WRAPPED_ITEMS;
+        }
+      }
+      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
+        setOverflowTabIndex("0");
+      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
+        setOverflowTabIndex("-1");
+      }
+      wrappedItemsRef.current = wrapped;
+    }
+  }, [container, orientation, setOverflowTabIndex]);
+  const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
+  const [menuBuilder, menuActionHandler] = useMemo(() => {
+    return [
+      () => {
+        const { current: menuItems } = wrappedItemsRef;
+        return menuItems.map((item) => {
+          return {
+            label: item.label,
+            action: `activate-item-${item.index}`,
+            options: { overflowItem: item }
+          };
+        });
+      },
+      // The menu items are our overflowed items, selecting one by default
+      // brings it back onto the toolbar - TODO is this right ?
+      ({ options }) => {
+        if (container && hasOverflowItem(options)) {
+          const [, wrappedItems] = switchWrappedItemIntoView(
+            container,
+            options.overflowItem,
+            orientation
+          );
+          wrappedItemsRef.current = wrappedItems;
+          onSwitchWrappedItemIntoView?.(options.overflowItem);
+        }
+        return true;
+      }
+    ];
+  }, [container, onSwitchWrappedItemIntoView, orientation]);
+  const resizeObserver = useMemo(() => {
+    const { sizeProp } = MEASURES[orientation];
+    let currentSize = 0;
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { [sizeProp]: actualSize } = entry.contentRect;
+        const size = Math.round(actualSize);
+        if (isValidNumber(size) && currentSize !== size) {
+          currentSize = size;
+          handleResize();
+        }
+      }
+    });
+  }, [handleResize, orientation]);
+  useLayoutEffectSkipFirst(() => {
+    handleResize();
+  }, [handleResize, itemCount]);
+  useMemo(() => {
+    if (container) {
+      resizeObserver.observe(container);
+    }
+  }, [container, resizeObserver]);
+  const callbackRef = useCallback((el) => {
+    setContainer(containerRef.current = el);
+  }, []);
+  const handleDrop = useCallback(
+    ({ fromIndex, toIndex }) => {
+      onMoveItem?.(fromIndex, toIndex);
+    },
+    [onMoveItem]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
+    allowDragDrop,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `vuuOverflowContainer`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuOverflowContainer-item"
+  });
+  return {
+    menuActionHandler,
+    menuBuilder,
+    onItemMouseDown: dragDropHookHandleMouseDown,
+    rootRef: callbackRef,
+    ...dragDropHook
+  };
+};
+
+export { useOverflowContainer };
+//# sourceMappingURL=useOverflowContainer.js.map

package/esm/overflow-container/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\"\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            action: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      ({ options }) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem]\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/price-ticker/PriceTicker.css.js

@@ -0,0 +1,4 @@
+var priceTickerCss = "@property --price-ticker-color {\n    syntax: '<color>'; /* <- defined as type number for the transition to work */\n    initial-value: #15171B;\n    inherits: false;\n}\n  \n.vuuPriceTicker {\n  align-items: center;\n  display: flex;\n  font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--vuuPriceTicker-fontWeight, 700);\n  transition-property: color;\n  transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n  --vuu-icon-color: var(--vuu-color-green-50);\n  color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.up2 {\n    --vuu-icon-color: var(--vuu-color-green-50);\n    color: var(--vuu-color-green-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down1 {\n    --vuu-icon-transform: rotate(180deg);\n  --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  \n  .vuuPriceTicker.down2 {\n    --vuu-icon-transform: rotate(180deg);\n    --vuu-icon-color: var(--vuu-color-red-50);\n    color: var(--vuu-color-red-50);\n    animation-duration: 30s;\n  }\n  ";
+
+export { priceTickerCss as default };
+//# sourceMappingURL=PriceTicker.css.js.map

package/esm/price-ticker/PriceTicker.css.js.map

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

package/esm/price-ticker/PriceTicker.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidNumber, getMovingValueDirection, numericFormatter } from '@vuu-ui/vuu-utils';
+import { memo, useRef, useMemo } from 'react';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import priceTickerCss from './PriceTicker.css.js';
+
+const classBase = "vuuPriceTicker";
+const getValueFormatter = (decimals) => numericFormatter({
+  type: {
+    name: "number",
+    formatting: {
+      decimals,
+      zeroPad: true
+    }
+  }
+});
+const INITIAL_VALUE = [void 0, void 0];
+const PriceTicker = memo(
+  ({
+    className,
+    decimals = 2,
+    price,
+    showArrow,
+    ...htmlAttributes
+  }) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-price-ticker",
+      css: priceTickerCss,
+      window: targetWindow
+    });
+    const ref = useRef(INITIAL_VALUE);
+    const [prevValue, prevDirection] = ref.current;
+    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);
+    const direction = isValidNumber(prevValue) ? getMovingValueDirection(price, prevDirection, prevValue, decimals) : "";
+    ref.current = [price, direction];
+    return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className, direction), children: [
+      formatNumber(price),
+      showArrow ? /* @__PURE__ */ jsx("span", { "data-icon": "price-arrow" }) : null
+    ] });
+  }
+);
+PriceTicker.displayName = "PriceTicker";
+
+export { PriceTicker };
+//# sourceMappingURL=PriceTicker.js.map

package/esm/price-ticker/PriceTicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceTicker.js","sources":["../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  }\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzB,gBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA,IAAA;AAAA,KACX;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,GAAA,GAAM,OAAc,aAAa,CAAA,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA,CAAA;AACvC,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAY,cAAc,SAAS,CAAA,GACrC,wBAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA,CAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA,CAAA;AAE/B,IACE,uBAAA,IAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA,IAAA;AAAA,KAClD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/esm/split-button/SplitButton.css.js

@@ -0,0 +1,4 @@
+var splitButtonCss = ".vuuSplitButton {\n    --saltButton-background: var(--split-background);\n    --saltButton-background-hover: var(--split-background);\n    --vuuPopupMenu-background: var(--split-background);\n    --vuuPopupMenu-iconSize: 20px;\n\n    /** less verbose local refs */\n    --background: var(--vuuSplitButton-background);\n    --foreground: var(--vuuSplitButton-foreground);\n    --background-hover: var(--vuuSplitButton-background-hover);\n    --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n    --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n    --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n    --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    --trigger-border-style: solid solid solid none;\n\n    align-items: center;\n    border: none;\n    border-radius: var(--border-radius);\n    display: flex;\n}\n\n.vuuSplitButton.vuuFocusVisible {\n    .saltButton {\n        outline-style: none;\n    }\n    &.vuuSplitButton-primary {\n        --split-background:  var(--background-hover,var(--salt-actionable-primary-background-hover));\n    }\n    &.vuuSplitButton-secondary {\n        --split-background:  var(--background-hover,var(--salt-actionable-secondary-background-hover));\n    }\n    &.vuuSplitButton-cta {\n        --split-background:  var(--background-hover,var(--salt-actionable-cta-background-hover));\n        .vuuSplitButton-trigger {\n            --vuu-icon-color:  var(--salt-actionable-cta-foreground-hover);\n        }\n    }    \n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n    outline-style: var(--salt-focused-outlineStyle);\n    outline-width: var(--salt-focused-outlineWidth);\n    outline-color: var(--salt-focused-outlineColor);\n    outline-offset: var(--salt-focused-outlineOffset);\n}\n\n  \n.vuuSplitButton-primary {\n    --split-background:  var(--background, var(--salt-actionable-primary-background));\n    --split-background-active:  var(--salt-actionable-primary-background-active);\n    --split-color-active:  var(--salt-actionable-primary-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --saltButton-borderColor: var(--split-background);\n    --split-background:  var(--background-hover, var(--salt-actionable-primary-background-hover));\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);\n    }\n}\n\n.vuuSplitButton-secondary {\n    --saltButton-borderColor: var(--split-background);\n    --split-background:  var(--background,var(--salt-actionable-secondary-background));\n    --split-background-active:  var(--salt-actionable-secondary-background-active);\n    --split-color-active:  var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --split-background:  var(--salt-actionable-secondary-background-hover);\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);\n    }\n}\n\n.vuuSplitButton-cta {\n    --split-background:  var(--background,var(--salt-actionable-cta-background));\n    --split-background-active:  var(--salt-actionable-cta-background-active);\n    --split-color-active:  var(--salt-actionable-cta-foreground-active);\n\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n    --vuuButton-borderColor: var(--split-background);\n    --split-background:  var(--salt-actionable-cta-background-hover);\n    --split-color: var(--salt-actionable-cta-foreground-hover);\n    .saltButton {\n        --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);\n        --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n    }\n}\n\n.vuuSplitButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--split-background-active);\n    .vuuSplitButton-trigger {\n        --vuu-icon-color: var(--split-color-active);\n    }\n}\n\n.vuuSplitButton-main {\n    border-style: solid none solid solid;\n    border-radius: var(--main-border-radius);\n    padding: 0 4px 0 16px;\n}\n\n.vuuSplitButton-trigger {\n    border-style: var(--trigger-border-style);\n    border-radius: var(--trigger-border-radius);\n}\n\n";
+
+export { splitButtonCss as default };
+//# sourceMappingURL=SplitButton.css.js.map

package/esm/split-button/SplitButton.css.js.map

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

package/esm/split-button/SplitButton.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PopupMenu } from '@vuu-ui/vuu-popups';
+import { useForkRef, Button } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import { useSplitButton } from './useSplitButton.js';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import splitButtonCss from './SplitButton.css.js';
+
+const classBase = "vuuSplitButton";
+const SplitButton = forwardRef(
+  function SplitButton2({
+    ButtonProps: ButtonPropsProp,
+    PopupMenuProps: PopupMenuPropsProp,
+    children,
+    className,
+    disabled = false,
+    onClick,
+    segmented = false,
+    variant = "primary",
+    ...htmlAttributes
+  }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-split-button",
+      css: splitButtonCss,
+      window: targetWindow
+    });
+    const { ButtonProps: ButtonProps2, buttonRef, rootRef, PopupMenuProps: PopupMenuProps2, ...rootProps } = useSplitButton({
+      ButtonProps: ButtonPropsProp,
+      PopupMenuProps: PopupMenuPropsProp,
+      classBase,
+      onClick,
+      segmented
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...htmlAttributes,
+        ...rootProps,
+        className: cx(classBase, `${classBase}-${variant}`, className, {
+          [`${classBase}-disabled`]: disabled,
+          [`${classBase}-segmented`]: segmented
+        }),
+        ref: useForkRef(forwardedRef, rootRef),
+        "data-showcase-center": true,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...ButtonProps2,
+              className: `${classBase}-main`,
+              disabled,
+              ref: buttonRef,
+              variant,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PopupMenu,
+            {
+              ...PopupMenuProps2,
+              className: `${classBase}-trigger`,
+              disabled,
+              icon: PopupMenuProps2?.icon ?? "chevron-down",
+              tabIndex: segmented ? 0 : -1,
+              variant
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { SplitButton };
+//# sourceMappingURL=SplitButton.js.map

package/esm/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sources":["../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <div\n        {...htmlAttributes}\n        {...rootProps}\n        className={cx(classBase, `${classBase}-${variant}`, className, {\n          [`${classBase}-disabled`]: disabled,\n          [`${classBase}-segmented`]: segmented,\n        })}\n        ref={useForkRef(forwardedRef, rootRef)}\n        data-showcase-center\n        tabIndex={-1}\n      >\n        <Button\n          {...ButtonProps}\n          className={`${classBase}-main`}\n          disabled={disabled}\n          ref={buttonRef}\n          variant={variant}\n        >\n          {children}\n        </Button>\n        <PopupMenu\n          {...PopupMenuProps}\n          className={`${classBase}-trigger`}\n          disabled={disabled}\n          icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n          tabIndex={segmented ? 0 : -1}\n          variant={variant}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["SplitButton","ButtonProps","PopupMenuProps"],"mappings":";;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAEX,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpE,cAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,KACD,CAAA,CAAA;AAEH,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAGD,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC,QAAA;AAAA,aAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACE,GAAGC,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B,OAAA;AAAA,aAAA;AAAA,WACF;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/split-button/SplitStateButton.css.js

@@ -0,0 +1,4 @@
+var splitStateButtonCss = ".vuuSplitStateButton {\n    --split-state-background: var(--salt-actionable-secondary-background);\n    --split-state-foreground: var(--salt-actionable-secondary-foreground);\n    --vuuSplitButton-background: var(--split-state-background);\n    --vuuSplitButton-foreground: var(--split-state-foreground);\n    --vuuSplitButton-background-hover: var(--split-state-background);\n    --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n \n    .saltButton-primary:active, .saltButton-primary.saltButton-active {\n        --saltButton-background-active: var(--salt-actionable-primary-background);\n        --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n    }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"]{\n    --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n    --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n    --saltButton-text-color-hover: var(--salt-actionable-primary-foreground-active);\n    --split-state-background: var(--salt-actionable-primary-background-active);\n    --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n    &.focusVisible {\n        --split-state-background: var(--salt-actionable-primary-background-active);\n    }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"]{\n    .vuuEditableLabel-input {\n        color: var(--salt-actionable-primary-foreground-active);\n    }\n}\n\n.vuuSplitStateButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-primary-background);\n    .vuuSplitButton-trigger {\n        --vuu-icon-color: var(--salt-actionable-primary-foreground);\n    }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-secondary-background);\n    .saltButton-primary:active {\n        background: var(--salt-actionable-secondary-background);\n    }    \n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active){\n    --split-background: var(--salt-actionable-primary-background-active);\n    .saltButton-primary:active {\n        background: var(--salt-actionable-primary-background-active);\n    }    \n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n    .saltButton {\n        border-color: var(--salt-actionable-primary-foreground);\n    }\n}\n";
+
+export { splitStateButtonCss as default };
+//# sourceMappingURL=SplitStateButton.css.js.map

package/esm/split-button/SplitStateButton.css.js.map

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

package/esm/split-button/SplitStateButton.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { SplitButton } from './SplitButton.js';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import splitStateButtonCss from './SplitStateButton.css.js';
+
+const classBase = "vuuSplitStateButton";
+const SplitStateButton = forwardRef(function SplitStateButton2({ className, selected, ...splitButtonProps }, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-split-state-button",
+    css: splitStateButtonCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    SplitButton,
+    {
+      ...splitButtonProps,
+      "aria-checked": selected,
+      className: cx(classBase, className),
+      ref: forwardedRef
+    }
+  );
+});
+
+export { SplitStateButton };
+//# sourceMappingURL=SplitStateButton.js.map

package/esm/split-button/SplitStateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStateButton.js","sources":["../../src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["SplitStateButton"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}

package/esm/split-button/useSplitButton.js

@@ -0,0 +1,82 @@
+import { dispatchMouseEvent } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+
+const focusTargetIsEditableLabel = (target) => {
+  if (target.tagName === "INPUT") {
+    return true;
+  }
+  return false;
+};
+const useSplitButton = ({
+  ButtonProps: ButtonPropsProp,
+  PopupMenuProps: PopupMenuProps2,
+  classBase,
+  onClick
+}) => {
+  const buttonRef = useRef(null);
+  const rootRef = useRef(null);
+  const onMenuClose = useCallback((reason) => {
+    if (reason?.type !== "tab-away") {
+      const buttonMain = rootRef.current?.querySelector(
+        ".vuuSplitButton-main"
+      );
+      buttonMain?.focus();
+    }
+  }, []);
+  const menuProps = {
+    ...PopupMenuProps2,
+    anchorElement: rootRef,
+    menuClassName: `${classBase}-menu`,
+    onMenuClose,
+    popupPlacement: "below-full-width"
+  };
+  const handleRootFocus = useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    if (!splitButton?.classList.contains("vuuFocusVisible")) {
+      splitButton?.classList.add("vuuFocusVisible");
+      if (!focusTargetIsEditableLabel(evt.target)) {
+        requestAnimationFrame(() => {
+          buttonRef.current?.focus();
+        });
+      }
+    }
+  }, []);
+  const handleRootBlur = useCallback((evt) => {
+    const { current: splitButton } = rootRef;
+    const target = evt.relatedTarget;
+    if (!splitButton?.contains(target)) {
+      if (splitButton?.classList.contains("vuuFocusVisible")) {
+        splitButton.classList.remove("vuuFocusVisible");
+      }
+    }
+  }, []);
+  const handleButtonKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === "ArrowDown") {
+        const popupTrigger = rootRef.current?.querySelector(
+          `.${classBase}-trigger`
+        );
+        if (popupTrigger) {
+          dispatchMouseEvent(popupTrigger, "click");
+        }
+      }
+    },
+    [classBase]
+  );
+  const ButtonProps = {
+    ...ButtonPropsProp,
+    onClick,
+    onKeyDown: handleButtonKeyDown
+  };
+  return {
+    ButtonProps,
+    PopupMenuProps: menuProps,
+    buttonRef,
+    rootRef,
+    onBlur: handleRootBlur,
+    onFocus: handleRootFocus
+  };
+};
+
+export { useSplitButton };
+//# sourceMappingURL=useSplitButton.js.map

package/esm/split-button/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButton.js","sources":["../../src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\"\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase]\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps"],"mappings":"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"}

package/esm/tabstrip/Tab.css.js

@@ -0,0 +1,4 @@
+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\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  height: calc(var(--tab-height) - var(--tab-thumb-height));\n  margin-bottom: var(--tab-thumb-height);\n  outline: none;\n  position: relative;\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-block;\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/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\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\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(--vuuTab-hover-background, 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

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

package/esm/tabstrip/Tab.js

@@ -0,0 +1,149 @@
+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,
+        {
+          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-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