@situaction/traq-ui-ste 1.1.12 → 1.1.13

package/dist/components/buttonControledScroll/ButtonControlledScroll.js

@@ -1,52 +1,52 @@
-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 = {
-  wrapper: k,
-  container: E,
-  btn: U,
-  grab: X,
-  grabbing: j,
+import { jsxs as D, jsx as c } from "react/jsx-runtime";
+import { useRef as l, useState as h, useEffect as k } from "react";
+import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_30f39_6", U = "_container_30f39_17", X = "_btn_30f39_27", j = "_grab_30f39_44", y = "_grabbing_30f39_48", B = "_btnLeft_30f39_54", O = "_btnRight_30f39_59", n = {
+  wrapper: E,
+  container: U,
+  btn: X,
+  grab: j,
+  grabbing: y,
   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) {
+}, T = ({ items: p, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: s = !0 }) => {
+  const i = m, r = l(null), [M, S] = h(!1), [R, w] = h(!1), o = l(!1), f = l(0), u = l(0), x = (t) => {
+    if (s) {
       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);
+      o.current = !0, f.current = t.pageX - e.offsetLeft, u.current = e.scrollLeft, e.classList.add(n.grabbing);
     }
-  }, x = (t) => {
-    if (c) {
+  }, $ = (t) => {
+    if (s) {
       const e = r.current;
-      if (!e || !s.current) return;
+      if (!e || !o.current) return;
       t.preventDefault();
-      const C = (t.pageX - e.offsetLeft - f.current) * v;
-      e.scrollLeft = u.current + C;
+      const N = (t.pageX - e.offsetLeft - f.current) * v;
+      e.scrollLeft = u.current + N;
     }
-  }, b = () => {
-    if (c) {
+  }, d = () => {
+    if (s) {
       const t = r.current;
-      s.current = !1, t == null || t.classList.remove(n.grabbing);
+      o.current = !1, t == null || t.classList.remove(n.grabbing);
     }
-  }, $ = () => {
-    s.current && c && b();
+  }, C = () => {
+    o.current && s && d();
   }, a = () => {
     const t = r.current;
-    t && (S(t.scrollLeft > 0), R(t.scrollLeft + t.clientWidth < t.scrollWidth));
-  }, d = (t) => {
+    t && (S(t.scrollLeft > 0), w(t.scrollLeft + t.clientWidth < t.scrollWidth));
+  }, g = (t) => {
     const e = r.current;
     if (!e) return;
-    const g = t === "left" ? -i : i;
-    e.scrollBy({ left: g, behavior: "smooth" });
+    const _ = t === "left" ? -i : i;
+    e.scrollBy({ left: _, behavior: "smooth" });
   };
-  return D(() => {
+  return k(() => {
     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 })
+  }, []), /* @__PURE__ */ D("div", { className: `${n.wrapper}`, children: [
+    M && /* @__PURE__ */ c("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => g("left"), children: L }),
+    /* @__PURE__ */ c("div", { onMouseDown: x, onMouseLeave: C, onMouseMove: $, onMouseUp: d, className: `${n.container} ${s && n.grab}`, ref: r, children: p.map((t, e) => /* @__PURE__ */ c("div", { className: n.item, children: t }, e)) }),
+    R && /* @__PURE__ */ c("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => g("right"), children: b })
   ] });
 };
 export {

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_30f39_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;-webkit-user-select:none;user-select:none}._wrapper_30f39_6 label{-webkit-user-select:none;user-select:none}._wrapper_30f39_6 ._container_30f39_17{display:flex;overflow-x:auto;gap:10px;width:100%;scroll-behavior:smooth}._wrapper_30f39_6 ._container_30f39_17::-webkit-scrollbar{display:none}._wrapper_30f39_6 ._btn_30f39_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_30f39_6 ._btn_30f39_27 *{z-index:2}._wrapper_30f39_6 ._grab_30f39_44{cursor:grab;scroll-behavior:initial}._wrapper_30f39_6 ._grabbing_30f39_48{cursor:grabbing}._wrapper_30f39_6 ._btn_30f39_27:hover{background-color:var(--background-tooltip)}._wrapper_30f39_6 ._btnLeft_30f39_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_30f39_6 ._btnRight_30f39_59{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.13",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",