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

package/dist/components/Popover/lib/use-popover.js

@@ -1,7 +1,7 @@
 import { offset as G, flip as H, shift as V, inline as q, size as J, hide as K, useFloating as Q, autoUpdate as Z, useTransitionStyles as M, useClick as ee, useHover as te, useFocus as oe, useDismiss as ne, useRole as se, useInteractions as re } from "@floating-ui/react";
 import { useState as i, useMemo as v, useCallback as ce, useEffect as ae, useLayoutEffect as ie } from "react";
-import { DEFAULT_FLOATING as le, hasMiddleware as fe } from "./utils.js";
 import { useCompatId as S } from "../../../hooks/useCompatId.js";
+import { DEFAULT_FLOATING as le, hasMiddleware as fe } from "./utils.js";
 const r = 8, ue = (c) => {
   switch (c.split("-")[0]) {
     case "top":

package/dist/components/Tabs/ScrollWrapper.js

@@ -1,8 +1,8 @@
 import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { useRef as W, useState as g, useEffect as w } from "react";
+import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 import { clsx as a } from "clsx";
 import e from "./ScrollWrapper.module.css.js";
-import { useBackgroundColor as M } from "../../hooks/useBackgroundColor.js";
 const B = "white", G = ({
   children: b,
   withControls: i = !0,

package/dist/components/Tabs/Tabs.js

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as w } from "react/jsx-runtime";
 import F, { useState as U, createContext as V, useContext as M } from "react";
 import { ScrollWrapper as R } from "./ScrollWrapper.js";
+import { useIsMobile as j } from "../../hooks/useIsMobile.js";
 import { clsx as p } from "clsx";
 import f from "../../styles/typography.module.css.js";
 import a from "./Tabs.module.css.js";
-import { useIsMobile as j } from "../../hooks/useIsMobile.js";
 import { Badge as k } from "../Badge/Badge.js";
 const G = "md", W = !1, Y = !1, Z = 8, z = "top-right-inside", P = V(null), h = () => {
   const t = M(P);

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

@@ -2,4 +2,4 @@ import { TriggerCommonProps } from './Trigger.type';
 /**
  Component Trigger
  */
-export declare const Trigger: ({ content, size, description, label, stretched, selectionStyle, clearable, error, prefixIcon, postfixTitle, disabled, open, onClear, classNames, styles, }: TriggerCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Trigger: ({ "data-testid": testId, content, size, description, label, stretched, truncateContent: contentTruncation, selectionStyle, clearable, showClear, showChevron, error, prefixIcon, postfixTitle, disabled, open, onClear, classNames, styles, }: TriggerCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Trigger/Trigger.js

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

@@ -15,6 +15,8 @@ export declare enum LabelState {
  * Основные пропсы компонента Trigger
  */
 export type TriggerCommonProps = {
+    /** Идентификатор кнопки триггера для тестов */
+    'data-testid'?: string;
     /** Состояние триггера  */
     open: boolean;
     /** Контент, отображаемый в триггере */
@@ -27,10 +29,19 @@ export type TriggerCommonProps = {
     description?: string;
     /** Растянуть компонент на всю ширину */
     stretched?: boolean;
+    /** Обрезка content: false — отключить, true (по умолчанию) — 30 символов, число — свой лимит.
+     * При stretched=true обрезка отключена. Дробный лимит округляется вниз;
+     * отрицательный или не конечный лимит заменяется на 30.
+     */
+    truncateContent?: number | boolean;
     /** Стиль выделения: 'selected' - обычное состояние, 'applied' - применённое с возможностью очистки */
     selectionStyle?: 'selected' | 'applied';
-    /** Показывать ли иконку очистки (XIcon) при selectionStyle = 'selected' */
+    /** Показывать иконку очистки при наличии контента и selectionStyle = 'selected' */
     clearable?: boolean;
+    /** Показывать ли иконку очистки. Если не задано, определяется по content, selectionStyle и clearable. */
+    showClear?: boolean;
+    /** Показывать ли шеврон. Если не задано, отображается при отсутствии иконки очистки. */
+    showChevron?: boolean;
     /** Иконка перед контентом */
     prefixIcon?: ReactNode;
     /** Текст после контента */
@@ -39,7 +50,7 @@ export type TriggerCommonProps = {
     error?: string;
     /** Дизейбл компонент */
     disabled?: boolean;
-    /** Обработчик очистки поля (вызывается при клике на X-иконку в режиме 'applied') */
+    /** Обработчик очистки поля (вызывается при клике на иконку очистки) */
     onClear?: () => void;
     /**
      * Дополнительные классы для:

package/dist/components/Trigger/lib/utils.d.ts

@@ -21,9 +21,10 @@ export declare const getContentTypographySize: (size: TriggerSize) => Typography
  */
 export declare const getIconSize: (size: TriggerSize) => "xs" | "sm";
 /**
- * Обрезает текст content если он превышает 30 символов
+ * Обрезает текст content по заданному лимиту (по умолчанию 30 символов)
  *
  * @param content - текст для обрезки
+ * @param limit - false отключает обрезку, true задаёт лимит 30, число — свой лимит
  * @returns обрезанный текст с многоточием или исходный текст
  */
-export declare const truncateContent: (content: string) => string;
+export declare const truncateContent: (content: string, limit?: number | boolean) => string;

package/dist/components/Trigger/lib/utils.js

@@ -1,9 +1,13 @@
-import { LabelState as e } from "../Trigger.type.js";
-const L = (r, t) => r === "XL" && t ? e.FLOATING : r !== "XL" && t ? e.HIDDEN : e.NORMAL, u = (r, t) => t ? 3 : r === "XL" || r === "L" ? 2 : 3, o = (r) => r === "XL" || r === "L" ? 2 : 3, a = (r) => r === "XL" || r === "L" ? "sm" : "xs", f = (r) => r.length > 30 ? r.slice(0, 30) + "…" : r;
+import { LabelState as t } from "../Trigger.type.js";
+const L = (r, e) => r === "XL" && e ? t.FLOATING : r !== "XL" && e ? t.HIDDEN : t.NORMAL, o = (r, e) => e ? 3 : r === "XL" || r === "L" ? 2 : 3, f = (r) => r === "XL" || r === "L" ? 2 : 3, a = (r) => r === "XL" || r === "L" ? "sm" : "xs", g = (r, e = !0) => {
+  if (e === !1) return r;
+  const n = typeof e == "number" && Number.isFinite(e) && e >= 0 ? Math.floor(e) : 30;
+  return r.length > n ? r.slice(0, n) + "…" : r;
+};
 export {
-  o as getContentTypographySize,
+  f as getContentTypographySize,
   a as getIconSize,
   L as getLabelState,
-  u as getLabelTypographySize,
-  f as truncateContent
+  o as getLabelTypographySize,
+  g as truncateContent
 };