@headless-adminapp/fluent 1.1.4 → 1.1.7

package/DataGrid/TableCell/TableCellChoice.js

@@ -2,33 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellChoice = TableCellChoice;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const color_1 = require("@headless-adminapp/app/utils/color");
-const react_1 = require("react");
+const ChoiceBadge_1 = require("../../components/ChoiceBadge");
 const TableCellBase_1 = require("./TableCellBase");
 function TableCellChoice(props) {
-    const bgColor = (0, react_1.useMemo)(() => {
-        if (!props.value || !props.attribute.options) {
-            return;
-        }
-        return props.attribute.options.find((option) => option.value === props.value)?.color;
-    }, [props.attribute.options, props.value]);
-    const color = (0, react_1.useMemo)(() => {
-        if (!bgColor) {
-            return;
-        }
-        return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
-    }, [bgColor]);
-    if (!props.formattedValue) {
-        return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                width: props.width,
-                minWidth: props.width,
-                maxWidth: props.width,
-            } }));
-    }
     return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
             textOverflow: 'ellipsis',
             overflow: 'hidden',
@@ -36,9 +12,5 @@ function TableCellChoice(props) {
             width: props.width,
             minWidth: props.width,
             maxWidth: props.width,
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: {
-                backgroundColor: bgColor ?? react_components_1.tokens.colorNeutralBackground3,
-                color: color ?? react_components_1.tokens.colorNeutralForeground2,
-                fontWeight: react_components_1.tokens.fontWeightRegular,
-            }, children: props.formattedValue }) }));
+        }, children: (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }) }));
 }

package/DataGrid/useTableColumns.js

@@ -320,6 +320,19 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
                 formattedValue,
             });
         }
+        case 'regarding': {
+            return renderRegardingAttribute({
+                info,
+                column,
+                schemaStore,
+                routeResolver,
+                recordSetSetter,
+                router,
+                value,
+                attribute,
+                formattedValue,
+            });
+        }
         case 'attachment': {
             const url = value?.url;
             if (!url) {
@@ -346,7 +359,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
 }
 function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {
     const path = routeResolver({
-        logicalName: schema.logicalName,
+        logicalName: info.row.original.$entity,
         type: app_1.PageType.EntityForm,
         id: info.row.original[schema.idAttribute],
     });
@@ -355,7 +368,7 @@ function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecor
                     schema,
                     value,
                 }), value] }), width: info.column.getSize(), href: path, onClick: () => {
-            openRecord(info.row.original[schema.idAttribute]);
+            openRecord(info.row.original[schema.idAttribute], info.row.original.$entity);
         } }, column.id));
 }
 function renderPrimaryAttributeAvatar({ info, schema, value, }) {
@@ -396,3 +409,29 @@ function renderLookupAttribute({ value, info, column, schemaStore, routeResolver
             router.push(path);
         } }, column.id));
 }
+function renderRegardingAttribute({ value, info, column, schemaStore, routeResolver, recordSetSetter, router, formattedValue, }) {
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+    }
+    const hasSchema = schemaStore.hasSchema(value.logicalName);
+    if (!hasSchema) {
+        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+    }
+    const logicalName = value.logicalName;
+    const lookupSchema = schemaStore.getSchema(logicalName);
+    const path = routeResolver({
+        logicalName,
+        type: app_1.PageType.EntityForm,
+        id: value.id,
+    });
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+                        width: 24,
+                        height: 24,
+                        fontSize: react_components_1.tokens.fontSizeBase100,
+                    }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
+                        src: value.avatar,
+                    } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
+            recordSetSetter('', []);
+            router.push(path);
+        } }, column.id));
+}

package/PageEntityForm/PageEntityForm.js

@@ -19,6 +19,14 @@ const PageEntityForm = ({ logicalName, formId, recordId, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, form, commands } = result;
+    if (!recordId) {
+        if (schema.virtual) {
+            return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: "Virtual Schema", message: "This schema is virtual and cannot be used in this context." }));
+        }
+        if (schema.restrictions?.disableCreate) {
+            return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: "Creating is disabled", message: "Creating records is disabled for this entity." }));
+        }
+    }
     return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flex: 1,

package/PageEntityForm/SectionContainer.d.ts

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

package/PageEntityForm/SectionContainer.js

@@ -39,7 +39,7 @@ function SectionContainer({ section }) {
     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) => {
+    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, fullHeight: section.fullHeight, children: visibleControls.map((control, index) => {
             switch (control.type) {
                 case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
@@ -94,7 +94,7 @@ function SectionContainer({ section }) {
                                             recordId,
                                             attributeName: control.attributeName,
                                             logicalName: schema.logicalName,
-                                        } }) }));
+                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {
@@ -120,12 +120,26 @@ function SectionContainer({ section }) {
                                 refAttributeName: control.associatedAttribute,
                             } }, index));
                 }
+                case 'component': {
+                    const Component = control.component === 'string'
+                        ? componentStore_1.componentStore.getComponent(control.component)
+                        : control.component;
+                    if (!Component) {
+                        console.warn(`Component ${control.component} not found for control ${control.key}`);
+                        return null;
+                    }
+                    return ((0, jsx_runtime_1.jsx)("div", { style: {
+                            gridColumn: control.span
+                                ? `var(--section-item-span-${control.span ?? 1})`
+                                : undefined,
+                            display: 'flex',
+                        }, children: (0, jsx_runtime_1.jsx)(Component, { ...control.componentProps }) }, index));
+                }
                 case 'spacer':
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
-                                ? `var(--section-item-span-${control.span})`
+                                ? `var(--section-item-span-${control.span ?? 1})`
                                 : undefined,
-                            display: `var(--section-item-spacer-${control.span ?? 1})`,
                         } }, index));
                 default:
                     return null;

package/PageEntityForm/StandardControl.js

@@ -22,6 +22,7 @@ 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 RegardingControl_1 = require("../form/controls/RegardingControl");
 const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
@@ -43,7 +44,7 @@ const StandardControl = (props) => {
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
-    allowNavigation, allowNewRecord, } = props;
+    allowNavigation, allowNewRecord, autoHeight, maxHeight, } = props;
     const isDisabled = readOnly;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
@@ -86,7 +87,7 @@ const StandardControl = (props) => {
                 }
                 case 'textarea': {
                     const Control = componentStore_1.componentStore.getComponent('Form.TextAreaControl') ?? TextAreaControl_1.TextAreaControl;
-                    return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
+                    return ((0, jsx_runtime_1.jsx)(Control, { ...controlProps, autoHeight: autoHeight, maxHeight: maxHeight }));
                 }
                 case 'richtext': {
                     const Control = componentStore_1.componentStore.getComponent('Form.RichTextControl') ?? RichTextControl_1.RichTextControl;
@@ -166,6 +167,10 @@ const StandardControl = (props) => {
             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 'regarding': {
+            const Control = componentStore_1.componentStore.getComponent('Form.RegardingControl') ?? RegardingControl_1.RegardingControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, entities: attribute.entities, schemaStore: schemaStore, experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+        }
         case 'boolean': {
             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 }));

package/components/ChoiceBadge.d.ts

@@ -0,0 +1,9 @@
+import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+interface ChoiceBadgeProps {
+    value: unknown;
+    attribute: ChoiceAttribute<string | number>;
+    formattedValue: string | null;
+    size?: 'small' | 'medium';
+}
+export declare function ChoiceBadge(props: Readonly<ChoiceBadgeProps>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/components/ChoiceBadge.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceBadge = ChoiceBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const color_1 = require("@headless-adminapp/app/utils/color");
+const react_1 = require("react");
+function ChoiceBadge(props) {
+    const bgColor = (0, react_1.useMemo)(() => {
+        if (!props.value || !props.attribute.options) {
+            return;
+        }
+        return props.attribute.options.find((option) => option.value === props.value)?.color;
+    }, [props.attribute.options, props.value]);
+    const color = (0, react_1.useMemo)(() => {
+        if (!bgColor) {
+            return;
+        }
+        return (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+    }, [bgColor]);
+    if (!props.formattedValue) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: {
+            backgroundColor: bgColor ?? react_components_1.tokens.colorNeutralBackground3,
+            color: color ?? react_components_1.tokens.colorNeutralForeground2,
+            fontWeight: react_components_1.tokens.fontWeightRegular,
+        }, size: props.size, children: props.formattedValue }));
+}

package/components/LoginForm.d.ts

@@ -1,6 +1,14 @@
+export interface LoginFormData {
+    username: string;
+    password: string;
+}
 interface LoginFormProps {
     logoImageUrl?: string;
     onLogin: (username: string, password: string) => Promise<void>;
+    beforeLoginContent?: React.ReactNode;
+    afterLoginContent?: React.ReactNode;
+    subtitle?: string;
+    defaultValues?: LoginFormData;
 }
 export declare function LoginForm(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/LoginForm.js

@@ -44,7 +44,7 @@ const initialValues = {
 };
 function LoginForm(props) {
     const form = (0, react_hook_form_1.useForm)({
-        defaultValues: initialValues,
+        defaultValues: props.defaultValues ?? initialValues,
         resolver: (0, yup_1.yupResolver)(validationSchema),
     });
     const handleOnSubmit = async (values) => {
@@ -72,14 +72,14 @@ function LoginForm(props) {
                             width: 80,
                             height: 80,
                             aspectRatio: 'auto 80 / 80',
-                        }, alt: "logo" })) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle1, { children: "Log in to your account" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, alt: "logo" })) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle1, { children: "Log in to your account" }), props.subtitle && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: props.subtitle }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'stretch',
                         justifyContent: 'flex-start',
                         gap: 16,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), props.beforeLoginContent, !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
                                 marginTop: 8,
                                 pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
-                            }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));
+                            }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] }), props.afterLoginContent] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));
 }

package/components/PageLogin.d.ts

@@ -1,7 +1,12 @@
+import { LoginFormData } from './LoginForm';
 interface LoginPageProps {
     logoImageUrl?: string;
     illustrationImageUrl?: string;
     onLogin: (username: string, password: string) => Promise<void>;
+    beforeLoginContent?: React.ReactNode;
+    afterLoginContent?: React.ReactNode;
+    subtitle?: string;
+    defaultValues?: LoginFormData;
 }
 export declare function PageLogin(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageLogin.js

@@ -33,7 +33,8 @@ function PageLogin(props) {
                                 justifyContent: 'flex-start',
                                 gap: 16,
                                 minWidth: 300,
-                            }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { logoImageUrl: props.logoImageUrl, onLogin: props.onLogin }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                maxWidth: 300,
+                            }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { logoImageUrl: props.logoImageUrl, onLogin: props.onLogin, defaultValues: props.defaultValues, beforeLoginContent: props.beforeLoginContent, afterLoginContent: props.afterLoginContent, subtitle: props.subtitle }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 16,

package/form/controls/RegardingControl.d.ts

@@ -0,0 +1,25 @@
+import { ISchemaExperienceStore, ISchemaStore } from '@headless-adminapp/core/store';
+import { IDataService } from '@headless-adminapp/core/transport';
+import { ControlProps } from './types';
+export interface LookupOption {
+    limit: number;
+    search: string;
+    enabled?: boolean;
+}
+export type DataLookup = {
+    id: string;
+    name: string;
+    logicalName: string;
+    avatar?: string;
+};
+export type RegardingControlProps = ControlProps<DataLookup> & {
+    lookupKey?: string;
+    dataService: IDataService;
+    entities: string[];
+    schemaStore: ISchemaStore;
+    experienceStore: ISchemaExperienceStore;
+    viewId?: string;
+    allowNavigation?: boolean;
+    allowNewRecord?: boolean;
+};
+export declare function RegardingControl(props: RegardingControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/RegardingControl.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegardingControl = RegardingControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const app_1 = require("@headless-adminapp/app/app");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const useMetadata_1 = require("@headless-adminapp/app/metadata/hooks/useMetadata");
+const hooks_2 = require("@headless-adminapp/app/route/hooks");
+const app_2 = require("@headless-adminapp/core/experience/app");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const AppStringContext_1 = require("../../App/AppStringContext");
+const RecordCard_1 = require("../../PageEntityForm/RecordCard");
+const avatar_1 = require("../../utils/avatar");
+const useLookupData_1 = require("./useLookupData");
+function RegardingControl(props) {
+    const Control = LookupControlMd;
+    return (0, jsx_runtime_1.jsx)(Control, { ...props });
+}
+const useStyles = (0, react_components_1.makeStyles)({
+    option: {
+        padding: 0,
+        '& .fui-Option__checkIcon': {
+            display: 'none',
+        },
+        '&[data-activedescendant-focusvisible]': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+            '&:after': {
+                border: 'none !important',
+                // background: tokens.colorNeutralBackground1Hover,
+            },
+        },
+    },
+});
+const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, entities, schemaStore, allowNavigation, }) => {
+    const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const { loockupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const routeResolver = (0, hooks_2.useRouteResolver)();
+    const router = (0, hooks_2.useRouter)();
+    const path = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return '';
+        }
+        if (!allowNavigation) {
+            return '';
+        }
+        return routeResolver({
+            logicalName: value.logicalName,
+            type: app_2.PageType.EntityForm,
+            id: value.id,
+        });
+    }, [allowNavigation, routeResolver, value]);
+    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!path) {
+            return;
+        }
+        router.push(path);
+    }, [path, router]);
+    (0, react_1.useEffect)(() => {
+        if (open)
+            setLookupEnabled(true);
+    }, [open]);
+    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const styles = useStyles();
+    const { experienceStore } = (0, useMetadata_1.useMetadata)();
+    const { isFetching: isConfigFetching, data: configs } = (0, react_query_1.useQuery)({
+        queryKey: ['data', 'getLookupViews', entities, undefined],
+        queryFn: async () => {
+            return Promise.all(entities.map(async (name) => {
+                const schema = schemaStore.getSchema(name);
+                const view = await experienceStore.getViewLookupV2(name);
+                return {
+                    schema,
+                    view: view?.experience,
+                };
+            }));
+        },
+        throwOnError: true,
+        initialData: [],
+    });
+    const result = (0, useLookupData_1.useLookupDatas)({
+        dataService,
+        searchText: debouncedSearchText,
+        enabled: lookupEnabled && !isConfigFetching && !value && !readOnly && !disabled,
+        items: configs,
+    });
+    const isLoading = result.some((item) => item.isFetching);
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            setSearchText(value.name);
+        }
+        else {
+            setSearchText('');
+        }
+    }, [value]);
+    const handleChange = (value) => {
+        setSearchText('');
+        if (!value) {
+            return onChange?.(null);
+        }
+        else {
+            const schema = schemaStore.getSchema(value.$entity);
+            return onChange?.({
+                id: value[schema.idAttribute],
+                name: value[schema.primaryAttribute],
+                logicalName: schema.logicalName,
+            });
+        }
+    };
+    const valueSchema = (0, react_1.useMemo)(() => {
+        if (!value) {
+            return null;
+        }
+        return schemaStore.getSchema(value?.logicalName);
+    }, [schemaStore, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, 
+                // disabled={disabled}
+                open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {
+                    setSearchText(e.target.value);
+                }, onOptionSelect: (e, item) => {
+                    const _item = result
+                        .map((group, index) => {
+                        const schema = configs[index].schema;
+                        if (!schema) {
+                            return null;
+                        }
+                        const data = group.data;
+                        const record = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
+                        return record;
+                    })
+                        .filter(Boolean)[0];
+                    handleChange(_item ?? null);
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [result.map((group, index) => {
+                        const schema = configs[index].schema;
+                        const view = configs[index].view;
+                        const data = group.data;
+                        if (!data?.records.length) {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.OptionGroup, { label: schema.label, children: data?.records.map((item) => {
+                                return ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]));
+                            }) }, schema.logicalName));
+                    }), !isLoading &&
+                        result.every((item) => !item.data?.records.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            paddingInline: react_components_1.tokens.spacingHorizontalL,
+                            paddingBlock: react_components_1.tokens.spacingVerticalS,
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: loockupStrings.noRecordsFound }) }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    alignItems: 'center',
+                    paddingInline: 4,
+                    display: 'flex',
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TagGroup, { as: "div", children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", dismissible: !disabled && !readOnly, value: value.id, style: {
+                            paddingRight: !disabled && !readOnly ? 0 : 5,
+                            background: react_components_1.tokens.colorNeutralBackground6,
+                        }, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                                onChange?.(null);
+                            }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), primaryText: {
+                            style: {
+                                paddingBottom: 0,
+                            },
+                        }, children: allowNavigation && path ? ((0, jsx_runtime_1.jsxs)(react_components_1.Link, { href: path, onClick: handleOpenRecord, style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: react_components_1.tokens.spacingHorizontalXS,
+                            }, children: [!!valueSchema && ((0, jsx_runtime_1.jsx)(LookupAvatar, { schema: valueSchema, logicalName: valueSchema.logicalName, value: value })), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: value?.name })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: value?.name })) }) }) }))] }));
+};
+const LookupAvatar = ({ logicalName, schema, value, }) => {
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
+    if (!schema.avatarAttribute) {
+        const experienceSchema = schemaMetadataDic[logicalName];
+        const Icon = experienceSchema.Icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+        return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+                width: 20,
+                height: 20,
+            }, icon: {
+                style: {
+                    background: 'transparent',
+                    color: 'inherit',
+                },
+                children: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }),
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+            width: 20,
+            height: 20,
+            fontSize: react_components_1.tokens.fontSizeBase100,
+            backgroundColor: 'transparent',
+        }, name: value?.name, color: (0, avatar_1.getAvatarColor)(value?.name), image: {
+            src: value?.avatar,
+        } }));
+};

package/form/controls/SelectControl.d.ts

@@ -6,4 +6,4 @@ export interface Lookup<T = string> {
 export interface SelectControlProps<T> extends ControlProps<T> {
     options: Lookup<T>[];
 }
-export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }: SelectControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, }: Readonly<SelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;

package/form/controls/SelectControl.js

@@ -22,7 +22,5 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
         // onChange={(e, v) => handleChange(v as string)}
         selectedOptions: value ? [String(value)] : [], onOptionSelect: (event, data) => {
             handleChange(data.optionValue);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
-        // error={error}
-        disabled: disabled, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), style: { pointerEvents: disabled ? 'none' : undefined }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/form/controls/TextAreaControl.d.ts

@@ -2,5 +2,7 @@ import { ControlProps } from './types';
 export interface TextAreaControlProps extends ControlProps<string> {
     rows?: number;
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
+    autoHeight?: boolean;
+    maxHeight?: number;
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;