@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Data/Table/hooks/useTableColumns/useTableColumns.js

@@ -0,0 +1,69 @@
+import { useRef as w, useState as b, useCallback as n } from "react";
+function j(l = {}) {
+  return {
+    type: "columns",
+    options: l,
+    create: (i, r) => (
+      // oxlint-disable-next-line react/rules-of-hooks
+      T(i, r, l)
+    )
+  };
+}
+function T(l, i, r) {
+  const S = w(i);
+  S.current = i;
+  const [c, o] = b(
+    r.initialVisibility ?? {}
+  ), [g, a] = b(
+    r.initialOrder ?? []
+  ), [m, y] = b({}), C = n(
+    (t) => t in c ? c[t] : !0,
+    [c]
+  ), O = n((t) => {
+    o((e) => ({
+      ...e,
+      [t]: !(!(t in e) || e[t])
+    }));
+  }, []), d = n(
+    (t) => {
+      o(t);
+    },
+    []
+  ), V = n((t) => {
+    o((e) => ({ ...e, [t]: !0 }));
+  }, []), z = n((t) => {
+    o((e) => ({ ...e, [t]: !1 }));
+  }, []), h = n((t) => {
+    a(t);
+  }, []), x = n(() => {
+    a([]);
+  }, []), I = n((t, e) => {
+    a((s) => {
+      const u = s.length > 0 ? [...s] : S.current(), f = u.indexOf(t);
+      return f === -1 ? s : (u.splice(f, 1), u.splice(e, 0, t), u);
+    });
+  }, []), R = n(
+    (t) => m[t] ?? 150,
+    [m]
+  ), k = n((t, e) => {
+    y((s) => ({ ...s, [t]: e }));
+  }, []);
+  return {
+    visibility: c,
+    isVisible: C,
+    toggleVisibility: O,
+    setVisibility: d,
+    showColumn: V,
+    hideColumn: z,
+    order: g,
+    setOrder: h,
+    resetOrder: x,
+    moveColumn: I,
+    sizing: m,
+    getSize: R,
+    setSize: k
+  };
+}
+export {
+  j as useTableColumns
+};

package/dist/Data/Table/hooks/useTableDetailRow/useTableDetailRow.js

@@ -0,0 +1,92 @@
+import { useRef as x, useState as M, useCallback as l, useMemo as b } from "react";
+function G(u = {}) {
+  return {
+    type: "detailRow",
+    options: u,
+    create: (c, i) => (
+      // oxlint-disable-next-line react/rules-of-hooks
+      C(c, i, u)
+    )
+  };
+}
+function C(u, c, i) {
+  const R = i.allowMultiple ?? !0, d = x(u);
+  d.current = u;
+  const p = x(c);
+  p.current = c;
+  const [s, a] = M(
+    () => {
+      const e = {};
+      if (i.initial)
+        for (const t of i.initial)
+          e[String(t)] = !0;
+      return e;
+    }
+  ), k = l(
+    (e) => s === !0 ? !0 : s[String(e)] === !0,
+    [s]
+  ), w = b(() => u.length === 0 ? !1 : s === !0 ? !0 : u.every((e, t) => {
+    const n = String(c(e, t));
+    return s[n] === !0;
+  }), [u, c, s]), h = l(
+    (e) => {
+      const t = String(e);
+      a((n) => {
+        const r = d.current, y = p.current, g = n === !0 ? !0 : n[t] === !0;
+        if (n === !0) {
+          const f = {};
+          for (let o = 0; o < r.length; o++) {
+            const S = String(y(r[o], o));
+            S !== t && (f[S] = !0);
+          }
+          return f;
+        }
+        return R ? {
+          ...n,
+          [t]: !g
+        } : g ? {} : { [t]: !0 };
+      });
+    },
+    [R]
+  ), m = l(() => {
+    a(w ? {} : !0);
+  }, [w]), E = l((e) => {
+    a((t) => {
+      if (t === !0) return t;
+      const n = { ...t };
+      for (const r of e)
+        n[String(r)] = !0;
+      return n;
+    });
+  }, []), A = l((e) => {
+    a((t) => {
+      if (t === !0) {
+        const r = d.current, y = p.current, g = new Set(e.map(String)), f = {};
+        for (let o = 0; o < r.length; o++) {
+          const S = String(y(r[o], o));
+          g.has(S) || (f[S] = !0);
+        }
+        return f;
+      }
+      const n = { ...t };
+      for (const r of e)
+        delete n[String(r)];
+      return n;
+    });
+  }, []), K = l(() => {
+    a({});
+  }, []);
+  return {
+    expanded: s,
+    isExpanded: k,
+    isAllExpanded: w,
+    toggle: h,
+    toggleAll: m,
+    expand: E,
+    collapse: A,
+    collapseAll: K
+  };
+}
+export {
+  G as useTableDetailRow
+};

package/dist/Data/Table/hooks/useTablePagination/useTablePagination.js

@@ -0,0 +1,66 @@
+import { getPaginationRowModel as S } from "@tanstack/react-table";
+import { useEffect as z, useCallback as o } from "react";
+function C(e) {
+  return typeof e == "function" ? e() : e;
+}
+function r(e, i) {
+  try {
+    return e();
+  } catch {
+    return i;
+  }
+}
+function v(e, i = {}) {
+  const { initialPageSize: u = 10, totalCount: g } = i, { instance: t } = e;
+  z(() => {
+    e.mode === "client" && t.setOptions((n) => ({
+      ...n,
+      getPaginationRowModel: n.getPaginationRowModel ?? S()
+    })), t.setPageSize(u);
+  }, [t, e.mode]);
+  const { pageIndex: d, pageSize: s } = t.getState().pagination, c = d + 1, P = g !== void 0 ? C(g) : r(
+    () => t.getPrePaginationRowModel().rows.length,
+    e.rows.length
+  ), a = g !== void 0 ? Math.max(1, Math.ceil(P / s)) : r(
+    () => {
+      const n = t.getPageCount();
+      return n > 0 ? n : 1;
+    },
+    Math.max(1, Math.ceil(P / s))
+  ), f = c < a, l = c > 1, p = o(
+    (n) => {
+      t.setPageIndex(Math.max(0, n - 1));
+    },
+    [t]
+  ), x = o(
+    (n) => {
+      t.setPageSize(n);
+    },
+    [t]
+  ), m = o(() => {
+    t.nextPage();
+  }, [t]), M = o(() => {
+    t.previousPage();
+  }, [t]), h = o(() => {
+    t.setPageIndex(0);
+  }, [t]), w = o(() => {
+    t.setPageIndex(a - 1);
+  }, [t, a]);
+  return {
+    page: c,
+    pageSize: s,
+    pageCount: a,
+    total: P,
+    setPage: p,
+    setPageSize: x,
+    nextPage: m,
+    prevPage: M,
+    firstPage: h,
+    lastPage: w,
+    canNextPage: f,
+    canPrevPage: l
+  };
+}
+export {
+  v as useTablePagination
+};

package/dist/Data/Table/hooks/useTablePinning/useTablePinning.js

@@ -0,0 +1,161 @@
+import { useRef as F, useState as N, useCallback as c, useMemo as f } from "react";
+function L(d) {
+  return {
+    type: "pinning",
+    options: d,
+    create: (w, g) => (
+      // oxlint-disable-next-line react/rules-of-hooks
+      W(w, g, d)
+    )
+  };
+}
+function W(d, w, g) {
+  const { columns: o, initial: I } = g, y = F(o);
+  y.current = o;
+  const [i, C] = N(() => {
+    const n = I ?? {
+      left: o.filter((t) => t.pin === "left").map((t) => t.field),
+      right: o.filter((t) => t.pin === "right").map((t) => t.field)
+    };
+    return {
+      left: n.left ?? [],
+      right: n.right ?? []
+    };
+  }), u = d, P = c(
+    (e, n) => {
+      C((t) => {
+        const r = { ...t };
+        return r.left = (r.left ?? []).filter((l) => l !== e), r.right = (r.right ?? []).filter((l) => l !== e), n === "left" ? r.left = [...r.left ?? [], e] : r.right = [...r.right ?? [], e], r;
+      });
+    },
+    []
+  ), R = c((e) => {
+    C((n) => ({
+      left: (n.left ?? []).filter((t) => t !== e),
+      right: (n.right ?? []).filter((t) => t !== e)
+    }));
+  }, []), v = c(
+    (e) => {
+      var n, t;
+      return (n = i.left) != null && n.includes(e) ? "left" : (t = i.right) != null && t.includes(e) ? "right" : !1;
+    },
+    [i]
+  ), a = (e, n) => {
+    if (typeof e == "number") return e;
+    if (typeof e == "string") {
+      const t = parseInt(e, 10);
+      return isNaN(t) ? n : t;
+    }
+    return n;
+  }, h = f(() => {
+    const e = o, n = i.left ?? [];
+    return n.length === 0 ? [] : n.map((t) => {
+      const r = e.find((l) => l.field === t);
+      return r ? {
+        columnId: r.field,
+        header: r.header ?? r.field,
+        width: a(r.width, 48)
+      } : null;
+    }).filter((t) => t !== null);
+  }, [o, i]), b = f(() => {
+    const e = o, n = i.left ?? [], t = i.right ?? [], r = [...n, ...t];
+    return e.filter((l) => !r.includes(l.field)).map((l) => ({
+      columnId: l.field,
+      header: l.header ?? l.field,
+      width: a(l.width, 100)
+    }));
+  }, [o, i]), m = f(() => {
+    const e = o, n = i.right ?? [];
+    return n.length === 0 ? [] : n.map((t) => {
+      const r = e.find((l) => l.field === t);
+      return r ? {
+        columnId: r.field,
+        header: r.header ?? r.field,
+        width: a(r.width, 48)
+      } : null;
+    }).filter((t) => t !== null);
+  }, [o, i]), M = f(
+    () => h.reduce((e, n) => e + (n.width ?? 0), 0),
+    [h]
+  ), A = f(
+    () => m.reduce((e, n) => e + (n.width ?? 0), 0),
+    [m]
+  ), H = c(
+    (e) => {
+      const n = i.left ?? [];
+      if (n.length === 0) return [];
+      try {
+        const t = u.getRowModel().rows[e];
+        if (!t) return [];
+        const r = t.getAllCells();
+        return n.map((l) => {
+          const s = r.find((p) => p.column.id === l);
+          return s ? {
+            columnId: s.column.id,
+            value: s.getValue(),
+            row: t.original,
+            rowIndex: e
+          } : null;
+        }).filter((l) => l !== null);
+      } catch {
+        return [];
+      }
+    },
+    [i, u]
+  ), S = c(
+    (e) => {
+      const n = i.left ?? [], t = i.right ?? [], r = [...n, ...t];
+      try {
+        const l = u.getRowModel().rows[e];
+        return l ? l.getAllCells().filter((s) => !r.includes(s.column.id)).map((s) => ({
+          columnId: s.column.id,
+          value: s.getValue(),
+          row: l.original,
+          rowIndex: e
+        })) : [];
+      } catch {
+        return [];
+      }
+    },
+    [i, u]
+  ), V = c(
+    (e) => {
+      const n = i.right ?? [];
+      if (n.length === 0) return [];
+      try {
+        const t = u.getRowModel().rows[e];
+        if (!t) return [];
+        const r = t.getAllCells();
+        return n.map((l) => {
+          const s = r.find((p) => p.column.id === l);
+          return s ? {
+            columnId: s.column.id,
+            value: s.getValue(),
+            row: t.original,
+            rowIndex: e
+          } : null;
+        }).filter((l) => l !== null);
+      } catch {
+        return [];
+      }
+    },
+    [i, u]
+  );
+  return {
+    pinningState: i,
+    pinColumn: P,
+    unpinColumn: R,
+    isPinned: v,
+    getLeftCells: H,
+    getCenterCells: S,
+    getRightCells: V,
+    leftHeaders: h,
+    centerHeaders: b,
+    rightHeaders: m,
+    leftWidth: M,
+    rightWidth: A
+  };
+}
+export {
+  L as useTablePinning
+};

package/dist/Data/Table/hooks/useTableSelection/useTableSelection.js

@@ -0,0 +1,75 @@
+import { useState as A, useMemo as a, useCallback as i } from "react";
+function C(c = {}) {
+  return {
+    type: "selection",
+    options: c,
+    // `create` is invoked (as a hook) from within `useTable`, so calling
+    // React hooks inside it is safe — call order is stable per render.
+    create: (l, s) => (
+      // oxlint-disable-next-line react/rules-of-hooks
+      j(l, s, c)
+    )
+  };
+}
+function j(c, l, s) {
+  const [r, o] = A(() => {
+    const e = {};
+    if (s.initial)
+      for (const t of s.initial)
+        e[String(t)] = !0;
+    return e;
+  }), f = a(
+    () => Object.keys(r).filter((e) => r[e]),
+    [r]
+  ), u = a(() => c.length === 0 ? !1 : c.every((e, t) => {
+    const n = String(l(e, t));
+    return r[n] === !0;
+  }), [c, l, r]), g = f.length > 0 && !u, k = i(
+    (e) => r[String(e)] === !0,
+    [r]
+  ), y = i((e) => {
+    const t = String(e);
+    o((n) => ({ ...n, [t]: !n[t] }));
+  }, []), d = i(() => {
+    o(() => {
+      if (u) return {};
+      const e = {};
+      for (let t = 0; t < c.length; t++) {
+        const n = String(l(c[t], t));
+        e[n] = !0;
+      }
+      return e;
+    });
+  }, [u, c, l]), m = i((e) => {
+    o((t) => {
+      const n = { ...t };
+      for (const S of e)
+        n[String(S)] = !0;
+      return n;
+    });
+  }, []), b = i((e) => {
+    o((t) => {
+      const n = { ...t };
+      for (const S of e)
+        delete n[String(S)];
+      return n;
+    });
+  }, []), h = i(() => {
+    o({});
+  }, []);
+  return {
+    selection: r,
+    isSelected: k,
+    isAllSelected: u,
+    isSomeSelected: g,
+    toggle: y,
+    toggleAll: d,
+    select: m,
+    deselect: b,
+    clear: h,
+    selectedKeys: f
+  };
+}
+export {
+  C as useTableSelection
+};

package/dist/Data/Table/hooks/useTableSorting/useTableSorting.js

@@ -0,0 +1,37 @@
+import { useState as d, useCallback as n } from "react";
+function g(i = {}) {
+  return {
+    type: "sorting",
+    // oxlint-disable-next-line react/rules-of-hooks
+    create: () => f(i),
+    options: i
+  };
+}
+function f(i) {
+  const [t, r] = d(
+    i.initial ?? null
+  ), c = n((e) => {
+    r(e);
+  }, []), l = n((e) => {
+    r((o) => (o == null ? void 0 : o.field) !== e ? { field: e, direction: "asc" } : o.direction === "asc" ? { field: e, direction: "desc" } : null);
+  }, []), s = n(() => {
+    r(null);
+  }, []), u = n(
+    (e) => (t == null ? void 0 : t.field) === e,
+    [t]
+  ), a = n(
+    (e) => (t == null ? void 0 : t.field) === e ? t.direction : null,
+    [t]
+  );
+  return {
+    sorting: t,
+    set: c,
+    toggle: l,
+    clear: s,
+    isSorted: u,
+    getDirection: a
+  };
+}
+export {
+  g as useTableSorting
+};

package/dist/Data/Table/hooks/useTableVirtual/context.js

@@ -0,0 +1,9 @@
+import { createContext as t, useContext as e } from "react";
+const n = t(null);
+function r() {
+  return e(n);
+}
+export {
+  n as TableVirtualContext,
+  r as useTableVirtualContext
+};

package/dist/Data/Table/hooks/useTableVirtual/useTableVirtual.js

@@ -0,0 +1,53 @@
+import { useVirtualizer as m } from "@tanstack/react-virtual";
+import { useState as v, useRef as z, useCallback as l, useMemo as S } from "react";
+const V = 52;
+function H(a, f = {}) {
+  const { maxHeight: u, estimateSize: w = V, overscan: p = 8 } = f, [b, T] = v(null), i = z(null), c = l((t) => {
+    const e = i.current;
+    if (t && e && e !== t && e.isConnected)
+      throw new Error(
+        "This useTableVirtual() is already driving another table. Two tables sharing one virtualiser would fight over the scrollport and the first would stop virtualising, silently. Give each table its own useTableVirtual() and its own TableVirtualized."
+      );
+    i.current = t, T((g) => g === t ? g : t);
+  }, []), r = m({
+    count: a.length,
+    getScrollElement: () => b,
+    estimateSize: () => w,
+    overscan: p
+  }), o = r.getVirtualItems(), n = r.getTotalSize(), d = l(
+    (t) => {
+      t && r.measureElement(t);
+    },
+    [r]
+  ), h = l(
+    (t) => {
+      var e;
+      return ((e = o[t]) == null ? void 0 : e.index) ?? -1;
+    },
+    [o]
+  ), s = o[o.length - 1];
+  return S(
+    () => {
+      var t;
+      return {
+        rows: o.map((e) => a[e.index]),
+        total: a.length,
+        indexOf: h,
+        containerRef: i,
+        claim: c,
+        maxHeight: u,
+        padStart: ((t = o[0]) == null ? void 0 : t.start) ?? 0,
+        // No window yet — the first render, before the scrollport has been
+        // measured. The table still has to be as tall as the list it stands for:
+        // collapse it to nothing and there is no overflow, nothing to scroll, and
+        // so nothing that would ever produce a window.
+        padEnd: s ? n - s.end : n,
+        measure: d
+      };
+    },
+    [o, a, h, c, u, s, n, d]
+  );
+}
+export {
+  H as useTableVirtual
+};

package/dist/Display/AiTag/AiTag.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { moduleClasses as f } from "../../lib/cssModules.js";
+import { cn as l } from "../../lib/utils.js";
+import d from "./AiTag.module.css.js";
+import { aiTagVariants as n } from "./index.js";
+const g = p(
+  ({
+    className: a,
+    color: o = "ai",
+    variant: t = "outline",
+    size: m = "sm",
+    dataTestid: r,
+    ...i
+  }, s) => /* @__PURE__ */ e(
+    "span",
+    {
+      ref: s,
+      "data-slot": "ai-tag",
+      "data-testid": r,
+      className: l(
+        f(d, n({ color: o, variant: t, size: m })),
+        a
+      ),
+      ...i
+    }
+  )
+);
+g.displayName = "OxAiTag";
+export {
+  g as AiTag
+};

package/dist/Display/AiTag/AiTag.module.css.js

@@ -0,0 +1,12 @@
+const a = {
+  "ox-ai-tag": "_ox-ai-tag_1c51r_2",
+  "ox-ai-tag--sm": "_ox-ai-tag--sm_1c51r_2",
+  "ox-ai-tag--md": "_ox-ai-tag--md_1c51r_2",
+  "ox-ai-tag--ai": "_ox-ai-tag--ai_1c51r_2",
+  "ox-ai-tag--muted": "_ox-ai-tag--muted_1c51r_2",
+  "ox-ai-tag--outline": "_ox-ai-tag--outline_1c51r_2",
+  "ox-ai-tag--filled": "_ox-ai-tag--filled_1c51r_2"
+};
+export {
+  a as default
+};

package/dist/Display/AiTag/index.js

@@ -0,0 +1,25 @@
+import { cva as a } from "class-variance-authority";
+const t = a("ox-ai-tag", {
+  variants: {
+    color: {
+      ai: "ox-ai-tag--ai",
+      muted: "ox-ai-tag--muted"
+    },
+    variant: {
+      outline: "ox-ai-tag--outline",
+      filled: "ox-ai-tag--filled"
+    },
+    size: {
+      sm: "ox-ai-tag--sm",
+      md: "ox-ai-tag--md"
+    }
+  },
+  defaultVariants: {
+    color: "ai",
+    variant: "outline",
+    size: "sm"
+  }
+});
+export {
+  t as aiTagVariants
+};