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

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/TableCell/TableCellChoice.d.ts

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

package/DataGrid/TableCell/TableCellChoice.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellChoice = TableCellChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const TableCellBase_1 = require("./TableCellBase");
+function isColorDark(color) {
+    const rgb = parseInt(color, 16);
+    const r = (rgb >> 16) & 0xff;
+    const g = (rgb >> 8) & 0xff;
+    const b = (rgb >> 0) & 0xff;
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luma < 128;
+}
+function TableCellChoice(props) {
+    const bgColor = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!props.value || !props.attribute.options) {
+            return;
+        }
+        return (_a = props.attribute.options.find((option) => option.value === props.value)) === null || _a === void 0 ? void 0 : _a.color;
+    }, [props.formattedValue]);
+    const color = (0, react_1.useMemo)(() => {
+        if (!bgColor) {
+            return;
+        }
+        return isColorDark(bgColor) ? '#FFFFFF' : '#000000';
+    }, [bgColor]);
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width: props.width,
+            minWidth: props.width,
+            maxWidth: props.width,
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "small", style: { backgroundColor: bgColor, color }, children: props.formattedValue }) }));
+}

package/DataGrid/types.d.ts

@@ -0,0 +1,5 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
+    __uuid: string;
+};

package/DataGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/useTableColumns.d.ts

@@ -1,8 +1,4 @@
-import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
-export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
-    __uuid: string;
-};
+import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;

package/DataGrid/useTableColumns.js

@@ -21,6 +21,7 @@ const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
 const ActionCell_1 = require("./ActionCell");
+const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -74,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 } = (0, locale_1.useLocale)();
+    const { currency, dateFormats, timezone, timeFormats } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -206,14 +207,18 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                     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 }));
+                        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({
@@ -247,6 +252,8 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                                 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));
                 },
@@ -260,6 +267,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         columnWidths,
         currency.currency,
         dateFormats.short,
+        timeFormats.short,
         disableColumnFilter,
         disableColumnResize,
         disableColumnSort,

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.41",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "2bfa7d267f5fa6beb476fda508c43661444dc894"
+  "gitHead": "2feaed5c73b0732b74518d37af5b5f26925e89d8"
 }