@prt-ts/fluent-react-table-v2 9.48.0-build-1.1 → 9.48.0-build-1.2

package/index.cjs.js

@@ -169,23 +169,24 @@ const GroupExpandedIcon = reactIcons.bundleIcon(reactIcons.ChevronDownRegular, r
 reactIcons.bundleIcon(reactIcons.DragFilled, reactIcons.DragRegular);
 
 const useGridHeaderStyles = reactComponents.makeStyles({
-    tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: reactComponents.tokens.colorBrandBackground2Hover }, reactComponents.shorthands.padding("5px")),
+    tableTopHeaderContainer: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', width: '100%', backgroundColor: reactComponents.tokens.colorNeutralStroke2, boxShadow: reactComponents.tokens.shadow2 }, reactComponents.shorthands.padding('5px')), reactComponents.shorthands.borderBottom('1px', 'solid', reactComponents.tokens.colorNeutralStroke1)),
     tableTopHeaderLeft: {
-        display: "flex",
-        justifyContent: "flex-start",
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
     },
-    tableTopHeaderRight: Object.assign({ display: "flex", justifyContent: "flex-end" }, reactComponents.shorthands.gap("3px")),
+    tableTopHeaderRight: Object.assign(Object.assign({ display: 'flex', justifyContent: 'flex-end' }, reactComponents.shorthands.gap('3px')), { flexWrap: 'wrap' }),
     tableTopHeaderColumnTogglePopover: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        width: "100%",
-        height: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width: '100%',
+        height: '100%',
     },
     popoverSurface: {
-        minWidth: "300px"
-    }
+        minWidth: '300px',
+    },
 });
 
 const GridHeader = (props) => {
@@ -756,9 +757,9 @@ const useNoItemGridStyles = reactComponents.makeStyles({
     }
 });
 
-const NoItemGrid = ({ message }) => {
+const NoItemGrid = ({ message, }) => {
     const styles = useNoItemGridStyles();
-    return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx("div", { children: message ? message : jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No Data to Show." }) }) }));
+    return (jsxRuntime.jsx("div", { className: styles.wrapper, children: jsxRuntime.jsx(reactControlFlow.Show, { when: !!message, fallback: jsxRuntime.jsx(reactComponents.Subtitle2Stronger, { children: "No data to show." }), children: message }) }));
 };
 
 const useNoFilterMatchStyles = reactComponents.makeStyles({

package/index.esm.js

@@ -147,23 +147,24 @@ const GroupExpandedIcon = bundleIcon(ChevronDownRegular, ChevronDownFilled);
 bundleIcon(DragFilled, DragRegular);
 
 const useGridHeaderStyles = makeStyles({
-    tableTopHeaderContainer: Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", width: "100%", backgroundColor: tokens.colorBrandBackground2Hover }, shorthands.padding("5px")),
+    tableTopHeaderContainer: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', width: '100%', backgroundColor: tokens.colorNeutralStroke2, boxShadow: tokens.shadow2 }, shorthands.padding('5px')), shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStroke1)),
     tableTopHeaderLeft: {
-        display: "flex",
-        justifyContent: "flex-start",
+        display: 'flex',
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
     },
-    tableTopHeaderRight: Object.assign({ display: "flex", justifyContent: "flex-end" }, shorthands.gap("3px")),
+    tableTopHeaderRight: Object.assign(Object.assign({ display: 'flex', justifyContent: 'flex-end' }, shorthands.gap('3px')), { flexWrap: 'wrap' }),
     tableTopHeaderColumnTogglePopover: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-        width: "100%",
-        height: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width: '100%',
+        height: '100%',
     },
     popoverSurface: {
-        minWidth: "300px"
-    }
+        minWidth: '300px',
+    },
 });
 
 const GridHeader = (props) => {
@@ -734,9 +735,9 @@ const useNoItemGridStyles = makeStyles({
     }
 });
 
-const NoItemGrid = ({ message }) => {
+const NoItemGrid = ({ message, }) => {
     const styles = useNoItemGridStyles();
-    return (jsx("div", { className: styles.wrapper, children: jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No Data to Show." }) }) }));
+    return (jsx("div", { className: styles.wrapper, children: jsx(Show, { when: !!message, fallback: jsx(Subtitle2Stronger, { children: "No data to show." }), children: message }) }));
 };
 
 const useNoFilterMatchStyles = makeStyles({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.48.0-build-1.1",
+  "version": "9.48.0-build-1.2",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",

package/src/lib/components/no-item/NoItemGrid.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const NoItemGrid: React.FC<{
     message?: React.ReactNode;
 }>;