@dss-kit/ui-kit 0.3.5 → 0.3.7

package/dist/components/builders/Modal/Modal.js

@@ -1,55 +1,55 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import { cx as i } from "@emotion/css";
-import { forwardRef as B, useEffect as c, useCallback as f, useRef as D } from "react";
-import N from "../../../assets/svg/modal/close.svg.js";
-import { ModalContext as z } from "./context.js";
-import { styles as n } from "./styles.js";
-import { Portal as E } from "../Portal/Portal.js";
-import { Box as s } from "../Box/Box.js";
+import { jsx as t, jsxs as z } from "react/jsx-runtime";
+import { cx as s } from "@emotion/css";
+import { forwardRef as D, useEffect as p, useCallback as d, useRef as N } from "react";
+import B from "../../../assets/svg/modal/close.svg.js";
+import { ModalContext as E } from "./context.js";
+import { styles as i } from "./styles.js";
+import { Portal as I } from "../Portal/Portal.js";
+import { Box as l } from "../Box/Box.js";
 import { IconButton as P } from "../../controls/IconButton/IconButton.js";
-import { theme as j } from "../../../utils/theme/index.js";
-const C = B(
+import { theme as f } from "../../../utils/theme/index.js";
+const j = D(
   ({
     isOpen: o,
     onClose: r,
     overlayClassName: y,
-    modalClassName: p,
-    absoluteCloseButtonClassName: w,
+    modalClassName: w,
+    absoluteCloseButtonClassName: g,
     size: h = "md",
     closeOnBackdropClick: m = !0,
     closeOnEsc: u = !0,
-    disableBodyScroll: l = !0,
-    showAbsoluteCloseButton: g,
+    disableBodyScroll: a = !0,
+    showAbsoluteCloseButton: x,
     children: v
-  }, x) => {
-    c(() => {
-      if (l && o && typeof window < "u" && typeof document < "u") {
+  }, k) => {
+    p(() => {
+      if (a && o && typeof window < "u" && typeof document < "u") {
         const e = window.getComputedStyle(document.body).overflow;
         return document.body.style.overflow = "hidden", () => {
           document.body.style.overflow = e;
         };
       }
-    }, [o, l]);
-    const d = f(
+    }, [o, a]);
+    const n = d(
       (e) => {
         e.key === "Escape" && r();
       },
       [r]
     );
-    c(() => {
+    p(() => {
       if (typeof window < "u" && typeof document < "u" && u && o)
-        return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-    }, [o, u, d]);
-    const a = D(!1), k = f((e) => {
-      a.current = e.target === e.currentTarget;
-    }, []), b = f(
+        return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+    }, [o, u, n]);
+    const c = N(!1), b = d((e) => {
+      c.current = e.target === e.currentTarget;
+    }, []), M = d(
       (e) => {
-        m && e.target === e.currentTarget && a.current && r();
+        m && e.target === e.currentTarget && c.current && r();
       },
       [m, r]
     );
-    return o ? /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(z.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
-      s,
+    return o ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(E.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
+      l,
       {
         position: "fixed",
         top: 0,
@@ -59,33 +59,39 @@ const C = B(
         row: !0,
         center: !0,
         flex: 1,
-        onMouseDown: k,
-        onClick: b,
-        backgroundColor: j.color.fill.bgOverlayPrimary,
-        className: i(n.overlay, y),
+        onMouseDown: b,
+        onClick: M,
+        backgroundColor: f.color.fill.bgOverlayPrimary,
+        className: s(i.overlay, y),
         zIndex: 1,
-        children: /* @__PURE__ */ M(
-          s,
+        children: /* @__PURE__ */ z(
+          l,
           {
-            ref: x,
-            className: i(
-              n.modal,
-              n[`size_${h}`],
-              p
+            ref: k,
+            className: s(
+              i.modal,
+              i[`size_${h}`],
+              w
             ),
             relative: !0,
             children: [
-              g && /* @__PURE__ */ t(
-                P,
+              x && /* @__PURE__ */ t(
+                l,
                 {
-                  className: i(
-                    n.closeButton,
-                    w
-                  ),
-                  onClick: r,
-                  color: "neutral",
-                  size: "xs",
-                  children: /* @__PURE__ */ t(N, {})
+                  position: "absolute",
+                  top: f.spacing.lg,
+                  right: f.spacing.lg,
+                  zIndex: 1,
+                  children: /* @__PURE__ */ t(
+                    P,
+                    {
+                      className: g,
+                      onClick: r,
+                      color: "neutral",
+                      size: "xs",
+                      children: /* @__PURE__ */ t(B, {})
+                    }
+                  )
                 }
               ),
               v
@@ -96,7 +102,7 @@ const C = B(
     ) }) }) : null;
   }
 );
-C.displayName = "Modal";
+j.displayName = "Modal";
 export {
-  C as Modal
+  j as Modal
 };

package/dist/components/builders/Modal/ModalHeader/ModalHeader.js

@@ -1,21 +1,21 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { forwardRef as B } from "react";
-import W from "../../../../assets/svg/modal/close.svg.js";
-import { useModalContext as v } from "../context.js";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import B from "../../../../assets/svg/modal/close.svg.js";
+import { useModalContext as W } from "../context.js";
 import { Box as t } from "../../Box/Box.js";
-import { theme as o } from "../../../../utils/theme/index.js";
-import { Text as a } from "../../Text/Text.js";
+import { theme as r } from "../../../../utils/theme/index.js";
+import { Text as i } from "../../Text/Text.js";
 import { IconButton as M } from "../../../controls/IconButton/IconButton.js";
-const j = B(
+const j = v(
   ({
-    title: i,
-    subtitle: l,
+    title: l,
+    subtitle: a,
     w: m = "full",
     p: s,
-    py: n,
-    px: d = o.spacing["2xl"],
-    pt: c = o.spacing["2xl"],
-    pb: p = o.spacing.lg,
+    py: d,
+    px: n = r.spacing["2xl"],
+    pt: c = r.spacing["2xl"],
+    pb: p = r.spacing.lg,
     row: f = !0,
     justifyContent: h = "space-between",
     showCloseButton: g = !1,
@@ -24,57 +24,57 @@ const j = B(
     subtitleClassName: u,
     closeButtonClassName: N
   }, y) => {
-    const { onClose: C } = v();
+    const { onClose: C } = W();
     return /* @__PURE__ */ e(
       t,
       {
         w: m,
         p: s,
-        py: n,
-        px: d,
+        py: d,
+        px: n,
         pt: c,
         pb: p,
         row: f,
         justifyContent: h,
         ref: y,
-        borderColor: o.color.border.neutralAlphaBasic,
+        borderColor: r.color.border.neutralAlphaBasic,
         borderWidth: 0,
         borderBottomWidth: 1,
         borderStyle: "solid",
         className: x,
         children: [
-          /* @__PURE__ */ e(t, { gap: o.spacing.sm, children: [
-            /* @__PURE__ */ r(
-              a,
+          /* @__PURE__ */ e(t, { gap: r.spacing.sm, children: [
+            /* @__PURE__ */ o(
+              i,
               {
                 variant: "title-3",
                 colorName: "primary",
                 fontWeight: "semibold",
                 className: b,
-                children: i
+                children: l
               }
             ),
-            /* @__PURE__ */ r(
-              a,
+            /* @__PURE__ */ o(
+              i,
               {
                 variant: "body-1",
                 colorName: "tertiary",
                 fontWeight: "medium",
                 className: u,
-                children: l
+                children: a
               }
             )
           ] }),
-          g && /* @__PURE__ */ r(
+          g && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
             M,
             {
               onClick: C,
               color: "neutral",
               className: N,
               size: "xs",
-              children: /* @__PURE__ */ r(W, {})
+              children: /* @__PURE__ */ o(B, {})
             }
-          )
+          ) })
         ]
       }
     );

package/dist/components/builders/Modal/styles.d.ts

@@ -1,7 +1,6 @@
 export declare const styles: {
     overlay: string;
     modal: string;
-    closeButton: string;
     size_lg: string;
     size_md: string;
     size_sm: string;

package/dist/components/builders/Modal/styles.js

@@ -1,7 +1,7 @@
 import { css as i, keyframes as a } from "@emotion/css";
-import { bp as t } from "../../../styles/utils/breakpoints.js";
+import { bp as r } from "../../../styles/utils/breakpoints.js";
 import { theme as o } from "../../../utils/theme/index.js";
-const n = a`
+const t = a`
   0% {
     opacity: 0;
     transform: scale(0.95);
@@ -10,29 +10,23 @@ const n = a`
     opacity: 1;
     transform: none;
   }
-`, l = {
+`, e = {
   overlay: i({
     backdropFilter: "blur(5px)"
   }),
   modal: i({
     animationDuration: "0.2s",
     animationTimingFunction: "ease-in-out",
-    animationName: n,
+    animationName: t,
     maxWidth: `calc(100vw - ${o.spacing["3xl"]})`,
     maxHeight: `calc(100vh - ${o.spacing["7xl"]} - ${o.spacing["7xl"]})`,
     borderRadius: o.cornerRadius["2xl"],
     backgroundColor: o.color.fill.bgPrimary,
     boxShadow: `0 4px 20px 0 ${o.color.effect.shadowS}`,
-    [t.sm()]: {
+    [r.sm()]: {
       flex: 1
     }
   }),
-  closeButton: i({
-    position: "absolute",
-    zIndex: 1,
-    top: o.spacing.lg,
-    right: o.spacing.lg
-  }),
   size_lg: i({
     width: 874
   }),
@@ -44,5 +38,5 @@ const n = a`
   })
 };
 export {
-  l as styles
+  e as styles
 };

package/dist/components/builders/Table/Table.js

@@ -1,41 +1,41 @@
-import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { cx as p, css as b } from "@emotion/css";
-import { useReactTable as He, getPaginationRowModel as ve, getSortedRowModel as Ne, getCoreRowModel as Me, flexRender as H, createColumnHelper as ke } from "@tanstack/react-table";
-import { useImperativeHandle as Ie } from "react";
-import ze from "../../../assets/svg/table/search.svg.js";
-import { styles as Ve } from "./styles.js";
-import { useControllableState as m } from "./Table.hooks.js";
+import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as Ie } from "@tanstack/react-table";
+import { useMemo as ze, useImperativeHandle as Ve } from "react";
+import Le from "../../../assets/svg/table/search.svg.js";
+import { styles as Ee } from "./styles.js";
+import { useControllableState as s } from "./Table.hooks.js";
 import { getColumnPinningStyles as f } from "./Table.utils.js";
-import { TablePlaceholder as Le } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as Ee } from "./TableWrapper/TableWrapper.js";
-import { TableHeadRow as Fe } from "./TableHeadRow/TableHeadRow.js";
-import { TablePagination as We } from "./TablePagination/TablePagination.js";
-import { TableHeadCell as je } from "./TableHeadCell/TableHeadCell.js";
-import { TableBodyCell as Be } from "./TableBodyCell/TableBodyCell.js";
-import { TableBodyRow as De } from "./TableBodyRow/TableBodyRow.js";
-import { TableBodyCellContent as M } from "./TableBodyCellContent/TableBodyCellContent.js";
-import { Skeleton as _e } from "../../shared/Skeleton/Skeleton.js";
-import { TableHeadCellContent as Ae } from "./TableHeadCellContent/TableHeadCellContent.js";
-import { TableHeadCellContentSortable as Ke } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
-import { theme as Oe } from "../../../utils/theme/index.js";
-import { Box as $e } from "../Box/Box.js";
-const { spacing: v, color: n } = Oe, qe = b({
+import { TablePlaceholder as Fe } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as We } from "./TableWrapper/TableWrapper.js";
+import { TableHeadRow as je } from "./TableHeadRow/TableHeadRow.js";
+import { TablePagination as Be } from "./TablePagination/TablePagination.js";
+import { TableHeadCell as De } from "./TableHeadCell/TableHeadCell.js";
+import { TableBodyCell as _e } from "./TableBodyCell/TableBodyCell.js";
+import { TableBodyRow as Ae } from "./TableBodyRow/TableBodyRow.js";
+import { TableBodyCellContent as k } from "./TableBodyCellContent/TableBodyCellContent.js";
+import { Skeleton as Ke } from "../../shared/Skeleton/Skeleton.js";
+import { TableHeadCellContent as Oe } from "./TableHeadCellContent/TableHeadCellContent.js";
+import { TableHeadCellContentSortable as $e } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
+import { theme as qe } from "../../../utils/theme/index.js";
+import { Box as Ge } from "../Box/Box.js";
+const { spacing: M, color: t } = qe, Je = b({
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: n.fill.bgPrimary
-}), Ge = b({
-  backgroundColor: n.fill.bgSecondary,
-  color: n.text.tertiary
-}), Je = b({
+  backgroundColor: t.fill.bgPrimary
+}), Qe = b({
+  backgroundColor: t.fill.bgSecondary,
+  color: t.text.tertiary
+}), Ue = b({
   pointerEvents: "none",
   userSelect: "none"
 }), N = ["70%", "55%", "80%", "60%"], c = ({
-  ref: k,
+  ref: I,
   data: h,
-  columns: I,
+  columns: u,
   showBorders: g = !0,
   enableSorting: z = !1,
   enablePagination: S = !1,
@@ -55,7 +55,7 @@ const { spacing: v, color: n } = Oe, qe = b({
   onPaginationChange: $,
   rowSelection: q,
   onRowSelectionChange: G,
-  totalCount: s,
+  totalCount: m,
   loading: i = !1,
   loadingRowCount: J = 10,
   emptyLabels: Q = {
@@ -64,115 +64,121 @@ const { spacing: v, color: n } = Oe, qe = b({
     action: "Reset"
   },
   className: U,
-  containerClassName: u,
+  containerClassName: y,
   theadClassName: X,
   tbodyClassName: Y,
   emptyStateClassName: Z,
   emptyStateTitleClassName: ee,
   emptyStateDescriptionClassName: oe,
-  paginationClassName: te,
-  tableOptions: le = {},
-  onRowClick: y,
-  getRowId: ne,
-  headCellComponent: ie = je,
-  bodyCellComponent: w = Be,
-  headRowComponent: ae = Fe,
-  bodyRowComponent: x = De,
+  paginationClassName: le,
+  tableOptions: ne = {},
+  onRowClick: w,
+  getRowId: te,
+  headCellComponent: ie = De,
+  bodyCellComponent: x = _e,
+  headRowComponent: ae = je,
+  bodyRowComponent: R = Ae,
   onReset: re,
-  paginationVariant: me,
-  paginationLabels: se,
+  paginationVariant: se,
+  paginationLabels: me,
   renderPageSizeSelectorDropdownItem: ce,
   renderPageSizeSelectorInputItem: ge
 }) => {
-  const [de, pe] = m(
+  const [de, pe] = s(
     W,
     j,
     []
-  ), [he, Ce] = m(
+  ), [he, Ce] = s(
     D,
     _,
     []
-  ), [fe, be] = m(
+  ), [fe, be] = s(
     A,
     K,
     {}
-  ), [a, C] = m(
+  ), [a, C] = s(
     O,
     $,
     { pageIndex: 0, pageSize: 10 }
-  ), [Se, ue] = m(q, G, {}), [ye, we] = m(
+  ), [ue, Se] = s(q, G, {}), [ye, we] = s(
     E,
     F,
     { left: [], right: [] }
-  ), R = B ?? !!s, l = He({
+  ), T = B ?? !!m, xe = ze(
+    () => u.map((e) => ({
+      enableSorting: !1,
+      ...e
+    })),
+    [u]
+  ), n = He({
     data: h,
-    columns: I,
+    columns: xe,
     state: {
       sorting: de,
       columnFilters: he,
       columnVisibility: fe,
       pagination: a,
-      rowSelection: Se,
+      rowSelection: ue,
       columnPinning: ye
     },
     onSortingChange: pe,
     onColumnFiltersChange: Ce,
     onColumnVisibilityChange: be,
     onPaginationChange: C,
-    onRowSelectionChange: ue,
+    onRowSelectionChange: Se,
     onColumnPinningChange: we,
-    getCoreRowModel: Me(),
-    getSortedRowModel: z && !R ? Ne() : void 0,
-    getPaginationRowModel: S ? ve() : void 0,
+    getCoreRowModel: ke(),
+    getSortedRowModel: z && !T ? Ne() : void 0,
+    getPaginationRowModel: S ? Me() : void 0,
     enableRowSelection: V,
     enableMultiRowSelection: L,
     enableColumnPinning: d,
-    getRowId: ne,
-    manualSorting: R,
-    manualPagination: !!s,
-    pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
-    ...le
+    getRowId: te,
+    manualSorting: T,
+    manualPagination: !!m,
+    pageCount: m ? Math.ceil(m / a.pageSize) : void 0,
+    ...ne
   });
-  Ie(k, () => l);
-  const { rows: T } = l.getRowModel(), xe = (e, t) => {
-    y && y(e.original, t);
-  }, Re = (e) => /* @__PURE__ */ o(
+  Ve(I, () => n);
+  const { rows: P } = n.getRowModel(), Re = (e, l) => {
+    w && w(e.original, l);
+  }, Te = (e) => /* @__PURE__ */ o(
     ie,
     {
       style: {
         width: e.getSize(),
-        ...d && f(l, e.column, n.fill.bgSecondary)
+        ...d && f(n, e.column, t.fill.bgSecondary)
       },
       onClick: i ? void 0 : e.column.getToggleSortingHandler(),
       children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), Te = (e, t) => /* @__PURE__ */ o(
-    x,
+  ), Pe = (e, l) => /* @__PURE__ */ o(
+    R,
     {
       showBorders: g,
       isSelected: e.getIsSelected(),
-      onClick: () => xe(e, t),
+      onClick: () => Re(e, l),
       children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
-        w,
+        x,
         {
-          style: d ? f(l, r.column, n.fill.bgPrimary) : void 0,
+          style: d ? f(n, r.column, t.fill.bgPrimary) : void 0,
           children: H(r.column.columnDef.cell, r.getContext())
         },
         r.id
       ))
     },
     e.id
-  ), Pe = (e) => /* @__PURE__ */ o(
-    x,
+  ), ve = (e) => /* @__PURE__ */ o(
+    R,
     {
       showBorders: g,
-      children: l.getVisibleLeafColumns().map((t, r) => /* @__PURE__ */ o(
-        w,
+      children: n.getVisibleLeafColumns().map((l, r) => /* @__PURE__ */ o(
+        x,
         {
-          style: d ? f(l, t, n.fill.bgPrimary) : void 0,
-          children: /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(
-            _e,
+          style: d ? f(n, l, t.fill.bgPrimary) : void 0,
+          children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
+            Ke,
             {
               variant: "text",
               height: 16,
@@ -180,69 +186,69 @@ const { spacing: v, color: n } = Oe, qe = b({
             }
           ) })
         },
-        t.id
+        l.id
       ))
     },
     `skeleton-row-${e}`
   );
-  return !i && !T.length ? /* @__PURE__ */ o(
-    Le,
+  return !i && !P.length ? /* @__PURE__ */ o(
+    Fe,
     {
       icon: /* @__PURE__ */ o(
-        ze,
+        Le,
         {
           width: 24,
           height: 24,
-          style: { color: n.icon.tertiary, marginBottom: v.sm }
+          style: { color: t.icon.tertiary, marginBottom: M.sm }
         }
       ),
       labels: Q,
       onReset: re,
-      className: p(u, Z),
+      className: p(y, Z),
       titleClassName: ee,
       descriptionClassName: oe
     }
-  ) : /* @__PURE__ */ P($e, { w: "full", gap: v.xl, className: p(u), children: [
-    /* @__PURE__ */ o(Ee, { data: h, showBorders: g, children: /* @__PURE__ */ P("table", { className: p(qe, Ve.table, U), children: [
+  ) : /* @__PURE__ */ v(Ge, { w: "full", gap: M.xl, className: p(y), children: [
+    /* @__PURE__ */ o(We, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, Ee.table, U), children: [
       /* @__PURE__ */ o(
         "thead",
         {
           className: p(
-            Ge,
-            { [Je]: i },
+            Qe,
+            { [Ue]: i },
             X
           ),
           "aria-busy": i,
-          children: l.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Re) }, e.id))
+          children: n.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
         }
       ),
       /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
         { length: J },
-        (e, t) => Pe(t)
-      ) : T.map((e, t) => Te(e, t)) })
+        (e, l) => ve(l)
+      ) : P.map((e, l) => Pe(e, l)) })
     ] }) }),
     S && !i && /* @__PURE__ */ o(
-      We,
+      Be,
       {
         pageIndex: a.pageIndex,
         pageSize: a.pageSize,
-        totalCount: s || h.length,
-        variant: me,
-        labels: se,
+        totalCount: m || h.length,
+        variant: se,
+        labels: me,
         renderPageSizeSelectorDropdownItem: ce,
         renderPageSizeSelectorInputItem: ge,
         onPageChange: (e) => C({ ...a, pageIndex: e }),
         onPageSizeChange: (e) => C({ ...a, pageSize: e, pageIndex: 0 }),
-        className: te
+        className: le
       }
     )
   ] });
 };
 c.displayName = "Table";
-c.HeadCellContent = Ae;
-c.BodyCellContent = M;
-c.HeadCellContentSortable = Ke;
-c.createColumnHelper = ke;
+c.HeadCellContent = Oe;
+c.BodyCellContent = k;
+c.HeadCellContentSortable = $e;
+c.createColumnHelper = Ie;
 export {
   c as Table
 };