@arthurzakharov/ui-kit 3.15.0 → 3.16.0

package/dist/assets/dropdown-CsBIRizY.css

@@ -0,0 +1 @@
+._Dropdown_1facm_1{--transition-time: .2s;--under-chevron: linear-gradient(90deg, rgba(255, 255, 255, 0) -10%, rgba(255, 255, 255, .5411764706) 25%, #fff 50%);--border-radius: 3px;position:relative;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-text-primary);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Border_1facm_17{position:relative;min-height:60px;flex-grow:1;display:flex;align-items:center;justify-content:flex-start;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);overflow:hidden}._Content_1facm_28{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}._Border_1facm_17:hover{cursor:pointer}._Chevron_1facm_39{width:24px;height:24px;transition:transform var(--transition-time) ease-out}._Chevron_1facm_39[data-open=false]{transform:rotate(0)}._Chevron_1facm_39[data-open=true]{transform:rotate(180deg)}._ChevronWrap_1facm_53{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);background:var(--under-chevron);border-radius:10px;width:80px;height:100%;padding-right:var(--rm-ui-padding-sm);display:flex;justify-content:flex-end;align-items:center}._Box_1facm_69{flex-grow:1;border-radius:10px;background-color:var(--rm-ui-grey-50)}._BoxVisible_1facm_75{display:block}._BoxHidden_1facm_79{display:none}._Search_1facm_83{position:relative;border-bottom:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm)}._SearchVisible_1facm_89{display:block}._SearchHidden_1facm_93{display:none}._Close_1facm_97{border-top:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm);display:flex;flex-direction:row;align-items:center;justify-content:flex-end}._Input_1facm_106{width:100%;border-radius:10px;padding:var(--rm-ui-padding-xs) calc(var(--rm-ui-padding-sm) * 2 + 12px) var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);border:1px var(--rm-ui-grey-300) solid;box-sizing:border-box;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary);outline-color:var(--rm-ui-color-accent-primary)}._Glass_1facm_120{position:absolute;z-index:1;right:calc(var(--rm-ui-padding-sm) * 2);top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--rm-ui-grey-300)}._Choices_1facm_131{max-height:228px;overflow-y:scroll;border-radius:10px}._Choice_1facm_131{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-sm);padding:6px var(--rm-ui-padding-sm)}._Choice_1facm_131:hover{cursor:pointer;background-color:#fff}._ChoiceNoResult_1facm_151{color:var(--rm-ui-grey-600);text-align:center}html[dir=rtl] ._Glass_1facm_120{left:31px;right:initial}html[dir=rtl] ._ChevronWrap_1facm_53{left:19px;right:initial}._FieldGroup_1facm_166{display:flex;flex-direction:column;gap:var(--rm-ui-padding-xs);width:100%;align-items:stretch}._LabelRow_1facm_174{display:flex;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xs);width:100%}._InfoButton_1facm_182{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;background:none;border:0;cursor:pointer;color:var(--rm-ui-color-text-primary);transition:opacity .12s ease}._InfoButton_1facm_182:hover:not(:disabled){opacity:.6}._InfoButton_1facm_182:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:2px}._InfoIcon_1facm_204{width:24px;height:24px}

package/dist/controls/interactives/dropdown/dropdown.component.d.ts

@@ -1,9 +1,11 @@
 import { QuestionChoice } from '../../utils';
 import { Base } from '../../../utils/types';
+type DropdownLabelPosition = 'inside' | 'outside';
 export interface DropdownProps extends Base {
     choices: QuestionChoice[];
     value: QuestionChoice[];
     label?: string;
+    labelPosition?: DropdownLabelPosition;
     placeholder?: string;
     noResult?: string;
     isSearchHidden?: boolean;
@@ -12,5 +14,7 @@ export interface DropdownProps extends Base {
     onChange: (values: QuestionChoice[]) => void;
     onOpen?: (height: number, width: number) => void;
     onClose?: () => void;
+    onInfoClick?: () => void;
 }
-export declare const Dropdown: ({ choices, value, label, placeholder, noResult, isSearchHidden, multiple, closeButton, onChange, onOpen, onClose, ...base }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ choices, value, label, labelPosition, placeholder, noResult, isSearchHidden, multiple, closeButton, onChange, onOpen, onClose, onInfoClick, ...base }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/controls/interactives/dropdown/dropdown.component.js

@@ -1,136 +1,155 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import { useRef as u, useState as f, useEffect as y, useMemo as K } from "react";
-import { useBoolean as M, useResizeObserver as E, useOnClickOutside as P } from "usehooks-ts";
-import { ChevronDown as T, Search as q } from "lucide-react";
-import { clsx as k, baseProps as R } from "../../../utils/functions/functions.util.js";
-import { Button as J } from "../../buttons/button/button.component.js";
-import { Box as H } from "../../primitives/box/box.component.js";
-import { Caption as x } from "../../primitives/caption/caption.component.js";
-import { Choice as Q } from "../../primitives/choice/choice.component.js";
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+import { useRef as x, useState as v, useEffect as H, useMemo as J } from "react";
+import { useBoolean as Q, useResizeObserver as U, useOnClickOutside as X } from "usehooks-ts";
+import { ChevronDown as Y, Info as Z, Search as ee } from "lucide-react";
+import { baseProps as G, clsx as B } from "../../../utils/functions/functions.util.js";
+import { Button as oe } from "../../buttons/button/button.component.js";
+import { Box as V } from "../../primitives/box/box.component.js";
+import { Caption as N } from "../../primitives/caption/caption.component.js";
+import { Choice as se } from "../../primitives/choice/choice.component.js";
 import "../../../utils/content/content.component.js";
-import { Label as U } from "../../primitives/label/label.component.js";
-import { clickHasNode as X } from "../../utils/functions/functions.util.js";
-import { Converter as Y } from "../../../utils/converter/converter.util.js";
-import '../../../assets/dropdown-DLhCAHEx.css';const Z = "_Dropdown_1kidn_1", ee = "_Border_1kidn_17", oe = "_Content_1kidn_28", se = "_Chevron_1kidn_39", ie = "_ChevronWrap_1kidn_53", ne = "_Box_1kidn_69", te = "_BoxVisible_1kidn_75", re = "_BoxHidden_1kidn_79", ce = "_Search_1kidn_83", le = "_SearchVisible_1kidn_89", ae = "_SearchHidden_1kidn_93", de = "_Close_1kidn_97", he = "_Input_1kidn_106", _e = "_Glass_1kidn_120", me = "_Choices_1kidn_131", Ce = "_Choice_1kidn_131", pe = "_ChoiceNoResult_1kidn_151", o = {
-  Dropdown: Z,
-  Border: ee,
-  Content: oe,
-  Chevron: se,
-  ChevronWrap: ie,
-  Box: ne,
-  BoxVisible: te,
-  BoxHidden: re,
-  Search: ce,
-  SearchVisible: le,
-  SearchHidden: ae,
-  Close: de,
-  Input: he,
-  Glass: _e,
-  Choices: me,
-  Choice: Ce,
-  ChoiceNoResult: pe
-}, He = ({
-  choices: v = [],
-  value: d = [],
-  label: z = "",
-  placeholder: D = "Wählen Sie Ihre private Krankenversicherung...",
-  noResult: V = "Keine Versicherung gefunden.",
-  isSearchHidden: I = !1,
-  multiple: c = !1,
+import { Label as te } from "../../primitives/label/label.component.js";
+import { clickHasNode as ie } from "../../utils/functions/functions.util.js";
+import { Converter as ne } from "../../../utils/converter/converter.util.js";
+import { Text as ce } from "../../../components/text/text.component.js";
+import '../../../assets/dropdown-CsBIRizY.css';const re = "_Dropdown_1facm_1", ae = "_Border_1facm_17", le = "_Content_1facm_28", de = "_Chevron_1facm_39", he = "_ChevronWrap_1facm_53", me = "_Box_1facm_69", fe = "_BoxVisible_1facm_75", _e = "_BoxHidden_1facm_79", ue = "_Search_1facm_83", pe = "_SearchVisible_1facm_89", Ce = "_SearchHidden_1facm_93", be = "_Close_1facm_97", xe = "_Input_1facm_106", ve = "_Glass_1facm_120", Be = "_Choices_1facm_131", Ne = "_Choice_1facm_131", we = "_ChoiceNoResult_1facm_151", Se = "_FieldGroup_1facm_166", Ie = "_LabelRow_1facm_174", ge = "_InfoButton_1facm_182", ye = "_InfoIcon_1facm_204", e = {
+  Dropdown: re,
+  Border: ae,
+  Content: le,
+  Chevron: de,
+  ChevronWrap: he,
+  Box: me,
+  BoxVisible: fe,
+  BoxHidden: _e,
+  Search: ue,
+  SearchVisible: pe,
+  SearchHidden: Ce,
+  Close: be,
+  Input: xe,
+  Glass: ve,
+  Choices: Be,
+  Choice: Ne,
+  ChoiceNoResult: we,
+  FieldGroup: Se,
+  LabelRow: Ie,
+  InfoButton: ge,
+  InfoIcon: ye
+}, je = ({
+  choices: w = [],
+  value: h = [],
+  label: r = "",
+  labelPosition: S = "inside",
+  placeholder: $ = "Wählen Sie Ihre private Krankenversicherung...",
+  noResult: F = "Keine Versicherung gefunden.",
+  isSearchHidden: O = !1,
+  multiple: a = !1,
   closeButton: W = "Schließen",
-  onChange: h,
+  onChange: m,
   onOpen: A,
-  onClose: G,
+  onClose: T,
+  onInfoClick: f,
   // Base props
-  ...S
+  ...I
 }) => {
-  const b = u(null), _ = u(null), B = u(null), { value: l, setFalse: m, toggle: L } = M(!1), [C, O] = f(""), [n, $] = f({ width: 0, height: 0 }), [a, N] = f([]);
-  E({
-    ref: _,
-    onResize: (e) => $({ width: e.width || 0, height: e.height || 0 })
-  }), P(_, (e) => {
-    X(e, b) || (c && h(a), m());
-  }), y(() => N(Array.isArray(d) ? d : []), [d]), y(() => {
-    l && n.width && n.height ? (B.current?.focus(), A?.call(null, n.height, n.width)) : G?.call(null);
-  }, [l, n]);
-  const j = (e, t) => {
-    N((r) => r.some(({ value: p }) => p === e) ? r.filter(({ value: p }) => p !== e) : [...r, { value: e, label: t }]);
-  }, F = () => {
-    m(), h(a);
-  }, w = K(
-    () => v.filter(({ label: e }) => e.toLowerCase().includes(C.toLowerCase())),
-    [C, v]
+  f && S === "inside" && console.warn(
+    'Dropdown: `onInfoClick` is set but `labelPosition` is "inside". The info button is only rendered alongside the outside label and will be ignored. Set `labelPosition="outside"` to enable it.'
   );
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      "data-testid": R(S, "data-testid", "dropdown"),
-      className: k(o.Dropdown, R(S, "className")),
-      children: [
-        /* @__PURE__ */ s(H, { ref: b, onClick: L, children: /* @__PURE__ */ i("div", { className: o.Border, children: [
-          /* @__PURE__ */ i("div", { className: o.Content, children: [
-            /* @__PURE__ */ s(U, { text: z, position: "active" }),
-            /* @__PURE__ */ s(
-              x,
-              {
-                text: Y.Answer.FromArrayToMultiple(a.map(({ label: e }) => e)) || D,
-                size: "body",
-                checked: !0,
-                oneLine: !0
-              }
-            )
-          ] }),
-          /* @__PURE__ */ s("div", { className: o.ChevronWrap, children: /* @__PURE__ */ s(T, { "data-open": l, className: o.Chevron }) })
-        ] }) }),
-        /* @__PURE__ */ s(H, { ref: _, className: l ? o.BoxVisible : o.BoxHidden, children: /* @__PURE__ */ i("div", { className: o.Box, children: [
-          /* @__PURE__ */ i("div", { className: k(o.Search, I ? o.SearchHidden : o.SearchVisible), children: [
-            /* @__PURE__ */ s(
-              "input",
+  const g = x(null), _ = x(null), y = x(null), { value: l, setFalse: u, toggle: j } = Q(!1), [p, K] = v(""), [i, M] = v({ width: 0, height: 0 }), [d, R] = v([]);
+  U({
+    ref: _,
+    onResize: (o) => M({ width: o.width || 0, height: o.height || 0 })
+  }), X(_, (o) => {
+    ie(o, g) || (a && m(d), u());
+  }), H(() => R(Array.isArray(h) ? h : []), [h]), H(() => {
+    l && i.width && i.height ? (y.current?.focus(), A?.call(null, i.height, i.width)) : T?.call(null);
+  }, [l, i]);
+  const P = (o, n) => {
+    R((c) => c.some(({ value: b }) => b === o) ? c.filter(({ value: b }) => b !== o) : [...c, { value: o, label: n }]);
+  }, E = () => {
+    u(), m(d);
+  }, k = J(
+    () => w.filter(({ label: o }) => o.toLowerCase().includes(p.toLowerCase())),
+    [p, w]
+  ), C = G(I, "data-testid", "dropdown"), L = S === "outside", q = L && !!r, z = /* @__PURE__ */ s(V, { ref: g, onClick: j, children: /* @__PURE__ */ t("div", { className: e.Border, children: [
+    /* @__PURE__ */ t("div", { className: e.Content, children: [
+      !L && /* @__PURE__ */ s(te, { text: r, position: "active" }),
+      /* @__PURE__ */ s(
+        N,
+        {
+          text: ne.Answer.FromArrayToMultiple(d.map(({ label: o }) => o)) || $,
+          size: "body",
+          checked: !0,
+          oneLine: !0
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s("div", { className: e.ChevronWrap, children: /* @__PURE__ */ s(Y, { "data-open": l, className: e.Chevron }) })
+  ] }) });
+  return /* @__PURE__ */ t("div", { "data-testid": C, className: B(e.Dropdown, G(I, "className")), children: [
+    q ? /* @__PURE__ */ t("div", { className: e.FieldGroup, children: [
+      /* @__PURE__ */ t("div", { className: e.LabelRow, children: [
+        /* @__PURE__ */ s(ce, { tag: "div", weight: "medium", size: "body", color: "text-primary", "data-testid": `${C}-label`, children: r }),
+        f && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: e.InfoButton,
+            onClick: f,
+            "aria-label": `${r} – Weitere Informationen`,
+            "data-testid": `${C}-info`,
+            children: /* @__PURE__ */ s(Z, { className: e.InfoIcon, "aria-hidden": !0 })
+          }
+        )
+      ] }),
+      z
+    ] }) : z,
+    /* @__PURE__ */ s(V, { ref: _, className: l ? e.BoxVisible : e.BoxHidden, children: /* @__PURE__ */ t("div", { className: e.Box, children: [
+      /* @__PURE__ */ t("div", { className: B(e.Search, O ? e.SearchHidden : e.SearchVisible), children: [
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: y,
+            value: p,
+            type: "text",
+            className: e.Input,
+            onChange: (o) => K(o.target.value)
+          }
+        ),
+        /* @__PURE__ */ s(ee, { className: e.Glass })
+      ] }),
+      /* @__PURE__ */ s("ul", { className: e.Choices, children: k.length ? k.map(({ value: o, label: n }, c) => /* @__PURE__ */ t(
+        "li",
+        {
+          className: e.Choice,
+          onClick: () => {
+            a ? P(o, n) : (u(), m([{ value: o, label: n }]));
+          },
+          children: [
+            a && /* @__PURE__ */ s(
+              se,
               {
-                ref: B,
-                value: C,
-                type: "text",
-                className: o.Input,
-                onChange: (e) => O(e.target.value)
+                type: "checkbox",
+                checked: d.some((D) => D.value === o)
               }
             ),
-            /* @__PURE__ */ s(q, { className: o.Glass })
-          ] }),
-          /* @__PURE__ */ s("ul", { className: o.Choices, children: w.length ? w.map(({ value: e, label: t }, r) => /* @__PURE__ */ i(
-            "li",
-            {
-              className: o.Choice,
-              onClick: () => {
-                c ? j(e, t) : (m(), h([{ value: e, label: t }]));
-              },
-              children: [
-                c && /* @__PURE__ */ s(
-                  Q,
-                  {
-                    type: "checkbox",
-                    checked: a.some((g) => g.value === e)
-                  }
-                ),
-                /* @__PURE__ */ s(x, { text: t, size: "body", checked: !1 })
-              ]
-            },
-            e + r
-          )) : /* @__PURE__ */ s("li", { className: k(o.Choice, o.ChoiceNoResult), children: /* @__PURE__ */ s(x, { text: V, size: "body", checked: !1 }) }) }),
-          c && /* @__PURE__ */ s("div", { className: o.Close, children: /* @__PURE__ */ s(
-            J,
-            {
-              color: "primary",
-              textSize: "sm",
-              type: "button",
-              text: W,
-              onClick: () => F()
-            }
-          ) })
-        ] }) })
-      ]
-    }
-  );
+            /* @__PURE__ */ s(N, { text: n, size: "body", checked: !1 })
+          ]
+        },
+        o + c
+      )) : /* @__PURE__ */ s("li", { className: B(e.Choice, e.ChoiceNoResult), children: /* @__PURE__ */ s(N, { text: F, size: "body", checked: !1 }) }) }),
+      a && /* @__PURE__ */ s("div", { className: e.Close, children: /* @__PURE__ */ s(
+        oe,
+        {
+          color: "primary",
+          textSize: "sm",
+          type: "button",
+          text: W,
+          onClick: () => E()
+        }
+      ) })
+    ] }) })
+  ] });
 };
 export {
-  He as Dropdown
+  je as Dropdown
 };

package/dist/controls/interactives/text-field/text-field.component.js

@@ -9,8 +9,8 @@ import "lucide-react";
 import { ErrorMessage as k } from "../../primitives/error-message/error-message.component.js";
 import { Label as C } from "../../primitives/label/label.component.js";
 import "react";
-import { Input as j } from "../input/input.component.js";
 import "../../../components/text/text.component.js";
+import { Input as j } from "../input/input.component.js";
 import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1", O = "_Box_diews_10", q = "_Content_diews_14", y = "_Label_diews_30", z = "_Idle_diews_40", G = "_Active_diews_45", H = "_Placeholder_diews_50", J = "_PlaceholderText_diews_57", K = "_ErrorMessage_diews_65", Q = "_Input_diews_69", R = "_MaskStart_diews_73", e = {
   TextField: D,
   Box: O,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "3.15.0",
+  "version": "3.16.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/dropdown-DLhCAHEx.css

@@ -1 +0,0 @@
-._Dropdown_1kidn_1{--transition-time: .2s;--under-chevron: linear-gradient(90deg, rgba(255, 255, 255, 0) -10%, rgba(255, 255, 255, .5411764706) 25%, #fff 50%);--border-radius: 3px;position:relative;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-text-primary);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Border_1kidn_17{position:relative;min-height:60px;flex-grow:1;display:flex;align-items:center;justify-content:flex-start;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);overflow:hidden}._Content_1kidn_28{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}._Border_1kidn_17:hover{cursor:pointer}._Chevron_1kidn_39{width:24px;height:24px;transition:transform var(--transition-time) ease-out}._Chevron_1kidn_39[data-open=false]{transform:rotate(0)}._Chevron_1kidn_39[data-open=true]{transform:rotate(180deg)}._ChevronWrap_1kidn_53{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);background:var(--under-chevron);border-radius:10px;width:80px;height:100%;padding-right:var(--rm-ui-padding-sm);display:flex;justify-content:flex-end;align-items:center}._Box_1kidn_69{flex-grow:1;border-radius:10px;background-color:var(--rm-ui-grey-50)}._BoxVisible_1kidn_75{display:block}._BoxHidden_1kidn_79{display:none}._Search_1kidn_83{position:relative;border-bottom:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm)}._SearchVisible_1kidn_89{display:block}._SearchHidden_1kidn_93{display:none}._Close_1kidn_97{border-top:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm);display:flex;flex-direction:row;align-items:center;justify-content:flex-end}._Input_1kidn_106{width:100%;border-radius:10px;padding:var(--rm-ui-padding-xs) calc(var(--rm-ui-padding-sm) * 2 + 12px) var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);border:1px var(--rm-ui-grey-300) solid;box-sizing:border-box;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary);outline-color:var(--rm-ui-color-accent-primary)}._Glass_1kidn_120{position:absolute;z-index:1;right:calc(var(--rm-ui-padding-sm) * 2);top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--rm-ui-grey-300)}._Choices_1kidn_131{max-height:228px;overflow-y:scroll;border-radius:10px}._Choice_1kidn_131{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-sm);padding:6px var(--rm-ui-padding-sm)}._Choice_1kidn_131:hover{cursor:pointer;background-color:#fff}._ChoiceNoResult_1kidn_151{color:var(--rm-ui-grey-600);text-align:center}html[dir=rtl] ._Glass_1kidn_120{left:31px;right:initial}html[dir=rtl] ._ChevronWrap_1kidn_53{left:19px;right:initial}