@situaction/traq-ui-ste 1.1.12 → 1.1.14

package/dist/components/buttonControledScroll/ButtonControlledScroll.js

@@ -1,54 +1,61 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { useRef as l, useState as _, useEffect as D } from "react";
-import '../../styles/ButtonControlledScroll.css';const k = "_wrapper_r0cby_6", E = "_container_r0cby_16", U = "_btn_r0cby_27", X = "_grab_r0cby_44", j = "_grabbing_r0cby_48", B = "_btnLeft_r0cby_54", O = "_btnRight_r0cby_59", n = {
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import { useRef as a, useState as p, useEffect as D } from "react";
+import '../../styles/ButtonControlledScroll.css';const k = "_wrapper_q8o27_6", E = "_container_q8o27_18", T = "_btn_q8o27_28", U = "_grab_q8o27_45", X = "_grabbing_q8o27_49", j = "_btnLeft_q8o27_55", y = "_btnRight_q8o27_60", n = {
   wrapper: k,
   container: E,
-  btn: U,
-  grab: X,
-  grabbing: j,
-  btnLeft: B,
-  btnRight: O
-}, T = ({ items: h, iconLeft: p, iconRight: L, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: c = !0 }) => {
-  const i = m, r = l(null), [M, S] = _(!1), [y, R] = _(!1), s = l(!1), f = l(0), u = l(0), w = (t) => {
-    if (c) {
+  btn: T,
+  grab: U,
+  grabbing: X,
+  btnLeft: j,
+  btnRight: y
+}, W = ({ items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: o = !0 }) => {
+  const u = m, r = a(null), [M, S] = p(!1), [R, q] = p(!1), s = a(!1), f = a(0), d = a(0), w = (t) => {
+    if (o) {
       const e = r.current;
       if (!e) return;
-      s.current = !0, f.current = t.pageX - e.offsetLeft, u.current = e.scrollLeft, e.classList.add(n.grabbing);
+      s.current = !0, f.current = t.pageX - e.offsetLeft, d.current = e.scrollLeft, e.classList.add(n.grabbing);
     }
   }, x = (t) => {
-    if (c) {
+    if (o) {
       const e = r.current;
       if (!e || !s.current) return;
       t.preventDefault();
       const C = (t.pageX - e.offsetLeft - f.current) * v;
-      e.scrollLeft = u.current + C;
+      e.scrollLeft = d.current + C;
     }
-  }, b = () => {
-    if (c) {
+  }, g = () => {
+    if (o) {
       const t = r.current;
       s.current = !1, t == null || t.classList.remove(n.grabbing);
     }
   }, $ = () => {
-    s.current && c && b();
-  }, a = () => {
+    s.current && o && g();
+  }, _ = () => {
     const t = r.current;
-    t && (S(t.scrollLeft > 0), R(t.scrollLeft + t.clientWidth < t.scrollWidth));
-  }, d = (t) => {
+    t && (S(t.scrollLeft > 0), q(t.scrollLeft + t.clientWidth < t.scrollWidth));
+  }, h = (t) => {
     const e = r.current;
     if (!e) return;
-    const g = t === "left" ? -i : i;
-    e.scrollBy({ left: g, behavior: "smooth" });
+    const c = t === "left" ? -u : u;
+    e.scrollBy({ left: c, behavior: "smooth" });
   };
   return D(() => {
     const t = r.current;
-    if (t)
-      return a(), t.addEventListener("scroll", a), () => t.removeEventListener("scroll", a);
-  }, []), /* @__PURE__ */ N("div", { className: `${n.wrapper}`, children: [
-    M && /* @__PURE__ */ o("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => d("left"), children: p }),
-    /* @__PURE__ */ o("div", { onMouseDown: w, onMouseLeave: $, onMouseMove: x, onMouseUp: b, className: `${n.container} ${c && n.grab}`, ref: r, children: h.map((t, e) => /* @__PURE__ */ o("div", { className: n.item, children: t }, e)) }),
-    y && /* @__PURE__ */ o("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => d("right"), children: L })
+    if (!t) return;
+    const e = () => _();
+    t.addEventListener("scroll", e);
+    const c = setTimeout(() => {
+      _();
+    }, 0);
+    return () => {
+      clearTimeout(c), t.removeEventListener("scroll", e);
+    };
+  }, [i]), /* @__PURE__ */ N("div", { className: `${n.wrapper}`, children: [
+    M && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => h("left"), children: L }),
+    /* @__PURE__ */ l("div", { onMouseDown: w, onMouseLeave: $, onMouseMove: x, onMouseUp: g, className: `${n.container} ${o && n.grab}`, ref: r, children: i.map((t, e) => /* @__PURE__ */ l("div", { className: n.item, children: t }, e)) }),
+    R && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => h("right"), children: b })
   ] });
 };
 export {
-  T as ButtonControlledScroll
+  W as ButtonControlledScroll
 };

package/dist/styles/ButtonControlledScroll.css

@@ -1 +1 @@
-._wrapper_r0cby_6{position:relative;display:flex;align-items:center;width:100%;-webkit-user-select:none;user-select:none}._wrapper_r0cby_6 label{-webkit-user-select:none;user-select:none}._wrapper_r0cby_6 ._container_r0cby_16{display:flex;overflow-x:auto;gap:10px;padding:10px;width:100%;scroll-behavior:smooth}._wrapper_r0cby_6 ._container_r0cby_16::-webkit-scrollbar{display:none}._wrapper_r0cby_6 ._btn_r0cby_27{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:.375rem;border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--background-primary);position:absolute;cursor:pointer}._wrapper_r0cby_6 ._btn_r0cby_27 *{z-index:2}._wrapper_r0cby_6 ._grab_r0cby_44{cursor:grab;scroll-behavior:initial}._wrapper_r0cby_6 ._grabbing_r0cby_48{cursor:grabbing}._wrapper_r0cby_6 ._btn_r0cby_27:hover{background-color:var(--background-tooltip)}._wrapper_r0cby_6 ._btnLeft_r0cby_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_r0cby_6 ._btnRight_r0cby_59{right:0;top:50%;transform:translateY(-50%)}
+._wrapper_q8o27_6{position:relative;display:flex;align-items:center;width:300px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_q8o27_6 label{-webkit-user-select:none;user-select:none}._wrapper_q8o27_6 ._container_q8o27_18{display:flex;overflow-x:auto;gap:10px;width:100%;scroll-behavior:smooth}._wrapper_q8o27_6 ._container_q8o27_18::-webkit-scrollbar{display:none}._wrapper_q8o27_6 ._btn_q8o27_28{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:.375rem;border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--background-primary);position:absolute;cursor:pointer}._wrapper_q8o27_6 ._btn_q8o27_28 *{z-index:2}._wrapper_q8o27_6 ._grab_q8o27_45{cursor:grab;scroll-behavior:initial}._wrapper_q8o27_6 ._grabbing_q8o27_49{cursor:grabbing}._wrapper_q8o27_6 ._btn_q8o27_28:hover{background-color:var(--background-tooltip)}._wrapper_q8o27_6 ._btnLeft_q8o27_55{left:0;top:50%;transform:translateY(-50%)}._wrapper_q8o27_6 ._btnRight_q8o27_60{right:0;top:50%;transform:translateY(-50%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",