@situaction/traq-ui-ste 1.1.15 → 1.1.16

package/dist/components/buttonControledScroll/ButtonControlledScroll.d.ts

@@ -4,6 +4,7 @@ export interface ButtonControlledScrollProps {
     items: React.ReactNode[];
     iconLeft: ReactNode;
     iconRight: ReactNode;
+    gap?: number;
     grabSpeed?: number;
     scrollAmount?: number;
     grabbable?: boolean;

package/dist/components/buttonControledScroll/ButtonControlledScroll.js

@@ -1,61 +1,61 @@
 import { jsxs as D, jsx as l } from "react/jsx-runtime";
 import { useRef as a, useState as h, useEffect as k } from "react";
-import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_7s2sp_6", T = "_container_7s2sp_18", U = "_btn_7s2sp_28", X = "_grab_7s2sp_45", j = "_grabbing_7s2sp_49", y = "_btnLeft_7s2sp_55", B = "_btnRight_7s2sp_60", n = {
+import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T = "_container_1favy_18", U = "_btn_1favy_27", X = "_grab_1favy_44", j = "_grabbing_1favy_48", B = "_btnLeft_1favy_54", O = "_btnRight_1favy_59", n = {
   wrapper: E,
   container: T,
   btn: U,
   grab: X,
   grabbing: j,
-  btnLeft: y,
-  btnRight: B
-}, A = ({ items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: v = 1.5, grabbable: r = !0 }) => {
-  const u = m, s = a(null), [M, S] = h(!1), [R, w] = h(!1), o = a(!1), f = a(0), p = a(0), x = (t) => {
-    if (r) {
-      const e = s.current;
+  btnLeft: B,
+  btnRight: O
+}, q = ({ gap: v = 10, items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: M = 1.5, grabbable: o = !0 }) => {
+  const f = m, r = a(null), [S, y] = h(!1), [R, x] = h(!1), s = a(!1), u = a(0), d = a(0), $ = (t) => {
+    if (o) {
+      const e = r.current;
       if (!e) return;
-      o.current = !0, f.current = t.pageX - e.offsetLeft, p.current = e.scrollLeft, e.classList.add(n.grabbing);
+      s.current = !0, u.current = t.pageX - e.offsetLeft, d.current = e.scrollLeft, e.classList.add(n.grabbing);
     }
-  }, $ = (t) => {
-    if (r) {
-      const e = s.current;
-      if (!e || !o.current) return;
+  }, w = (t) => {
+    if (o) {
+      const e = r.current;
+      if (!e || !s.current) return;
       t.preventDefault();
-      const N = (t.pageX - e.offsetLeft - f.current) * v;
-      e.scrollLeft = p.current + N;
+      const N = (t.pageX - e.offsetLeft - u.current) * M;
+      e.scrollLeft = d.current + N;
     }
-  }, d = () => {
-    if (r) {
-      const t = s.current;
-      o.current = !1, t == null || t.classList.remove(n.grabbing);
+  }, g = () => {
+    if (o) {
+      const t = r.current;
+      s.current = !1, t == null || t.classList.remove(n.grabbing);
     }
   }, C = () => {
-    o.current && r && d();
-  }, g = () => {
-    const t = s.current;
-    t && (S(t.scrollLeft > 0), w(t.scrollLeft + t.clientWidth < t.scrollWidth));
+    s.current && o && g();
+  }, p = () => {
+    const t = r.current;
+    t && (y(t.scrollLeft > 0), x(t.scrollLeft + t.clientWidth < t.scrollWidth));
   }, _ = (t) => {
-    const e = s.current;
+    const e = r.current;
     if (!e) return;
-    const c = t === "left" ? -u : u;
+    const c = t === "left" ? -f : f;
     e.scrollBy({ left: c, behavior: "smooth" });
   };
   return k(() => {
-    const t = s.current;
+    const t = r.current;
     if (!t) return;
-    const e = () => g();
+    const e = () => p();
     t.addEventListener("scroll", e);
     const c = setTimeout(() => {
-      g();
+      p();
     }, 0);
     return () => {
       clearTimeout(c), t.removeEventListener("scroll", e);
     };
   }, [i]), /* @__PURE__ */ D("div", { className: `${n.wrapper}`, children: [
-    M && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => _("left"), children: L }),
-    /* @__PURE__ */ l("div", { onMouseDown: x, onMouseLeave: C, onMouseMove: $, onMouseUp: d, className: `${n.container} ${r && n.grab}`, ref: s, children: i.map((t, e) => /* @__PURE__ */ l("div", { className: n.item, children: t }, e)) }),
+    S && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => _("left"), children: L }),
+    /* @__PURE__ */ l("div", { onMouseDown: $, onMouseLeave: C, onMouseMove: w, onMouseUp: g, className: `${n.container} ${o && n.grab}`, style: { gap: `${v}px` }, 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: () => _("right"), children: b })
   ] });
 };
 export {
-  A as ButtonControlledScroll
+  q as ButtonControlledScroll
 };

package/dist/styles/ButtonControlledScroll.css

@@ -1 +1 @@
-._wrapper_7s2sp_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_7s2sp_6 label{-webkit-user-select:none;user-select:none}._wrapper_7s2sp_6 ._container_7s2sp_18{display:flex;overflow-x:auto;gap:10px;width:100%;scroll-behavior:smooth}._wrapper_7s2sp_6 ._container_7s2sp_18::-webkit-scrollbar{display:none}._wrapper_7s2sp_6 ._btn_7s2sp_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_7s2sp_6 ._btn_7s2sp_28 *{z-index:2}._wrapper_7s2sp_6 ._grab_7s2sp_45{cursor:grab;scroll-behavior:initial}._wrapper_7s2sp_6 ._grabbing_7s2sp_49{cursor:grabbing}._wrapper_7s2sp_6 ._btn_7s2sp_28:hover{background-color:var(--background-tooltip)}._wrapper_7s2sp_6 ._btnLeft_7s2sp_55{left:0;top:50%;transform:translateY(-50%)}._wrapper_7s2sp_6 ._btnRight_7s2sp_60{right:0;top:50%;transform:translateY(-50%)}
+._wrapper_1favy_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_1favy_6 label{-webkit-user-select:none;user-select:none}._wrapper_1favy_6 ._container_1favy_18{display:flex;overflow-x:auto;width:100%;scroll-behavior:smooth}._wrapper_1favy_6 ._container_1favy_18::-webkit-scrollbar{display:none}._wrapper_1favy_6 ._btn_1favy_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_1favy_6 ._btn_1favy_27 *{z-index:2}._wrapper_1favy_6 ._grab_1favy_44{cursor:grab;scroll-behavior:initial}._wrapper_1favy_6 ._grabbing_1favy_48{cursor:grabbing}._wrapper_1favy_6 ._btn_1favy_27:hover{background-color:var(--background-tooltip)}._wrapper_1favy_6 ._btnLeft_1favy_54{left:0;top:50%;transform:translateY(-50%)}._wrapper_1favy_6 ._btnRight_1favy_59{right:0;top:50%;transform:translateY(-50%)}

package/package.json

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