@headless-adminapp/fluent 1.4.6 → 1.4.8

package/App/Navigation/NavigationContainer.js

@@ -47,19 +47,6 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
         isRouteActive,
         pathname,
     ]);
-    // const activeCategories = useMemo(
-    //   () =>
-    //     sections
-    //       .map((section) => section.items)
-    //       .flat()
-    //       .filter(
-    //         (item) =>
-    //           item.type === 'category' &&
-    //           item.items.some((subItem) => subItem.active)
-    //       )
-    //       .map((item) => item.key),
-    //   [sections]
-    // );
     const handleNavigation = (item) => {
         if (type === 'overlay') {
             onOpenChange(false);

package/App/Navigation/utils.js

@@ -64,13 +64,9 @@ function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, l
     if (item.type === 'entityview') {
         const metadata = schemaMetadataObject?.[item.logicalName];
         if (metadata) {
-            if (!label) {
-                label =
-                    metadata.localizedPluralLabels?.[language] ?? metadata.pluralLabel;
-            }
-            if (!Icon) {
-                Icon = metadata.Icon;
-            }
+            label ??=
+                metadata.localizedPluralLabels?.[language] ?? metadata.pluralLabel;
+            Icon ??= metadata.Icon;
         }
     }
     return {

package/CommandBar/Label.js

@@ -18,6 +18,6 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
 }));
 exports.CommandLabel.displayName = 'CommandLabel';

package/DataGrid/ActionCell.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const react_1 = require("react");
-const TableCell_1 = require("../DataGrid/TableCell");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
+const TableCell_1 = require("./TableCell");
 exports.ActionCell = (0, react_1.memo)(function ActionCell({ onOpen, mutableState, }) {
     const transformedCommands = (0, mutable_1.useMutableStateSelector)(mutableState, (state) => state);
     const { language } = (0, locale_1.useLocale)();

package/DataGrid/CustomizeColumns/AddColumns.d.ts

@@ -6,5 +6,5 @@ interface AddColumnsProps {
     opened: boolean;
     onClose: () => void;
 }
-export declare function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }: AddColumnsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }: Readonly<AddColumnsProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/GridColumnHeader/ConditionValueControl.d.ts

@@ -5,5 +5,5 @@ interface ConditionValueControlProps {
     value: any;
     onChange?: (value: any) => void;
 }
-export declare function ConditionValueControl({ attribute, type, value, onChange, }: ConditionValueControlProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ConditionValueControl({ attribute, type, value, onChange, }: Readonly<ConditionValueControlProps>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/DataGrid/GridColumnHeader/ConditionValueControl.js

@@ -10,7 +10,7 @@ const transport_1 = require("@headless-adminapp/app/transport");
 const FormControl_1 = __importDefault(require("../../form/FormControl"));
 function ConditionValueControl({ attribute, type, value, onChange, }) {
     const dataService = (0, transport_1.useDataService)();
-    const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
+    const { schemaStore } = (0, hooks_1.useMetadata)();
     switch (type) {
         case 'string':
             return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "text", value: value ?? null, onChange: (value) => {
@@ -28,22 +28,9 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
             if (attribute.type !== 'lookup') {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value ?? null, onChange: (value) => {
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", dataService: dataService, schema: schemaStore.getSchema(attribute.entity), value: value ?? null, onChange: (value) => {
                     onChange?.(value ?? []);
                 } }));
-        // return (
-        //   <FormControl
-        //     type="lookup"
-        //     async
-        //     dataService={dataService}
-        //     schema={schemaStore.getSchema(attribute.entity)}
-        //     experienceStore={experienceStore}
-        //     value={value?.[0] ?? null}
-        //     onChange={(value) => {
-        //       onChange?.(value ? [value] : []);
-        //     }}
-        //   />
-        // );
         case 'date':
             return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "date", value: value ?? null, onChange: (value) => {
                     onChange?.(value);
@@ -65,18 +52,18 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
                     onChange?.(value?.map((x) => x === 'true') ?? []);
                 } }));
         case 'choice':
-        case 'choices':
+        case 'choices': {
             if (attribute.type !== 'choice' && attribute.type !== 'choices') {
                 return null;
             }
             const isNumeric = 'number' in attribute && attribute.number === true;
-            // const isString = 'string' in attribute && attribute.string === true;
             return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: attribute.options.map((x) => ({
                     label: x.label,
                     value: isNumeric ? x.value?.toString() : x.value,
                 })), value: value?.map((x) => (isNumeric ? x.toString() : x)) ?? [], onChange: (value) => {
                     onChange?.(value?.map((x) => (isNumeric ? +x : x)) ?? []);
                 } }));
+        }
         default:
             return null;
     }

package/DataGrid/GridColumnHeader/OperatorSelect.d.ts

@@ -5,5 +5,5 @@ interface OperatorSelectProps {
     value: OperatorKey | null;
     onChange?: (operator: OperatorKey) => void;
 }
-export declare function OperatorSelect({ attribute, value, onChange, }: OperatorSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function OperatorSelect({ attribute, value, onChange, }: Readonly<OperatorSelectProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.d.ts

@@ -1,16 +1,9 @@
 import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
-import type { Attribute } from '@headless-adminapp/core/attributes';
-import { ColumnCondition } from '@headless-adminapp/core/experience/view';
 import { FC, PropsWithChildren } from 'react';
 interface TableHeaderFilterCellProps {
-    sortDirection?: 'asc' | 'desc';
-    columnName: string;
+    sortDirection?: 'asc' | 'desc' | false;
     onChangeSortDirection?: (direction: 'asc' | 'desc') => void;
-    filterCondition?: ColumnCondition;
-    onChangeFilterCondition?: (condition: ColumnCondition | undefined) => void;
-    attribute: Attribute;
     minWidth?: number;
-    onChangeWidth?: (width: number) => void;
     column: TransformedViewColumn;
     onResetSize?: () => void;
     resizeHandler?: (event: unknown) => void;

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -51,14 +51,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const TableHeaderFilterCell = ({ children, sortDirection, 
-// onChangeFilterCondition,
-onChangeSortDirection, 
-// attribute,
-// filterCondition,
-minWidth, 
-// onChangeWidth,
-column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
+const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection, minWidth, column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const schema = (0, hooks_1.useDataGridSchema)();
     const { schemaStore } = (0, hooks_2.useMetadata)();

package/DataGrid/GridListContainer.js

@@ -89,6 +89,6 @@ const GridListContainer = () => {
                                 width: '100%',
                                 position: 'absolute',
                                 transform: `translateY(${virtualSize}px)`,
-                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card, schema: schema }, index))) }))] }) }) }) }));
+                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }) }) }));
 };
 exports.GridListContainer = GridListContainer;

package/DataGrid/GridTableContainer.d.ts

@@ -4,7 +4,6 @@ interface GridTableContainerProps {
     disableContextMenu?: boolean;
     disableColumnResize?: boolean;
     disableColumnSort?: boolean;
-    disableColumnReorder?: boolean;
     disableColumnFilter?: boolean;
     noPadding?: boolean;
     headerHeight?: number;

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -1,15 +1,9 @@
 import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
-import { ViewColumn } from '@headless-adminapp/core/experience/view';
-import { Schema } from '@headless-adminapp/core/schema';
-import { UniqueRecord } from '../types';
 interface TableCellChoiceProps {
-    column: ViewColumn;
-    schema: Schema;
-    record: UniqueRecord;
     value: unknown;
     attribute: ChoiceAttribute<string | number>;
     formattedValue: string;
     width: number;
 }
-export declare function TableCellChoice(props: TableCellChoiceProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCellChoice(props: Readonly<TableCellChoiceProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/TableCell/TableCellText.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
 exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
     return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
-            textAlign: textAlignment || 'left',
+            textAlign: textAlignment ?? 'left',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',

package/DataGrid/useTableColumns.js

@@ -17,12 +17,12 @@ const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const componentStore_1 = require("../componentStore");
-const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
-const TableCell_1 = require("../DataGrid/TableCell");
-const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
 const avatar_1 = require("../utils/avatar");
 const ActionCell_1 = require("./ActionCell");
+const GridColumnHeader_1 = require("./GridColumnHeader");
+const TableCell_1 = require("./TableCell");
 const TableCellChoice_1 = require("./TableCell/TableCellChoice");
+const TableCellLink_1 = require("./TableCell/TableCellLink");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -213,7 +213,6 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         disableColumnFilter,
                         disableColumnSort,
                         onChangeSortDirection,
-                        attribute: schema.attributes[column.name],
                     });
                 },
                 cell: (info) => renderCellContent({
@@ -250,8 +249,8 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         return [...selectionColumns, ...restColumns, ...actionColumns];
     }, [selectionColumns, restColumns, actionColumns]);
 }
-function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, attribute, }) {
-    return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { columnName: column.name, sortDirection: props.column.getIsSorted() || undefined, minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, attribute: attribute, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
+function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, }) {
+    return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { sortDirection: props.column.getIsSorted(), minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
 function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, router, }) {
     let attribute;
@@ -339,7 +338,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
             return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
         }
         case 'choice':
-            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
     if (attribute.type === 'string' && attribute.format === 'phone') {
         const parsedNumber = (0, phone_1.parsePhoneNumber)(value, locale.region);

package/DialogContainer/AlertDialog.d.ts

@@ -6,5 +6,5 @@ interface AlertDialogProps {
     onDismiss?: () => void;
     confirmText?: string;
 }
-export declare function AlertDialog(props: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialog(props: Readonly<AlertDialogProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DialogContainer/ConfirmDialog.d.ts

@@ -8,5 +8,5 @@ interface ConfirmDialogProps {
     confirmText?: string;
     cancelText?: string;
 }
-export declare function ConfirmDialog(props: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog(props: Readonly<ConfirmDialogProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DialogContainer/ErrorDialog.d.ts

@@ -6,5 +6,5 @@ interface ErrorDialogProps {
     onDismiss?: () => void;
     confirmText?: string;
 }
-export declare function ErrorDialog(props: ErrorDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorDialog(props: Readonly<ErrorDialogProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DialogContainer/ErrorDialog.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorDialog = ErrorDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 function ErrorDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
@@ -13,7 +14,7 @@ function ErrorDialog(props) {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     marginRight: react_components_1.tokens.spacingHorizontalS,
-                                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Error, {}) }), props.title || 'Error'] }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", style: { background: react_components_1.tokens.colorPaletteRedBackground3 }, onClick: () => {
+                                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Error, {}) }), (0, utils_1.stringWithDefault)(props.title, 'Error')] }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", style: { background: react_components_1.tokens.colorPaletteRedBackground3 }, onClick: () => {
                                 props.onConfirm?.();
                             }, children: props.confirmText ?? 'Close' }) })] }) }) }));
 }

package/DialogContainer/PromptDialog.d.ts

@@ -14,7 +14,7 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onCancel?: PromptDialogOptions<SA>['onCancel'];
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
-export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
+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;

package/Insights/WidgetTitleBar.d.ts

@@ -3,5 +3,5 @@ interface WidgetTitleBarProps {
     title: string;
     commands?: CommandItemState[][];
 }
-export declare function WidgetTitleBar({ title, commands }: WidgetTitleBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetTitleBar({ title, commands, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetTitleBar.js

@@ -9,7 +9,7 @@ const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function WidgetTitleBar({ title, commands }) {
+function WidgetTitleBar({ title, commands, }) {
     const { language } = (0, locale_1.useLocale)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',

package/Insights/charts/AreaChart.d.ts

@@ -1,6 +1,6 @@
 import { AreaChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function AreaChart({ dataset, chartInfo, }: {
+export declare function AreaChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: AreaChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export default AreaChart;

package/Insights/charts/ComposedChart.d.ts

@@ -1,6 +1,6 @@
 import { ComposedChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function ComposedChart({ dataset, chartInfo, }: {
+export declare function ComposedChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: ComposedChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export default ComposedChart;

package/Insights/charts/CustomTooltipContent.d.ts

@@ -1,4 +1,4 @@
-export declare const CustomTooltipContent: ({ active, payload, label, xAxisFormatter, yAxisFormatter, rightYAxisFormatter, yAxisIdResolver, }: {
+export declare const CustomTooltipContent: ({ active, payload, label, xAxisFormatter, yAxisFormatter, rightYAxisFormatter, yAxisIdResolver, }: Readonly<{
     active?: boolean;
     payload?: any[];
     label: string;
@@ -6,4 +6,4 @@ export declare const CustomTooltipContent: ({ active, payload, label, xAxisForma
     yAxisFormatter: (value: unknown) => string;
     rightYAxisFormatter?: (value: unknown) => string;
     yAxisIdResolver?: (dataKey: string) => "left" | "right";
-}) => import("react/jsx-runtime").JSX.Element | null;
+}>) => import("react/jsx-runtime").JSX.Element | null;

package/Insights/charts/FunnelCustomTooltipContent.d.ts

@@ -1,5 +1,5 @@
-export declare const FunnelCustomTooltipContent: ({ active, payload, valueFormatter, }: {
+export declare const FunnelCustomTooltipContent: ({ active, payload, valueFormatter, }: Readonly<{
     active?: boolean;
     payload?: any[];
     valueFormatter: (value: unknown) => string;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}>) => import("react/jsx-runtime").JSX.Element | null;

package/Insights/charts/GaugeChart.d.ts

@@ -1,6 +1,6 @@
 import { GaugeChartInfo } from '@headless-adminapp/core/experience/insights';
-export declare function GaugeChart(_props: {
+export declare function GaugeChart(_props: Readonly<{
     dataset: any[];
     chartInfo: GaugeChartInfo;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export default GaugeChart;

package/PageBoard/BoardColumn.d.ts

@@ -2,4 +2,4 @@ import { BoardColumnConfig } from '@headless-adminapp/app/board/types';
 export type BoardColumnProps = {
     config: BoardColumnConfig;
 };
-export declare function BoardColumn(props: BoardColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoardColumn(props: Readonly<BoardColumnProps>): import("react/jsx-runtime").JSX.Element;

package/PageEntityForm/FormTabRelated.d.ts

@@ -2,5 +2,5 @@ import { RelatedItemInfo } from '@headless-adminapp/app/dataform/context';
 interface FormTabRelatedProps {
     selectedRelatedItem: RelatedItemInfo | null;
 }
-export declare function FormTabRelated({ selectedRelatedItem }: FormTabRelatedProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormTabRelated({ selectedRelatedItem, }: Readonly<FormTabRelatedProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/FormTabRelated.js

@@ -7,10 +7,9 @@ const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const historystate_1 = require("@headless-adminapp/app/historystate");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
-function FormTabRelated({ selectedRelatedItem }) {
+function FormTabRelated({ selectedRelatedItem, }) {
     const recordId = (0, hooks_1.useRecordId)();
     const schema = (0, hooks_1.useDataFormSchema)();
-    const historyKey = (0, historystate_1.useHistoryStateKey)();
     return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -99,7 +99,7 @@ const PageEntityFormDesktopContainer = () => {
                                                     alignItems: 'center',
                                                 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: recordTitle }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: isDirty
                                                             ? `- ${strings.unsaved}`
-                                                            : !!record
+                                                            : record
                                                                 ? `- ${strings.saved}`
                                                                 : '' })] }), (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: formConfig.experience.headerControls?.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];

package/PageEntityForm/ProcessFlow.d.ts

@@ -7,5 +7,5 @@ interface ProcessFlowProps {
     }>;
     skeleton?: boolean;
 }
-export declare function ProcessFlow({ height, rounded, items, skeleton, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProcessFlow({ height, rounded, items, skeleton, }: Readonly<ProcessFlowProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/RecordAvatar.js

@@ -47,7 +47,7 @@ const RecordAvatar = () => {
             });
             await refresh();
         }
-        catch (error) {
+        catch {
             openErrorDialog({
                 title: 'Error',
                 text: 'Unable to update record',

package/PageEntityForm/RecordCard.js

@@ -43,7 +43,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
     const initials = createIntial(recordTitle);
     let avatarSrc = '';
     if (cardView.showAvatar) {
-        const avatarColumn = cardView.avatarColumn || schema.avatarAttribute;
+        const avatarColumn = cardView.avatarColumn ?? schema.avatarAttribute;
         if (avatarColumn) {
             const avatarAttribute = schema.attributes[avatarColumn];
             if (avatarAttribute.type === 'attachment' &&

package/PageEntityForm/RecordCardLoading.d.ts

@@ -1,8 +1,7 @@
 import { CardView } from '@headless-adminapp/core/experience/view';
-import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
 interface RecordCardLoadingProps<S extends SchemaAttributes = SchemaAttributes> {
-    schema: Schema<S>;
     cardView: CardView<S>;
 }
-export declare function RecordCardLoading<S extends SchemaAttributes = SchemaAttributes>({ cardView }: RecordCardLoadingProps<S>): import("react/jsx-runtime").JSX.Element;
+export declare function RecordCardLoading<S extends SchemaAttributes = SchemaAttributes>({ cardView }: Readonly<RecordCardLoadingProps<S>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -58,15 +58,12 @@ const RecordSetNavigatorContainer = () => {
                         flexDirection: 'column',
                         paddingInline: 16,
                         paddingBlock: 8,
-                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: schema.localizedPluralLabels?.[language] ?? schema?.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data?.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
-                                        record[schema.idAttribute] &&
-                                        styles.selected), onClick: () => {
+                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: schema.localizedPluralLabels?.[language] ?? schema?.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data?.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId === record[schema.idAttribute] && styles.selected), onClick: () => {
                                         openForm({
                                             logicalName: schema.logicalName,
                                             id: record[schema.idAttribute],
                                             replace: true,
                                         });
-                                    }, 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]))) }) })] }) }));
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId === record[schema.idAttribute] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingInline: react_components_1.tokens.spacingHorizontalL }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
 };
 exports.RecordSetNavigatorContainer = RecordSetNavigatorContainer;

package/PageEntityForm/RelatedViewSelector.d.ts

@@ -2,5 +2,5 @@ import { RelatedItemInfo } from '@headless-adminapp/app/dataform/context';
 interface RelatedViewSelectorProps {
     onSelect: (item: RelatedItemInfo) => void;
 }
-export declare function RelatedViewSelector(props: RelatedViewSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RelatedViewSelector(props: Readonly<RelatedViewSelectorProps>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/PageEntityForm/StandardControl.js

@@ -7,7 +7,6 @@ exports.StandardControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
-const react_1 = require("react");
 const componentStore_1 = require("../componentStore");
 const AttachmentControl_1 = require("../form/controls/AttachmentControl");
 const AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
@@ -47,15 +46,12 @@ const StandardControl = (props) => {
     // quickViewControl,
     allowNavigation, allowNewRecord, autoHeight, maxHeight, skeleton, } = props;
     const isDisabled = readOnly;
-    // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
         ? undefined
         : _placeholder ?? _label ?? attribute.label;
-    // const required = quickViewControl ? false : attribute.required;
     const dataService = (0, transport_1.useDataService)();
     const fileService = (0, transport_1.useFileService)();
-    const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
-    // const { openQuickCreate } = useQuickCreateForm();
+    const { schemaStore } = (0, hooks_1.useMetadata)();
     switch (attribute.type) {
         case 'id': {
             const controlProps = {
@@ -111,7 +107,7 @@ const StandardControl = (props) => {
                     return (0, jsx_runtime_1.jsx)(Control, { ...controlProps });
                 }
                 default:
-                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+                    return null;
             }
         }
         case 'number': {
@@ -133,7 +129,7 @@ const StandardControl = (props) => {
                     return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, skeleton: skeleton }));
                 }
                 default: {
-                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+                    return null;
                 }
             }
         }
@@ -184,11 +180,11 @@ const StandardControl = (props) => {
         }
         case 'lookups': {
             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, skeleton: skeleton }));
+            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), allowNavigation: allowNavigation, allowNewRecord: allowNewRecord, skeleton: skeleton }));
         }
         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, skeleton: skeleton }));
+            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, allowNavigation: allowNavigation, skeleton: skeleton }));
         }
         case 'boolean': {
             const Control = componentStore_1.componentStore.getComponent('Form.SwitchControl') ?? SwitchControl_1.SwitchControl;
@@ -215,6 +211,6 @@ const StandardControl = (props) => {
     if (FallBackControl) {
         return (0, jsx_runtime_1.jsx)(FallBackControl, { ...props });
     }
-    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+    return null;
 };
 exports.StandardControl = StandardControl;

package/PageEntityForm/SubgridControl.d.ts

@@ -10,5 +10,5 @@ interface SubgridControlProps {
     };
     ContainerComponent?: React.ComponentType<any> | null;
 }
-export declare function SubgridControl(props: SubgridControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubgridControl(props: Readonly<SubgridControlProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewMobileContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const CommandContainer_1 = require("../DataGrid/CommandContainer");
 const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
 const GridListContainer_1 = require("../DataGrid/GridListContainer");
 const PageEntityViewMobileFrame_1 = require("./PageEntityViewMobileFrame");
 const PageEntityViewMobileContainer = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewMobileFrame_1.PageEntityViewMobileFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewMobileFrame_1.PageEntityViewMobileFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }));
 };
 exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/components/ComponentBroken.d.ts

@@ -3,5 +3,5 @@ interface ComponentBrokenProps {
     message?: string;
     Icon?: Icon;
 }
-export declare function ComponentBroken({ message, Icon }: ComponentBrokenProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentBroken({ message, Icon, }: Readonly<ComponentBrokenProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/ComponentBroken.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentBroken = ComponentBroken;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function ComponentBroken({ message, Icon }) {
+function ComponentBroken({ message, Icon, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,

package/components/DndProvider.js

@@ -34,12 +34,8 @@ const DndContext = (0, react_1.createContext)(null);
 const DndProvider = ({ children }) => {
     const [context, setContext] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        if (!HTML5BackendPromise) {
-            HTML5BackendPromise = Promise.resolve().then(() => __importStar(require('react-dnd-html5-backend'))).then((mod) => mod.HTML5Backend);
-        }
-        if (!ReactDndPromise) {
-            ReactDndPromise = Promise.resolve().then(() => __importStar(require('react-dnd')));
-        }
+        HTML5BackendPromise ??= Promise.resolve().then(() => __importStar(require('react-dnd-html5-backend'))).then((mod) => mod.HTML5Backend);
+        ReactDndPromise ??= Promise.resolve().then(() => __importStar(require('react-dnd')));
         Promise.all([HTML5BackendPromise, ReactDndPromise])
             .then(([backend, mod]) => {
             setContext({

package/components/LoginForm.d.ts

@@ -10,5 +10,5 @@ interface LoginFormProps {
     subtitle?: string;
     defaultValues?: LoginFormData;
 }
-export declare function LoginForm(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginForm(props: Readonly<LoginFormProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageBroken.d.ts

@@ -4,5 +4,5 @@ interface PageBrokenProps {
     message?: string;
     Icon?: Icon;
 }
-export declare function PageBroken({ title, message, Icon }: PageBrokenProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageBroken({ title, message, Icon, }: Readonly<PageBrokenProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageBroken.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBroken = PageBroken;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function PageBroken({ title, message, Icon }) {
+function PageBroken({ title, message, Icon, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,

package/components/PageLoading.d.ts

@@ -1,5 +1,5 @@
 interface PageLoadingProps {
     message?: string;
 }
-export declare function PageLoading({ message }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLoading({ message }: Readonly<PageLoadingProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageLogin.d.ts

@@ -8,5 +8,5 @@ interface LoginPageProps {
     subtitle?: string;
     defaultValues?: LoginFormData;
 }
-export declare function PageLogin(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLogin(props: Readonly<LoginPageProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/form/controls/AttachmentControl.js

@@ -84,7 +84,7 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
                 maxWidth: '100%',
                 height: 100,
                 position: 'relative',
-            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, alt: value.name ?? 'Attachment', style: {
                         maxHeight: '100%',
                         maxWidth: '100%',
                         objectFit: 'contain',
@@ -163,7 +163,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
                                 flex: 1,
-                            }, children: placeholder || 'Select a file' }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) }))] }) }) }));
+                            }, children: placeholder ?? 'Select a file' }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) }))] }) }) }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 width: '100%',
@@ -182,7 +182,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             flex: 1,
-                        }, children: value.name || value.url }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) })), !isProcessing && ((0, jsx_runtime_1.jsx)(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
+                        }, children: value.name ?? value.url }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) })), !isProcessing && ((0, jsx_runtime_1.jsx)(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
 };
 exports.AttachmentControl = AttachmentControl;
 const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick, }) => {

package/form/controls/DecimalControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface DecimalControlProps extends ControlProps<number> {
     decimalPlaces?: number;
 }
-export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, skeleton, }: DecimalControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, skeleton, }: Readonly<DecimalControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DurationControl.js

@@ -154,24 +154,24 @@ function resolveValue(value) {
     if (!isNaN(numberValue)) {
         return numberValue;
     }
-    const timeFormat = /^(\d+):[0-5][0-9]$/;
+    const timeFormat = /^(\d+):[0-5]\d$/;
     if (timeFormat.test(value)) {
         const [hours, minutes] = value.split(':').map(Number);
         return hours * 60 + minutes;
     }
     const minutesFormat = /^(\d+(\.\d+)?) m/;
     if (minutesFormat.test(value)) {
-        const [, minutes] = value.match(minutesFormat);
+        const [, minutes] = minutesFormat.exec(value);
         return Math.floor(Number(minutes));
     }
     const hoursFormat = /^(\d+(\.\d+)?) h/;
     if (hoursFormat.test(value)) {
-        const [, hours] = value.match(hoursFormat);
+        const [, hours] = hoursFormat.exec(value);
         return Math.floor(Number(hours) * 60);
     }
     const daysFormat = /^(\d+(\.\d+)?) d/;
     if (daysFormat.test(value)) {
-        const [, days] = value.match(daysFormat);
+        const [, days] = daysFormat.exec(value);
         return Math.floor(Number(days) * 1440);
     }
     return undefined;

package/form/controls/EmailControl.js

@@ -9,19 +9,23 @@ function EmailControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
+    const handleOnChange = (e) => {
+        let value = e.target.value;
+        if (textTransform === 'uppercase') {
+            value = value.toUpperCase();
+        }
+        else if (textTransform === 'lowercase') {
+            value = value.toLowerCase();
+        }
+        onChange?.(value);
+    };
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "email", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, 
         // size="sm"
-        value: value || '', onChange: (e) => {
-            textTransform === 'uppercase'
-                ? onChange?.(e.target.value.toUpperCase())
-                : textTransform === 'lowercase'
-                    ? onChange?.(e.target.value.toLowerCase())
-                    : onChange?.(e.target.value);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+        value: value ?? '', onChange: handleOnChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             flex: 1,
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
             width: '100%',
-        }, contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Mail, {}), size: "small" })) : undefined }));
+        }, contentAfter: value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.open(`mailto:${value}`, '_blank'), color: "primary", appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Mail, {}), size: "small" })) : undefined }));
 }

package/form/controls/MultiSelectControl.d.ts

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

package/form/controls/MultiSelectLookupControl.d.ts

@@ -1,5 +1,4 @@
 import { Schema } from '@headless-adminapp/core/schema';
-import { ISchemaExperienceStore } from '@headless-adminapp/core/store';
 import { IDataService } from '@headless-adminapp/core/transport';
 import { ControlProps } from './types';
 export interface LookupOption {
@@ -13,12 +12,8 @@ export type DataLookup = {
     logicalName: string;
 };
 export type MultiSelectLookupControlProps = ControlProps<DataLookup[]> & {
-    async?: boolean;
-    lookupKey?: string;
-    openRecord?: (id: string) => void;
     dataService: IDataService;
     schema: Schema;
-    experienceStore: ISchemaExperienceStore;
     viewId?: string;
     allowNavigation?: boolean;
     allowNewRecord?: boolean;

package/form/controls/MultiSelectLookupControl.js

@@ -4,6 +4,7 @@ exports.MultiSelectLookupControl = MultiSelectLookupControl;
 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 useRecentItemStore_1 = require("@headless-adminapp/app/metadata/hooks/useRecentItemStore");
 const hooks_2 = require("@headless-adminapp/app/route/hooks");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const icons_1 = require("@headless-adminapp/icons");
@@ -36,6 +37,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const { lookupStrings } = (0, AppStringContext_1.useAppStrings)();
+    const recentItemStore = (0, useRecentItemStore_1.useRecentItemStore)();
     (0, react_1.useEffect)(() => {
         if (open)
             setLookupEnabled(true);
@@ -81,13 +83,6 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             clearInterval(timer);
         };
     }, []);
-    // useEffect(() => {
-    //   if (value) {
-    //     // setSearchText(value.name); // TODO:
-    //   } else {
-    //     setSearchText('');
-    //   }
-    // }, [value]);
     const handleAdd = (selectedValue) => {
         setSearchText('');
         if (!value) {
@@ -141,6 +136,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                     const _item = data?.records.find((x) => String(x[schema.idAttribute]) === String(item.optionValue));
                     if (!_item)
                         return;
+                    recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), _item[schema.idAttribute], _item[schema.idAttribute]);
                     handleAdd(_item);
                 }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((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: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view?.experience.card, record: item, schema: schema }) }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,

package/form/controls/PasswordControl.d.ts

@@ -3,4 +3,4 @@ import { ControlProps } from './types';
 export interface PasswordControlProps extends ControlProps<string> {
     appearance?: InputProps['appearance'];
 }
-export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance, }: PasswordControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance, }: Readonly<PasswordControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/PasswordControl.js

@@ -7,7 +7,7 @@ const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 function PasswordControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, appearance = 'filled-darker', }) {
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, appearance: appearance, type: showPassword ? 'text' : 'password', autoFocus: autoFocus, value: value ?? '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         disabled: disabled, contentAfter: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => setShowPassword(!showPassword), icon: showPassword ? (0, jsx_runtime_1.jsx)(icons_1.Icons.EyeOff, { size: 18 }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Eye, { size: 18 }) }) }));
 }

package/form/controls/RegardingControl.d.ts

@@ -1,4 +1,4 @@
-import { ISchemaExperienceStore, ISchemaStore } from '@headless-adminapp/core/store';
+import { ISchemaStore } from '@headless-adminapp/core/store';
 import { IDataService } from '@headless-adminapp/core/transport';
 import { ControlProps } from './types';
 export interface LookupOption {
@@ -13,13 +13,9 @@ export type DataLookup = {
     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/TelephoneControl.js

@@ -38,5 +38,5 @@ function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placehol
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: !!number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
+        contentAfter: number?.uri ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(number.uri, '_blank'), title: number.uri, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Phone, {}) })) : undefined }));
 }

package/form/controls/TextAreaControl.d.ts

@@ -5,4 +5,4 @@ export interface TextAreaControlProps extends ControlProps<string> {
     autoHeight?: boolean;
     maxHeight?: number;
 }
-export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, skeleton, }: TextAreaControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows, textTransform, autoHeight, maxHeight, skeleton, }: Readonly<TextAreaControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextControl.d.ts

@@ -8,4 +8,4 @@ export interface TextControlProps extends ControlProps<string> {
     appearance?: InputProps['appearance'];
     maxLength?: number;
 }
-export declare function TextControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, autoFocus, autoCapitalize, autoCorrect, textTransform, readOnly, appearance, maxLength, skeleton, }: 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, }: Readonly<TextControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/TextControl.js

@@ -13,13 +13,17 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, name: name, autoFocus: autoFocus, appearance: appearance, value: value || '', onChange: (e) => {
-            textTransform === 'uppercase'
-                ? onChange?.(e.target.value.toUpperCase())
-                : textTransform === 'lowercase'
-                    ? onChange?.(e.target.value.toLowerCase())
-                    : onChange?.(e.target.value);
-        }, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    const handleOnChange = (e) => {
+        let value = e.target.value;
+        if (textTransform === 'uppercase') {
+            value = value.toUpperCase();
+        }
+        else if (textTransform === 'lowercase') {
+            value = value.toLowerCase();
+        }
+        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?.(), 
         // invalid={error}
         // readOnly={readOnly || disabled}
         readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {

package/form/controls/UrlControl.js

@@ -9,12 +9,12 @@ function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, d
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value ?? '', onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), 
         // invalid={error}
         readOnly: disabled || readOnly, autoComplete: "off", style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 
         // size="sm"
-        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
+        contentAfter: value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "89d91fe63da3aae42fc34482cc90c1e12963810b"
+  "gitHead": "f25faf823d592f7d9c0356c1ca238e9019b8e7c0"
 }