react-ui-suite 1.1.3 → 1.1.5

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.d.ts

@@ -197,13 +197,22 @@ type DropdownProps = {
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">;
+type FilePickerMode = "path" | "content" | "both";
+type FileSelection = {
+    file: File;
+    path?: string;
+    text?: string;
+    bytes?: Uint8Array;
+};
 type FilePickerProps = NativeInputProps & {
     label?: string;
     description?: string;
     error?: string;
     dropzoneLabel?: string;
     maxFiles?: number;
-    onFilesChange?: (files: File[]) => void;
+    mode?: FilePickerMode;
+    resolvePath?: (file: File) => string | undefined | Promise<string | undefined>;
+    onFilesChange?: (files: FileSelection[]) => void;
 };
 declare const FilePicker: React.ForwardRefExoticComponent<NativeInputProps & {
     label?: string;
@@ -211,7 +220,9 @@ declare const FilePicker: React.ForwardRefExoticComponent<NativeInputProps & {
     error?: string;
     dropzoneLabel?: string;
     maxFiles?: number;
-    onFilesChange?: (files: File[]) => void;
+    mode?: FilePickerMode;
+    resolvePath?: (file: File) => string | undefined | Promise<string | undefined>;
+    onFilesChange?: (files: FileSelection[]) => void;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -530,4 +541,4 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttri
     onChange?: (checked: boolean) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
 
-export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, FilePicker, type FilePickerProps, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };
+export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, FilePicker, type FilePickerMode, type FilePickerProps, type FileSelection, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };

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,
@@ -2820,12 +2826,55 @@ function formatBytes(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function decodeUtf8IfPossible(bytes) {
+  try {
+    const decoder = new TextDecoder("utf-8", { fatal: true });
+    return decoder.decode(bytes);
+  } catch {
+    return void 0;
+  }
+}
+async function derivePath(file, resolvePath) {
+  const resolved = await (resolvePath == null ? void 0 : resolvePath(file));
+  if (resolved) return resolved;
+  const fileWithPath = file;
+  if (typeof fileWithPath.path === "string" && fileWithPath.path.length > 0) {
+    return fileWithPath.path;
+  }
+  if (typeof fileWithPath.webkitRelativePath === "string" && fileWithPath.webkitRelativePath.length > 0) {
+    return fileWithPath.webkitRelativePath;
+  }
+  return void 0;
+}
+async function readFileBytes(file) {
+  const fileWithArrayBuffer = file;
+  if (typeof fileWithArrayBuffer.arrayBuffer === "function") {
+    return new Uint8Array(await fileWithArrayBuffer.arrayBuffer());
+  }
+  if (typeof Blob !== "undefined" && typeof Blob.prototype.arrayBuffer === "function") {
+    return new Uint8Array(await Blob.prototype.arrayBuffer.call(file));
+  }
+  if (typeof FileReader !== "undefined") {
+    return await new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result;
+        resolve(result instanceof ArrayBuffer ? new Uint8Array(result) : void 0);
+      };
+      reader.onerror = () => resolve(void 0);
+      reader.readAsArrayBuffer(file);
+    });
+  }
+  return void 0;
+}
 var FilePicker = React15.forwardRef(function FilePicker2({
   label,
   description,
   error,
   dropzoneLabel = "Drop files here or click to browse",
   maxFiles,
+  mode = "path",
+  resolvePath,
   id,
   className,
   accept,
@@ -2843,6 +2892,7 @@ var FilePicker = React15.forwardRef(function FilePicker2({
   const [selectedFiles, setSelectedFiles] = React15.useState([]);
   const [restrictedCount, setRestrictedCount] = React15.useState(0);
   const inputRef = React15.useRef(null);
+  const selectionRequestIdRef = React15.useRef(0);
   const setRefs = React15.useCallback(
     (node) => {
       inputRef.current = node;
@@ -2861,22 +2911,43 @@ var FilePicker = React15.forwardRef(function FilePicker2({
     return Math.max(1, Math.floor(maxFiles));
   }, [maxFiles]);
   const applySelectedFiles = React15.useCallback(
-    (files) => {
+    async (files) => {
       const acceptedFiles = filterFilesByAccept(files, accept);
       const selectionLimit = multiple ? resolvedMaxFiles != null ? resolvedMaxFiles : Infinity : 1;
       const nextFiles = acceptedFiles.slice(0, selectionLimit);
       const nextRestrictedCount = files.length - nextFiles.length;
-      setSelectedFiles(nextFiles);
+      const requestId = selectionRequestIdRef.current + 1;
+      selectionRequestIdRef.current = requestId;
+      const nextSelections = await Promise.all(
+        nextFiles.map(async (file) => {
+          const selection = { file };
+          if (mode === "path" || mode === "both") {
+            selection.path = await derivePath(file, resolvePath);
+          }
+          if (mode === "content" || mode === "both") {
+            const bytes = await readFileBytes(file);
+            if (bytes) {
+              selection.bytes = bytes;
+              selection.text = decodeUtf8IfPossible(bytes);
+            }
+          }
+          return selection;
+        })
+      );
+      if (selectionRequestIdRef.current !== requestId) {
+        return [];
+      }
+      setSelectedFiles(nextSelections);
       setRestrictedCount(nextRestrictedCount);
-      onFilesChange == null ? void 0 : onFilesChange(nextFiles);
-      return nextFiles;
+      onFilesChange == null ? void 0 : onFilesChange(nextSelections);
+      return nextSelections;
     },
-    [accept, multiple, onFilesChange, resolvedMaxFiles]
+    [accept, mode, multiple, onFilesChange, resolvePath, resolvedMaxFiles]
   );
   const handleInputChange = (event) => {
     var _a;
     const incomingFiles = Array.from((_a = event.target.files) != null ? _a : []);
-    applySelectedFiles(incomingFiles);
+    void applySelectedFiles(incomingFiles);
     onChange == null ? void 0 : onChange(event);
   };
   const openFileDialog = () => {
@@ -2892,7 +2963,7 @@ var FilePicker = React15.forwardRef(function FilePicker2({
     if (disabled) return;
     setIsDragActive(false);
     const files = Array.from((_a = event.dataTransfer.files) != null ? _a : []);
-    applySelectedFiles(files);
+    void applySelectedFiles(files);
   };
   const hasSelection = selectedFiles.length > 0;
   return /* @__PURE__ */ jsxs15("div", { className: "rui-file-picker rui-root", children: [
@@ -2954,10 +3025,17 @@ var FilePicker = React15.forwardRef(function FilePicker2({
             "Maximum files: ",
             resolvedMaxFiles
           ] }) : null,
-          hasSelection ? /* @__PURE__ */ jsx17("ul", { className: "rui-file-picker__list", "aria-label": "Selected files", children: selectedFiles.map((file) => /* @__PURE__ */ jsxs15("li", { className: "rui-file-picker__item", children: [
-            /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-name rui-text-wrap", children: file.name }),
-            /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-meta", children: formatBytes(file.size) })
-          ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null
+          hasSelection ? /* @__PURE__ */ jsx17("ul", { className: "rui-file-picker__list", "aria-label": "Selected files", children: selectedFiles.map((selection) => /* @__PURE__ */ jsxs15(
+            "li",
+            {
+              className: "rui-file-picker__item",
+              children: [
+                /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-name rui-text-wrap", children: selection.file.name }),
+                /* @__PURE__ */ jsx17("span", { className: "rui-file-picker__file-meta", children: formatBytes(selection.file.size) })
+              ]
+            },
+            `${selection.file.name}-${selection.file.size}-${selection.file.lastModified}`
+          )) }) : null
         ]
       }
     ),
@@ -3788,7 +3866,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",
@@ -3804,11 +3882,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) {
@@ -3851,14 +3934,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");
@@ -3873,14 +3958,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;
@@ -3896,7 +4010,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(() => {
@@ -3916,9 +4031,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`;
@@ -4053,7 +4168,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,
@@ -4064,13 +4179,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
+        ] })
+      ]
     }
   );
 }