@osdk/react-components 0.2.0 → 0.2.1-main-20260407074313

package/build/cjs/public/experimental.cjs

@@ -8990,6 +8990,105 @@ function defaultItemToStringLabel(item) {
   return String(item);
 }
 
+// src/action-form/fields/FilePickerField.module.css
+var FilePickerField_default = {};
+
+// src/action-form/fields/FilePickerField.tsx
+var FilePickerField = /* @__PURE__ */ React76.memo(function FilePickerFieldFn({
+  id,
+  value,
+  onChange,
+  isMulti,
+  accept,
+  // TODO: implement maxSize validation in a follow-up
+  maxSize: _maxSize,
+  text = "No file chosen",
+  buttonText = "Browse"
+}) {
+  const inputRef = React76.useRef(null);
+  const openFileDialog = React76.useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const handleInputChange = React76.useCallback((event) => {
+    const files = event.target.files;
+    if (files == null || files.length === 0) {
+      onChange?.(null);
+      return;
+    }
+    if (isMulti) {
+      onChange?.(Array.from(files));
+    } else {
+      onChange?.(files[0] ?? null);
+    }
+  }, [onChange, isMulti]);
+  const handleClear = React76.useCallback((event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    onChange?.(null);
+    if (inputRef.current != null) {
+      inputRef.current.value = "";
+    }
+  }, [onChange]);
+  const handleKeyDown = React76.useCallback((event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openFileDialog();
+    }
+  }, [openFileDialog]);
+  const displayText = getDisplayText(value);
+  const hasValue = displayText != null;
+  const acceptString = normalizeAccept(accept);
+  return (
+    // The entire component is a single tab stop (tabIndex={0}).
+    // Text and Browse are <span>s (not buttons) so they don't create
+    // extra tab stops — clicks on them bubble up to the container's onClick.
+    // The clear button is the only inner interactive element and gets its
+    // own tab stop so keyboard users can clear the selection.
+    /* @__PURE__ */ React76__default.default.createElement("div", {
+      id,
+      className: FilePickerField_default.osdkFilePickerTrigger,
+      tabIndex: 0,
+      role: "button",
+      onClick: openFileDialog,
+      onKeyDown: handleKeyDown
+    }, /* @__PURE__ */ React76__default.default.createElement("input", {
+      ref: inputRef,
+      type: "file",
+      className: FilePickerField_default.osdkFilePickerHiddenInput,
+      multiple: isMulti,
+      accept: acceptString,
+      onChange: handleInputChange,
+      "aria-hidden": "true",
+      tabIndex: -1
+    }), /* @__PURE__ */ React76__default.default.createElement("span", {
+      className: classnames14__default.default(FilePickerField_default.osdkFilePickerText, !hasValue && FilePickerField_default.osdkFilePickerPlaceholder)
+    }, displayText ?? text), hasValue && // stopPropagation + preventDefault prevent the click from
+    // bubbling to the container's onClick which opens the file dialog.
+    /* @__PURE__ */ React76__default.default.createElement(button.Button, {
+      className: FilePickerField_default.osdkFilePickerClear,
+      onClick: handleClear,
+      "aria-label": "Clear selection"
+    }, /* @__PURE__ */ React76__default.default.createElement(icons.Cross, null)), /* @__PURE__ */ React76__default.default.createElement("span", {
+      className: FilePickerField_default.osdkFilePickerBrowse
+    }, buttonText))
+  );
+});
+function normalizeAccept(accept) {
+  if (accept == null) {
+    return void 0;
+  }
+  return Array.isArray(accept) ? accept.join(",") : accept;
+}
+function getDisplayText(value) {
+  if (value == null) {
+    return void 0;
+  }
+  if (Array.isArray(value)) {
+    return value.map((f) => f.name).join(", ");
+  }
+  return value.name;
+}
+
 // src/action-form/fields/NumberInputField.module.css
 var NumberInputField_default = {};
 
@@ -9266,12 +9365,29 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
         placeholder: fieldDefinition.placeholder
       }, fieldDefinition.fieldComponentProps));
     case "FILE_PICKER":
+      return /* @__PURE__ */ React76__default.default.createElement(FilePickerField, _extends13({
+        id: fieldDefinition.fieldKey,
+        value: coerceToFileValue(value),
+        onChange
+      }, fieldDefinition.fieldComponentProps));
     case "OBJECT_SET":
       return /* @__PURE__ */ React76__default.default.createElement("div", null, "Unsupported field type: ", fieldDefinition.fieldComponent);
     default:
       return assertUnreachableFieldComponent(fieldDefinition);
   }
 }
+function isFileArray(value) {
+  return value.every((v) => v instanceof File);
+}
+function coerceToFileValue(value) {
+  if (value instanceof File) {
+    return value;
+  }
+  if (Array.isArray(value) && isFileArray(value)) {
+    return value;
+  }
+  return null;
+}
 function assertUnreachableFieldComponent(value) {
   throw new Error(`Unhandled field component: ${String(value)}`);
 }