@ceed/cds 1.26.0 → 1.27.1

package/dist/index.cjs

@@ -2321,7 +2321,8 @@ 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 Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.createElement(
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.Typography, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
+var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ import_react19.default.createElement(
   Box_default,
   {
     sx: {
@@ -2336,6 +2337,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.c
     onMouseDown: (e) => {
       const initialX = e.clientX;
       const initialWidth = ref.current?.getBoundingClientRect().width;
+      onResizeStateChange?.(true);
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
@@ -2345,6 +2347,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.c
       const onMouseUp = () => {
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
+        requestAnimationFrame(() => onResizeStateChange?.(false));
       };
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
@@ -2932,7 +2935,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = (0, import_react24.useRef)(null);
@@ -2995,7 +2998,13 @@ var HeadCell = (props) => {
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = (0, import_react24.useMemo)(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
+  const isResizingRef = (0, import_react24.useRef)(false);
+  const resizer = (0, import_react24.useMemo)(
+    () => resizable ?? true ? Resizer(ref, colRef, (isResizing) => {
+      isResizingRef.current = isResizing;
+    }) : null,
+    [resizable, ref, colRef]
+  );
   const style = (0, import_react24.useMemo)(
     () => ({
       width,
@@ -3069,7 +3078,11 @@ var HeadCell = (props) => {
       key: field,
       style,
       onClick: (0, import_react24.useCallback)(
-        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        (e) => {
+          if (isResizingRef.current) return;
+          if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+          sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey });
+        },
         [field, onSortChange, sort, sortable]
       ),
       onMouseEnter: () => setIsHovered(true),
@@ -4035,9 +4048,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 +4100,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 +4393,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,7 +2195,8 @@ var StyledTd = styled8("td")(({ theme }) => ({
 }));
 var MotionSortIcon = motion17(SortIcon);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
-var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
+var DefaultNoRowsOverlay = () => /* @__PURE__ */ React17.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
+var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
     sx: {
@@ -2210,6 +2211,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
     onMouseDown: (e) => {
       const initialX = e.clientX;
       const initialWidth = ref.current?.getBoundingClientRect().width;
+      onResizeStateChange?.(true);
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
@@ -2219,6 +2221,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
       const onMouseUp = () => {
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
+        requestAnimationFrame(() => onResizeStateChange?.(false));
       };
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
@@ -2666,7 +2669,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 +2743,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,
@@ -2815,7 +2818,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef5(null);
@@ -2878,7 +2881,13 @@ var HeadCell = (props) => {
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = useMemo8(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
+  const isResizingRef = useRef5(false);
+  const resizer = useMemo8(
+    () => resizable ?? true ? Resizer(ref, colRef, (isResizing) => {
+      isResizingRef.current = isResizing;
+    }) : null,
+    [resizable, ref, colRef]
+  );
   const style = useMemo8(
     () => ({
       width,
@@ -2952,7 +2961,11 @@ var HeadCell = (props) => {
       key: field,
       style,
       onClick: useCallback9(
-        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        (e) => {
+          if (isResizingRef.current) return;
+          if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+          sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey });
+        },
         [field, onSortChange, sort, sortable]
       ),
       onMouseEnter: () => setIsHovered(true),
@@ -3918,9 +3931,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 +3983,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 +4276,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];