@headless-adminapp/fluent 1.4.16 → 1.4.17

package/Insights/WidgetChartContainer.d.ts

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

package/Insights/WidgetChartContainer.js

@@ -68,7 +68,7 @@ function getChartComponent(chart) {
     }
 }
 const WidgetChart = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: props.title, commands: props.commands }), (0, jsx_runtime_1.jsx)(WidgetChartBody, { dataset: props.dataset, chartInfo: props.chartInfo, isFetching: props.isFetching, isPending: props.isPending })] }));
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: props.title, subtitle: props.subtitle, commands: props.commands, rightContent: props.rightContent }), (0, jsx_runtime_1.jsx)(WidgetChartBody, { dataset: props.dataset, chartInfo: props.chartInfo, isFetching: props.isFetching, isPending: props.isPending })] }));
 };
 exports.WidgetChart = WidgetChart;
 const WidgetChartBody = ({ isFetching, isPending, chartInfo, dataset, }) => {

package/Insights/WidgetDataGridContainer.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetDataGridContainer = WidgetDataGridContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
 const command_1 = require("@headless-adminapp/app/command");
 const hooks_1 = require("@headless-adminapp/app/command/hooks");
 const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
 const hooks_2 = require("@headless-adminapp/app/datagrid/hooks");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
+const BodyLoading_1 = require("../components/BodyLoading");
 const DataGrid_1 = require("../DataGrid");
+const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
 /*** @deprecated Need refactoring */
 function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }) {
@@ -17,23 +18,15 @@ function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, ti
     const { commands: contextCommands } = (0, hooks_3.useExperienceViewCommands)(logicalName);
     view ??= _view;
     if (!view && isLoadingView) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
+        return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, {}) }) }));
     }
     if (!view) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "View not found" });
+        return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: "View not found" }) }));
     }
     if (!schema) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
+        return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: "Schema not found" }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            flex: 1,
-            background: react_components_1.tokens.colorNeutralBackground1,
-            boxShadow: react_components_1.tokens.shadow2,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
-            // padding: tokens.spacingHorizontalM,
-            flexDirection: 'column',
-        }, children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: contextCommands, allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands, allowContextMenu: allowContextMenu }) }) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: contextCommands, allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands, allowContextMenu: allowContextMenu }) }));
 }
 const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
     const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
@@ -42,12 +35,7 @@ const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
         ...baseCommandHandleContext,
         primaryControl,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,
                     display: 'flex',
                     flexDirection: 'column',

package/Insights/WidgetSection.d.ts

@@ -1,2 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const WidgetSection: FC<PropsWithChildren>;
+interface WidgetSectionProps {
+    style?: React.CSSProperties;
+}
+export declare const WidgetSection: FC<PropsWithChildren<WidgetSectionProps>>;
+export {};

package/Insights/WidgetSection.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const WidgetSection = ({ children }) => {
+const WidgetSection = ({ children, style, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
+            flexDirection: 'column',
             background: react_components_1.tokens.colorNeutralBackground1,
-            boxShadow: 'none',
+            ...style,
             borderRadius: react_components_1.tokens.borderRadiusXLarge,
-            flexDirection: 'column',
             overflow: 'hidden',
+            boxShadow: 'none',
+            position: 'relative',
         }, children: children }));
 };
 exports.WidgetSection = WidgetSection;

package/Insights/WidgetTitleBar.d.ts

@@ -1,8 +1,9 @@
 import { CommandItemState } from '@headless-adminapp/app/command';
 interface WidgetTitleBarProps {
     title: string;
+    subtitle?: string;
     commands?: CommandItemState[][];
     rightContent?: React.ReactNode;
 }
-export declare function WidgetTitleBar({ title, commands, rightContent, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetTitleBar({ title, subtitle, commands, rightContent, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetTitleBar.js

@@ -9,7 +9,7 @@ const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function WidgetTitleBar({ title, commands, rightContent, }) {
+function WidgetTitleBar({ title, subtitle, commands, rightContent, }) {
     const { language } = (0, locale_1.useLocale)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
@@ -17,5 +17,5 @@ function WidgetTitleBar({ title, commands, rightContent, }) {
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { style: { flexShrink: 0 }, children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), rightContent, !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { align: "end", children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flexShrink: 0, display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption2, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: subtitle })] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), rightContent, !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { align: "end", children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "6a07ecfa5a139983b9b86ceea1acb10ce834d01a"
+  "gitHead": "a5a471cce4df9e87552b23e3de8c90d53e4adf43"
 }