@headless-adminapp/fluent 0.0.17-alpha.47 → 0.0.17-alpha.49

package/App/AppHeaderContianer.js

@@ -34,7 +34,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
             background: react_components_1.tokens.colorBrandBackground,
             paddingInline: 8,
             gap: 8,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isMobile && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
                             cursor: 'pointer',
                         }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',

package/App/NavigationContainer.js

@@ -33,32 +33,32 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
-    const { app, schemaMetadataDic } = (0, app_1.useAppContext)();
+    const { app } = (0, app_1.useAppContext)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), 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) => ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, index)))] }, group.label))) }, area.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;
+const Test = ({ item, onOpenChange, drawerType }) => {
+    var _a, _b;
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
     const router = (0, hooks_1.useRouter)();
     const pathname = (0, hooks_1.usePathname)();
     const selectedPath = pathname;
     const { language } = (0, locale_1.useLocale)();
     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: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), 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, _b;
-                                const navItem = (0, utils_1.transformNavPageItem)({
-                                    item,
-                                    schemaMetadataDic: schemaMetadataDic,
-                                    language,
-                                    routeResolver,
-                                });
-                                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) => {
-                                        if (type === 'overlay') {
-                                            onOpenChange(false);
-                                        }
-                                        event.preventDefault();
-                                        router.push(navItem.link);
-                                    }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive
-                                            ? 'var(--colorNeutralForeground2BrandSelected)'
-                                            : undefined }), value: isActive ? 'active' : '', children: navItem.label }, index));
-                            })] }, group.label))) }, area.label))) }) }) }));
+    const navItem = (0, utils_1.transformNavPageItem)({
+        item,
+        schemaMetadataDic: schemaMetadataDic,
+        language,
+        routeResolver,
+    });
+    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) => {
+            if (drawerType === 'overlay') {
+                onOpenChange(false);
+            }
+            event.preventDefault();
+            router.push(navItem.link);
+        }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
 };
-exports.NavigationContainer = NavigationContainer;

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

@@ -1,6 +1,6 @@
 interface CustomizeColumnsProps {
-    opened: boolean;
-    onClose: () => void;
+    readonly opened: boolean;
+    readonly onClose: () => void;
 }
 export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -62,9 +62,7 @@ function CustomizeColumns({ onClose, opened }) {
                             gap: react_components_1.tokens.spacingVerticalS,
                             // padding: tokens.spacingHorizontalS,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => {
-                                setItems((prev) => prev.filter((_, i) => i !== index));
-                            }, stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,

package/DataGrid/useTableColumns.js

@@ -53,7 +53,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     (0, react_1.useEffect)(() => {
         mutableContextCommandState.setValue(contextCommands);
     }, [contextCommands, mutableContextCommandState]);
-    const tableWrapperSize = (0, hooks_2.useElementSize)(tableWrapperRef);
+    const tableWrapperSize = (0, hooks_2.useElementSize)(tableWrapperRef, 100);
     const columnWidths = (0, react_1.useMemo)(() => {
         var _a;
         const availableWidth = Math.max(0, ((_a = tableWrapperSize.width) !== null && _a !== void 0 ? _a : 0) - 32 - 32 - 16);
@@ -75,7 +75,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
-    const { currency, dateFormats, timezone, timeFormats } = (0, locale_1.useLocale)();
+    const locale = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -124,6 +124,31 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const selectionColumns = (0, react_1.useMemo)(() => {
         if (disableSelection)
             return [];
+        function getAllIds() {
+            var _a, _b;
+            return ((_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((record) => record[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        }
+        function toggleAllSelectedIds() {
+            setSelectedIdsRef.current((ids) => {
+                var _a;
+                if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
+                    return [];
+                }
+                return getAllIds();
+            });
+        }
+        function excludeId(ids, id) {
+            return ids.filter((i) => i !== id);
+        }
+        function toggleSelectedId(info) {
+            setSelectedIdsRef.current((ids) => {
+                const id = info.row.original[schema.idAttribute];
+                if (ids.includes(id)) {
+                    return excludeId(ids, id);
+                }
+                return [...ids, id];
+            });
+        }
         return [
             columnHelper.accessor((info) => info[schema.idAttribute], {
                 id: '$selectColumn',
@@ -137,25 +162,11 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         width: 32,
                         maxWidth: 32,
                         minWidth: 32,
-                    }, onClick: () => {
-                        setSelectedIdsRef.current((ids) => {
-                            var _a, _b, _c;
-                            if (ids.length === ((_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.length)) {
-                                return [];
-                            }
-                            return ((_c = (_b = dataRef.current) === null || _b === void 0 ? void 0 : _b.records.map((record) => record[schema.idAttribute])) !== null && _c !== void 0 ? _c : []);
-                        });
-                    } })),
+                    }, onClick: toggleAllSelectedIds })),
                 cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
-                        setSelectedIdsRef.current((ids) => {
-                            const id = info.row.original[schema.idAttribute];
-                            if (ids.includes(id)) {
-                                return ids.filter((i) => i !== id);
-                            }
-                            return [...ids, id];
-                        });
+                        toggleSelectedId(info);
                     }, style: {
                         width: 32,
                         maxWidth: 32,
@@ -175,88 +186,38 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     ]);
     const restColumns = (0, react_1.useMemo)(() => {
         return gridColumns.map((column, index) => {
+            function onChangeSortDirection(direction) {
+                setSorting([
+                    {
+                        field: column.name,
+                        order: direction,
+                    },
+                ]);
+            }
             return columnHelper.accessor((info) => info[column.name], {
                 id: column.id,
                 header: (props) => {
-                    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: (direction) => {
-                            setSorting([
-                                {
-                                    field: column.name,
-                                    order: direction,
-                                },
-                            ]);
-                        }, attribute: schema.attributes[column.name], onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
-                },
-                cell: (info) => {
-                    var _a, _b, _c;
-                    let attribute;
-                    let value;
-                    if (column.expandedKey) {
-                        const lookup = column.name;
-                        const field = column.expandedKey;
-                        const entity = schema.attributes[lookup]
-                            .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];
-                    }
-                    else {
-                        attribute = schema.attributes[column.name];
-                        value = info.getValue();
-                    }
-                    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
-                        currency: currency.currency,
-                        dateFormat: dateFormats.short,
-                        timeFormat: timeFormats.short,
-                        timezone,
-                    })) !== null && _c !== void 0 ? _c : '';
-                    if (column.plainText) {
-                        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
-                    }
-                    if (column.component) {
-                        const Component = componentStore_1.componentStore.getComponent(column.component);
-                        if (!Component) {
-                            throw new Error(`Component with name ${column.component} not found`);
-                        }
-                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
-                    }
-                    if (schema.primaryAttribute === column.name) {
-                        const path = routeResolver({
-                            logicalName: schema.logicalName,
-                            type: app_1.PageType.EntityForm,
-                            id: info.row.original[schema.idAttribute],
-                        });
-                        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
-                                openRecord(info.row.original[schema.idAttribute]);
-                            } }, column.id));
-                    }
-                    switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
-                        case 'money':
-                            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
-                        case 'lookup':
-                            if (!value) {
-                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
-                            }
-                            const path = routeResolver({
-                                logicalName: attribute.entity,
-                                type: app_1.PageType.EntityForm,
-                                id: value.id,
-                            });
-                            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
-                                    recordSetSetter('', []);
-                                    router.push(path);
-                                } }, column.id));
-                        case 'attachment':
-                            const url = value === null || value === void 0 ? void 0 : value.url;
-                            if (!url) {
-                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
-                            }
-                            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)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+                    return renderCellHeaderContent({
+                        props,
+                        column,
+                        disableColumnResize,
+                        disableColumnFilter,
+                        disableColumnSort,
+                        onChangeSortDirection,
+                        attribute: schema.attributes[column.name],
+                    });
                 },
+                cell: (info) => renderCellContent({
+                    info,
+                    column,
+                    schema,
+                    locale,
+                    schemaStore,
+                    routeResolver,
+                    openRecord,
+                    recordSetSetter,
+                    router,
+                }),
                 enableResizing: true,
                 size: columnWidths[index],
                 minSize: 100,
@@ -264,24 +225,96 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
             });
         });
     }, [
+        gridColumns,
         columnWidths,
-        currency.currency,
-        dateFormats.short,
-        timeFormats.short,
-        disableColumnFilter,
         disableColumnResize,
+        disableColumnFilter,
         disableColumnSort,
-        gridColumns,
+        schema,
+        setSorting,
+        locale,
+        schemaStore,
+        routeResolver,
         openRecord,
         recordSetSetter,
-        routeResolver,
         router,
-        schema,
-        schemaStore,
-        setSorting,
-        timezone,
     ]);
     return (0, react_1.useMemo)(() => {
         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 renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, recordSetSetter, router, }) {
+    var _a, _b, _c;
+    const { currency, dateFormats, timezone, timeFormats } = locale;
+    let attribute;
+    let value;
+    if (column.expandedKey) {
+        const lookup = column.name;
+        const field = column.expandedKey;
+        const entity = schema.attributes[lookup].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];
+    }
+    else {
+        attribute = schema.attributes[column.name];
+        value = info.getValue();
+    }
+    const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
+        currency: currency.currency,
+        dateFormat: dateFormats.short,
+        timeFormat: timeFormats.short,
+        timezone,
+    })) !== null && _c !== void 0 ? _c : '';
+    if (column.plainText) {
+        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+    }
+    if (column.component) {
+        const Component = componentStore_1.componentStore.getComponent(column.component);
+        if (!Component) {
+            throw new Error(`Component with name ${column.component} not found`);
+        }
+        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+    }
+    if (schema.primaryAttribute === column.name) {
+        const path = routeResolver({
+            logicalName: schema.logicalName,
+            type: app_1.PageType.EntityForm,
+            id: info.row.original[schema.idAttribute],
+        });
+        return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: value, width: info.column.getSize(), href: path, onClick: () => {
+                openRecord(info.row.original[schema.idAttribute]);
+            } }, column.id));
+    }
+    switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
+        case 'money':
+            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
+        case 'lookup': {
+            if (!value) {
+                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+            }
+            const path = routeResolver({
+                logicalName: attribute.entity,
+                type: app_1.PageType.EntityForm,
+                id: value.id,
+            });
+            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: path, onClick: () => {
+                    recordSetSetter('', []);
+                    router.push(path);
+                } }, column.id));
+        }
+        case 'attachment': {
+            const url = value === null || value === void 0 ? void 0 : value.url;
+            if (!url) {
+                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+            }
+            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)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+}

package/Insights/hooks/useQueriesData.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -50,34 +49,7 @@ function useQueriesData(queries) {
                 }
                 const query = item.value;
                 const data = yield dataService.retriveAggregate(query);
-                const transformedData = data;
-                Object.entries(query.attributes).forEach(([key, attribute]) => {
-                    let transformer = undefined;
-                    if (attribute.type === 'date') {
-                        if (attribute.format) {
-                            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
-                                .toDate()
-                                .getTime();
-                        }
-                        else if (attribute.value.type === 'function') {
-                            if (attribute.value.value === transport_2.AggregateAttributeFunction.YearMonth) {
-                                transformer = (value) => (0, dayjs_1.default)(value, 'YYYY-MM')
-                                    .toDate()
-                                    .getTime();
-                            }
-                        }
-                        else {
-                            transformer = (value) => (0, dayjs_1.default)(value)
-                                .toDate()
-                                .getTime();
-                        }
-                    }
-                    if (transformer) {
-                        transformedData.forEach((item) => {
-                            item[key] = transformer(item[key]);
-                        });
-                    }
-                });
+                const transformedData = transformAggregateData(data, query);
                 return transformedData;
             }),
         })),
@@ -90,3 +62,38 @@ function useQueriesData(queries) {
     }, [result]);
     return { isPending, isFetching, dataset: data, refetch };
 }
+function transformAggregateData(data, query) {
+    const transformedData = data;
+    Object.entries(query.attributes).forEach(([key, attribute]) => {
+        const transformer = getAttributeValueTransformer(attribute);
+        if (transformer) {
+            transformedData.forEach((item) => {
+                item[key] = transformer(item[key]);
+            });
+        }
+    });
+    return transformedData;
+}
+function getAttributeValueTransformer(attribute) {
+    let transformer = undefined;
+    if (attribute.type === 'date') {
+        if (attribute.format) {
+            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
+                .toDate()
+                .getTime();
+        }
+        else if (attribute.value.type === 'function') {
+            if (attribute.value.value === transport_2.AggregateAttributeFunction.YearMonth) {
+                transformer = (value) => (0, dayjs_1.default)(value, 'YYYY-MM')
+                    .toDate()
+                    .getTime();
+            }
+        }
+        else {
+            transformer = (value) => (0, dayjs_1.default)(value)
+                .toDate()
+                .getTime();
+        }
+    }
+    return transformer;
+}

package/OverflowCommandBar/OverflowCommandBar.js

@@ -17,11 +17,8 @@ const OverflowCommandBar = ({ commands, align = 'start', afterDivider, beforeDiv
                             const commandType = item.type;
                             switch (item.type) {
                                 case 'menu':
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
                                 case 'button':
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
                                 case 'label':
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
                                 case 'icon':
                                     return ((0, jsx_runtime_1.jsx)(react_components_1.OverflowItem, { id: `${groupIndex}-${index}`, groupId: String(groupIndex), children: (0, render_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, index));
                                 default:

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -21,6 +21,7 @@ const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 const ProcessFlow_1 = require("./ProcessFlow");
 const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
+let previousCachedActiveTabInfo = null;
 const PageEntityFormDesktopContainer = () => {
     var _a, _b, _c;
     const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
@@ -36,8 +37,20 @@ const PageEntityFormDesktopContainer = () => {
         setValue((state) => (Object.assign(Object.assign({}, state), { activeTab: value })));
     });
     (0, react_1.useEffect)(() => {
-        setActiveTab('general');
-    }, [setActiveTab]);
+        if (previousCachedActiveTabInfo &&
+            previousCachedActiveTabInfo.logicalName === schema.logicalName) {
+            setActiveTab(previousCachedActiveTabInfo.name);
+            setSelectedRelatedItem(previousCachedActiveTabInfo.relatedItem);
+        }
+        else {
+            setActiveTab(formConfig.experience.tabs[0].name);
+            previousCachedActiveTabInfo = {
+                logicalName: schema.logicalName,
+                name: formConfig.experience.tabs[0].name,
+                relatedItem: null,
+            };
+        }
+    }, [setActiveTab, formConfig, schema]);
     const recordTitle = (0, hooks_1.useRecordTitle)();
     // const readonly = useIsFormReadonly();
     const formInstance = (0, hooks_1.useFormInstance)();
@@ -102,9 +115,21 @@ const PageEntityFormDesktopContainer = () => {
                                                         } })), (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_2.getAttributeFormattedValue)(attribute, field.value) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), !!(processFlowSteps === null || processFlowSteps === void 0 ? void 0 : processFlowSteps.length) && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (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) => {
+                                        }) })] }), !!(processFlowSteps === null || processFlowSteps === void 0 ? void 0 : processFlowSteps.length) && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (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);
+                                            previousCachedActiveTabInfo = {
+                                                logicalName: schema.logicalName,
+                                                name: value.value,
+                                                relatedItem: null,
+                                            };
+                                        }, 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');
+                                            previousCachedActiveTabInfo = {
+                                                logicalName: schema.logicalName,
+                                                name: 'related',
+                                                relatedItem: item,
+                                            };
                                         } })] })] })] }), (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 })] })] }));
 };
 exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;

package/PageEntityForm/RecordCard.d.ts

@@ -6,5 +6,5 @@ interface RecordCardProps<S extends SchemaAttributes = SchemaAttributes> {
     record: InferredSchemaType<S>;
     selected?: boolean;
 }
-export declare function RecordCard<S extends SchemaAttributes = SchemaAttributes>({ schema, cardView, record, selected, }: RecordCardProps<S>): import("react/jsx-runtime").JSX.Element;
+export declare function RecordCard<S extends SchemaAttributes = SchemaAttributes>({ schema, cardView, record, selected, }: Readonly<RecordCardProps<S>>): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/RecordCard.js

@@ -30,7 +30,7 @@ function createIntial(name) {
     return name === null || name === void 0 ? void 0 : name.split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
 }
 function RecordCard({ schema, cardView, record, selected, }) {
-    var _a, _b;
+    var _a, _b, _c;
     const styles = useStyles();
     const _record = record;
     const recordTitle = _record[schema.primaryAttribute];
@@ -40,7 +40,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
         const avatarAttribute = schema.attributes[cardView.avatarColumn];
         if (avatarAttribute.type === 'attachment' &&
             avatarAttribute.format === 'image') {
-            avatarSrc = _record[cardView.avatarColumn];
+            avatarSrc = (_a = _record[cardView.avatarColumn]) === null || _a === void 0 ? void 0 : _a.url;
         }
         else if (avatarAttribute.type === 'string' &&
             avatarAttribute.format === 'url') {
@@ -53,61 +53,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
-                        const value = _record[column.name];
-                        if (!value) {
-                            return null;
-                        }
-                        const attribute = schema.attributes[column.name];
-                        let label = '';
-                        if (column.label === true) {
-                            label = attribute.label;
-                        }
-                        else if (typeof column.label === 'string') {
-                            label = column.label;
-                        }
-                        if (column.variant === 'choice') {
-                            if (attribute.type === 'choice') {
-                                const choice = attribute.options.find((option) => option.value === value);
-                                if (!choice) {
-                                    return null;
-                                }
-                                const bgColor = choice.color;
-                                const color = bgColor
-                                    ? (0, color_1.isColorDark)(bgColor)
-                                        ? '#FFFFFF'
-                                        : '#000000'
-                                    : undefined;
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                                        background: bgColor,
-                                        color: color,
-                                        height: 16,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                    }, children: choice.label }, column.name));
-                            }
-                            if (attribute.type === 'choices') {
-                                const choices = attribute.options.filter((option) => value.includes(option.value));
-                                if (!choices.length) {
-                                    return null;
-                                }
-                                return ((0, jsx_runtime_1.jsx)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        gap: 4,
-                                    }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
-                                            background: choice.color,
-                                            color: 'white',
-                                            height: 16,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                        }, children: choice.label }, choice.value))) }, column.name));
-                            }
-                        }
-                        return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
-                    })] }), !!((_b = cardView.rightColumn) === null || _b === void 0 ? void 0 : _b.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: _record[cardView.primaryColumn] }), (_b = cardView.secondaryColumns) === null || _b === void 0 ? void 0 : _b.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema }, column.name)))] }), !!((_c = cardView.rightColumn) === null || _c === void 0 ? void 0 : _c.length) && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
@@ -136,6 +82,60 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     if (column.variant === 'strong') {
                         return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
                     }
-                    (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name);
+                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(value, attribute) }, column.name));
                 }) }))] }));
 }
+function SecondaryColumnContent({ record: _record, column, schema, }) {
+    const value = _record[column.name];
+    if (!value) {
+        return null;
+    }
+    const attribute = schema.attributes[column.name];
+    let label = '';
+    if (column.label === true) {
+        label = attribute.label;
+    }
+    else if (typeof column.label === 'string') {
+        label = column.label;
+    }
+    if (column.variant === 'choice') {
+        if (attribute.type === 'choice') {
+            const choice = attribute.options.find((option) => option.value === value);
+            if (!choice) {
+                return null;
+            }
+            const bgColor = choice.color;
+            let color;
+            if (bgColor) {
+                color = (0, color_1.isColorDark)(bgColor) ? '#FFFFFF' : '#000000';
+            }
+            return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+                    background: bgColor,
+                    color: color,
+                    height: 16,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: choice.label }, column.name));
+        }
+        if (attribute.type === 'choices') {
+            const choices = attribute.options.filter((option) => value.includes(option.value));
+            if (!choices.length) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: 4,
+                }, children: choices.map((choice) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "extra-small", appearance: "filled", style: {
+                        background: choice.color,
+                        color: 'white',
+                        height: 16,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: choice.label }, choice.value))) }, column.name));
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [!!label && `${label}: `, (0, utils_1.getAttributeFormattedValue)(attribute, value)] }, column.name));
+}

package/PageEntityForm/SubgridControl.js

@@ -63,5 +63,5 @@ function SubgridControl(props) {
         return brokenContent;
     }
     const ContainerComponent = (_a = props.ContainerComponent) !== null && _a !== void 0 ? _a : FormSubgridContainer_1.FormSubgridContainer;
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: props.associated ? true : false, associated: props.associated, extraFilter: extraFilter, allowViewSelection: (_b = props.allowViewSelection) !== null && _b !== void 0 ? _b : false, children: (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: !!props.associated, associated: props.associated, extraFilter: extraFilter, allowViewSelection: (_b = props.allowViewSelection) !== null && _b !== void 0 ? _b : false, children: (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
 }

package/PageEntityView/FormSubgridContainer.js

@@ -35,11 +35,14 @@ const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
                     }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
-                        gap: 40,
+                        gap: 10,
                         overflow: 'hidden',
                         width: '100%',
                         paddingBlock: 4,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                flex: 1,
+                                minWidth: 0,
+                            }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'end',

package/form/controls/DateTimeControl.d.ts

@@ -3,4 +3,4 @@ export interface DateTimeControlProps extends ControlProps<string> {
     maxDate?: Date;
     minDate?: Date;
 }
-export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: DateTimeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: Readonly<DateTimeControlProps>): import("react/jsx-runtime").JSX.Element;

package/form/controls/DateTimeControl.js

@@ -8,37 +8,45 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_datepicker_compat_1 = require("@fluentui/react-datepicker-compat");
 const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
+const locale_1 = require("@headless-adminapp/app/locale");
 const icons_1 = require("@headless-adminapp/icons");
 const dayjs_1 = __importDefault(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_1 = require("react");
 dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
 function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
-    // const { shortDate: dateFormat } = useLocale();
-    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
+    const { dateFormats: { short: dateFormat }, timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
+    const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat) : '');
     const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
     internalTimeValueRef.current = internalTimeValue;
     (0, react_1.useEffect)(() => {
-        const updatedValue = value ? (0, dayjs_1.default)(value).format('hh:mm A') : '';
+        const updatedValue = value
+            ? (0, dayjs_1.default)(value).tz(timezone).format(timeFormat)
+            : '';
         if (internalTimeValueRef.current !== updatedValue) {
             setInternalTimeValue(updatedValue);
         }
-    }, [value]);
+    }, [value, timezone, timeFormat]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
             gap: react_components_1.tokens.spacingHorizontalS,
-        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => (date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : ''), disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
+        }, children: [(0, jsx_runtime_1.jsx)(react_datepicker_compat_1.DatePicker, { id: id, name: name, onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), placeholder: placeholder, appearance: "filled-darker", formatDate: (date) => date ? (0, dayjs_1.default)(date).tz(timezone).format(dateFormat) : '', disabled: disabled, readOnly: readOnly, value: value ? new Date(value) : null, onSelectDate: (date) => {
                     if (!date) {
                         onChange === null || onChange === void 0 ? void 0 : onChange(null);
                     }
                     else if (!value) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(date.toISOString());
+                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date).tz(timezone, true).toISOString());
                     }
                     else {
                         onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(date)
-                            .set('hour', (0, dayjs_1.default)(value).hour())
-                            .set('minute', (0, dayjs_1.default)(value).minute())
+                            .tz(timezone, true)
+                            .set('hour', (0, dayjs_1.default)(value).tz(timezone).hour())
+                            .set('minute', (0, dayjs_1.default)(value).tz(timezone).minute())
                             .toISOString());
                     }
                 }, 
@@ -54,27 +62,29 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                 } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: { flex: 1, minWidth: 0 }, input: {
                     style: { minWidth: 0 },
                 }, readOnly: readOnly || disabled || !value, selectedTime: value ? new Date(value) : null, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
-                    const dateValue = value ? new Date(value) : new Date();
+                    const dateValue = value
+                        ? (0, dayjs_1.default)(value).tz(timezone)
+                        : (0, dayjs_1.default)().tz(timezone);
                     if (data.selectedTime) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange((0, dayjs_1.default)(dateValue)
+                        onChange === null || onChange === void 0 ? void 0 : onChange(dateValue
                             .set('hour', data.selectedTime.getHours())
                             .set('minute', data.selectedTime.getMinutes())
                             .toISOString());
                     }
                     else if (data.selectedTimeText) {
-                        let resolvedTime = resolveTimeValue(data.selectedTimeText);
+                        let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
                         if (!resolvedTime) {
-                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format('hh:mm A') : '');
+                            setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
                             return;
                         }
-                        const newValue = (0, dayjs_1.default)(dateValue)
+                        const newValue = dateValue
                             .set('hour', resolvedTime.getHours())
                             .set('minute', resolvedTime.getMinutes())
                             .toISOString();
                         if (newValue !== value) {
                             onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                         }
-                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).format('hh:mm A') : '');
+                        setInternalTimeValue(newValue ? (0, dayjs_1.default)(newValue).tz(timezone).format(timeFormat) : '');
                     }
                 }, onInput: (e) => {
                     setInternalTimeValue(e.currentTarget.value);
@@ -88,12 +98,11 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         color: react_components_1.tokens.colorNeutralForeground2,
                     }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) })] }));
 }
-function resolveTimeValue(value) {
+function resolveTimeValue(value, timeFormat) {
     if (!value) {
         return;
     }
-    const time = (0, dayjs_1.default)(value, 'hh:mm A');
-    console.log('resolveTimeValue', time);
+    const time = (0, dayjs_1.default)(value, timeFormat);
     if (!time.isValid()) {
         return;
     }

package/form/layout/FormTab/FormTab.js

@@ -27,7 +27,7 @@ exports.FormTab = FormTab;
 /** @todo: unfinished component */
 const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidths, }) => {
     const divRef = (0, react_1.useRef)(null);
-    const divSize = (0, hooks_1.useElementSize)(divRef);
+    const divSize = (0, hooks_1.useElementSize)(divRef, 100);
     const padding = 0;
     // const columnCount = 2;
     const minSectionWidth = 392;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.47",
+  "version": "0.0.17-alpha.49",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -49,5 +49,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "749a69f512d51c82f33fe27f8bbe5046fdeab4c5"
+  "gitHead": "8546e02107f006000bc8855d6a462e3a64f9ae9e"
 }