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

package/dist/components/List/Cell.js

@@ -1,31 +1,33 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef } from "react";
 import { useColumnProvider } from "./ColumnProvider.js";
 import { listCell } from "./styles.css.js";
 import { maxWidthCell, minWidthCell, widthCell } from "./variables.css.js";
-const Cell = forwardRef(({
-  children,
-  className,
-  "data-testid": dataTestid,
-  colSpan,
-  style
-}, ref) => {
-  const {
-    maxWidth,
-    minWidth,
-    width
-  } = useColumnProvider();
-  return /* @__PURE__ */ jsx("td", { className: `${className ? `${className} ` : ""}${listCell}`, colSpan, "data-testid": dataTestid, ref, style: {
-    ...assignInlineVars({
-      [widthCell]: width,
-      [minWidthCell]: minWidth,
-      [maxWidthCell]: maxWidth
-    }),
-    ...style
-  }, children });
-});
+const Cell = forwardRef(
+  ({ children, className, "data-testid": dataTestid, colSpan, style }, ref) => {
+    const { maxWidth, minWidth, width } = useColumnProvider();
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: `${className ? `${className} ` : ""}${listCell}`,
+        colSpan,
+        "data-testid": dataTestid,
+        ref,
+        style: {
+          ...assignInlineVars({
+            [widthCell]: width,
+            [minWidthCell]: minWidth,
+            [maxWidthCell]: maxWidth
+          }),
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
 export {
   Cell
 };

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

@@ -5,7 +5,7 @@ type ColumnProviderProps = {
     minWidth?: string;
     children?: ReactNode;
 };
-export declare const ColumnProvider: ({ width, minWidth, maxWidth, children, }: ColumnProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColumnProvider: ({ width, minWidth, maxWidth, children, }: ColumnProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useColumnProvider: () => {
     width: string;
     maxWidth: string;

package/dist/components/List/ColumnProvider.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const ColumnContext = createContext(void 0);
 const ColumnProvider = ({
@@ -6,11 +6,17 @@ const ColumnProvider = ({
   minWidth,
   maxWidth,
   children
-}) => /* @__PURE__ */ jsx(ColumnContext.Provider, { value: {
-  maxWidth: maxWidth ?? "none",
-  minWidth: minWidth ?? "auto",
-  width: width ?? "auto"
-}, children });
+}) => /* @__PURE__ */ jsx(
+  ColumnContext.Provider,
+  {
+    value: {
+      maxWidth: maxWidth ?? "none",
+      minWidth: minWidth ?? "auto",
+      width: width ?? "auto"
+    },
+    children
+  }
+);
 const useColumnProvider = () => {
   const context = useContext(ColumnContext);
   if (!context) {

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

@@ -10,5 +10,5 @@ type HeaderCellProps = {
     minWidth?: string;
     maxWidth?: string;
 };
-export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, width, minWidth, maxWidth, }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderCell.js

@@ -1,14 +1,12 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InformationOutlineIcon, SouthShortIcon, SortIcon as SortIcon$1 } from "@ultraviolet/icons";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { listHeaderCell, listSortIcon } from "./styles.css.js";
 import { maxWidthHeaderCell, minWidthHeaderCell, widthHeaderCell } from "./variables.css.js";
-const SortIcon = ({
-  order
-}) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
+const SortIcon = ({ order }) => order ? /* @__PURE__ */ jsx(SouthShortIcon, { className: listSortIcon[order], sentiment: "primary" }) : /* @__PURE__ */ jsx(SortIcon$1, { sentiment: "neutral" });
 const HeaderCell = ({
   children,
   isOrdered,
@@ -27,22 +25,41 @@ const HeaderCell = ({
     order = "descending";
   }
   const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
-  return /* @__PURE__ */ jsx("th", { "aria-sort": order, className: `${className ? `${className} ` : ""}${listHeaderCell}`, onClick: handleOrder, onKeyDown: handleOrder ? (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      handleOrder();
-      if (event.key === " ") {
-        event.preventDefault();
-      }
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "aria-sort": order,
+      className: `${className ? `${className} ` : ""}${listHeaderCell}`,
+      onClick: handleOrder,
+      onKeyDown: handleOrder ? (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          handleOrder();
+          if (event.key === " ") {
+            event.preventDefault();
+          }
+        }
+      } : void 0,
+      role: onOrder ? "button columnheader" : void 0,
+      style: assignInlineVars({
+        [widthHeaderCell]: width,
+        [minWidthHeaderCell]: minWidth,
+        [maxWidthHeaderCell]: maxWidth
+      }),
+      tabIndex: handleOrder ? 0 : -1,
+      children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+        children,
+        info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(
+          InformationOutlineIcon,
+          {
+            prominence: "weak",
+            sentiment: "neutral",
+            size: "small"
+          }
+        ) }) : null,
+        orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
+      ] })
     }
-  } : void 0, role: onOrder ? "button columnheader" : void 0, style: assignInlineVars({
-    [widthHeaderCell]: width,
-    [minWidthHeaderCell]: minWidth,
-    [maxWidthHeaderCell]: maxWidth
-  }), tabIndex: handleOrder ? 0 : -1, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-    children,
-    info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }) }) : null,
-    orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { order }) : null
-  ] }) });
+  );
 };
 export {
   HeaderCell

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

@@ -3,5 +3,5 @@ type RowProps = {
     hasSelectAllColumn: boolean;
     children: ReactNode;
 };
-export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/List/HeaderRow.js

@@ -1,22 +1,24 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../Checkbox/index.js";
 import { HeaderCell } from "./HeaderCell.js";
 import { useListContext } from "./ListContext.js";
 import { listHeaderRow, listNoPaddingHeaderCell } from "./styles.css.js";
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAllHandler,
-    selectedRowIds,
-    expandButton
-  } = useListContext();
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const { allRowSelectValue, selectAllHandler, selectedRowIds, expandButton } = useListContext();
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: listHeaderRow, children: [
-    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select all", checked: allRowSelectValue, disabled: selectableRowCount === 0, name: "list-select-checkbox", onChange: selectAllHandler, value: "all" }) }) : null,
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        disabled: selectableRowCount === 0,
+        name: "list-select-checkbox",
+        onChange: selectAllHandler,
+        value: "all"
+      }
+    ) }) : null,
     expandButton ? /* @__PURE__ */ jsx(HeaderCell, { className: listNoPaddingHeaderCell, children: null }) : null,
     children
   ] }) });

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

@@ -38,6 +38,6 @@ export type ListProviderProps = {
     onSelectedChange?: Dispatch<SetStateAction<string[]>>;
     columns: ColumnProps[];
 };
-export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ListProvider: ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, }: ListProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useListContext: () => ListContextValue;
 export {};

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 = () => {