@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -25,7 +25,6 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const RecordSetNavigatorContainer = () => {
-    var _a, _b;
     const { data, cardView, schema } = (0, hooks_2.useRecordSetResult)();
     const [visible] = (0, hooks_2.useRecordSetVisibility)();
     const recordId = (0, hooks_1.useRecordId)();
@@ -55,7 +54,7 @@ const RecordSetNavigatorContainer = () => {
                         flexDirection: 'column',
                         paddingInline: 16,
                         paddingBlock: 8,
-                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (_b = (_a = schema.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : schema === null || schema === void 0 ? void 0 : schema.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
+                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: schema.localizedPluralLabels?.[language] ?? schema?.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data?.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
                                         record[schema.idAttribute] &&
                                         styles.selected), onClick: () => {
                                         openForm({

package/PageEntityForm/RelatedViewSelector.d.ts

@@ -2,8 +2,6 @@ import { Localized } from '@headless-adminapp/core/types';
 export interface RelatedItemInfo {
     key: string;
     logicalName: string;
-    label: string;
-    localizedLabels?: Localized<string>;
     pluralLabel: string;
     localizedPluralLabels?: Localized<string>;
     attributeName: string;

package/PageEntityForm/RelatedViewSelector.js

@@ -10,7 +10,35 @@ const utils_1 = require("@headless-adminapp/core/attributes/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
-function getRelatedItems(currentSchema, schemas) {
+function getRelatedItems(currentSchema, schemas, relatedItems) {
+    if (relatedItems === null) {
+        return [];
+    }
+    if (relatedItems) {
+        return relatedItems.map((item) => {
+            const schema = schemas[item.logicalName];
+            if (!schema) {
+                throw new Error(`Schema not found: ${item.logicalName}`);
+            }
+            if (!schema.attributes[item.attributeName]) {
+                throw new Error(`Attribute not found: ${item.logicalName}.${item.attributeName}`);
+            }
+            const attribute = schema.attributes[item.attributeName];
+            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+                throw new Error(`Attribute is not a lookup: ${item.logicalName}.${item.attributeName}`);
+            }
+            if (attribute.entity !== currentSchema.logicalName) {
+                throw new Error(`Attribute entity does not match: ${item.logicalName}.${item.attributeName}`);
+            }
+            return {
+                key: `${schema.logicalName}.${item.attributeName}`,
+                logicalName: schema.logicalName,
+                attributeName: item.attributeName,
+                pluralLabel: item.pluralLabel ?? schema.pluralLabel,
+                localizedPluralLabels: item.localizedPluralLabels ?? schema.localizedPluralLabels,
+            };
+        });
+    }
     return Object.values(schemas)
         .map((s) => {
         return Object.entries(s.attributes)
@@ -34,11 +62,9 @@ function getRelatedItems(currentSchema, schemas) {
             return {
                 key: `${s.logicalName}.${item.key}`,
                 logicalName: s.logicalName,
-                label: s.label,
-                localizedLabels: s.localizedLabels,
-                pluralLabel: s.pluralLabel,
-                localizedPluralLabels: s.localizedPluralLabels,
                 attributeName: item.key,
+                pluralLabel: item.attribute.relatedLabel ?? s.pluralLabel,
+                localizedPluralLabels: item.attribute.localizedRelatedLabel ?? s.localizedPluralLabels,
             };
         });
     })
@@ -46,11 +72,13 @@ function getRelatedItems(currentSchema, schemas) {
 }
 function RelatedViewSelector(props) {
     const schema = (0, hooks_1.useDataFormSchema)();
+    const recordId = (0, hooks_1.useRecordId)();
+    const formConfig = (0, hooks_1.useSelectedForm)();
     const { schemas } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const { language } = (0, locale_1.useLocale)();
-    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas), [schema, schemas]);
-    if (!data.length) {
+    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
+    if (!data.length || !recordId) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsxs)("button", { style: {
@@ -70,8 +98,6 @@ function RelatedViewSelector(props) {
                         outlineStyle: 'none',
                         textTransform: 'none',
                         columnGap: react_components_1.tokens.spacingHorizontalSNudge,
-                    }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => {
-                        var _a, _b;
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: (_b = (_a = item.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.pluralLabel }, item.key));
-                    }) }) })] }));
+                        color: react_components_1.tokens.colorNeutralForeground2,
+                    }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: item.localizedPluralLabels?.[language] ?? item.pluralLabel }, item.key))) }) })] }));
 }

package/PageEntityForm/SectionContainer.d.ts

@@ -1,6 +1,6 @@
 import { Section } from '@headless-adminapp/core/experience/form';
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import type { SchemaAttributes } from '@headless-adminapp/core/schema';
 export declare function SectionContainer<S extends SchemaAttributes = SchemaAttributes>({ section }: {
     section: Section<S>;
     readOnly: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

package/PageEntityForm/SectionContainer.js

@@ -2,10 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionContainer = SectionContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const builders_1 = require("@headless-adminapp/app/builders");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const constants_1 = require("@headless-adminapp/app/dataform/constants");
+const utils_1 = require("@headless-adminapp/app/dataform/DataFormProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const useEventManager_1 = require("@headless-adminapp/app/dataform/hooks/useEventManager");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_2 = require("@headless-adminapp/app/locale/utils");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const layout_1 = require("../form/layout");
 const StandardControl_1 = require("./StandardControl");
@@ -14,46 +21,103 @@ function SectionContainer({ section }) {
     const schema = (0, hooks_1.useDataFormSchema)();
     const formInstance = (0, hooks_1.useFormInstance)();
     const recordId = (0, hooks_1.useRecordId)();
-    const readonly = (0, hooks_1.useFormIsReadonly)();
+    const isFormReadonly = (0, hooks_1.useFormIsReadonly)();
     const { language } = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, builders_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
-            var _a;
+    const eventManager = (0, useEventManager_1.useEventManager)();
+    const disabledControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.disabledControls);
+    const hiddenControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenControls);
+    const requiredFields = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.requiredFields);
+    const hiddenSections = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenSections);
+    const visibleControls = (0, react_1.useMemo)(() => section.controls.filter((control) => {
+        return !(0, utils_1.getIsControlHidden)({
+            control,
+            hiddenControls,
+        });
+    }), [section.controls, hiddenControls]);
+    if (hiddenSections[section.name] || visibleControls.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_2.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: visibleControls.map((control, index) => {
             switch (control.type) {
-                case 'standard':
+                case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
+                    let Control = StandardControl_1.StandardControl;
+                    if (control.component) {
+                        if (typeof control.component === 'function') {
+                            Control = control.component;
+                        }
+                        else if (typeof control.component === 'string') {
+                            const OverrideControl = componentStore_1.componentStore.getComponent(control.component);
+                            if (OverrideControl) {
+                                Control = OverrideControl;
+                            }
+                        }
+                    }
+                    const disabled = (0, utils_1.getIsFieldDisabled)({
+                        isFormReadonly,
+                        disabledFields: disabledControls,
+                        attribute,
+                        control,
+                    });
+                    const required = (0, utils_1.getIsFieldRequired)({
+                        attribute,
+                        requiredFields,
+                        control,
+                    });
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
                                 : undefined,
                         }, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: control.attributeName, render: ({ field, fieldState, formState }) => {
-                                var _a, _b, _c, _d, _e, _f, _g;
                                 const isError = (fieldState.isTouched || formState.isSubmitted) &&
-                                    !!((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
+                                    !!fieldState.error?.message;
                                 const errorMessage = fieldState.isTouched || formState.isSubmitted
-                                    ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
+                                    ? fieldState.error?.message
                                     : '';
-                                const label = (_g = (_f = (_d = (_c = control.localizedLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : (_e = attribute.localizedLabels) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : control.label) !== null && _g !== void 0 ? _g : attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true }) }));
+                                const label = control.localizedLabels?.[language] ??
+                                    attribute.localizedLabels?.[language] ??
+                                    control.label ??
+                                    attribute.label;
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
+                                            field.onChange(value);
+                                            eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value);
+                                        }, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: disabled, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
+                                            type: 'entity-form',
+                                            recordId,
+                                            attributeName: control.attributeName,
+                                            logicalName: schema.logicalName,
+                                        } }) }));
                             } }, control.attributeName) }, control.attributeName));
+                }
                 case 'editablegrid': {
                     return null;
                 }
                 case 'quickview':
                     return null;
-                case 'subgrid':
-                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, associated: !control.associatedAttribute
+                case 'subgrid': {
+                    let ContainerComponent = null;
+                    if (control.component) {
+                        if (typeof control.component === 'function') {
+                            ContainerComponent = control.component;
+                        }
+                        else if (typeof control.component === 'string') {
+                            ContainerComponent = componentStore_1.componentStore.getComponent(control.component);
+                        }
+                    }
+                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
                             ? false
                             : {
                                 logicalName: schema.logicalName,
                                 id: recordId,
                                 refAttributeName: control.associatedAttribute,
                             } }, index));
+                }
                 case 'spacer':
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
                                 : undefined,
-                            display: `var(--section-item-spacer-${(_a = control.span) !== null && _a !== void 0 ? _a : 1})`,
+                            display: `var(--section-item-spacer-${control.span ?? 1})`,
                         } }, index));
                 default:
                     return null;

package/PageEntityForm/StandardControl.d.ts

@@ -1,24 +1,3 @@
-import type { Attribute } from '@headless-adminapp/core/attributes';
+import type { StandardControlProps } from '@headless-adminapp/core/experience/form/SectionControl';
 import { FC } from 'react';
-interface StandardControlProps {
-    attribute: Attribute;
-    label?: string;
-    isError: boolean;
-    errorMessage: string | undefined;
-    name: string;
-    value: any;
-    placeholder?: string;
-    onChange: (value: any) => void;
-    onBlur: () => void;
-    disabled?: boolean;
-    borderOnFocusOnly?: boolean;
-    hideLabel?: boolean;
-    hidePlaceholder?: boolean;
-    allowQuickCreate?: boolean;
-    readOnly?: boolean;
-    quickViewControl?: boolean;
-    allowNavigation?: boolean;
-    allowNewRecord?: boolean;
-}
 export declare const StandardControl: FC<StandardControlProps>;
-export {};

package/PageEntityForm/StandardControl.js

@@ -8,42 +8,53 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
+const componentStore_1 = require("../componentStore");
+const AttachmentControl_1 = require("../form/controls/AttachmentControl");
+const AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
 const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
 const DateRangeControl_1 = require("../form/controls/DateRangeControl");
 const DateTimeControl_1 = require("../form/controls/DateTimeControl");
+const DecimalControl_1 = require("../form/controls/DecimalControl");
+const DurationControl_1 = require("../form/controls/DurationControl");
 const EmailControl_1 = require("../form/controls/EmailControl");
+const IntegerControl_1 = require("../form/controls/IntegerControl");
 const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
-const NumberControl_1 = require("../form/controls/NumberControl");
+const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
-const StandardControl = ({ attribute, label: _label, isError, 
-// errorMessage,
-name, value, onBlur, onChange, 
-// dataService,
-// fileService,
-disabled, borderOnFocusOnly, placeholder: _placeholder, 
-// hideLabel,
-hidePlaceholder, readOnly, 
-// quickViewControl,
-allowNavigation, allowNewRecord, }) => {
-    var _a;
-    const isDisabled = attribute.readonly || disabled;
+const UrlControl_1 = require("../form/controls/UrlControl");
+// Standard Control (Base control)
+// TextControl
+// TextInput
+const StandardControl = (props) => {
+    const { attribute, label: _label, isError, 
+    // errorMessage,
+    name, value, onBlur, onChange, 
+    // dataService,
+    // fileService,
+    borderOnFocusOnly, placeholder: _placeholder, 
+    // hideLabel,
+    hidePlaceholder, readOnly, 
+    // quickViewControl,
+    allowNavigation, allowNewRecord, } = props;
+    const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
         ? undefined
-        : (_a = _placeholder !== null && _placeholder !== void 0 ? _placeholder : _label) !== null && _a !== void 0 ? _a : attribute.label;
+        : _placeholder ?? _label ?? attribute.label;
     // const required = quickViewControl ? false : attribute.required;
     const dataService = (0, transport_1.useDataService)();
+    const fileService = (0, transport_1.useFileService)();
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
-        case 'string':
+        case 'string': {
             const controlProps = {
                 name,
                 placeholder,
@@ -51,25 +62,58 @@ allowNavigation, allowNewRecord, }) => {
                 onChange,
                 onBlur,
                 error: isError,
-                disabled: isDisabled,
+                disabled: readOnly,
                 readOnly,
             };
             switch (attribute.format) {
-                case 'text':
-                    return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({}, controlProps, { textTransform: attribute.textTransform })));
-                case 'email':
-                    return (0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, Object.assign({}, controlProps));
-                case 'phone':
-                    return (0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, Object.assign({}, controlProps));
-                case 'url':
-                    return (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({}, controlProps));
-                case 'textarea':
-                    return (0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, Object.assign({}, controlProps));
+                case 'text': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.TextControl') ?? TextControl_1.TextControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { ...controlProps, textTransform: attribute.textTransform }));
+                }
+                case 'email': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.EmailControl') ?? EmailControl_1.EmailControl;
+                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                }
+                case 'phone': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.TelephoneControl') ?? TelephoneControl_1.TelephoneControl;
+                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                }
+                case 'url': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.UrlControl') ??
+                        UrlControl_1.UrlControl;
+                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                }
+                case 'textarea': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.TextAreaControl') ?? TextAreaControl_1.TextAreaControl;
+                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                }
+                case 'richtext': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.RichTextControl') ?? RichTextControl_1.RichTextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                }
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
-        case 'number':
-            return ((0, jsx_runtime_1.jsx)(NumberControl_1.NumberControl, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+        }
+        case 'number': {
+            switch (attribute.format) {
+                case 'decimal': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.DecimalControl') ?? DecimalControl_1.DecimalControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, decimalPlaces: attribute.decimalPlaces }));
+                }
+                case 'integer': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.IntegerControl') ?? IntegerControl_1.IntegerControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                case 'duration': {
+                    const Control = componentStore_1.componentStore.getComponent('Form.DurationControl') ?? DurationControl_1.DurationControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                default: {
+                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+                }
+            }
+        }
         case 'date': {
             const controlProps = {
                 name,
@@ -82,10 +126,13 @@ allowNavigation, allowNewRecord, }) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                return (0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({}, controlProps));
+                const Control = componentStore_1.componentStore.getComponent('Form.DateTimeControl') ?? DateTimeControl_1.DateTimeControl;
+                return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
             }
             else {
-                return (0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({}, controlProps));
+                const Control = componentStore_1.componentStore.getComponent('Form.DateControl') ??
+                    DateControl_1.DateControl;
+                return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
             }
         }
         case 'daterange': {
@@ -99,105 +146,40 @@ allowNavigation, allowNewRecord, }) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            return (0, jsx_runtime_1.jsx)(DateRangeControl_1.DateRangeControl, Object.assign({}, controlProps));
+            const Control = componentStore_1.componentStore.getComponent('Form.DateRangeControl') ?? DateRangeControl_1.DateRangeControl;
+            return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
         }
         case 'money': {
-            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = componentStore_1.componentStore.getComponent('Form.CurrencyControl') ?? CurrencyControl_1.CurrencyControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            //   const experienceSchema = getExperienceSchema(attribute.entity);
-            //   const routes = getExperienceRoutes(attribute.entity);
-            //   const path = routes?.create?.();
-            //   let createButtonProps:
-            //     | {
-            //         label: string;
-            //         onClick: () => void;
-            //       }
-            //     | undefined;
-            //   if (allowQuickCreate && experienceSchema.defaultQuickCreateForm) {
-            //     createButtonProps = {
-            //       label: 'New record',
-            //       onClick: async () => {
-            //         try {
-            //           const result = await openQuickCreate({
-            //             logicalName: attribute.entity,
-            //           });
-            //           if (result) {
-            //             onChange(result);
-            //           }
-            //         } catch (error) {
-            //           console.error(error);
-            //         }
-            //       },
-            //     };
-            //   } else if (path) {
-            //     createButtonProps = {
-            //       label: 'New record',
-            //       onClick: () => {
-            //         router.push(path);
-            //       },
-            //     };
-            //   }
-            //   return (
-            //     <FormControl
-            //       type="lookup"
-            //       name={name}
-            //       label={label}
-            //       placeholder={placeholder}
-            //       required={required}
-            //       value={value}
-            //       onChange={onChange}
-            //       onBlur={onBlur}
-            //       error={isError}
-            //       helperText={errorMessage}
-            //       disabled={isDisabled}
-            //       borderOnFocusOnly={borderOnFocusOnly}
-            //       readOnly={readOnly}
-            //       createButton={createButtonProps}
-            //       openRecord={
-            //         routes?.edit
-            //           ? (id) => {
-            //               router.push(routes.edit!(id));
-            //             }
-            //           : undefined
-            //       }
-            //       async
-            //       dataResolver={async (options) => {
-            //         const lookupSchema = getSchema(attribute.entity);
-            //         const data = await dataService.retriveRecords({
-            //           logicalName: attribute.entity,
-            //           search: options?.search ?? '',
-            //           columnFilters: {},
-            //           pagination: {
-            //             pageIndex: 0,
-            //             rowsPerPage: 10,
-            //             sortBy: 'createdAt',
-            //             sortOrder: 'desc',
-            //           },
-            //           viewFilter: null,
-            //           columns: ['_id', lookupSchema.primaryAttribute ?? 'name'],
-            //           limit: options?.limit ?? 10,
-            //         });
-            //         return data.records.map((x: any) => ({
-            //           _id: x._id,
-            //           name: x[lookupSchema.primaryAttribute ?? 'name'],
-            //         }));
-            //       }}
-            //     />
-            //   );
-            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            const Control = componentStore_1.componentStore.getComponent('Form.LookupControl') ?? LookupControl_1.LookupControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl') ?? MultiSelectLookupControl_1.MultiSelectLookupControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+            const Control = componentStore_1.componentStore.getComponent('Form.SwitchControl') ?? SwitchControl_1.SwitchControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = componentStore_1.componentStore.getComponent('Form.SelectControl') ?? SelectControl_1.default;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectControl') ?? MultiSelectControl_1.default;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+        }
+        case 'attachment': {
+            const Control = componentStore_1.componentStore.getComponent('Form.AttachmentControl') ?? AttachmentControl_1.AttachmentControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
+        }
+        case 'attachments': {
+            const Control = componentStore_1.componentStore.getComponent('Form.AttachmentsControl') ?? AttachmentsControl_1.AttachmentsControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {
         //   return (
@@ -222,6 +204,10 @@ allowNavigation, allowNewRecord, }) => {
         //   );
         // }
     }
+    const FallBackControl = componentStore_1.componentStore.getComponent('StandardControl.FallBack');
+    if (FallBackControl) {
+        return (0, jsx_runtime_1.jsx)(FallBackControl, { ...props });
+    }
     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
 };
 exports.StandardControl = StandardControl;

package/PageEntityForm/SubgridControl.d.ts

@@ -8,6 +8,7 @@ interface SubgridControlProps {
         id: string;
         refAttributeName: string;
     };
+    ContainerComponent?: React.ComponentType<any> | null;
 }
 export declare function SubgridControl(props: SubgridControlProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/SubgridControl.js

@@ -7,8 +7,8 @@ const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProv
 const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const react_1 = require("react");
 const FormSubgridContainer_1 = require("../PageEntityView/FormSubgridContainer");
+const FormSubgridNotAvailableContainer_1 = require("../PageEntityView/FormSubgridNotAvailableContainer");
 function SubgridControl(props) {
-    var _a;
     const schema = (0, hooks_1.useSchema)(props.logicalName);
     const [viewId, setViewId] = (0, react_1.useState)(props.viewId);
     const { view, isLoadingView } = (0, hooks_1.useExperienceView)(props.logicalName, viewId, !!props.associated, props.availableViewIds);
@@ -62,5 +62,7 @@ function SubgridControl(props) {
         }
         return brokenContent;
     }
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: props.associated ? true : false, extraFilter: extraFilter, allowViewSelection: (_a = props.allowViewSelection) !== null && _a !== void 0 ? _a : false, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer_1.FormSubgridContainer, {}) }));
+    const ContainerComponent = props.ContainerComponent ?? FormSubgridContainer_1.FormSubgridContainer;
+    const disabled = !!props.associated && !props.associated.id;
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: props.allowViewSelection ?? false, disabled: disabled, children: disabled ? (0, jsx_runtime_1.jsx)(FormSubgridNotAvailableContainer_1.FormSubgridNotAvailableContainer, {}) : (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
 }

package/PageEntityForm/UploadImageDialog.d.ts

@@ -0,0 +1,12 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { FC } from 'react';
+interface UploadImageDialogProps {
+    recordId: string;
+    recordTitle: string;
+    currentImage: FileObject | null;
+    onChange?: (value: FileObject | null) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const UploadImageDialog: FC<UploadImageDialogProps>;
+export {};