@companix/uikit 0.0.41 → 0.0.43

package/dist/OptionItem/Option.scss

@@ -14,6 +14,9 @@
   @include mixins.use-styles(option);
 
   &-icon {
+    display: flex;
+    align-items: center;
+
     @include mixins.use-styles(option, icon);
 
     svg {
@@ -23,10 +26,10 @@
 
   &-content {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
     min-width: 0;
     max-width: 100%;
+    gap: 8px;
 
     &-inner {
       @include mixins.use-styles(option, content, layout);

package/dist/Select/Select.scss

@@ -36,6 +36,24 @@
     }
   }
 
+  &-add-option {
+    color: #2d81e0;
+
+    &:not([data-disabled]):hover {
+      background-color: #2d80e02b !important;
+    }
+
+    &:not([data-disabled]):active {
+      background-color: #2d80e042 !important;
+    }
+
+    svg {
+      width: 18px;
+      min-width: 18px;
+      height: 18px;
+    }
+  }
+
   &-element {
     height: 100%;
     display: flex;

package/dist/Select/SelectOptions.d.ts

@@ -7,6 +7,12 @@ interface SelectPopoverProps<T> {
     active?: T | null;
     onSelect?: (value: T) => void;
     onOpened?: () => void;
+    close: () => void;
+    addOption?: {
+        text: string;
+        closeOnClick?: boolean;
+        onClick: () => void;
+    };
 }
 export declare const SelectOptions: <T>(props: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Select/index.d.ts

@@ -19,6 +19,10 @@ export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'close
     scrollRef?: React.Ref<{
         scrollTo: (index: number) => void;
     }>;
+    addOption?: {
+        text: string;
+        onClick: () => void;
+    };
 };
 export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bundle.es10.js

@@ -1,57 +1,58 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-popover";
 import { attr as B } from "@companix/utils-browser";
 import M from "classnames";
 import { forwardRef as j, useRef as k } from "react";
-const D = j((a, i) => {
+const D = j((i, n) => {
   const {
-    children: n,
-    sideOffset: s,
-    matchTarget: l,
-    onAnimationEnd: c,
-    onAnimationStart: m,
-    onOpenAutoFocus: d,
+    children: s,
+    sideOffset: l,
+    matchTarget: c,
+    onAnimationEnd: m,
+    onAnimationStart: d,
+    onOpenAutoFocus: p,
     onCloseAutoFocus: f,
-    triggerRef: p,
-    triggerProps: h,
-    open: g,
-    content: u,
-    onOpenChange: v,
-    align: C,
-    disabled: x,
-    minimal: w,
-    className: L,
-    fitMaxHeight: N = !0,
-    zIndex: O = 100,
+    triggerRef: h,
+    triggerProps: g,
+    open: u,
+    content: v,
+    onOpenChange: C,
+    align: x,
+    disabled: w,
+    minimal: L,
+    className: N,
+    fitMaxHeight: O = !0,
+    zIndex: P = 9999,
     side: A,
-    showArrows: P
-  } = a, e = k(null), b = () => {
+    showArrows: b
+  } = i, e = k(null), y = () => {
     e.current && e.current.click();
-  }, y = (R) => {
-    x && R.preventDefault();
+  }, R = (t) => {
+    w && t.preventDefault();
   };
-  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
-    /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: y, asChild: !0, children: n }),
-    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ a(o.Root, { open: u, onOpenChange: C, children: [
+    /* @__PURE__ */ r(o.Trigger, { ref: h, ...g, onClick: R, asChild: !0, children: s }),
+    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ a(
       o.Content,
       {
-        ref: i,
-        className: M("popover", L),
+        ref: n,
+        className: M("popover", N),
         side: A,
-        align: C,
-        "data-appearance": w ? "minimal" : "default",
-        "data-match-target": l,
-        sideOffset: s ?? 6,
+        align: x,
+        "data-appearance": L ? "minimal" : "default",
+        "data-match-target": c,
+        sideOffset: l ?? 6,
         avoidCollisions: !0,
         arrowPadding: 10,
-        style: { zIndex: O },
-        onAnimationStart: m,
-        onAnimationEnd: c,
-        onOpenAutoFocus: d,
+        style: { zIndex: P },
+        onAnimationStart: d,
+        onAnimationEnd: m,
+        onOpenAutoFocus: p,
         onCloseAutoFocus: f,
+        onWheel: (t) => t.stopPropagation(),
         children: [
           /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
-          P && /* @__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: [
+          b && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ a("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
             /* @__PURE__ */ r(
               "path",
               {
@@ -71,7 +72,7 @@ const D = j((a, i) => {
               }
             )
           ] }) }) }),
-          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(N), children: u({ close: b }) })
+          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(O), children: v({ close: y }) })
         ]
       }
     ) })

package/dist/bundle.es12.js

@@ -1,77 +1,82 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useMemo as F, useImperativeHandle as I } from "react";
-import { Popover as T } from "./bundle.es10.js";
-import { useFroozeClosing as b } from "./bundle.es45.js";
-import { SelectInput as z } from "./bundle.es46.js";
-import { useScrollListController as B } from "./bundle.es47.js";
-import { SelectOptions as D } from "./bundle.es48.js";
-import { mergeRefs as j } from "react-merge-refs";
-const G = (a) => {
+import { useMemo as T, useImperativeHandle as b } from "react";
+import { Popover as z } from "./bundle.es10.js";
+import { useFroozeClosing as B } from "./bundle.es45.js";
+import { SelectInput as D } from "./bundle.es46.js";
+import { useScrollListController as j } from "./bundle.es47.js";
+import { SelectOptions as w } from "./bundle.es48.js";
+import { mergeRefs as H } from "react-merge-refs";
+const K = (m) => {
   const {
     options: n,
     onChange: i,
     value: r,
-    minimalOptions: m,
-    matchTarget: f = "width",
-    children: u,
+    minimalOptions: f,
+    matchTarget: u = "width",
+    children: d,
     disabled: p,
-    scrollRef: d,
-    popoverRef: v,
+    scrollRef: v,
+    popoverRef: h,
     clearButton: s,
-    ...h
-  } = a, t = F(() => {
+    addOption: x,
+    ...C
+  } = m, t = T(() => {
     const o = r === null ? -1 : n.findIndex((e) => e.value === r);
     return {
       index: o,
       option: n[o]
     };
-  }, [n, r]), x = t.option?.value ?? null, { popoverRef: R, froozePopoverPosition: C, handleAnimationEnd: g } = b(), { scrollToElement: c, optionsWrapperRef: O, scrollBoxRef: P } = B();
-  I(d, () => ({
-    scrollTo: (o) => c(o, "top")
+  }, [n, r]), R = t.option?.value ?? null, { popoverRef: O, froozePopoverPosition: c, handleAnimationEnd: g } = B(), { scrollToElement: a, optionsWrapperRef: P, scrollBoxRef: S } = j();
+  b(v, () => ({
+    scrollTo: (o) => a(o, "top")
   }));
-  const S = (o, e) => {
-    C(), i(o), e();
-  }, A = (o) => {
+  const A = (o, e) => {
+    c(), i(o), e();
+  }, E = (o) => {
+    c(), o();
+  }, F = (o) => {
     o.stopPropagation(), s && i(null);
-  }, E = () => {
-    t.index !== -1 && c(t.index, "center");
+  }, I = () => {
+    t.index !== -1 && a(t.index, "center");
   };
   return /* @__PURE__ */ l(
-    T,
+    z,
     {
       minimal: !0,
-      ref: j([R, v]),
+      ref: H([O, h]),
       sideOffset: 0,
-      matchTarget: f,
+      matchTarget: u,
       onAnimationEnd: g,
       onOpenAutoFocus: (o) => o.preventDefault(),
       onCloseAutoFocus: (o) => o.preventDefault(),
       disabled: p,
       content: ({ close: o }) => /* @__PURE__ */ l(
-        D,
+        w,
         {
           options: n,
-          active: x,
-          scrollboxRef: P,
-          optionsWrapperRef: O,
-          minimalOptions: m,
-          onOpened: E,
-          onSelect: (e) => S(e, o)
+          active: R,
+          scrollboxRef: S,
+          optionsWrapperRef: P,
+          minimalOptions: f,
+          close: () => E(o),
+          addOption: x,
+          onOpened: I,
+          onSelect: (e) => A(e, o)
         }
       ),
-      children: u ?? /* @__PURE__ */ l(
-        z,
+      children: d ?? /* @__PURE__ */ l(
+        D,
         {
-          ...h,
+          ...C,
           disabled: p,
           clearButton: s,
           value: t.option?.title ?? "",
-          onClear: A
+          onClear: F
         }
       )
     }
   );
 };
 export {
-  G as Select
+  K as Select
 };

package/dist/bundle.es48.js

@@ -1,22 +1,47 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useEffect as a } from "react";
-import { OptionItem as f } from "./bundle.es14.js";
-import { OptionsList as O } from "./bundle.es16.js";
-const h = (t) => {
-  const { active: i, onOpened: m, scrollboxRef: n, optionsWrapperRef: r, options: p, onSelect: s, minimalOptions: c } = t;
-  return a(() => {
-    m?.();
-  }, []), /* @__PURE__ */ o(O, { scrollboxRef: n, optionsWrapperRef: r, maxHeight: 300, children: p.map((e, l) => /* @__PURE__ */ o(
-    f,
-    {
-      active: i === e.value,
-      onClick: () => s?.(e.value),
-      minimal: c,
-      ...e
-    },
-    `select-option-${l}`
-  )) });
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useEffect as u } from "react";
+import { OptionItem as i } from "./bundle.es14.js";
+import { OptionsList as x } from "./bundle.es16.js";
+import { Icon as k } from "./bundle.es33.js";
+import { faPlus as v } from "@companix/icons-solid";
+const b = (n) => {
+  const {
+    active: c,
+    onOpened: l,
+    addOption: o,
+    scrollboxRef: m,
+    optionsWrapperRef: r,
+    options: s,
+    onSelect: p,
+    close: a,
+    minimalOptions: f
+  } = n;
+  return u(() => {
+    l?.();
+  }, []), /* @__PURE__ */ d(x, { scrollboxRef: m, optionsWrapperRef: r, maxHeight: 300, children: [
+    o && /* @__PURE__ */ e(
+      i,
+      {
+        className: "select-add-option",
+        icon: /* @__PURE__ */ e(k, { icon: v }),
+        title: o.text,
+        onClick: () => {
+          (o.closeOnClick ?? !0) && a(), o.onClick();
+        }
+      }
+    ),
+    s.map((t, O) => /* @__PURE__ */ e(
+      i,
+      {
+        active: c === t.value,
+        onClick: () => p?.(t.value),
+        minimal: f,
+        ...t
+      },
+      `select-option-${O}`
+    ))
+  ] });
 };
 export {
-  h as SelectOptions
+  b as SelectOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",