@headless-adminapp/fluent 1.0.3 → 1.1.0

package/DataGrid/GridListContainer.js

@@ -74,14 +74,18 @@ const GridListContainer = () => {
                                 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: {
+                                return ((0, jsx_runtime_1.jsxs)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, 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));
+                                    }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                                width: '100%',
+                                                cursor: 'pointer',
+                                                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                                            }, 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',

package/DataGrid/GridTableContainer.d.ts

@@ -7,6 +7,8 @@ interface GridTableContainerProps {
     disableColumnReorder?: boolean;
     disableColumnFilter?: boolean;
     noPadding?: boolean;
+    headerHeight?: number;
+    rowHeight?: number;
 }
 export declare const GridTableContainer: FC<GridTableContainerProps>;
 export {};

package/DataGrid/GridTableContainer.js

@@ -16,17 +16,19 @@ 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 constants_1 = require("./constants");
 const useTableColumns_1 = require("./useTableColumns");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         '[aria-selected="true"]': {
-            background: react_components_1.tokens.colorBrandBackground2,
+            background: react_components_1.tokens.colorSubtleBackgroundHover,
             '& .fui-TableSelectionCell': {
                 background: 'inherit',
             },
             '& .tableCellAction': {
                 background: 'inherit',
+                opacity: 1,
             },
         },
         '&:hover': {
@@ -36,16 +38,30 @@ const useStyles = (0, react_components_1.makeStyles)({
             },
             '& .tableCellAction': {
                 background: 'inherit !important',
+                opacity: 1,
+                '& > button': {
+                    opacity: 1,
+                },
             },
         },
         '& .tableCellAction': {
             background: react_components_1.tokens.colorNeutralBackground1,
+            opacity: 0,
+            '& > button': {
+                opacity: 0,
+                '[aria-expanded="true"],&:hover': {
+                    opacity: 1,
+                },
+            },
         },
         borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
         '& .fui-TableCell': {
         // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
         // borderBottom: 'none !important',
         },
+        '&:last-of-type': {
+            borderBottom: 'none',
+        },
     },
     selectionCell: {
         position: 'sticky',
@@ -56,7 +72,6 @@ const useStyles = (0, react_components_1.makeStyles)({
         alignItems: 'center',
     },
     table: {
-        color: 'yellow',
         '&:after': {
             content: ' ',
             display: 'block',
@@ -65,7 +80,7 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const fallbackData = [];
-const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, }) => {
+const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, headerHeight = constants_1.DEFAULT_TABLE_HEADER_HEIGHT, rowHeight = constants_1.DEFAULT_TABLE_ROW_HEIGHT, }) => {
     const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();
@@ -76,6 +91,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
     const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
     setSelectedIdsRef.current = setSelectedIds;
+    const [isScrolled, setIsScrolled] = (0, react_1.useState)(false);
     const sortingState = (0, react_1.useMemo)(() => {
         return sorting.map((sort) => ({
             id: sort.field,
@@ -146,9 +162,9 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const virtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
         getScrollElement: () => tableWrapperRef.current?.parentElement?.parentElement,
-        estimateSize: () => 44,
+        estimateSize: () => rowHeight,
         overscan: 30,
-        paddingStart: 33,
+        paddingStart: headerHeight,
     });
     const tableElementRef = (0, react_1.useRef)(null);
     const virtualItems = virtualizer.getVirtualItems();
@@ -158,12 +174,13 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const handlePseudoResize = (0, react_1.useCallback)(() => {
         return (0, utils_1.adjustTableHeight)(tableElementRef, virtualSize);
     }, [virtualSize]);
-    // callback to handle scrolling, checking if we are near the bottom
+    // callback to handle scrolling, checking if we are near the bottom or top
     const handleScroll = (0, react_1.useCallback)(() => {
         if (tableWrapperRef.current?.parentElement?.parentElement) {
             const scrollPosition = tableWrapperRef.current?.parentElement?.parentElement?.scrollTop;
             const visibleHeight = tableWrapperRef.current?.parentElement?.parentElement?.clientHeight;
             setIsScrollNearBottom(scrollPosition > virtualSize * 0.95 - visibleHeight);
+            setIsScrolled(scrollPosition > 0);
         }
     }, [virtualSize]);
     // add an event listener on the scrollable parent container and resize the
@@ -188,17 +205,18 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
     const isScrolledToRight = tableWrapperRef.current?.parentElement?.parentElement?.scrollLeft ===
         (tableWrapperRef.current?.parentElement?.parentElement?.scrollWidth ?? 0) -
             (tableWrapperRef.current?.parentElement?.parentElement?.clientWidth ?? 0);
+    const hPadding = noPadding ? 0 : 8;
     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?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
             }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        paddingInline: noPadding ? 0 : 8,
+                        paddingInline: hPadding,
                         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,
+                            height: virtualizer.getTotalSize() + headerHeight,
                             ['--action-shadow']: !isScrolledToRight
                                 ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
                                 : 'none',
@@ -208,12 +226,18 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                     top: 0,
                                     background: react_components_1.tokens.colorNeutralBackground1,
                                     zIndex: 2,
+                                    boxShadow: isScrolled && noPadding ? react_components_1.tokens.shadow2 : 'none',
                                 }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
                                         position: 'sticky',
                                         top: 0,
                                         display: 'flex',
-                                        minWidth: 'calc(100% - 16px)',
-                                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                                        minWidth: 'calc(100%)',
+                                        borderBottomColor: isScrolled && noPadding
+                                            ? 'transparent'
+                                            : react_components_1.tokens.colorNeutralStroke3,
+                                        borderBottomStyle: 'solid',
+                                        borderBottomWidth: react_components_1.tokens.strokeWidthThin,
+                                        height: headerHeight,
                                     }, children: headerGroup.headers.map((header) => header.isPlaceholder
                                         ? null
                                         : (0, react_table_1.flexRender)(header.column.columnDef.header, {
@@ -222,13 +246,13 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                         })) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
-                                    transform: 'translateY(-33px)',
+                                    transform: `translateY(-${headerHeight}px)`,
                                 }, children: virtualItems.map((virtualRow) => {
                                     const row = rows[virtualRow.index];
                                     return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { "aria-selected": row.getIsSelected(), className: (0, react_components_1.mergeClasses)(styles.root), style: {
                                             display: 'flex',
                                             height: `${virtualRow.size}px`,
-                                            minWidth: 'calc(100% - 16px)',
+                                            minWidth: `calc(100% - ${hPadding * 2}px)`,
                                             position: 'absolute',
                                             transform: `translateY(${virtualRow.start}px)`,
                                         }, onClick: () => {
@@ -250,7 +274,7 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                     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,
+                                        height: rowHeight,
                                         alignItems: 'center',
                                     }, children: table.getAllColumns().map((column) => {
                                         if (!column.getIsVisible())

package/DataGrid/TableCell/TableCellAction.js

@@ -26,10 +26,11 @@ const TableCellAction = ({ items, onOpen, }) => {
             right: 0,
             // top: 0,
             zIndex: 1,
+            height: '100%',
             justifyContent: 'right',
             // background: 'white',
             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+            // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
         }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
                             // background: 'white',
                             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',

package/DataGrid/TableCell/TableCellBase.js

@@ -7,6 +7,7 @@ const TableCellBase = ({ children, onClick, style, }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { onClick: onClick, style: {
             display: 'flex',
             alignItems: 'center',
+            height: '100%',
             // borderBottom: `var(--strokeWidthThin) solid var(--colorNeutralStroke2)`,
             ...style,
         }, children: children }));

package/DataGrid/TableCell/TableCellLink.js

@@ -16,6 +16,7 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
+            height: '100%',
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
                 if (target === '_blank') {
                     return;

package/DataGrid/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_TABLE_HEADER_HEIGHT = 40;
+export declare const DEFAULT_TABLE_ROW_HEIGHT = 40;

package/DataGrid/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TABLE_ROW_HEIGHT = exports.DEFAULT_TABLE_HEADER_HEIGHT = void 0;
+exports.DEFAULT_TABLE_HEADER_HEIGHT = 40; // 33
+exports.DEFAULT_TABLE_ROW_HEIGHT = 40; // 44

package/DataGrid/useTableColumns.js

@@ -61,13 +61,28 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         const { columns: calculatedColumns } = (0, utils_1.calculateColumnWidths)({
             availableWidth,
             gapWidth: 0,
-            columns: columns.map((column) => ({
-                width: column.width ?? 100,
-                maxWidth: column.maxWidth ?? 1000,
-            })),
+            columns: columns.map((column) => {
+                const attribute = schema.attributes[column.name];
+                let defaultMaxWidth = 1000;
+                if (attribute.type === 'date') {
+                    if (attribute.format === 'datetime') {
+                        defaultMaxWidth = 200;
+                    }
+                    else {
+                        defaultMaxWidth = 100;
+                    }
+                }
+                else if (attribute.type === 'money') {
+                    defaultMaxWidth = 150;
+                }
+                return {
+                    width: column.width ?? 100,
+                    maxWidth: column.maxWidth ?? defaultMaxWidth,
+                };
+            }),
         });
         return calculatedColumns;
-    }, [columns, tableWrapperSize.width]);
+    }, [columns, tableWrapperSize.width, schema.attributes]);
     const gridColumns = (0, hooks_1.useGridColumns)();
     const routeResolver = (0, hooks_5.useRouteResolver)();
     const router = (0, hooks_5.useRouter)();
@@ -105,7 +120,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         top: 0,
                         // zIndex: 1,
                         background: react_components_1.tokens.colorNeutralBackground1,
-                        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+                        // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
                     }, children: "\u00A0" })),
                 cell: (info) => ((0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { onOpen: () => {
                         const id = info.row.original[schema.idAttribute];
@@ -157,6 +172,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         width: 32,
                         maxWidth: 32,
                         minWidth: 32,
+                        alignItems: 'center',
                     }, onClick: toggleAllSelectedIds })),
                 cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
                         event.preventDefault();
@@ -289,6 +305,7 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
     }
     switch (attribute?.type) {
         case 'money':
+        case 'number':
             return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
         case 'lookup': {
             return renderLookupAttribute({

package/Insights/CommandBarContainer.js

@@ -9,7 +9,7 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
 function CommandBarContainer() {
     const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
-    const insightExpereince = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (x) => x.experience);
+    const insightExpereince = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (x) => x.config);
     const transformedCommands = (0, command_1.useCommands)([insightExpereince.commands], {
         ...baseCommandHandleContext,
         primaryControl: {},

package/Insights/FilterBarContainer.js

@@ -12,16 +12,16 @@ const OverflowCommandBar_1 = require("../OverflowCommandBar");
 function FilterBarContainer() {
     const openPromptDialog = (0, hooks_1.useOpenPromptDialog)();
     const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
-    const insightExpereince = insightsState.experience;
+    const insightExpereince = insightsState.config;
     const setValue = (0, mutable_1.useContextSetValue)(insights_1.InsightsContext);
     const handleOpenPromptDialog = async () => {
         const attributes = insightExpereince.filters.reduce((acc, item) => {
             acc[item.logicalName] =
-                insightsState.experience.attributes[item.logicalName];
+                insightsState.config.filterAttributes[item.logicalName];
             return acc;
         }, {});
         const defaultValues = insightExpereince.filters.reduce((acc, item) => {
-            acc[item.logicalName] = insightsState.data[item.logicalName];
+            acc[item.logicalName] = insightsState.filterValues[item.logicalName];
             return acc;
         }, {});
         const result = await openPromptDialog({
@@ -34,14 +34,14 @@ function FilterBarContainer() {
             return;
         }
         setValue({
-            data: result,
+            filterValues: result,
         });
     };
     const filterCommandItems = insightExpereince.filters
         .map((item) => {
         const logicalName = item.logicalName;
-        const value = insightsState.data[logicalName];
-        const attribute = insightsState.experience.attributes[logicalName];
+        const value = insightsState.filterValues[logicalName];
+        const attribute = insightsState.config.filterAttributes[logicalName];
         if (!item.showInFilterBar) {
             return null;
         }
@@ -68,8 +68,8 @@ function FilterBarContainer() {
                         return;
                     }
                     setValue({
-                        data: {
-                            ...insightsState.data,
+                        filterValues: {
+                            ...insightsState.filterValues,
                             [logicalName]: result[logicalName],
                         },
                     });

package/Insights/Grid.d.ts

@@ -1,6 +1,12 @@
-import { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 export declare function WidgetGrid({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+interface WidgetGridGroupProps {
+    column?: number;
+    row?: number;
+}
+export declare const WidgetGridGroup: FC<PropsWithChildren<WidgetGridGroupProps>>;
 export declare function WidgetGridItem({ column, row, children, }: PropsWithChildren<{
     column?: number;
     row?: number;
 }>): import("react/jsx-runtime").JSX.Element;
+export {};

package/Insights/Grid.js

@@ -1,26 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetGridGroup = void 0;
 exports.WidgetGrid = WidgetGrid;
 exports.WidgetGridItem = WidgetGridItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-function WidgetGrid({ children }) {
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const Grid = ({ children, column = 12, gap, }) => {
+    const gridTemplateColumns = (0, react_1.useMemo)(() => Array.from({ length: column }, () => '1fr').join(' '), [column]);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            padding: react_components_1.tokens.spacingHorizontalM,
             width: '100%',
-            // flex: 1,
             display: 'grid',
-            gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr',
-            rowGap: react_components_1.tokens.spacingVerticalM,
-            columnGap: react_components_1.tokens.spacingHorizontalM,
+            gridTemplateColumns,
+            rowGap: gap,
+            columnGap: gap,
         }, children: children }));
+};
+function WidgetGrid({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            padding: constants_1.GAP,
+            width: '100%',
+        }, children: (0, jsx_runtime_1.jsx)(Grid, { column: 12, gap: constants_1.GAP, children: children }) }));
 }
+const WidgetGridGroup = ({ children, column = 12, row = 1, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gridColumn: column ? `span ${column}` : undefined,
+            gridRow: row ? `span ${row}` : undefined,
+        }, children: (0, jsx_runtime_1.jsx)(Grid, { column: column, gap: constants_1.GAP, children: children }) }));
+};
+exports.WidgetGridGroup = WidgetGridGroup;
 function WidgetGridItem({ column, row, children, }) {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             gridColumn: column ? `span ${column}` : undefined,
             gridRow: row ? `span ${row}` : undefined,
-            height: row ? 100 * row + 12 * (row - 1) : 100,
+            height: row ? constants_1.ROW_HEIGHT * row + constants_1.ROW_GAP * (row - 1) : constants_1.ROW_HEIGHT,
         }, children: children }));
 }

package/Insights/Header.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface HeaderProps {
+    isScrolled: boolean;
+}
+export declare const Header: FC<HeaderProps>;
+export {};

package/Insights/Header.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const insights_1 = require("@headless-adminapp/app/insights");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const StandardControl_1 = require("../PageEntityForm/StandardControl");
+const Header = () => {
+    const config = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state.config);
+    const eventManager = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state.eventManager);
+    const filterForm = (0, react_hook_form_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            // background: tokens.colorNeutralBackground1,
+            // borderRadius: tokens.borderRadiusLarge,
+            paddingBlock: react_components_1.tokens.spacingVerticalM,
+            paddingInline: react_components_1.tokens.spacingHorizontalXL, // spacingMapping[insightsState.style?.spacing ?? 'normal'],
+            gap: react_components_1.tokens.spacingVerticalS,
+            // borderRadius: radiusMapping[insightsState.style?.radius ?? 'normal'],
+            // boxShadow: tokens.shadow2,
+            // boxShadow: isScrolled ? tokens.shadow2 : 'none',
+            // backgroundColor: isScrolled
+            //   ? tokens.colorNeutralBackground1
+            //   : 'transparent',
+            // backdropFilter: isScrolled ? 'blur(15px)' : 'none',
+            boxShadow: react_components_1.tokens.shadow4,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            // backdropFilter: 'blur(20px)',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: react_components_1.tokens.spacingHorizontalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: "Dashboard for insights" })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: react_components_1.tokens.spacingHorizontalS,
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, onClick: () => {
+                                eventManager.emit('INSIGHT_REFRESH_TRIGGER');
+                            }, children: "Refresh" }) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
+                            return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {
+                                    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) }));
+                                } }, attributeName));
+                        }) })] }))] }));
+};
+exports.Header = Header;

package/Insights/InsightsContainer.js

@@ -6,30 +6,35 @@ const react_components_1 = require("@fluentui/react-components");
 const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 const insights_1 = require("@headless-adminapp/app/insights");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const CommandBarContainer_1 = require("./CommandBarContainer");
-const FilterBarContainer_1 = require("./FilterBarContainer");
+const react_1 = require("react");
+const Header_1 = require("./Header");
 const Widgets_1 = require("./Widgets");
 function InsightsContainer() {
-    const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
-    const insightExpereince = insightsState.experience;
-    const titleButton = ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: { pointerEvents: 'auto' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: insightExpereince.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: insightExpereince.subtitle })] }) }));
+    const config = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state.config);
+    const [isScrolled, setIsScrolled] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             backgroundColor: react_components_1.tokens.colorNeutralBackground2,
             overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        background: react_components_1.tokens.colorNeutralBackground1,
-                        boxShadow: react_components_1.tokens.shadow2,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
-                        display: 'flex',
-                        alignItems: 'center',
-                        minHeight: 40,
-                    }, children: [(0, jsx_runtime_1.jsx)(CommandBarContainer_1.CommandBarContainer, {}), (0, jsx_runtime_1.jsx)(FilterBarContainer_1.FilterBarContainer, {})] }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 12 }, children: insightsState.insightLookup.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: titleButton }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: insightsState.insightLookup.map((insight) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => insightsState.onInsightSelect(insight.id), children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: insight.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption2, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: insight.subtitle })] }) }, insight.id))) }) })] })) : (titleButton) }), (0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    // padding: spacingMapping[insightExpereince.style?.spacing ?? 'normal'],
+                    // paddingBottom: 0,
+                    // boxShadow: isScrolled ? tokens.shadow2 : 'none',
+                    // backgroundColor: isScrolled
+                    //   ? tokens.colorNeutralBackground1
+                    //   : 'transparent',
+                    zIndex: 1,
+                    position: 'sticky',
+                    top: 0,
+                }, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { isScrolled: isScrolled }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
                     overflow: 'hidden',
-                }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { children: (0, jsx_runtime_1.jsx)(Widgets_1.Widgets, { widgets: insightExpereince.widgets }) }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { onScroll: (event) => {
+                        const div = event.target;
+                        setIsScrolled(div.scrollTop > 0);
+                    }, children: (0, jsx_runtime_1.jsx)(Widgets_1.Widgets, { widgets: config.widgets }) }) })] }));
 }

package/Insights/WidgetChartContainer.d.ts

@@ -1,7 +1,17 @@
-import { ChartWidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { CommandItemState } from '@headless-adminapp/app/command';
+import { ChartInfo } from '@headless-adminapp/core/experience/insights';
 import { FC } from 'react';
+export type ChartComponentProps = {
+    dataset: any[];
+    chartInfo: any;
+};
 interface WidgetChartContainerProps {
-    content: ChartWidgetExperience;
+    title: string;
+    commands?: CommandItemState[][];
+    dataset: any[];
+    chartInfo: ChartInfo;
+    isPending?: boolean;
+    isFetching?: boolean;
 }
-export declare const WidgetChartContainer: FC<WidgetChartContainerProps>;
+export declare const WidgetChart: FC<WidgetChartContainerProps>;
 export {};