@headless-adminapp/fluent 0.0.17-alpha.2 → 0.0.17-alpha.22

package/App/AppHeaderContianer.js

@@ -61,7 +61,7 @@ const AppHeaderContainer = () => {
                                                 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] }), (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: [(_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
                                                 var _a, _b;
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
                                             }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout })] })] })] })] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/App/NavigationContainer.js

@@ -43,14 +43,14 @@ const NavigationContainer = () => {
     const isRouteActive = (0, hooks_1.useIsRouteActive)();
     const routeResolver = (0, hooks_1.useRouteResolver)();
     return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
-                                var _a;
+                                var _a, _b;
                                 const navItem = (0, utils_1.transformNavPageItem)({
                                     item,
                                     schemaMetadataDic: schemaMetadataDic,
                                     language,
                                     routeResolver,
                                 });
-                                const Icon = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+                                const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : icons_1.IconPlaceholder;
                                 const isActive = isRouteActive(selectedPath, item);
                                 return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
                                         event.preventDefault();

package/App/QuickActionItem.js

@@ -24,7 +24,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const QuickActionItem = ({ label, Icon, onClick, link, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
             onClick === null || onClick === void 0 ? void 0 : onClick();
         } }));

package/CommandBar/MenuButton.js

@@ -36,7 +36,7 @@ exports.CommandMenuButton = (0, react_1.forwardRef)(function CommandMenuButton({
     const styles = useStyles();
     return (
     // <div ref={ref}>
-    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
+    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
     // </div>
     );
 });

package/CommandBar/MenuItem.js

@@ -30,8 +30,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 const MenuItem = ({ Icon, text, disabled, danger, onClick, items, }) => {
     const styles = useStyles();
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
-        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 };
 exports.MenuItem = MenuItem;

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddColumns = AddColumns;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
@@ -26,7 +26,7 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
     const columnGroups = Object.assign({ root: {
-            label: (0, builders_1.localizedLabel)(language, schema),
+            label: (0, utils_1.localizedLabel)(language, schema),
             columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
@@ -37,9 +37,9 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
             expandedKey: nestedKey,
         })), schemaStore, language);
         acc[key] = {
-            label: (0, builders_1.localizedLabel)(language, attribute) +
+            label: (0, utils_1.localizedLabel)(language, attribute) +
                 ' (' +
-                (0, builders_1.localizedLabel)(language, lookupSchema) +
+                (0, utils_1.localizedLabel)(language, lookupSchema) +
                 ')',
             columns,
         };
@@ -64,7 +64,6 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                             gap: 8,
                             marginBottom: react_components_1.tokens.spacingVerticalXS,
                             paddingInline: react_components_1.tokens.spacingHorizontalS,
-                            width: '100%',
                         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                     setSelectedGroup(data.optionValue);
                                 }, style: { flex: 1, minWidth: 'unset' }, positioning: {

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -71,12 +71,14 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
     drag(drop(ref));
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
             background: react_components_1.tokens.colorNeutralBackground4,
-            padding: react_components_1.tokens.spacingHorizontalXS,
+            paddingBlock: react_components_1.tokens.spacingVerticalXS,
+            paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
         }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { flex: 1 }, children: item.label }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         moveItem(index, index - 1);
                                     }, children: stringSet.moveUp })), !isLast && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OperatorSelect = OperatorSelect;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
+const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
 function OperatorSelect({ attribute, value, onChange, }) {
     const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
+    const dataService = (0, transport_1.useDataService)();
     const operatorOptions = (0, react_1.useMemo)(() => {
         return (0, column_filter_1.getLocalizedOperatorOptions)(operatorStrings);
     }, [operatorStrings]);
     const options = (0, react_1.useMemo)(() => {
-        return operatorOptions[attribute.type];
-    }, [attribute.type, operatorOptions]);
+        const supportedOperators = dataService.supportedOperators;
+        let operators = operatorOptions[attribute.type];
+        if (supportedOperators) {
+            operators = operators.filter((option) => supportedOperators[attribute.type].includes(option.value));
+        }
+        return operators;
+    }, [attribute.type, operatorOptions, dataService]);
     return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -61,7 +61,7 @@ minWidth,
 column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_2.useMetadata)();
+    const { schemaStore } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const attribute = (0, react_1.useMemo)(() => {
         const _attribute = schema.attributes[column.name];
@@ -71,9 +71,9 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         if (_attribute.type !== 'lookup') {
             throw new Error('Invalid attribute type');
         }
-        const lookupSchema = getSchema(_attribute.entity);
+        const lookupSchema = schemaStore.getSchema(_attribute.entity);
         return lookupSchema.attributes[column.expandedKey];
-    }, [column.expandedKey, column.name, getSchema, schema.attributes]);
+    }, [column.expandedKey, column.name, schemaStore, schema.attributes]);
     const align = (0, react_1.useMemo)(() => {
         switch (attribute.type) {
             case 'money':

package/DataGrid/GridHeaderDesktop.js

@@ -24,7 +24,6 @@ const GridHeaderDesktop = (props) => {
             alignItems: 'center',
             paddingInline: 8,
             gap: 16,
-            width: '100%',
             display: 'flex',
         }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,

package/DataGrid/GridTableContainer.js

@@ -7,9 +7,8 @@ const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const navigation_1 = require("@headless-adminapp/app/navigation");
 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_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
@@ -73,25 +72,16 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         }));
     }, [sorting]);
     const tableWrapperRef = (0, react_1.useRef)(null);
-    const routeResolver = (0, hooks_3.useRouteResolver)();
-    const router = (0, hooks_3.useRouter)();
     const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
         var _a, _b;
-        const path = routeResolver({
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        openFormInternal({
             logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
             id,
         });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;

package/DataGrid/useTableColumns.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const useOpenRecord_1 = require("@headless-adminapp/app/datagrid/hooks/useOpenRecord");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
@@ -36,14 +37,16 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const columns = (0, hooks_1.useGridColumns)();
     const [, setSorting] = (0, hooks_1.useGridSorting)();
     const schema = (0, hooks_1.useDataGridSchema)();
-    const { getSchema } = (0, hooks_3.useMetadata)();
+    const { schemaStore } = (0, hooks_3.useMetadata)();
     const [, setSelectedIds] = (0, hooks_1.useGridSelection)();
     const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
     const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
-        ? (0, hooks_1.useSubGridCommands)()
-        : (0, hooks_1.useMainGridContextCommands)();
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useSubGridCommands)()
+        : // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useMainGridContextCommands)();
     const mutableContextCommandState = (0, mutable_1.useMutableState)(contextCommands, true);
     (0, react_1.useEffect)(() => {
         mutableContextCommandState.setValue(contextCommands);
@@ -69,22 +72,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const routeResolver = (0, hooks_5.useRouteResolver)();
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
-    const openRecord = (0, react_1.useCallback)((id) => {
-        var _a, _b;
-        const path = routeResolver({
-            logicalName: schema.logicalName,
-            type: app_1.PageType.EntityForm,
-            id,
-        });
-        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+    const openRecord = (0, useOpenRecord_1.useOpenRecord)();
     const { currency, dateFormats } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
@@ -149,7 +137,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                             const field = column.expandedKey;
                             const entity = schema.attributes[lookup]
                                 .entity;
-                            const lookupSchema = getSchema(entity);
+                            const lookupSchema = schemaStore.getSchema(entity);
                             attribute = lookupSchema.attributes[field];
                             value = (_b = (_a = info.row.original.$expand) === null || _a === void 0 ? void 0 : _a[lookup]) === null || _b === void 0 ? void 0 : _b[field];
                         }
@@ -241,7 +229,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         setSorting,
         currency.currency,
         dateFormats.short,
-        getSchema,
+        schemaStore,
         routeResolver,
         openRecord,
         recordSetSetter,

package/DialogContainer/PromptDialog.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -14,12 +15,12 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => (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: A) => yup.ObjectSchema<{
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;

package/DialogContainer/PromptDialog.js

@@ -37,6 +37,8 @@ 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");
@@ -45,11 +47,13 @@ const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
     var _a, _b;
+    const { language } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes),
+        resolver: (0, exports.formValidator)(props.attributes, language, formValidationStrings),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             var _a;
@@ -80,20 +84,19 @@ function PromptDialog(props) {
                                     }))();
                                 }), children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes, language, strings) {
     return (values, context, options) => __awaiter(this, void 0, void 0, function* () {
-        const validator = (0, exports.generateValidationSchema)(attributes);
+        const validator = (0, exports.generateValidationSchema)(attributes, language, strings);
         const resolver = (0, yup_1.yupResolver)(validator);
         const result = yield resolver(values, context, options);
-        // console.log(result);
         return result;
     });
 }, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes) {
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes, language, strings) {
     const columns = Object.keys(attributes);
     return yup.object().shape(Object.assign({}, columns.reduce((acc, column) => {
         const attribute = attributes[column];
-        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, 'en', {});
+        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings);
         return Object.assign(Object.assign({}, acc), { [column]: validationSchema });
     }, {})));
 }, (attributes) => JSON.stringify({ attributes }));

package/PageEntityForm/CommandContainer.js

@@ -43,7 +43,15 @@ const CommandContainer = () => {
                 : []),
             ...gridCommands,
         ];
-    }, [gridCommands, recordSetContext, recordSetVisible, schema.logicalName]);
+    }, [
+        gridCommands,
+        recordSetContext.ids.length,
+        recordSetContext.logicalName,
+        recordSetVisible,
+        router,
+        schema.logicalName,
+        setRecordSetVisible,
+    ]);
     return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: extendedCommands });
 };
 exports.CommandContainer = CommandContainer;

package/PageEntityForm/FormTabRelated.js

@@ -4,11 +4,10 @@ exports.FormTabRelated = FormTabRelated;
 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 hooks_2 = require("@headless-adminapp/app/dataform/hooks");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
 function FormTabRelated({ selectedRelatedItem }) {
-    const recordId = (0, hooks_2.useRecordId)();
+    const recordId = (0, hooks_1.useRecordId)();
     const schema = (0, hooks_1.useDataFormSchema)();
     return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityFormDesktopContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const utils_1 = require("@headless-adminapp/app/utils");
+const utils_2 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const PageBroken_1 = require("../components/PageBroken");
@@ -21,7 +21,7 @@ const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
 const PageEntityFormDesktopContainer = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const recordId = (0, hooks_1.useRecordId)();
@@ -51,7 +51,6 @@ const PageEntityFormDesktopContainer = () => {
     if (recordId && !record) {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Record not found", message: "Requested record not found in system or you may not have enought permission." }));
     }
-    // console.log('render');
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
@@ -93,15 +92,15 @@ const PageEntityFormDesktopContainer = () => {
                                                             ? `- ${strings.unsaved}`
                                                             : !!record
                                                                 ? `- ${strings.saved}`
-                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, builders_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls.map((controlName, index) => {
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: (_a = formConfig.experience.headerControls) === null || _a === void 0 ? void 0 : _a.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
                                             return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
                                                         } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
-                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_1.getAttributeFormattedValue)(attribute, field.value) }));
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, builders_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_b = (_a = selectedRelatedItem.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
                                             setSelectedRelatedItem(item);
                                             setActiveTab('related');
                                         } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -6,9 +6,8 @@ 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 navigation_1 = require("@headless-adminapp/app/navigation");
 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)({
@@ -31,8 +30,7 @@ const RecordSetNavigatorContainer = () => {
     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 openForm = (0, navigation_1.useOpenForm)();
     const { language, direction } = (0, locale_1.useLocale)();
     if (!schema) {
         return null;
@@ -60,12 +58,11 @@ const RecordSetNavigatorContainer = () => {
                     }, 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,
+                                        openForm({
                                             logicalName: schema.logicalName,
                                             id: record[schema.idAttribute],
+                                            replace: true,
                                         });
-                                        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]))) }) })] }) }));
 };

package/PageEntityForm/RelatedViewSelector.js

@@ -18,7 +18,6 @@ function getRelatedItems(currentSchema, schemas) {
             if (!(0, utils_1.isLookupAttribute)(attribute)) {
                 return null;
             }
-            // console.log('temp.a ', attribute);
             if (attribute.entity !== currentSchema.logicalName) {
                 return null;
             }

package/PageEntityForm/SectionContainer.js

@@ -2,10 +2,11 @@
 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 utils_1 = require("@headless-adminapp/app/locale/utils");
 const react_hook_form_1 = require("react-hook-form");
+const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const layout_1 = require("../form/layout");
 const StandardControl_1 = require("./StandardControl");
@@ -16,11 +17,18 @@ function SectionContainer({ section }) {
     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) => {
+    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_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':
+                case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
+                    let Control = StandardControl_1.StandardControl;
+                    if (control.component) {
+                        const OverrideControl = componentStore_1.componentStore.getComponent(control.component);
+                        if (OverrideControl) {
+                            Control = OverrideControl;
+                        }
+                    }
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
@@ -33,8 +41,9 @@ function SectionContainer({ section }) {
                                     ? (_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 }) }));
+                                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)(Control, { 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;
                 }

package/PageEntityForm/StandardControl.d.ts

@@ -1,6 +1,6 @@
 import type { Attribute } from '@headless-adminapp/core/attributes';
 import { FC } from 'react';
-interface StandardControlProps {
+export interface StandardControlProps {
     attribute: Attribute;
     label?: string;
     isError: boolean;
@@ -21,4 +21,3 @@ interface StandardControlProps {
     allowNewRecord?: boolean;
 }
 export declare const StandardControl: FC<StandardControlProps>;
-export {};