@cratis/components 4.25.1 → 4.26.0

package/dist/esm/SchemaEditor/SchemaEditor.d.ts

@@ -1,49 +1,31 @@
+import type { ReactNode } from 'react';
 import type { ChangeHandler } from '../types/ChangeHandler.js';
 import type { JsonSchema } from '../types/JsonSchema.js';
 import { type TypeFormat } from '../types/TypeFormat.js';
-/**
- * User-facing strings for {@link SchemaEditor}. Every field is optional; pass a
- * partial `labels` to override any of them (for localization). Omitted fields
- * fall back to {@link defaultSchemaEditorLabels} (English).
- */
-export interface SchemaEditorLabels {
-    /** Menu action that enters edit mode. */
-    edit: string;
-    /** Menu action that saves changes. */
-    save: string;
-    /** Menu action that cancels editing. */
-    cancel: string;
-    /** Menu action that adds a property. */
-    addProperty: string;
-    /** Accessible name for the action menubar. */
-    actions: string;
-    /** Accessible name and tooltip for the back button. */
-    navigateBack: string;
-    /** Shown when the schema has no properties. */
-    emptyMessage: string;
-    /** Accessible name for the "drill into array item definition" button. */
-    navigateToItemDefinition: string;
-    /** Accessible name for the "drill into object properties" button. */
-    navigateToProperties: string;
-    /** Accessible name for a property-name input. */
-    propertyName: string;
-    /** Accessible name for a property-type selector. */
-    propertyType: string;
-    /** Accessible name for an array item-type selector. */
-    arrayItemType: string;
-    /** Accessible name for the "remove property" button. */
-    deleteProperty: string;
-    /** Validation message shown when the schema cannot be represented as valid JSON. */
-    invalidJson: string;
-}
-/** English defaults for {@link SchemaEditorLabels}. */
-export declare const defaultSchemaEditorLabels: SchemaEditorLabels;
+import { defaultSchemaEditorLabels } from './defaultSchemaEditorLabels.js';
+import type { SchemaEditorLabels } from './SchemaEditorLabels.js';
+import type { SchemaEditorLayout } from './SchemaEditorLayout.js';
+import type { Property } from './Tree/Property.js';
+import { type TreeSchemaEditorProps } from './Tree/TreeSchemaEditor.js';
+export { defaultSchemaEditorLabels };
+export type { SchemaEditorLabels };
+/** Properties of the tree layout the table layout has no counterpart for. They are ignored when `layout` is `'table'`. */
+type TreeOnlyProps = Omit<TreeSchemaEditorProps, 'schema' | 'onChange' | 'labels' | 'className' | 'allowKeyProperty' | 'allowRequired' | 'readOnly' | 'isPropertyProtected' | 'validatePropertyName' | 'onPropertyRemoved' | 'onPropertyRenamed' | 'header' | 'footer'>;
 /**
  * Props for {@link SchemaEditor}.
  */
-export interface SchemaEditorProps {
-    /** The JSON Schema being viewed or edited. */
-    schema: JsonSchema;
+export interface SchemaEditorProps extends TreeOnlyProps {
+    /**
+     * Which editor to render. `'table'` (the default) is the breadcrumb-navigated table with an Edit, Save and
+     * Cancel workflow; `'tree'` is the inline tree editor that applies every edit live. See the layout notes in
+     * the documentation for the props each layout honors.
+     */
+    layout?: SchemaEditorLayout;
+    /**
+     * The JSON Schema being viewed or edited. Required unless the tree layout is controlled through
+     * `properties`.
+     */
+    schema?: JsonSchema;
     /** Optional event-type label displayed in the editor header. */
     eventTypeName?: string;
     /** When false, the Edit action remains visible but cannot enter edit mode; defaults to `true`. */
@@ -79,18 +61,51 @@ export interface SchemaEditorProps {
     className?: string;
     /** Override any user-facing string (for localization). See {@link SchemaEditorLabels}. */
     labels?: Partial<SchemaEditorLabels>;
+    /**
+     * Offers the key toggle (`x-key`, at most one property per object). In the table layout this adds a Key
+     * column, editable in edit mode; a function enables the column for every row. In the tree layout it is
+     * offered on every property, or per property when a function is given.
+     */
+    allowKeyProperty?: TreeSchemaEditorProps['allowKeyProperty'];
+    /**
+     * Offers the toggle for whether a property must be present (the `required` list). In the table layout this
+     * adds a Required column, editable in edit mode.
+     */
+    allowRequired?: boolean;
+    /** Offers no edits at all. Tree layout only: the table layout is read-only until Edit is chosen, controlled by `canEdit`. */
+    readOnly?: boolean;
+    /** Decides which properties can be neither renamed nor removed. By default none. Both layouts. */
+    isPropertyProtected?: (property: Property) => boolean;
+    /**
+     * Extra check of a new name, after the editor has rejected blank, reserved and duplicate names. Return the
+     * message to show, or `undefined` to accept the name. Both layouts.
+     */
+    validatePropertyName?: (name: string, property: Property, siblings: Property[]) => string | undefined;
+    /** Called after a property was removed, with the property and everything nested under it. Both layouts. */
+    onPropertyRemoved?: (property: Property) => void;
+    /** Called after a property was renamed, with the renamed property and the name it had. Both layouts. */
+    onPropertyRenamed?: (property: Property, previousName: string) => void;
+    /** Content above the editor, for example the title of the schema. Both layouts. */
+    header?: ReactNode;
+    /** Content below the properties, for example further actions. Both layouts. */
+    footer?: ReactNode;
 }
 /**
- * A breadcrumb-navigated editor for JSON Schemas. Lets users browse nested
- * `object` and `array` property definitions, add or remove properties, change
- * types and formats, and validate naming rules in place. Designed to drive
- * UIs around event payload schemas and similar structural documents.
+ * Edits the properties of a JSON Schema. By default (`layout='table'`) it is a breadcrumb-navigated table: it
+ * lets users browse nested `object` and `array` property definitions, add or remove properties, change types and
+ * formats, and validate naming rules in place, behind an Edit, Save and Cancel workflow. With `layout='tree'` it
+ * is an inline tree that shows nested properties in place and applies every edit live. Designed to drive UIs
+ * around event payload schemas and similar structural documents.
+ *
+ * Both layouts accept `allowRequired`, `allowKeyProperty`, `isPropertyProtected`, `validatePropertyName`,
+ * `onPropertyRenamed`, `onPropertyRemoved`, `header` and `footer`. The tree layout also takes concepts, controlled
+ * mode, per-row slots and selection; see the documentation for the exact split.
  *
- * The editor composes a Cratis data table, action toolbar, and form widgets
- * internally. Restyle it through semantic tokens, the editor root `className`,
- * and documented `data-cratis-part` values rather than a provider preset.
+ * The table layout composes a Cratis data table, action toolbar, and form widgets internally. Restyle it through
+ * semantic tokens, the editor root `className`, and documented `data-cratis-part` values rather than a provider
+ * preset.
  *
  * @param props - {@link SchemaEditorProps}.
  */
-export declare const SchemaEditor: ({ schema, eventTypeName, canEdit, canNotEditReason, onChange, onSave, onCancel, editMode, saveDisabled, cancelDisabled, typeFormats, className, labels, }: SchemaEditorProps) => import("react").JSX.Element;
+export declare const SchemaEditor: (props: SchemaEditorProps) => import("react").JSX.Element;
 //# sourceMappingURL=SchemaEditor.d.ts.map

package/dist/esm/SchemaEditor/SchemaEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaEditor.d.ts","sourceRoot":"","sources":["../../../SchemaEditor/SchemaEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAsB,MAAM,wBAAqB,CAAC;AAC1E,OAAO,EAAE,KAAK,UAAU,EAAwB,MAAM,wBAAqB,CAAC;AAG5E;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IAC/B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,wBAAwB,EAAE,MAAM,CAAC;IACjC,qEAAqE;IACrE,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,aAAa,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,cAAc,EAAE,MAAM,CAAC;IACvB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,uDAAuD;AACvD,eAAO,MAAM,yBAAyB,EAAE,kBAevC,CAAC;AAmEF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,8CAA8C;IAC9C,MAAM,EAAE,UAAU,CAAC;IAEnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAErC,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACxC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8JActB,iBAAiB,gCA2mBnB,CAAC"}
+{"version":3,"file":"SchemaEditor.d.ts","sourceRoot":"","sources":["../../../SchemaEditor/SchemaEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SchemaEditor/SchemaEditor.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { Button } from '../Common/Button.js';
+import { Checkbox } from '../Common/Checkbox.js';
 import { DataTableCore } from '../DataTables/DataTableCore.js';
 import { Column } from '../DataTables/Column.js';
 import { ActionMenubar } from '../Common/ActionMenubar.js';
@@ -11,23 +12,11 @@ import { NameCell } from './NameCell.js';
 import { TypeCell } from './TypeCell.js';
 import { DEFAULT_TYPE_FORMATS } from '../types/TypeFormat.js';
 import { validatePropertyName, buildBreadcrumbItems } from './schemaHelpers.js';
+import { defaultSchemaEditorLabels } from './defaultSchemaEditorLabels.js';
+import { jsonSchemaToProperties, KEY_KEYWORD } from './Tree/schemaConversion.js';
+import { TreeSchemaEditor } from './Tree/TreeSchemaEditor.js';
 
-const defaultSchemaEditorLabels = {
-    edit: 'Edit',
-    save: 'Save',
-    cancel: 'Cancel',
-    addProperty: 'Add Property',
-    actions: 'Actions',
-    navigateBack: 'Navigate back',
-    emptyMessage: 'No properties defined',
-    navigateToItemDefinition: 'Navigate to item definition',
-    navigateToProperties: 'Navigate to object properties',
-    propertyName: 'Property name',
-    propertyType: 'Property type',
-    arrayItemType: 'Array item type',
-    deleteProperty: 'Delete property',
-    invalidJson: 'The schema must contain valid JSON before it can be edited.',
-};
+const emptySchema = {};
 const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 const isValidSchemaNode = (node) => {
     if (!isPlainObject(node)) {
@@ -68,14 +57,32 @@ const cloneSchema = (schema) => {
         return undefined;
     }
 };
+const findSchemaAtPath = (root, path) => {
+    let target = root;
+    for (const segment of path) {
+        if (target.type === 'array' && segment === '$items') {
+            target = target.items || {};
+        }
+        else if (target.properties && target.properties[segment]) {
+            target = target.properties[segment];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return target;
+};
 const asJsonSchema = (property) => {
     return property;
 };
 const asJsonSchemaProperty = (schema) => {
     return schema;
 };
-const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditReason, onChange, onSave, onCancel, editMode, saveDisabled = false, cancelDisabled = false, typeFormats = DEFAULT_TYPE_FORMATS, className, labels, }) => {
+const TableSchemaEditor = ({ schema: suppliedSchema, eventTypeName = '', canEdit = true, canNotEditReason, onChange, onSave, onCancel, editMode, saveDisabled = false, cancelDisabled = false, typeFormats = DEFAULT_TYPE_FORMATS, className, labels, allowKeyProperty, allowRequired, isPropertyProtected, validatePropertyName: validateCustomPropertyName, onPropertyRemoved, onPropertyRenamed, header, footer, }) => {
+    const schema = suppliedSchema ?? emptySchema;
     const l = useMemo(() => ({ ...defaultSchemaEditorLabels, ...labels }), [labels]);
+    const showKey = allowKeyProperty !== undefined && allowKeyProperty !== false;
+    const showRequired = allowRequired === true;
     const [currentPath, setCurrentPath] = useState([]);
     const [properties, setProperties] = useState([]);
     const [initialParsedSchema] = useState(() => cloneSchema(schema));
@@ -89,17 +96,23 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
             setCurrentPath([]);
         }
     }, [isEditMode]);
-    const validateAllProperties = useCallback((properties) => {
+    const validateAllProperties = useCallback((properties, level = []) => {
         const errors = {};
         properties.forEach((prop) => {
-            const error = validatePropertyName(prop.name ?? '', prop.id, properties);
+            let error = validatePropertyName(prop.name ?? '', prop.id, properties);
+            if (!error && validateCustomPropertyName) {
+                const property = level.find((candidate) => candidate.name === prop.name);
+                if (property) {
+                    error = validateCustomPropertyName(property.name, property, level);
+                }
+            }
             if (error) {
                 errors[prop.id] = error;
             }
         });
         setValidationErrors(errors);
         return Object.keys(errors).length === 0;
-    }, [validatePropertyName]);
+    }, [validatePropertyName, validateCustomPropertyName]);
     useEffect(() => {
         const parsedSchema = cloneSchema(schema);
         if (!parsedSchema) {
@@ -144,7 +157,7 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
         }
         setProperties(schemaProps);
         if (isEditMode) {
-            validateAllProperties(schemaProps);
+            validateAllProperties(schemaProps, jsonSchemaToProperties(targetSchema));
         }
     };
     const updateSchemaAtPath = useCallback((path, updater) => {
@@ -198,7 +211,17 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
             return { ...schema, properties: newProps };
         });
     }, [currentPath, updateSchemaAtPath]);
+    const getLevelProperties = useCallback(() => jsonSchemaToProperties(findSchemaAtPath(currentSchema, currentPath)), [currentSchema, currentPath]);
+    const isProtected = useCallback((propertyName) => {
+        if (!isPropertyProtected)
+            return false;
+        const property = getLevelProperties().find((candidate) => candidate.name === propertyName);
+        return property !== undefined && isPropertyProtected(property);
+    }, [isPropertyProtected, getLevelProperties]);
     const removeProperty = useCallback((propertyName) => {
+        const removed = getLevelProperties().find((candidate) => candidate.name === propertyName);
+        if (removed && isPropertyProtected?.(removed))
+            return;
         updateSchemaAtPath(currentPath, (schema) => {
             const newProps = { ...(schema.properties || {}) };
             delete newProps[propertyName];
@@ -208,15 +231,44 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
             }
             return updated;
         });
+        if (removed)
+            onPropertyRemoved?.(removed);
+    }, [currentPath, updateSchemaAtPath, getLevelProperties, isPropertyProtected, onPropertyRemoved]);
+    const setRequired = useCallback((propertyName, isRequired) => {
+        updateSchemaAtPath(currentPath, (schema) => {
+            const others = (schema.required ?? []).filter((name) => name !== propertyName);
+            const required = isRequired ? [...others, propertyName] : others;
+            const updated = { ...schema };
+            if (required.length > 0) {
+                updated.required = required;
+            }
+            else {
+                delete updated.required;
+            }
+            return updated;
+        });
+    }, [currentPath, updateSchemaAtPath]);
+    const setKey = useCallback((propertyName) => {
+        updateSchemaAtPath(currentPath, (schema) => {
+            const newProps = {};
+            for (const [name, property] of Object.entries(schema.properties || {})) {
+                const { [KEY_KEYWORD]: previousKey, ...rest } = property;
+                const makeKey = name === propertyName && previousKey !== true;
+                newProps[name] = (makeKey ? { ...rest, [KEY_KEYWORD]: true } : rest);
+            }
+            return { ...schema, properties: newProps };
+        });
     }, [currentPath, updateSchemaAtPath]);
     const updateProperty = useCallback((oldName, field, value, additionalUpdates) => {
+        let renamed;
         updateSchemaAtPath(currentPath, (schema) => {
             const newProps = { ...(schema.properties || {}) };
             const prop = { ...(newProps[oldName] || {}) };
             let newRequired = schema.required;
             if (field === 'name') {
                 const newName = value;
-                if (newName !== oldName && !newProps[newName]) {
+                if (newName !== oldName && !newProps[newName] && !isProtected(oldName)) {
+                    renamed = jsonSchemaToProperties({ properties: { [newName]: prop } })[0];
                     newProps[newName] = prop;
                     delete newProps[oldName];
                     if (schema.required?.includes(oldName)) {
@@ -226,6 +278,7 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
             }
             else if (field === 'type') {
                 prop.type = value;
+                delete prop['x-concept'];
                 if (value === 'array') {
                     prop.items = { type: 'string' };
                     delete prop.format;
@@ -265,7 +318,9 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
             }
             return { ...schema, properties: newProps, required: newRequired };
         });
-    }, [currentPath, updateSchemaAtPath]);
+        if (renamed)
+            onPropertyRenamed?.(renamed, oldName);
+    }, [currentPath, updateSchemaAtPath, isProtected, onPropertyRenamed]);
     const updateArrayItemType = useCallback((propertyName, itemType) => {
         updateSchemaAtPath(currentPath, (schema) => {
             const newProps = { ...(schema.properties || {}) };
@@ -417,7 +472,8 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
     const breadcrumbItems = getBreadcrumbItems();
     const isAtRoot = currentPath.length === 0;
     const currentDescription = getCurrentDescription();
-    return (jsxs("div", { className: className ? `schema-editor ${className}` : 'schema-editor', style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [jsxs("div", { className: 'cratis:px-4 cratis:py-4', children: [jsx("div", { className: 'schema-editor-menubar', children: jsx(ActionMenubar, { "aria-label": l.actions, model: menuItems }) }), schemaJsonIsInvalid && (jsx(Message, { severity: 'error', text: l.invalidJson, className: 'cratis:mt-3' }))] }), jsxs("div", { className: 'cratis:px-4 cratis:py-2 cratis-schema-editor-bottom-border', children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [jsx(Tooltip, { content: l.navigateBack, position: 'top', children: jsx(Button, { variant: 'ghost', size: 'small', icon: jsx(faIcons.FaArrowLeft, {}), onClick: navigateBack, disabled: isAtRoot, "aria-label": l.navigateBack }) }), jsx("div", { style: {
+    const currentLevel = findSchemaAtPath(currentSchema, currentPath);
+    return (jsxs("div", { className: className ? `schema-editor ${className}` : 'schema-editor', style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [header, jsxs("div", { className: 'cratis:px-4 cratis:py-4', children: [jsx("div", { className: 'schema-editor-menubar', children: jsx(ActionMenubar, { "aria-label": l.actions, model: menuItems }) }), schemaJsonIsInvalid && (jsx(Message, { severity: 'error', text: l.invalidJson, className: 'cratis:mt-3' }))] }), jsxs("div", { className: 'cratis:px-4 cratis:py-2 cratis-schema-editor-bottom-border', children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [jsx(Tooltip, { content: l.navigateBack, position: 'top', children: jsx(Button, { variant: 'ghost', size: 'small', icon: jsx(faIcons.FaArrowLeft, {}), onClick: navigateBack, disabled: isAtRoot, "aria-label": l.navigateBack }) }), jsx("div", { style: {
                                     fontSize: '0.9rem',
                                     color: 'var(--cratis-text-color-secondary)',
                                     cursor: 'pointer',
@@ -470,8 +526,10 @@ const SchemaEditor = ({ schema, eventTypeName = '', canEdit = true, canNotEditRe
                                 borderTop: '1px solid var(--cratis-surface-border)',
                             },
                         },
-                    }, children: [jsx(Column, { field: 'name', header: 'Property', body: (rowData) => (jsx(NameCell, { rowData: rowData, isEditMode: isEditMode, onUpdate: updateProperty, validationError: validationErrors[rowData.id], propertyNameLabel: l.propertyName })), style: { width: '30%' } }), jsx(Column, { header: 'Type', body: (rowData) => (jsx(TypeCell, { rowData: rowData, isEditMode: isEditMode, typeFormats: typeFormats, onUpdateProperty: updateProperty, onUpdateArrayItemType: updateArrayItemType, onNavigateToProperty: navigateToProperty, onNavigateToArrayItems: navigateToArrayItems, onRemoveProperty: removeProperty, labels: l })), style: { width: '70%' } })] }, `${isEditMode}-${currentPath.join('/')}`) })] }));
+                    }, children: [jsx(Column, { field: 'name', header: 'Property', body: (rowData) => (jsx(NameCell, { rowData: rowData, isEditMode: isEditMode, onUpdate: updateProperty, validationError: validationErrors[rowData.id], propertyNameLabel: l.propertyName, isLocked: isProtected(rowData.name ?? ''), lockedReason: l.protectedProperty })), style: { width: '30%' } }), showRequired && (jsx(Column, { header: l.requiredColumn, body: (rowData) => (jsx(Checkbox, { "aria-label": l.requiredProperty(rowData.name ?? ''), checked: Boolean(currentLevel?.required?.includes(rowData.name ?? '')), readOnly: !isEditMode, onChange: (checked) => setRequired(rowData.name ?? '', checked) })), style: { width: '6rem' } })), showKey && (jsx(Column, { header: l.keyColumn, body: (rowData) => (jsx(Checkbox, { "aria-label": l.keyProperty(rowData.name ?? ''), checked: isKeyProperty(currentLevel, rowData.name ?? ''), readOnly: !isEditMode, onChange: () => setKey(rowData.name ?? '') })), style: { width: '6rem' } })), jsx(Column, { header: 'Type', body: (rowData) => (jsx(TypeCell, { rowData: rowData, isEditMode: isEditMode, typeFormats: typeFormats, onUpdateProperty: updateProperty, onUpdateArrayItemType: updateArrayItemType, onNavigateToProperty: navigateToProperty, onNavigateToArrayItems: navigateToArrayItems, onRemoveProperty: removeProperty, canRemove: !isProtected(rowData.name ?? ''), labels: l })), style: { width: '70%' } })] }, `${isEditMode}-${currentPath.join('/')}`) }), footer] }));
 };
+const isKeyProperty = (level, propertyName) => level?.properties?.[propertyName]?.[KEY_KEYWORD] === true;
+const SchemaEditor = (props) => props.layout === 'tree' ? jsx(TreeSchemaEditor, { ...props }) : jsx(TableSchemaEditor, { ...props });
 
 export { SchemaEditor, defaultSchemaEditorLabels };
 //# sourceMappingURL=SchemaEditor.js.map