@rjsf/utils 6.0.0-beta.21 → 6.0.0-beta.23

package/dist/index.cjs

@@ -41,6 +41,7 @@ __export(index_exports, {
   DEFINITIONS_KEY: () => DEFINITIONS_KEY,
   DEPENDENCIES_KEY: () => DEPENDENCIES_KEY,
   DISCRIMINATOR_PATH: () => DISCRIMINATOR_PATH,
+  DateElement: () => DateElement,
   ENUM_KEY: () => ENUM_KEY,
   ERRORS_KEY: () => ERRORS_KEY,
   ErrorSchemaBuilder: () => ErrorSchemaBuilder,
@@ -71,6 +72,7 @@ __export(index_exports, {
   allowAdditionalItems: () => allowAdditionalItems,
   ariaDescribedByIds: () => ariaDescribedByIds,
   asNumber: () => asNumber,
+  bracketNameGenerator: () => bracketNameGenerator,
   buttonId: () => buttonId,
   canExpand: () => canExpand,
   createErrorHandler: () => createErrorHandler,
@@ -79,6 +81,7 @@ __export(index_exports, {
   dateRangeOptions: () => dateRangeOptions,
   deepEquals: () => deepEquals,
   descriptionId: () => descriptionId,
+  dotNotationNameGenerator: () => dotNotationNameGenerator,
   englishStringTranslator: () => englishStringTranslator,
   enumOptionsDeselectValue: () => enumOptionsDeselectValue,
   enumOptionsIndexForValue: () => enumOptionsIndexForValue,
@@ -151,6 +154,9 @@ __export(index_exports, {
   toFieldPathId: () => toFieldPathId,
   toPathSchema: () => toPathSchema,
   unwrapErrorHandler: () => unwrapErrorHandler,
+  useAltDateWidgetProps: () => useAltDateWidgetProps,
+  useDeepCompareMemo: () => useDeepCompareMemo,
+  useFileWidgetProps: () => useFileWidgetProps,
   utcToLocal: () => utcToLocal,
   validationDataMerge: () => validationDataMerge,
   withIdRefPrefix: () => withIdRefPrefix
@@ -3380,12 +3386,16 @@ function toErrorSchema(errors) {
 }
 
 // src/toFieldPathId.ts
-function toFieldPathId(fieldPath, globalFormOptions, parentPath) {
+function toFieldPathId(fieldPath, globalFormOptions, parentPath, isMultiValue) {
   const basePath = Array.isArray(parentPath) ? parentPath : parentPath?.path;
   const childPath = fieldPath === "" ? [] : [fieldPath];
   const path = basePath ? basePath.concat(...childPath) : childPath;
   const id = [globalFormOptions.idPrefix, ...path].join(globalFormOptions.idSeparator);
-  return { path, [ID_KEY]: id };
+  let name;
+  if (globalFormOptions.nameGenerator && path.length > 0) {
+    name = globalFormOptions.nameGenerator(path, globalFormOptions.idPrefix, isMultiValue);
+  }
+  return { path, [ID_KEY]: id, ...name !== void 0 && { name } };
 }
 
 // src/unwrapErrorHandler.ts
@@ -3407,6 +3417,209 @@ function unwrapErrorHandler(errorHandler) {
   }, {});
 }
 
+// src/useAltDateWidgetProps.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function readyForChange(state) {
+  return Object.values(state).every((value) => value !== -1);
+}
+function DateElement(props) {
+  const {
+    className = "form-control",
+    type,
+    range,
+    value,
+    select,
+    rootId,
+    name,
+    disabled,
+    readonly,
+    autofocus,
+    registry,
+    onBlur,
+    onFocus
+  } = props;
+  const id = `${rootId}_${type}`;
+  const { SelectWidget } = registry.widgets;
+  const onChange = (0, import_react2.useCallback)((value2) => select(type, value2), [select, type]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    SelectWidget,
+    {
+      schema: { type: "integer" },
+      id,
+      name,
+      className,
+      options: { enumOptions: dateRangeOptions(range[0], range[1]) },
+      placeholder: type,
+      value,
+      disabled,
+      readonly,
+      autofocus,
+      onChange,
+      onBlur,
+      onFocus,
+      registry,
+      label: "",
+      "aria-describedby": ariaDescribedByIds(rootId)
+    }
+  );
+}
+function useAltDateWidgetProps(props) {
+  const { time = false, disabled = false, readonly = false, options, onChange, value } = props;
+  const [state, setState] = (0, import_react2.useState)(parseDateString(value, time));
+  (0, import_react2.useEffect)(() => {
+    setState(parseDateString(value, time));
+  }, [time, value]);
+  const handleChange = (0, import_react2.useCallback)(
+    (property, value2) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value2 === "undefined" ? -1 : value2
+      };
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, time));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, time]
+  );
+  const handleClear = (0, import_react2.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(void 0);
+    },
+    [disabled, readonly, onChange]
+  );
+  const handleSetNow = (0, import_react2.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
+      onChange(toDateString(nextState, time));
+    },
+    [disabled, readonly, time, onChange]
+  );
+  const elements = (0, import_react2.useMemo)(
+    () => getDateElementProps(
+      state,
+      time,
+      options.yearsRange,
+      options.format
+    ),
+    [state, time, options.yearsRange, options.format]
+  );
+  return { elements, handleChange, handleClear, handleSetNow };
+}
+
+// src/useDeepCompareMemo.ts
+var import_react3 = require("react");
+var import_isEqual3 = __toESM(require("lodash/isEqual"), 1);
+function useDeepCompareMemo(newValue) {
+  const valueRef = (0, import_react3.useRef)(newValue);
+  if (!(0, import_isEqual3.default)(newValue, valueRef.current)) {
+    valueRef.current = newValue;
+  }
+  return valueRef.current;
+}
+
+// src/useFileWidgetProps.ts
+var import_react4 = require("react");
+function addNameToDataURL(dataURL, name) {
+  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
+}
+function processFile(file) {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === "string") {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+function processFiles(files) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+function extractFileInfo(dataURLs) {
+  return dataURLs.reduce((acc, dataURL) => {
+    if (!dataURL) {
+      return acc;
+    }
+    try {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return [
+        ...acc,
+        {
+          dataURL,
+          name,
+          size: blob.size,
+          type: blob.type
+        }
+      ];
+    } catch {
+      return acc;
+    }
+  }, []);
+}
+function useFileWidgetProps(value, onChange, multiple = false) {
+  const values = (0, import_react4.useMemo)(() => {
+    if (multiple && value) {
+      return Array.isArray(value) ? value : [value];
+    }
+    return [];
+  }, [value, multiple]);
+  const filesInfo = (0, import_react4.useMemo)(
+    () => Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value || ""]),
+    [value]
+  );
+  const handleChange = (0, import_react4.useCallback)(
+    (files) => {
+      processFiles(files).then((filesInfoEvent) => {
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL || null);
+        if (multiple) {
+          onChange(values.concat(...newValue));
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [values, multiple, onChange]
+  );
+  const handleRemove = (0, import_react4.useCallback)(
+    (index) => {
+      if (multiple) {
+        const newValue = values.filter((_, i) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(void 0);
+      }
+    },
+    [values, multiple, onChange]
+  );
+  return { filesInfo, handleChange, handleRemove };
+}
+
 // src/utcToLocal.ts
 function utcToLocal(jsonDate) {
   if (!jsonDate) {
@@ -3473,6 +3686,26 @@ function withIdRefPrefix(schemaNode) {
   return schemaNode;
 }
 
+// src/nameGenerators.ts
+var bracketNameGenerator = (path, idPrefix, isMultiValue) => {
+  if (!path || path.length === 0) {
+    return idPrefix;
+  }
+  const baseName = path.reduce((acc, pathUnit, index) => {
+    if (index === 0) {
+      return `${idPrefix}[${String(pathUnit)}]`;
+    }
+    return `${acc}[${String(pathUnit)}]`;
+  }, "");
+  return isMultiValue ? `${baseName}[]` : baseName;
+};
+var dotNotationNameGenerator = (path, idPrefix, _isMultiValue) => {
+  if (!path || path.length === 0) {
+    return idPrefix;
+  }
+  return `${idPrefix}.${path.map(String).join(".")}`;
+};
+
 // src/enums.ts
 var TranslatableString = /* @__PURE__ */ ((TranslatableString2) => {
   TranslatableString2["ArrayItemTitle"] = "Item";
@@ -3498,6 +3731,8 @@ var TranslatableString = /* @__PURE__ */ ((TranslatableString2) => {
   TranslatableString2["OptionalObjectAdd"] = "Add data for optional field";
   TranslatableString2["OptionalObjectRemove"] = "Remove data for optional field";
   TranslatableString2["OptionalObjectEmptyMsg"] = "No data for optional field";
+  TranslatableString2["Type"] = "Type";
+  TranslatableString2["Value"] = "Value";
   TranslatableString2["UnknownFieldType"] = "Unknown field type %1";
   TranslatableString2["OptionPrefix"] = "Option %1";
   TranslatableString2["TitleOptionPrefix"] = "%1 option %2";