@rjsf/core
Version:
A simple React component capable of building HTML forms out of a JSON schema.
1,376 lines (1,375 loc) • 176 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash/cloneDeep'), require('lodash/get'), require('lodash/isEmpty'), require('lodash/pick'), require('lodash/set'), require('lodash/toPath'), require('lodash/unset'), require('lodash/isObject'), require('lodash/uniqueId'), require('react/jsx-runtime'), require('lodash/each'), require('lodash/flatten'), require('lodash/has'), require('lodash/includes'), require('lodash/intersection'), require('lodash/isFunction'), require('lodash/isEqual'), require('lodash/isPlainObject'), require('lodash/isString'), require('lodash/isUndefined'), require('lodash/last'), require('lodash/noop'), require('lodash/omit'), require('markdown-to-jsx'), require('@rjsf/validator-ajv8')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash/cloneDeep', 'lodash/get', 'lodash/isEmpty', 'lodash/pick', 'lodash/set', 'lodash/toPath', 'lodash/unset', 'lodash/isObject', 'lodash/uniqueId', 'react/jsx-runtime', 'lodash/each', 'lodash/flatten', 'lodash/has', 'lodash/includes', 'lodash/intersection', 'lodash/isFunction', 'lodash/isEqual', 'lodash/isPlainObject', 'lodash/isString', 'lodash/isUndefined', 'lodash/last', 'lodash/noop', 'lodash/omit', 'markdown-to-jsx', '@rjsf/validator-ajv8'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.react, global.utils, global.cloneDeep, global.get, global.isEmpty, global._pick, global.set, global._toPath, global._unset, global.isObject, global.uniqueId, global.jsxRuntime, global.each, global.flatten, global.has, global.includes, global.intersection, global.isFunction, global.isEqual, global.isPlainObject, global.isString, global.isUndefined, global.last, global.noop, global.omit3, global.Markdown, global.validator));
})(this, (function (exports, react, utils, cloneDeep, get, isEmpty, _pick, set, _toPath, _unset, isObject, uniqueId, jsxRuntime, each, flatten, has, includes, intersection, isFunction, isEqual, isPlainObject, isString, isUndefined, last, noop, omit3, Markdown, validator) { 'use strict';
// src/components/Form.tsx
function generateRowId() {
return uniqueId("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 } = 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 (utils.isFixedItems(schema) && 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 = utils.optionsList(itemsSchema, uiSchema);
const { widget = "select", title: uiTitle, ...options } = utils.getUiOptions(uiSchema, globalUiOptions);
const Widget = utils.getWidget(schema, widget, widgets2);
const label = uiTitle ?? schema.title ?? name;
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
return /* @__PURE__ */ jsxRuntime.jsx(
Widget,
{
id: multiValueFieldPathId[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 } = utils.getUiOptions(uiSchema, globalUiOptions);
const Widget = utils.getWidget(schema, widget, widgets2);
const label = uiTitle ?? schema.title ?? name;
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
return /* @__PURE__ */ jsxRuntime.jsx(
Widget,
{
id: multiValueFieldPathId[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 } = utils.getUiOptions(uiSchema, globalUiOptions);
const Widget = utils.getWidget(schema, widget, widgets2);
const label = uiTitle ?? schema.title ?? name;
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
const multiValueFieldPathId = utils.useDeepCompareMemo(utils.toFieldPathId("", globalFormOptions, fieldPathId, true));
return /* @__PURE__ */ jsxRuntime.jsx(
Widget,
{
options,
id: multiValueFieldPathId[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 = utils.useDeepCompareMemo(itemFieldPathId);
const ItemSchemaField = ArraySchemaField || SchemaField2;
const ArrayFieldItemTemplate2 = utils.getTemplate(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const displayLabel = schemaUtils.getDisplayLabel(itemSchema, itemUiSchema, globalUiOptions);
const { description } = 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 = react.useCallback(
(event) => {
handleAddItem(event, index + 1);
},
[handleAddItem, index]
);
const onCopyItem = react.useCallback(
(event) => {
handleCopyItem(event, index);
},
[handleCopyItem, index]
);
const onRemoveItem = react.useCallback(
(event) => {
handleRemoveItem(event, index);
},
[handleRemoveItem, index]
);
const onMoveUpItem = react.useCallback(
(event) => {
handleReorderItems(event, index, index - 1);
},
[handleReorderItems, index]
);
const onMoveDownItem = react.useCallback(
(event) => {
handleReorderItems(event, index, index + 1);
},
[handleReorderItems, index]
);
const templateProps = {
children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = utils.getUiOptions(uiSchema, globalUiOptions);
const _schemaItems = isObject(schema.items) ? schema.items : {};
const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
const formData = keyedToPlainFormData(keyedFormData);
const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
const hasFormData = 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__ */ jsxRuntime.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 = 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__ */ jsxRuntime.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 = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
return /* @__PURE__ */ jsxRuntime.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 = utils.getUiOptions(uiSchema, globalUiOptions);
const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
const hasFormData = utils.isFormDataAvailable(formData);
const _schemaItems = isObject(schema.items) ? schema.items : [];
const itemSchemas = _schemaItems.map(
(item, index) => schemaUtils.retrieveSchema(item, items[index])
);
const additionalSchema = isObject(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__ */ jsxRuntime.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 && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index]) || {};
const itemFieldPathId = 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__ */ jsxRuntime.jsx(ArrayFieldItem, { ...itemProps }, key);
}),
onAddClick: handleAddItem,
readonly,
required,
registry,
schema,
uiSchema,
title: fieldTitle,
errorSchema,
rawErrors,
optionalDataControl
};
const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
return /* @__PURE__ */ jsxRuntime.jsx(Template, { ...arrayProps });
}
function useKeyedFormData(formData = []) {
const newHash = react.useMemo(() => utils.hashObject(formData), [formData]);
const [state, setState] = 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 = react.useCallback((newData) => {
const plainFormData = keyedToPlainFormData(newData);
const newHash2 = 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 = 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) {
set(newErrorSchema, [i], errorSchema[idx]);
} else if (i >= index) {
set(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 = 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) {
set(newErrorSchema, [i], errorSchema[idx]);
} else if (i > index) {
set(newErrorSchema, [i + 1], errorSchema[idx]);
}
}
}
const newKeyedFormDataRow = {
key: generateRowId(),
item: cloneDeep(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 = 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) {
set(newErrorSchema, [i], errorSchema[idx]);
} else if (i > index) {
set(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 = 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) {
set(newErrorSchema, [newIndex], errorSchema[index]);
} else if (i == newIndex) {
set(newErrorSchema, [index], errorSchema[newIndex]);
} else {
set(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 = 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 = react.useCallback(
(value) => {
onChange(value, childFieldPathId.path, void 0, childFieldPathId?.[utils.ID_KEY]);
},
[onChange, childFieldPathId]
);
const arrayAsMultiProps = {
...props,
formData,
fieldPathId: childFieldPathId,
onSelectChange
};
const arrayProps = {
...props,
handleAddItem,
handleCopyItem,
handleRemoveItem,
handleReorderItems,
keyedFormData,
onChange: handleChange
};
if (!(utils.ITEMS_KEY in schema)) {
if (!globalFormOptions.useFallbackUiForUnsupportedType) {
const uiOptions = utils.getUiOptions(uiSchema);
const UnsupportedFieldTemplate = utils.getTemplate(
"UnsupportedFieldTemplate",
registry,
uiOptions
);
return /* @__PURE__ */ jsxRuntime.jsx(
UnsupportedFieldTemplate,
{
schema,
fieldPathId,
reason: translateString(utils.TranslatableString.MissingItems),
registry
}
);
}
const fallbackSchema = { ...schema, [utils.ITEMS_KEY]: { type: void 0 } };
arrayAsMultiProps.schema = fallbackSchema;
arrayProps.schema = fallbackSchema;
}
if (schemaUtils.isMultiSelect(arrayAsMultiProps.schema)) {
return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsMultiSelect, { ...arrayAsMultiProps });
}
if (utils.isCustomWidget(uiSchema)) {
return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsCustomWidget, { ...arrayAsMultiProps });
}
if (utils.isFixedItems(arrayAsMultiProps.schema)) {
return /* @__PURE__ */ jsxRuntime.jsx(FixedArray, { ...arrayProps });
}
if (schemaUtils.isFilesArray(arrayAsMultiProps.schema, uiSchema)) {
return /* @__PURE__ */ jsxRuntime.jsx(ArrayAsFiles, { ...arrayAsMultiProps });
}
return /* @__PURE__ */ jsxRuntime.jsx(NormalArray, { ...arrayProps });
}
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
} = utils.getUiOptions(uiSchema, globalUiOptions);
const Widget = utils.getWidget(schema, widget, widgets2);
const yes = translateString(utils.TranslatableString.YesLabel);
const no = translateString(utils.TranslatableString.NoLabel);
let enumOptions;
const label = uiTitle ?? schemaTitle ?? title ?? name;
if (Array.isArray(schema.oneOf)) {
enumOptions = utils.optionsList(
{
oneOf: schema.oneOf.map((option) => {
if (isObject(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 = utils.optionsList({ enum: enums }, uiSchema);
}
}
const onWidgetChange = react.useCallback(
(value, errorSchema, id) => {
return onChange(value, fieldPathId.path, errorSchema, id);
},
[onChange, fieldPathId]
);
return /* @__PURE__ */ jsxRuntime.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;
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] = react.useState(getTypeOfFormData(formData));
const uiOptions = utils.getUiOptions(uiSchema);
const typeSelectorInnerFieldPathId = utils.useDeepCompareMemo(
utils.toFieldPathId("__internal_type_selector", globalFormOptions, fieldPathId)
);
const schemaTitle = translateString(utils.TranslatableString.Type);
const typesOptionSchema = react.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(utils.TranslatableString.UnknownFieldType, [String(schema.type)]) } = props;
const UnsupportedFieldTemplate = utils.getTemplate(
"UnsupportedFieldTemplate",
registry,
uiOptions
);
return /* @__PURE__ */ jsxRuntime.jsx(UnsupportedFieldTemplate, { schema, fieldPathId, reason, registry });
}
const FallbackFieldTemplate2 = utils.getTemplate(
"FallbackFieldTemplate",
registry,
uiOptions
);
const { SchemaField: SchemaField2 } = fields2;
return /* @__PURE__ */ jsxRuntime.jsx(
FallbackFieldTemplate2,
{
schema,
registry,
typeSelector: /* @__PURE__ */ jsxRuntime.jsx(
SchemaField2,
{
fieldPathId: typeSelectorInnerFieldPathId,
name: `${name}__fallback_type`,
schema: typesOptionSchema,
formData: type,
onChange: onTypeChange,
onBlur,
onFocus,
registry,
hideLabel: !displayLabel,
disabled,
readonly,
required
},
formData ? utils.hashObject(formData) : "__empty__"
),
schemaField: /* @__PURE__ */ jsxRuntime.jsx(
SchemaField2,
{
...props,
schema: {
type,
title: translateString(utils.TranslatableString.Value),
...type === "object" && { additionalProperties: true }
}
}
)
}
);
}
var LOOKUP_REGEX = /^\$lookup=(.+)/;
var LAYOUT_GRID_UI_OPTION = "layoutGrid";
function getNonNullishValue(value, fallback) {
return value ?? fallback;
}
function isNumericIndex(str) {
return /^\d+?$/.test(str);
}
var LAYOUT_GRID_FIELD_TEST_IDS = utils.getTestIds();
function computeFieldUiSchema(field, uiProps, uiSchema, schemaReadonly, forceReadonly) {
const globalUiOptions = get(uiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], {});
const localUiSchema = get(uiSchema, field);
const localUiOptions = { ...get(localUiSchema, [utils.UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
const fieldUiSchema = { ...localUiSchema };
if (!isEmpty(localUiOptions)) {
set(fieldUiSchema, [utils.UI_OPTIONS_KEY], localUiOptions);
}
if (!isEmpty(globalUiOptions)) {
set(fieldUiSchema, [utils.UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
}
let { readonly: uiReadonly } = utils.getUiOptions(fieldUiSchema);
if (forceReadonly === true || isUndefined(uiReadonly) && schemaReadonly === true) {
uiReadonly = true;
if (has(localUiOptions, utils.READONLY_KEY)) {
set(fieldUiSchema, [utils.UI_OPTIONS_KEY, utils.READONLY_KEY], true);
} else {
set(fieldUiSchema, `ui:${utils.READONLY_KEY}`, true);
}
}
return { fieldUiSchema, uiReadonly };
}
function conditionMatches(operator, datum, value = "$0m3tH1nG Un3xP3cT3d") {
const data = flatten([datum]).sort();
const values = flatten([value]).sort();
switch (operator) {
case "all" /* ALL */:
return isEqual(data, values);
case "some" /* SOME */:
return intersection(data, values).length > 0;
case "none" /* NONE */:
return intersection(data, values).length === 0;
default:
return false;
}
}
function findChildrenAndProps(layoutGridSchema, schemaKey, registry) {
let gridProps = {};
let children = layoutGridSchema[schemaKey];
if (isPlainObject(children)) {
const { children: elements, className: toMapClassNames, ...otherProps } = children;
children = elements;
if (toMapClassNames) {
const classes = toMapClassNames.split(" ");
const className = classes.map((ele) => utils.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" && has(schema, utils.ITEMS_KEY)) {
const index = Number(potentialIndex);
const items = schema[utils.ITEMS_KEY];
if (Array.isArray(items)) {
if (index > items.length) {
rawSchema = last(items);
} else {
rawSchema = items[index];
}
} else {
rawSchema = items;
}
fieldPathId = {
[utils.ID_KEY]: fieldPathId[utils.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 = utils.toFieldPathId(part, globalFormOptions, fieldPathId);
if (has(schema, utils.PROPERTIES_KEY)) {
rawSchema = get(schema, [utils.PROPERTIES_KEY, part], {});
} else if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
const selectedSchema = schemaUtils.findSelectedOptionInXxxOf(schema, part, xxx, innerData);
rawSchema = get(selectedSchema, [utils.PROPERTIES_KEY, part], {});
} else {
const result = computeArraySchemasIfPresent(schema, fieldPathId, part);
rawSchema = result.rawSchema ?? {};
fieldPathId = result.fieldPathId;
}
innerData = get(innerData, part, {});
schema = schemaUtils.retrieveSchema(rawSchema, innerData);
isReadonly = getNonNullishValue(schema.readOnly, isReadonly);
});
let optionsInfo;
let isRequired2 = false;
if (isEmpty(schema)) {
schema = void 0;
}
if (schema && leafPath) {
if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
schema = schemaUtils.findSelectedOptionInXxxOf(schema, leafPath, xxx, innerData);
}
fieldPathId = utils.toFieldPathId(leafPath, globalFormOptions, fieldPathId);
isRequired2 = schema !== void 0 && Array.isArray(schema.required) && includes(schema.required, leafPath);
const result = computeArraySchemasIfPresent(schema, fieldPathId, leafPath);
if (result.rawSchema) {
schema = result.rawSchema;
fieldPathId = result.fieldPathId;
} else {
schema = get(schema, [utils.PROPERTIES_KEY, leafPath]);
schema = schema ? schemaUtils.retrieveSchema(schema) : schema;
}
isReadonly = getNonNullishValue(schema?.readOnly, isReadonly);
if (schema && (has(schema, utils.ONE_OF_KEY) || has(schema, utils.ANY_OF_KEY))) {
const xxx = has(schema, utils.ONE_OF_KEY) ? utils.ONE_OF_KEY : utils.ANY_OF_KEY;
const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
optionsInfo = { options: schema[xxx], hasDiscriminator: !!discriminator };
}
}
return { schema, isRequired: isRequired2, isReadonly, optionsInfo, fieldPathId };
}
function getCustomRenderComponent(render, registry) {
let customRenderer = render;
if (isString(customRenderer)) {
customRenderer = utils.lookupFromFormContext(registry, customRenderer);
}
if (isFunction(customRenderer)) {
return customRenderer;
}
return null;
}
function computeUIComponentPropsFromGridSchema(registry, gridSchema) {
let name;
let UIComponent = null;
let uiProps = {};
let rendered;
if (isString(gridSchema) || isUndefined(gridSchema)) {
name = gridSchema ?? "";
} else {
const { name: innerName = "", render, ...innerProps } = gridSchema;
name = innerName;
uiProps = innerProps;
if (!isEmpty(uiProps)) {
each(uiProps, (prop, key) => {
if (isString(prop)) {
const match = LOOKUP_REGEX.exec(prop);
if (Array.isArray(match) && match.length > 1) {
const name2 = match[1];
uiProps[key] = utils.lookupFromFormContext(registry, name2, name2);
}
}
});
}
UIComponent = getCustomRenderComponent(render, registry);
if (!innerName && UIComponent) {
rendered = /* @__PURE__ */ jsxRuntime.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__ */ react.createElement(
LayoutGridField,
{
...layoutGridFieldProps,
key: `layoutGrid-${utils.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 = get(formData, field, null);
if (conditionMatches(operator, fieldData, value)) {
return /* @__PURE__ */ jsxRuntime.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 = utils.getUiOptions(uiSchema);
const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { column: true, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.col, ...gridProps, children: /* @__PURE__ */ jsxRuntime.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 = utils.getUiOptions(uiSchema);
const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
return children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
GridTemplate2,
{
column: true,
"data-testid": LAYOUT_GRID_FIELD_TEST_IDS.col,
...gridProps,
children: /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldChildren, { ...layoutGridFieldProps, childrenLayoutGridSchemaId: [child] })
},
`column-${utils.hashObject(child)}`
));
}
function LayoutGridRow(props) {
const { layoutGridSchema, ...layoutGridFieldProps } = props;
const { registry, uiSchema } = layoutGridFieldProps;
const { children, gridProps } = findChildrenAndProps(layoutGridSchema, "ui:row" /* ROW */, registry);
const uiOptions = utils.getUiOptions(uiSchema);
const GridTemplate2 = utils.getTemplate("GridTemplate", registry, uiOptions);
return /* @__PURE__ */ jsxRuntime.jsx(GridTemplate2, { ...gridProps, "data-testid": LAYOUT_GRID_FIELD_TEST_IDS.row, children: /* @__PURE__ */ jsxRuntime.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 = utils.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__ */ jsxRuntime.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: get(errorSchema, name),
fieldPathId: memoFieldPathId,
formData: get(formData, name),
onChange,
onBlur,
onFocus,
options: optionsInfo?.options,
registry
}
);
}
if (UIComponent) {
return /* @__PURE__ */ jsxRuntime.jsx(
UIComponent,
{
"data-testid": LAYOUT_GRID_FIELD_TEST_IDS.uiComponent,
...otherProps,
name,
required: isRequired2,
formData,
readOnly: !!isReadonly || readonly,
errorSchema,
uiSchema,
schema: initialSchema,
fieldPathId,
onBlur,
onFocus,
registry,
...uiProps
}
);
}
return null;
}
function LayoutGridField(props) {
const { uiSchema } = props;
let { layoutGridSchema } = props;
const uiOptions = utils.getUiOptions(uiSchema);
if (!layoutGridSchema && LAYOUT_GRID_UI_OPTION in uiOptions && isObject(uiOptions[LAYOUT_GRID_UI_OPTION])) {
layoutGridSchema = uiOptions[LAYOUT_GRID_UI_OPTION];
}
if (isObject(layoutGridSchema)) {
if ("ui:row" /* ROW */ in layoutGridSchema) {
return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridRow, { ...props, layoutGridSchema });
}
if ("ui:col" /* COLUMN */ in layoutGridSchema) {
return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridCol, { ...props, layoutGridSchema });
}
if ("ui:columns" /* COLUMNS */ in layoutGridSchema) {
return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridColumns, { ...props, layoutGridSchema });
}
if ("ui:condition" /* CONDITION */ in layoutGridSchema) {
return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridCondition, { ...props, layoutGridSchema });
}
}
return /* @__PURE__ */ jsxRuntime.jsx(LayoutGridFieldComponent, { ...props, gridSchema: layoutGridSchema });
}
LayoutGridField.TEST_IDS = LAYOUT_GRID_FIELD_TEST_IDS;
function LayoutHeaderField(props) {
const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
const { title: uiTitle } = options;
const { title: schemaTitle } = schema;
const fieldTitle = uiTitle || title || schemaTitle || name;
if (!fieldTitle) {
return null;
}
const TitleFieldTemplate = utils.getTemplate(
"TitleFieldTemplate",
registry,
options
);
return /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(fieldPathId),
title: fieldTitle,
required,
schema,
uiSchema,
registry
}
);
}
function getSelectedOption(options, selectorField, value) {
const defaultValue = "!@#!@$@#$!@$#";
const schemaOptions = options.map(({ schema }) => schema);
return schemaOptions.find((option) => {
const selector