@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Data/Table/TableCell/TableCell.js

@@ -0,0 +1,47 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as C } from "../../../lib/utils.js";
+import l from "./TableCell.module.css.js";
+const m = {
+  left: l.oxTableCellAlignLeft,
+  center: l.oxTableCellAlignCenter,
+  right: l.oxTableCellAlignRight
+}, c = s(
+  ({
+    className: a,
+    align: o = "left",
+    fixed: e,
+    fixedOffset: i = "0px",
+    style: t,
+    children: r,
+    ...x
+  }, b) => /* @__PURE__ */ f(
+    "td",
+    {
+      ref: b,
+      className: C(
+        l.oxTableCell,
+        m[o],
+        // Literal global class names referenced by Table's global stylesheet.
+        e && ["table-cell-fixed", l.oxTableCellFixed],
+        e === "left" && [
+          "table-cell-fixed-left",
+          l.oxTableCellFixedLeft
+        ],
+        e === "right" && [
+          "table-cell-fixed-right",
+          l.oxTableCellFixedRight
+        ],
+        a
+      ),
+      style: e ? { [e]: i, ...t } : t,
+      "data-slot": "cell",
+      ...x,
+      children: r
+    }
+  )
+);
+c.displayName = "OxTableCell";
+export {
+  c as TableCell
+};

package/dist/Data/Table/TableCell/TableCell.module.css.js

@@ -0,0 +1,15 @@
+const l = "_oxTableCell_2knzy_2", e = "_oxTableCellAlignLeft_2knzy_2", n = "_oxTableCellAlignCenter_2knzy_2", o = "_oxTableCellAlignRight_2knzy_2", x = "_oxTableCellFixed_2knzy_2", t = {
+  oxTableCell: l,
+  oxTableCellAlignLeft: e,
+  oxTableCellAlignCenter: n,
+  oxTableCellAlignRight: o,
+  oxTableCellFixed: x
+};
+export {
+  t as default,
+  l as oxTableCell,
+  n as oxTableCellAlignCenter,
+  e as oxTableCellAlignLeft,
+  o as oxTableCellAlignRight,
+  x as oxTableCellFixed
+};

package/dist/Data/Table/TableColumnVisibility/TableColumnVisibility.js

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Checkbox as u } from "../../../Forms/Inputs/Toggle/Checkbox/Checkbox.js";
+import { cn as x } from "../../../lib/utils.js";
+import e from "./TableColumnVisibility.module.css.js";
+import { useTranslate as h } from "../../../Locale/useTranslate.js";
+const p = f(
+  ({ className: m, columns: t, visibility: r = {}, header: o, onToggle: s, ...b }, d) => {
+    const n = h(), c = (i) => r[i] !== !1;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: d,
+        className: x(e.oxTableColumnVisibility, m),
+        "data-slot": "column-visibility",
+        ...b,
+        children: [
+          o ?? /* @__PURE__ */ l("div", { className: e.oxTableColumnVisibilityHeader, children: n("orxata.table.columns") }),
+          /* @__PURE__ */ l("div", { className: e.oxTableColumnVisibilityList, children: t.map((i) => /* @__PURE__ */ a(
+            "label",
+            {
+              className: e.oxTableColumnVisibilityItem,
+              children: [
+                /* @__PURE__ */ l(
+                  u,
+                  {
+                    checked: c(i.field),
+                    onCheckedChange: () => s == null ? void 0 : s(i.field)
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: e.oxTableColumnVisibilityLabel, children: i.header ?? i.field })
+              ]
+            },
+            i.field
+          )) })
+        ]
+      }
+    );
+  }
+);
+p.displayName = "OxTableColumnVisibility";
+export {
+  p as TableColumnVisibility
+};

package/dist/Data/Table/TableColumnVisibility/TableColumnVisibility.module.css.js

@@ -0,0 +1,15 @@
+const i = "_oxTableColumnVisibility_39rmt_2", l = "_oxTableColumnVisibilityHeader_39rmt_2", o = "_oxTableColumnVisibilityList_39rmt_2", t = "_oxTableColumnVisibilityItem_39rmt_2", b = "_oxTableColumnVisibilityLabel_39rmt_2", e = {
+  oxTableColumnVisibility: i,
+  oxTableColumnVisibilityHeader: l,
+  oxTableColumnVisibilityList: o,
+  oxTableColumnVisibilityItem: t,
+  oxTableColumnVisibilityLabel: b
+};
+export {
+  e as default,
+  i as oxTableColumnVisibility,
+  l as oxTableColumnVisibilityHeader,
+  t as oxTableColumnVisibilityItem,
+  b as oxTableColumnVisibilityLabel,
+  o as oxTableColumnVisibilityList
+};

package/dist/Data/Table/TableDragCell/TableDragCell.js

@@ -0,0 +1,48 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconGripVertical as p } from "@sesame/orxata-icons/IconGripVertical";
+import { Icon as d } from "@sesame/orxata-icons/react";
+import { forwardRef as g, useContext as x } from "react";
+import { cn as C } from "../../../lib/utils.js";
+import { RowDragContext as b } from "../TableRow/rowDrag.js";
+import r from "./TableDragCell.module.css.js";
+const D = g(
+  ({
+    className: s,
+    header: e = !1,
+    fixed: a = !1,
+    fixedOffset: i = "0px",
+    style: l,
+    ...n
+  }, c) => {
+    const m = e ? "th" : "td", o = x(b), f = o ? { ...o.attributes, ...o.listeners } : {};
+    return /* @__PURE__ */ t(
+      m,
+      {
+        ref: c,
+        className: C(
+          r.oxTableDragCell,
+          e && r.oxTableDragCellHeader,
+          a && r.oxTableDragCellFixed,
+          s
+        ),
+        style: a ? { left: i, ...l } : l,
+        "data-slot": "drag",
+        ...n,
+        children: !e && /* @__PURE__ */ t(
+          "div",
+          {
+            ref: o ? o.setActivatorNodeRef : void 0,
+            className: r.oxTableDragCellContent,
+            style: o ? { cursor: "grab", touchAction: "none" } : void 0,
+            ...f,
+            children: /* @__PURE__ */ t(d, { icon: p, className: r.oxTableDragIcon })
+          }
+        )
+      }
+    );
+  }
+);
+D.displayName = "OxTableDragCell";
+export {
+  D as TableDragCell
+};

package/dist/Data/Table/TableDragCell/TableDragCell.module.css.js

@@ -0,0 +1,15 @@
+const e = "_oxTableDragCell_232rp_2", l = "_oxTableDragCellHeader_232rp_2", a = "_oxTableDragCellContent_232rp_2", o = "_oxTableDragIcon_232rp_2", r = "_oxTableDragCellFixed_232rp_2", x = {
+  oxTableDragCell: e,
+  oxTableDragCellHeader: l,
+  oxTableDragCellContent: a,
+  oxTableDragIcon: o,
+  oxTableDragCellFixed: r
+};
+export {
+  x as default,
+  e as oxTableDragCell,
+  a as oxTableDragCellContent,
+  r as oxTableDragCellFixed,
+  l as oxTableDragCellHeader,
+  o as oxTableDragIcon
+};

package/dist/Data/Table/TableEmpty/TableEmpty.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { cn as s } from "../../../lib/utils.js";
+import e from "./TableEmpty.module.css.js";
+import { useTranslate as i } from "../../../Locale/useTranslate.js";
+const y = l(
+  ({ className: m, children: r, ...a }, o) => {
+    const p = i();
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: o,
+        className: s(e.oxTableEmpty, m),
+        "data-slot": "empty",
+        ...a,
+        children: r ?? /* @__PURE__ */ t("p", { className: e.oxTableEmptyText, children: p("orxata.table.empty") })
+      }
+    );
+  }
+);
+y.displayName = "OxTableEmpty";
+export {
+  y as TableEmpty
+};

package/dist/Data/Table/TableEmpty/TableEmpty.module.css.js

@@ -0,0 +1,9 @@
+const t = "_oxTableEmpty_1rhdb_2", e = "_oxTableEmptyText_1rhdb_2", o = {
+  oxTableEmpty: t,
+  oxTableEmptyText: e
+};
+export {
+  o as default,
+  t as oxTableEmpty,
+  e as oxTableEmptyText
+};

package/dist/Data/Table/TableExpandCell/TableExpandCell.js

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as o } from "../../../lib/utils.js";
+import a from "./TableExpandCell.module.css.js";
+const x = s(
+  ({ className: n, expanded: r = !1, header: t = !1, onToggle: e, ...p }, d) => /* @__PURE__ */ l(
+    t ? "th" : "td",
+    {
+      ref: d,
+      className: o(
+        a.oxTableExpandCell,
+        t && a.oxTableExpandCellHeader,
+        n
+      ),
+      "data-slot": "expand",
+      ...p,
+      children: !t && /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          className: o(
+            a.oxTableExpandButton,
+            r && a.oxTableExpandButtonExpanded
+          ),
+          onClick: () => e == null ? void 0 : e(),
+          children: /* @__PURE__ */ l(
+            "svg",
+            {
+              className: a.oxTableExpandIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ l("path", { d: "M9 18l6-6-6-6" })
+            }
+          )
+        }
+      )
+    }
+  )
+);
+x.displayName = "OxTableExpandCell";
+export {
+  x as TableExpandCell
+};

package/dist/Data/Table/TableExpandCell/TableExpandCell.module.css.js

@@ -0,0 +1,15 @@
+const a = "_oxTableExpandCell_643ul_2", l = "_oxTableExpandCellHeader_643ul_2", x = "_oxTableExpandButton_643ul_2", e = "_oxTableExpandButtonExpanded_643ul_2", n = "_oxTableExpandIcon_643ul_2", o = {
+  oxTableExpandCell: a,
+  oxTableExpandCellHeader: l,
+  oxTableExpandButton: x,
+  oxTableExpandButtonExpanded: e,
+  oxTableExpandIcon: n
+};
+export {
+  o as default,
+  x as oxTableExpandButton,
+  e as oxTableExpandButtonExpanded,
+  a as oxTableExpandCell,
+  l as oxTableExpandCellHeader,
+  n as oxTableExpandIcon
+};

package/dist/Data/Table/TableHead/TableHead.js

@@ -0,0 +1,79 @@
+import { jsxs as N, Fragment as q, jsx as g } from "react/jsx-runtime";
+import { forwardRef as z, useRef as w, useCallback as M, useEffect as O } from "react";
+import { cn as X } from "../../../lib/utils.js";
+import m from "./TableHead.module.css.js";
+import { useTableVirtualContext as j } from "../hooks/useTableVirtual/context.js";
+function B(i) {
+  let n = i.parentElement;
+  for (; n; ) {
+    const s = getComputedStyle(n);
+    if (s.overflowX !== "visible" || s.overflowY !== "visible")
+      return n;
+    n = n.parentElement;
+  }
+  return null;
+}
+function A(i) {
+  const n = [i, i.parentElement].find(
+    (s) => s && parseFloat(getComputedStyle(s).borderTopLeftRadius) > 0
+  );
+  return n ? getComputedStyle(n).borderTopLeftRadius : "0px";
+}
+const P = z(
+  ({ className: i, children: n, ...s }, b) => {
+    const r = j(), y = w(null), R = w(null), v = w(null), a = M(() => {
+      const e = y.current, o = R.current, l = v.current, d = r == null ? void 0 : r.containerRef.current;
+      if (!e || !o || !l || !d) return;
+      const p = e.closest("table"), f = B(e), u = o.offsetParent ?? document.body;
+      if (!p || !f) return;
+      const t = p.getBoundingClientRect(), c = f.getBoundingClientRect(), h = d.getBoundingClientRect(), E = u.getBoundingClientRect(), L = E.left + u.clientLeft, H = E.top + u.clientTop, x = e.querySelector(":scope > tr"), $ = e.querySelectorAll(":scope > tr > *");
+      o.style.left = `${c.left - L}px`, o.style.top = `${h.top + d.clientTop - H}px`, o.style.width = `${c.width}px`, o.style.height = `${(x == null ? void 0 : x.getBoundingClientRect().height) ?? 0}px`;
+      const T = A(d);
+      o.style.borderTopLeftRadius = Math.abs(c.left - h.left) < 2 ? T : "0px", o.style.borderTopRightRadius = Math.abs(c.right - h.right) < 2 ? T : "0px", l.style.width = `${t.width}px`, l.style.transform = `translateX(${t.left - c.left}px)`, $.forEach((S, F) => {
+        const C = l.children[F];
+        C && (C.style.width = `${S.getBoundingClientRect().width}px`);
+      });
+    }, [r]);
+    return O(() => {
+      var u;
+      const e = y.current, o = r == null ? void 0 : r.containerRef.current;
+      if (!e || !o) return;
+      const l = B(e), d = e.closest("table"), p = [o, l].filter(
+        (t, c, h) => !!t && h.indexOf(t) === c
+      );
+      p.forEach(
+        (t) => t.addEventListener("scroll", a, { passive: !0 })
+      );
+      const f = new ResizeObserver(a);
+      return [o, l, d, (u = R.current) == null ? void 0 : u.offsetParent].forEach((t) => {
+        t instanceof HTMLElement && f.observe(t);
+      }), e.querySelectorAll(":scope > tr, :scope > tr > *").forEach((t) => f.observe(t)), window.addEventListener("resize", a, { passive: !0 }), a(), () => {
+        p.forEach(
+          (t) => t.removeEventListener("scroll", a)
+        ), window.removeEventListener("resize", a), f.disconnect();
+      };
+    }), /* @__PURE__ */ N(q, { children: [
+      /* @__PURE__ */ g(
+        "thead",
+        {
+          ref: (e) => {
+            y.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
+          },
+          className: X(
+            m.oxTableHead,
+            r && m.oxTableHeadVirtual,
+            i
+          ),
+          "data-slot": "head",
+          ...s,
+          children: /* @__PURE__ */ g("tr", { "aria-hidden": r ? "true" : void 0, children: n })
+        }
+      ),
+      r && /* @__PURE__ */ g("div", { ref: R, className: m.oxTableHeadFloat, children: /* @__PURE__ */ g("div", { ref: v, className: m.oxTableHeadFloatRow, children: n }) })
+    ] });
+  }
+);
+P.displayName = "OxTableHead";
+export {
+  P as TableHead
+};

package/dist/Data/Table/TableHead/TableHead.module.css.js

@@ -0,0 +1,13 @@
+const a = "_oxTableHead_1en5v_2", e = "_oxTableHeadVirtual_1en5v_2", o = "_oxTableHeadFloat_1en5v_2", l = "_oxTableHeadFloatRow_1en5v_2", t = {
+  oxTableHead: a,
+  oxTableHeadVirtual: e,
+  oxTableHeadFloat: o,
+  oxTableHeadFloatRow: l
+};
+export {
+  t as default,
+  a as oxTableHead,
+  o as oxTableHeadFloat,
+  l as oxTableHeadFloatRow,
+  e as oxTableHeadVirtual
+};

package/dist/Data/Table/TableHeaderCell/TableHeaderCell.js

@@ -0,0 +1,145 @@
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { forwardRef as P, useState as m } from "react";
+import { cn as T } from "../../../lib/utils.js";
+import e from "./TableHeaderCell.module.css.js";
+const U = {
+  left: e.oxTableHeaderCellAlignLeft,
+  center: e.oxTableHeaderCellAlignCenter,
+  right: e.oxTableHeaderCellAlignRight
+}, q = P(
+  ({
+    className: u,
+    sortable: d = !1,
+    sorted: n = !1,
+    sortDirection: C = null,
+    resizable: k = !1,
+    resizing: H = !1,
+    draggable: r = !1,
+    align: N = "left",
+    width: i,
+    fixed: t,
+    fixedOffset: I = "0px",
+    onSort: c,
+    onResizeStart: f,
+    onColumnDrop: g,
+    style: O,
+    children: w,
+    ...A
+  }, M) => {
+    const [y, b] = m(!1), [F, x] = m(!1), L = () => {
+      d && (c == null || c());
+    }, D = (l) => {
+      l.preventDefault(), l.stopPropagation(), f == null || f(l);
+    }, W = (l) => {
+      var p;
+      if (!r) return;
+      b(!0);
+      const s = l.currentTarget.dataset.field;
+      s && ((p = l.dataTransfer) == null || p.setData("text/plain", s), l.dataTransfer.effectAllowed = "move");
+    }, B = () => {
+      b(!1);
+    }, E = (l) => {
+      r && (l.preventDefault(), l.dataTransfer.dropEffect = "move", x(!0));
+    }, R = () => {
+      x(!1);
+    }, j = (l) => {
+      var s;
+      if (!r) return;
+      l.preventDefault(), x(!1);
+      const h = (s = l.dataTransfer) == null ? void 0 : s.getData("text/plain");
+      h && (g == null || g(h));
+    }, o = { ...O };
+    return i && (o.width = i, o.minWidth = i), t && (o[t] = I), /* @__PURE__ */ v(
+      "th",
+      {
+        ref: M,
+        className: T(
+          e.oxTableHeaderCell,
+          U[N],
+          d && e.oxTableHeaderCellSortable,
+          n && e.oxTableHeaderCellSorted,
+          H && e.oxTableHeaderCellResizing,
+          r && e.oxTableHeaderCellDraggable,
+          y && e.oxTableHeaderCellDragging,
+          F && e.oxTableHeaderCellDragOver,
+          // Literal global class names referenced by Table's global stylesheet.
+          t && ["table-header-cell-fixed", e.oxTableHeaderCellFixed],
+          t === "left" && [
+            "table-header-cell-fixed-left",
+            e.oxTableHeaderCellFixedLeft
+          ],
+          t === "right" && [
+            "table-header-cell-fixed-right",
+            e.oxTableHeaderCellFixedRight
+          ],
+          u
+        ),
+        style: o,
+        draggable: r,
+        "data-slot": "header-cell",
+        "aria-sort": n ? C === "asc" ? "ascending" : "descending" : void 0,
+        onClick: L,
+        onDragStart: W,
+        onDragEnd: B,
+        onDragOver: E,
+        onDragLeave: R,
+        onDrop: j,
+        ...A,
+        children: [
+          /* @__PURE__ */ v("div", { className: e.oxTableHeaderCellContent, children: [
+            w,
+            d && /* @__PURE__ */ a("span", { className: e.oxTableHeaderCellIndicator, children: n ? C === "asc" ? /* @__PURE__ */ a(
+              "svg",
+              {
+                className: e.oxTableHeaderCellIcon,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ a("path", { d: "M7 14l5-5 5 5" })
+              }
+            ) : /* @__PURE__ */ a(
+              "svg",
+              {
+                className: e.oxTableHeaderCellIcon,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ a("path", { d: "M7 10l5 5 5-5" })
+              }
+            ) : /* @__PURE__ */ a(
+              "svg",
+              {
+                className: T(
+                  e.oxTableHeaderCellIcon,
+                  e.oxTableHeaderCellIconUnsorted
+                ),
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ a("path", { d: "M7 15l5 5 5-5M7 9l5-5 5 5" })
+              }
+            ) })
+          ] }),
+          k && /* @__PURE__ */ a(
+            "div",
+            {
+              className: T(
+                e.oxTableHeaderCellResizer,
+                H && e.oxTableHeaderCellResizerActive
+              ),
+              onMouseDown: D,
+              onTouchStart: D
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+q.displayName = "OxTableHeaderCell";
+export {
+  q as TableHeaderCell
+};

package/dist/Data/Table/TableHeaderCell/TableHeaderCell.module.css.js

@@ -0,0 +1,39 @@
+const e = "_oxTableHeaderCell_o9ey6_2", l = "_oxTableHeaderCellAlignLeft_o9ey6_2", a = "_oxTableHeaderCellAlignCenter_o9ey6_2", o = "_oxTableHeaderCellAlignRight_o9ey6_2", r = "_oxTableHeaderCellSortable_o9ey6_2", d = "_oxTableHeaderCellSorted_o9ey6_2", b = "_oxTableHeaderCellResizing_o9ey6_2", C = "_oxTableHeaderCellContent_o9ey6_2", x = "_oxTableHeaderCellIndicator_o9ey6_2", n = "_oxTableHeaderCellIcon_o9ey6_2", t = "_oxTableHeaderCellIconUnsorted_o9ey6_2", H = "_oxTableHeaderCellResizer_o9ey6_2", T = "_oxTableHeaderCellResizerActive_o9ey6_2", _ = "_oxTableHeaderCellDraggable_o9ey6_2", i = "_oxTableHeaderCellDragging_o9ey6_2", g = "_oxTableHeaderCellDragOver_o9ey6_2", s = "_oxTableHeaderCellFixed_o9ey6_2", c = {
+  oxTableHeaderCell: e,
+  oxTableHeaderCellAlignLeft: l,
+  oxTableHeaderCellAlignCenter: a,
+  oxTableHeaderCellAlignRight: o,
+  oxTableHeaderCellSortable: r,
+  oxTableHeaderCellSorted: d,
+  oxTableHeaderCellResizing: b,
+  oxTableHeaderCellContent: C,
+  oxTableHeaderCellIndicator: x,
+  oxTableHeaderCellIcon: n,
+  oxTableHeaderCellIconUnsorted: t,
+  oxTableHeaderCellResizer: H,
+  oxTableHeaderCellResizerActive: T,
+  oxTableHeaderCellDraggable: _,
+  oxTableHeaderCellDragging: i,
+  oxTableHeaderCellDragOver: g,
+  oxTableHeaderCellFixed: s
+};
+export {
+  c as default,
+  e as oxTableHeaderCell,
+  a as oxTableHeaderCellAlignCenter,
+  l as oxTableHeaderCellAlignLeft,
+  o as oxTableHeaderCellAlignRight,
+  C as oxTableHeaderCellContent,
+  g as oxTableHeaderCellDragOver,
+  _ as oxTableHeaderCellDraggable,
+  i as oxTableHeaderCellDragging,
+  s as oxTableHeaderCellFixed,
+  n as oxTableHeaderCellIcon,
+  t as oxTableHeaderCellIconUnsorted,
+  x as oxTableHeaderCellIndicator,
+  H as oxTableHeaderCellResizer,
+  T as oxTableHeaderCellResizerActive,
+  b as oxTableHeaderCellResizing,
+  r as oxTableHeaderCellSortable,
+  d as oxTableHeaderCellSorted
+};