@sps-woodland/core 8.50.1 → 8.51.0

package/lib/sorting-header/index.js

@@ -0,0 +1,250 @@
+import * as r from "react";
+import { Metadata as x, cl as E, SortDirection as C, getScrollParent as L, selectChildren as T, modChildren as W } from "@sps-woodland/core";
+import { lockToAnimationFrames as G } from "@spscommerce/utils";
+function H(e, s, n) {
+  return s in e ? Object.defineProperty(e, s, {
+    value: n,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[s] = n, e;
+}
+function A(e, s) {
+  var n = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var t = Object.getOwnPropertySymbols(e);
+    s && (t = t.filter(function(l) {
+      return Object.getOwnPropertyDescriptor(e, l).enumerable;
+    })), n.push.apply(n, t);
+  }
+  return n;
+}
+function D(e) {
+  for (var s = 1; s < arguments.length; s++) {
+    var n = arguments[s] != null ? arguments[s] : {};
+    s % 2 ? A(Object(n), !0).forEach(function(t) {
+      H(e, t, n[t]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : A(Object(n)).forEach(function(t) {
+      Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
+    });
+  }
+  return e;
+}
+var F = (e, s, n) => {
+  for (var t of Object.keys(e)) {
+    var l;
+    if (e[t] !== ((l = s[t]) !== null && l !== void 0 ? l : n[t]))
+      return !1;
+  }
+  return !0;
+}, O = (e) => (s) => {
+  var n = e.defaultClassName, t = D(D({}, e.defaultVariants), s);
+  for (var l in t) {
+    var _, i = (_ = t[l]) !== null && _ !== void 0 ? _ : e.defaultVariants[l];
+    if (i != null) {
+      var u = i;
+      typeof u == "boolean" && (u = u === !0 ? "true" : "false");
+      var v = (
+        // @ts-expect-error
+        e.variantClassNames[l][u]
+      );
+      v && (n += " " + v);
+    }
+  }
+  for (var [a, p] of e.compoundVariants)
+    F(a, t, e.defaultVariants) && (n += " " + p);
+  return n;
+}, I = O({ defaultClassName: "pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf0", variantClassNames: { up: { true: "pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf1" }, down: { true: "pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf2" } }, defaultVariants: {}, compoundVariants: [] }), R = O({ defaultClassName: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id0", variantClassNames: { disabled: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id1" }, active: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id2" }, __autoLayout: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3", false: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id4" } }, defaultVariants: { disabled: !1, active: !1, __autoLayout: !1 }, compoundVariants: [] });
+function B({
+  className: e,
+  sortKey: s,
+  sort: n,
+  sortDisabled: t,
+  onSortChange: l,
+  onClick: _,
+  children: i,
+  style: u,
+  widthPx: v,
+  widthRem: a,
+  __autoLayout: p = !1,
+  ...d
+}) {
+  const c = r.useMemo(() => {
+    const y = !!s && !t && Array.isArray(n) && n.find((b) => b.key === s);
+    return y ? y.direction : void 0;
+  }, [n, s, t]), S = v ? v / 16 : a, m = S ? { ...u, width: `${S}rem` } : u, N = (y) => {
+    s && !t && l && l([
+      {
+        key: s,
+        direction: c === C.ASCENDING ? C.DESCENDING : C.ASCENDING
+      }
+    ]), _ && _(y);
+  };
+  return p ? /* @__PURE__ */ r.createElement(
+    "td",
+    {
+      className: E(
+        e,
+        R({ disabled: t, active: !!c, __autoLayout: p }),
+        c && I({
+          up: c === C.ASCENDING,
+          down: c === C.DESCENDING
+        })
+      ),
+      onClick: N,
+      style: m,
+      ...d
+    },
+    i
+  ) : /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      className: E(
+        e,
+        R({ disabled: t, active: !!c, __autoLayout: p }),
+        c && I({
+          up: c === C.ASCENDING,
+          down: c === C.DESCENDING
+        })
+      ),
+      onClick: N,
+      style: m,
+      ...d
+    },
+    i
+  );
+}
+x.set(B, {
+  name: "Sorting Header Cell",
+  props: {
+    sortKey: { type: "string" },
+    sort: { type: "SortedColumn[]" },
+    sortDisabled: { type: "boolean" },
+    onSortChange: { type: "SortChangeHandler" },
+    widthPx: { type: "number" },
+    widthRem: { type: "number" }
+  }
+});
+var k = O({ defaultClassName: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu0", variantClassNames: { pinned: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu1", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu2" }, scrollParentIsWindow: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu3", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu4" }, __autoLayout: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu5", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu6" } }, defaultVariants: { pinned: !1, scrollParentIsWindow: !1, __autoLayout: !1 }, compoundVariants: [[{ pinned: !0, scrollParentIsWindow: !0 }, "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu7"]] }), M = "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu8";
+function Y({
+  sort: e,
+  onSortChange: s,
+  children: n,
+  className: t,
+  pinSortingHeader: l = !1,
+  __autoLayout: _ = !1,
+  ...i
+}) {
+  const [u, v] = r.useState(!1), a = r.useRef(null), p = r.useRef(null), d = r.useRef({
+    height: "",
+    width: "",
+    unpinAtTop: 0,
+    unpinAtBottom: 0,
+    cellWidths: []
+  }), c = r.useCallback(() => a.current && L(a.current) || window, []), S = r.useCallback((o) => {
+    const f = o || c();
+    return f.scrollY || f.scrollTop || 0;
+  }, []), m = r.useCallback(
+    (o) => {
+      if (l && a.current) {
+        const f = o || c(), w = S(f), g = _ ? a.current.parentElement?.parentElement?.getBoundingClientRect() : a.current.parentElement?.getBoundingClientRect();
+        if (g) {
+          const h = a.current.getBoundingClientRect();
+          d.current.height = `${h.height}px`, d.current.width = `${h.width}px`, f === window ? (d.current.unpinAtBottom = g.bottom + w - h.height * 2, d.current.unpinAtTop = h.top + w - h.height) : (d.current.unpinAtBottom = g.bottom + w - h.height * 2, d.current.unpinAtTop = g.top + w), d.current.cellWidths = [], a.current.childNodes.forEach((j, V) => {
+            j instanceof HTMLElement && (d.current.cellWidths[V] = `${j.getBoundingClientRect().width}px`);
+          });
+        }
+      }
+    },
+    [l]
+  ), N = r.useCallback(() => {
+    p.current && (p.current.style.width = d.current.width, p.current.style.height = d.current.height, p.current.childNodes.forEach((o, f) => {
+      o instanceof HTMLElement && (o.style.width = d.current.cellWidths[f] || "");
+    }));
+  }, []);
+  r.useLayoutEffect(() => {
+    m();
+  }), r.useLayoutEffect(() => {
+    let o;
+    const f = c();
+    return l ? (o = G(() => {
+      m(f);
+      const { unpinAtTop: w, unpinAtBottom: g } = d.current, h = S(f);
+      w && g && (h >= w && h <= g ? (v(!0), a.current && (a.current.style.visibility = "hidden")) : (v(!1), a.current && (a.current.style.visibility = "visible")));
+    }), f.addEventListener("scroll", o), o()) : a.current && (a.current.style.visibility = "visible"), () => {
+      o && f.removeEventListener("scroll", o);
+    };
+  }, [l, m]), r.useLayoutEffect(() => {
+    let o;
+    return u && (o = () => {
+      m(), N();
+    }, window.addEventListener("resize", o), o()), () => {
+      o && window.removeEventListener("resize", o);
+    };
+  }, [u, m, N]);
+  const [y] = T(n, [{ type: B }]), b = W(y, () => [{ sort: e, onSortChange: s }]), P = c() === window;
+  if (_) {
+    const o = /* @__PURE__ */ r.createElement("tr", null, /* @__PURE__ */ r.createElement("td", { className: E(M), colSpan: 100 }));
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
+      "tr",
+      {
+        ref: a,
+        className: E(
+          k({ pinned: !1, scrollParentIsWindow: P, __autoLayout: _ }),
+          t
+        ),
+        ...i
+      },
+      b
+    ), o, u && /* @__PURE__ */ r.createElement(
+      "tr",
+      {
+        ref: p,
+        className: E(
+          t,
+          k({ pinned: !0, scrollParentIsWindow: P, __autoLayout: _ })
+        ),
+        ...i,
+        id: i.id ? `pinned-${i.id}` : void 0,
+        "data-testid": i["data-testid"] ? `pinned-${i["data-testid"]}` : void 0
+      },
+      b
+    ));
+  }
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: a,
+      className: E(
+        t,
+        k({ pinned: !1, scrollParentIsWindow: P, __autoLayout: _ })
+      ),
+      ...i
+    },
+    b
+  ), u && /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: p,
+      className: E(
+        t,
+        k({ pinned: !0, scrollParentIsWindow: P, __autoLayout: _ })
+      ),
+      ...i,
+      id: i.id ? `pinned-${i.id}` : void 0,
+      "data-testid": i["data-testid"] ? `pinned-${i["data-testid"]}` : void 0
+    },
+    b
+  ));
+}
+x.set(Y, {
+  name: "Sorting Header",
+  props: {
+    sort: { type: "SortedColumn[]" },
+    onSortChange: { type: "SortChangeHandler" }
+  }
+});
+export {
+  Y as SortingHeader,
+  B as SortingHeaderCell
+};

package/lib/sorting-header/index.umd.cjs

@@ -0,0 +1 @@
+(function(v,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],b):(v=typeof globalThis<"u"?globalThis:v||self,b(v.SortingHeader={},v.React,v.core,v.utils))})(this,(function(v,b,o,H){"use strict";function V(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const s=V(b);function L(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function A(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),n.push.apply(n,t)}return n}function R(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?A(Object(n),!0).forEach(function(t){L(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var W=(e,r,n)=>{for(var t of Object.keys(e)){var d;if(e[t]!==((d=r[t])!==null&&d!==void 0?d:n[t]))return!1}return!0},D=e=>r=>{var n=e.defaultClassName,t=R(R({},e.defaultVariants),r);for(var d in t){var _,l=(_=t[d])!==null&&_!==void 0?_:e.defaultVariants[d];if(l!=null){var p=l;typeof p=="boolean"&&(p=p===!0?"true":"false");var g=e.variantClassNames[d][p];g&&(n+=" "+g)}}for(var[a,f]of e.compoundVariants)W(a,t,e.defaultVariants)&&(n+=" "+f);return n},I=D({defaultClassName:"pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf0",variantClassNames:{up:{true:"pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf1"},down:{true:"pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf2"}},defaultVariants:{},compoundVariants:[]}),T=D({defaultClassName:"pkg_sps-woodland_core__version_8_51_0__hash_11ho8id0",variantClassNames:{disabled:{true:"pkg_sps-woodland_core__version_8_51_0__hash_11ho8id1"},active:{true:"pkg_sps-woodland_core__version_8_51_0__hash_11ho8id2"},__autoLayout:{true:"pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3",false:"pkg_sps-woodland_core__version_8_51_0__hash_11ho8id4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function k({className:e,sortKey:r,sort:n,sortDisabled:t,onSortChange:d,onClick:_,children:l,style:p,widthPx:g,widthRem:a,__autoLayout:f=!1,...c}){const u=s.useMemo(()=>{const S=!!r&&!t&&Array.isArray(n)&&n.find(E=>E.key===r);return S?S.direction:void 0},[n,r,t]),P=g?g/16:a,w=P?{...p,width:`${P}rem`}:p,O=S=>{r&&!t&&d&&d([{key:r,direction:u===o.SortDirection.ASCENDING?o.SortDirection.DESCENDING:o.SortDirection.ASCENDING}]),_&&_(S)};return f?s.createElement("td",{className:o.cl(e,T({disabled:t,active:!!u,__autoLayout:f}),u&&I({up:u===o.SortDirection.ASCENDING,down:u===o.SortDirection.DESCENDING})),onClick:O,style:w,...c},l):s.createElement("div",{className:o.cl(e,T({disabled:t,active:!!u,__autoLayout:f}),u&&I({up:u===o.SortDirection.ASCENDING,down:u===o.SortDirection.DESCENDING})),onClick:O,style:w,...c},l)}o.Metadata.set(k,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var j=D({defaultClassName:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu0",variantClassNames:{pinned:{true:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu1",false:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu2"},scrollParentIsWindow:{true:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu3",false:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu4"},__autoLayout:{true:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu5",false:"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu6"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu7"]]}),G="pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu8";function x({sort:e,onSortChange:r,children:n,className:t,pinSortingHeader:d=!1,__autoLayout:_=!1,...l}){const[p,g]=s.useState(!1),a=s.useRef(null),f=s.useRef(null),c=s.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=s.useCallback(()=>a.current&&o.getScrollParent(a.current)||window,[]),P=s.useCallback(i=>{const h=i||u();return h.scrollY||h.scrollTop||0},[]),w=s.useCallback(i=>{if(d&&a.current){const h=i||u(),y=P(h),C=_?a.current.parentElement?.parentElement?.getBoundingClientRect():a.current.parentElement?.getBoundingClientRect();if(C){const m=a.current.getBoundingClientRect();c.current.height=`${m.height}px`,c.current.width=`${m.width}px`,h===window?(c.current.unpinAtBottom=C.bottom+y-m.height*2,c.current.unpinAtTop=m.top+y-m.height):(c.current.unpinAtBottom=C.bottom+y-m.height*2,c.current.unpinAtTop=C.top+y),c.current.cellWidths=[],a.current.childNodes.forEach((B,M)=>{B instanceof HTMLElement&&(c.current.cellWidths[M]=`${B.getBoundingClientRect().width}px`)})}}},[d]),O=s.useCallback(()=>{f.current&&(f.current.style.width=c.current.width,f.current.style.height=c.current.height,f.current.childNodes.forEach((i,h)=>{i instanceof HTMLElement&&(i.style.width=c.current.cellWidths[h]||"")}))},[]);s.useLayoutEffect(()=>{w()}),s.useLayoutEffect(()=>{let i;const h=u();return d?(i=H.lockToAnimationFrames(()=>{w(h);const{unpinAtTop:y,unpinAtBottom:C}=c.current,m=P(h);y&&C&&(m>=y&&m<=C?(g(!0),a.current&&(a.current.style.visibility="hidden")):(g(!1),a.current&&(a.current.style.visibility="visible")))}),h.addEventListener("scroll",i),i()):a.current&&(a.current.style.visibility="visible"),()=>{i&&h.removeEventListener("scroll",i)}},[d,w]),s.useLayoutEffect(()=>{let i;return p&&(i=()=>{w(),O()},window.addEventListener("resize",i),i()),()=>{i&&window.removeEventListener("resize",i)}},[p,w,O]);const[S]=o.selectChildren(n,[{type:k}]),E=o.modChildren(S,()=>[{sort:e,onSortChange:r}]),N=u()===window;if(_){const i=s.createElement("tr",null,s.createElement("td",{className:o.cl(G),colSpan:100}));return s.createElement(s.Fragment,null,s.createElement("tr",{ref:a,className:o.cl(j({pinned:!1,scrollParentIsWindow:N,__autoLayout:_}),t),...l},E),i,p&&s.createElement("tr",{ref:f,className:o.cl(t,j({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},E))}return s.createElement(s.Fragment,null,s.createElement("div",{ref:a,className:o.cl(t,j({pinned:!1,scrollParentIsWindow:N,__autoLayout:_})),...l},E),p&&s.createElement("div",{ref:f,className:o.cl(t,j({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},E))}o.Metadata.set(x,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}}),v.SortingHeader=x,v.SortingHeaderCell=k,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/lib/sorting-header/sorting-header/SortingHeader.css.d.ts

@@ -0,0 +1,39 @@
+export declare const sortingHeader: import("node_modules/@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    pinned: {
+        true: {
+            borderRadius: number;
+            position: "fixed";
+            top: "0";
+            zIndex: number;
+            selectors: {
+                "&:after": {
+                    background: "linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent)";
+                    content: "";
+                    display: "block";
+                    height: string;
+                    position: "absolute";
+                    top: "calc(100%)";
+                    left: string;
+                    width: string;
+                };
+            };
+        };
+        false: {};
+    };
+    scrollParentIsWindow: {
+        true: {};
+        false: {};
+    };
+    __autoLayout: {
+        true: {
+            display: "table-row";
+        };
+        false: {
+            display: "table";
+            tableLayout: "fixed";
+            width: string;
+        };
+    };
+}>;
+export declare const sortingHeaderSpacer: string;
+//# sourceMappingURL=SortingHeader.css.d.ts.map

package/lib/sorting-header/sorting-header/SortingHeader.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingHeader.css.d.ts","sourceRoot":"","sources":["../../../src/sorting-header/sorting-header/SortingHeader.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgExB,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAI9B,CAAC"}

package/lib/sorting-header/sorting-header/SortingHeader.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+import { createRuntimeFn as _ } from "../../node_modules/.pnpm/@vanilla-extract_recipes@0.2.5_@vanilla-extract_css@1.17.4/node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js";
+var a = _({ defaultClassName: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu0", variantClassNames: { pinned: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu1", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu2" }, scrollParentIsWindow: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu3", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu4" }, __autoLayout: { true: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu5", false: "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu6" } }, defaultVariants: { pinned: !1, scrollParentIsWindow: !1, __autoLayout: !1 }, compoundVariants: [[{ pinned: !0, scrollParentIsWindow: !0 }, "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu7"]] }), e = "pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu8";
+export {
+  a as sortingHeader,
+  e as sortingHeaderSpacer
+};

package/lib/sorting-header/sorting-header/SortingHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { ComponentProps, SortChangeHandler, SortedColumn } from "@sps-woodland/core";
+export declare function SortingHeader({ sort, onSortChange, children, className, pinSortingHeader, __autoLayout, ...rest }: ComponentProps<{
+    sort: SortedColumn[];
+    onSortChange: SortChangeHandler;
+    pinSortingHeader?: boolean;
+    __autoLayout?: boolean;
+}, HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=SortingHeader.d.ts.map

package/lib/sorting-header/sorting-header/SortingHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingHeader.d.ts","sourceRoot":"","sources":["../../../src/sorting-header/sorting-header/SortingHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK1F,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,gBAAwB,EACxB,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,cAAc,CACf;IACE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,EACD,cAAc,CACf,GAAG,KAAK,CAAC,YAAY,CA6NrB"}

package/lib/sorting-header/sorting-header/SortingHeader.js

@@ -0,0 +1,126 @@
+import * as e from "react";
+import { Metadata as $, getScrollParent as L, selectChildren as k, modChildren as H, cl as p } from "@sps-woodland/core";
+import { lockToAnimationFrames as W } from "@spscommerce/utils";
+import { SortingHeaderCell as x } from "../sorting-header-cell/SortingHeaderCell.js";
+import { sortingHeaderSpacer as N, sortingHeader as C } from "./SortingHeader.css.js";
+function Y({
+  sort: B,
+  onSortChange: P,
+  children: R,
+  className: f,
+  pinSortingHeader: m = !1,
+  __autoLayout: d = !1,
+  ...r
+}) {
+  const [h, v] = e.useState(!1), n = e.useRef(null), a = e.useRef(null), i = e.useRef({
+    height: "",
+    width: "",
+    unpinAtTop: 0,
+    unpinAtBottom: 0,
+    cellWidths: []
+  }), g = e.useCallback(() => n.current && L(n.current) || window, []), y = e.useCallback((t) => {
+    const l = t || g();
+    return l.scrollY || l.scrollTop || 0;
+  }, []), u = e.useCallback(
+    (t) => {
+      if (m && n.current) {
+        const l = t || g(), o = y(l), s = d ? n.current.parentElement?.parentElement?.getBoundingClientRect() : n.current.parentElement?.getBoundingClientRect();
+        if (s) {
+          const c = n.current.getBoundingClientRect();
+          i.current.height = `${c.height}px`, i.current.width = `${c.width}px`, l === window ? (i.current.unpinAtBottom = s.bottom + o - c.height * 2, i.current.unpinAtTop = c.top + o - c.height) : (i.current.unpinAtBottom = s.bottom + o - c.height * 2, i.current.unpinAtTop = s.top + o), i.current.cellWidths = [], n.current.childNodes.forEach((S, T) => {
+            S instanceof HTMLElement && (i.current.cellWidths[T] = `${S.getBoundingClientRect().width}px`);
+          });
+        }
+      }
+    },
+    [m]
+  ), b = e.useCallback(() => {
+    a.current && (a.current.style.width = i.current.width, a.current.style.height = i.current.height, a.current.childNodes.forEach((t, l) => {
+      t instanceof HTMLElement && (t.style.width = i.current.cellWidths[l] || "");
+    }));
+  }, []);
+  e.useLayoutEffect(() => {
+    u();
+  }), e.useLayoutEffect(() => {
+    let t;
+    const l = g();
+    return m ? (t = W(() => {
+      u(l);
+      const { unpinAtTop: o, unpinAtBottom: s } = i.current, c = y(l);
+      o && s && (c >= o && c <= s ? (v(!0), n.current && (n.current.style.visibility = "hidden")) : (v(!1), n.current && (n.current.style.visibility = "visible")));
+    }), l.addEventListener("scroll", t), t()) : n.current && (n.current.style.visibility = "visible"), () => {
+      t && l.removeEventListener("scroll", t);
+    };
+  }, [m, u]), e.useLayoutEffect(() => {
+    let t;
+    return h && (t = () => {
+      u(), b();
+    }, window.addEventListener("resize", t), t()), () => {
+      t && window.removeEventListener("resize", t);
+    };
+  }, [h, u, b]);
+  const [A] = k(R, [{ type: x }]), E = H(A, () => [{ sort: B, onSortChange: P }]), w = g() === window;
+  if (d) {
+    const t = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: p(N), colSpan: 100 }));
+    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "tr",
+      {
+        ref: n,
+        className: p(
+          C({ pinned: !1, scrollParentIsWindow: w, __autoLayout: d }),
+          f
+        ),
+        ...r
+      },
+      E
+    ), t, h && /* @__PURE__ */ e.createElement(
+      "tr",
+      {
+        ref: a,
+        className: p(
+          f,
+          C({ pinned: !0, scrollParentIsWindow: w, __autoLayout: d })
+        ),
+        ...r,
+        id: r.id ? `pinned-${r.id}` : void 0,
+        "data-testid": r["data-testid"] ? `pinned-${r["data-testid"]}` : void 0
+      },
+      E
+    ));
+  }
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: n,
+      className: p(
+        f,
+        C({ pinned: !1, scrollParentIsWindow: w, __autoLayout: d })
+      ),
+      ...r
+    },
+    E
+  ), h && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: a,
+      className: p(
+        f,
+        C({ pinned: !0, scrollParentIsWindow: w, __autoLayout: d })
+      ),
+      ...r,
+      id: r.id ? `pinned-${r.id}` : void 0,
+      "data-testid": r["data-testid"] ? `pinned-${r["data-testid"]}` : void 0
+    },
+    E
+  ));
+}
+$.set(Y, {
+  name: "Sorting Header",
+  props: {
+    sort: { type: "SortedColumn[]" },
+    onSortChange: { type: "SortChangeHandler" }
+  }
+});
+export {
+  Y as SortingHeader
+};

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.css.d.ts

@@ -0,0 +1,35 @@
+export declare const headerCell: import("node_modules/@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    disabled: {
+        true: {
+            cursor: "default";
+            selectors: {
+                "&:hover": {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
+    active: {
+        true: {
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    __autoLayout: {
+        true: {
+            textAlign: "left";
+            selectors: {
+                "&:first-child": {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                };
+                "&:last-child": {
+                    borderTopRightRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+//# sourceMappingURL=SortingHeaderCell.css.d.ts.map

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingHeaderCell.css.d.ts","sourceRoot":"","sources":["../../../src/sorting-header/sorting-header-cell/SortingHeaderCell.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDrB,CAAC"}

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.css.js

@@ -0,0 +1,6 @@
+/* empty css                                     */
+import { createRuntimeFn as _ } from "../../node_modules/.pnpm/@vanilla-extract_recipes@0.2.5_@vanilla-extract_css@1.17.4/node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js";
+var s = _({ defaultClassName: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id0", variantClassNames: { disabled: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id1" }, active: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id2" }, __autoLayout: { true: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3", false: "pkg_sps-woodland_core__version_8_51_0__hash_11ho8id4" } }, defaultVariants: { disabled: !1, active: !1, __autoLayout: !1 }, compoundVariants: [] });
+export {
+  s as headerCell
+};

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { SortedColumn, SortChangeHandler, ComponentProps } from "@sps-woodland/core";
+export declare function SortingHeaderCell({ className, sortKey, sort, sortDisabled, onSortChange, onClick, children, style, widthPx, widthRem, __autoLayout, ...rest }: ComponentProps<{
+    sortKey?: string;
+    sortDisabled?: boolean;
+    sort?: SortedColumn[];
+    onSortChange?: SortChangeHandler;
+    widthPx?: number;
+    widthRem?: number;
+    __autoLayout?: boolean;
+}, HTMLDivElement>): React.ReactElement;
+//# sourceMappingURL=SortingHeaderCell.d.ts.map

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingHeaderCell.d.ts","sourceRoot":"","sources":["../../../src/sorting-header/sorting-header-cell/SortingHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAI1F,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,YAAoB,EACpB,GAAG,IAAI,EACR,EAAE,cAAc,CACf;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,EACD,cAAc,CACf,GAAG,KAAK,CAAC,YAAY,CAoErB"}

package/lib/sorting-header/sorting-header-cell/SortingHeaderCell.js

@@ -0,0 +1,77 @@
+import * as d from "react";
+import { Metadata as u, cl as s, SortDirection as t } from "@sps-woodland/core";
+import { headerCaret as y } from "../caret/caret.css.js";
+import { headerCell as G } from "./SortingHeaderCell.css.js";
+function A({
+  className: c,
+  sortKey: n,
+  sort: o,
+  sortDisabled: r,
+  onSortChange: l,
+  onClick: m,
+  children: p,
+  style: C,
+  widthPx: N,
+  widthRem: I,
+  __autoLayout: a = !1,
+  ...S
+}) {
+  const e = d.useMemo(() => {
+    const i = !!n && !r && Array.isArray(o) && o.find((h) => h.key === n);
+    return i ? i.direction : void 0;
+  }, [o, n, r]), E = N ? N / 16 : I, f = E ? { ...C, width: `${E}rem` } : C, D = (i) => {
+    n && !r && l && l([
+      {
+        key: n,
+        direction: e === t.ASCENDING ? t.DESCENDING : t.ASCENDING
+      }
+    ]), m && m(i);
+  };
+  return a ? /* @__PURE__ */ d.createElement(
+    "td",
+    {
+      className: s(
+        c,
+        G({ disabled: r, active: !!e, __autoLayout: a }),
+        e && y({
+          up: e === t.ASCENDING,
+          down: e === t.DESCENDING
+        })
+      ),
+      onClick: D,
+      style: f,
+      ...S
+    },
+    p
+  ) : /* @__PURE__ */ d.createElement(
+    "div",
+    {
+      className: s(
+        c,
+        G({ disabled: r, active: !!e, __autoLayout: a }),
+        e && y({
+          up: e === t.ASCENDING,
+          down: e === t.DESCENDING
+        })
+      ),
+      onClick: D,
+      style: f,
+      ...S
+    },
+    p
+  );
+}
+u.set(A, {
+  name: "Sorting Header Cell",
+  props: {
+    sortKey: { type: "string" },
+    sort: { type: "SortedColumn[]" },
+    sortDisabled: { type: "boolean" },
+    onSortChange: { type: "SortChangeHandler" },
+    widthPx: { type: "number" },
+    widthRem: { type: "number" }
+  }
+});
+export {
+  A as SortingHeaderCell
+};

package/lib/sorting-header/style.css

@@ -0,0 +1 @@
+.pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}.pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_core__version_8_51_0__hash_ax8xqf2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id0:hover{background-color:#f3f4f4}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id1{cursor:default}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id1:hover{background-color:#e9e9ea}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3{text-align:left}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_11ho8id3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu0{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu1{border-radius:0;position:fixed;top:0;z-index:999}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu1:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:100%;left:-.0625rem;width:100%}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu5{display:table-row}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu6{display:table;table-layout:fixed;width:100%}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu7{top:3.75rem}.pkg_sps-woodland_core__version_8_51_0__hash_1jpcvsu8{height:1rem;background:transparent;border:0}