@konstructio/ui 0.1.2-alpha.37 → 0.1.2-alpha.39

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js

@@ -0,0 +1,119 @@
+import { jsx as P } from "react/jsx-runtime";
+import { useRef as V, useState as R, useEffect as b, useCallback as p } from "react";
+import { MultiSelectDropdownContext as k } from "./MultiSelectDropdown.context.js";
+import { useToggle as y } from "../../../hooks/useToggle.js";
+const T = ({
+  children: x,
+  defaultOptions: o = [],
+  multiselect: c = !0,
+  value: a,
+  onChange: f,
+  onBlur: S,
+  name: I
+}) => {
+  const m = V(null), [u, h] = y(!1), [g, O] = R(o), [i, v] = R([]), r = a !== void 0;
+  b(() => {
+    if (r) {
+      const t = a || [];
+      v(t);
+      const n = new Set(t.map((s) => s.id));
+      O(
+        c ? o.filter((s) => !n.has(s.id)) : o.map((s) => ({
+          ...s,
+          isSelected: n.has(s.id)
+        }))
+      );
+    }
+  }, [a, r, o, c]);
+  const d = p(
+    (t) => {
+      const n = t.map(({ id: e, value: w, label: M }) => ({
+        id: e,
+        value: w ?? M
+      })), s = JSON.stringify(n);
+      m.current && (m.current.value = s), f && f({
+        target: {
+          value: t,
+          name: I ?? ""
+        }
+      });
+    },
+    [f, I]
+  ), l = p(
+    (t) => {
+      const n = u;
+      h(t), n && t === !1 && S && S();
+    },
+    [u, h, S]
+  ), j = p(
+    (t) => {
+      if (r) {
+        const e = [
+          ...c ? i : [],
+          t
+        ];
+        d(e), l(!1);
+        return;
+      }
+      const n = [
+        ...c ? i : [],
+        t
+      ];
+      v(n);
+      const s = n.map((e) => e.id);
+      O(() => c ? o.filter(
+        (e) => !s.includes(e.id)
+      ) : o.map((e) => ({
+        ...e,
+        isSelected: s.includes(e.id)
+      }))), d(n), l(!1);
+    },
+    [
+      o,
+      d,
+      c,
+      i,
+      l,
+      r
+    ]
+  ), D = p(
+    (t) => {
+      if (r) {
+        const e = i.filter(
+          (w) => w.id !== t.id
+        );
+        d(e);
+        return;
+      }
+      const n = i.filter(
+        (e) => e.id !== t.id
+      );
+      v(n);
+      const s = n.map((e) => e.id);
+      O(
+        () => o.filter(
+          (e) => !s.includes(e.id)
+        )
+      ), d(n);
+    },
+    [o, d, i, r]
+  );
+  return /* @__PURE__ */ P(
+    k.Provider,
+    {
+      value: {
+        options: g,
+        selectedOptions: i,
+        isOpen: u,
+        inputRef: m,
+        onSelectOption: j,
+        onRemoveOption: D,
+        onOpen: l
+      },
+      children: x
+    }
+  );
+};
+export {
+  T as MultiSelectDropdownProvider
+};

package/dist/components/MultiSelectDropdown/contexts/index.js

@@ -0,0 +1,6 @@
+import { useMultiSelectDropdown as r } from "./MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as l } from "./MultiSelectDropdown.provider.js";
+export {
+  l as MultiSelectDropdownProvider,
+  r as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -0,0 +1,32 @@
+import { useRef as l, useEffect as c, useCallback as u } from "react";
+import { useMultiSelectDropdown as i } from "../contexts/MultiSelectDropdown.hook.js";
+const f = () => {
+  const n = l(null), { onOpen: e } = i();
+  c(() => {
+    const t = new AbortController(), a = (o) => {
+      o.key === "Escape" && e(!1);
+    }, r = (o) => {
+      n.current?.contains(o.target) || e(!1);
+    };
+    return document.addEventListener("keydown", a, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", r, {
+      signal: t.signal
+    }), () => {
+      t.abort();
+    };
+  }, [e, n]);
+  const s = u(
+    (t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    },
+    [e]
+  );
+  return {
+    wrapperRef: n,
+    handleOpen: s
+  };
+};
+export {
+  f as useMultiSelectDropdown
+};

package/dist/components/Tag/Tag.variants.js

@@ -15,6 +15,7 @@ const f = e(
     variants: {
       color: {
         gray: ["bg-[#f4f4f5]", "text-[#71717a]"],
+        "gray-800": ["bg-gray-100", "text-gray-800"],
         cyan: ["bg-[#ecfeff]", "text-[#0e7490]"],
         gold: ["bg-[#fef9c3]", "text-[#a16207]"],
         green: ["bg-[#dcfce7]", "text-[#15803d]"],

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,135 +1,86 @@
 import "../Item/Item.js";
-import { List as j } from "../List/List.js";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
-import { Tag as P } from "../../../Tag/Tag.js";
-import { cn as l } from "../../../../utils/index.js";
-import { useTagSelect as C } from "../../hooks/useTagSelect.js";
-import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
-import { X as _ } from "../../../../x-DPU9OdYH.js";
-import { P as p } from "../../../../index--V_ZsiQe.js";
-import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var t = W(e, o), r, n;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < a.length; n++)
-      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
-  }
-  return t;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var t = {}, r = Object.keys(e), n, a;
-  for (a = 0; a < r.length; a++)
-    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
-}
-var d = w(function(e, o) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
-  return /* @__PURE__ */ b.createElement("svg", u({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: r,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ b.createElement("polyline", {
-    points: "18 15 12 9 6 15"
-  }));
-});
-d.propTypes = {
-  color: p.string,
-  size: p.oneOfType([p.string, p.number])
-};
-d.displayName = "ChevronUp";
-const G = w(
+import { List as g } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { forwardRef as w, useId as T, useImperativeHandle as b } from "react";
+import { Tag as C } from "../../../Tag/Tag.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useTagSelect as S } from "../../hooks/useTagSelect.js";
+import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
+import { X as O } from "../../../../x-DPU9OdYH.js";
+import { C as V } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
+const B = w(
   ({
-    label: e,
-    labelClassName: o,
+    label: o,
+    labelClassName: c,
     name: t,
-    placeholder: r = "Select a value...",
-    theme: n,
-    wrapperClassName: a
-  }, c) => {
-    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
-    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
+    placeholder: p = "Select a value...",
+    theme: d,
+    wrapperClassName: f
+  }, h) => {
+    const i = T(), { selectedTags: n, isOpen: s, onOpen: u, onRemoveTag: x, inputRef: l } = j(), { wrapperRef: N, handleOpen: v } = S();
+    return b(h, () => l.current, [l]), /* @__PURE__ */ m(
       "div",
       {
-        ref: O,
-        className: l(
-          R({
-            className: a
+        ref: N,
+        className: r(
+          I({
+            className: f
           })
         ),
-        "data-theme": n,
+        "data-theme": d,
         children: [
-          e ? /* @__PURE__ */ i(
+          o ? /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: t ?? h,
-              className: l(
-                S({
-                  className: o
+              htmlFor: t ?? i,
+              className: r(
+                k({
+                  className: c
                 })
               ),
-              onClick: () => x(!0),
-              children: e
+              onClick: () => u(!0),
+              children: o
             }
           ) : null,
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ m(
             "div",
             {
-              id: t ?? h,
-              className: l(z()),
+              id: t ?? i,
+              className: r(R()),
               role: "combobox",
-              onClick: N,
-              "aria-expanded": m,
+              onClick: v,
+              "aria-expanded": s,
               children: [
-                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
-                  P,
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: p }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((a) => /* @__PURE__ */ e(
+                  C,
                   {
-                    ...s,
+                    ...a,
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
-                    "data-value": s.label
+                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
+                    "data-value": a.label
                   },
-                  s.id
+                  a.id
                 )) }),
-                /* @__PURE__ */ i(
-                  d,
+                /* @__PURE__ */ e(
+                  V,
                   {
-                    className: l(
+                    className: r(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      m ? "rotate-0" : "rotate-180"
+                      s ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
-          m ? /* @__PURE__ */ i(j, {}) : null
+          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
+          s ? /* @__PURE__ */ e(g, {}) : null
         ]
       }
     );
   }
 );
 export {
-  G as Wrapper
+  B as Wrapper
 };

package/dist/components/index.js

@@ -3,100 +3,102 @@ import { AlertDialog as p } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./Autocomplete/Autocomplete.js";
 import { Badge as a } from "./Badge/Badge.js";
 import { Breadcrumb as d } from "./Breadcrumb/Breadcrumb.js";
-import { Button as g } from "./Button/Button.js";
+import { Button as l } from "./Button/Button.js";
 import { Card as u } from "./Card/Card.js";
 import { Checkbox as c } from "./Checkbox/Checkbox.js";
 import { DatePicker as D } from "./Datepicker/DatePicker.js";
-import { Divider as B } from "./Divider/Divider.js";
-import { Dropdown as N } from "./Dropdown/Dropdown.js";
+import { Divider as s } from "./Divider/Divider.js";
+import { Dropdown as C } from "./Dropdown/Dropdown.js";
 import { DropdownButton as h } from "./DropdownButton/DropdownButton.js";
-import { Filter as P } from "./Filter/Filter.js";
-import { Input as w } from "./Input/Input.js";
-import { Loading as k } from "./Loading/Loading.js";
-import { M as G } from "../Modal-CtAG97Ts.js";
-import { NumberInput as L } from "./NumberInput/NumberInput.js";
-import { PhoneNumberInput as y } from "./PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as O } from "./PieChart/PieChart.js";
-import { ProgressBar as j } from "./ProgressBar/ProgressBar.js";
-import { Radio as E } from "./Radio/Radio.js";
-import { RadioCard as J } from "./RadioCard/RadioCard.js";
-import { RadioCardGroup as Q } from "./RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as W } from "./RadioGroup/RadioGroup.js";
-import { Range as Y } from "./Range/Range.js";
-import { Sidebar as _ } from "./Sidebar/Sidebar.js";
-import { Slider as oo } from "./Slider/Slider.js";
-import { Switch as eo } from "./Switch/Switch.js";
-import { Table as po } from "./Table/Table.js";
-import { Tabs as xo } from "./Tabs/Tabs.js";
-import { Tag as ao } from "./Tag/Tag.js";
-import { TagSelect as no } from "./TagSelect/TagSelect.js";
-import { TextArea as lo } from "./TextArea/TextArea.js";
-import { TimePicker as To } from "./TimePicker/TimePicker.js";
-import { Toast as bo } from "./Toast/Toast.js";
-import { Tooltip as so } from "./Tooltip/Tooltip.js";
-import { Typography as Co } from "./Typography/Typography.js";
-import { VirtualizedTable as So } from "./VirtualizedTable/VirtualizedTable.js";
-import { BadgeMultiSelect as vo } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as Ro } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { Footer as Ao } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as Fo } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as Io } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as Mo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as zo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Vo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Content as qo } from "./Tabs/components/Content.js";
-import { List as Ho } from "./Tabs/components/List.js";
-import { Trigger as Ko } from "./Tabs/components/Trigger.js";
-import { TruncateText as Uo } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
+import { Filter as w } from "./Filter/Filter.js";
+import { Input as R } from "./Input/Input.js";
+import { Loading as M } from "./Loading/Loading.js";
+import { M as F } from "../Modal-CtAG97Ts.js";
+import { MultiSelectDropdown as I } from "./MultiSelectDropdown/MultiSelectDropdown.js";
+import { NumberInput as y } from "./NumberInput/NumberInput.js";
+import { PhoneNumberInput as O } from "./PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as j } from "./PieChart/PieChart.js";
+import { ProgressBar as E } from "./ProgressBar/ProgressBar.js";
+import { Radio as J } from "./Radio/Radio.js";
+import { RadioCard as Q } from "./RadioCard/RadioCard.js";
+import { RadioCardGroup as W } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as Y } from "./RadioGroup/RadioGroup.js";
+import { Range as _ } from "./Range/Range.js";
+import { Sidebar as oo } from "./Sidebar/Sidebar.js";
+import { Slider as eo } from "./Slider/Slider.js";
+import { Switch as po } from "./Switch/Switch.js";
+import { Table as xo } from "./Table/Table.js";
+import { Tabs as ao } from "./Tabs/Tabs.js";
+import { Tag as no } from "./Tag/Tag.js";
+import { TagSelect as go } from "./TagSelect/TagSelect.js";
+import { TextArea as To } from "./TextArea/TextArea.js";
+import { TimePicker as bo } from "./TimePicker/TimePicker.js";
+import { Toast as So } from "./Toast/Toast.js";
+import { Tooltip as Bo } from "./Tooltip/Tooltip.js";
+import { Typography as No } from "./Typography/Typography.js";
+import { VirtualizedTable as vo } from "./VirtualizedTable/VirtualizedTable.js";
+import { BadgeMultiSelect as Po } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as Ao } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Footer as ko } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as Go } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as Lo } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as zo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Vo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as qo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Content as Ho } from "./Tabs/components/Content.js";
+import { List as Ko } from "./Tabs/components/List.js";
+import { Trigger as Uo } from "./Tabs/components/Trigger.js";
+import { TruncateText as Xo } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  vo as BadgeMultiSelect,
+  Po as BadgeMultiSelect,
   d as Breadcrumb,
-  g as Button,
+  l as Button,
   u as Card,
   c as Checkbox,
-  qo as Content,
-  Ro as DateFilterDropdown,
+  Ho as Content,
+  Ao as DateFilterDropdown,
   D as DatePicker,
-  B as Divider,
-  N as Dropdown,
+  s as Divider,
+  C as Dropdown,
   h as DropdownButton,
-  P as Filter,
-  Ao as Footer,
-  w as Input,
-  Ho as List,
-  k as Loading,
-  Fo as Logo,
-  G as Modal,
-  Io as Navigation,
-  Mo as NavigationGroup,
-  zo as NavigationOption,
-  Vo as NavigationSeparator,
-  L as NumberInput,
-  y as PhoneNumberInput,
-  O as PieChart,
-  j as ProgressBar,
-  E as Radio,
-  J as RadioCard,
-  Q as RadioCardGroup,
-  W as RadioGroup,
-  Y as Range,
-  _ as Sidebar,
-  oo as Slider,
-  eo as Switch,
-  po as Table,
-  xo as Tabs,
-  ao as Tag,
-  no as TagSelect,
-  lo as TextArea,
-  To as TimePicker,
-  bo as Toast,
-  so as Tooltip,
-  Ko as Trigger,
-  Uo as TruncateText,
-  Co as Typography,
-  So as VirtualizedTable
+  w as Filter,
+  ko as Footer,
+  R as Input,
+  Ko as List,
+  M as Loading,
+  Go as Logo,
+  F as Modal,
+  I as MultiSelectDropdown,
+  Lo as Navigation,
+  zo as NavigationGroup,
+  Vo as NavigationOption,
+  qo as NavigationSeparator,
+  y as NumberInput,
+  O as PhoneNumberInput,
+  j as PieChart,
+  E as ProgressBar,
+  J as Radio,
+  Q as RadioCard,
+  W as RadioCardGroup,
+  Y as RadioGroup,
+  _ as Range,
+  oo as Sidebar,
+  eo as Slider,
+  po as Switch,
+  xo as Table,
+  ao as Tabs,
+  no as Tag,
+  go as TagSelect,
+  To as TextArea,
+  bo as TimePicker,
+  So as Toast,
+  Bo as Tooltip,
+  Uo as Trigger,
+  Xo as TruncateText,
+  No as Typography,
+  vo as VirtualizedTable
 };

package/dist/index.d.ts

@@ -373,6 +373,31 @@ declare interface ModalProps extends PropsWithChildren, VariantProps<typeof moda
 
 declare const modalVariants: (props?: ClassProp | undefined) => string;
 
+export declare const MultiSelectDropdown: FC<MultiSelectDropdownProps>;
+
+declare type MultiSelectDropdownOption = {
+    id: string | number;
+    label: string;
+    tagLabel: string;
+    tagColor?: TagProps['color'];
+    value?: string;
+};
+
+declare interface MultiSelectDropdownProps extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    label?: string;
+    options: MultiSelectDropdownOption[];
+    name?: string;
+    placeholder?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    multiselect?: boolean;
+    value?: MultiSelectDropdownOption[];
+    onChange?: OnChangeFn_2;
+    onBlur?: VoidFunction;
+}
+
+declare const multiSelectDropdownVariants: (props?: ClassProp | undefined) => string;
+
 declare type MultiSelectFilter = {
     key: string;
     label: string;
@@ -468,6 +493,13 @@ declare type OnChangeFn = (params: {
     };
 }) => void;
 
+declare type OnChangeFn_2 = (params: {
+    target: {
+        value: MultiSelectDropdownOption[];
+        name: string;
+    };
+}) => void;
+
 declare type Option_2 = {
     value: string;
 };
@@ -477,8 +509,10 @@ declare type Option_3 = {
     subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
     leftIconClassName?: string;
+    showRightComponentOnselectedValue?: boolean;
     rightComponent?: ReactNode | string;
     rightComponentClassName?: string;
+    wrapperClassNameOnSelectedValue?: string;
     value: string;
 };
 
@@ -860,7 +894,7 @@ declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
-    color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
     id: string | number;
     label: string;
     rightIcon?: ReactNode;