skillgrid 0.0.90 → 0.0.91-dev-68351-trigger-fixes.1793976

package/dist/components/Trigger/Trigger.js

@@ -1,134 +1,138 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import { clsx as n } from "clsx";
-import { LabelState as W } from "./Trigger.type.js";
+import { LabelState as H } from "./Trigger.type.js";
 import r from "./Trigger.module.css.js";
-import { getLabelState as K, getLabelTypographySize as M, truncateContent as Q, getContentTypographySize as H, getIconSize as E } from "./lib/utils.js";
-import { Typography as v } from "../Typography/Typography.js";
-import { XIcon as R } from "../InputBase/assets/XIcon.js";
-import { ChevronIcon as U } from "./assets/ChevronIcon.js";
-import { Helper as V } from "../Helper/Helper.js";
-const cr = ({
-  content: d,
+import { getLabelState as R, getLabelTypographySize as U, truncateContent as V, getContentTypographySize as E, getIconSize as X } from "./lib/utils.js";
+import { Typography as y } from "../Typography/Typography.js";
+import { XIcon as Y } from "../InputBase/assets/XIcon.js";
+import { ChevronIcon as Z } from "./assets/ChevronIcon.js";
+import { Helper as _ } from "../Helper/Helper.js";
+const lr = ({
+  content: p,
   size: i = "XL",
-  description: u,
-  label: N,
-  stretched: C = !1,
-  selectionStyle: s = "selected",
-  clearable: m = !1,
-  error: f,
-  prefixIcon: S,
-  postfixTitle: L,
+  description: I,
+  label: v,
+  stretched: h = !1,
+  selectionStyle: x = "selected",
+  clearable: j = !1,
+  showClear: z,
+  showChevron: A,
+  error: d,
+  prefixIcon: b,
+  postfixTitle: N,
   disabled: o = !1,
-  open: p,
-  onClear: I,
+  open: S,
+  onClear: m,
   classNames: t = {},
   styles: e = {}
 }) => {
-  const g = !!d, b = !!N, c = !!f, w = s === "applied", O = !!u && (!c || o) || c && !o, X = (c && !o ? f : u) || "", h = c && !o, T = K(i, g), l = b && T === W.FLOATING, j = T === W.HIDDEN, z = n(
+  const c = !!p, u = !!v, g = !!d, L = x === "applied", w = z ?? (c && (L || j)), D = A ?? !w, F = !!I && (!g || o) || g && !o, W = (g && !o ? d : I) || "", s = g && !o, T = R(i, c), l = u && T === H.FLOATING, k = T === H.HIDDEN, G = n(
     r["trigger-wrapper"],
-    { [r["trigger-stretched"]]: C },
+    { [r["trigger-stretched"]]: h },
     t.wrapper
-  ), A = n(
+  ), O = n(
     r["trigger-container"],
     r[`trigger-container-size-${i}`],
     {
-      [r["trigger-stretched"]]: C,
-      [r["trigger-container-applied"]]: w && g,
-      [r["trigger-container-error"]]: c && !o,
-      [r["trigger-container-open"]]: p,
+      [r["trigger-stretched"]]: h,
+      [r["trigger-container-applied"]]: L && c,
+      [r["trigger-container-error"]]: g && !o,
+      [r["trigger-container-open"]]: S,
       [r["trigger-container-floating"]]: l
     },
     t.triggerContainer
-  ), D = n(
+  ), P = n(
     r["trigger-content-container"],
     {
       [r["trigger-content-container-floating"]]: l
     },
     t.triggerContent
-  ), F = n(
+  ), $ = n(
     r["trigger-label"],
     {
       [r["trigger-label-floating"]]: l,
-      [r["trigger-label-hidden"]]: j
+      [r["trigger-label-hidden"]]: k
     },
     t.label
-  ), k = n(r["trigger-content"], t.content), G = n(r["trigger-postfix"], t.postfixTitle), P = n(r["trigger-chevron-icon"], t.chevronIcon), $ = n(
+  ), q = n(r["trigger-content"], t.content), B = n(r["trigger-postfix"], t.postfixTitle), J = n(r["trigger-chevron-icon"], t.chevronIcon), K = n(
     r["trigger-prefix-icon"],
     t.prefixIconContainer
-  ), q = n(r["trigger-clear-icon"], t.clearIcon), B = (x) => {
-    x == null || x.stopPropagation(), I == null || I();
-  }, J = g && p && (s === "selected" && m || s === "applied") || g && !p && (w || s === "selected" && m);
-  return /* @__PURE__ */ y("div", { className: z, style: e.wrapper, children: [
-    /* @__PURE__ */ y(
+  ), M = n(r["trigger-clear-icon"], t.clearIcon), Q = (C) => {
+    C == null || C.stopPropagation(), m == null || m();
+  };
+  return /* @__PURE__ */ f("div", { className: G, style: e.wrapper, children: [
+    /* @__PURE__ */ f(
       "button",
       {
         "data-testid": "trigger",
-        "aria-invalid": c,
+        "aria-invalid": g,
         "aria-haspopup": "listbox",
-        "aria-expanded": p,
+        "aria-expanded": S,
         role: "combobox",
-        className: A,
+        className: O,
         style: e.triggerContainer,
         disabled: o,
         type: "button",
         children: [
-          S && i !== "XL" && /* @__PURE__ */ a("div", { className: $, style: e.prefixIconContainer, children: S }),
-          /* @__PURE__ */ y("div", { className: D, style: e.triggerContent, children: [
-            b && /* @__PURE__ */ a(
-              v.Label,
+          b && i !== "XL" && /* @__PURE__ */ a("div", { className: K, style: e.prefixIconContainer, children: b }),
+          /* @__PURE__ */ f("div", { className: P, style: e.triggerContent, children: [
+            u && /* @__PURE__ */ a(
+              y.Label,
               {
                 "data-testid": "trigger-label",
-                className: F,
+                className: $,
                 style: e.label,
-                size: M(i, l),
+                size: U(i, l),
                 as: "span",
                 disabled: o,
                 typographyStyle: l ? "secondary" : "tertiary",
-                children: N
+                children: v
               }
             ),
-            g && /* @__PURE__ */ a(
-              v.Label,
+            c && /* @__PURE__ */ a(
+              y.Label,
               {
                 "data-testid": "trigger-content-container",
-                className: k,
+                className: q,
                 style: e.content,
-                size: H(i),
+                size: E(i),
                 as: "span",
                 disabled: o,
-                children: C ? d : Q(d)
+                children: h ? p : V(p)
               }
             ),
-            g && !!L && /* @__PURE__ */ a(
-              v.Label,
+            c && !!N && /* @__PURE__ */ a(
+              y.Label,
               {
                 "data-testid": "trigger-postfix",
-                className: G,
+                className: B,
                 style: e.postfixTitle,
-                size: H(i),
+                size: E(i),
                 disabled: o,
                 typographyStyle: "secondary",
-                children: L
+                fontWeight: "medium",
+                children: N
               }
             )
           ] }),
-          J ? /* @__PURE__ */ a(
-            R,
+          w && /* @__PURE__ */ a(
+            Y,
             {
-              className: q,
+              className: M,
               "data-testid": "trigger-clear",
-              size: E(i),
+              size: X(i),
               tabIndex: -1,
-              onClick: B,
+              onClick: Q,
               style: { outline: "none", ...e.clearIcon },
-              color: s === "selected" && m ? "var(--icon-tertiary)" : void 0
+              color: x === "selected" ? "var(--icon-tertiary)" : void 0
             }
-          ) : /* @__PURE__ */ a(
-            U,
+          ),
+          D && /* @__PURE__ */ a(
+            Z,
             {
               "data-testid": "trigger-chevron",
-              size: E(i),
-              className: P,
+              size: X(i),
+              className: J,
               color: "var(--icon-tertiary)",
               style: e.chevronIcon
             }
@@ -136,19 +140,19 @@ const cr = ({
         ]
       }
     ),
-    O && /* @__PURE__ */ a(
-      V,
+    F && /* @__PURE__ */ a(
+      _,
       {
-        title: X,
-        error: h ? f : void 0,
-        className: h ? t.error : t.description,
-        style: h ? e.error : e.description,
+        title: W,
+        error: s ? d : void 0,
+        className: s ? t.error : t.description,
+        style: s ? e.error : e.description,
         disabled: o,
-        "data-testid": h ? "trigger-error" : "trigger-description"
+        "data-testid": s ? "trigger-error" : "trigger-description"
       }
     )
   ] });
 };
 export {
-  cr as Trigger
+  lr as Trigger
 };

package/dist/components/Trigger/Trigger.module.css.js

@@ -1,26 +1,26 @@
-import '../../assets/components/Trigger/Trigger.module-BWzHgDVC.css';const r = {
-  "trigger-wrapper": "_trigger-wrapper_1vv90_77",
-  "trigger-container": "_trigger-container_1vv90_83",
-  "trigger-container-applied": "_trigger-container-applied_1vv90_106",
-  "trigger-container-open": "_trigger-container-open_1vv90_111",
-  "trigger-container-error": "_trigger-container-error_1vv90_122",
-  "trigger-container-size-XS": "_trigger-container-size-XS_1vv90_134",
-  "trigger-container-size-S": "_trigger-container-size-S_1vv90_144",
-  "trigger-container-size-M": "_trigger-container-size-M_1vv90_150",
-  "trigger-container-size-L": "_trigger-container-size-L_1vv90_156",
-  "trigger-container-size-XL": "_trigger-container-size-XL_1vv90_164",
-  "trigger-container-floating": "_trigger-container-floating_1vv90_170",
-  "trigger-stretched": "_trigger-stretched_1vv90_175",
-  "trigger-content-container": "_trigger-content-container_1vv90_179",
-  "trigger-content-container-floating": "_trigger-content-container-floating_1vv90_189",
-  "trigger-label": "_trigger-label_1vv90_194",
-  "trigger-label-floating": "_trigger-label-floating_1vv90_201",
-  "trigger-label-hidden": "_trigger-label-hidden_1vv90_213",
-  "trigger-content": "_trigger-content_1vv90_179",
-  "trigger-prefix-icon": "_trigger-prefix-icon_1vv90_227",
-  "trigger-chevron-icon": "_trigger-chevron-icon_1vv90_232",
-  "trigger-clear-icon": "_trigger-clear-icon_1vv90_248",
-  "trigger-postfix": "_trigger-postfix_1vv90_264"
+import '../../assets/components/Trigger/Trigger.module-Dc9gMp3_.css';const r = {
+  "trigger-wrapper": "_trigger-wrapper_zp1ok_74",
+  "trigger-container": "_trigger-container_zp1ok_80",
+  "trigger-container-applied": "_trigger-container-applied_zp1ok_103",
+  "trigger-container-open": "_trigger-container-open_zp1ok_108",
+  "trigger-container-error": "_trigger-container-error_zp1ok_119",
+  "trigger-container-size-XS": "_trigger-container-size-XS_zp1ok_131",
+  "trigger-container-size-S": "_trigger-container-size-S_zp1ok_141",
+  "trigger-container-size-M": "_trigger-container-size-M_zp1ok_147",
+  "trigger-container-size-L": "_trigger-container-size-L_zp1ok_153",
+  "trigger-container-size-XL": "_trigger-container-size-XL_zp1ok_161",
+  "trigger-container-floating": "_trigger-container-floating_zp1ok_167",
+  "trigger-stretched": "_trigger-stretched_zp1ok_172",
+  "trigger-content-container": "_trigger-content-container_zp1ok_176",
+  "trigger-content-container-floating": "_trigger-content-container-floating_zp1ok_185",
+  "trigger-label": "_trigger-label_zp1ok_190",
+  "trigger-label-floating": "_trigger-label-floating_zp1ok_197",
+  "trigger-label-hidden": "_trigger-label-hidden_zp1ok_209",
+  "trigger-content": "_trigger-content_zp1ok_176",
+  "trigger-prefix-icon": "_trigger-prefix-icon_zp1ok_223",
+  "trigger-chevron-icon": "_trigger-chevron-icon_zp1ok_228",
+  "trigger-clear-icon": "_trigger-clear-icon_zp1ok_244",
+  "trigger-postfix": "_trigger-postfix_zp1ok_260"
 };
 export {
   r as default

package/dist/components/Trigger/Trigger.type.d.ts

@@ -29,8 +29,12 @@ export type TriggerCommonProps = {
     stretched?: boolean;
     /** Стиль выделения: 'selected' - обычное состояние, 'applied' - применённое с возможностью очистки */
     selectionStyle?: 'selected' | 'applied';
-    /** Показывать ли иконку очистки (XIcon) при selectionStyle = 'selected' */
+    /** Показывать иконку очистки при наличии контента и selectionStyle = 'selected' */
     clearable?: boolean;
+    /** Показывать ли иконку очистки. Если не задано, определяется по content, selectionStyle и clearable. */
+    showClear?: boolean;
+    /** Показывать ли шеврон. Если не задано, отображается при отсутствии иконки очистки. */
+    showChevron?: boolean;
     /** Иконка перед контентом */
     prefixIcon?: ReactNode;
     /** Текст после контента */
@@ -39,7 +43,7 @@ export type TriggerCommonProps = {
     error?: string;
     /** Дизейбл компонент */
     disabled?: boolean;
-    /** Обработчик очистки поля (вызывается при клике на X-иконку в режиме 'applied') */
+    /** Обработчик очистки поля (вызывается при клике на иконку очистки) */
     onClear?: () => void;
     /**
      * Дополнительные классы для: