@osdk/react-components 0.3.0 → 0.4.0-main-90a01d202dfa1e497125bd6cfcdc8175278fb7ec

package/build/cjs/public/experimental.cjs

@@ -8801,10 +8801,206 @@ function PdfViewer({
   }, pdfViewerProps));
 }
 var typedReactMemo = React75__default.default.memo;
+function useIsMounted() {
+  const isMountedRef = React75.useRef(true);
+  React75.useEffect(function trackMountedState() {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  return isMountedRef;
+}
+
+// src/shared/hooks/useAsyncAction.ts
+function useAsyncAction(action) {
+  const [isPending, setIsPending] = React75.useState(false);
+  const [error, setError] = React75.useState(void 0);
+  const isMountedRef = useIsMounted();
+  const execute = React75.useCallback(async (...args) => {
+    setError(void 0);
+    setIsPending(true);
+    try {
+      await action(...args);
+    } catch (err) {
+      if (isMountedRef.current) {
+        setError(err);
+      }
+    } finally {
+      if (isMountedRef.current) {
+        setIsPending(false);
+      }
+    }
+  }, [action, isMountedRef]);
+  const clearError = React75.useCallback(() => {
+    setError(void 0);
+  }, []);
+  return {
+    isPending,
+    error,
+    execute,
+    clearError
+  };
+}
 
 // src/action-form/BaseForm.module.css
 var BaseForm_default = {};
 
+// src/action-form/utils/extractValidationRules.ts
+function extractValidationRules(fieldDef) {
+  const rules = {};
+  if (fieldDef.isRequired) {
+    rules.required = getMessage(fieldDef, {
+      type: "required"
+    });
+  }
+  const validateFns = {};
+  switch (fieldDef.fieldComponent) {
+    case "NUMBER_INPUT": {
+      const {
+        min,
+        max
+      } = fieldDef.fieldComponentProps;
+      if (min != null) {
+        const msg = getMessage(fieldDef, {
+          type: "min",
+          min
+        });
+        validateFns.min = (value) => typeof value === "number" && value < min ? msg : true;
+      }
+      if (max != null) {
+        const msg = getMessage(fieldDef, {
+          type: "max",
+          max
+        });
+        validateFns.max = (value) => typeof value === "number" && value > max ? msg : true;
+      }
+      break;
+    }
+    case "TEXT_INPUT":
+    case "TEXT_AREA": {
+      const {
+        minLength,
+        maxLength
+      } = fieldDef.fieldComponentProps;
+      if (minLength != null) {
+        rules.minLength = {
+          value: minLength,
+          message: getMessage(fieldDef, {
+            type: "minLength",
+            minLength
+          })
+        };
+      }
+      if (maxLength != null) {
+        rules.maxLength = {
+          value: maxLength,
+          message: getMessage(fieldDef, {
+            type: "maxLength",
+            maxLength
+          })
+        };
+      }
+      break;
+    }
+    case "DATETIME_PICKER": {
+      const {
+        min,
+        max
+      } = fieldDef.fieldComponentProps;
+      if (min != null) {
+        const msg = getMessage(fieldDef, {
+          type: "min",
+          min
+        });
+        validateFns.min = (value) => value instanceof Date && value.getTime() < min.getTime() ? msg : true;
+      }
+      if (max != null) {
+        const msg = getMessage(fieldDef, {
+          type: "max",
+          max
+        });
+        validateFns.max = (value) => value instanceof Date && value.getTime() > max.getTime() ? msg : true;
+      }
+      break;
+    }
+    case "FILE_PICKER": {
+      const {
+        maxSize
+      } = fieldDef.fieldComponentProps;
+      if (maxSize != null) {
+        const msg = getMessage(fieldDef, {
+          type: "maxSize",
+          maxSize
+        });
+        validateFns.maxSize = (value) => {
+          if (value instanceof File) {
+            return value.size > maxSize ? msg : true;
+          }
+          if (Array.isArray(value)) {
+            const oversized = value.some((f) => f instanceof File && f.size > maxSize);
+            return oversized ? msg : true;
+          }
+          return true;
+        };
+      }
+      break;
+    }
+  }
+  if (fieldDef.validate != null) {
+    const userValidate = fieldDef.validate;
+    validateFns.custom = async (value) => {
+      const result = await userValidate(value);
+      if (result == null) {
+        return true;
+      }
+      return getMessage(fieldDef, {
+        type: "validate",
+        message: result
+      });
+    };
+  }
+  if (Object.keys(validateFns).length > 0) {
+    rules.validate = validateFns;
+  }
+  return rules;
+}
+function getMessage(fieldDef, error) {
+  return fieldDef.onValidationError?.(error) ?? getDefaultMessage(error);
+}
+function getDefaultMessage(error) {
+  switch (error.type) {
+    case "required":
+      return "This field is required";
+    case "min":
+      return `Must be at least ${formatConstraint(error.min)}`;
+    case "max":
+      return `Must be at most ${formatConstraint(error.max)}`;
+    case "minLength":
+      return `Must be at least ${error.minLength} characters`;
+    case "maxLength":
+      return `Must be at most ${error.maxLength} characters`;
+    case "maxSize":
+      return `File must be smaller than ${formatBytes(error.maxSize)}`;
+    case "validate":
+      return error.message;
+  }
+}
+function formatConstraint(value) {
+  if (value instanceof Date) {
+    return value.toLocaleDateString();
+  }
+  return String(value);
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 // src/action-form/FormField.module.css
 var FormField_default = {};
 
@@ -8815,10 +9011,12 @@ var FormField = /* @__PURE__ */ React75.memo(function FormFieldFn({
   isRequired,
   helperText,
   error,
+  onBlur,
   children
 }) {
   return /* @__PURE__ */ React75__default.default.createElement("div", {
-    className: FormField_default.osdkFormField
+    className: FormField_default.osdkFormField,
+    onBlur
   }, label != null && /* @__PURE__ */ React75__default.default.createElement("label", {
     className: FormField_default.osdkFormFieldLabel,
     htmlFor: fieldKey
@@ -8859,6 +9057,7 @@ function DatetimePickerField({
   id,
   value,
   onChange,
+  error,
   min,
   max,
   placeholder,
@@ -8910,7 +9109,8 @@ function DatetimePickerField({
   }, /* @__PURE__ */ React75__default.default.createElement(popover.Popover.Trigger, {
     id,
     className: classnames13__default.default(DatetimePickerField_default.triggerButton, !hasValue && DatetimePickerField_default.triggerButtonPlaceholder),
-    "aria-label": hasValue ? void 0 : "Select date"
+    "aria-label": hasValue ? void 0 : "Select date",
+    "aria-invalid": error != null || void 0
   }, displayText), /* @__PURE__ */ React75__default.default.createElement(popover.Popover.Portal, null, /* @__PURE__ */ React75__default.default.createElement(popover.Popover.Positioner, {
     sideOffset: 4
   }, /* @__PURE__ */ React75__default.default.createElement(popover.Popover.Popup, {
@@ -9099,9 +9299,12 @@ var FilePickerField = /* @__PURE__ */ React75.memo(function FilePickerFieldFn({
   id,
   value,
   onChange,
+  error,
   isMulti,
   accept,
-  // TODO: implement maxSize validation in a follow-up
+  // maxSize is enforced by form-level validation (extractValidationRules),
+  // not here. Silently dropping oversized files would leave the user with
+  // no indication of why their selection disappeared.
   maxSize: _maxSize,
   text = "No file chosen",
   buttonText = "Browse"
@@ -9152,7 +9355,8 @@ var FilePickerField = /* @__PURE__ */ React75.memo(function FilePickerFieldFn({
       role: "button",
       "aria-label": "Choose file",
       onClick: openFileDialog,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      "aria-invalid": error != null || void 0
     }, /* @__PURE__ */ React75__default.default.createElement("input", {
       ref: inputRef,
       type: "file",
@@ -9202,9 +9406,10 @@ function NumberInputField({
   id,
   value,
   onChange,
+  error,
   placeholder,
-  min: _min,
-  max: _max,
+  min,
+  max,
   step
 }) {
   const [displayValue, setDisplayValue] = React75.useState(() => formatNumberForDisplay(value));
@@ -9226,11 +9431,11 @@ function NumberInputField({
   const applyStep = React75.useCallback((direction) => {
     const current = parseNumericValue(displayValue) ?? 0;
     const delta = direction * (step ?? DEFAULT_STEP);
-    const next = current + delta;
+    const next = clamp(current + delta, min, max);
     const formatted = formatNumberForDisplay(next);
     setDisplayValue(formatted);
     onChange?.(next);
-  }, [displayValue, onChange, step]);
+  }, [displayValue, onChange, step, min, max]);
   const handleKeyDown = React75.useCallback((e) => {
     if (e.key !== "ArrowUp" && e.key !== "ArrowDown") {
       return;
@@ -9245,7 +9450,8 @@ function NumberInputField({
     applyStep(-1);
   }, [applyStep]);
   return /* @__PURE__ */ React75__default.default.createElement("div", {
-    className: NumberInputField_default.osdkNumberInputWrapper
+    className: NumberInputField_default.osdkNumberInputWrapper,
+    "aria-invalid": error != null || void 0
   }, /* @__PURE__ */ React75__default.default.createElement(input.Input, {
     id,
     className: NumberInputField_default.osdkNumberInputField,
@@ -9286,6 +9492,11 @@ function parseNumericValue(text) {
 function formatNumberForDisplay(value) {
   return value != null ? String(value) : "";
 }
+function clamp(value, min, max) {
+  if (min != null && value < min) return min;
+  if (max != null && value > max) return max;
+  return value;
+}
 var BlueprintIcon = /* @__PURE__ */ React75__default.default.memo(function BlueprintIconFn({
   icon,
   size
@@ -9472,6 +9683,7 @@ function TextAreaField({
   id,
   value,
   onChange,
+  error,
   placeholder,
   rows,
   wrap,
@@ -9491,13 +9703,15 @@ function TextAreaField({
     placeholder,
     minLength,
     maxLength,
-    render: renderTextarea
+    render: renderTextarea,
+    "aria-invalid": error != null || void 0
   });
 }
 function TextInputField({
   id,
   value,
   onChange,
+  error,
   placeholder,
   minLength,
   maxLength
@@ -9510,7 +9724,8 @@ function TextInputField({
     onValueChange: onChange,
     placeholder,
     minLength,
-    maxLength
+    maxLength,
+    "aria-invalid": error != null || void 0
   });
 }
 
@@ -9527,7 +9742,9 @@ function _extends13() {
 var FormFieldRenderer = /* @__PURE__ */ React75.memo(function FormFieldRendererFn({
   fieldDefinition,
   value,
-  onFieldValueChange
+  onFieldValueChange,
+  onBlur,
+  error
 }) {
   const {
     label,
@@ -9539,30 +9756,35 @@ var FormFieldRenderer = /* @__PURE__ */ React75.memo(function FormFieldRendererF
     label,
     isRequired,
     fieldKey: fieldDefinition.fieldKey,
-    helperText: helperTextPlacement !== "tooltip" ? helperText : void 0
-  }, renderFieldComponent(fieldDefinition, value, onFieldValueChange));
+    helperText: helperTextPlacement !== "tooltip" ? helperText : void 0,
+    error,
+    onBlur
+  }, renderFieldComponent(fieldDefinition, value, onFieldValueChange, error));
 });
-function renderFieldComponent(fieldDefinition, value, onChange) {
+function renderFieldComponent(fieldDefinition, value, onChange, error) {
   switch (fieldDefinition.fieldComponent) {
     case "TEXT_INPUT":
       return /* @__PURE__ */ React75__default.default.createElement(TextInputField, _extends13({
         id: fieldDefinition.fieldKey,
         value: value != null ? String(value) : "",
         onChange,
-        placeholder: fieldDefinition.placeholder
+        placeholder: fieldDefinition.placeholder,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "TEXT_AREA":
       return /* @__PURE__ */ React75__default.default.createElement(TextAreaField, _extends13({
         id: fieldDefinition.fieldKey,
         value: value != null ? String(value) : "",
         onChange,
-        placeholder: fieldDefinition.placeholder
+        placeholder: fieldDefinition.placeholder,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "DROPDOWN": {
       return /* @__PURE__ */ React75__default.default.createElement(DropdownField, _extends13({
         value,
         onChange,
-        placeholder: fieldDefinition.placeholder
+        placeholder: fieldDefinition.placeholder,
+        error
       }, fieldDefinition.fieldComponentProps));
     }
     case "DATETIME_PICKER":
@@ -9570,32 +9792,37 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
         id: fieldDefinition.fieldKey,
         placeholder: fieldDefinition.placeholder,
         value: value instanceof Date ? value : null,
-        onChange
+        onChange,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "RADIO_BUTTONS":
       return /* @__PURE__ */ React75__default.default.createElement(RadioButtonsField, _extends13({
         id: fieldDefinition.fieldKey,
         value,
-        onChange
+        onChange,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "CUSTOM":
       return /* @__PURE__ */ React75__default.default.createElement(CustomField, _extends13({
         id: fieldDefinition.fieldKey,
         value,
-        onChange
+        onChange,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "NUMBER_INPUT":
       return /* @__PURE__ */ React75__default.default.createElement(NumberInputField, _extends13({
         id: fieldDefinition.fieldKey,
         value: typeof value === "number" ? value : null,
         onChange,
-        placeholder: fieldDefinition.placeholder
+        placeholder: fieldDefinition.placeholder,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "FILE_PICKER":
       return /* @__PURE__ */ React75__default.default.createElement(FilePickerField, _extends13({
         id: fieldDefinition.fieldKey,
         value: coerceToFileValue(value),
-        onChange
+        onChange,
+        error
       }, fieldDefinition.fieldComponentProps));
     case "OBJECT_SET":
       return /* @__PURE__ */ React75__default.default.createElement(ObjectSetField, _extends13({
@@ -9622,28 +9849,47 @@ function assertUnreachableFieldComponent(value) {
 }
 
 // src/action-form/fields/FieldBridge.tsx
+var SELECT_LIKE_FIELDS = /* @__PURE__ */ new Set(["RADIO_BUTTONS", "DROPDOWN"]);
 var FieldBridge = /* @__PURE__ */ React75.memo(function FieldBridgeFn({
   fieldDef,
   control,
   onExternalChange
 }) {
+  const rules = React75.useMemo(() => extractValidationRules(fieldDef), [fieldDef]);
   const {
     field: {
       onChange,
+      onBlur,
       value
+    },
+    fieldState: {
+      error: fieldError
     }
   } = reactHookForm.useController({
     name: fieldDef.fieldKey,
-    control
+    control,
+    rules
   });
+  const isSelectLike = SELECT_LIKE_FIELDS.has(fieldDef.fieldComponent);
   const handleChange = React75.useCallback((newValue) => {
     onChange(newValue);
     onExternalChange?.(fieldDef.fieldKey, newValue);
-  }, [onChange, onExternalChange, fieldDef.fieldKey]);
+    if (isSelectLike) {
+      onBlur();
+    }
+  }, [onChange, onBlur, onExternalChange, fieldDef.fieldKey, isSelectLike]);
+  const handleBlur = React75.useCallback((e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    onBlur();
+  }, [onBlur]);
   return /* @__PURE__ */ React75__default.default.createElement(FormFieldRenderer, {
     value,
     fieldDefinition: fieldDef,
-    onFieldValueChange: handleChange
+    onFieldValueChange: handleChange,
+    onBlur: handleBlur,
+    error: fieldError?.message
   });
 });
 
@@ -9660,6 +9906,7 @@ var FormHeader = /* @__PURE__ */ React75.memo(function FormHeaderFn({
 });
 
 // src/action-form/BaseForm.tsx
+var TOOLTIP_TRIGGER_DELAY_MS = 200;
 var BaseForm = /* @__PURE__ */ React75.memo(function BaseFormFn({
   formTitle,
   fieldDefinitions,
@@ -9675,20 +9922,54 @@ var BaseForm = /* @__PURE__ */ React75.memo(function BaseFormFn({
   const defaultValues = React75.useMemo(() => buildDefaultValues(fieldDefinitions), [fieldDefinitions]);
   const {
     control,
-    handleSubmit: rhfHandleSubmit
+    trigger,
+    getValues,
+    formState: {
+      errors
+    }
   } = reactHookForm.useForm({
+    // Validate on blur first, then revalidate on change after the first
+    // error. This gives the user a chance to finish typing before seeing
+    // errors, while staying responsive once an error is surfaced.
+    mode: "onTouched",
     ...isControlled ? {
       values: controlledFormState
     } : {
       defaultValues
     }
   });
-  const onFormSubmit = React75.useCallback((rhfValues) => {
-    onSubmit(controlledFormState ?? rhfValues);
-  }, [onSubmit, controlledFormState]);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = React75.useState(false);
+  const {
+    isPending: isSubmitting,
+    error: submissionError,
+    execute: executeSubmit,
+    clearError
+  } = useAsyncAction(onSubmit);
+  const submissionErrorMessage = submissionError != null ? submissionError instanceof Error ? submissionError.message : "Submission failed" : void 0;
+  const handleFormSubmit = React75.useCallback(async (e) => {
+    e.preventDefault();
+    setHasAttemptedSubmit(true);
+    const isValid = await trigger();
+    if (!isValid) {
+      return;
+    }
+    await executeSubmit(controlledFormState ?? getValues());
+  }, [trigger, executeSubmit, controlledFormState, getValues]);
+  const handleFieldChange = React75.useCallback((fieldKey, value) => {
+    clearError();
+    onFieldValueChange?.(fieldKey, value);
+  }, [clearError, onFieldValueChange]);
+  const isFormPending = isPending || isSubmitting;
+  const labelByFieldKey = React75.useMemo(() => new Map(fieldDefinitions.map((d) => [d.fieldKey, d.label])), [fieldDefinitions]);
+  const errorEntries = Object.entries(errors).map(([key, entry]) => ({
+    label: labelByFieldKey.get(key) ?? key,
+    message: entry?.message ?? "Invalid"
+  }));
+  const areErrorsPresent = errorEntries.length > 0;
+  const buttonErrorMessage = areErrorsPresent ? "Some fields are invalid" : submissionErrorMessage;
   return /* @__PURE__ */ React75__default.default.createElement("form", {
     className: classnames13__default.default(BaseForm_default.osdkForm, className),
-    onSubmit: rhfHandleSubmit(onFormSubmit)
+    onSubmit: handleFormSubmit
   }, formTitle != null && /* @__PURE__ */ React75__default.default.createElement(FormHeader, {
     title: formTitle
   }), isLoading && fieldDefinitions.length === 0 && /* @__PURE__ */ React75__default.default.createElement("div", {
@@ -9699,14 +9980,18 @@ var BaseForm = /* @__PURE__ */ React75.memo(function BaseFormFn({
     key: fieldDef.fieldKey,
     fieldDef,
     control,
-    onExternalChange: onFieldValueChange
+    onExternalChange: handleFieldChange
   }))), /* @__PURE__ */ React75__default.default.createElement("div", {
     className: BaseForm_default.osdkFormFooter
-  }, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.ActionButton, {
-    type: "submit",
-    variant: "primary",
-    disabled: isSubmitDisabled || isPending
-  }, isPending ? "Submitting\u2026" : "Submit")));
+  }, /* @__PURE__ */ React75__default.default.createElement(ErrorIndicator, {
+    errorEntries
+  }), /* @__PURE__ */ React75__default.default.createElement("div", {
+    className: BaseForm_default.osdkFormSubmitButton
+  }, /* @__PURE__ */ React75__default.default.createElement(SubmitButton, {
+    isPending: isFormPending,
+    isSubmitDisabled: isSubmitDisabled || hasAttemptedSubmit && areErrorsPresent,
+    errorMessage: buttonErrorMessage
+  }))));
 });
 function buildDefaultValues(fieldDefinitions) {
   const values = {};
@@ -9718,6 +10003,45 @@ function buildDefaultValues(fieldDefinitions) {
   }
   return values;
 }
+var SubmitButton = /* @__PURE__ */ React75.memo(function SubmitButtonFn({
+  isPending,
+  isSubmitDisabled,
+  errorMessage
+}) {
+  const buttonLabel = isPending ? "Submitting\u2026" : "Submit";
+  const button = /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.ActionButton, {
+    type: "submit",
+    variant: "primary",
+    disabled: isSubmitDisabled || isPending
+  }, buttonLabel);
+  if (errorMessage == null) {
+    return button;
+  }
+  return /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Root, {
+    defaultOpen: true
+  }, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Trigger, {
+    delay: TOOLTIP_TRIGGER_DELAY_MS
+  }, button), /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Portal, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Positioner, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Popup, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Arrow, null), errorMessage))));
+});
+function ErrorIndicator({
+  errorEntries
+}) {
+  if (errorEntries.length === 0) {
+    return null;
+  }
+  const count = errorEntries.length;
+  return /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Root, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Trigger, {
+    delay: TOOLTIP_TRIGGER_DELAY_MS
+  }, /* @__PURE__ */ React75__default.default.createElement("span", {
+    className: BaseForm_default.osdkFormErrorIndicator
+  }, /* @__PURE__ */ React75__default.default.createElement(icons.Error, {
+    size: 14
+  }), count === 1 ? "1 issue" : `${count} issues`)), /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Portal, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Positioner, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Popup, null, /* @__PURE__ */ React75__default.default.createElement(chunkNEWX2ZXY_cjs.Tooltip.Arrow, null), /* @__PURE__ */ React75__default.default.createElement("ul", {
+    className: BaseForm_default.osdkFormErrorList
+  }, errorEntries.map((entry) => /* @__PURE__ */ React75__default.default.createElement("li", {
+    key: entry.label
+  }, /* @__PURE__ */ React75__default.default.createElement("strong", null, entry.label, ":"), " ", entry.message)))))));
+}
 
 // src/action-form/utils/coerceFieldValue.ts
 function coerceFieldValue(parameterType, rawValue) {