@companix/uikit 0.0.3 → 0.0.5

package/dist/bundle.es5.js

@@ -1,88 +1,87 @@
-import { jsx as v } from "react/jsx-runtime";
-/* empty css            */
-import I from "classnames";
-import { forwardRef as S } from "react";
-import { varToStyle as r, px as i } from "@companix/utils-browser";
-const E = S((t, c) => {
-  let {
-    interactionKind: m = "static",
-    thumbPos: g = "center",
-    thumbPadding: l = 4,
-    heightAuto: s,
-    scrollX: h,
-    className: p,
-    scrollY: n,
-    onWheel: b,
-    maxHeight: d,
-    onScroll: f,
-    thumbColor: u,
-    children: w
-  } = t;
-  const x = (() => {
-    if (t.implementation === "edge") {
-      l = 0;
-      const { padding: o, scrollbarWidth: e } = t;
-      return {
-        ...r({ "--scrollbar-width": i(e) }),
-        padding: `0px ${o - e}px 0px ${o}px`
-      };
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import L from "classnames";
+import { useRef as d, useMemo as f, useCallback as n, useEffect as T, useLayoutEffect as H } from "react";
+import { getContainers as p, pc as h, px as v } from "@companix/utils-browser";
+const C = ({
+  children: b,
+  thumbClassName: y,
+  scrollableClassName: g,
+  thumbMargin: R = 0,
+  trackWidth: w = 20
+}) => {
+  const l = d(null), t = d(null), r = f(() => ({ positons: { top: 0, y: 0 }, scrollRatio: 0 }), []), i = f(() => ({
+    start() {
+      document.addEventListener("mousemove", a), document.addEventListener("mouseup", m);
+    },
+    clear() {
+      document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", m);
     }
-    if (t.implementation === "outer") {
-      const { shadowPadding: o = 0, noneCorrect: e, scrollbarWidth: a } = t;
-      return window.IS_MOBILE ? {
-        padding: o,
-        margin: -o
-      } : {
-        ...r({ "--scrollbar-width": i(a) }),
-        padding: o,
-        margin: -o,
-        marginRight: e ? void 0 : `calc(-${a}px - ${o}px)`,
-        marginBottom: 0
-      };
+  }), []);
+  T(() => {
+    const o = new ResizeObserver(u);
+    return t.current && p(t.current, (e) => {
+      o.observe(e);
+    }), () => {
+      t.current && p(t.current, (e) => {
+        o.unobserve(e);
+      });
+    };
+  }, []), H(() => {
+    u();
+  }, []);
+  const u = n(() => {
+    const { current: o } = t, { current: e } = l;
+    if (e && o) {
+      const s = o.clientHeight / o.scrollHeight;
+      e.style.height = h(s * 100), e.style.display = s === 1 ? "none" : "block", r.scrollRatio = s;
     }
-    if (t.implementation === "inner") {
-      const { padding: o } = t;
-      return window.IS_MOBILE ? {
-        [n ? "paddingLeft" : "paddingTop"]: o,
-        [n ? "paddingRight" : "paddingBottom"]: o
-      } : {
-        [n ? "paddingLeft" : "paddingTop"]: o,
-        ...r({ "--scrollbar-width": i(o) })
-      };
+  }, []), a = n(({ clientY: o }) => {
+    const { current: e } = t;
+    if (e) {
+      const s = o - r.positons.y;
+      e.scrollTop = r.positons.top + s / r.scrollRatio;
     }
-    return {};
-  })();
-  return /* @__PURE__ */ v(
-    "div",
-    {
-      ref: c,
-      onWheel: b,
-      onScroll: f,
-      onMouseDown: (o) => {
-        o.preventDefault();
-      },
-      style: {
-        ...x,
-        ...t.style,
-        maxHeight: d ? i(d) : void 0,
-        ...r({ "--thumb-padding": i(l) }),
-        ...r({ "--thumb-color": u ?? "#c1c2c8bd" })
-      },
-      className: I(
-        !window.IS_MOBILE && "scrollable",
-        p,
-        s ? "" : "h-full",
-        {
-          "overflow-y-scroll": n,
-          "overflow-x-scroll": h,
-          "scrollable-hover-interaction": m === "hover",
-          "scrollable-border-position": g === "border"
-        }
-      ),
-      children: w
-    }
-  );
-});
+  }, []), m = n(() => {
+    i.clear();
+  }, []), E = n(({ clientY: o }) => {
+    const { current: e } = t;
+    e && (r.positons = {
+      top: e.scrollTop,
+      y: o
+    }), i.start();
+  }, []), M = () => {
+    requestAnimationFrame(() => {
+      const { current: o } = t, { current: e } = l;
+      e && o && (e.style.top = h(o.scrollTop * 100 / o.scrollHeight));
+    });
+  };
+  return /* @__PURE__ */ x("div", { className: "relative h-full overflow-hidden", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: L("hidden-scroll h-full overflow-y-scroll", g),
+        onScroll: M,
+        ref: t,
+        children: b
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "absolute right-0 top-0 box-border h-full",
+        style: { width: v(w), padding: v(R) },
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            onMouseDown: E,
+            className: `${y} relative w-full rounded-full`,
+            ref: l
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  E as Scrollable
+  C as ImitateScroll
 };

package/dist/bundle.es6.js

@@ -1,87 +1,80 @@
-import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import L from "classnames";
-import { useRef as d, useMemo as f, useCallback as n, useEffect as T, useLayoutEffect as H } from "react";
-import { getContainers as p, pc as h, px as v } from "@companix/utils-browser";
-const C = ({
-  children: b,
-  thumbClassName: y,
-  scrollableClassName: g,
-  thumbMargin: R = 0,
-  trackWidth: w = 20
-}) => {
-  const l = d(null), t = d(null), r = f(() => ({ positons: { top: 0, y: 0 }, scrollRatio: 0 }), []), i = f(() => ({
-    start() {
-      document.addEventListener("mousemove", a), document.addEventListener("mouseup", m);
-    },
-    clear() {
-      document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", m);
-    }
-  }), []);
-  T(() => {
-    const o = new ResizeObserver(u);
-    return t.current && p(t.current, (e) => {
-      o.observe(e);
-    }), () => {
-      t.current && p(t.current, (e) => {
-        o.unobserve(e);
-      });
-    };
-  }, []), H(() => {
-    u();
-  }, []);
-  const u = n(() => {
-    const { current: o } = t, { current: e } = l;
-    if (e && o) {
-      const s = o.clientHeight / o.scrollHeight;
-      e.style.height = h(s * 100), e.style.display = s === 1 ? "none" : "block", r.scrollRatio = s;
-    }
-  }, []), a = n(({ clientY: o }) => {
-    const { current: e } = t;
-    if (e) {
-      const s = o - r.positons.y;
-      e.scrollTop = r.positons.top + s / r.scrollRatio;
-    }
-  }, []), m = n(() => {
-    i.clear();
-  }, []), E = n(({ clientY: o }) => {
-    const { current: e } = t;
-    e && (r.positons = {
-      top: e.scrollTop,
-      y: o
-    }), i.start();
-  }, []), M = () => {
-    requestAnimationFrame(() => {
-      const { current: o } = t, { current: e } = l;
-      e && o && (e.style.top = h(o.scrollTop * 100 / o.scrollHeight));
-    });
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-popover";
+import { attr as y } from "@companix/utils-browser";
+import B from "classnames";
+import { forwardRef as M, useRef as j } from "react";
+const D = M((a, i) => {
+  const {
+    children: n,
+    sideOffset: s,
+    matchTarget: l,
+    onAnimationEnd: c,
+    onAnimationStart: m,
+    onOpenAutoFocus: d,
+    onCloseAutoFocus: f,
+    triggerRef: p,
+    triggerProps: h,
+    open: g,
+    content: u,
+    onOpenChange: v,
+    align: C,
+    disabled: w,
+    minimal: x,
+    className: L,
+    fitMaxHeight: N = !0,
+    side: O,
+    showArrows: A
+  } = a, e = j(null), P = () => {
+    e.current && e.current.click();
+  }, b = (R) => {
+    w && R.preventDefault();
   };
-  return /* @__PURE__ */ x("div", { className: "relative h-full overflow-hidden", children: [
-    /* @__PURE__ */ c(
-      "div",
+  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
+    /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: b, asChild: !0, children: n }),
+    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
+      o.Content,
       {
-        className: L("hidden-scroll h-full overflow-y-scroll", g),
-        onScroll: M,
-        ref: t,
-        children: b
+        ref: i,
+        className: B("popover", L),
+        side: O,
+        align: C,
+        "data-appearance": x ? "minimal" : "default",
+        "data-match-target": l,
+        sideOffset: s ?? 6,
+        avoidCollisions: !0,
+        arrowPadding: 10,
+        onAnimationStart: m,
+        onAnimationEnd: c,
+        onOpenAutoFocus: d,
+        onCloseAutoFocus: f,
+        children: [
+          /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
+          A && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "popover-arrow-border",
+                d: "M 18.112 -2.704 C 19.127 -3.64 19.999 -5.626 19.999 -7.001 L 19.999 18.999 C 19.999 17.621 19.131 15.642 18.111 14.702 L 10.927 8.084 C 9.69 6.944 9.694 5.05 10.927 3.914 L 18.112 -2.704 Z",
+                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
+                transform: "matrix(0, -1, 1, 0, 0.000001, 0)"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "popover-arrow-fill",
+                d: "M 17.789 -2.965 C 19.009 -4.09 19.999 -6.341 19.999 -7.995 L 19.999 -10.001 L 19.999 19.999 L 19.999 17.994 C 19.999 16.34 19.016 14.094 17.789 12.964 L 10.606 6.348 C 9.796 5.602 9.804 4.388 10.606 3.648 L 17.789 -2.966 L 17.789 -2.965 Z",
+                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
+                transform: "matrix(0, -1, 1, 0, 0, 0)"
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": y(N), children: u({ close: P }) })
+        ]
       }
-    ),
-    /* @__PURE__ */ c(
-      "div",
-      {
-        className: "absolute right-0 top-0 box-border h-full",
-        style: { width: v(w), padding: v(R) },
-        children: /* @__PURE__ */ c(
-          "div",
-          {
-            onMouseDown: E,
-            className: `${y} relative w-full rounded-full`,
-            ref: l
-          }
-        )
-      }
-    )
+    ) })
   ] });
-};
+});
 export {
-  C as ImitateScroll
+  D as Popover
 };

package/dist/bundle.es7.js

@@ -1,80 +1,28 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
-import { attr as y } from "@companix/utils-browser";
-import B from "classnames";
-import { forwardRef as M, useRef as j } from "react";
-const D = M((a, i) => {
-  const {
-    children: n,
-    sideOffset: s,
-    matchTarget: l,
-    onAnimationEnd: c,
-    onAnimationStart: m,
-    onOpenAutoFocus: d,
-    onCloseAutoFocus: f,
-    triggerRef: p,
-    triggerProps: h,
-    open: g,
-    content: u,
-    onOpenChange: v,
-    align: C,
-    disabled: w,
-    minimal: x,
-    className: L,
-    fitMaxHeight: N = !0,
-    side: O,
-    showArrows: A
-  } = a, e = j(null), P = () => {
-    e.current && e.current.click();
-  }, b = (R) => {
-    w && R.preventDefault();
-  };
-  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
-    /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: b, asChild: !0, children: n }),
-    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
-      o.Content,
-      {
-        ref: i,
-        className: B("popover", L),
-        side: O,
-        align: C,
-        "data-appearance": x ? "minimal" : "default",
-        "data-match-target": l,
-        sideOffset: s ?? 6,
-        avoidCollisions: !0,
-        arrowPadding: 10,
-        onAnimationStart: m,
-        onAnimationEnd: c,
-        onOpenAutoFocus: d,
-        onCloseAutoFocus: f,
-        children: [
-          /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
-          A && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
-            /* @__PURE__ */ r(
-              "path",
-              {
-                className: "popover-arrow-border",
-                d: "M 18.112 -2.704 C 19.127 -3.64 19.999 -5.626 19.999 -7.001 L 19.999 18.999 C 19.999 17.621 19.131 15.642 18.111 14.702 L 10.927 8.084 C 9.69 6.944 9.694 5.05 10.927 3.914 L 18.112 -2.704 Z",
-                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
-                transform: "matrix(0, -1, 1, 0, 0.000001, 0)"
-              }
-            ),
-            /* @__PURE__ */ r(
-              "path",
-              {
-                className: "popover-arrow-fill",
-                d: "M 17.789 -2.965 C 19.009 -4.09 19.999 -6.341 19.999 -7.995 L 19.999 -10.001 L 19.999 19.999 L 19.999 17.994 C 19.999 16.34 19.016 14.094 17.789 12.964 L 10.606 6.348 C 9.796 5.602 9.804 4.388 10.606 3.648 L 17.789 -2.966 L 17.789 -2.965 Z",
-                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
-                transform: "matrix(0, -1, 1, 0, 0, 0)"
-              }
-            )
-          ] }) }) }),
-          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": y(N), children: u({ close: P }) })
-        ]
-      }
-    ) })
-  ] });
-});
+import { jsx as n } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Popover as m } from "./bundle.es6.js";
+const f = ({ children: e, content: t, side: r }) => {
+  const [s, o] = p(!1);
+  return /* @__PURE__ */ n(
+    m,
+    {
+      showArrows: !0,
+      className: "tooltip",
+      open: s,
+      side: r,
+      content: () => t,
+      triggerProps: {
+        onMouseEnter: () => {
+          o(!0);
+        },
+        onMouseLeave: () => {
+          o(!1);
+        }
+      },
+      children: e
+    }
+  );
+};
 export {
-  D as Popover
+  f as Tooltip
 };

package/dist/bundle.es8.js

@@ -1,29 +1,87 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as n } from "react";
-/* empty css           */
-import { Popover as m } from "./bundle.es7.js";
-const l = ({ children: e, content: t, side: r }) => {
-  const [s, o] = n(!1);
-  return /* @__PURE__ */ p(
-    m,
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as E, useEffect as I } from "react";
+import { OptionsList as b } from "./bundle.es12.js";
+import { OptionItem as B } from "./bundle.es10.js";
+import { Popover as F } from "./bundle.es6.js";
+import { useFroozeClosing as z } from "./bundle.es30.js";
+import { SelectInput as D } from "./bundle.es31.js";
+import { useScrollListController as L } from "./bundle.es32.js";
+const y = (c) => {
+  const {
+    options: e,
+    onChange: i,
+    minimalOptions: a,
+    clearButton: m,
+    clearButtonIcon: u,
+    matchTarget: f = "width",
+    value: l,
+    children: n,
+    disabled: s,
+    ...d
+  } = c, p = E(() => {
+    const o = e.findIndex((t) => t.value === l);
+    return {
+      index: o,
+      option: e[o]
+    };
+  }, [e, l]), v = p.option?.value ?? null, { popoverRef: h, froozePopoverPosition: x, handleAnimationEnd: O } = z(), { scrollToElement: C, optionsWrapperRef: g, scrollBoxRef: P } = L(), R = (o, t) => {
+    x(), i(o), t();
+  }, S = (o) => {
+    o.stopPropagation(), i(null);
+  }, A = () => {
+    p.index !== -1 && C(p.index, !0);
+  };
+  return /* @__PURE__ */ r(
+    F,
     {
-      showArrows: !0,
-      className: "tooltip",
-      open: s,
-      side: r,
-      content: () => t,
-      triggerProps: {
-        onMouseEnter: () => {
-          o(!0);
-        },
-        onMouseLeave: () => {
-          o(!1);
+      minimal: !0,
+      ref: h,
+      sideOffset: 0,
+      matchTarget: f,
+      onAnimationEnd: O,
+      onOpenAutoFocus: (o) => o.preventDefault(),
+      onCloseAutoFocus: (o) => o.preventDefault(),
+      disabled: s,
+      content: ({ close: o }) => /* @__PURE__ */ r(
+        T,
+        {
+          options: e,
+          active: v,
+          scrollboxRef: P,
+          optionsWrapperRef: g,
+          minimalOptions: a,
+          onOpened: A,
+          onSelect: (t) => R(t, o)
         }
-      },
-      children: e
+      ),
+      children: n ?? /* @__PURE__ */ r(
+        D,
+        {
+          ...d,
+          disabled: s,
+          value: p.option?.title ?? "",
+          onClear: S,
+          clearButton: m,
+          clearButtonIcon: u
+        }
+      )
     }
   );
+}, T = (c) => {
+  const { active: e, onOpened: i, scrollboxRef: a, optionsWrapperRef: m, options: u, onSelect: f, minimalOptions: l } = c;
+  return I(() => {
+    i?.();
+  }, []), /* @__PURE__ */ r(b, { scrollboxRef: a, optionsWrapperRef: m, maxHeight: 300, children: u.map((n, s) => /* @__PURE__ */ r(
+    B,
+    {
+      active: e === n.value,
+      onClick: () => f?.(n.value),
+      minimal: l,
+      ...n
+    },
+    `option-item-${n.value}-${s}`
+  )) });
 };
 export {
-  l as Tooltip
+  y as Select
 };