@tipp/ui 1.3.2 → 1.4.1

package/dist/index.cjs

@@ -752,8 +752,6 @@ function Pagination(props) {
     size: "3",
     style: { borderRadius: "50%" }
   };
-  if (!page)
-    return null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_themes24.IconButton,
@@ -849,6 +847,7 @@ function EllipsisTooltip(props) {
 // src/atoms/drawer.tsx
 var import_react16 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react_icons3 = require("@radix-ui/react-icons");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Root4(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog2.Root, __spreadValues({}, props));
@@ -861,12 +860,15 @@ function Content6(props) {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dialog2.Portal, { container: containerRef.current, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       Dialog2.Content,
       __spreadProps(__spreadValues({
         className: `DrawerContent ${position} ${className || ""}`
       }, rest), {
-        children
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes6.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog2.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { color: "gray", variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.Cross1Icon, { height: "18px", width: "18px" }) }) }) }),
+          children
+        ]
       })
     )
   ] });
@@ -884,7 +886,7 @@ var Drawer = {
 };
 
 // src/atoms/toast.tsx
-var import_react_icons3 = require("@radix-ui/react-icons");
+var import_react_icons4 = require("@radix-ui/react-icons");
 var import_react_toastify = require("react-toastify");
 var import_react_toastify2 = require("react-toastify");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -900,7 +902,7 @@ function ToastContainer(props) {
       closeOnClick: true,
       draggable: true,
       hideProgressBar: true,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons3.InfoCircledIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons4.InfoCircledIcon, {}),
       newestOnTop: true,
       pauseOnFocusLoss: true,
       pauseOnHover: true,
@@ -1143,18 +1145,37 @@ function Row(props) {
 // src/molecules/expand-table/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function ExpandTable(props) {
-  const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } = props;
+  const {
+    data,
+    columns,
+    ExpandComp,
+    placeholder,
+    onRowClick,
+    tableStyle,
+    showPagination,
+    isLoading,
+    pageIndex = 0,
+    pageSize = 10,
+    siblingCount = 2
+  } = props;
   const defaultAlign = "left";
+  const [pagination, setPagination] = (0, import_react20.useState)({
+    pageIndex: pageIndex || 0,
+    pageSize: pageSize || 9999
+  });
   const [sorting, setSorting] = (0, import_react20.useState)([]);
-  const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
+  const { getRowModel, getHeaderGroups, setPageIndex } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table2.getSortedRowModel)(),
     state: {
-      sorting
+      sorting,
+      pagination
     },
-    onSortingChange: setSorting
+    onSortingChange: setSorting,
+    getPaginationRowModel: (0, import_react_table2.getPaginationRowModel)(),
+    onPaginationChange: setPagination
   });
   const gridColTemp = (0, import_react20.useMemo)(() => {
     return columns.map((col) => {
@@ -1165,6 +1186,39 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
+  const onChangePagination = (0, import_react20.useCallback)(
+    (page) => {
+      setPageIndex(page - 1);
+    },
+    [setPageIndex]
+  );
+  const helpCompRender = (0, import_react20.useCallback)(
+    (rowLength) => {
+      if (isLoading) {
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_themes19.Flex,
+          {
+            align: "center",
+            height: "100%",
+            justify: "center",
+            p: "5",
+            width: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes49.Spinner, {})
+          }
+        );
+      }
+      if (rowLength === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
+      }
+      return null;
+    },
+    [isLoading, placeholder]
+  );
+  const pageCount = (0, import_react20.useMemo)(() => {
+    if (!data)
+      return 0;
+    return Math.ceil(data.length / pageSize);
+  }, [data, pageSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
@@ -1215,22 +1269,28 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
-      rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          Row,
-          {
-            ExpandComp,
-            defaultAlign,
-            gridColTemp,
-            onRowClick,
-            row
-          },
-          `row_${row.id}`
-        );
-      })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Row,
+        {
+          ExpandComp,
+          defaultAlign,
+          gridColTemp,
+          onRowClick,
+          row
+        },
+        `row_${row.id}`
+      );
+    }) }),
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Pagination,
+      {
+        count: pageCount,
+        onChange: onChangePagination,
+        page: pagination.pageIndex + 1,
+        siblingCount
+      }
+    ) }) : null
   ] });
 }
 
@@ -1359,7 +1419,7 @@ var renderCustomHeader = (props) => {
 
 // src/molecules/dot-navigation.tsx
 var import_react22 = require("react");
-var import_react_icons4 = require("@radix-ui/react-icons");
+var import_react_icons5 = require("@radix-ui/react-icons");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function DotNavigation(props) {
   const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
@@ -1390,7 +1450,7 @@ function DotNavigation(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
     const isSelected = currentDot === index;
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      import_react_icons4.DotFilledIcon,
+      import_react_icons5.DotFilledIcon,
       {
         height: "24px",
         onClick: () => {
@@ -1561,7 +1621,7 @@ var Stepper = {
 
 // src/molecules/tag-selector.tsx
 var import_react24 = require("react");
-var import_react_icons5 = require("@radix-ui/react-icons");
+var import_react_icons6 = require("@radix-ui/react-icons");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var OPTION_HEIGHT = 32;
 var DefaultDropdownContainer = (props) => {
@@ -1774,7 +1834,7 @@ function TagSelector(props) {
                           onDelete(item.id);
                         },
                         variant: "transparent",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons5.Cross1Icon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons6.Cross1Icon, {})
                       }
                     )
                   ] }, item.id);
@@ -1794,7 +1854,7 @@ function TagSelector(props) {
               ]
             }
           ),
-          focus ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons5.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons5.ChevronRightIcon, {})
+          focus ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons6.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons6.ChevronRightIcon, {})
         ]
       }
     ) }),