@konstructio/ui 0.1.2-alpha.108 → 0.1.2-alpha.109

package/dist/lib/components/Select/contexts/select.provider.d.ts

@@ -7,4 +7,5 @@ export declare const SelectProvider: FC<PropsWithChildren & {
     options: Option[];
     onChange?: SelectProps['onChange'];
     onBlur?: SelectProps['onBlur'];
+    onValueChange?: SelectProps['onValueChange'];
 }>;

package/dist/lib/components/Select/hooks/useSelect.d.ts

@@ -4,9 +4,11 @@ type UseSelectParams = {
     inputRef?: RefObject<ComponentRef<'input'> | null>;
     searchInputRef?: RefObject<ComponentRef<'input'> | null>;
     internalValue?: Option;
+    listRef?: RefObject<HTMLElement | null>;
     onBlur?: SelectProps['onBlur'];
 };
-export declare const useSelect: ({ inputRef, searchInputRef, internalValue, onBlur, }: UseSelectParams) => {
+export declare const useSelect: ({ inputRef, searchInputRef, internalValue, listRef, onBlur, }: UseSelectParams) => {
+    isInside: (node: Node | null) => boolean;
     wrapperRef: RefObject<HTMLDivElement | null>;
     wrapperInputRef: RefObject<HTMLDivElement | null>;
     handleOpen: () => void;

package/dist/lib/hooks/useClickOutside.d.ts

@@ -1,2 +1,4 @@
 import { RefObject } from 'react';
-export declare const useClickOutside: (ref: RefObject<HTMLElement | null>, onClickOutside: () => void) => void;
+type Target = RefObject<HTMLElement | null> | undefined;
+export declare const useClickOutside: (refs: Target | Target[], onClickOutside: () => void) => void;
+export {};

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.107",
+  "version": "0.1.2-alpha.108",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.108",
+  "version": "0.1.2-alpha.109",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/Wrapper-2AUlYAHQ.js

@@ -1,195 +0,0 @@
-import { t as r } from "./utils-B-6R7kNE.js";
-import { LoaderIcon as ue } from "./assets/icons/components/Loader.js";
-import { t as me } from "./createLucideIcon-MbzNWCaI.js";
-import { t as de } from "./chevron-up-Bjpvg6ui.js";
-import { Typography as pe } from "./components/Typography/Typography.js";
-import { useSelectContext as fe } from "./components/Select/contexts/select.hook.js";
-import { List as xe } from "./components/Select/components/List/List.js";
-import { inputVariants as he, labelVariants as ve, selectVariants as ye } from "./components/Select/Select.variants.js";
-import { useSelect as we } from "./components/Select/hooks/useSelect.js";
-import { forwardRef as Ne, useEffect as ge, useImperativeHandle as ke, useMemo as Ce, useRef as y } from "react";
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-var be = [["path", {
-  d: "m21 21-4.34-4.34",
-  key: "14j7rj"
-}], ["circle", {
-  cx: "11",
-  cy: "11",
-  r: "8",
-  key: "4ej97u"
-}]], Ie = me("search", be), $e = Ne(({ additionalOptions: S, className: E, defaultValue: w, describedBy: k, fieldId: N, disabled: a = !1, error: s, groupedOptions: F, iconClassName: $, inputClassName: K, isInfiniteScrollEnabled: M = !1, isLoading: C, isRequired: f, loadingText: W, label: o, labelAction: _, labelClassName: q, labelWrapperClassName: A, listClassName: H, listItemClassName: P, listItemSecondRowClassName: U, name: b, noOptionsText: B, placeholder: x, searchable: I = !1, showSearchIcon: g, theme: G, visibleItems: J, wrapperClassName: Q, onFetchMoreOptions: X, onBlur: Y, onSearchChange: Z, ...j }, ee) => {
-  const h = `${N}-label`, L = `${N}-control`, O = `${N}-listbox`, m = y(null), V = y(null), z = y(null), te = y(0), { isOpen: l, options: i, searchTerm: ae, value: c, setCanFilter: re, setSearchTerm: ne, setValue: d, toggleOpen: oe } = fe(), t = Ce(() => i.find(({ value: e }) => e === c), [i, c]), { wrapperRef: le, wrapperInputRef: D, handleOpen: v } = we({
-    inputRef: m,
-    searchInputRef: V,
-    internalValue: t,
-    onBlur: Y
-  }), R = () => {
-    if (!a) {
-      if (l) {
-        oe(!1);
-        return;
-      }
-      v();
-    }
-  }, ie = (e) => {
-    if (!a) {
-      if (e.key === "ArrowDown") {
-        if (e.preventDefault(), !l) {
-          v();
-          return;
-        }
-        z.current?.querySelector('li:not([data-action="true"])')?.focus();
-        return;
-      }
-      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
-    }
-  };
-  ke(ee, () => m.current, [m]), ge(() => {
-    if (w && !c) {
-      const e = i && i.find((p) => p.value === w);
-      e && d(e.value);
-    }
-  }, [
-    w,
-    i,
-    d,
-    c
-  ]);
-  const se = (e) => {
-    const p = e.target.value;
-    re(!0), d(""), ne(p ?? ""), Z?.(p);
-    const T = i.find((ce) => ce.value.toLocaleLowerCase() === p.toLocaleLowerCase());
-    d(T ? T.value : t?.value ?? "");
-  };
-  return /* @__PURE__ */ u("div", {
-    ref: le,
-    className: r("flex flex-col gap-2 w-full relative", Q),
-    "data-theme": G,
-    children: [
-      o ? /* @__PURE__ */ u("div", {
-        className: r("flex items-center justify-between", A),
-        children: [/* @__PURE__ */ u("label", {
-          id: h,
-          className: r(ve({ className: q })),
-          htmlFor: L,
-          onClick: () => !a && v(),
-          children: [o, f && /* @__PURE__ */ n("span", {
-            "aria-hidden": "true",
-            className: "text-red-600 dark:text-red-500 ml-1",
-            children: "*"
-          })]
-        }), _]
-      }) : null,
-      /* @__PURE__ */ u("div", {
-        ref: D,
-        id: L,
-        className: r(ye({
-          className: E,
-          hasError: !!s,
-          disabled: a
-        })),
-        role: "combobox",
-        onClick: R,
-        onKeyDown: ie,
-        "aria-expanded": l,
-        tabIndex: te.current,
-        "aria-labelledby": o ? h : void 0,
-        "aria-label": o ? void 0 : x,
-        "aria-haspopup": "listbox",
-        "aria-controls": l ? O : void 0,
-        "aria-invalid": !!s || void 0,
-        "aria-describedby": k,
-        "aria-required": f || void 0,
-        "aria-disabled": a || void 0,
-        children: [/* @__PURE__ */ u("div", {
-          className: "flex gap-2.5 items-center flex-1",
-          children: [
-            t?.leftIcon && !g && /* @__PURE__ */ n("span", {
-              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
-              children: t.leftIcon
-            }),
-            g && /* @__PURE__ */ n(Ie, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
-            I ? /* @__PURE__ */ n("input", {
-              ref: V,
-              type: "text",
-              value: l ? ae : t?.label ?? c ?? "",
-              onChange: se,
-              placeholder: x,
-              className: r(he({ className: K }), { "text-red-700 placeholder:text-red-700": !!s }),
-              onClick: (e) => {
-                e.stopPropagation(), a || v();
-              },
-              "aria-labelledby": o ? h : void 0,
-              "aria-label": o ? void 0 : x,
-              "aria-invalid": !!s || void 0,
-              "aria-describedby": k,
-              required: f,
-              autoComplete: "off",
-              autoCapitalize: "words",
-              disabled: a,
-              tabIndex: -1,
-              ...j
-            }) : /* @__PURE__ */ u(pe, {
-              variant: "body2",
-              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
-                "text-red-700": !!s,
-                "select-none": !t,
-                "text-metal-800 dark:text-metal-50": t,
-                "text-metal-400/50 dark:text-metal-50/50": a
-              }, t?.wrapperClassNameOnSelectedValue),
-              children: [
-                t?.label || x,
-                " ",
-                t?.showRightComponentOnselectedValue ? t?.rightComponent : null
-              ]
-            })
-          ]
-        }), C ? /* @__PURE__ */ n(ue, {
-          size: 16,
-          className: "text-metal-400 animate-spin select-none"
-        }) : !g && /* @__PURE__ */ n(de, {
-          "data-state": l ? "open" : "closed",
-          className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", $, {
-            "text-red-700": !!s,
-            "text-metal-400/50 dark:group-focus-within:text-zinc-500": a
-          })
-        })]
-      }),
-      /* @__PURE__ */ n("input", {
-        ref: m,
-        type: "text",
-        name: b,
-        className: "hidden",
-        "aria-hidden": "true",
-        required: f,
-        inert: !0,
-        defaultValue: t?.value ?? c ?? void 0,
-        ...j
-      }),
-      l && /* @__PURE__ */ n(xe, {
-        ref: z,
-        id: O,
-        labelledBy: o ? h : void 0,
-        additionalOptions: S,
-        className: H,
-        groupedOptions: F,
-        itemClassName: P,
-        name: b,
-        wrapperInputRef: D,
-        inputRef: m,
-        options: i,
-        isLoading: !!C,
-        searchable: I,
-        listItemSecondRowClassName: U,
-        isInfiniteScrollEnabled: M,
-        onFetchMoreOptions: X,
-        noOptionsText: B,
-        loadingText: W,
-        visibleItems: J
-      })
-    ]
-  });
-});
-export {
-  $e as t
-};

package/dist/dist-BnCbAI-c.js

@@ -1,166 +0,0 @@
-import { a as _, n as D } from "./dist-xCbHbMLA.js";
-import { t as M } from "./dist-CCdbu9GU.js";
-import { i as I, r as m, t as T } from "./dist-D-yS0HN8.js";
-import { t as k } from "./dist-DYIabsrY.js";
-import { n as y } from "./dist-DKryKPmP.js";
-import { n as N, r as $, t as G } from "./es2015-CoHq2g4y.js";
-import { t as L } from "./dist-C4j75TwZ.js";
-import { t as A } from "./dist-BUocnzkM.js";
-import { t as j } from "./Combination-CnMM05mt.js";
-import { a as b, i as H, r as K, t as U } from "./dist-9WbMf_jT.js";
-import * as i from "react";
-import { jsx as s } from "react/jsx-runtime";
-var V = Object.defineProperty, l = (p, e) => V(p, "name", {
-  value: e,
-  configurable: !0
-}), R = "Popover", [F, fe] = I(R, [b]), O = b(), [Z, v] = F(R), q = /* @__PURE__ */ l((p) => {
-  const { __scopePopover: e, children: c, open: r, defaultOpen: n, onOpenChange: t, modal: o = !1 } = p, a = O(e), u = i.useRef(null), [P, d] = i.useState(!1), [C, f] = T({
-    prop: r,
-    defaultProp: n ?? !1,
-    onChange: t,
-    caller: R
-  });
-  return /* @__PURE__ */ s(H, {
-    ...a,
-    children: /* @__PURE__ */ s(Z, {
-      scope: e,
-      contentId: k(),
-      triggerRef: u,
-      open: C,
-      onOpenChange: f,
-      onOpenToggle: i.useCallback(() => f((g) => !g), [f]),
-      hasCustomAnchor: P,
-      onCustomAnchorAdd: i.useCallback(() => d(!0), []),
-      onCustomAnchorRemove: i.useCallback(() => d(!1), []),
-      modal: o,
-      children: c
-    })
-  });
-}, "Popover"), z = "PopoverTrigger", B = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ l(function(e, c) {
-  const { __scopePopover: r, ...n } = e, t = v(z, r), o = O(r), a = _(c, t.triggerRef), u = /* @__PURE__ */ s(M.button, {
-    type: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": t.open,
-    "aria-controls": t.open ? t.contentId : void 0,
-    "data-state": x(t.open),
-    ...n,
-    ref: a,
-    onClick: m(e.onClick, t.onOpenToggle)
-  });
-  return t.hasCustomAnchor ? u : /* @__PURE__ */ s(U, {
-    asChild: !0,
-    ...o,
-    children: u
-  });
-}, "PopoverTrigger")), E = "PopoverPortal", [J, Q] = F(E, { forceMount: void 0 }), W = /* @__PURE__ */ l((p) => {
-  const { __scopePopover: e, forceMount: c, children: r, container: n } = p, t = v(E, e);
-  return /* @__PURE__ */ s(J, {
-    scope: e,
-    forceMount: c,
-    children: /* @__PURE__ */ s(A, {
-      present: c || t.open,
-      children: /* @__PURE__ */ s(L, {
-        asChild: !0,
-        container: n,
-        children: r
-      })
-    })
-  });
-}, "PopoverPortal"), h = "PopoverContent", X = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ l(function(e, c) {
-  const r = Q(h, e.__scopePopover), { forceMount: n = r.forceMount, ...t } = e, o = v(h, e.__scopePopover);
-  return /* @__PURE__ */ s(A, {
-    present: n || o.open,
-    children: o.modal ? /* @__PURE__ */ s(ee, {
-      ...t,
-      ref: c
-    }) : /* @__PURE__ */ s(oe, {
-      ...t,
-      ref: c
-    })
-  });
-}, "PopoverContent")), Y = D("PopoverContent.RemoveScroll"), ee = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ l(function(e, c) {
-  const r = v(h, e.__scopePopover), n = i.useRef(null), t = _(c, n), o = i.useRef(!1);
-  return i.useEffect(() => {
-    const a = n.current;
-    if (a) return G(a);
-  }, []), /* @__PURE__ */ s(j, {
-    as: Y,
-    allowPinchZoom: !0,
-    children: /* @__PURE__ */ s(w, {
-      ...e,
-      ref: t,
-      trapFocus: r.open,
-      disableOutsidePointerEvents: !0,
-      onCloseAutoFocus: m(e.onCloseAutoFocus, (a) => {
-        a.preventDefault(), o.current || r.triggerRef.current?.focus();
-      }),
-      onPointerDownOutside: m(e.onPointerDownOutside, (a) => {
-        const u = a.detail.originalEvent, P = u.button === 0 && u.ctrlKey === !0, d = u.button === 2 || P;
-        o.current = d;
-      }, { checkForDefaultPrevented: !1 }),
-      onFocusOutside: m(e.onFocusOutside, (a) => a.preventDefault(), { checkForDefaultPrevented: !1 })
-    })
-  });
-}, "PopoverContentModal")), oe = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ l(function(e, c) {
-  const r = v(h, e.__scopePopover), n = i.useRef(!1), t = i.useRef(!1);
-  return /* @__PURE__ */ s(w, {
-    ...e,
-    ref: c,
-    trapFocus: !1,
-    disableOutsidePointerEvents: !1,
-    onCloseAutoFocus: (o) => {
-      e.onCloseAutoFocus?.(o), o.defaultPrevented || (n.current || r.triggerRef.current?.focus(), o.preventDefault()), n.current = !1, t.current = !1;
-    },
-    onInteractOutside: (o) => {
-      e.onInteractOutside?.(o), o.defaultPrevented || (n.current = !0, o.detail.originalEvent.type === "pointerdown" && (t.current = !0));
-      const a = o.target;
-      r.triggerRef.current?.contains(a) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && t.current && o.preventDefault();
-    }
-  });
-}, "PopoverContentNonModal")), w = /* @__PURE__ */ i.forwardRef(/* @__PURE__ */ l(function(e, c) {
-  const { __scopePopover: r, trapFocus: n, onOpenAutoFocus: t, onCloseAutoFocus: o, disableOutsidePointerEvents: a, onEscapeKeyDown: u, onPointerDownOutside: P, onFocusOutside: d, onInteractOutside: C, ...f } = e, g = v(h, r), S = O(r);
-  return N(), /* @__PURE__ */ s($, {
-    asChild: !0,
-    loop: !0,
-    trapped: n,
-    onMountAutoFocus: t,
-    onUnmountAutoFocus: o,
-    children: /* @__PURE__ */ s(y, {
-      asChild: !0,
-      disableOutsidePointerEvents: a,
-      onInteractOutside: C,
-      onEscapeKeyDown: u,
-      onPointerDownOutside: P,
-      onFocusOutside: d,
-      onDismiss: () => g.onOpenChange(!1),
-      deferPointerDownOutside: !0,
-      children: /* @__PURE__ */ s(K, {
-        "data-state": x(g.open),
-        role: "dialog",
-        id: g.contentId,
-        ...S,
-        ...f,
-        ref: c,
-        style: {
-          ...f.style,
-          "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
-          "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
-          "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
-          "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
-          "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
-        }
-      })
-    })
-  });
-}, "PopoverContentImpl"));
-function x(p) {
-  return p ? "open" : "closed";
-}
-l(x, "getState");
-var ve = q, Pe = B, ge = W, he = X;
-export {
-  Pe as i,
-  ge as n,
-  ve as r,
-  he as t
-};