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

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/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

@@ -22,7 +22,7 @@ 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, }) {

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.39",
+  "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": "2bfa7d267f5fa6beb476fda508c43661444dc894"
+  "gitHead": "5141e4c378ed0b2aac011927e4d6c10c797624e0"
 }