@ceed/cds 1.26.0 → 1.27.0

package/dist/index.cjs

@@ -2321,6 +2321,7 @@ var StyledTd = (0, import_joy25.styled)("td")(({ theme }) => ({
 }));
 var MotionSortIcon = (0, import_framer_motion17.motion)(import_ArrowUpwardRounded.default);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.LinearProgress, { value: 8, variant: "plain" });
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.Typography, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
 var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.createElement(
   Box_default,
   {
@@ -4035,9 +4036,15 @@ function Component(props, apiRef) {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
       footer: Footer,
-      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay
+      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay,
+      noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
+    } = {},
+    slotProps: {
+      checkbox: checkboxProps = {},
+      toolbar: toolbarProps,
+      background: backgroundProps = {},
+      noRowsOverlay: noRowsOverlayProps = {}
     } = {},
-    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {} } = {},
     stripe,
     isTotalSelected: ___________,
     ...innerProps
@@ -4081,6 +4088,8 @@ function Component(props, apiRef) {
   const paginationModel = (0, import_react28.useMemo)(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const showNoRowsOverlay = !loading && rowCount === 0;
+  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
   const getRowClickHandler = (0, import_react28.useCallback)(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
@@ -4372,6 +4381,18 @@ function Component(props, apiRef) {
             /* @__PURE__ */ import_react28.default.createElement(LoadingOverlay, null)
           )
         )),
+        showNoRowsOverlay && /* @__PURE__ */ import_react28.default.createElement("tr", null, /* @__PURE__ */ import_react28.default.createElement("td", { colSpan: totalColCount, style: { border: "none" } }, /* @__PURE__ */ import_react28.default.createElement(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: "150px"
+            }
+          },
+          /* @__PURE__ */ import_react28.default.createElement(NoRowsOverlay, { ...noRowsOverlayProps })
+        ))),
         virtualizedItems.map((virtualizedRow, index) => {
           const rowIndex = virtualizedRow.index;
           const row = dataInPage[rowIndex];

package/dist/index.js

@@ -2089,7 +2089,7 @@ var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().form
 
 // src/components/DataTable/styled.tsx
 import React17 from "react";
-import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses } from "@mui/joy";
+import { styled as styled8, LinearProgress, buttonClasses, iconButtonClasses, Typography as Typography3 } from "@mui/joy";
 import { motion as motion17 } from "framer-motion";
 import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
 var EllipsisDiv = styled8("div", {
@@ -2195,6 +2195,7 @@ var StyledTd = styled8("td")(({ theme }) => ({
 }));
 var MotionSortIcon = motion17(SortIcon);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ React17.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
 var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
@@ -2666,7 +2667,7 @@ var Textarea_default = Textarea;
 
 // src/components/Select/Select.tsx
 import React20, { useMemo as useMemo7 } from "react";
-import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography3 } from "@mui/joy";
+import { Select as JoySelect, Option as JoyOption, ListItemContent as ListItemContent2, Typography as Typography4 } from "@mui/joy";
 import { motion as motion20 } from "framer-motion";
 var MotionOption = motion20(JoyOption);
 var Option = MotionOption;
@@ -2740,7 +2741,7 @@ function Select(props) {
         return optionMap.get(selected.value)?.label;
       }
     },
-    options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography3, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography3, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
+    options.map((option) => /* @__PURE__ */ React20.createElement(Option, { key: option.value, value: option.value, disabled: option.disabled }, option.secondaryText ? /* @__PURE__ */ React20.createElement(ListItemContent2, { sx: { gap: 0.5 } }, /* @__PURE__ */ React20.createElement(Typography4, { level: "inherit" }, option.label), /* @__PURE__ */ React20.createElement(Typography4, { level: secondaryTextLevelMap2[size ?? "md"], textColor: "text.tertiary" }, option.secondaryText)) : option.label))
   );
   return /* @__PURE__ */ React20.createElement(
     FormControl_default,
@@ -3918,9 +3919,15 @@ function Component(props, apiRef) {
       checkbox: RenderCheckbox = Checkbox_default,
       toolbar: Toolbar,
       footer: Footer,
-      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay
+      loadingOverlay: LoadingOverlay = DefaultLoadingOverlay,
+      noRowsOverlay: NoRowsOverlay = DefaultNoRowsOverlay
+    } = {},
+    slotProps: {
+      checkbox: checkboxProps = {},
+      toolbar: toolbarProps,
+      background: backgroundProps = {},
+      noRowsOverlay: noRowsOverlayProps = {}
     } = {},
-    slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {} } = {},
     stripe,
     isTotalSelected: ___________,
     ...innerProps
@@ -3964,6 +3971,8 @@ function Component(props, apiRef) {
   const paginationModel = useMemo10(() => ({ page, pageSize }), [page, pageSize]);
   const totalSize = virtualizer.getTotalSize();
   const virtualizedItems = virtualizer.getVirtualItems();
+  const showNoRowsOverlay = !loading && rowCount === 0;
+  const totalColCount = Math.max(1, columns.length + (checkboxSelection ? 1 : 0));
   const getRowClickHandler = useCallback12(
     (row, rowId) => (e) => {
       onRowClick?.({ row, rowId }, e);
@@ -4255,6 +4264,18 @@ function Component(props, apiRef) {
             /* @__PURE__ */ React25.createElement(LoadingOverlay, null)
           )
         )),
+        showNoRowsOverlay && /* @__PURE__ */ React25.createElement("tr", null, /* @__PURE__ */ React25.createElement("td", { colSpan: totalColCount, style: { border: "none" } }, /* @__PURE__ */ React25.createElement(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: "150px"
+            }
+          },
+          /* @__PURE__ */ React25.createElement(NoRowsOverlay, { ...noRowsOverlayProps })
+        ))),
         virtualizedItems.map((virtualizedRow, index) => {
           const rowIndex = virtualizedRow.index;
           const row = dataInPage[rowIndex];