@snack-uikit/chips 0.25.7 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.26.0 (2025-03-05)
+
+
+### Bug Fixes
+
+* **PDS-1672:** hide pinned filters divider if no elements is on the right ([8c19dda](https://github.com/cloud-ru-tech/snack-uikit/commit/8c19dda66eb679e2322f64434a6497bd6117ab3c))
+
+
+### Features
+
+* **PDS-1685:** add truncate to chips ([178b951](https://github.com/cloud-ru-tech/snack-uikit/commit/178b95175c4f0d73b41c343faadaf7dbc28da7b1))
+
+
+
+
+
 ## 0.25.7 (2025-03-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -97,6 +97,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | middle | Вариант обрезания лейбла |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
 ## ChipToggle
 Чип с состоянием выбран/не выбран
@@ -111,6 +112,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | middle | Вариант обрезания лейбла |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
 ## ChipChoice.Custom
 ### Props
@@ -122,6 +124,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
@@ -146,6 +149,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
@@ -188,6 +192,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
@@ -229,6 +234,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
@@ -255,6 +261,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |
@@ -279,6 +286,7 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | HTML tab index |
+| truncateVariant | "end" \| "middle" | - | Вариант обрезания лейбла Вариант обрезания значения |
 | size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
 | onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
 | disableFuzzySearch | `boolean` | false | Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search |

package/dist/cjs/components/ChipAssist/ChipAssist.d.ts

@@ -8,4 +8,4 @@ export type ChipAssistProps = WithSupportProps<BaseChipProps & {
     onClick: MouseEventHandler<HTMLButtonElement>;
 }>;
 /** Чип с лейблом  */
-export declare function ChipAssist({ icon, size, label, disabled, loading, onClick, className, tabIndex, ...rest }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipAssist({ icon, size, label, disabled, loading, onClick, className, tabIndex, truncateVariant, ...rest }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipAssist/ChipAssist.js

@@ -20,6 +20,7 @@ exports.ChipAssist = ChipAssist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const loaders_1 = require("@snack-uikit/loaders");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -33,9 +34,10 @@ function ChipAssist(_a) {
       loading,
       onClick,
       className,
-      tabIndex
+      tabIndex,
+      truncateVariant = 'middle'
     } = _a,
-    rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex"]);
+    rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex", "truncateVariant"]);
   const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
   const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
   const handleClick = e => {
@@ -67,7 +69,10 @@ function ChipAssist(_a) {
     }), (0, jsx_runtime_1.jsx)("span", {
       className: (0, classnames_1.default)(styles_module_scss_1.default.labelLayout, styles_module_scss_1.default.label),
       "data-test-id": constants_1.CHIP_ASSIST_TEST_IDS.label,
-      children: label
+      children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: label,
+        variant: truncateVariant
+      })
     })]
   }));
 }

package/dist/cjs/components/ChipAssist/styles.module.css

@@ -6,8 +6,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -15,6 +15,7 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
+  justify-content:center;
   color:var(--sys-neutral-text-support, #6d707f);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -32,6 +33,7 @@
 .assistChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .assistChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.d.ts

@@ -1,13 +1,13 @@
 import { KeyboardEvent, ReactNode } from 'react';
 import { ChipChoiceCommonProps } from '../../types';
-export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'> & {
+export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className' | 'truncateVariant'> & {
     /** Отображаемое значение */
     valueToRender?: ReactNode;
     /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
     value?: any;
     onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
 };
-export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "onClearButtonClick"> & {
+export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "truncateVariant" | "onClearButtonClick"> & {
     /** Отображаемое значение */
     valueToRender?: ReactNode;
     /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -22,6 +22,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const loaders_1 = require("@snack-uikit/loaders");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../../../constants");
 const helperComponents_1 = require("../../../../helperComponents");
@@ -40,9 +41,10 @@ exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
       className,
       tabIndex = 0,
       onClearButtonClick,
-      onKeyDown
+      onKeyDown,
+      truncateVariant = 'middle'
     } = _a,
-    rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown"]);
+    rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "truncateVariant"]);
   const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
   const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
   const localRef = (0, react_1.useRef)(null);
@@ -114,7 +116,10 @@ exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
       }) : (0, jsx_runtime_1.jsx)("span", {
         className: styles_module_scss_1.default.value,
         "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.value,
-        children: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value,
+          variant: truncateVariant
+        })
       })]
     }), !disabled && !loading && showClearButton && (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClearValue, {
       size: constants_2.BUTTON_CLEAR_VALUE_SIZE_MAP[size],

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css

@@ -12,8 +12,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -37,6 +37,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);
@@ -220,10 +221,17 @@
   --offset:var(--space-drop-list-drop-offset, 4px);
 }
 
-.label,
+.label{
+  display:inline-flex;
+  flex-grow:1;
+  align-items:center;
+  white-space:nowrap;
+}
+
 .value{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 
 .choiceChip{
@@ -234,8 +242,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -259,6 +267,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/cjs/components/ChipChoice/styles.module.css

@@ -12,8 +12,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -37,6 +37,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/cjs/components/ChipChoice/types.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { DropdownProps } from '@snack-uikit/dropdown';
 import { BaseItemProps, DroplistProps, GroupItemProps, GroupSelectItemProps, ItemContentProps, ItemId, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { BaseChipProps, Size } from '../../types';
 export type AnyType = any;
@@ -54,6 +55,8 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     open?: boolean;
     /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Вариант обрезания значения */
+    truncateVariant?: TruncateStringProps['variant'];
 }>;
 export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
     options: FilterOption<T>[];

package/dist/cjs/components/ChipChoiceRow/ChipChoiceRow.d.ts

@@ -26,4 +26,4 @@ export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
     /** Коллбек на изменение видимых фильтров */
     onVisibleFiltersChange?(value: string[]): void;
 }>;
-export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton: showClearButtonProp, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipChoiceRow/ChipChoiceRow.js

@@ -36,7 +36,7 @@ function ChipChoiceRow(_a) {
   var {
       filters,
       onChange,
-      showClearButton = true,
+      showClearButton: showClearButtonProp = true,
       showAddButton = true,
       className,
       value,
@@ -149,6 +149,8 @@ function ChipChoiceRow(_a) {
     }
     addListPrevValue.current = addListValue;
   }, [addListValue, handleChipOpen]);
+  const showClearButton = showClearButtonProp && hasAnyFilter;
+  const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.chipChoiceRow, className)
   }, (0, utils_1.extractSupportProps)(rest), {
@@ -159,7 +161,7 @@ function ChipChoiceRow(_a) {
         size: constants_2.MAP_ROW_SIZE_TO_CHOICE_SIZE[size],
         onChange: value => handleChange(filter.id, value),
         onClearButtonClick: handleClearPinnedFilter(filter.id)
-      }), filter.id)), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+      }), filter.id)), showPinnedFiltersDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, {
         orientation: 'vertical',
         className: styles_module_scss_1.default.divider
       })]
@@ -192,7 +194,7 @@ function ChipChoiceRow(_a) {
             "data-test-id": constants_1.CHIP_CHOICE_ROW_IDS.addButton
           })
         })
-      }), showClearButton && hasAnyFilter && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      }), showClearButton && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
         onClick: handleFiltersClear,
         label: t('clear'),
         icon: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {}),

package/dist/cjs/components/ChipChoiceRow/styles.module.css

@@ -9,6 +9,7 @@
   gap:var(--space-chips-filter-row-gap, 4px);
   display:flex;
   flex-wrap:wrap;
+  min-width:0;
 }
 
 .controlWrapper{

package/dist/cjs/components/ChipToggle/ChipToggle.d.ts

@@ -10,4 +10,4 @@ export type ChipToggleProps = WithSupportProps<BaseChipProps & {
     onChange(checked: boolean, e: ChangeEvent<HTMLInputElement>): void;
 }>;
 /** Чип с состоянием выбран/не выбран */
-export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, truncateVariant, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChipToggle/ChipToggle.js

@@ -20,6 +20,7 @@ exports.ChipToggle = ChipToggle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const loaders_1 = require("@snack-uikit/loaders");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -34,9 +35,10 @@ function ChipToggle(_a) {
       loading,
       onChange,
       className,
-      tabIndex = 0
+      tabIndex = 0,
+      truncateVariant = 'middle'
     } = _a,
-    rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex"]);
+    rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex", "truncateVariant"]);
   const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
   const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
   const handleChange = e => {
@@ -75,7 +77,10 @@ function ChipToggle(_a) {
       }), (0, jsx_runtime_1.jsx)("span", {
         className: (0, classnames_1.default)(styles_module_scss_1.default.labelLayout, styles_module_scss_1.default.label),
         "data-test-id": constants_1.CHIP_TOGGLE_TEST_IDS.label,
-        children: label
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: label,
+          variant: truncateVariant
+        })
       })]
     })]
   }));

package/dist/cjs/components/ChipToggle/styles.module.css

@@ -6,8 +6,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -15,6 +15,7 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
+  justify-content:center;
   color:var(--sys-neutral-text-support, #6d707f);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -45,6 +46,7 @@
 
 .toggleChip{
   position:relative;
+  min-width:0;
   margin:0;
   padding:0;
   border:none;
@@ -61,6 +63,7 @@
 .toggleChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .toggleChip[data-size=xs] .label{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);

package/dist/cjs/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { ValueOf } from '@snack-uikit/utils';
 import { BUTTON_SIZE, SIZE, VARIANT } from './constants';
 export type Size = ValueOf<typeof SIZE>;
@@ -17,4 +18,6 @@ export type BaseChipProps = {
     className?: string;
     /** HTML tab index */
     tabIndex?: number;
+    /** Вариант обрезания лейбла */
+    truncateVariant?: TruncateStringProps['variant'];
 };

package/dist/esm/components/ChipAssist/ChipAssist.d.ts

@@ -8,4 +8,4 @@ export type ChipAssistProps = WithSupportProps<BaseChipProps & {
     onClick: MouseEventHandler<HTMLButtonElement>;
 }>;
 /** Чип с лейблом  */
-export declare function ChipAssist({ icon, size, label, disabled, loading, onClick, className, tabIndex, ...rest }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipAssist({ icon, size, label, disabled, loading, onClick, className, tabIndex, truncateVariant, ...rest }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipAssist/ChipAssist.js

@@ -12,12 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { Sun } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CHIP_ASSIST_TEST_IDS, SIZE, VARIANT } from '../../constants';
 import styles from './styles.module.css';
 /** Чип с лейблом  */
 export function ChipAssist(_a) {
-    var { icon, size = SIZE.S, label, disabled, loading, onClick, className, tabIndex } = _a, rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex"]);
+    var { icon, size = SIZE.S, label, disabled, loading, onClick, className, tabIndex, truncateVariant = 'middle' } = _a, rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex", "truncateVariant"]);
     const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
     const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
     const handleClick = e => {
@@ -26,5 +27,5 @@ export function ChipAssist(_a) {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (_jsxs("button", Object.assign({ type: 'button' }, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: label })] })));
+    return (_jsxs("button", Object.assign({ type: 'button' }, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: _jsx(TruncateString, { text: label, variant: truncateVariant }) })] })));
 }

package/dist/esm/components/ChipAssist/styles.module.css

@@ -6,8 +6,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -15,6 +15,7 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
+  justify-content:center;
   color:var(--sys-neutral-text-support, #6d707f);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -32,6 +33,7 @@
 .assistChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .assistChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/esm/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.d.ts

@@ -1,13 +1,13 @@
 import { KeyboardEvent, ReactNode } from 'react';
 import { ChipChoiceCommonProps } from '../../types';
-export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'> & {
+export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className' | 'truncateVariant'> & {
     /** Отображаемое значение */
     valueToRender?: ReactNode;
     /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
     value?: any;
     onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
 };
-export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "onClearButtonClick"> & {
+export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "truncateVariant" | "onClearButtonClick"> & {
     /** Отображаемое значение */
     valueToRender?: ReactNode;
     /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */

package/dist/esm/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -14,13 +14,14 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useRef, useState } from 'react';
 import { Sun } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
 import { ButtonClearValue } from '../../../../helperComponents';
 import { BUTTON_CLEAR_VALUE_SIZE_MAP } from '../../constants';
 import styles from './styles.module.css';
 export const ChipChoiceBase = forwardRef((_a, ref) => {
-    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown"]);
+    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown, truncateVariant = 'middle' } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "truncateVariant"]);
     const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
     const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
     const localRef = useRef(null);
@@ -61,5 +62,5 @@ export const ChipChoiceBase = forwardRef((_a, ref) => {
                 break;
         }
     };
-    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: mergeRefs(localRef, ref), className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })));
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: mergeRefs(localRef, ref), className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: _jsx(TruncateString, { text: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value, variant: truncateVariant }) }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })));
 });

package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css

@@ -12,8 +12,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -37,6 +37,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);
@@ -220,10 +221,17 @@
   --offset:var(--space-drop-list-drop-offset, 4px);
 }
 
-.label,
+.label{
+  display:inline-flex;
+  flex-grow:1;
+  align-items:center;
+  white-space:nowrap;
+}
+
 .value{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 
 .choiceChip{
@@ -234,8 +242,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -259,6 +267,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/esm/components/ChipChoice/styles.module.css

@@ -12,8 +12,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -37,6 +37,7 @@
 .choiceChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .choiceChip[data-size=xs]{
   height:var(--size-chips-xs, 24px);

package/dist/esm/components/ChipChoice/types.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { DropdownProps } from '@snack-uikit/dropdown';
 import { BaseItemProps, DroplistProps, GroupItemProps, GroupSelectItemProps, ItemContentProps, ItemId, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { BaseChipProps, Size } from '../../types';
 export type AnyType = any;
@@ -54,6 +55,8 @@ export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
     open?: boolean;
     /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Вариант обрезания значения */
+    truncateVariant?: TruncateStringProps['variant'];
 }>;
 export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
     options: FilterOption<T>[];

package/dist/esm/components/ChipChoiceRow/ChipChoiceRow.d.ts

@@ -26,4 +26,4 @@ export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
     /** Коллбек на изменение видимых фильтров */
     onVisibleFiltersChange?(value: string[]): void;
 }>;
-export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearButton: showClearButtonProp, showAddButton, className, value, defaultValue: defaultValueProp, size, visibleFilters: visibleFiltersProp, onVisibleFiltersChange, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipChoiceRow/ChipChoiceRow.js

@@ -25,7 +25,7 @@ import { ForwardedChipChoice } from './components';
 import { CHIP_CHOICE_ROW_SIZE, MAP_ROW_SIZE_TO_BUTTON_SIZE, MAP_ROW_SIZE_TO_CHOICE_SIZE } from './constants';
 import styles from './styles.module.css';
 export function ChipChoiceRow(_a) {
-    var { filters, onChange, showClearButton = true, showAddButton = true, className, value, defaultValue: defaultValueProp, size = CHIP_CHOICE_ROW_SIZE.S, visibleFilters: visibleFiltersProp, onVisibleFiltersChange } = _a, rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
+    var { filters, onChange, showClearButton: showClearButtonProp = true, showAddButton = true, className, value, defaultValue: defaultValueProp, size = CHIP_CHOICE_ROW_SIZE.S, visibleFilters: visibleFiltersProp, onVisibleFiltersChange } = _a, rest = __rest(_a, ["filters", "onChange", "showClearButton", "showAddButton", "className", "value", "defaultValue", "size", "visibleFilters", "onVisibleFiltersChange"]);
     const { t } = useLocale('Chips');
     const defaultValue = useMemo(() => (defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : {}), [defaultValueProp]);
     const [state, setState] = useUncontrolledProp(value, defaultValue, newState => {
@@ -112,5 +112,7 @@ export function ChipChoiceRow(_a) {
         }
         addListPrevValue.current = addListValue;
     }, [addListValue, handleChipOpen]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.chipChoiceRow, className) }, extractSupportProps(rest), { children: [pinnedFilters.length > 0 && (_jsxs("div", { className: styles.pinnedItems, children: [pinnedFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleClearPinnedFilter(filter.id) }), filter.id))), _jsx(Divider, { orientation: 'vertical', className: styles.divider })] })), visibleFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleRemoveVisibleFilter(filter.id), open: openedChip === filter.id, onOpenChange: handleChipOpen(filter.id) }), filter.id))), _jsxs("div", { className: styles.controlWrapper, children: [showAddButton && (_jsx(Tooltip, { tip: t('addButtonDisabledTip'), open: canAddChips ? false : undefined, placement: 'bottom', "data-test-id": CHIP_CHOICE_ROW_IDS.addButtonTooltip, children: _jsx(Droplist, { open: canAddChips && addListOpen, onOpenChange: setAddListOpen, items: addSelectorOptions, triggerClassName: styles.addButtonWrapper, trigger: 'clickAndFocusVisible', children: _jsx(ButtonFunction, { disabled: !canAddChips, label: t('add'), icon: _jsx(PlusSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.addButton }) }) })), showClearButton && hasAnyFilter && (_jsx(ButtonFunction, { onClick: handleFiltersClear, label: t('clear'), icon: _jsx(CrossSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.clearButton }))] })] })));
+    const showClearButton = showClearButtonProp && hasAnyFilter;
+    const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
+    return (_jsxs("div", Object.assign({ className: cn(styles.chipChoiceRow, className) }, extractSupportProps(rest), { children: [pinnedFilters.length > 0 && (_jsxs("div", { className: styles.pinnedItems, children: [pinnedFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleClearPinnedFilter(filter.id) }), filter.id))), showPinnedFiltersDivider && _jsx(Divider, { orientation: 'vertical', className: styles.divider })] })), visibleFilters.map(filter => (_jsx(ForwardedChipChoice, Object.assign({}, filter, { value: state[filter.id], size: MAP_ROW_SIZE_TO_CHOICE_SIZE[size], onChange: (value) => handleChange(filter.id, value), onClearButtonClick: handleRemoveVisibleFilter(filter.id), open: openedChip === filter.id, onOpenChange: handleChipOpen(filter.id) }), filter.id))), _jsxs("div", { className: styles.controlWrapper, children: [showAddButton && (_jsx(Tooltip, { tip: t('addButtonDisabledTip'), open: canAddChips ? false : undefined, placement: 'bottom', "data-test-id": CHIP_CHOICE_ROW_IDS.addButtonTooltip, children: _jsx(Droplist, { open: canAddChips && addListOpen, onOpenChange: setAddListOpen, items: addSelectorOptions, triggerClassName: styles.addButtonWrapper, trigger: 'clickAndFocusVisible', children: _jsx(ButtonFunction, { disabled: !canAddChips, label: t('add'), icon: _jsx(PlusSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.addButton }) }) })), showClearButton && (_jsx(ButtonFunction, { onClick: handleFiltersClear, label: t('clear'), icon: _jsx(CrossSVG, {}), iconPosition: 'before', size: MAP_ROW_SIZE_TO_BUTTON_SIZE[size], "data-test-id": CHIP_CHOICE_ROW_IDS.clearButton }))] })] })));
 }

package/dist/esm/components/ChipChoiceRow/styles.module.css

@@ -9,6 +9,7 @@
   gap:var(--space-chips-filter-row-gap, 4px);
   display:flex;
   flex-wrap:wrap;
+  min-width:0;
 }
 
 .controlWrapper{

package/dist/esm/components/ChipToggle/ChipToggle.d.ts

@@ -10,4 +10,4 @@ export type ChipToggleProps = WithSupportProps<BaseChipProps & {
     onChange(checked: boolean, e: ChangeEvent<HTMLInputElement>): void;
 }>;
 /** Чип с состоянием выбран/не выбран */
-export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, truncateVariant, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipToggle/ChipToggle.js

@@ -12,12 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { Sun } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CHIP_TOGGLE_TEST_IDS, SIZE, VARIANT } from '../../constants';
 import styles from './styles.module.css';
 /** Чип с состоянием выбран/не выбран */
 export function ChipToggle(_a) {
-    var { icon, size = SIZE.S, label, checked, disabled, loading, onChange, className, tabIndex = 0 } = _a, rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex"]);
+    var { icon, size = SIZE.S, label, checked, disabled, loading, onChange, className, tabIndex = 0, truncateVariant = 'middle' } = _a, rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex", "truncateVariant"]);
     const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
     const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
     const handleChange = e => {
@@ -26,5 +27,5 @@ export function ChipToggle(_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(!checked, e);
     };
-    return (_jsxs("label", Object.assign({}, extractSupportProps(rest), { "data-size": size, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, "data-variant": variant, "data-checked": checked || undefined, className: cn(styles.toggleChip, className), children: [_jsx("input", { "data-test-id": CHIP_TOGGLE_TEST_IDS.input, type: 'checkbox', checked: checked, onChange: handleChange, disabled: !loading && disabled, tabIndex: disabled ? -1 : tabIndex, className: styles.toggleChipInput }), _jsxs("span", { className: styles.toggleChipContent, children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_TOGGLE_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_TOGGLE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_TOGGLE_TEST_IDS.label, children: label })] })] })));
+    return (_jsxs("label", Object.assign({}, extractSupportProps(rest), { "data-size": size, "data-loading": loading || undefined, "data-disabled": (!loading && disabled) || undefined, "data-variant": variant, "data-checked": checked || undefined, className: cn(styles.toggleChip, className), children: [_jsx("input", { "data-test-id": CHIP_TOGGLE_TEST_IDS.input, type: 'checkbox', checked: checked, onChange: handleChange, disabled: !loading && disabled, tabIndex: disabled ? -1 : tabIndex, className: styles.toggleChipInput }), _jsxs("span", { className: styles.toggleChipContent, children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_TOGGLE_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_TOGGLE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_TOGGLE_TEST_IDS.label, children: _jsx(TruncateString, { text: label, variant: truncateVariant }) })] })] })));
 }

package/dist/esm/components/ChipToggle/styles.module.css

@@ -6,8 +6,8 @@
   box-sizing:border-box;
   width:-moz-max-content;
   width:max-content;
-  min-width:-moz-max-content;
-  min-width:max-content;
+  min-width:var(--dimension-6m, 48px);
+  max-width:100%;
   margin:0;
   padding:0;
   text-decoration:none;
@@ -15,6 +15,7 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
+  justify-content:center;
   color:var(--sys-neutral-text-support, #6d707f);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
@@ -45,6 +46,7 @@
 
 .toggleChip{
   position:relative;
+  min-width:0;
   margin:0;
   padding:0;
   border:none;
@@ -61,6 +63,7 @@
 .toggleChip .labelLayout{
   display:inline-flex;
   align-items:center;
+  min-width:0;
 }
 .toggleChip[data-size=xs] .label{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);

package/dist/esm/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { ValueOf } from '@snack-uikit/utils';
 import { BUTTON_SIZE, SIZE, VARIANT } from './constants';
 export type Size = ValueOf<typeof SIZE>;
@@ -17,4 +18,6 @@ export type BaseChipProps = {
     className?: string;
     /** HTML tab index */
     tabIndex?: number;
+    /** Вариант обрезания лейбла */
+    truncateVariant?: TruncateStringProps['variant'];
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.25.7",
+  "version": "0.26.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,14 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.8",
-    "@snack-uikit/calendar": "0.11.26",
+    "@snack-uikit/calendar": "0.11.27",
     "@snack-uikit/divider": "3.2.4",
     "@snack-uikit/dropdown": "0.4.6",
     "@snack-uikit/icons": "0.25.1",
-    "@snack-uikit/list": "0.26.3",
+    "@snack-uikit/list": "0.26.4",
     "@snack-uikit/loaders": "0.9.2",
     "@snack-uikit/tooltip": "0.16.5",
+    "@snack-uikit/truncate-string": "0.6.13",
     "@snack-uikit/utils": "3.8.0",
     "classnames": "2.5.1",
     "fuzzy-search": "3.2.1",
@@ -56,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "83190fc4f4d6dac84d3801ac3fe18c73354e1029"
+  "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
 }

package/src/components/ChipAssist/ChipAssist.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames';
 import { MouseEventHandler } from 'react';
 
 import { Sun, SunProps } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { CHIP_ASSIST_TEST_IDS, SIZE, VARIANT } from '../../constants';
@@ -27,6 +28,7 @@ export function ChipAssist({
   onClick,
   className,
   tabIndex,
+  truncateVariant = 'middle',
   ...rest
 }: ChipAssistProps) {
   const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
@@ -65,7 +67,7 @@ export function ChipAssist({
       )}
 
       <span className={cn(styles.labelLayout, styles.label)} data-test-id={CHIP_ASSIST_TEST_IDS.label}>
-        {label}
+        <TruncateString text={label} variant={truncateVariant} />
       </span>
     </button>
   );

package/src/components/ChipAssist/styles.module.scss

@@ -14,6 +14,7 @@ $typography: (
   @include styles.chip-defaults;
   @include styles.chip-anatomy-styles(styles-tokens-chips-chipAssist.$chip-assist, $sizes, $typography);
 
+  justify-content: center;
   color: styles-tokens-chips-chipAssist.$sys-neutral-text-support;
   background-color: styles-tokens-chips-chipAssist.$sys-neutral-background1-level;
   border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-default;

package/src/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.tsx

@@ -3,6 +3,7 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, ReactNode, useRef, useState } from 'react';
 
 import { Sun, SunProps } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
@@ -13,7 +14,16 @@ import styles from './styles.module.scss';
 
 export type ChipChoiceBaseProps = Pick<
   ChipChoiceCommonProps,
-  'loading' | 'tabIndex' | 'onClearButtonClick' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'
+  | 'loading'
+  | 'tabIndex'
+  | 'onClearButtonClick'
+  | 'disabled'
+  | 'icon'
+  | 'label'
+  | 'size'
+  | 'onClick'
+  | 'className'
+  | 'truncateVariant'
 > & {
   /** Отображаемое значение */
   valueToRender?: ReactNode;
@@ -38,6 +48,7 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
       tabIndex = 0,
       onClearButtonClick,
       onKeyDown,
+      truncateVariant = 'middle',
       ...rest
     },
     ref,
@@ -124,7 +135,7 @@ export const ChipChoiceBase = forwardRef<HTMLDivElement, ChipChoiceBaseProps>(
             </span>
           ) : (
             <span className={styles.value} data-test-id={CHIP_CHOICE_TEST_IDS.value}>
-              {valueToRender ?? value}
+              <TruncateString text={valueToRender ?? value} variant={truncateVariant} />
             </span>
           )}
         </span>

package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss

@@ -1,10 +1,17 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
 @use '../../styles.module';
 
-.label,
+.label {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  white-space: nowrap;
+}
+
 .value {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
 }
 
 .choiceChip {

package/src/components/ChipChoice/types.ts

@@ -12,6 +12,7 @@ import {
   SelectionMultipleState,
   SelectionSingleState,
 } from '@snack-uikit/list';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { BaseChipProps, Size } from '../../types';
@@ -96,6 +97,8 @@ export type ChipChoiceCommonProps = WithSupportProps<
     open?: boolean;
     /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
     onOpenChange?: (isOpen: boolean) => void;
+    /** Вариант обрезания значения */
+    truncateVariant?: TruncateStringProps['variant'];
   }
 >;
 

package/src/components/ChipChoiceRow/ChipChoiceRow.tsx

@@ -48,7 +48,7 @@ export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
 export function ChipChoiceRow<TState extends FiltersState>({
   filters,
   onChange,
-  showClearButton = true,
+  showClearButton: showClearButtonProp = true,
   showAddButton = true,
   className,
   value,
@@ -203,6 +203,9 @@ export function ChipChoiceRow<TState extends FiltersState>({
     addListPrevValue.current = addListValue;
   }, [addListValue, handleChipOpen]);
 
+  const showClearButton = showClearButtonProp && hasAnyFilter;
+  const showPinnedFiltersDivider = showAddButton || showClearButton || visibleFilters.length > 0;
+
   return (
     <div className={cn(styles.chipChoiceRow, className)} {...extractSupportProps(rest)}>
       {pinnedFilters.length > 0 && (
@@ -218,7 +221,7 @@ export function ChipChoiceRow<TState extends FiltersState>({
             />
           ))}
 
-          <Divider orientation='vertical' className={styles.divider} />
+          {showPinnedFiltersDivider && <Divider orientation='vertical' className={styles.divider} />}
         </div>
       )}
 
@@ -262,7 +265,7 @@ export function ChipChoiceRow<TState extends FiltersState>({
           </Tooltip>
         )}
 
-        {showClearButton && hasAnyFilter && (
+        {showClearButton && (
           <ButtonFunction
             onClick={handleFiltersClear}
             label={t('clear')}

package/src/components/ChipChoiceRow/styles.module.scss

@@ -12,6 +12,7 @@
 
   display: flex;
   flex-wrap: wrap;
+  min-width: 0;
 }
 
 .controlWrapper {

package/src/components/ChipToggle/ChipToggle.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames';
 import { ChangeEvent, ChangeEventHandler } from 'react';
 
 import { Sun, SunProps } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { CHIP_TOGGLE_TEST_IDS, SIZE, VARIANT } from '../../constants';
@@ -30,6 +31,7 @@ export function ChipToggle({
   onChange,
   className,
   tabIndex = 0,
+  truncateVariant = 'middle',
   ...rest
 }: ChipToggleProps) {
   const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
@@ -77,7 +79,7 @@ export function ChipToggle({
         )}
 
         <span className={cn(styles.labelLayout, styles.label)} data-test-id={CHIP_TOGGLE_TEST_IDS.label}>
-          {label}
+          <TruncateString text={label} variant={truncateVariant} />
         </span>
       </span>
     </label>

package/src/components/ChipToggle/styles.module.scss

@@ -13,6 +13,7 @@ $typography: (
 .toggleChipContent {
   @include styles.chip-defaults;
 
+  justify-content: center;
   color: styles-tokens-chips-chipToggle.$sys-neutral-text-support;
   background-color: styles-tokens-chips-chipToggle.$sys-neutral-background1-level;
   border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-default;
@@ -44,6 +45,7 @@ $typography: (
 
   position: relative;
 
+  min-width: 0;
   margin: 0;
   padding: 0;
 

package/src/styles.module.scss

@@ -10,7 +10,8 @@
 
   box-sizing: border-box;
   width: max-content;
-  min-width: max-content;
+  min-width: styles-tokens-element.$dimension-6m;
+  max-width: 100%;
   margin: 0;
   padding: 0;
 
@@ -32,6 +33,7 @@
   .labelLayout {
     display: inline-flex;
     align-items: center;
+    min-width: 0;
   }
 
   @each $size in $sizes {

package/src/types.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { ValueOf } from '@snack-uikit/utils';
 
 import { BUTTON_SIZE, SIZE, VARIANT } from './constants';
@@ -23,4 +24,6 @@ export type BaseChipProps = {
   className?: string;
   /** HTML tab index */
   tabIndex?: number;
+  /** Вариант обрезания лейбла */
+  truncateVariant?: TruncateStringProps['variant'];
 };