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

package/dist/components/Avatar/AvatarGroup/AvatarGroupRoot.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import d from "classnames";
-import g from "./AvatarGroup.module.css.js";
-import { AvatarGroupProvider as v } from "./AvatarGroupProvider.js";
-import { useBackgroundColor as B } from "../../../hooks/useBackgroundColor.js";
+import { useBackgroundColor as g } from "../../../hooks/useBackgroundColor.js";
+import v from "./AvatarGroup.module.css.js";
+import { AvatarGroupProvider as B } from "./AvatarGroupProvider.js";
 const G = (t) => {
   const {
     children: a,
@@ -12,12 +12,12 @@ const G = (t) => {
     cutoutBackground: u,
     className: m,
     style: n
-  } = t, { ref: p, bgColor: f } = B(), o = u || f || "#ffffff", l = d(g.avatarGroup, m), i = {
+  } = t, { ref: p, bgColor: f } = g(), o = u || f || "#ffffff", l = d(v.avatarGroup, m), i = {
     "--avatar-cutout-bg": o,
     ...n
   };
   return /* @__PURE__ */ r(
-    v,
+    B,
     {
       size: s,
       shape: c,

package/dist/components/FileUpload/FileUpload.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import { clsx as p } from "clsx";
 import Ge from "rc-upload";
 import { forwardRef as je, useContext as Fe, useState as W, useRef as se, useMemo as we, useLayoutEffect as He } from "react";
+import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { interpolate as de } from "../../locale/interpolate.js";
 import t from "./FileUpload.module.css.js";
 import { isMobileViewport as ve } from "../../utils/adaptive.js";
 import { useLocale as ue } from "../ConfigProvider/ConfigProvider.hook.js";
-import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
 import { SnackbarContext as We } from "../Snackbar/lib/useSnackbar.js";
 import { Button as M } from "../Button/Button.js";
 import { Icon as h } from "../Icon/IconWithCategories.js";

package/dist/components/InputBase/Input.js

@@ -2,9 +2,9 @@ import { jsx as r, jsxs as W } from "react/jsx-runtime";
 import { forwardRef as z, useImperativeHandle as P } from "react";
 import { clsx as f } from "clsx";
 import e from "./InputBase.module.css.js";
-import { useInputSync as Q } from "./lib/useInputSync.js";
-import { useTextareaResize as Y } from "./lib/useTextareaResize.js";
-import { useCompatId as Z } from "../../hooks/useCompatId.js";
+import { useCompatId as Q } from "../../hooks/useCompatId.js";
+import { useInputSync as Y } from "./lib/useInputSync.js";
+import { useTextareaResize as Z } from "./lib/useTextareaResize.js";
 import { MAX_HINT_LENGTH as k } from "./lib/constants.js";
 import { useGripResize as U } from "./lib/useGripResize.js";
 import { GripIcon as E } from "./assets/GripIcon.js";
@@ -32,8 +32,8 @@ const K = z(
     resize: c,
     ...H
   }, R) => {
-    const { textareaRef: w, inputRef: j, currentRef: d } = Q(a, t);
-    if (Y(a, c, w), P(R, () => d.current, [d]), t === "textarea")
+    const { textareaRef: w, inputRef: j, currentRef: d } = Y(a, t);
+    if (Z(a, c, w), P(R, () => d.current, [d]), t === "textarea")
       return /* @__PURE__ */ r(
         "textarea",
         {
@@ -132,7 +132,7 @@ const K = z(
     showGrip: T = !1,
     ...L
   }, O) => {
-    const X = Z("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
+    const X = Q("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
       e.wrapper,
       e[`size-${m}`],
       a && e.error,

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

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,6 +29,11 @@ export type TriggerCommonProps = {
     description?: string;
     /** Растянуть компонент на всю ширину */
     stretched?: boolean;
+    /** Обрезка content: false — отключить, true (по умолчанию) — 30 символов, число — свой лимит.
+     * При stretched=true обрезка отключена. Дробный лимит округляется вниз;
+     * отрицательный или не конечный лимит заменяется на 30.
+     */
+    truncateContent?: number | boolean;
     /** Стиль выделения: 'selected' - обычное состояние, 'applied' - применённое с возможностью очистки */
     selectionStyle?: 'selected' | 'applied';
     /** Показывать иконку очистки при наличии контента и selectionStyle = 'selected' */

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
 };