@tedi-design-system/react 15.0.0-rc.6 → 15.0.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "15.0.0-rc.6",
+  "version": "15.0.0-rc.8",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.cjs.js

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),f=require("./scroll-visibility.module.scss.cjs.js"),y=v=>{const{children:t,enabled:s=!0,className:g,visibility:u="hide",toggleVisibility:b=!1,scrollDistance:r=100,scrollDirection:o="down",scrollContainer:w,animationDirection:p="center"}=v,{scrollTop:e,scrollHeight:c,clientHeight:n}=V.useScroll(w),[q,d]=l.useState(()=>{if(!s)return!1;const i=o==="down"?e:c-n-e;return u==="hide"?i>r:i<=r}),S=l.useRef(o==="down"?e:c-n-e);l.useEffect(()=>{if(!s)return;const i=u==="show",a=o==="down"?e:c-n-e;b&&a<S.current?d(i):a>r?d(!i):d(i),S.current=a},[u,b,r,e,s,o,c,n]);const m=h.default(f.default["tedi-scroll-visibility"],f.default[`tedi-scroll-visibility--${p}`],{[f.default["tedi-scroll-visibility--hidden"]]:s&&q},g);return l.isValidElement(t)?l.cloneElement(t,{className:h.default(t.props.className,m)}):D.jsx("div",{className:m,children:t})};exports.ScrollVisibility=y;exports.default=y;
+"use client";
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),b=require("./scroll-visibility.module.scss.cjs.js"),g=w=>{const{children:l,enabled:o=!0,className:H,visibility:n="hide",toggleVisibility:h=!1,scrollDistance:c=100,scrollDirection:u="down",scrollContainer:p,animationDirection:q="center"}=w,[d,D]=t.useState(!1),{scrollTop:i=0,scrollHeight:a=0,clientHeight:f=0}=V.useScroll(p)??{},[E,m]=t.useState(!1),S=t.useRef(0);t.useEffect(()=>{if(D(!0),!o)return;const e=u==="down"?i:a-f-i,s=n==="hide"?e>c:e<=c;m(s),S.current=e},[]),t.useEffect(()=>{if(!d||!o)return;const e=n==="show",s=u==="down"?i:a-f-i;let r;h&&s<S.current?r=e:s>c?r=!e:r=e,m(r),S.current=s},[d,o,n,h,c,i,u,a,f]);const y=v.default(b.default["tedi-scroll-visibility"],b.default[`tedi-scroll-visibility--${q}`],{[b.default["tedi-scroll-visibility--hidden"]]:d&&o&&E},H);return t.isValidElement(l)?t.cloneElement(l,{className:v.default(l.props.className,y)}):M.jsx("div",{className:y,children:l})};exports.ScrollVisibility=g;exports.default=g;

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.es.js

@@ -1,40 +1,52 @@
-import { jsx as D } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { useState as N, useRef as g, useEffect as E, cloneElement as H, isValidElement as V } from "react";
-import { useScroll as x } from "../../../helpers/hooks/use-scroll.es.js";
-import m from "./scroll-visibility.module.scss.es.js";
-const M = (b) => {
+"use client";
+import { jsx as M } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement as I } from "react";
+import { useScroll as T } from "../../../helpers/hooks/use-scroll.es.js";
+import f from "./scroll-visibility.module.scss.es.js";
+const k = (H) => {
   const {
-    children: s,
-    enabled: t = !0,
-    className: y,
+    children: t,
+    enabled: l = !0,
+    className: v,
     visibility: n = "hide",
-    toggleVisibility: f = !1,
-    scrollDistance: l = 100,
-    scrollDirection: o = "down",
-    scrollContainer: S,
-    animationDirection: w = "center"
-  } = b, { scrollTop: e, scrollHeight: r, clientHeight: c } = x(S), [v, a] = N(() => {
-    if (!t) return !1;
-    const i = o === "down" ? e : r - c - e;
-    return n === "hide" ? i > l : i <= l;
-  }), u = g(o === "down" ? e : r - c - e);
-  E(() => {
-    if (!t) return;
-    const i = n === "show", d = o === "down" ? e : r - c - e;
-    f && d < u.current ? a(i) : d > l ? a(!i) : a(i), u.current = d;
-  }, [n, f, l, e, t, o, r, c]);
-  const p = h(
-    m["tedi-scroll-visibility"],
-    m[`tedi-scroll-visibility--${w}`],
+    toggleVisibility: h = !1,
+    scrollDistance: o = 100,
+    scrollDirection: c = "down",
+    scrollContainer: D,
+    animationDirection: N = "center"
+  } = H, [d, g] = S(!1), { scrollTop: s = 0, scrollHeight: a = 0, clientHeight: u = 0 } = T(D) ?? {}, [E, p] = S(!1), m = V(0);
+  w(() => {
+    if (g(!0), !l) return;
+    const e = c === "down" ? s : a - u - s, i = n === "hide" ? e > o : e <= o;
+    p(i), m.current = e;
+  }, []), w(() => {
+    if (!d || !l) return;
+    const e = n === "show", i = c === "down" ? s : a - u - s;
+    let r;
+    h && i < m.current ? r = e : i > o ? r = !e : r = e, p(r), m.current = i;
+  }, [
+    d,
+    l,
+    n,
+    h,
+    o,
+    s,
+    c,
+    a,
+    u
+  ]);
+  const b = y(
+    f["tedi-scroll-visibility"],
+    f[`tedi-scroll-visibility--${N}`],
     {
-      [m["tedi-scroll-visibility--hidden"]]: t && v
+      [f["tedi-scroll-visibility--hidden"]]: d && l && E
     },
-    y
+    v
   );
-  return V(s) ? H(s, { className: h(s.props.className, p) }) : /* @__PURE__ */ D("div", { className: p, children: s });
+  return I(t) ? x(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
 };
 export {
-  M as ScrollVisibility,
-  M as default
+  k as ScrollVisibility,
+  k as default
 };

package/src/tedi/helpers/hooks/use-scroll.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../external/lodash-es/throttle.cjs.js"),o=require("react"),n=l=>{const e=l??document.documentElement,[c,r]=o.useState({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight});return o.useEffect(()=>{const t=s.default(()=>{r({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight})},50);return(l??window).addEventListener("scroll",t),t(),()=>{(l??window).removeEventListener("scroll",t),t.cancel()}},[e,l]),c};exports.useScroll=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../../external/lodash-es/throttle.cjs.js"),r=require("react"),u={scrollTop:0,scrollHeight:0,clientHeight:0},a=t=>{const[s,n]=r.useState(u);return r.useEffect(()=>{const e=t??document.documentElement,o=t??window,c=()=>{n({scrollTop:e.scrollTop,scrollHeight:e.scrollHeight,clientHeight:e.clientHeight})},l=i.default(c,50);return o.addEventListener("scroll",l),c(),()=>{o.removeEventListener("scroll",l),l.cancel()}},[t]),s};exports.useScroll=a;

package/src/tedi/helpers/hooks/use-scroll.d.ts

@@ -1,5 +1,7 @@
-export declare const useScroll: (element?: HTMLElement) => {
+type ScrollState = {
     scrollTop: number;
     scrollHeight: number;
     clientHeight: number;
 };
+export declare const useScroll: (element?: HTMLElement) => ScrollState;
+export {};

package/src/tedi/helpers/hooks/use-scroll.es.js

@@ -1,24 +1,24 @@
-import r from "../../../../external/lodash-es/throttle.es.js";
-import { useState as s, useEffect as i } from "react";
-const g = (o) => {
-  const l = o ?? document.documentElement, [e, c] = s({
-    scrollTop: l.scrollTop,
-    scrollHeight: l.scrollHeight,
-    clientHeight: l.clientHeight
-  });
-  return i(() => {
-    const t = r(() => {
-      c({
-        scrollTop: l.scrollTop,
-        scrollHeight: l.scrollHeight,
-        clientHeight: l.clientHeight
+import n from "../../../../external/lodash-es/throttle.es.js";
+import { useState as i, useEffect as g } from "react";
+const u = {
+  scrollTop: 0,
+  scrollHeight: 0,
+  clientHeight: 0
+}, a = (t) => {
+  const [r, s] = i(u);
+  return g(() => {
+    const o = t ?? document.documentElement, l = t ?? window, c = () => {
+      s({
+        scrollTop: o.scrollTop,
+        scrollHeight: o.scrollHeight,
+        clientHeight: o.clientHeight
       });
-    }, 50);
-    return (o ?? window).addEventListener("scroll", t), t(), () => {
-      (o ?? window).removeEventListener("scroll", t), t.cancel();
+    }, e = n(c, 50);
+    return l.addEventListener("scroll", e), c(), () => {
+      l.removeEventListener("scroll", e), e.cancel();
     };
-  }, [l, o]), e;
+  }, [t]), r;
 };
 export {
-  g as useScroll
+  a as useScroll
 };