@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/List/ListContext.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, createContext, useState, useCallback, useMemo, useEffect } from "react";
 const ListContext = createContext(void 0);
 const checkStateOfCheckboxs = (ids) => {
@@ -26,71 +26,79 @@ const ListProvider = ({
   const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
   const [inRange, setInRange] = useState([]);
   const [refList, setRefList] = useState([]);
-  const registerExpandableRow = useCallback((rowId, expanded = false) => {
-    setExpandedRowIds((current) => ({
-      ...current,
-      [rowId]: expanded
-    }));
-    return () => {
-      setExpandedRowIds((current) => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
-        return otherIds;
-      });
-    };
-  }, []);
+  const registerExpandableRow = useCallback(
+    (rowId, expanded = false) => {
+      setExpandedRowIds((current) => ({ ...current, [rowId]: expanded }));
+      return () => {
+        setExpandedRowIds((current) => {
+          const { [rowId]: relatedId, ...otherIds } = current;
+          return otherIds;
+        });
+      };
+    },
+    []
+  );
   const registerSelectableRow = useCallback((rowId) => {
-    setSelectedRowIds((current) => ({
-      ...current,
-      [rowId]: false
-    }));
+    setSelectedRowIds((current) => ({ ...current, [rowId]: false }));
     return () => {
       setSelectedRowIds((current) => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
+        const { [rowId]: relatedId, ...otherIds } = current;
         return otherIds;
       });
     };
   }, []);
-  const expandRow = useCallback((rowId) => {
-    setExpandedRowIds((current) => ({
-      ...autoCollapse ? {} : current,
-      [rowId]: true
-    }));
-  }, [autoCollapse]);
+  const expandRow = useCallback(
+    (rowId) => {
+      setExpandedRowIds((current) => ({
+        ...autoCollapse ? {} : current,
+        [rowId]: true
+      }));
+    },
+    [autoCollapse]
+  );
   const collapseRow = useCallback((rowId) => {
     setExpandedRowIds((current) => ({
       ...current,
       [rowId]: false
     }));
   }, []);
-  const allRowSelectValue = useMemo(() => checkStateOfCheckboxs(selectedRowIds), [selectedRowIds]);
-  const selectRows = useCallback((rowIds, state) => {
-    const newSelectedRowIds = rowIds.reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: state
-    }), selectedRowIds);
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
+  const allRowSelectValue = useMemo(
+    () => checkStateOfCheckboxs(selectedRowIds),
+    [selectedRowIds]
+  );
+  const selectRows = useCallback(
+    (rowIds, state) => {
+      const newSelectedRowIds = rowIds.reduce(
+        (acc, rowId) => ({ ...acc, [rowId]: state }),
+        selectedRowIds
+      );
+      setSelectedRowIds(newSelectedRowIds);
+      if (onSelectedChange) {
+        onSelectedChange(
+          Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row])
+        );
+      }
+    },
+    [onSelectedChange, selectedRowIds]
+  );
   const selectAll = useCallback(() => {
     selectRows(Object.keys(selectedRowIds), true);
   }, [selectRows, selectedRowIds]);
   const unselectAll = useCallback(() => {
     selectRows(Object.keys(selectedRowIds), false);
   }, [selectRows, selectedRowIds]);
-  const selectRow = useCallback((rowId) => {
-    selectRows([rowId], true);
-  }, [selectRows]);
-  const unselectRow = useCallback((rowId) => {
-    selectRows([rowId], false);
-  }, [selectRows]);
+  const selectRow = useCallback(
+    (rowId) => {
+      selectRows([rowId], true);
+    },
+    [selectRows]
+  );
+  const unselectRow = useCallback(
+    (rowId) => {
+      selectRows([rowId], false);
+    },
+    [selectRows]
+  );
   const selectAllHandler = useCallback(() => {
     if (allRowSelectValue && [true, "indeterminate"].includes(allRowSelectValue)) {
       unselectAll();
@@ -102,12 +110,20 @@ const ListProvider = ({
   }, [allRowSelectValue, unselectAll, selectAll]);
   const subscribeHandler = useCallback(() => {
     const handlers = [];
-    const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+    const updatedRefList = [
+      ...new Set(
+        refList.filter(
+          (checkbox) => document.contains(checkbox.current) && checkbox.current
+        )
+      )
+    ];
     setRefList(updatedRefList);
     const handleHover = (index, isShiftPressed, leaving) => {
       const newRange = [];
       if (lastCheckedCheckbox) {
-        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const targetCheckbox = updatedRefList.find(
+          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
+        );
         if (isShiftPressed && targetCheckbox && !leaving) {
           const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
           const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
@@ -124,7 +140,9 @@ const ListProvider = ({
     const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
       if (isShiftPressed) {
         const checkboxesInRange = [];
-        const targetCheckbox = updatedRefList.find((checkbox) => checkbox.current?.value === lastCheckedCheckbox);
+        const targetCheckbox = updatedRefList.find(
+          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
+        );
         const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
         if (lastCheckedIndex !== void 0) {
           const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
@@ -156,8 +174,14 @@ const ListProvider = ({
         handlers.push(() => {
           if (checkbox.current) {
             checkbox.current.removeEventListener("click", clickHandler);
-            checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
-            checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+            checkbox.current.removeEventListener(
+              "mouseout",
+              hoverEnteringHandler
+            );
+            checkbox.current.removeEventListener(
+              "mousemove",
+              hoverLeavingHandler
+            );
           }
         });
       }
@@ -169,32 +193,58 @@ const ListProvider = ({
   useEffect(() => {
     subscribeHandler();
   }, [subscribeHandler]);
-  const handleOnChange = useCallback((value2, checked) => {
-    selectRows([value2], !checked);
-    setLastCheckedCheckbox(value2);
-  }, [selectRows]);
-  const value = useMemo(() => ({
-    allRowSelectValue,
-    collapseRow,
-    columns,
-    expandButton,
-    expandedRowIds,
-    expandRow,
-    handleOnChange,
-    inRange,
-    refList,
-    registerExpandableRow,
-    registerSelectableRow,
-    selectAll,
-    selectAllHandler,
-    selectable,
-    selectedRowIds,
-    selectRow,
-    setRefList,
-    subscribeHandler,
-    unselectAll,
-    unselectRow
-  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow, handleOnChange]);
+  const handleOnChange = useCallback(
+    (value2, checked) => {
+      selectRows([value2], !checked);
+      setLastCheckedCheckbox(value2);
+    },
+    [selectRows]
+  );
+  const value = useMemo(
+    () => ({
+      allRowSelectValue,
+      collapseRow,
+      columns,
+      expandButton,
+      expandedRowIds,
+      expandRow,
+      handleOnChange,
+      inRange,
+      refList,
+      registerExpandableRow,
+      registerSelectableRow,
+      selectAll,
+      selectAllHandler,
+      selectable,
+      selectedRowIds,
+      selectRow,
+      setRefList,
+      subscribeHandler,
+      unselectAll,
+      unselectRow
+    }),
+    [
+      allRowSelectValue,
+      selectAllHandler,
+      subscribeHandler,
+      collapseRow,
+      columns,
+      expandButton,
+      expandedRowIds,
+      expandRow,
+      inRange,
+      refList,
+      registerExpandableRow,
+      registerSelectableRow,
+      selectable,
+      selectAll,
+      selectedRowIds,
+      selectRow,
+      unselectAll,
+      unselectRow,
+      handleOnChange
+    ]
+  );
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {

package/dist/components/List/Row.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowDownIcon } from "@ultraviolet/icons";
 import { theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -12,96 +12,172 @@ import { ColumnProvider } from "./ColumnProvider.js";
 import { useListContext } from "./ListContext.js";
 import { listRow, listNoPaddingCell, listCheckboxContainer, listCheckboxInRange, listExpandableWrapper, listExpandableCell } from "./styles.css.js";
 import { paddingExpandableCell } from "./variables.css.js";
-const Row = forwardRef(({
-  children,
-  id,
-  expandable,
-  disabled,
-  selectDisabled,
-  sentiment = "neutral",
-  highlightAnimation,
-  expanded,
-  className,
-  expandablePadding,
-  "data-testid": dataTestid,
-  style,
-  "data-dragging": dataDragging,
-  onMouseEnter,
-  onMouseLeave
-}, forwardedRef) => {
-  const {
-    selectable,
-    registerExpandableRow,
-    expandedRowIds,
-    expandRow,
-    collapseRow,
-    registerSelectableRow,
-    selectedRowIds,
-    expandButton,
-    columns,
-    inRange,
-    refList,
-    setRefList,
-    handleOnChange
-  } = useListContext();
-  const expandedRowId = useId();
-  const checkboxRef = useRef(null);
-  const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
-  const hasExpandable = !!expandable;
-  useEffect(() => {
-    if (hasExpandable) {
-      const unregisterCallback = registerExpandableRow(id, expanded);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
-  useEffect(() => {
-    if (!isSelectDisabled) {
-      const unregisterCallback = registerSelectableRow(id);
-      return unregisterCallback;
-    }
-    return void 0;
-  }, [id, registerSelectableRow, isSelectDisabled]);
-  const toggleRowExpand = useCallback(() => {
-    if (expandedRowIds[id]) {
-      collapseRow(id);
-    } else {
-      expandRow(id);
-    }
-  }, [collapseRow, expandRow, expandedRowIds, id]);
-  const canClickRowToExpand = !disabled && !!expandable && !expandButton;
-  useEffect(() => {
-    if (checkboxRef.current !== null && !refList.includes(checkboxRef)) {
-      setRefList([...refList, checkboxRef]);
-    }
-  }, [refList, setRefList]);
-  const childrenLength = Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("tr", { "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0, "aria-disabled": disabled, "aria-expanded": expandable ? expandedRowIds[id] : void 0, className: `${className ? `${className} ` : ""}${listRow({
-      highlightAnimation,
-      sentiment
-    })}`, "data-dragging": dataDragging, "data-highlight": selectable && !!selectedRowIds[id], "data-testid": dataTestid, onClick: canClickRowToExpand ? toggleRowExpand : void 0, onKeyDown: canClickRowToExpand ? (event) => {
-      if (event.key === " ") {
-        toggleRowExpand();
-        event.preventDefault();
+const Row = forwardRef(
+  ({
+    children,
+    id,
+    expandable,
+    disabled,
+    selectDisabled,
+    sentiment = "neutral",
+    highlightAnimation,
+    expanded,
+    className,
+    expandablePadding,
+    "data-testid": dataTestid,
+    style,
+    "data-dragging": dataDragging,
+    onMouseEnter,
+    onMouseLeave
+  }, forwardedRef) => {
+    const {
+      selectable,
+      registerExpandableRow,
+      expandedRowIds,
+      expandRow,
+      collapseRow,
+      registerSelectableRow,
+      selectedRowIds,
+      expandButton,
+      columns,
+      inRange,
+      refList,
+      setRefList,
+      handleOnChange
+    } = useListContext();
+    const expandedRowId = useId();
+    const checkboxRef = useRef(null);
+    const isSelectDisabled = disabled || selectDisabled !== void 0 && selectDisabled !== false;
+    const hasExpandable = !!expandable;
+    useEffect(() => {
+      if (hasExpandable) {
+        const unregisterCallback = registerExpandableRow(id, expanded);
+        return unregisterCallback;
       }
-    } : void 0, onMouseEnter, onMouseLeave, ref: forwardedRef, role: canClickRowToExpand ? "button row" : void 0, style, tabIndex: canClickRowToExpand ? 0 : -1, children: [
-      selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? listCheckboxInRange : "", disabled: isSelectDisabled, name: "list-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRef, value: id }) }) }) }) }) : null,
-      expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: disabled || !expandable, onClick: toggleRowExpand, sentiment, size: "small", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
-      Children.map(children, (child, index) => {
-        const column = columns[index];
-        return /* @__PURE__ */ jsx(ColumnProvider, { maxWidth: column?.maxWidth, minWidth: column?.minWidth, width: column?.width, children: child });
-      })
-    ] }),
-    expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx("tr", { className: listExpandableWrapper, "data-expandable-content": true, "data-highlight": selectable && !!selectedRowIds[id], id: expandedRowId, onClick: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, onKeyDown: canClickRowToExpand ? (e) => {
-      e.stopPropagation();
-    } : void 0, children: /* @__PURE__ */ jsx(Cell, { className: listExpandableCell, colSpan: childrenLength, style: assignInlineVars({
-      [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
-    }), children: expandable }) }) : null
-  ] });
-});
+      return void 0;
+    }, [id, hasExpandable, registerExpandableRow, expanded, expandRow]);
+    useEffect(() => {
+      if (!isSelectDisabled) {
+        const unregisterCallback = registerSelectableRow(id);
+        return unregisterCallback;
+      }
+      return void 0;
+    }, [id, registerSelectableRow, isSelectDisabled]);
+    const toggleRowExpand = useCallback(() => {
+      if (expandedRowIds[id]) {
+        collapseRow(id);
+      } else {
+        expandRow(id);
+      }
+    }, [collapseRow, expandRow, expandedRowIds, id]);
+    const canClickRowToExpand = !disabled && !!expandable && !expandButton;
+    useEffect(() => {
+      if (checkboxRef.current !== null && !refList.includes(checkboxRef)) {
+        setRefList([...refList, checkboxRef]);
+      }
+    }, [refList, setRefList]);
+    const childrenLength = Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          "aria-controls": expandable && expandedRowIds[id] ? expandedRowId : void 0,
+          "aria-disabled": disabled,
+          "aria-expanded": expandable ? expandedRowIds[id] : void 0,
+          className: `${className ? `${className} ` : ""}${listRow({ highlightAnimation, sentiment })}`,
+          "data-dragging": dataDragging,
+          "data-highlight": selectable && !!selectedRowIds[id],
+          "data-testid": dataTestid,
+          onClick: canClickRowToExpand ? toggleRowExpand : void 0,
+          onKeyDown: canClickRowToExpand ? (event) => {
+            if (event.key === " ") {
+              toggleRowExpand();
+              event.preventDefault();
+            }
+          } : void 0,
+          onMouseEnter,
+          onMouseLeave,
+          ref: forwardedRef,
+          role: canClickRowToExpand ? "button row" : void 0,
+          style,
+          tabIndex: canClickRowToExpand ? 0 : -1,
+          children: [
+            selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: listCheckboxContainer, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": "select",
+                    checked: selectedRowIds[id],
+                    className: inRange?.includes(id) ? listCheckboxInRange : "",
+                    disabled: isSelectDisabled,
+                    name: "list-select-checkbox",
+                    onChange: () => handleOnChange(id, selectedRowIds[id]),
+                    ref: checkboxRef,
+                    value: id
+                  }
+                )
+              }
+            ) }) }) }) : null,
+            expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[400], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "expand",
+                "data-testid": "list-expand-button",
+                disabled: disabled || !expandable,
+                onClick: toggleRowExpand,
+                sentiment,
+                size: "small",
+                variant: "ghost",
+                children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+              }
+            ) }) }) : null,
+            Children.map(children, (child, index) => {
+              const column = columns[index];
+              return /* @__PURE__ */ jsx(
+                ColumnProvider,
+                {
+                  maxWidth: column?.maxWidth,
+                  minWidth: column?.minWidth,
+                  width: column?.width,
+                  children: child
+                }
+              );
+            })
+          ]
+        }
+      ),
+      expandable && expandedRowIds[id] ? /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: listExpandableWrapper,
+          "data-expandable-content": true,
+          "data-highlight": selectable && !!selectedRowIds[id],
+          id: expandedRowId,
+          onClick: canClickRowToExpand ? (e) => {
+            e.stopPropagation();
+          } : void 0,
+          onKeyDown: canClickRowToExpand ? (e) => {
+            e.stopPropagation();
+          } : void 0,
+          children: /* @__PURE__ */ jsx(
+            Cell,
+            {
+              className: listExpandableCell,
+              colSpan: childrenLength,
+              style: assignInlineVars({
+                [paddingExpandableCell]: theme.space[expandablePadding ?? "2"]
+              }),
+              children: expandable
+            }
+          )
+        }
+      ) : null
+    ] });
+  }
+);
 export {
   Row
 };

package/dist/components/List/SelectBar.d.ts

@@ -11,5 +11,5 @@ type SelectBarProps<T> = {
      * */
     idKey: keyof T;
 };
-export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const SelectBar: <T>({ children, data, idKey, className, }: SelectBarProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/List/SelectBar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ActionBar } from "../ActionBar/index.js";
 import { Stack } from "../Stack/index.js";
@@ -10,18 +10,28 @@ const SelectBar = ({
   idKey,
   className
 }) => {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = useListContext();
-  const selectedItems = useMemo(() => data.filter((item) => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
+  const { selectedRowIds, unselectAll } = useListContext();
+  const selectedItems = useMemo(
+    () => data.filter((item) => selectedRowIds[item[idKey]]),
+    [data, idKey, selectedRowIds]
+  );
   if (selectedItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", direction: "row", flex: "1 1 auto", justifyContent: "space-between", width: "100%", children: children({
-    selectedItems,
-    unselectAll
-  }) }) });
+  return /* @__PURE__ */ jsx(ActionBar, { className, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      alignItems: "center",
+      direction: "row",
+      flex: "1 1 auto",
+      justifyContent: "space-between",
+      width: "100%",
+      children: children({
+        selectedItems,
+        unselectAll
+      })
+    }
+  ) });
 };
 export {
   SelectBar

package/dist/components/List/SkeletonRows.d.ts

@@ -3,5 +3,5 @@ type ListLoadingSkeletonProps = {
     rows: number;
     cols: number;
 };
-export declare const SkeletonRows: ({ selectable, rows, cols, }: ListLoadingSkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SkeletonRows: ({ selectable, rows, cols, }: ListLoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/SkeletonRows.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "../Skeleton/index.js";
 import { Cell } from "./Cell.js";
 import { ColumnProvider } from "./ColumnProvider.js";
@@ -10,21 +10,31 @@ const SkeletonRows = ({
   rows,
   cols
 }) => {
-  const rowArray = Array.from({
-    length: rows
-  }, (_, index) => index);
-  const colArray = Array.from({
-    length: cols
-  }, (_, index) => index);
-  const {
-    columns
-  } = useListContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs("tr", { className: `${listRow({
-    sentiment: "neutral"
-  })} ${listLoadingRow}`, id: `skeleton-${index}`, role: "row", children: [
-    selectable ? /* @__PURE__ */ jsx("td", {}) : null,
-    colArray.map((columnIndex) => /* @__PURE__ */ jsx(ColumnProvider, { maxWidth: columns[columnIndex].maxWidth, minWidth: columns[columnIndex].minWidth, width: columns[columnIndex].width, children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: listSkeleton, variant: "line" }) }) }, columnIndex))
-  ] }, index)) });
+  const rowArray = Array.from({ length: rows }, (_, index) => index);
+  const colArray = Array.from({ length: cols }, (_, index) => index);
+  const { columns } = useListContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: `${listRow({ sentiment: "neutral" })} ${listLoadingRow}`,
+      id: `skeleton-${index}`,
+      role: "row",
+      children: [
+        selectable ? /* @__PURE__ */ jsx("td", {}) : null,
+        colArray.map((columnIndex) => /* @__PURE__ */ jsx(
+          ColumnProvider,
+          {
+            maxWidth: columns[columnIndex].maxWidth,
+            minWidth: columns[columnIndex].minWidth,
+            width: columns[columnIndex].width,
+            children: /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: listSkeleton, variant: "line" }) })
+          },
+          columnIndex
+        ))
+      ]
+    },
+    index
+  )) });
 };
 export {
   SkeletonRows

package/dist/components/List/index.d.ts

@@ -56,7 +56,7 @@ export declare const List: import("react").ForwardRefExoticComponent<ListProps &
         }) => ReactNode;
         data: T[];
         idKey: keyof T;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     useListContext: () => import("./ListContext").ListContextValue;
 };
 export {};