UNPKG

@rjsf/core

Version:

A simple React component capable of building HTML forms out of a JSON schema.

1,395 lines (1,388 loc) 189 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/index.ts var index_exports = {}; __export(index_exports, { RichDescription: () => RichDescription, RichHelp: () => RichHelp, SchemaExamples: () => SchemaExamples, default: () => index_default, getDefaultRegistry: () => getDefaultRegistry, getTestRegistry: () => getTestRegistry, withTheme: () => withTheme }); module.exports = __toCommonJS(index_exports); // src/components/Form.tsx var import_react21 = require("react"); var import_utils50 = require("@rjsf/utils"); var import_cloneDeep2 = __toESM(require("lodash/cloneDeep"), 1); var import_get5 = __toESM(require("lodash/get"), 1); var import_isEmpty4 = __toESM(require("lodash/isEmpty"), 1); var import_pick = __toESM(require("lodash/pick"), 1); var import_set5 = __toESM(require("lodash/set"), 1); var import_toPath = __toESM(require("lodash/toPath"), 1); var import_unset = __toESM(require("lodash/unset"), 1); // src/getDefaultRegistry.ts var import_utils49 = require("@rjsf/utils"); // src/components/fields/ArrayField.tsx var import_react = require("react"); var import_utils = require("@rjsf/utils"); var import_cloneDeep = __toESM(require("lodash/cloneDeep"), 1); var import_isObject = __toESM(require("lodash/isObject"), 1); var import_set = __toESM(require("lodash/set"), 1); var import_uniqueId = __toESM(require("lodash/uniqueId"), 1); var import_jsx_runtime = require("react/jsx-runtime"); function generateRowId() { return (0, import_uniqueId.default)("rjsf-array-item-"); } function generateKeyedFormData(formData) { return !Array.isArray(formData) ? [] : formData.map((item) => { return { key: generateRowId(), item }; }); } function keyedToPlainFormData(keyedFormData) { if (Array.isArray(keyedFormData)) { return keyedFormData.map((keyedItem) => keyedItem.item); } return []; } function isItemRequired(itemSchema) { if (Array.isArray(itemSchema.type)) { return !itemSchema.type.includes("null"); } return itemSchema.type !== "null"; } function canAddItem(registry, schema, formItems, uiSchema) { let { addable } = (0, import_utils.getUiOptions)(uiSchema, registry.globalUiOptions); if (addable !== false) { if (schema.maxItems !== void 0) { addable = formItems.length < schema.maxItems; } else { addable = true; } } return addable; } function computeItemUiSchema(uiSchema, item, index, formContext) { if (typeof uiSchema.items === "function") { try { const result = uiSchema.items(item, index, formContext); return result; } catch (e) { console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e); return void 0; } } else { return uiSchema.items; } } function getNewFormDataRow(registry, schema) { const { schemaUtils, globalFormOptions } = registry; let itemSchema = schema.items; if (globalFormOptions.useFallbackUiForUnsupportedType && !itemSchema) { itemSchema = {}; } else if ((0, import_utils.isFixedItems)(schema) && (0, import_utils.allowAdditionalItems)(schema)) { itemSchema = schema.additionalItems; } return schemaUtils.getDefaultFormState(itemSchema); } function ArrayAsMultiSelect(props) { const { schema, fieldPathId, uiSchema, formData: items = [], disabled = false, readonly = false, autofocus = false, required = false, placeholder, onBlur, onFocus, registry, rawErrors, name, onSelectChange } = props; const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry; const itemsSchema = schemaUtils.retrieveSchema(schema.items, items); const enumOptions = (0, import_utils.optionsList)(itemsSchema, uiSchema); const { widget = "select", title: uiTitle, ...options } = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions); const Widget = (0, import_utils.getWidget)(schema, widget, widgets2); const label = uiTitle ?? schema.title ?? name; const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions); const multiValueFieldPathId = (0, import_utils.useDeepCompareMemo)((0, import_utils.toFieldPathId)("", globalFormOptions, fieldPathId, true)); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( Widget, { id: multiValueFieldPathId[import_utils.ID_KEY], name, multiple: true, onChange: onSelectChange, onBlur, onFocus, options: { ...options, enumOptions }, schema, uiSchema, registry, value: items, disabled, readonly, required, label, hideLabel: !displayLabel, placeholder, autofocus, rawErrors, htmlName: multiValueFieldPathId.name } ); } function ArrayAsCustomWidget(props) { const { schema, fieldPathId, uiSchema, disabled = false, readonly = false, autofocus = false, required = false, hideError, placeholder, onBlur, onFocus, formData: items = [], registry, rawErrors, name, onSelectChange } = props; const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry; const { widget, title: uiTitle, ...options } = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions); const Widget = (0, import_utils.getWidget)(schema, widget, widgets2); const label = uiTitle ?? schema.title ?? name; const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions); const multiValueFieldPathId = (0, import_utils.useDeepCompareMemo)((0, import_utils.toFieldPathId)("", globalFormOptions, fieldPathId, true)); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( Widget, { id: multiValueFieldPathId[import_utils.ID_KEY], name, multiple: true, onChange: onSelectChange, onBlur, onFocus, options, schema, uiSchema, registry, value: items, disabled, readonly, hideError, required, label, hideLabel: !displayLabel, placeholder, autofocus, rawErrors, htmlName: multiValueFieldPathId.name } ); } function ArrayAsFiles(props) { const { schema, uiSchema, fieldPathId, name, disabled = false, readonly = false, autofocus = false, required = false, onBlur, onFocus, registry, formData: items = [], rawErrors, onSelectChange } = props; const { widgets: widgets2, schemaUtils, globalFormOptions, globalUiOptions } = registry; const { widget = "files", title: uiTitle, ...options } = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions); const Widget = (0, import_utils.getWidget)(schema, widget, widgets2); const label = uiTitle ?? schema.title ?? name; const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions); const multiValueFieldPathId = (0, import_utils.useDeepCompareMemo)((0, import_utils.toFieldPathId)("", globalFormOptions, fieldPathId, true)); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( Widget, { options, id: multiValueFieldPathId[import_utils.ID_KEY], name, multiple: true, onChange: onSelectChange, onBlur, onFocus, schema, uiSchema, value: items, disabled, readonly, required, registry, autofocus, rawErrors, label, hideLabel: !displayLabel, htmlName: multiValueFieldPathId.name } ); } function ArrayFieldItem(props) { const { itemKey, index, name, disabled, hideError, readonly, registry, uiOptions, parentUiSchema, canAdd, canRemove = true, canMoveUp, canMoveDown, itemSchema, itemData, itemUiSchema, itemFieldPathId, itemErrorSchema, autofocus, onBlur, onFocus, onChange, rawErrors, totalItems, title, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems } = props; const { schemaUtils, fields: { ArraySchemaField, SchemaField: SchemaField2 }, globalUiOptions } = registry; const fieldPathId = (0, import_utils.useDeepCompareMemo)(itemFieldPathId); const ItemSchemaField = ArraySchemaField || SchemaField2; const ArrayFieldItemTemplate2 = (0, import_utils.getTemplate)( "ArrayFieldItemTemplate", registry, uiOptions ); const displayLabel = schemaUtils.getDisplayLabel(itemSchema, itemUiSchema, globalUiOptions); const { description } = (0, import_utils.getUiOptions)(itemUiSchema); const hasDescription = !!description || !!itemSchema.description; const { orderable = true, removable = true, copyable = false } = uiOptions; const has4 = { moveUp: orderable && canMoveUp, moveDown: orderable && canMoveDown, copy: copyable && canAdd, remove: removable && canRemove, toolbar: false }; has4.toolbar = Object.keys(has4).some((key) => has4[key]); const onAddItem = (0, import_react.useCallback)( (event) => { handleAddItem(event, index + 1); }, [handleAddItem, index] ); const onCopyItem = (0, import_react.useCallback)( (event) => { handleCopyItem(event, index); }, [handleCopyItem, index] ); const onRemoveItem = (0, import_react.useCallback)( (event) => { handleRemoveItem(event, index); }, [handleRemoveItem, index] ); const onMoveUpItem = (0, import_react.useCallback)( (event) => { handleReorderItems(event, index, index - 1); }, [handleReorderItems, index] ); const onMoveDownItem = (0, import_react.useCallback)( (event) => { handleReorderItems(event, index, index + 1); }, [handleReorderItems, index] ); const templateProps = { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( ItemSchemaField, { name, title, index, schema: itemSchema, uiSchema: itemUiSchema, formData: itemData, errorSchema: itemErrorSchema, fieldPathId, required: isItemRequired(itemSchema), onChange, onBlur, onFocus, registry, disabled, readonly, hideError, autofocus, rawErrors } ), buttonsProps: { fieldPathId, disabled, readonly, canAdd, hasCopy: has4.copy, hasMoveUp: has4.moveUp, hasMoveDown: has4.moveDown, hasRemove: has4.remove, index, totalItems, onAddItem, onCopyItem, onRemoveItem, onMoveUpItem, onMoveDownItem, registry, schema: itemSchema, uiSchema: itemUiSchema }, itemKey, className: "rjsf-array-item", disabled, hasToolbar: has4.toolbar, index, totalItems, readonly, registry, schema: itemSchema, uiSchema: itemUiSchema, parentUiSchema, displayLabel, hasDescription }; return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFieldItemTemplate2, { ...templateProps }); } function NormalArray(props) { const { schema, uiSchema = {}, errorSchema, fieldPathId, formData: formDataFromProps, name, title, disabled = false, readonly = false, autofocus = false, required = false, hideError = false, registry, onBlur, onFocus, rawErrors, onChange, keyedFormData, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems } = props; const fieldTitle = schema.title || title || name; const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry; const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2; const uiOptions = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions); const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : {}; const itemsSchema = schemaUtils.retrieveSchema(_schemaItems); const formData = keyedToPlainFormData(keyedFormData); const renderOptionalField = (0, import_utils.shouldRenderOptionalField)(registry, schema, required, uiSchema); const hasFormData = (0, import_utils.isFormDataAvailable)(formDataFromProps); const canAdd = canAddItem(registry, schema, formData, uiSchema) && (!renderOptionalField || hasFormData); const actualFormData = hasFormData ? keyedFormData : []; const extraClass = renderOptionalField ? " rjsf-optional-array-field" : ""; const childFieldPathId = props.childFieldPathId ?? fieldPathId; const optionalDataControl = renderOptionalField ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionalDataControlsField2, { ...props, fieldPathId: childFieldPathId }) : void 0; const arrayProps = { canAdd, items: actualFormData.map((keyedItem, index) => { const { key, item } = keyedItem; const itemCast = item; const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast); const itemErrorSchema = errorSchema ? errorSchema[index] : void 0; const itemFieldPathId = (0, import_utils.toFieldPathId)(index, globalFormOptions, childFieldPathId); const itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext); const itemProps = { itemKey: key, index, name: name && `${name}-${index}`, registry, uiOptions, hideError, readonly, disabled, required, title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0, canAdd, canMoveUp: index > 0, canMoveDown: index < formData.length - 1, itemSchema, itemFieldPathId, itemErrorSchema, itemData: itemCast, itemUiSchema, autofocus: autofocus && index === 0, onBlur, onFocus, rawErrors, totalItems: keyedFormData.length, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems, onChange }; return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFieldItem, { ...itemProps }, key); }), className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}${extraClass}`, disabled, fieldPathId, uiSchema, onAddClick: handleAddItem, readonly, required, schema, title: fieldTitle, formData, rawErrors, registry, optionalDataControl }; const Template = (0, import_utils.getTemplate)("ArrayFieldTemplate", registry, uiOptions); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Template, { ...arrayProps }); } function FixedArray(props) { const { schema, uiSchema = {}, formData, errorSchema, fieldPathId, name, title, disabled = false, readonly = false, autofocus = false, required = false, hideError = false, registry, onBlur, onFocus, rawErrors, keyedFormData, onChange, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems } = props; let { formData: items = [] } = props; const fieldTitle = schema.title || title || name; const { schemaUtils, fields: fields2, formContext, globalFormOptions, globalUiOptions } = registry; const uiOptions = (0, import_utils.getUiOptions)(uiSchema, globalUiOptions); const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2; const renderOptionalField = (0, import_utils.shouldRenderOptionalField)(registry, schema, required, uiSchema); const hasFormData = (0, import_utils.isFormDataAvailable)(formData); const _schemaItems = (0, import_isObject.default)(schema.items) ? schema.items : []; const itemSchemas = _schemaItems.map( (item, index) => schemaUtils.retrieveSchema(item, items[index]) ); const additionalSchema = (0, import_isObject.default)(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null; const childFieldPathId = props.childFieldPathId ?? fieldPathId; if (items.length < itemSchemas.length) { items = items.concat(new Array(itemSchemas.length - items.length)); } const actualFormData = hasFormData ? keyedFormData : []; const extraClass = renderOptionalField ? " rjsf-optional-array-field" : ""; const optionalDataControl = renderOptionalField ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionalDataControlsField2, { ...props, fieldPathId: childFieldPathId }) : void 0; const canAdd = canAddItem(registry, schema, items, uiSchema) && !!additionalSchema && (!renderOptionalField || hasFormData); const arrayProps = { canAdd, className: `rjsf-field rjsf-field-array rjsf-field-array-fixed-items${extraClass}`, disabled, fieldPathId, formData, items: actualFormData.map((keyedItem, index) => { const { key, item } = keyedItem; const itemCast = item; const additional = index >= itemSchemas.length; const itemSchema = (additional && (0, import_isObject.default)(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {}; const itemFieldPathId = (0, import_utils.toFieldPathId)(index, globalFormOptions, childFieldPathId); let itemUiSchema; if (additional) { itemUiSchema = uiSchema.additionalItems; } else { if (Array.isArray(uiSchema.items)) { itemUiSchema = uiSchema.items[index]; } else { itemUiSchema = computeItemUiSchema(uiSchema, item, index, formContext); } } const itemErrorSchema = errorSchema ? errorSchema[index] : void 0; const itemProps = { index, itemKey: key, name: name && `${name}-${index}`, registry, uiOptions, hideError, readonly, disabled, required, title: fieldTitle ? `${fieldTitle}-${index + 1}` : void 0, canAdd, canRemove: additional, canMoveUp: index >= itemSchemas.length + 1, canMoveDown: additional && index < items.length - 1, itemSchema, itemData: itemCast, itemUiSchema, itemFieldPathId, itemErrorSchema, autofocus: autofocus && index === 0, onBlur, onFocus, rawErrors, totalItems: keyedFormData.length, onChange, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems }; return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayFieldItem, { ...itemProps }, key); }), onAddClick: handleAddItem, readonly, required, registry, schema, uiSchema, title: fieldTitle, errorSchema, rawErrors, optionalDataControl }; const Template = (0, import_utils.getTemplate)("ArrayFieldTemplate", registry, uiOptions); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Template, { ...arrayProps }); } function useKeyedFormData(formData = []) { const newHash = (0, import_react.useMemo)(() => (0, import_utils.hashObject)(formData), [formData]); const [state, setState] = (0, import_react.useState)(() => ({ formDataHash: newHash, keyedFormData: generateKeyedFormData(formData) })); let { keyedFormData, formDataHash } = state; if (newHash !== formDataHash) { const nextFormData = Array.isArray(formData) ? formData : []; const previousKeyedFormData = keyedFormData || []; keyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => ({ key: previousKeyedFormDatum.key, item: nextFormData[index] })) : generateKeyedFormData(nextFormData); formDataHash = newHash; setState({ formDataHash, keyedFormData }); } const updateKeyedFormData = (0, import_react.useCallback)((newData) => { const plainFormData = keyedToPlainFormData(newData); const newHash2 = (0, import_utils.hashObject)(plainFormData); setState({ formDataHash: newHash2, keyedFormData: newData }); return plainFormData; }, []); return { keyedFormData, updateKeyedFormData }; } function ArrayField(props) { const { schema, uiSchema, errorSchema, fieldPathId, registry, formData, onChange } = props; const { globalFormOptions, schemaUtils, translateString } = registry; const { keyedFormData, updateKeyedFormData } = useKeyedFormData(formData); const childFieldPathId = props.childFieldPathId ?? fieldPathId; const handleAddItem = (0, import_react.useCallback)( (event, index) => { if (event) { event.preventDefault(); } let newErrorSchema; if (errorSchema) { newErrorSchema = {}; for (const idx in errorSchema) { const i = parseInt(idx); if (index === void 0 || i < index) { (0, import_set.default)(newErrorSchema, [i], errorSchema[idx]); } else if (i >= index) { (0, import_set.default)(newErrorSchema, [i + 1], errorSchema[idx]); } } } const newKeyedFormDataRow = { key: generateRowId(), item: getNewFormDataRow(registry, schema) }; const newKeyedFormData = [...keyedFormData]; if (index !== void 0) { newKeyedFormData.splice(index, 0, newKeyedFormDataRow); } else { newKeyedFormData.push(newKeyedFormDataRow); } onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema); }, [keyedFormData, registry, schema, onChange, updateKeyedFormData, errorSchema, childFieldPathId] ); const handleCopyItem = (0, import_react.useCallback)( (event, index) => { if (event) { event.preventDefault(); } let newErrorSchema; if (errorSchema) { newErrorSchema = {}; for (const idx in errorSchema) { const i = parseInt(idx); if (i <= index) { (0, import_set.default)(newErrorSchema, [i], errorSchema[idx]); } else if (i > index) { (0, import_set.default)(newErrorSchema, [i + 1], errorSchema[idx]); } } } const newKeyedFormDataRow = { key: generateRowId(), item: (0, import_cloneDeep.default)(keyedFormData[index].item) }; const newKeyedFormData = [...keyedFormData]; if (index !== void 0) { newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow); } else { newKeyedFormData.push(newKeyedFormDataRow); } onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema); }, [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId] ); const handleRemoveItem = (0, import_react.useCallback)( (event, index) => { if (event) { event.preventDefault(); } let newErrorSchema; if (errorSchema) { newErrorSchema = {}; for (const idx in errorSchema) { const i = parseInt(idx); if (i < index) { (0, import_set.default)(newErrorSchema, [i], errorSchema[idx]); } else if (i > index) { (0, import_set.default)(newErrorSchema, [i - 1], errorSchema[idx]); } } } const newKeyedFormData = keyedFormData.filter((_, i) => i !== index); onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema); }, [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId] ); const handleReorderItems = (0, import_react.useCallback)( (event, index, newIndex) => { if (event) { event.preventDefault(); event.currentTarget.blur(); } let newErrorSchema; if (errorSchema) { newErrorSchema = {}; for (const idx in errorSchema) { const i = parseInt(idx); if (i == index) { (0, import_set.default)(newErrorSchema, [newIndex], errorSchema[index]); } else if (i == newIndex) { (0, import_set.default)(newErrorSchema, [index], errorSchema[newIndex]); } else { (0, import_set.default)(newErrorSchema, [idx], errorSchema[i]); } } } function reOrderArray() { const _newKeyedFormData = keyedFormData.slice(); _newKeyedFormData.splice(index, 1); _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]); return _newKeyedFormData; } const newKeyedFormData = reOrderArray(); onChange(updateKeyedFormData(newKeyedFormData), childFieldPathId.path, newErrorSchema); }, [keyedFormData, onChange, updateKeyedFormData, errorSchema, childFieldPathId] ); const handleChange = (0, import_react.useCallback)( (value, path, newErrorSchema, id) => { onChange( // We need to treat undefined items as nulls to have validation. // See https://github.com/tdegrunt/jsonschema/issues/206 value === void 0 ? null : value, path, newErrorSchema, id ); }, [onChange] ); const onSelectChange = (0, import_react.useCallback)( (value) => { onChange(value, childFieldPathId.path, void 0, childFieldPathId?.[import_utils.ID_KEY]); }, [onChange, childFieldPathId] ); const arrayAsMultiProps = { ...props, formData, fieldPathId: childFieldPathId, onSelectChange }; const arrayProps = { ...props, handleAddItem, handleCopyItem, handleRemoveItem, handleReorderItems, keyedFormData, onChange: handleChange }; if (!(import_utils.ITEMS_KEY in schema)) { if (!globalFormOptions.useFallbackUiForUnsupportedType) { const uiOptions = (0, import_utils.getUiOptions)(uiSchema); const UnsupportedFieldTemplate = (0, import_utils.getTemplate)( "UnsupportedFieldTemplate", registry, uiOptions ); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( UnsupportedFieldTemplate, { schema, fieldPathId, reason: translateString(import_utils.TranslatableString.MissingItems), registry } ); } const fallbackSchema = { ...schema, [import_utils.ITEMS_KEY]: { type: void 0 } }; arrayAsMultiProps.schema = fallbackSchema; arrayProps.schema = fallbackSchema; } if (schemaUtils.isMultiSelect(arrayAsMultiProps.schema)) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayAsMultiSelect, { ...arrayAsMultiProps }); } if ((0, import_utils.isCustomWidget)(uiSchema)) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayAsCustomWidget, { ...arrayAsMultiProps }); } if ((0, import_utils.isFixedItems)(arrayAsMultiProps.schema)) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FixedArray, { ...arrayProps }); } if (schemaUtils.isFilesArray(arrayAsMultiProps.schema, uiSchema)) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrayAsFiles, { ...arrayAsMultiProps }); } return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NormalArray, { ...arrayProps }); } // src/components/fields/BooleanField.tsx var import_react2 = require("react"); var import_utils2 = require("@rjsf/utils"); var import_isObject2 = __toESM(require("lodash/isObject"), 1); var import_jsx_runtime2 = require("react/jsx-runtime"); function BooleanField(props) { const { schema, name, uiSchema, fieldPathId, formData, registry, required, disabled, readonly, hideError, autofocus, title, onChange, onFocus, onBlur, rawErrors } = props; const { title: schemaTitle } = schema; const { widgets: widgets2, translateString, globalUiOptions } = registry; const { widget = "checkbox", title: uiTitle, // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type label: displayLabel = true, enumNames, ...options } = (0, import_utils2.getUiOptions)(uiSchema, globalUiOptions); const Widget = (0, import_utils2.getWidget)(schema, widget, widgets2); const yes = translateString(import_utils2.TranslatableString.YesLabel); const no = translateString(import_utils2.TranslatableString.NoLabel); let enumOptions; const label = uiTitle ?? schemaTitle ?? title ?? name; if (Array.isArray(schema.oneOf)) { enumOptions = (0, import_utils2.optionsList)( { oneOf: schema.oneOf.map((option) => { if ((0, import_isObject2.default)(option)) { return { ...option, title: option.title || (option.const === true ? yes : no) }; } return void 0; }).filter((o) => o) // cast away the error that typescript can't grok is fixed }, uiSchema ); } else { const enums = schema.enum ?? [true, false]; if (!enumNames && enums.length === 2 && enums.every((v) => typeof v === "boolean")) { enumOptions = [ { value: enums[0], label: enums[0] ? yes : no }, { value: enums[1], label: enums[1] ? yes : no } ]; } else { enumOptions = (0, import_utils2.optionsList)({ enum: enums }, uiSchema); } } const onWidgetChange = (0, import_react2.useCallback)( (value, errorSchema, id) => { return onChange(value, fieldPathId.path, errorSchema, id); }, [onChange, fieldPathId] ); return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( Widget, { options: { ...options, enumOptions }, schema, uiSchema, id: fieldPathId.$id, name, onChange: onWidgetChange, onFocus, onBlur, label, hideLabel: !displayLabel, value: formData, required, disabled, readonly, hideError, registry, autofocus, rawErrors, htmlName: fieldPathId.name } ); } var BooleanField_default = BooleanField; // src/components/fields/FallbackField.tsx var import_utils3 = require("@rjsf/utils"); var import_react3 = require("react"); var import_jsx_runtime3 = require("react/jsx-runtime"); function getFallbackTypeSelectionSchema(title) { return { type: "string", enum: ["string", "number", "boolean", "object", "array"], default: "string", title }; } function getTypeOfFormData(formData) { const dataType = typeof formData; if (dataType === "string" || dataType === "number" || dataType === "boolean") { return dataType; } if (dataType === "object") { return Array.isArray(formData) ? "array" : "object"; } return "string"; } function castToNewType(formData, newType) { switch (newType) { case "string": return String(formData); case "number": { const castedNumber = Number(formData); return isNaN(castedNumber) ? 0 : castedNumber; } case "boolean": return Boolean(formData); default: return formData; } } function FallbackField(props) { const { id, formData, displayLabel = true, schema, name, uiSchema, required, disabled = false, readonly = false, onBlur, onFocus, registry, fieldPathId, onChange, errorSchema } = props; const { translateString, fields: fields2, globalFormOptions } = registry; const [type, setType] = (0, import_react3.useState)(getTypeOfFormData(formData)); const uiOptions = (0, import_utils3.getUiOptions)(uiSchema); const typeSelectorInnerFieldPathId = (0, import_utils3.useDeepCompareMemo)( (0, import_utils3.toFieldPathId)("__internal_type_selector", globalFormOptions, fieldPathId) ); const schemaTitle = translateString(import_utils3.TranslatableString.Type); const typesOptionSchema = (0, import_react3.useMemo)(() => getFallbackTypeSelectionSchema(schemaTitle), [schemaTitle]); const onTypeChange = (newType) => { if (newType != null) { setType(newType); onChange(castToNewType(formData, newType), fieldPathId.path, errorSchema, id); } }; if (!globalFormOptions.useFallbackUiForUnsupportedType) { const { reason = translateString(import_utils3.TranslatableString.UnknownFieldType, [String(schema.type)]) } = props; const UnsupportedFieldTemplate = (0, import_utils3.getTemplate)( "UnsupportedFieldTemplate", registry, uiOptions ); return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UnsupportedFieldTemplate, { schema, fieldPathId, reason, registry }); } const FallbackFieldTemplate2 = (0, import_utils3.getTemplate)( "FallbackFieldTemplate", registry, uiOptions ); const { SchemaField: SchemaField2 } = fields2; return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( FallbackFieldTemplate2, { schema, registry, typeSelector: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( SchemaField2, { fieldPathId: typeSelectorInnerFieldPathId, name: `${name}__fallback_type`, schema: typesOptionSchema, formData: type, onChange: onTypeChange, onBlur, onFocus, registry, hideLabel: !displayLabel, disabled, readonly, required }, formData ? (0, import_utils3.hashObject)(formData) : "__empty__" ), schemaField: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( SchemaField2, { ...props, schema: { type, title: translateString(import_utils3.TranslatableString.Value), ...type === "object" && { additionalProperties: true } } } ) } ); } // src/components/fields/LayoutGridField.tsx var import_utils4 = require("@rjsf/utils"); var import_each = __toESM(require("lodash/each"), 1); var import_flatten = __toESM(require("lodash/flatten"), 1); var import_get = __toESM(require("lodash/get"), 1); var import_has = __toESM(require("lodash/has"), 1); var import_includes = __toESM(require("lodash/includes"), 1); var import_intersection = __toESM(require("lodash/intersection"), 1); var import_isEmpty = __toESM(require("lodash/isEmpty"), 1); var import_isFunction = __toESM(require("lodash/isFunction"), 1); var import_isEqual = __toESM(require("lodash/isEqual"), 1); var import_isObject3 = __toESM(require("lodash/isObject"), 1); var import_isPlainObject = __toESM(require("lodash/isPlainObject"), 1); var import_isString = __toESM(require("lodash/isString"), 1); var import_isUndefined = __toESM(require("lodash/isUndefined"), 1); var import_last = __toESM(require("lodash/last"), 1); var import_set2 = __toESM(require("lodash/set"), 1); var import_jsx_runtime4 = require("react/jsx-runtime"); var import_react4 = require("react"); var LOOKUP_REGEX = /^\$lookup=(.+)/; var LAYOUT_GRID_UI_OPTION = "layoutGrid"; var LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`; function getNonNullishValue(value, fallback) { return value ?? fallback; } function isNumericIndex(str) { return /^\d+?$/.test(str); } var LAYOUT_GRID_FIELD_TEST_IDS = (0, import_utils4.getTestIds)(); function computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) { const globalUiOptions = (0, import_get.default)(uiSchema, [import_utils4.UI_GLOBAL_OPTIONS_KEY], {}); const localUiSchema = (0, import_get.default)(uiSchema, field); const localUiOptions = { ...(0, import_get.default)(localUiSchema, [import_utils4.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions }; const fieldUiSchema = { ...localUiSchema }; if (!(0, import_isEmpty.default)(localUiOptions)) { (0, import_set2.default)(fieldUiSchema, [import_utils4.UI_OPTIONS_KEY], localUiOptions); } if (!(0, import_isEmpty.default)(globalUiOptions)) { (0, import_set2.default)(fieldUiSchema, [import_utils4.UI_GLOBAL_OPTIONS_KEY], globalUiOptions); } let { readonly: uiReadonly } = (0, import_utils4.getUiOptions)(fieldUiSchema); if (forceReadonly === true || (0, import_isUndefined.default)(uiReadonly) && schemaReadonly === true) { uiReadonly = true; if ((0, import_has.default)(localUiOptions, import_utils4.READONLY_KEY)) { (0, import_set2.default)(fieldUiSchema, [import_utils4.UI_OPTIONS_KEY, import_utils4.READONLY_KEY], true); } else { (0, import_set2.default)(fieldUiSchema, `ui:${import_utils4.READONLY_KEY}`, true); } } return { fieldUiSchema, uiReadonly }; } function conditionMatches(operator, datum, value = "$0m3tH1nG Un3xP3cT3d") { const data = (0, import_flatten.default)([datum]).sort(); const values = (0, import_flatten.default)([value]).sort(); switch (operator) { case "all" /* ALL */: return (0, import_isEqual.default)(data, values); case "some" /* SOME */: return (0, import_intersection.default)(data, values).length > 0; case "none" /* NONE */: return (0, import_intersection.default)(data, values).length === 0; default: return false; } } function findChildrenAndProps(layoutGridSchema, schemaKey, registry) { let gridProps = {}; let children = layoutGridSchema[schemaKey]; if ((0, import_isPlainObject.default)(children)) { const { children: elements, className: toMapClassNames, ...otherProps } = children; children = elements; if (toMapClassNames) { const classes = toMapClassNames.split(" "); const className = classes.map((ele) => (0, import_utils4.lookupFromFormContext)(registry, ele, ele)).join(" "); gridProps = { ...otherProps, className }; } else { gridProps = otherProps; } } if (!Array.isArray(children)) { throw new TypeError(`Expected array for "${schemaKey}" in ${JSON.stringify(layoutGridSchema)}`); } return { children, gridProps }; } function computeArraySchemasIfPresent(schema, fieldPathId, potentialIndex) { let rawSchema; if (isNumericIndex(potentialIndex) && schema && schema?.type === "array" && (0, import_has.default)(schema, import_utils4.ITEMS_KEY)) { const index = Number(potentialIndex); const items = schema[import_utils4.ITEMS_KEY]; if (Array.isArray(items)) { if (index > items.length) { rawSchema = (0, import_last.default)(items); } else { rawSchema = items[index]; } } else { rawSchema = items; } fieldPathId = { [import_utils4.ID_KEY]: fieldPathId[import_utils4.ID_KEY], path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index] }; } return { rawSchema, fieldPathId }; } function getSchemaDetailsForField(registry, dottedPath, initialSchema, formData, initialFieldIdPath) { const { schemaUtils, globalFormOptions } = registry; let rawSchema = initialSchema; let fieldPathId = initialFieldIdPath; const parts = dottedPath.split("."); const leafPath = parts.pop(); let schema = schemaUtils.retrieveSchema(rawSchema, formData); let innerData = formData; let isReadonly = schema.readOnly; parts.forEach((part) => { fieldPathId = (0, import_utils4.toFieldPathId)(part, globalFormOptions, fieldPathId); if ((0, import_has.default)(schema, import_utils4.PROPERTIES_KEY)) { rawSchema = (0, import_get.default)(schema, [import_utils4.PROPERTIES_KEY, part], {}); } else if (schema && ((0, import_has.default)(schema, import_utils4.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils4.ANY_OF_KEY))) { const xxx = (0, import_has.default)(schema, import_utils4.ONE_OF_KEY) ? import_utils4.ONE_OF_KEY : import_utils4.ANY_OF_KEY; const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData); rawSchema = (0, import_get.default)(selectedSchema, [import_utils4.PROPERTIES_KEY, part], {}); } else { const result = computeArraySchemasIfPresent(schema, fieldPathId, part); rawSchema = result.rawSchema ?? {}; fieldPathId = result.fieldPathId; } innerData = (0, import_get.default)(innerData, part, {}); schema = schemaUtils.retrieveSchema(rawSchema, innerData); isReadonly = getNonNullishValue(schema.readOnly, isReadonly); }); let optionsInfo; let isRequired2 = false; if ((0, import_isEmpty.default)(schema)) { schema = void 0; } if (schema && leafPath) { if (schema && ((0, import_has.default)(schema, import_utils4.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils4.ANY_OF_KEY))) { const xxx = (0, import_has.default)(schema, import_utils4.ONE_OF_KEY) ? import_utils4.ONE_OF_KEY : import_utils4.ANY_OF_KEY; schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData); } fieldPathId = (0, import_utils4.toFieldPathId)(leafPath, globalFormOptions, fieldPathId); isRequired2 = schema !== void 0 && Array.isArray(schema.required) && (0, import_includes.default)(schema.required, leafPath); const result = computeArraySchemasIfPresent(schema, fieldPathId, leafPath); if (result.rawSchema) { schema = result.rawSchema; fieldPathId = result.fieldPathId; } else { schema = (0, import_get.default)(schema, [import_utils4.PROPERTIES_KEY, leafPath]); schema = schema ? schemaUtils.retrieveSchema(schema) : schema; } isReadonly = getNonNullishValue(schema?.readOnly, isReadonly); if (schema && ((0, import_has.default)(schema, import_utils4.ONE_OF_KEY) || (0, import_has.default)(schema, import_utils4.ANY_OF_KEY))) { const xxx = (0, import_has.default)(schema, import_utils4.ONE_OF_KEY) ? import_utils4.ONE_OF_KEY : import_utils4.ANY_OF_KEY; const discriminator = (0, import_utils4.getDiscriminatorFieldFromSchema)(schema); optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator }; } } return { schema, isRequired: isRequired2, isReadonly, optionsInfo, fieldPathId }; } function getCustomRenderComponent(render, registry) { let customRenderer = render; if ((0, import_isString.default)(customRenderer)) { customRenderer = (0, import_utils4.lookupFromFormContext)(registry, customRenderer); } if ((0, import_isFunction.default)(customRenderer)) { return customRenderer; } return null; } function computeUIComponentPropsFromGridSchema(registry, gridSchema) { let name; let UIComponent = null; let uiProps = {}; let rendered; if ((0, import_isString.default)(gridSchema) || (0, import_isUndefined.default)(gridSchema)) { name = gridSchema ?? ""; } else { const { name: innerName = "", render, ...innerProps } = gridSchema; name = innerName; uiProps = innerProps; if (!(0, import_isEmpty.default)(uiProps)) { (0, import_each.default)(uiProps, (prop, key) => { if ((0, import_isString.default)(prop)) { const match = LOOKUP_REGEX.exec(prop); if (Array.isArray(match) && match.length > 1) { const name2 = match[1]; uiProps[key] = (0, import_utils4.lookupFromFormContext)(registry, name2, name2); } } }); } UIComponent = getCustomRenderComponent(render, registry); if (!innerName && UIComponent) { rendered = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UIComponent, { ...innerProps, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.uiComponent }); } } return { name, UIComponent, uiProps, rendered }; } function LayoutGridFieldChildren(props) { const { childrenLayoutGridSchemaId, ...layoutGridFieldProps } = props; const { registry, schema: rawSchema, formData } = layoutGridFieldProps; const { schemaUtils } = registry; const schema = schemaUtils.retrieveSchema(rawSchema, formData); return childrenLayoutGridSchemaId.map((layoutGridSchema) => /* @__PURE__ */ (0, import_react4.createElement)( LayoutGridField, { ...layoutGridFieldProps, key: `layoutGrid-${(0, import_utils4.hashObject)(layoutGridSchema)}`, schema, layoutGridSchema } )); } function LayoutGridCondition(props) { const { layoutGridSchema, ...layoutGridFieldProps } = props; const { formData, registry } = layoutGridFieldProps; const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:condition" /* CONDITION */, registry); const { operator, field = "", value } = gridProps; const fieldData = (0, import_get.default)(formData, field, null); if (conditionMatches(operator, fieldData, value)) { return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children }); } return null; } function LayoutGridCol(props) { const { layoutGridSchema, ...layoutGridFieldProps } = props; const { registry, uiSchema } = layoutGridFieldProps; const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:col" /* COLUMN */, registry); const uiOptions = (0, import_utils4.getUiOptions)(uiSchema); const GridTemplate2 = (0, import_utils4.getTemplate)("GridTemplate", registry, uiOptions); return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GridTemplate2, { column: true, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.col, ...gridProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children }) }); } function LayoutGridColumns(props) { const { layoutGridSchema, ...layoutGridFieldProps } = props; const { registry, uiSchema } = layoutGridFieldProps; const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:columns" /* COLUMNS */, registry); const uiOptions = (0, import_utils4.getUiOptions)(uiSchema); const GridTemplate2 = (0, import_utils4.getTemplate)("GridTemplate", registry, uiOptions); return children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( GridTemplate2, { column: true, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.col, ...gridProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: [child] }) }, `column-${(0, import_utils4.hashObject)(child)}` )); } function LayoutGridRow(props) { const { layoutGridSchema, ...layoutGridFieldProps } = props; const { registry, uiSchema } = layoutGridFieldProps; const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:row" /* ROW */, registry); const uiOptions = (0, import_utils4.getUiOptions)(uiSchema); const GridTemplate2 = (0, import_utils4.getTemplate)("GridTemplate", registry, uiOptions); return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GridTemplate2, { ...gridProps, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.row, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: children }) }); } function LayoutGridFieldComponent(props) { const { gridSchema, schema: initialSchema, uiSchema, errorSchema, fieldPathId, onBlur, onFocus, formData, readonly, registry, layoutGridSchema, // Used to pull this out of otherProps since we don't want to pass it through ...otherProps } = props; const { onChange } = otherProps; const { fields: fields2 } = registry; const { SchemaField: SchemaField2, LayoutMultiSchemaField: LayoutMultiSchemaField2 } = fields2; const uiComponentProps = computeUIComponentPropsFromGridSchema(registry, gridSchema); const { name, UIComponent, uiProps } = uiComponentProps; const { schema, isRequired: isRequired2, isReadonly, optionsInfo, fieldPathId: fieldIdSchema } = getSchemaDetailsForField(registry, name, initialSchema, formData, fieldPathId); const memoFieldPathId = (0, import_utils4.useDeepCompareMemo)(fieldIdSchema); if (uiComponentProps.rendered) { return uiComponentProps.rendered; } if (schema) { const Field2 = optionsInfo?.hasDiscriminator ? LayoutMultiSchemaField2 : SchemaField2; const { fieldUiSchema, uiReadonly } = computeFieldUiSchema(name, uiProps, uiSchema, isReadonly, readonly); return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( Field2, { "data-testid": optionsInfo?.hasDiscriminator ? LAYOUT_GRID_FIELD_TEST_IDS.layoutMultiSchemaField : LAYOUT_GRID_FIELD_TEST_IDS.field, ...otherProps, name, required: isRequired2, readonly: uiReadonly, schema, uiSchema: fieldUiSchema, errorSchema: (0, import_get.default)(errorSchema, name), fieldPathId: memoFieldPathId, formData: (0, import_get.default)(formData, name), onChange, onBlur, onFocus, options: optionsInfo?.options, registry } ); } if (UIComponent) { return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( UIComponent, { "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.uiComponent, ...otherProps, name, require