@headless-adminapp/fluent 0.0.17-alpha.38 → 0.0.17-alpha.40

package/DataGrid/GridHeaderMobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface GridHeaderMobileProps {
+}
+export declare const GridHeaderMobile: FC<GridHeaderMobileProps>;
+export {};

package/DataGrid/GridHeaderMobile.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderMobile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const icons_1 = require("@headless-adminapp/icons");
+const AppStringContext_1 = require("../App/AppStringContext");
+const GridHeaderMobile = () => {
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const { language } = (0, locale_1.useLocale)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            paddingInline: 8,
+            gap: 8,
+            display: 'flex',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    alignItems: 'center',
+                    gap: 16,
+                    justifyContent: 'space-between',
+                    display: 'flex',
+                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
+                                }) }) })] }) })] }));
+};
+exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface GridListContainerProps {
+    disableSelection?: boolean;
+    disableContextMenu?: boolean;
+    disableColumnResize?: boolean;
+    disableColumnSort?: boolean;
+    disableColumnReorder?: boolean;
+    disableColumnFilter?: boolean;
+    noPadding?: boolean;
+}
+export declare const GridListContainer: FC<GridListContainerProps>;
+export {};

package/DataGrid/GridListContainer.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridListContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const navigation_1 = require("@headless-adminapp/app/navigation");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const uuid_1 = require("uuid");
+const RecordCard_1 = require("../PageEntityForm/RecordCard");
+const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
+const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        '&:hover': {
+            background: react_components_1.tokens.colorNeutralBackground1Hover,
+        },
+    },
+});
+const fallbackData = [];
+const GridListContainer = ({}) => {
+    const styles = useStyles();
+    const data = (0, hooks_1.useGridData)();
+    const dataState = (0, hooks_1.useGridDataState)();
+    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const view = (0, hooks_1.useSelectedView)();
+    const tableWrapperRef = (0, react_1.useRef)(null);
+    const { direction } = (0, locale_1.useLocale)();
+    const dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    const uniqueRecords = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = data === null || data === void 0 ? void 0 : data.records.map((record) => (Object.assign(Object.assign({}, record), { __uuid: (0, uuid_1.v4)() })))) !== null && _a !== void 0 ? _a : fallbackData);
+    }, [data === null || data === void 0 ? void 0 : data.records]);
+    const rows = uniqueRecords;
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => { var _a, _b; return (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement; },
+        estimateSize: () => 40,
+        overscan: 5,
+        enabled: true,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const virtualSize = virtualizer.getTotalSize();
+    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openFormInternal = (0, navigation_1.useOpenForm)();
+    const openRecord = (0, react_1.useCallback)((id) => {
+        var _a, _b;
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        openFormInternal({
+            logicalName: schema.logicalName,
+            id,
+        });
+    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
+                fetchNextPage();
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'relative',
+                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        width: '100%',
+                        height: virtualizer.getTotalSize(),
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: virtualItems.map((virtualRow) => {
+                                const row = rows[virtualRow.index];
+                                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                        width: '100%',
+                                        position: 'absolute',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, onClick: () => {
+                                        const id = row[schema.idAttribute];
+                                        openRecord(id);
+                                    }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) }, virtualRow.key));
+                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                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))) }))] }) }) }) }));
+};
+exports.GridListContainer = GridListContainer;

package/DataGrid/GridTableContainer.js

@@ -9,10 +9,12 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const icons_1 = require("@headless-adminapp/icons");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
+const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
@@ -84,6 +86,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         });
     }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const tableColumns = (0, useTableColumns_1.useTableColumns)({
@@ -177,71 +180,80 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const isScrolledToRight = ((_c = (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.scrollLeft) ===
         ((_g = (_f = (_e = (_d = tableWrapperRef.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.scrollWidth) !== null && _g !== void 0 ? _g : 0) -
             ((_l = (_k = (_j = (_h = tableWrapperRef.current) === null || _h === void 0 ? void 0 : _h.parentElement) === null || _j === void 0 ? void 0 : _j.parentElement) === null || _k === void 0 ? void 0 : _k.clientWidth) !== null && _l !== void 0 ? _l : 0);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    paddingInline: noPadding ? 0 : 8,
-                    position: 'relative',
-                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        borderCollapse: 'collapse',
-                        width: '100%',
-                        height: virtualizer.getTotalSize() + 33,
-                        ['--action-shadow']: !isScrolledToRight
-                            ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
-                            : 'none',
-                    }, ref: tableElementRef, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
-                                display: 'flex',
-                                position: 'sticky',
-                                top: 0,
-                                background: react_components_1.tokens.colorNeutralBackground3,
-                                zIndex: 2,
-                            }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        paddingInline: noPadding ? 0 : 8,
+                        position: 'relative',
+                    }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            borderCollapse: 'collapse',
+                            width: '100%',
+                            height: virtualizer.getTotalSize() + 33,
+                            ['--action-shadow']: !isScrolledToRight
+                                ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
+                                : 'none',
+                        }, ref: tableElementRef, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                                    display: 'flex',
                                     position: 'sticky',
                                     top: 0,
-                                    display: 'flex',
-                                    minWidth: 'calc(100% - 16px)',
-                                }, children: headerGroup.headers.map((header) => header.isPlaceholder
-                                    ? null
-                                    : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                transform: 'translateY(-33px)',
-                            }, children: virtualItems.map((virtualRow) => {
-                                const row = rows[virtualRow.index];
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                    background: react_components_1.tokens.colorNeutralBackground3,
+                                    zIndex: 2,
+                                }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        position: 'sticky',
+                                        top: 0,
                                         display: 'flex',
-                                        height: `${virtualRow.size}px`,
                                         minWidth: 'calc(100% - 16px)',
-                                        position: 'absolute',
-                                        transform: `translateY(${virtualRow.start}px)`,
-                                    }, onClick: () => {
-                                        setSelectedIdsRef.current(() => {
-                                            const id = row.original[schema.idAttribute];
-                                            return [id];
-                                        });
-                                    }, onDoubleClick: () => {
-                                        const id = row.original[schema.idAttribute];
-                                        openRecord(id);
-                                    }, children: row.getVisibleCells().map((cell) => (0, react_table_1.flexRender)(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
-                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                position: 'absolute',
-                                transform: `translateY(${virtualSize}px)`,
-                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                    }, children: headerGroup.headers.map((header) => header.isPlaceholder
+                                        ? null
+                                        : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
                                     display: 'flex',
-                                    height: 44,
-                                    alignItems: 'center',
-                                }, children: table.getAllColumns().map((column, index) => {
-                                    if (!column.getIsVisible())
-                                        return null;
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+                                    flexDirection: 'column',
+                                    transform: 'translateY(-33px)',
+                                }, children: virtualItems.map((virtualRow) => {
+                                    const row = rows[virtualRow.index];
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { className: (0, react_components_1.mergeClasses)(styles.root), style: {
                                             display: 'flex',
-                                            alignItems: 'center',
-                                            width: column.getSize(),
-                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, index));
-                                }) }, index))) }))] }) }) }) }));
+                                            height: `${virtualRow.size}px`,
+                                            minWidth: 'calc(100% - 16px)',
+                                            position: 'absolute',
+                                            transform: `translateY(${virtualRow.start}px)`,
+                                        }, onClick: () => {
+                                            setSelectedIdsRef.current(() => {
+                                                const id = row.original[schema.idAttribute];
+                                                return [id];
+                                            });
+                                        }, onDoubleClick: () => {
+                                            const id = row.original[schema.idAttribute];
+                                            openRecord(id);
+                                        }, children: row.getVisibleCells().map((cell) => (0, react_table_1.flexRender)(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
+                                }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    position: 'absolute',
+                                    transform: `translateY(${virtualSize}px)`,
+                                }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                        display: 'flex',
+                                        height: 44,
+                                        alignItems: 'center',
+                                    }, children: table.getAllColumns().map((column, index) => {
+                                        if (!column.getIsVisible())
+                                            return null;
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                width: column.getSize(),
+                                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, index));
+                                    }) }, index))) }))] }) }), (data === null || data === void 0 ? void 0 : data.records.length) === 0 && !dataState.isFetching && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        position: 'absolute',
+                        inset: 0,
+                        gap: react_components_1.tokens.spacingVerticalL,
+                        color: react_components_1.tokens.colorNeutralForeground3,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 64 }) }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: strings.noRecordsFound })] }))] }) }));
 };
 exports.GridTableContainer = GridTableContainer;

package/DataGrid/useTableColumns.js

@@ -45,7 +45,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
     const contextCommands = isSubgrid
         ? // eslint-disable-next-line react-hooks/rules-of-hooks
-            (0, hooks_1.useSubGridCommands)()
+            (0, hooks_1.useSubGridContextCommands)()
         : // eslint-disable-next-line react-hooks/rules-of-hooks
             (0, hooks_1.useMainGridContextCommands)();
     const mutableContextCommandState = (0, mutable_1.useMutableState)(contextCommands, true);

package/Insights/WidgetDataGridContainer.js

@@ -20,6 +20,9 @@ function WidgetDataGridContainer({ content, }) {
     if (!view) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
+    if (!schema) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,

package/Insights/WidgetTileContainer.js

@@ -1,11 +1,10 @@
 "use strict";
-'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetTileContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const WidgetTitleBar_1 = require("./WidgetTitleBar");
 const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const WidgetTitleBar_1 = require("./WidgetTitleBar");
 const WidgetTileContainer = ({ content, }) => {
     const { transformedCommands, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {

package/Insights/Widgets.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Widgets = Widgets;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const insights_1 = require("@headless-adminapp/app/insights");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const widget_1 = require("@headless-adminapp/app/widget");
@@ -21,12 +22,13 @@ const WidgetProvider = ({ children, widget, }) => {
             widget,
             data: widget.defaultData,
         });
-    }, [widget]);
+    }, [contextValue, widget]);
     return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
 };
 function Widgets({ widgets, }) {
+    const isMobile = (0, hooks_1.useIsMobile)();
     return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
-            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, index));
         }) }));
 }
 function WidgetItem() {

package/Insights/charts/index.js

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable unused-imports/no-unused-vars */
+// TODO: Remove eslint disable condition after finishing the implementation
 Object.defineProperty(exports, "__esModule", { value: true });
 // number format - decimal or currency
 // number format - number of decimals

package/Insights/charts/renderers.js

@@ -45,7 +45,7 @@ function renderLine(line, dataset) {
 function renderLines(lines, dataset) {
     return lines.map((line) => renderLine(line, dataset));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line unused-imports/no-unused-vars
 function renderArea(area, dataset) {
     return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, fill: area.color, strokeWidth: 1, dot: false, activeDot: {
             stroke: area.color,
@@ -55,7 +55,7 @@ function renderArea(area, dataset) {
 function renderAreas(areas, dataset) {
     return areas.map((area) => renderArea(area, dataset));
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line unused-imports/no-unused-vars
 function renderBar(bar, dataset) {
     return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { yAxisId: 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId }, bar.dataKey));
 }

package/PageEntityForm/RecordCard.js

@@ -52,7 +52,7 @@ function RecordCard({ schema, cardView, record, selected, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: _record[cardView.primaryColumn] }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((column) => {
+                }, 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;

package/PageEntityForm/RecordCardLoading.d.ts

@@ -0,0 +1,8 @@
+import { CardView } from '@headless-adminapp/core/experience/view';
+import { Schema, 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 {};

package/PageEntityForm/RecordCardLoading.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordCardLoading = RecordCardLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        paddingInline: react_components_1.tokens.spacingHorizontalL,
+        paddingBlock: react_components_1.tokens.spacingVerticalS,
+        gap: react_components_1.tokens.spacingHorizontalS,
+    },
+});
+function RecordCardLoading({ cardView }) {
+    var _a;
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { color: "neutral", style: { cursor: 'pointer' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    gap: react_components_1.tokens.spacingVerticalXXS,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { height: 16 } }) }), (_a = cardView.secondaryColumns) === null || _a === void 0 ? void 0 : _a.map((_, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 2 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16, style: { width: 160, height: 12 } }) }, index)))] })] }));
+}

package/PageEntityForm/SectionContainer.js

@@ -55,7 +55,11 @@ function SectionContainer({ section }) {
                 case 'quickview':
                     return null;
                 case 'subgrid':
-                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, associated: !control.associatedAttribute
+                    let ContainerComponent = null;
+                    if (control.component) {
+                        ContainerComponent = componentStore_1.componentStore.getComponent(control.component);
+                    }
+                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
                             ? false
                             : {
                                 logicalName: schema.logicalName,

package/PageEntityForm/SubgridControl.d.ts

@@ -8,6 +8,7 @@ interface SubgridControlProps {
         id: string;
         refAttributeName: string;
     };
+    ContainerComponent?: React.ComponentType<any> | null;
 }
 export declare function SubgridControl(props: SubgridControlProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/SubgridControl.js

@@ -8,7 +8,7 @@ const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const react_1 = require("react");
 const FormSubgridContainer_1 = require("../PageEntityView/FormSubgridContainer");
 function SubgridControl(props) {
-    var _a;
+    var _a, _b;
     const schema = (0, hooks_1.useSchema)(props.logicalName);
     const [viewId, setViewId] = (0, react_1.useState)(props.viewId);
     const { view, isLoadingView } = (0, hooks_1.useExperienceView)(props.logicalName, viewId, !!props.associated, props.availableViewIds);
@@ -62,5 +62,6 @@ function SubgridControl(props) {
         }
         return brokenContent;
     }
-    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: (_a = props.allowViewSelection) !== null && _a !== void 0 ? _a : false, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer_1.FormSubgridContainer, {}) }));
+    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, {}) }));
 }

package/PageEntityView/PageEntityView.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
 const icons_1 = require("@headless-adminapp/icons");
 const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
 const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
+const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer");
 const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
+    const isMobile = (0, hooks_1.useIsMobile)();
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
@@ -17,6 +20,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, commands, viewLookup, view } = result;
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: isMobile ? ((0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {})) : ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {})) }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewMobileContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityViewMobileContainer: FC;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+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 GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewMobileContainer = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { 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, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+};
+exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/PageEntityView/PageEntityViewStringContext.d.ts

@@ -17,6 +17,7 @@ export interface PageEntityViewStringSet {
     filter: string;
     clearFilter: string;
     filterBy: string;
+    noRecordsFound: string;
 }
 export declare const defaultPageEntityViewStrings: PageEntityViewStringSet;
 export declare const PageEntityViewStringContext: import("react").Context<PageEntityViewStringSet>;

package/PageEntityView/PageEntityViewStringContext.js

@@ -22,6 +22,7 @@ exports.defaultPageEntityViewStrings = {
     filter: 'Filter',
     sortByDescending: 'Sort by descending',
     filterBy: 'Filter by',
+    noRecordsFound: "We didn't find anything to show here",
 };
 exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
 function usePageEntityViewStrings() {

package/PageInsights/PageInsights.js

@@ -16,7 +16,7 @@ function createInsightLookup(insights) {
 function PageInsights({ insightId, insights, onChangeInsight, }) {
     const insightExpereince = (0, react_1.useMemo)(() => {
         return insights.find((insight) => insight.id === insightId);
-    }, [insightId]);
+    }, [insightId, insights]);
     const insightLookups = (0, react_1.useMemo)(() => createInsightLookup(insights), [insights]);
     if (!insightExpereince) {
         return null;

package/form/controls/TelephoneControl.d.ts

@@ -2,4 +2,4 @@ import { ControlProps } from './types';
 export interface TelephoneControlProps extends ControlProps<string> {
     autoComplete?: string;
 }
-export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }: TelephoneControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/TelephoneControl.js

@@ -4,10 +4,10 @@ exports.TelephoneControl = TelephoneControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoComplete, }) {
+function TelephoneControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, autoComplete, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "tel", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
         // invalid={error}
-        disabled: disabled, autoComplete: autoComplete, style: {
+        readOnly: disabled || readOnly, autoComplete: autoComplete, style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 

package/form/controls/TextAreaControl.d.ts

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

package/form/controls/TextAreaControl.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaControl = TextAreaControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, rows = 5, textTransform, }) {
+function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFocus, disabled, readOnly, rows = 5, textTransform, }) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => {
             textTransform === 'uppercase'
                 ? onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value.toUpperCase())
@@ -12,5 +12,5 @@ function TextAreaControl({ value, onChange, id, name, placeholder, onBlur, onFoc
                     : onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
         }, onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
         // error={error}
-        disabled: disabled, rows: rows }));
+        readOnly: disabled || readOnly, rows: rows }));
 }

package/form/controls/UrlControl.d.ts

@@ -1,4 +1,4 @@
 import { ControlProps } from './types';
 export interface UrlControlProps extends ControlProps<string> {
 }
-export declare function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, }: UrlControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }: UrlControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/UrlControl.js

@@ -4,10 +4,10 @@ exports.UrlControl = UrlControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
-function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, }) {
+function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, readOnly, }) {
     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 === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
         // invalid={error}
-        disabled: disabled, autoComplete: "off", style: {
+        readOnly: disabled || readOnly, autoComplete: "off", style: {
             width: '100%',
             paddingRight: react_components_1.tokens.spacingHorizontalXS,
         }, 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.38",
+  "version": "0.0.17-alpha.40",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "cf5abc4c56618fcc873bd31e3a26a84a9509edfa"
+  "gitHead": "5141e4c378ed0b2aac011927e4d6c10c797624e0"
 }

package/types/index.d.ts

@@ -39,6 +39,7 @@ declare module '@headless-adminapp/icons/types' {
         Copy: Icon;
         Document: Icon;
         Image: Icon;
+        Checkmark: Icon;
     }
 }
 export {};