@ceed/ads 1.27.0 → 1.28.1

package/dist/index.cjs

@@ -2319,7 +2319,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: {
@@ -2334,6 +2335,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`;
@@ -2343,6 +2345,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);
@@ -2930,7 +2933,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);
@@ -2993,7 +2996,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,
@@ -3067,7 +3076,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),
@@ -4033,9 +4046,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
@@ -4079,6 +4098,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);
@@ -4370,6 +4391,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

@@ -2079,7 +2079,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", {
@@ -2185,7 +2185,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: {
@@ -2200,6 +2201,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`;
@@ -2209,6 +2211,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);
@@ -2656,7 +2659,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;
@@ -2730,7 +2733,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,
@@ -2805,7 +2808,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);
@@ -2868,7 +2871,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,
@@ -2942,7 +2951,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),
@@ -3908,9 +3921,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
@@ -3954,6 +3973,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);
@@ -4245,6 +4266,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];
@@ -5345,7 +5378,7 @@ CurrencyRange.displayName = "CurrencyRange";
 
 // src/components/FilterMenu/components/PercentageInput.tsx
 import React38 from "react";
-import { Stack as Stack8, Typography as Typography4 } from "@mui/joy";
+import { Stack as Stack8, Typography as Typography5 } from "@mui/joy";
 
 // src/components/PercentageInput/PercentageInput.tsx
 import React37, { useCallback as useCallback21, useMemo as useMemo14, useState as useState13 } from "react";
@@ -5480,7 +5513,7 @@ var PercentageInput3 = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography4, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement(Stack8, { spacing: 3, role: "group", "aria-labelledby": id }, !!label && /* @__PURE__ */ React38.createElement(Typography5, { id, level: "title-sm", component: "label", textColor: "text.tertiary" }, label), /* @__PURE__ */ React38.createElement(
     PercentageInput,
     {
       value: _value,