react-ui-suite 1.1.3 → 1.1.4

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

@@ -2820,12 +2820,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 +2886,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 +2905,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 +2957,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 +3019,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
         ]
       }
     ),