@headless-adminapp/fluent 0.0.17-alpha.1

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordSetNavigatorContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const hooks_3 = require("@headless-adminapp/app/route/hooks");
+const app_1 = require("@headless-adminapp/core/experience/app");
+const react_1 = require("react");
+const RecordCard_1 = require("./RecordCard");
+const useStyles = (0, react_components_1.makeStyles)({
+    item: {
+        cursor: 'pointer',
+        '&:hover': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+        },
+        '&:active': {
+            background: react_components_1.tokens.colorNeutralBackground1Pressed,
+        },
+    },
+    selected: {
+        background: react_components_1.tokens.colorNeutralBackground1Selected,
+    },
+});
+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)();
+    const styles = useStyles();
+    const routeResolver = (0, hooks_3.useRouteResolver)();
+    const router = (0, hooks_3.useRouter)();
+    const { language, direction } = (0, locale_1.useLocale)();
+    if (!schema) {
+        return null;
+    }
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            [direction === 'rtl' ? 'paddingRight' : 'paddingLeft']: react_components_1.tokens.spacingVerticalM,
+            paddingBlock: react_components_1.tokens.spacingVerticalM,
+            display: 'flex',
+            // display: 'none',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                boxShadow: react_components_1.tokens.shadow2,
+                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                background: react_components_1.tokens.colorNeutralBackground1,
+                display: 'flex',
+                minWidth: 320,
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        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 ===
+                                        record[schema.idAttribute] &&
+                                        styles.selected), onClick: () => {
+                                        const path = routeResolver({
+                                            type: app_1.PageType.EntityForm,
+                                            logicalName: schema.logicalName,
+                                            id: record[schema.idAttribute],
+                                        });
+                                        router.replace(path);
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
+                                            record[schema.idAttribute] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingInline: react_components_1.tokens.spacingHorizontalL }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
+};
+exports.RecordSetNavigatorContainer = RecordSetNavigatorContainer;

package/PageEntityForm/RelatedViewSelector.d.ts

@@ -0,0 +1,15 @@
+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;
+}
+interface RelatedViewSelectorProps {
+    onSelect: (item: RelatedItemInfo) => void;
+}
+export declare function RelatedViewSelector(props: RelatedViewSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/PageEntityForm/RelatedViewSelector.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelatedViewSelector = RelatedViewSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
+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) {
+    return Object.values(schemas)
+        .map((s) => {
+        return Object.entries(s.attributes)
+            .map(([key, attribute]) => {
+            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+                return null;
+            }
+            // console.log('temp.a ', attribute);
+            if (attribute.entity !== currentSchema.logicalName) {
+                return null;
+            }
+            return {
+                key,
+                attribute,
+            };
+        })
+            .filter(Boolean)
+            .map((item) => {
+            if (!item) {
+                throw new Error('item is null');
+            }
+            return {
+                key: `${s.logicalName}.${item.key}`,
+                logicalName: s.logicalName,
+                label: s.label,
+                localizedLabels: s.localizedLabels,
+                pluralLabel: s.pluralLabel,
+                localizedPluralLabels: s.localizedPluralLabels,
+                attributeName: item.key,
+            };
+        });
+    })
+        .flat();
+}
+function RelatedViewSelector(props) {
+    const schema = (0, hooks_1.useDataFormSchema)();
+    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) {
+        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: {
+                        border: 'none',
+                        overflow: 'hidden',
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        padding: `${react_components_1.tokens.spacingVerticalM} ${react_components_1.tokens.spacingHorizontalMNudge}`,
+                        fontFamily: react_components_1.tokens.fontFamilyBase,
+                        lineHeight: react_components_1.tokens.lineHeightBase300,
+                        backgroundColor: react_components_1.tokens.colorTransparentBackground,
+                        alignItems: 'center',
+                        position: 'relative',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        flexShrink: 0,
+                        cursor: 'pointer',
+                        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));
+                    }) }) })] }));
+}

package/PageEntityForm/SectionContainer.d.ts

@@ -0,0 +1,6 @@
+import { Section } from '@headless-adminapp/core/experience/form';
+import { 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;

package/PageEntityForm/SectionContainer.js

@@ -0,0 +1,62 @@
+"use strict";
+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 hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const react_hook_form_1 = require("react-hook-form");
+const SectionControl_1 = require("../DataForm/SectionControl");
+const layout_1 = require("../form/layout");
+const StandardControl_1 = require("./StandardControl");
+const SubgridControl_1 = require("./SubgridControl");
+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 { 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;
+            switch (control.type) {
+                case 'standard':
+                    const attribute = schema.attributes[control.attributeName];
+                    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);
+                                const errorMessage = fieldState.isTouched || formState.isSubmitted
+                                    ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.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 }) }));
+                            } }, 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
+                            ? 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})`,
+                        } }, index));
+                default:
+                    return null;
+            }
+        }) }));
+}

package/PageEntityForm/StandardControl.d.ts

@@ -0,0 +1,24 @@
+import type { Attribute } from '@headless-adminapp/core/attributes';
+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

@@ -0,0 +1,227 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardControl = void 0;
+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 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 EmailControl_1 = require("../form/controls/EmailControl");
+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 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 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;
+    // const required = quickViewControl ? false : attribute.required;
+    const dataService = (0, transport_1.useDataService)();
+    const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
+    // const { openQuickCreate } = useQuickCreateForm();
+    switch (attribute.type) {
+        case 'string':
+            const controlProps = {
+                name,
+                placeholder,
+                value,
+                onChange,
+                onBlur,
+                error: isError,
+                disabled: isDisabled,
+                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));
+                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 'date': {
+            const controlProps = {
+                name,
+                placeholder,
+                value,
+                onChange,
+                onBlur,
+                error: isError,
+                disabled: isDisabled,
+                readOnly,
+            };
+            if (attribute.format === 'datetime') {
+                return (0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({}, controlProps));
+            }
+            else {
+                return (0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({}, controlProps));
+            }
+        }
+        case 'daterange': {
+            const controlProps = {
+                name,
+                placeholder,
+                value,
+                onChange,
+                onBlur,
+                error: isError,
+                disabled: isDisabled,
+                readOnly,
+            };
+            return (0, jsx_runtime_1.jsx)(DateRangeControl_1.DateRangeControl, Object.assign({}, 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 }));
+        }
+        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 }));
+        }
+        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 }));
+        }
+        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 }));
+        }
+        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 }));
+        }
+        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 }));
+        }
+        // case 'attachment': {
+        //   return (
+        //     <FormControl
+        //       type="attachment"
+        //       name={name}
+        //       label={label}
+        //       required={required}
+        //       value={value}
+        //       onChange={onChange}
+        //       onBlur={onBlur}
+        //       error={isError}
+        //       helperText={errorMessage}
+        //       disabled={isDisabled}
+        //       placeholder={placeholder}
+        //       borderOnFocusOnly={borderOnFocusOnly}
+        //       readOnly={readOnly}
+        //       format={attribute.format}
+        //       maxSize={attribute.maxSize}
+        //       fileService={fileService}
+        //     />
+        //   );
+        // }
+    }
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+};
+exports.StandardControl = StandardControl;

package/PageEntityForm/SubgridControl.d.ts

@@ -0,0 +1,13 @@
+interface SubgridControlProps {
+    logicalName: string;
+    allowViewSelection?: boolean;
+    viewId?: string;
+    availableViewIds?: string[];
+    associated: false | {
+        logicalName: string;
+        id: string;
+        refAttributeName: string;
+    };
+}
+export declare function SubgridControl(props: SubgridControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/PageEntityForm/SubgridControl.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubgridControl = SubgridControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
+const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
+const react_1 = require("react");
+const FormSubgridContainer_1 = require("../PageEntityView/FormSubgridContainer");
+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);
+    const { viewLookup } = (0, hooks_1.useExperienceViewLookup)(props.logicalName, !!props.associated, props.availableViewIds);
+    const { commands } = (0, hooks_1.useExperienceViewCommands)(props.logicalName);
+    const { commands: subgridCommands } = (0, hooks_1.useExperienceViewSubgridCommands)(props.logicalName);
+    const extraFilter = (0, react_1.useMemo)(() => {
+        if (!props.associated) {
+            return undefined;
+        }
+        return {
+            type: 'and',
+            conditions: [
+                {
+                    field: props.associated.refAttributeName,
+                    operator: 'eq',
+                    value: props.associated.id,
+                },
+            ],
+        };
+    }, [props.associated]);
+    const loadingContent = ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 16,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}) }));
+    const brokenContent = ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 16,
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: "Unable to load control" }) }));
+    if (!schema) {
+        return brokenContent;
+    }
+    if (!view) {
+        if (isLoadingView) {
+            return loadingContent;
+        }
+        return brokenContent;
+    }
+    if (view.logicalName !== schema.logicalName) {
+        if (isLoadingView) {
+            console.log('missmatched view', view, schema);
+            return loadingContent;
+        }
+        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, {}) }));
+}

package/PageEntityForm/index.d.ts

@@ -0,0 +1 @@
+export { PageEntityForm } from './PageEntityForm';

package/PageEntityForm/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityForm = void 0;
+var PageEntityForm_1 = require("./PageEntityForm");
+Object.defineProperty(exports, "PageEntityForm", { enumerable: true, get: function () { return PageEntityForm_1.PageEntityForm; } });

package/PageEntityView/FormSubgridContainer.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface FormSubgridContainerProps {
+    hideCommandBar?: boolean;
+    hideSearch?: boolean;
+}
+export declare const FormSubgridContainer: FC<FormSubgridContainerProps>;
+export {};