@headless-adminapp/fluent 1.4.23 → 1.4.24

package/App/AppHeaderContianer.js

@@ -60,6 +60,7 @@ const NavActions = () => {
     const logout = (0, hooks_1.useLogout)();
     const strings = (0, AppStringContext_1.useAppStrings)();
     const { language } = (0, locale_1.useLocale)();
+    const [accountMenuOpen, setAccountMenuOpen] = (0, react_1.useState)(false);
     const initials = (0, react_1.useMemo)(() => {
         return authSession?.fullName
             .toUpperCase()
@@ -81,7 +82,7 @@ const NavActions = () => {
                         return (0, jsx_runtime_1.jsx)(item.Component, {}, item.__key);
                     }
                     return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
-                }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+                }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { open: accountMenuOpen, onOpenChange: (e, data) => setAccountMenuOpen(data.open), children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
                                 src: authSession?.profilePicture,
                             } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
@@ -99,6 +100,7 @@ const NavActions = () => {
                                         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
                                         const Icon = item.icon;
                                         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
+                                                setAccountMenuOpen(false);
                                                 if (item.onClick) {
                                                     item.onClick();
                                                 }

package/DataGrid/useTableColumns.d.ts

@@ -1,5 +1,6 @@
-import { InternalRouteResolver, RouterInstance } from '@headless-adminapp/app/route/context';
+import { InternalRouteResolver } from '@headless-adminapp/app/route/context';
 import { LookupAttribute } from '@headless-adminapp/core/attributes';
+import { RouterInstance } from '@headless-adminapp/core/navigation';
 import { ISchemaStore } from '@headless-adminapp/core/store';
 import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {

package/DataGrid/useTableColumns.js

@@ -134,7 +134,12 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                 maxSize: 32,
             }),
         ];
-    }, [disableContextMenu, mutableContextCommandState, schema.idAttribute]);
+    }, [
+        disableContextMenu,
+        mutableContextCommandState,
+        schema.idAttribute,
+        setValue,
+    ]);
     const selectionColumns = (0, react_1.useMemo)(() => {
         if (disableSelection)
             return [];
@@ -410,8 +415,8 @@ function renderLookupAttribute({ value, schemaStore, routeResolver, router, attr
         type: app_1.PageType.EntityForm,
         id: value.id,
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: () => {
-            router.push(path);
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: async () => {
+            await router.push(path);
         }, children: (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,
@@ -435,8 +440,8 @@ function renderRegardingAttribute({ value, schemaStore, routeResolver, router, f
         type: app_1.PageType.EntityForm,
         id: value.id,
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: () => {
-            router.push(path);
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLinkContent, { href: path, onClick: async () => {
+            await router.push(path);
         }, children: (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,

package/DialogContainer/PromptDialog.d.ts

@@ -1,7 +1,5 @@
-import { FormValidationStringSet } from '@headless-adminapp/app/form';
 import { PromptDialogOptions } from '@headless-adminapp/core/experience/dialog';
 import { SchemaAttributes } from '@headless-adminapp/core/schema';
-import * as yup from 'yup';
 interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     open: boolean;
     title?: PromptDialogOptions<SA>['title'];
@@ -15,24 +13,4 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: Readonly<PromptDialogProps>): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
-    attributes: A;
-    language: string;
-    strings: FormValidationStringSet;
-    region: string;
-}) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-}>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
-    attributes: A;
-    language: string;
-    strings: FormValidationStringSet;
-    region: string;
-}) => yup.ObjectSchema<{
-    [x: string]: any;
-}, yup.AnyObject, {
-    [x: string]: any;
-}, "">) & import("lodash").MemoizedFunction;
 export {};

package/DialogContainer/PromptDialog.js

@@ -1,39 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateValidationSchema = exports.formValidator = void 0;
 exports.PromptDialog = PromptDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/dataform/utils");
 const form_1 = require("@headless-adminapp/app/form");
 const locale_1 = require("@headless-adminapp/app/locale");
-const yup_1 = require("@hookform/resolvers/yup");
-const lodash_1 = require("lodash");
 const react_hook_form_1 = require("react-hook-form");
-const yup = __importStar(require("yup"));
 const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
@@ -43,7 +16,7 @@ function PromptDialog(props) {
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)({
+        resolver: (0, utils_1.attributesFormValidator)({
             attributes: props.attributes,
             language,
             strings: formValidationStrings,
@@ -75,29 +48,3 @@ function PromptDialog(props) {
                                     })();
                                 }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator({ attributes, language, strings, region, }) {
-    return async (values, context, options) => {
-        const validator = (0, exports.generateValidationSchema)({
-            attributes,
-            language,
-            strings,
-            region,
-        });
-        const resolver = (0, yup_1.yupResolver)(validator);
-        const result = await resolver(values, context, options);
-        return result;
-    };
-}, (options) => JSON.stringify(options));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ attributes, language, strings, region, }) {
-    const columns = Object.keys(attributes);
-    return yup.object().shape({
-        ...columns.reduce((acc, column) => {
-            const attribute = attributes[column];
-            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings, region);
-            return {
-                ...acc,
-                [column]: validationSchema,
-            };
-        }, {}),
-    });
-}, (options) => JSON.stringify(options));

package/PageCalendar/EventDialog/EventFormBody.js

@@ -4,6 +4,7 @@ exports.EventFormBody = EventFormBody;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
+const dataform_1 = require("@headless-adminapp/app/dataform");
 const saveRecord_1 = require("@headless-adminapp/app/dataform/utils/saveRecord");
 const form_1 = require("@headless-adminapp/app/form");
 const locale_1 = require("@headless-adminapp/app/locale");
@@ -12,7 +13,6 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const BodyLoading_1 = require("../../components/BodyLoading");
 const EventFormContent_1 = require("./EventFormContent");
-const utils_1 = require("./utils");
 function EventFormBody(props) {
     const { language, region } = (0, locale_1.useLocale)();
     const formValidationStrings = (0, form_1.useFormValidationStrings)();
@@ -29,7 +29,7 @@ function EventFormBody(props) {
         mode: 'all',
         defaultValues: props.values,
         shouldUnregister: false,
-        resolver: (0, utils_1.formValidator)({
+        resolver: (0, dataform_1.attributesFormValidator)({
             attributes: baseEventAttributes_1.baseEventAttributes,
             language,
             strings: formValidationStrings,

package/PageEntityForm/QuickViewControl/index.d.ts

@@ -0,0 +1,7 @@
+import { SectionQuickViewControl } from '@headless-adminapp/core/experience/form/SectionControl';
+interface QuickViewControlProps {
+    labelPosition?: 'top' | 'left';
+    control: SectionQuickViewControl;
+}
+export declare function QuickViewControl({ control, labelPosition, }: Readonly<QuickViewControlProps>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/PageEntityForm/QuickViewControl/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickViewControl = QuickViewControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const transport_1 = require("@headless-adminapp/app/transport");
+const react_query_1 = require("@tanstack/react-query");
+const SectionControl_1 = require("../../DataForm/SectionControl");
+const StandardControl_1 = require("../StandardControl");
+function QuickViewControl({ control, labelPosition, }) {
+    const schema = (0, dataform_1.useDataFormSchema)();
+    const formInstance = (0, dataform_1.useFormInstance)();
+    const { schemaStore } = (0, metadata_1.useMetadata)();
+    const attribute = schema.attributes[control.attributeName];
+    if (!attribute) {
+        console.warn(`Attribute ${control.attributeName} not found in schema`);
+        return null;
+    }
+    if (attribute.type !== 'lookup') {
+        console.warn(`Attribute ${control.attributeName} is not a lookup field, skipping QuickViewControl.`);
+        return null;
+    }
+    const targetSchema = schemaStore.getSchema(attribute.entity);
+    const value = formInstance.watch(control.attributeName);
+    if (!value?.id) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(QuickViewControlInternal, { control: control, labelPosition: labelPosition, targetRecordId: value.id, targetSchema: targetSchema }));
+}
+function QuickViewControlInternal({ labelPosition, control, targetRecordId, targetSchema, }) {
+    const isMobile = (0, hooks_1.useIsMobile)();
+    const dataService = (0, transport_1.useDataService)();
+    const { data, isPending } = (0, react_query_1.useQuery)({
+        queryKey: [
+            'data',
+            'retriveRecord',
+            targetSchema.logicalName,
+            targetRecordId,
+            control.form.attributes,
+        ],
+        queryFn: async () => {
+            if (!targetRecordId) {
+                return null;
+            }
+            const record = await dataService.retriveRecord(targetSchema.logicalName, targetRecordId, control.form.attributes);
+            return record;
+        },
+        placeholderData: react_query_1.keepPreviousData,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: react_components_1.tokens.spacingVerticalM,
+        }, children: control.form.attributes.map((attributeName) => {
+            const attribute = targetSchema.attributes[attributeName];
+            if (!attribute) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: isMobile ? 'top' : labelPosition, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: data?.[attributeName] ?? null, onChange: () => {
+                        // do nothing
+                    }, readOnly: true, label: attribute.label, placeholder: attribute.label, allowNavigation: true, allowNewRecord: false, skeleton: isPending }) }, attributeName));
+        }) }));
+}

package/PageEntityForm/SectionContainer.js

@@ -19,6 +19,7 @@ const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const layout_1 = require("../form/layout");
 const EditableGridControl_1 = require("./EditableGridControl/EditableGridControl");
+const QuickViewControl_1 = require("./QuickViewControl");
 const StandardControl_1 = require("./StandardControl");
 const SubgridControl_1 = require("./SubgridControl");
 function SectionContainer({ section, skeleton, }) {
@@ -113,7 +114,7 @@ function SectionContainer({ section, skeleton, }) {
                     return ((0, jsx_runtime_1.jsx)(EditableGridControl_1.EditableGridControl, { readOnly: disabled, control: control }));
                 }
                 case 'quickview':
-                    return null;
+                    return ((0, jsx_runtime_1.jsx)(QuickViewControl_1.QuickViewControl, { control: control, labelPosition: section.labelPosition }));
                 case 'subgrid': {
                     let ContainerComponent = null;
                     if (control.component) {

package/PageEntityForm/StandardControl.js

@@ -83,7 +83,7 @@ const StandardControl = (props) => {
             switch (attribute.format) {
                 case 'text': {
                     const Control = componentStore_1.componentStore.getComponent('Form.TextControl') ?? TextControl_1.TextControl;
-                    return ((0, jsx_runtime_1.jsx)(Control, { ...controlProps, textTransform: attribute.textTransform }));
+                    return ((0, jsx_runtime_1.jsx)(Control, { ...controlProps, textTransform: attribute.textTransform, suggestions: attribute.suggestions }));
                 }
                 case 'email': {
                     const Control = componentStore_1.componentStore.getComponent('Form.EmailControl') ?? EmailControl_1.EmailControl;

package/form/controls/TextControl.d.ts

@@ -1,5 +1,18 @@
 import { InputProps } from '@fluentui/react-components';
+import { SuggestionOptions } from '@headless-adminapp/core/attributes/StringAttribute';
+import { FC } from 'react';
 import { ControlProps } from './types';
+export declare function useSuggestions({ searchText, readOnly, }: {
+    searchText: string;
+    readOnly: boolean;
+}): {
+    data: string[];
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    onData: (data: string[]) => void;
+    lookupEnabled: boolean;
+    debouncedSearchText: string;
+};
 export interface TextControlProps extends ControlProps<string> {
     autoComplete?: string;
     autoCapitalize?: string;
@@ -7,5 +20,19 @@ export interface TextControlProps extends ControlProps<string> {
     textTransform?: 'capitalize' | 'uppercase' | 'lowercase' | 'none';
     appearance?: InputProps['appearance'];
     maxLength?: number;
+    suggestions?: SuggestionOptions;
 }
-export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, maxLength, skeleton, }: Readonly<TextControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, maxLength, skeleton, suggestions, }: Readonly<TextControlProps>): import("react/jsx-runtime").JSX.Element;
+export declare const DynamicSuggestionLoader: FC<{
+    entity: string;
+    field: string;
+    searchText: string;
+    disabled?: boolean;
+    onData: (data: string[]) => void;
+}>;
+export declare const StaticSuggestionLoader: FC<{
+    values: string[];
+    searchText: string;
+    disabled?: boolean;
+    onData: (data: string[]) => void;
+}>;

package/form/controls/TextControl.js

@@ -1,20 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticSuggestionLoader = exports.DynamicSuggestionLoader = void 0;
+exports.useSuggestions = useSuggestions;
 exports.TextControl = TextControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const useRetriveRecords_1 = require("@headless-adminapp/app/transport/hooks/useRetriveRecords");
+const lodash_1 = require("lodash");
+const react_1 = require("react");
 const SkeletonControl_1 = require("./SkeletonControl");
+function useSuggestions({ searchText, readOnly, }) {
+    const [debouncedSearchText] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const [data, setData] = (0, react_1.useState)([]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
+    const onData = (0, react_1.useCallback)((data) => {
+        setData(data);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (open && !readOnly)
+            setLookupEnabled(true);
+    }, [open, readOnly]);
+    return { data, open, setOpen, onData, lookupEnabled, debouncedSearchText };
+}
 function TextControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
 placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, 
 // borderOnFocusOnly,
-readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
+readOnly, appearance = 'filled-darker', maxLength, skeleton, suggestions, }) {
     const readonly = disabled || readOnly;
+    const { data, open, setOpen, lookupEnabled, onData, debouncedSearchText } = useSuggestions({
+        searchText: value ?? '',
+        readOnly: !!readonly,
+    });
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    const handleOnChange = (e) => {
-        let value = e.target.value;
+    const handleOnChange = (value) => {
         if (textTransform === 'uppercase') {
             value = value.toUpperCase();
         }
@@ -23,7 +47,19 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
         }
         onChange?.(value);
     };
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value ?? '', onChange: handleOnChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    if (suggestions) {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Combobox, { autoCapitalize: "none", autoCorrect: "off", placeholder: placeholder, appearance: "filled-darker", spellCheck: false, autoComplete: "off", freeform: true, id: id, name: name, autoFocus: autoFocus, maxLength: maxLength, style: { width: '100%', minWidth: 'unset' }, input: { style: { width: '100%' } }, expandIcon: null, open: open && !!data.length && !readOnly, onOpenChange: (e, data) => {
+                        if (!data.open) {
+                            setOpen(data.open);
+                        }
+                    }, value: value ?? '', onChange: (e) => {
+                        handleOnChange(e.target.value);
+                        setOpen(true);
+                    }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), onOptionSelect: (e, item) => {
+                        onChange?.(item.optionText ?? '');
+                    }, children: data.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item, checkIcon: null, children: item }, item))) }), suggestions?.type === 'static' && ((0, jsx_runtime_1.jsx)(exports.StaticSuggestionLoader, { values: suggestions.values, disabled: !lookupEnabled, onData: onData, searchText: debouncedSearchText })), suggestions?.type === 'dynamic' && ((0, jsx_runtime_1.jsx)(exports.DynamicSuggestionLoader, { entity: suggestions.entity, field: suggestions.field, disabled: !lookupEnabled, searchText: debouncedSearchText, onData: onData }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value ?? '', onChange: (e) => handleOnChange(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         // readOnly={readOnly || disabled}
         readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {
@@ -34,3 +70,53 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
             },
         } }));
 }
+const DynamicSuggestionLoader = ({ entity, field, searchText, disabled, onData }) => {
+    const { schemaStore } = (0, metadata_1.useMetadata)();
+    const schema = schemaStore.getSchema(entity);
+    const { data } = (0, useRetriveRecords_1.useRetriveRecords)({
+        schema,
+        columns: [field],
+        disabled: disabled || !searchText,
+        maxRecords: 5,
+        sorting: [{ field: field, order: 'asc' }],
+        filter: {
+            type: 'and',
+            conditions: [
+                {
+                    field,
+                    operator: 'like',
+                    value: searchText,
+                },
+            ],
+        },
+    });
+    const onDataRef = (0, react_1.useRef)(onData);
+    onDataRef.current = onData;
+    (0, react_1.useEffect)(() => {
+        if (!searchText) {
+            onDataRef.current([]);
+            return;
+        }
+        if (data) {
+            onDataRef.current((0, lodash_1.uniq)(data.records.map((item) => item[field])));
+        }
+    }, [searchText, data, field]);
+    return null;
+};
+exports.DynamicSuggestionLoader = DynamicSuggestionLoader;
+const StaticSuggestionLoader = ({ values, searchText, disabled, onData }) => {
+    const onDataRef = (0, react_1.useRef)(onData);
+    onDataRef.current = onData;
+    (0, react_1.useEffect)(() => {
+        if (!searchText || disabled) {
+            onDataRef.current([]);
+            return;
+        }
+        const filtered = values.filter((item) => item.toLowerCase().includes(searchText.toLowerCase()));
+        if (filtered.length) {
+            onDataRef.current((0, lodash_1.uniq)(filtered));
+        }
+    }, [searchText, disabled, values]);
+    return null;
+};
+exports.StaticSuggestionLoader = StaticSuggestionLoader;

package/form/useFormForAttributes.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormForAttributes = useFormForAttributes;
+const dataform_1 = require("@headless-adminapp/app/dataform");
 const form_1 = require("@headless-adminapp/app/form");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_hook_form_1 = require("react-hook-form");
-const PromptDialog_1 = require("../DialogContainer/PromptDialog");
 function useFormForAttributes(props) {
     const { language, region } = (0, locale_1.useLocale)();
     const formValidationStrings = (0, form_1.useFormValidationStrings)();
@@ -12,7 +12,7 @@ function useFormForAttributes(props) {
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, PromptDialog_1.formValidator)({
+        resolver: (0, dataform_1.attributesFormValidator)({
             attributes: props.attributes,
             language,
             strings: formValidationStrings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.23",
+  "version": "1.4.24",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -51,5 +51,8 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "1e2ade4328e5b2cfe223ab23318da6f456cb9de1"
+  "devDependencies": {
+    "@types/lodash": "4.17.20"
+  },
+  "gitHead": "3a4c06f1e18f8ac7861647b82d4a4f8cd8f0141c"
 }

package/PageCalendar/EventDialog/utils.d.ts

@@ -1,23 +0,0 @@
-import { FormValidationStringSet } from '@headless-adminapp/app/form';
-import { SchemaAttributes } from '@headless-adminapp/core/schema';
-import * as yup from 'yup';
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
-    attributes: A;
-    language: string;
-    strings: FormValidationStringSet;
-    region: string;
-}) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-}>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>({ attributes, language, strings, region, }: {
-    attributes: A;
-    language: string;
-    strings: FormValidationStringSet;
-    region: string;
-}) => yup.ObjectSchema<{
-    [x: string]: any;
-}, yup.AnyObject, {
-    [x: string]: any;
-}, "">) & import("lodash").MemoizedFunction;

package/PageCalendar/EventDialog/utils.js

@@ -1,57 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateValidationSchema = exports.formValidator = void 0;
-const utils_1 = require("@headless-adminapp/app/dataform/utils");
-const yup_1 = require("@hookform/resolvers/yup");
-const lodash_1 = require("lodash");
-const yup = __importStar(require("yup"));
-// TODO: refactor duplicate code
-exports.formValidator = (0, lodash_1.memoize)(function formValidator({ attributes, language, strings, region, }) {
-    return async (values, context, options) => {
-        const validator = (0, exports.generateValidationSchema)({
-            attributes,
-            language,
-            strings,
-            region,
-        });
-        const resolver = (0, yup_1.yupResolver)(validator);
-        const result = await resolver(values, context, options);
-        return result;
-    };
-}, (options) => JSON.stringify(options));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema({ attributes, language, strings, region, }) {
-    const columns = Object.keys(attributes);
-    return yup.object().shape({
-        ...columns.reduce((acc, column) => {
-            const attribute = attributes[column];
-            const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings, region);
-            return {
-                ...acc,
-                [column]: validationSchema,
-            };
-        }, {}),
-    });
-}, (options) => JSON.stringify(options));