gd-design-library 1.0.2 → 1.2.0

package/components/core/Scroll/Scroll.js

@@ -1,40 +1,62 @@
 "use client";
-import { jsxs as f, jsx as o } from "@emotion/react/jsx-runtime";
-import { forwardRef as z, useState as u, useRef as x, useImperativeHandle as M } from "react";
-import { ScrollStyled as V, ScrollBarsStyled as W, ScrollContentStyled as j } from "./ScrollStyled.js";
-import { ScrollBar as S } from "./ScrollBar.js";
-import { COMPONENT_NAME as i } from "./constants.js";
-import { useTheme as A } from "../../../hooks/useTheme/useTheme.js";
-import { useAnimationFrame as B } from "../../../utils/animationFrame.js";
-const I = z((b, c) => {
-  const [s, p] = u(!1), [a, g] = u(!1), t = x(null), {
-    theme: e
-  } = A(), {
-    vertical: w = "auto",
-    horizontal: n = "auto",
-    children: H,
-    ...N
-  } = b, d = (r, l) => r === "visible" ? !0 : r === "hidden" ? !1 : l;
-  return B(() => {
-    if (!t.current)
+import { jsxs as g, jsx as i } from "@emotion/react/jsx-runtime";
+import { forwardRef as _, useState as n, useRef as v, useCallback as x, useEffect as O, useImperativeHandle as R } from "react";
+import { ScrollStyled as V, ScrollBarsStyled as C, ScrollContentStyled as W } from "./ScrollStyled.js";
+import { ScrollBar as H } from "./ScrollBar.js";
+import { AUTO_HIDE_TS as j, COMPONENT_NAME as a, ANIMATION_FRAME_TS as B } from "./constants.js";
+import { useTheme as F } from "../../../hooks/useTheme/useTheme.js";
+import { useAnimationFrame as L } from "../../../utils/animationFrame.js";
+const J = _((N, u) => {
+  const [d, w] = n(!1), [f, E] = n(!1), [m, h] = n(!1), r = v(null), l = v(null), {
+    theme: o
+  } = F(), {
+    vertical: A = "auto",
+    horizontal: S = "auto",
+    autoHide: e = !1,
+    children: M,
+    ...y
+  } = N, b = (t, s) => {
+    switch (t) {
+      case "visible":
+        return !0;
+      case "hidden":
+        return !1;
+      default:
+        return s;
+    }
+  };
+  L(() => {
+    if (!r.current)
       return;
     const {
-      clientHeight: r,
-      scrollHeight: l,
-      clientWidth: v,
-      scrollWidth: y
-    } = t.current, h = d(w, Math.ceil(r / l * 100) < 100), m = d(n, Math.ceil(v / y * 100) < 100);
-    h !== s && p(h), m !== a && g(m);
-  }, 300), M(c, () => t.current, []), /* @__PURE__ */ f(V, { className: "gd-scroll", ref: t, theme: e, ...N, "data-testid": i, children: [
-    /* @__PURE__ */ f(W, { className: "gd-scroll--scrollbars", theme: e, "data-testid": `${i}-scrollbars`, children: [
-      s && /* @__PURE__ */ o(S, { direction: "vertical", containerRef: t }),
-      a && /* @__PURE__ */ o(S, { direction: "horizontal", containerRef: t })
+      clientHeight: t,
+      scrollHeight: s,
+      clientWidth: z,
+      scrollWidth: I
+    } = r.current, T = b(A, Math.ceil(t / s * 100) < 100), p = b(S, Math.ceil(z / I * 100) < 100);
+    T !== d && w(T), p !== f && E(p);
+  }, B);
+  const c = x(() => {
+    e && (h(!0), l.current && clearTimeout(l.current), l.current = setTimeout(() => {
+      h(!1);
+    }, j));
+  }, [e]);
+  return O(() => {
+    const t = r.current;
+    if (!(!t || !e))
+      return t.addEventListener("scroll", c), () => {
+        t.removeEventListener("scroll", c), l.current && clearTimeout(l.current);
+      };
+  }, [e, c]), R(u, () => r.current, []), /* @__PURE__ */ g(V, { className: "gd-scroll", ref: r, theme: o, ...y, "data-testid": a, children: [
+    /* @__PURE__ */ g(C, { className: "gd-scroll--scrollbars", theme: o, "data-testid": `${a}-scrollbars`, children: [
+      d && /* @__PURE__ */ i(H, { direction: "vertical", containerRef: r, autoHide: e, isScrolling: m }),
+      f && /* @__PURE__ */ i(H, { direction: "horizontal", containerRef: r, autoHide: e, isScrolling: m })
     ] }),
-    /* @__PURE__ */ o(j, { ref: c, className: "gd-scroll--content", theme: e, style: n === "hidden" ? {
+    /* @__PURE__ */ i(W, { ref: u, className: "gd-scroll--content", theme: o, style: S === "hidden" ? {
       maxWidth: "100%"
-    } : void 0, "data-testid": `${i}-content`, children: H })
+    } : void 0, "data-testid": `${a}-content`, children: M })
   ] });
 });
 export {
-  I as Scroll
+  J as Scroll
 };

package/components/core/Scroll/Scroll.types.d.ts

@@ -5,10 +5,13 @@ export type ScrollBarPosition = 'hidden' | 'visible' | 'auto';
 export interface ScrollProps extends PropsWithChildren<CommonCssComponentProps> {
     vertical?: ScrollBarPosition;
     horizontal?: ScrollBarPosition;
+    autoHide?: boolean;
 }
 export interface ScrollBarProps extends CommonCssComponentProps {
     direction?: ScrollDirection;
     containerRef?: RefObject<HTMLElement>;
+    autoHide?: boolean;
+    isScrolling?: boolean;
 }
 export interface ScrollStyledProps extends PropsWithChildren<CommonCssComponentStyledProps> {
     $vertical?: ScrollBarPosition;
@@ -16,4 +19,6 @@ export interface ScrollStyledProps extends PropsWithChildren<CommonCssComponentS
 }
 export interface ScrollBarStyledProps extends CommonCssComponentStyledProps {
     $direction?: ScrollDirection;
+    $autoHide?: boolean;
+    $isScrolling?: boolean;
 }

package/components/core/Scroll/ScrollBar.js

@@ -1,68 +1,70 @@
 "use client";
-import { jsx as T } from "@emotion/react/jsx-runtime";
-import { useRef as z, useEffect as A } from "react";
-import { getThumbPosition as H } from "./utils.js";
-import { SCROLL_BAR_ANIMATION_THROTTLE as x, COMPONENT_NAME as $ } from "./constants.js";
-import { ScrollBarStyled as C, ScrollBarThumbStyled as M } from "./ScrollStyled.js";
-import { useTheme as D } from "../../../hooks/useTheme/useTheme.js";
-import { useAnimationFrame as I } from "../../../utils/animationFrame.js";
-const Y = (v) => {
+import { jsx as v } from "@emotion/react/jsx-runtime";
+import { useRef as A, useEffect as x } from "react";
+import { getThumbPosition as C } from "./utils.js";
+import { SCROLL_BAR_ANIMATION_THROTTLE as M, COMPONENT_NAME as E } from "./constants.js";
+import { ScrollBarStyled as D, ScrollBarThumbStyled as I } from "./ScrollStyled.js";
+import { useTheme as R } from "../../../hooks/useTheme/useTheme.js";
+import { useAnimationFrame as V } from "../../../utils/animationFrame.js";
+const q = (S) => {
   const {
-    direction: o,
-    containerRef: t
-  } = v, s = z(null), {
-    theme: i
-  } = D();
-  return I(() => {
-    const r = t != null && t.current ? H(t.current, o) : {
+    direction: r,
+    containerRef: t,
+    autoHide: c = !1,
+    isScrolling: u = !1
+  } = S, s = A(null), {
+    theme: m
+  } = R();
+  return V(() => {
+    const o = t != null && t.current ? C(t.current, r) : {
       position: 0,
       size: 0
     };
-    s.current && (o === "vertical" ? (s.current.style.top = `${r.position}%`, s.current.style.height = `${r.size}%`) : (s.current.style.left = `${r.position}%`, s.current.style.width = `${r.size}%`));
-  }, x), A(() => {
-    const r = s.current;
-    if (!r)
+    s.current && (r === "vertical" ? (s.current.style.top = `${o.position}%`, s.current.style.height = `${o.size}%`) : (s.current.style.left = `${o.position}%`, s.current.style.width = `${o.size}%`));
+  }, M), x(() => {
+    const o = s.current;
+    if (!o)
       return;
-    let u = 0, m = 0;
-    const E = ({
+    let d = 0, a = 0;
+    const _ = ({
       clientY: e
     }, {
       top: n,
       height: l
-    }) => (e - n) / l, _ = ({
+    }) => (e - n) / l, H = ({
       clientX: e
     }, {
       left: n,
       width: l
     }) => (e - n) / l, N = (e, n, l) => {
-      const a = r.parentElement, c = t == null ? void 0 : t.current;
-      if (!a || !c)
+      const h = o.parentElement, i = t == null ? void 0 : t.current;
+      if (!h || !i)
         return [0, 0];
       const {
-        offsetHeight: h,
-        offsetWidth: g
-      } = r, {
+        offsetHeight: $,
+        offsetWidth: b
+      } = o, {
         top: O,
-        left: S,
-        height: b,
-        width: L
-      } = a.getBoundingClientRect(), w = c.scrollHeight - b, y = c.scrollWidth - L, B = (e.clientY - O - h * n) / (b - h), P = (e.clientX - S - g * l) / (L - g);
-      return [w * B, y * P];
-    }, d = (e) => {
-      const [n, l] = N(e, u, m);
-      t != null && t.current && (o === "vertical" ? t.current.scrollTop = n : t.current.scrollLeft = l);
-    }, p = () => {
-      document.removeEventListener("pointermove", d), document.removeEventListener("pointerup", p);
+        left: w,
+        height: L,
+        width: T
+      } = h.getBoundingClientRect(), y = i.scrollHeight - L, B = i.scrollWidth - T, P = (e.clientY - O - $ * n) / (L - $), z = (e.clientX - w - b * l) / (T - b);
+      return [y * P, B * z];
     }, f = (e) => {
+      const [n, l] = N(e, d, a);
+      t != null && t.current && (r === "vertical" ? t.current.scrollTop = n : t.current.scrollLeft = l);
+    }, p = () => {
+      document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", p);
+    }, g = (e) => {
       e.stopPropagation(), e.preventDefault();
-      const n = r.getBoundingClientRect();
-      u = E(e, n), m = _(e, n), document.addEventListener("pointermove", d), document.addEventListener("pointerup", p);
+      const n = o.getBoundingClientRect();
+      d = _(e, n), a = H(e, n), document.addEventListener("pointermove", f), document.addEventListener("pointerup", p);
     };
-    return r.addEventListener("pointerdown", f), () => {
-      r.removeEventListener("pointerdown", f);
+    return o.addEventListener("pointerdown", g), () => {
+      o.removeEventListener("pointerdown", g);
     };
-  }, [t, s, o]), /* @__PURE__ */ T(C, { className: `gd-scroll--scrollbar gd-scroll--scrollbar__${o}`, $direction: o, theme: i, "data-testid": `${$}-scrollbar_${o}`, children: /* @__PURE__ */ T(M, { className: `gd-scroll--scrollbar-thumb gd-scroll--scrollbar-thumb__${o}`, ref: s, $direction: o, theme: i, "data-testid": `${$}-scrollbar-thumb_${o}` }) });
+  }, [t, s, r]), /* @__PURE__ */ v(D, { className: `gd-scroll--scrollbar gd-scroll--scrollbar__${r}`, $direction: r, $autoHide: c, $isScrolling: u, theme: m, "data-testid": `${E}-scrollbar_${r}`, children: /* @__PURE__ */ v(I, { className: `gd-scroll--scrollbar-thumb gd-scroll--scrollbar-thumb__${r}`, ref: s, $direction: r, $autoHide: c, $isScrolling: u, theme: m, "data-testid": `${E}-scrollbar-thumb_${r}` }) });
 };
 export {
-  Y as ScrollBar
+  q as ScrollBar
 };

package/components/core/Scroll/ScrollStyled.js

@@ -1,62 +1,66 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { tokensHandler as S } from "../../../tokens/utils.js";
-import { get as n } from "../../../utils/helpers.js";
-const f = u((e, r) => {
+import { jsx as i } from "@emotion/react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { tokensHandler as u } from "../../../tokens/utils.js";
+import { get as t } from "../../../utils/helpers.js";
+const b = S((s, l) => {
   const {
     theme: {
-      scroll: o,
-      ...s
+      scroll: e,
+      ...o
     } = {},
-    styles: l = {},
-    ...t
-  } = e, c = new Proxy(o || {}, S(s)), m = [n(c, "container.default", {}), l];
-  return /* @__PURE__ */ d("div", { css: m, ...t, ref: r });
-}), h = u((e, r) => {
+    styles: c = {},
+    ...n
+  } = s, d = new Proxy(e || {}, u(o)), r = [t(d, "container.default", {}), c];
+  return /* @__PURE__ */ i("div", { css: r, ...n, ref: l });
+}), P = S((s, l) => {
   const {
     theme: {
-      scroll: o,
-      ...s
+      scroll: e,
+      ...o
     } = {},
-    styles: l = {},
-    ...t
-  } = e, c = new Proxy(o || {}, S(s)), m = [n(c, "content.default", {}), l];
-  return /* @__PURE__ */ d("div", { css: m, ...t, ref: r });
-}), P = (e) => {
+    styles: c = {},
+    ...n
+  } = s, d = new Proxy(e || {}, u(o)), r = [t(d, "content.default", {}), c];
+  return /* @__PURE__ */ i("div", { css: r, ...n, ref: l });
+}), $ = (s) => {
   const {
     theme: {
-      scroll: r,
-      ...o
+      scroll: l,
+      ...e
     } = {},
-    ...s
-  } = e, l = new Proxy(r || {}, S(o)), t = n(l, "scrollbars.default", {});
-  return /* @__PURE__ */ d("div", { css: t, ...s });
-}, x = (e) => {
+    ...o
+  } = s, c = new Proxy(l || {}, u(e)), n = t(c, "scrollbars.default", {});
+  return /* @__PURE__ */ i("div", { css: n, ...o });
+}, x = (s) => {
   const {
-    $direction: r,
+    $direction: l,
+    $autoHide: e,
+    $isScrolling: o,
     theme: {
-      scroll: o,
-      ...s
+      scroll: c,
+      ...n
     } = {},
-    ...l
-  } = e, t = new Proxy(o || {}, S(s)), c = [n(t, "scrollbar.default", {}), n(t, `scrollbar.${r}`, {})];
-  return /* @__PURE__ */ d("div", { css: c, ...l });
-}, b = u((e, r) => {
+    ...d
+  } = s, r = new Proxy(c || {}, u(n)), m = [t(r, "scrollbar.default", {}), t(r, `scrollbar.${l}`, {}), e && t(r, "scrollbar.autoHide", {}), e && o && t(r, "scrollbar.autoHideScrolling", {})];
+  return /* @__PURE__ */ i("div", { css: m, ...d });
+}, H = S((s, l) => {
   const {
-    $direction: o,
+    $direction: e,
+    $autoHide: o,
+    $isScrolling: c,
     theme: {
-      scroll: s,
-      ...l
+      scroll: n,
+      ...d
     } = {},
-    ...t
-  } = e, c = new Proxy(s || {}, S(l)), m = [n(c, "thumb.default", {}), n(c, `thumb.${o}`, {})];
-  return /* @__PURE__ */ d("div", { css: m, ...t, ref: r });
+    ...r
+  } = s, m = new Proxy(n || {}, u(d)), a = [t(m, "thumb.default", {}), t(m, `thumb.${e}`, {}), o && t(m, "thumb.autoHide", {}), o && c && t(m, "thumb.autoHideScrolling", {})];
+  return /* @__PURE__ */ i("div", { css: a, ...r, ref: l });
 });
 export {
   x as ScrollBarStyled,
-  b as ScrollBarThumbStyled,
-  P as ScrollBarsStyled,
-  h as ScrollContentStyled,
-  f as ScrollStyled
+  H as ScrollBarThumbStyled,
+  $ as ScrollBarsStyled,
+  P as ScrollContentStyled,
+  b as ScrollStyled
 };

package/components/core/Scroll/constants.d.ts

@@ -1,3 +1,5 @@
 export declare const COMPONENT_NAME = "Scroll";
 export declare const MIN_WIDTH = 24;
 export declare const SCROLL_BAR_ANIMATION_THROTTLE = 50;
+export declare const ANIMATION_FRAME_TS = 300;
+export declare const AUTO_HIDE_TS = 1000;

package/components/core/Scroll/constants.js

@@ -1,6 +1,8 @@
-const N = "Scroll", T = 24, o = 50;
+const T = "Scroll", _ = 24, A = 50, N = 300, o = 1e3;
 export {
-  N as COMPONENT_NAME,
-  T as MIN_WIDTH,
-  o as SCROLL_BAR_ANIMATION_THROTTLE
+  N as ANIMATION_FRAME_TS,
+  o as AUTO_HIDE_TS,
+  T as COMPONENT_NAME,
+  _ as MIN_WIDTH,
+  A as SCROLL_BAR_ANIMATION_THROTTLE
 };