react-ui-suite 1.1.4 → 1.1.6

package/dist/{TabGroup-CV2AC3EO.css → TabGroup-3NH74LET.css}

@@ -1,12 +1,30 @@
-.rui-tab-group {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    --rui-tab-border: 1px;
-    --rui-tab-panel-radius: 15px;
-    --rui-tab-radius: 10px;
-    --rui-tab-min-main: 32px;
-}
+.rui-tab-group {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    --rui-tab-border: 1px;
+    --rui-tab-panel-radius: 15px;
+    --rui-tab-radius: 10px;
+    --rui-tab-min-main: 32px;
+}
+
+.rui-tab-group__measure {
+    position: fixed;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: -1;
+    display: inline-flex;
+    gap: 0;
+}
+
+.rui-tab-group__measure .rui-tab-group__tab {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    height: auto !important;
+}
 
 .rui-tab-group[data-position="top"],
 .rui-tab-group[data-position="bottom"] {
@@ -70,20 +88,21 @@
     justify-content: flex-end;
 }
 
-.rui-tab-group__tab {
-    border: var(--rui-tab-border) solid var(--rui-color-border);
-    background-color: var(--rui-color-surface-muted);
-    position: relative;
+.rui-tab-group__tab {
+    border: var(--rui-tab-border) solid var(--rui-color-border);
+    background-color: var(--rui-color-surface-muted);
+    position: relative;
     padding: 5px;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transform: none;
-    min-width: 0;
-    min-height: 0;
-    flex: 0 0 auto;
-}
+    min-width: 0;
+    min-height: 0;
+    flex: 0 0 auto;
+    overflow: hidden;
+}
 
 .rui-tab-group__scroll {
   border: var(--rui-tab-border) solid var(--rui-color-border);
@@ -108,12 +127,19 @@
   line-height: 1;
 }
 
-.rui-tab-group__label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
+.rui-tab-group__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  white-space: normal;
+  overflow: hidden;
+  overflow-wrap: normal;
+  word-break: normal;
+  hyphens: none;
+  max-width: 100%;
+  max-height: 100%;
+}
 
 .rui-tab-group__tab.is-active {
     background-color: var(--rui-color-surface);
@@ -205,10 +231,10 @@
   border-bottom-right-radius: var(--rui-tab-radius);
 }
 
-.rui-tab-group[data-rotation="vertical"] .rui-tab-group__label {
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-}
+.rui-tab-group[data-rotation="vertical"] .rui-tab-group__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
 
 .rui-tab-group[data-position="top"][data-rotation="vertical"] .rui-tab-group__label {
   transform: rotate(180deg);

package/dist/index.js

@@ -1016,7 +1016,16 @@ var Dropdown = React6.forwardRef(
                 ref: chevronRef,
                 type: "button",
                 "aria-label": isOpen ? "Close" : "Open",
-                onClick: onChevronClick,
+                onPointerDown: (event) => {
+                  if (!onChevronClick) return;
+                  if (event.button !== 0) return;
+                  event.preventDefault();
+                  onChevronClick();
+                },
+                onClick: (event) => {
+                  if (!onChevronClick || event.detail !== 0) return;
+                  onChevronClick();
+                },
                 className: buttonClasses,
                 disabled: !!disabled,
                 children: /* @__PURE__ */ jsx8(
@@ -1635,10 +1644,7 @@ function InnerCombobox({
           openList();
           return;
         }
-        requestAnimationFrame(() => {
-          var _a2;
-          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-        });
+        setOpen(false);
       },
       children: isEffectivelyOpen && /* @__PURE__ */ jsx11(
         Popover,
@@ -1860,6 +1866,7 @@ function Select({
   const containerRef = React11.useRef(null);
   const inputRef = React11.useRef(null);
   const chevronRef = React11.useRef(null);
+  const popoverRef = React11.useRef(null);
   const popoverListRef = React11.useRef(null);
   const suppressToggleRef = React11.useRef(false);
   const id = React11.useId();
@@ -1879,10 +1886,14 @@ function Select({
   );
   const activeIndex = activeIndexState;
   const [selected, setSelected] = useControlledState(value, defaultValue != null ? defaultValue : null);
-  useOutsideClick(
-    [containerRef],
-    () => setOpen(false)
+  const outsideClickRefs = React11.useMemo(
+    () => [
+      containerRef,
+      popoverRef
+    ],
+    []
   );
+  useOutsideClick(outsideClickRefs, () => setOpen(false));
   const selectedOption = (_a = options.find((opt) => opt.value === selected)) != null ? _a : null;
   const selectedIndex = React11.useMemo(
     () => options.findIndex((opt) => opt.value === selected),
@@ -2049,7 +2060,7 @@ function Select({
           }
           setOpen((o) => !o);
         },
-        children: open && /* @__PURE__ */ jsx13(Popover, { anchorRef: containerRef, className: listboxHighlight, children: ({ scrollRef }) => {
+        children: open && /* @__PURE__ */ jsx13(Popover, { anchorRef: containerRef, rootRef: popoverRef, className: listboxHighlight, children: ({ scrollRef }) => {
           popoverListRef.current = scrollRef;
           return /* @__PURE__ */ jsx13(
             "ul",
@@ -3860,7 +3871,7 @@ function StackedList({ items, dense, className, ...rest }) {
 
 // components/TabGroup/TabGroup.tsx
 import React21 from "react";
-import "./TabGroup-CV2AC3EO.css";
+import "./TabGroup-3NH74LET.css";
 import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function TabGroup({
   align = "start",
@@ -3876,11 +3887,16 @@ function TabGroup({
   var _a, _b;
   const rootRef = React21.useRef(null);
   const tabStripRef = React21.useRef(null);
+  const measureRef = React21.useRef(null);
   const idBase = React21.useId();
   const [effectiveFill, setEffectiveFill] = React21.useState(fill);
   const [availableMain, setAvailableMain] = React21.useState(0);
-  const [minMain, setMinMain] = React21.useState(32);
+  const [cssMinMain, setCssMinMain] = React21.useState(32);
+  const [contentMinMain, setContentMinMain] = React21.useState(0);
   const count = tabs.length;
+  const isVertical = position === "left" || position === "right";
+  const minMain = Math.max(cssMinMain, contentMinMain);
+  const partialMainSize = Math.max(Number.isFinite(size) ? size : 0, minMain);
   const clampIndex = React21.useCallback(
     (i) => {
       if (count <= 0) {
@@ -3923,14 +3939,16 @@ function TabGroup({
     const radius = parseFloat(computed.getPropertyValue("--rui-tab-panel-radius")) || 0;
     const border = parseFloat(computed.getPropertyValue("--rui-tab-border")) || 0;
     const minMainValue = parseFloat(computed.getPropertyValue("--rui-tab-min-main")) || 32;
+    const effectiveMinMain = Math.max(minMainValue, contentMinMain);
     const wiggle = border * 2 + 1;
     const available = position === "top" || position === "bottom" ? rect.width : rect.height;
-    const required = (size != null ? size : 0) * tabs.length;
-    const slots2 = minMainValue > 0 ? Math.floor(available / minMainValue) : tabs.length;
+    const requiredPerTab = Math.max(size != null ? size : 0, effectiveMinMain);
+    const required = requiredPerTab * tabs.length;
+    const slots2 = effectiveMinMain > 0 ? Math.floor(available / effectiveMinMain) : tabs.length;
     const hasOverflowControls = slots2 < tabs.length;
     const shouldFill = available - 2 * radius - wiggle <= required;
     setEffectiveFill(shouldFill || hasOverflowControls ? "full" : "partial");
-  }, [fill, position, size, tabs.length]);
+  }, [contentMinMain, fill, position, size, tabs.length]);
   React21.useLayoutEffect(() => {
     if (fill === "full") {
       setEffectiveFill("full");
@@ -3945,14 +3963,43 @@ function TabGroup({
     observer.observe(node);
     return () => observer.disconnect();
   }, [fill, updateEffectiveFill]);
-  const isVertical = position === "left" || position === "right";
   React21.useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root) return;
     const computed = getComputedStyle(root);
     const cssMin = parseFloat(computed.getPropertyValue("--rui-tab-min-main"));
-    setMinMain(Number.isFinite(cssMin) && cssMin > 0 ? cssMin : 32);
+    setCssMinMain(Number.isFinite(cssMin) && cssMin > 0 ? cssMin : 32);
   }, [position]);
+  React21.useLayoutEffect(() => {
+    const node = measureRef.current;
+    if (!node) return;
+    const measure = () => {
+      const sampleTab = node.querySelector(".rui-tab-group__tab");
+      const labels = Array.from(node.querySelectorAll(".rui-tab-group__label"));
+      if (!sampleTab || labels.length === 0) {
+        setContentMinMain(0);
+        return;
+      }
+      const tabStyle = getComputedStyle(sampleTab);
+      const paddingMain = isVertical ? (parseFloat(tabStyle.paddingTop) || 0) + (parseFloat(tabStyle.paddingBottom) || 0) : (parseFloat(tabStyle.paddingLeft) || 0) + (parseFloat(tabStyle.paddingRight) || 0);
+      const borderMain = isVertical ? (parseFloat(tabStyle.borderTopWidth) || 0) + (parseFloat(tabStyle.borderBottomWidth) || 0) : (parseFloat(tabStyle.borderLeftWidth) || 0) + (parseFloat(tabStyle.borderRightWidth) || 0);
+      let largestLabelMain = 0;
+      for (const label of labels) {
+        const rect = label.getBoundingClientRect();
+        const labelMain = isVertical ? rect.height : rect.width;
+        if (labelMain > largestLabelMain) {
+          largestLabelMain = labelMain;
+        }
+      }
+      const next = Math.ceil(largestLabelMain + paddingMain + borderMain);
+      setContentMinMain((prev) => prev === next ? prev : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [isVertical, position, rotation, tabs]);
   React21.useLayoutEffect(() => {
     const node = tabStripRef.current;
     if (!node) return;
@@ -3968,7 +4015,8 @@ function TabGroup({
   }, [isVertical]);
   const slots = availableMain > 0 && minMain > 0 ? Math.floor(availableMain / minMain) : count;
   const overflow = slots < count;
-  const windowSize = overflow ? Math.max(1, slots - 2) : count;
+  const layoutSlots = overflow ? Math.max(3, slots) : Math.max(1, slots);
+  const windowSize = overflow ? Math.max(1, layoutSlots - 2) : count;
   const maxStart = Math.max(0, count - windowSize);
   const [startIndex, setStartIndex] = React21.useState(0);
   React21.useEffect(() => {
@@ -3988,9 +4036,9 @@ function TabGroup({
     });
   }, [currentActive, overflow, windowSize]);
   const visibleTabs = overflow ? tabs.slice(startIndex, startIndex + windowSize) : tabs;
-  const slotSize = overflow && slots > 0 ? availableMain / slots : 0;
+  const slotSize = overflow && layoutSlots > 0 ? availableMain / layoutSlots : 0;
   const overflowMainStyle = overflow && slotSize > 0 ? isVertical ? { height: slotSize } : { width: slotSize } : void 0;
-  const mainStyle = overflow ? overflowMainStyle : effectiveFill === "partial" ? isVertical ? { height: size } : { width: size } : void 0;
+  const mainStyle = overflow ? overflowMainStyle : effectiveFill === "partial" ? isVertical ? { height: partialMainSize } : { width: partialMainSize } : void 0;
   const scrollLabels = isVertical ? { back: "Scroll tabs up", forward: "Scroll tabs down" } : { back: "Scroll tabs left", forward: "Scroll tabs right" };
   const scrollMainStyle = overflowMainStyle;
   const panelId = `${idBase}-panel`;
@@ -4125,7 +4173,7 @@ function TabGroup({
       children: (_b = (_a = tabs[currentActive]) == null ? void 0 : _a.content) != null ? _b : null
     }
   );
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       ref: rootRef,
@@ -4136,13 +4184,16 @@ function TabGroup({
       "data-requested-fill": fill,
       "data-rotation": rotation,
       "data-overflow": overflow ? "true" : "false",
-      children: tabsFirst ? /* @__PURE__ */ jsxs23(Fragment2, { children: [
-        tabList,
-        panel
-      ] }) : /* @__PURE__ */ jsxs23(Fragment2, { children: [
-        panel,
-        tabList
-      ] })
+      children: [
+        /* @__PURE__ */ jsx25("div", { ref: measureRef, className: "rui-tab-group__measure", "aria-hidden": "true", children: tabs.map((tab, index) => /* @__PURE__ */ jsx25("button", { type: "button", className: "rui-tab-group__tab", children: /* @__PURE__ */ jsx25("span", { className: "rui-tab-group__label", children: tab.label }) }, index)) }),
+        tabsFirst ? /* @__PURE__ */ jsxs23(Fragment2, { children: [
+          tabList,
+          panel
+        ] }) : /* @__PURE__ */ jsxs23(Fragment2, { children: [
+          panel,
+          tabList
+        ] })
+      ]
     }
   );
 }