mainstack-design-system 1.12.0 → 1.12.1

package/dist/index.d.ts

@@ -9417,7 +9417,7 @@ declare interface TableBodyProps extends React.ComponentPropsWithoutRef<"tbody">
 }
 
 export declare const TableCell: {
-    ({ isSticky, className, ...props }: TableCellProps): JSX.Element;
+    ({ isSticky, stickySide, className, ...props }: TableCellProps): JSX.Element;
     displayName: string;
 };
 
@@ -9436,6 +9436,7 @@ declare interface TableCellLabelProps extends React_2.HTMLAttributes<HTMLDivElem
 
 declare interface TableCellProps extends React.ComponentPropsWithoutRef<"td"> {
     isSticky?: boolean;
+    stickySide?: "left" | "right";
 }
 
 export declare const TableGroup: {
@@ -9452,7 +9453,7 @@ export declare const TableGroup: {
         displayName: string;
     };
     Cell: {
-        ({ isSticky, className, ...props }: TableCellProps): JSX.Element;
+        ({ isSticky, stickySide, className, ...props }: TableCellProps): JSX.Element;
         displayName: string;
     };
     CellLable: ForwardRefExoticComponent<TableCellLabelProps & RefAttributes<HTMLDivElement>>;
@@ -9466,7 +9467,7 @@ export declare const TableGroup: {
         displayName: string;
     };
     Head: {
-        ({ isSticky, className, ...props }: TableHeadProps): JSX.Element;
+        ({ isSticky, stickySide, className, ...props }: TableHeadProps): JSX.Element;
         displayName: string;
     };
     Pagination: {
@@ -9476,7 +9477,7 @@ export declare const TableGroup: {
 };
 
 export declare const TableHead: {
-    ({ isSticky, className, ...props }: TableHeadProps): JSX.Element;
+    ({ isSticky, stickySide, className, ...props }: TableHeadProps): JSX.Element;
     displayName: string;
 };
 
@@ -9490,6 +9491,7 @@ declare interface TableHeaderProps extends React.ComponentPropsWithoutRef<"thead
 
 declare interface TableHeadProps extends React.ComponentPropsWithoutRef<"th"> {
     isSticky?: boolean;
+    stickySide?: "left" | "right";
 }
 
 export declare const TablePagination: {

package/dist/mainstack-design-system547.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("./utils-sX9NhwD-.cjs"),l=require("react"),R=require("./mainstack-design-system600.cjs"),c=({className:i,...u})=>{const s=l.useRef(null),[a,r]=l.useState(!1),[m,f]=l.useState(!1);return l.useEffect(()=>{const t=s.current;if(!t)return;let e;const o=()=>{r(!0),e&&clearTimeout(e),e=setTimeout(()=>r(!1),150);const{scrollTop:d,scrollHeight:T,clientHeight:b}=t;f(d+b>=T-1)};return t.addEventListener("scroll",o),o(),()=>{t.removeEventListener("scroll",o),e&&clearTimeout(e)}},[]),n.jsx(R.TableContext.Provider,{value:{isScrolling:a,atBottom:m},children:n.jsx("div",{ref:s,className:v.cn("mds:w-full mds:mx-auto ",i),...u})})};c.displayName="TableRoot";exports.TableRoot=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),w=require("./utils-sX9NhwD-.cjs"),e=require("react"),E=require("./mainstack-design-system600.cjs"),a=({className:c,...u})=>{const[t,l]=e.useState(null),[d,r]=e.useState(!1),[m,f]=e.useState(!1),[v,S]=e.useState(!0),[T,b]=e.useState(!1);return e.useEffect(()=>{if(!t)return;let s;const o=()=>{r(!0),s&&clearTimeout(s),s=setTimeout(()=>r(!1),150);const{scrollTop:g,scrollHeight:h,clientHeight:L,scrollLeft:n,scrollWidth:R,clientWidth:x}=t;f(g+L>=h-1),S(n<=2),b(n+x>=R-2)};return t.addEventListener("scroll",o),window.addEventListener("resize",o),o(),()=>{t.removeEventListener("scroll",o),window.removeEventListener("resize",o),s&&clearTimeout(s)}},[t]),i.jsx(E.TableContext.Provider,{value:{isScrolling:d,atBottom:m,atLeft:v,atRight:T,setScrollContainer:l},children:i.jsx("div",{ref:l,className:w.cn("mds:w-full mds:mx-auto mds:relative",c),...u})})};a.displayName="TableRoot";exports.TableRoot=a;

package/dist/mainstack-design-system547.js

@@ -1,31 +1,45 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as T } from "./utils-BuJ7DVbu.js";
-import { useRef as v, useState as c, useEffect as g } from "react";
-import { TableContext as h } from "./mainstack-design-system600.js";
-const x = ({ className: i, ...n }) => {
-  const l = v(null), [m, r] = c(!1), [a, f] = c(!1);
-  return g(() => {
-    const t = l.current;
+import { jsx as n } from "react/jsx-runtime";
+import { c as S } from "./utils-BuJ7DVbu.js";
+import { useState as r, useEffect as x } from "react";
+import { TableContext as R } from "./mainstack-design-system600.js";
+const b = ({ className: c, ...a }) => {
+  const [t, l] = r(
+    null
+  ), [m, s] = r(!1), [f, d] = r(!1), [u, v] = r(!0), [h, p] = r(!1);
+  return x(() => {
     if (!t) return;
     let e;
     const o = () => {
-      r(!0), e && clearTimeout(e), e = setTimeout(() => r(!1), 150);
-      const { scrollTop: u, scrollHeight: d, clientHeight: p } = t;
-      f(u + p >= d - 1);
+      s(!0), e && clearTimeout(e), e = setTimeout(() => s(!1), 150);
+      const {
+        scrollTop: L,
+        scrollHeight: T,
+        clientHeight: g,
+        scrollLeft: i,
+        scrollWidth: w,
+        clientWidth: E
+      } = t;
+      d(L + g >= T - 1), v(i <= 2), p(i + E >= w - 2);
     };
-    return t.addEventListener("scroll", o), o(), () => {
-      t.removeEventListener("scroll", o), e && clearTimeout(e);
+    return t.addEventListener("scroll", o), window.addEventListener("resize", o), o(), () => {
+      t.removeEventListener("scroll", o), window.removeEventListener("resize", o), e && clearTimeout(e);
     };
-  }, []), /* @__PURE__ */ s(h.Provider, { value: { isScrolling: m, atBottom: a }, children: /* @__PURE__ */ s(
-    "div",
+  }, [t]), /* @__PURE__ */ n(
+    R.Provider,
     {
-      ref: l,
-      className: T("mds:w-full mds:mx-auto ", i),
-      ...n
+      value: { isScrolling: m, atBottom: f, atLeft: u, atRight: h, setScrollContainer: l },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: l,
+          className: S("mds:w-full mds:mx-auto mds:relative", c),
+          ...a
+        }
+      )
     }
-  ) });
+  );
 };
-x.displayName = "TableRoot";
+b.displayName = "TableRoot";
 export {
-  x as TableRoot
+  b as TableRoot
 };

package/dist/mainstack-design-system548.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./utils-sX9NhwD-.cjs"),t=({className:s,...r})=>e.jsx("div",{"data-slot":"table-container",className:a.cn("mds:overflow-auto mds:md:border mds:md:border-border-interactive-neutral mds:rounded-20 mds:sm:justify-center",s),children:e.jsx("table",{"data-slot":"table",className:"mds:text-left mds:w-full",...r})});t.displayName="Table";exports.Table=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./utils-sX9NhwD-.cjs"),o=require("./mainstack-design-system600.cjs"),t=({className:s,...l})=>{const{setScrollContainer:r}=o.useTableScroll();return e.jsx("div",{"data-slot":"table-container",ref:r,className:a.cn("mds:overflow-auto mds:md:border mds:md:border-border-interactive-neutral mds:rounded-20 mds:sm:justify-center",s),children:e.jsx("table",{"data-slot":"table",className:"mds:text-left mds:w-full",...l})})};t.displayName="Table";exports.Table=t;

package/dist/mainstack-design-system548.js

@@ -1,24 +1,29 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as r } from "./utils-BuJ7DVbu.js";
-const d = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-slot": "table-container",
-    className: r(
-      "mds:overflow-auto mds:md:border mds:md:border-border-interactive-neutral mds:rounded-20 mds:sm:justify-center",
-      t
-    ),
-    children: /* @__PURE__ */ e(
-      "table",
-      {
-        "data-slot": "table",
-        className: "mds:text-left mds:w-full",
-        ...a
-      }
-    )
-  }
-);
-d.displayName = "Table";
+import { c as o } from "./utils-BuJ7DVbu.js";
+import { useTableScroll as s } from "./mainstack-design-system600.js";
+const l = ({ className: r, ...t }) => {
+  const { setScrollContainer: a } = s();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "table-container",
+      ref: a,
+      className: o(
+        "mds:overflow-auto mds:md:border mds:md:border-border-interactive-neutral mds:rounded-20 mds:sm:justify-center",
+        r
+      ),
+      children: /* @__PURE__ */ e(
+        "table",
+        {
+          "data-slot": "table",
+          className: "mds:text-left mds:w-full",
+          ...t
+        }
+      )
+    }
+  );
+};
+l.displayName = "Table";
 export {
-  d as Table
+  l as Table
 };

package/dist/mainstack-design-system550.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("./utils-sX9NhwD-.cjs"),l=({isSticky:e,className:s,...t})=>a.jsx("td",{role:"cell","data-slot":"table-cell","data-sticky-cell":e,className:d.cn("mds:p-12 mds:body-extrasmall-regular",e?"mds:md:sticky mds:md:left-0 mds:md:bg-surface-neutral-l1 mds:md:z-10":"",s),...t});l.displayName="TableCell";exports.TableCell=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),r=require("./utils-sX9NhwD-.cjs"),n=require("./mainstack-design-system600.cjs"),t=({isSticky:e,stickySide:l="left",className:a,...s})=>{const{atLeft:d,atRight:o}=n.useTableScroll();return m.jsx("td",{role:"cell","data-slot":"table-cell","data-sticky-cell":e,className:r.cn("mds:p-12 mds:body-extrasmall-regular mds:transition-shadow mds:duration-200",e&&"mds:md:sticky mds:md:bg-surface-neutral-l1 mds:md:z-10",e&&l==="left"&&"mds:md:left-0",e&&l==="right"&&"mds:md:right-0",e&&l==="left"&&(d?"mds:shadow-none":"mds:shadow-100"),e&&l==="right"&&(o?"mds:shadow-none":"mds:shadow-100"),a),...s})};t.displayName="TableCell";exports.TableCell=t;

package/dist/mainstack-design-system550.js

@@ -1,24 +1,33 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as s } from "./utils-BuJ7DVbu.js";
-const d = ({
+import { jsx as o } from "react/jsx-runtime";
+import { c as t } from "./utils-BuJ7DVbu.js";
+import { useTableScroll as r } from "./mainstack-design-system600.js";
+const n = ({
   isSticky: l,
-  className: e,
-  ...a
-}) => /* @__PURE__ */ m(
-  "td",
-  {
-    role: "cell",
-    "data-slot": "table-cell",
-    "data-sticky-cell": l,
-    className: s(
-      "mds:p-12 mds:body-extrasmall-regular",
-      l ? "mds:md:sticky mds:md:left-0 mds:md:bg-surface-neutral-l1 mds:md:z-10" : "",
-      e
-    ),
-    ...a
-  }
-);
-d.displayName = "TableCell";
+  stickySide: a = "left",
+  className: m,
+  ...d
+}) => {
+  const { atLeft: s, atRight: e } = r();
+  return /* @__PURE__ */ o(
+    "td",
+    {
+      role: "cell",
+      "data-slot": "table-cell",
+      "data-sticky-cell": l,
+      className: t(
+        "mds:p-12 mds:body-extrasmall-regular mds:transition-shadow mds:duration-200",
+        l && "mds:md:sticky mds:md:bg-surface-neutral-l1 mds:md:z-10",
+        l && a === "left" && "mds:md:left-0",
+        l && a === "right" && "mds:md:right-0",
+        l && a === "left" && (s ? "mds:shadow-none" : "mds:shadow-100"),
+        l && a === "right" && (e ? "mds:shadow-none" : "mds:shadow-100"),
+        m
+      ),
+      ...d
+    }
+  );
+};
+n.displayName = "TableCell";
 export {
-  d as TableCell
+  n as TableCell
 };

package/dist/mainstack-design-system553.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("./utils-sX9NhwD-.cjs"),e=({isSticky:s,className:d,...t})=>a.jsx("th",{role:"columnheader","data-slot":"table-head",className:l.cn(s?"mds:sticky mds:left-0 mds:bg-surface-neutral-l3 mds:z-10":"","mds:text-secondary mds:px-12 mds:py-16 mds:text-left mds:align-middle mds:body-small-medium mds:whitespace-nowrap",d),...t});e.displayName="TableHead";exports.TableHead=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("./utils-sX9NhwD-.cjs"),r=require("./mainstack-design-system600.cjs"),a=({isSticky:e,stickySide:s="left",className:t,...d})=>{const{atLeft:l,atRight:m}=r.useTableScroll();return o.jsx("th",{role:"columnheader","data-slot":"table-head",className:n.cn(e&&"mds:sticky mds:bg-surface-neutral-l3 mds:z-10",e&&s==="left"&&"mds:left-0",e&&s==="right"&&"mds:right-0",e&&s==="left"&&(l?"mds:shadow-none":"mds:shadow-100"),e&&s==="right"&&(m?"mds:shadow-none":"mds:shadow-100"),"mds:text-secondary mds:px-12 mds:py-16 mds:text-left mds:align-middle mds:body-small-medium mds:whitespace-nowrap mds:transition-shadow mds:duration-200",t),...d})};a.displayName="TableHead";exports.TableHead=a;

package/dist/mainstack-design-system553.js

@@ -1,23 +1,32 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as a } from "./utils-BuJ7DVbu.js";
-const t = ({
-  isSticky: e,
-  className: s,
-  ...d
-}) => /* @__PURE__ */ m(
-  "th",
-  {
-    role: "columnheader",
-    "data-slot": "table-head",
-    className: a(
-      e ? "mds:sticky mds:left-0 mds:bg-surface-neutral-l3 mds:z-10" : "",
-      "mds:text-secondary mds:px-12 mds:py-16 mds:text-left mds:align-middle mds:body-small-medium mds:whitespace-nowrap",
-      s
-    ),
-    ...d
-  }
-);
-t.displayName = "TableHead";
+import { jsx as o } from "react/jsx-runtime";
+import { c as l } from "./utils-BuJ7DVbu.js";
+import { useTableScroll as r } from "./mainstack-design-system600.js";
+const n = ({
+  isSticky: d,
+  stickySide: a = "left",
+  className: m,
+  ...s
+}) => {
+  const { atLeft: e, atRight: t } = r();
+  return /* @__PURE__ */ o(
+    "th",
+    {
+      role: "columnheader",
+      "data-slot": "table-head",
+      className: l(
+        d && "mds:sticky mds:bg-surface-neutral-l3 mds:z-10",
+        d && a === "left" && "mds:left-0",
+        d && a === "right" && "mds:right-0",
+        d && a === "left" && (e ? "mds:shadow-none" : "mds:shadow-100"),
+        d && a === "right" && (t ? "mds:shadow-none" : "mds:shadow-100"),
+        "mds:text-secondary mds:px-12 mds:py-16 mds:text-left mds:align-middle mds:body-small-medium mds:whitespace-nowrap mds:transition-shadow mds:duration-200",
+        m
+      ),
+      ...s
+    }
+  );
+};
+n.displayName = "TableHead";
 export {
-  t as TableHead
+  n as TableHead
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "type": "module",
   "main": "./dist/mainstack-design-system.cjs",
   "module": "./dist/mainstack-design-system.js",