@moysklad/uikit 28.1.0 → 30.4.0

package/README.md

@@ -75,6 +75,7 @@ ReactDOM.render(
 - EditableTitle
 - EmptyState
 - EmptyStateLarge
+- FieldLabel
 - FieldRow
 - FileUploader
 - H1
@@ -93,6 +94,7 @@ ReactDOM.render(
 - InputUnit
 - Label
 - LabelValue
+- LabelValueCheckbox
 - LabelValueDate
 - LabelValueInput
 - LabelValueSelect
@@ -125,4 +127,5 @@ ReactDOM.render(
 - Tooltip
 - Typography
 - VerticalTab
+- ViewersStack
 - VStack

package/dist/colorVariables.css

@@ -77,6 +77,7 @@
         --button-secondary-disabled: var(--light-grey-100);
         --border-normal: var(--light-grey-400);
         --border-hover: var(--dark-grey-grey-800);
+        --border-focused: var(--dark-grey-dark-900);
         --border-disable: var(--light-grey-200);
         --border-accent: var(--product-blue-700);
         --border-critical: var(--colorful-red-600);
@@ -170,6 +171,15 @@
         --status-black-01-bg: #c5c7cc;
       }
     }
+
+    @layer viewers-stack {
+      :root {
+        --viewers-stack-green: #bae86b;
+        --viewers-stack-yellow: #ffcc71;
+        --viewers-stack-pink: #ffcad0;
+        --viewers-stack-violet: #b9aaff;
+      }
+    }
   }
 }
 

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { IHasTabIndex, IHasTestId } from '../../common/types';
-import type { ISelectOption } from '../Select/types';
+import type { IRenderActionsOptions, ISelectOption } from '../Select/types';
 import type { IRenderDropdownContentOptions, RenderInputOptions } from './type';
 export interface AutoCompleteProps<T, R> extends IHasTestId, IHasTabIndex {
     /** @deprecated задается через компонент в renderInput **/
@@ -25,8 +25,10 @@ export interface AutoCompleteProps<T, R> extends IHasTestId, IHasTabIndex {
     renderInput: ({ inputId, ref, onOpen, onClose, onChange, }: RenderInputOptions<R>) => ReactNode;
     renderDropdownContent?: (options: IRenderDropdownContentOptions<T>) => ReactNode;
     helpComponent?: ReactNode;
+    renderDropdownActions?: (options: IRenderActionsOptions) => ReactNode;
+    maxDropdownHeight?: number;
 }
 export declare const AutoComplete: {
-    <T, R extends HTMLElement>({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY, offsetX, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, }: AutoCompleteProps<T, R>): import("react/jsx-runtime").JSX.Element;
+    <T, R extends HTMLElement>({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY, offsetX, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, renderDropdownActions, maxDropdownHeight, }: AutoCompleteProps<T, R>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/AutoComplete/AutoComplete.js

@@ -8,8 +8,10 @@ import { Info } from "../Info/Info.js";
 import { Label } from "../Label/Label.js";
 import { OptionsList } from "../Select/OptionsList/OptionsList.js";
 import { useId } from "../../hooks/useId/index.js";
+import { DropdownActionsContainer } from "../Select/DropdownActionsContainer/DropdownActionsContainer.js";
+import { useDropdownPadding } from "../Select/useDropdownPadding.js";
 import AutoComplete_module from "./AutoComplete.module.js";
-const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY = 0, offsetX = 0, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id })=>{
+const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, label, info, required, error, warning, disabled, dropdownZIndex, offsetY = 0, offsetX = 0, options, onSelectOption, renderInput, renderDropdownContent, helpComponent, id, renderDropdownActions, maxDropdownHeight })=>{
     const [cursor, setCursor] = useState(null);
     const inputId = useId(id);
     const { open, triggerRef, handleClose, handleOpen, triggerAriaProps: baseTriggerAriaProps, dropdownAriaProps } = useDropdown({
@@ -27,6 +29,7 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         open,
         options
     ]);
+    const { scrollPaddings, dropdownActionsContainerRefCb } = useDropdownPadding();
     useEffect(()=>{
         const triggerElement = triggerRef.current;
         if (!triggerElement) return;
@@ -38,15 +41,6 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         listboxTriggerAriaProps,
         triggerRef
     ]);
-    const getDropdownStyle = ()=>{
-        const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
-        if (renderDropdownContent) return {
-            minWidth: triggerWidth
-        };
-        return {
-            width: triggerWidth
-        };
-    };
     const handleSelect = useCallback((option)=>{
         if (!option) return;
         onSelectOption?.(option);
@@ -56,6 +50,17 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
         handleClose,
         onSelectOption
     ]);
+    const getDropdownStyle = ()=>{
+        const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
+        if (renderDropdownContent) return {
+            minWidth: triggerWidth,
+            ...scrollPaddings
+        };
+        return {
+            width: triggerWidth,
+            ...scrollPaddings
+        };
+    };
     const handleMouseDown = useCallback((e, option)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -101,7 +106,7 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
                 warning: warning,
                 disabled: disabled
             }),
-            options && /*#__PURE__*/ jsx(Dropdown, {
+            options && /*#__PURE__*/ jsxs(Dropdown, {
                 ...dropdownAriaProps,
                 open: open,
                 triggerRef: triggerRef,
@@ -112,26 +117,35 @@ const AutoComplete = ({ testId, className, optionClassName, dropdownClassName, l
                 className: dropdownClassName,
                 style: getDropdownStyle(),
                 onClose: handleClose,
-                children: renderDropdownContent ? renderDropdownContent({
-                    cursor,
-                    testId,
-                    listboxId,
-                    options,
-                    onSelect: handleSelect,
-                    onMouseDown: handleMouseDown,
-                    onSetCursor: setCursor
-                }) : /*#__PURE__*/ jsx(OptionsList, {
-                    listboxId: listboxId,
-                    skipSelectOnTab: true,
-                    items: options,
-                    optionClassName: optionClassName,
-                    onSelect: handleSelect,
-                    onMouseDown: handleMouseDown,
-                    testId: testId,
-                    searchable: false,
-                    cursor: cursor,
-                    onSetCursor: setCursor
-                })
+                maxHeight: maxDropdownHeight,
+                children: [
+                    renderDropdownContent ? renderDropdownContent({
+                        cursor,
+                        testId,
+                        listboxId,
+                        options,
+                        onSelect: handleSelect,
+                        onMouseDown: handleMouseDown,
+                        onSetCursor: setCursor
+                    }) : /*#__PURE__*/ jsx(OptionsList, {
+                        listboxId: listboxId,
+                        skipSelectOnTab: true,
+                        items: options,
+                        optionClassName: optionClassName,
+                        onSelect: handleSelect,
+                        onMouseDown: handleMouseDown,
+                        testId: testId,
+                        searchable: false,
+                        cursor: cursor,
+                        onSetCursor: setCursor
+                    }),
+                    renderDropdownActions && /*#__PURE__*/ jsx(DropdownActionsContainer, {
+                        ref: dropdownActionsContainerRefCb,
+                        children: renderDropdownActions({
+                            closeDropdown: handleClose
+                        })
+                    })
+                ]
             })
         ]
     });

package/dist/components/Badge/Badge.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { Help } from "../Help/Help.js";
+import { Help, HelpSize } from "../Help/Help.js";
 import { Hint } from "../Hint/Hint.js";
 import { Text, TextColor } from "../Text/Text.js";
 import { Placement } from "../Tooltip/Tooltip.js";
-import { Support12Icon } from "../../icon/index.js";
 import Badge_module from "./Badge.module.js";
 const badgeColors = {
     green: 'green',
@@ -54,7 +53,7 @@ const Badge = ({ icon, label, labelClassName, help, className, variant, hintPlac
                 help && /*#__PURE__*/ jsx(Help, {
                     testId: "badge-help",
                     className: Badge_module.help,
-                    icon: /*#__PURE__*/ jsx(Support12Icon, {}),
+                    size: HelpSize.S,
                     popup: /*#__PURE__*/ jsx(Text.Body, {
                         children: help
                     }),

package/dist/components/Badge/Badge_module.css

@@ -7,8 +7,8 @@
   padding: 0 8px;
 }
 
-.badge-gtxv4j .help-eK4Uwn svg path[stroke], .badge-gtxv4j .help-eK4Uwn:hover svg path[stroke] {
-  stroke: currentColor;
+.help-eK4Uwn:not(:hover, :active, :focus-visible, [data-visible="true"]) {
+  color: inherit;
 }
 
 .content-CwHzRb {
@@ -16,7 +16,6 @@
   align-items: center;
   gap: 4px;
   display: flex;
-  overflow: hidden;
 }
 
 .content-CwHzRb > svg {

package/dist/components/BottomSheet/BottomSheet.js

@@ -3,12 +3,12 @@ import { memo, useCallback, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useLatestValue } from "@dnd-kit/utilities";
 import { AnimatePresence, motion, useDragControls } from "framer-motion";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../common/index.js";
 import { useSheetContext } from "./BottomSheetContextProvider.js";
 import { Text } from "../Text/Text.js";
 import { useMediaQuery } from "../../hooks/index.js";
 import { RemoveCloseIcon16Icon, Support20Icon } from "../../icon/index.js";
+import { debounce } from "../../utils/debounce/debounce.js";
 import { TRANSITION } from "./BottomSheet.constants.js";
 import { BottomSheetBody } from "./BottomSheetBody.js";
 import BottomSheet_module from "./BottomSheet.module.js";
@@ -125,7 +125,7 @@ const BottomSheet = /*#__PURE__*/ memo(({ testId = 'bottomSheet', isOpen, onClos
                 'TEXTAREA'
             ].includes(element.tagName);
         };
-        const scrollIntoActive = lodash_debounce(()=>{
+        const scrollIntoActive = debounce(()=>{
             if (!editableInFocus()) return;
             document.activeElement?.scrollIntoView({
                 block: 'nearest',

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,5 +1,7 @@
 import { type HTMLAttributes } from 'react';
 import { type TextAtomProps } from '../Text/Text.atom';
-type BreadcrumbItemProps = Omit<TextAtomProps, 'variant'> & HTMLAttributes<HTMLSpanElement>;
-export declare const BreadcrumbItem: import("react").MemoExoticComponent<({ className, onClick, ...otherProps }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element>;
-export {};
+export type BreadcrumbItemProps = Omit<TextAtomProps, 'variant'> & HTMLAttributes<HTMLSpanElement> & {
+    charLimitThreshold?: number;
+    hintZIndex?: number;
+};
+export declare const BreadcrumbItem: import("react").MemoExoticComponent<({ className, onClick, charLimitThreshold, hintZIndex, children, ...restProps }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Breadcrumbs/BreadcrumbItem.js

@@ -1,14 +1,45 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useMemo, useRef, useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { TextVariant } from "../Text/Text.js";
+import { HintWithSkip } from "../_shared/HintWithSkip/HintWithSkip.js";
+import { Text, TextColor, TextVariant } from "../Text/Text.js";
 import { TextAtom } from "../Text/Text.atom.js";
+import { Placement } from "../Tooltip/Tooltip.js";
 import Breadcrumbs_module from "./Breadcrumbs.module.js";
-const BreadcrumbItem = /*#__PURE__*/ memo(({ className, onClick, ...otherProps })=>/*#__PURE__*/ jsx(TextAtom, {
-        variant: TextVariant.caption,
-        className: cn(Breadcrumbs_module.item, className, onClick && Breadcrumbs_module.hasClick),
-        onClick: onClick,
-        ...otherProps
-    }));
+const HINT_SHOW_DELAY_SECONDS = 0.3;
+const BreadcrumbItem = /*#__PURE__*/ memo(({ className, onClick, charLimitThreshold, hintZIndex, children, ...restProps })=>{
+    const textElementRef = useRef(null);
+    const [isTextOverflow, setIsTextOverflow] = useState(false);
+    const value = useMemo(()=>{
+        const textValue = children;
+        const isOverflow = 'number' == typeof charLimitThreshold && charLimitThreshold > 0 && textValue.length - charLimitThreshold > 1;
+        setIsTextOverflow(isOverflow);
+        if (isOverflow) return `${textValue.substring(0, charLimitThreshold)}...`;
+        return textValue;
+    }, [
+        children,
+        charLimitThreshold
+    ]);
+    return /*#__PURE__*/ jsx(HintWithSkip, {
+        testId: restProps.testId,
+        overlay: /*#__PURE__*/ jsx(Text.Body, {
+            colorToken: TextColor.invert,
+            children: children
+        }),
+        skip: !isTextOverflow,
+        placement: Placement.BOTTOM,
+        zIndex: hintZIndex,
+        mouseEnterDelay: HINT_SHOW_DELAY_SECONDS,
+        mouseLeaveDelay: 0,
+        children: /*#__PURE__*/ jsx(TextAtom, {
+            ref: textElementRef,
+            variant: TextVariant.caption,
+            className: cn(Breadcrumbs_module.item, className, onClick && Breadcrumbs_module.hasClick),
+            onClick: onClick,
+            ...restProps,
+            children: value
+        })
+    });
+});
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 export { BreadcrumbItem };

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,10 @@
 import { type FC, type HTMLAttributes } from 'react';
 import { type IHasTestId } from '../../common/types';
 import { BreadcrumbItem } from './BreadcrumbItem';
-export type IBreadcrumbsProps = HTMLAttributes<HTMLDivElement> & IHasTestId;
+export type IBreadcrumbsProps = HTMLAttributes<HTMLDivElement> & IHasTestId & {
+    charLimitThreshold?: number;
+    hintZIndex?: number;
+};
 export declare const Breadcrumbs: FC<IBreadcrumbsProps> & {
     Item: typeof BreadcrumbItem;
 };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,26 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 import { cn } from "../../common/css/cn.js";
 import { Right12Icon } from "../../icon/index.js";
 import { BreadcrumbItem } from "./BreadcrumbItem.js";
 import Breadcrumbs_module from "./Breadcrumbs.module.js";
-const renderBreadcrumbItems = (children)=>{
+const CHAR_LIMIT_THRESHOLD = 40;
+const renderBreadcrumbItems = (children, charLimitThreshold, hintZIndex)=>{
     const childrenArray = Children.toArray(children);
     const lastIndex = childrenArray.length - 1;
     return childrenArray.filter(isValidElement).map((child, idx)=>/*#__PURE__*/ jsxs("div", {
             className: Breadcrumbs_module.itemContainer,
             children: [
-                child,
+                /*#__PURE__*/ cloneElement(child, {
+                    charLimitThreshold,
+                    hintZIndex
+                }),
                 idx !== lastIndex && /*#__PURE__*/ jsx(Right12Icon, {})
             ]
         }, idx));
 };
-const Breadcrumbs = ({ children, className, testId, ...otherProps })=>{
-    const items = renderBreadcrumbItems(children);
+const Breadcrumbs = ({ children, className, testId, charLimitThreshold = CHAR_LIMIT_THRESHOLD, hintZIndex = 1, ...restProps })=>{
+    const items = renderBreadcrumbItems(children, charLimitThreshold, hintZIndex);
     return /*#__PURE__*/ jsx("div", {
         className: cn(Breadcrumbs_module.container, className),
         "data-test-id": testId,
-        ...otherProps,
+        ...restProps,
         children: items
     });
 };

package/dist/components/Button/Button.d.ts

@@ -28,5 +28,6 @@ export interface IButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTM
     isIconButton?: boolean;
     stretch?: boolean;
     withHorisontalPadding?: boolean;
+    noPadding?: boolean;
 }
 export declare const Button: import("react").ForwardRefExoticComponent<IButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -34,9 +34,9 @@ const getFilledColorClass = (color)=>{
             return Button_module.filledGrey;
     }
 };
-const Button = /*#__PURE__*/ forwardRef(({ testId, type = 'button', variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, ...rest }, ref)=>{
+const Button = /*#__PURE__*/ forwardRef(({ testId, type = 'button', variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, noPadding = false, ...rest }, ref)=>{
     const LoaderIcon = LoaderBySizeMap[size];
-    const className = cn(Button_module.button, Button_module[variant], Button_module[size], variant === ButtonVariants.FILLED && getFilledColorClass(color), isLoading ? Button_module.isLoading : '', isIconButton && Button_module.iconButton, stretch && Button_module.stretch, classNameProp, withHorisontalPadding && Button_module.withHorisontalPadding);
+    const className = cn(Button_module.button, Button_module[variant], Button_module[size], variant === ButtonVariants.FILLED && getFilledColorClass(color), variant === ButtonVariants.FRAMELESS && noPadding && Button_module.noPadding, isLoading ? Button_module.isLoading : '', isIconButton && Button_module.iconButton, stretch && Button_module.stretch, classNameProp, withHorisontalPadding && Button_module.withHorisontalPadding);
     const handleClick = (e)=>{
         if (isLoading || disabled) return;
         onClick?.(e);

package/dist/components/Button/Button.module.js

@@ -14,6 +14,7 @@ const Button_module = {
     additional: "additional-Ftulks",
     frameless: "frameless-gZ67sX",
     withHorisontalPadding: "withHorisontalPadding-DDBSv8",
+    noPadding: "noPadding-Ja7zyG",
     secondary: "secondary-bjc5zI",
     filled: "filled-WTubUm",
     filledGrey: "filledGrey-cyhUUI",

package/dist/components/Button/Button_module.css

@@ -235,6 +235,10 @@
   padding-right: 12px;
 }
 
+.noPadding-Ja7zyG {
+  padding: 0;
+}
+
 .secondary-bjc5zI {
   --cb-button-color: var(--text-primary, #091739);
   --cb-button-background: var(--button-secondary-normal, #fff);

package/dist/components/Carousel/Carousel.js

@@ -22,15 +22,16 @@ const Carousel = ({ isVisible, sources, onClose, startIndex = 0, testId, portalE
         startIndex
     ]);
     const sourcesLength = sources.length;
-    const withToolbar = sourcesLength > 1;
     const handleClickPrev = ()=>setCurrentIndex((index)=>0 === index ? sourcesLength - 1 : index - 1);
     const handleClickNext = ()=>setCurrentIndex((index)=>(index + 1) % sourcesLength);
     const handleClose = ()=>{
         onClose();
     };
+    const isToolbarVisible = sourcesLength > 1;
+    const isArrowNavigationEnabled = isVisible && isToolbarVisible;
     useKeyDownListener('Escape', handleClose, isVisible);
-    useKeyDownListener('ArrowLeft', handleClickPrev, isVisible);
-    useKeyDownListener('ArrowRight', handleClickNext, isVisible);
+    useKeyDownListener('ArrowLeft', handleClickPrev, isArrowNavigationEnabled);
+    useKeyDownListener('ArrowRight', handleClickNext, isArrowNavigationEnabled);
     useTabNavigation(ref, isVisible);
     if (!isVisible || 0 === sourcesLength) return null;
     const label = toolbarLabel ? toolbarLabel(currentIndex, sources.length) : `${currentIndex + 1} из ${sources.length}`;
@@ -75,7 +76,7 @@ const Carousel = ({ isVisible, sources, onClose, startIndex = 0, testId, portalE
                     ]
                 })
             }),
-            withToolbar && /*#__PURE__*/ jsx(Toolbar, {
+            isToolbarVisible && /*#__PURE__*/ jsx(Toolbar, {
                 label: label,
                 onPrevClick: handleClickPrev,
                 onNextClick: handleClickNext,

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 export type { CheckboxProps } from './Checkbox.types';
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "children" | "onClick" | "type"> & import("../Indicator/Indicator.types").IndicatorProps & import("../..").IHasTestId & import("../..").IHasTabIndex & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "onClick" | "type"> & import("../Indicator/Indicator.types").IndicatorProps & import("../..").IHasTestId & import("../..").IHasTabIndex & {
     className?: string;
     label?: string;
     children?: import("react").ReactNode;

package/dist/components/Chip/Chip.helpers.js

@@ -157,10 +157,10 @@ const resolveProps = (props)=>{
             legacy
         };
     }
-    const { variant = 'regular', size = 'regular', disabled = false, label, leadingIcon, onPress, selected, onSelectedChange, trailingIcon, trailingIconBehavior, onTrailingIconClick, trailingIconHint, indicatorMode, count, novelty, clearable, onClear, clearIconHint, constrainWidth, maxWidthPx, hintZIndex } = props;
+    const { variant = 'regular', size = 'regular', disabled = false, label, labelColorToken, className, leadingIcon, tabIndex, onPress, selected, onSelectedChange, trailingIcon, trailingIconBehavior, onTrailingIconClick, trailingIconHint, indicatorMode, count, novelty, clearable, onClear, clearIconHint, constrainWidth, maxWidthPx, hintZIndex } = props;
     const clickHandler = (e)=>{
         onPress?.(e);
-        onSelectedChange(!selected);
+        onSelectedChange?.(!selected);
     };
     const indicators = resolveIndicators({
         size,
@@ -193,7 +193,10 @@ const resolveProps = (props)=>{
         disabled,
         selected,
         label,
+        labelColorToken,
+        className,
         leadingIcon,
+        tabIndex,
         trailing,
         indicators,
         clear,

package/dist/components/Chip/Chip.js

@@ -128,7 +128,7 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
             ]
         });
     }
-    const { variant, size, disabled, selected, clickHandler, label, leadingIcon, trailing, indicators, clear, textBehavior, hintZIndex } = resolved;
+    const { variant, size, disabled, selected, clickHandler, label, labelColorToken, className, leadingIcon, tabIndex, trailing, indicators, clear, textBehavior, hintZIndex } = resolved;
     const isCompact = 'compact' === size;
     const isTrailingButton = 'button' === trailing.mode;
     const isClearButton = 'button' === clear.mode;
@@ -163,7 +163,8 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
             disabled,
             hasLeading,
             hasTrailing,
-            constrainWidth: textBehavior.constrainWidth
+            constrainWidth: textBehavior.constrainWidth,
+            className
         });
         const wrapperStyle = getConstrainedStyle(textBehavior);
         const mainButtonClassName = isTrailingButton ? Chip_module.chipButton : cn(Chip_module.chipButton, leadingIcon && Chip_module.hasLeading);
@@ -179,10 +180,12 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
                     onClick: clickHandler,
                     className: mainButtonClassName,
                     disabled: disabled,
+                    tabIndex: tabIndex,
                     children: [
                         leadingIconNode,
                         /*#__PURE__*/ jsx(ChipLabel, {
                             label: label,
+                            colorToken: labelColorToken,
                             isCompact: isCompact,
                             textBehavior: textBehavior,
                             hintZIndex: hintZIndex
@@ -220,7 +223,8 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
         isCompact,
         hasLeading,
         hasTrailing,
-        constrainWidth: textBehavior.constrainWidth
+        constrainWidth: textBehavior.constrainWidth,
+        className
     });
     const rootStyle = getConstrainedStyle(textBehavior);
     return /*#__PURE__*/ jsxs(ChipRoot, {
@@ -231,10 +235,12 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
         disabled: disabled,
         onClick: clickHandler,
         buttonRef: ref,
+        tabIndex: tabIndex,
         children: [
             leadingIconNode,
             /*#__PURE__*/ jsx(ChipLabel, {
                 label: label,
+                colorToken: labelColorToken,
                 isCompact: isCompact,
                 textBehavior: textBehavior,
                 hintZIndex: hintZIndex

package/dist/components/Chip/Chip.legacy_module.css

@@ -17,7 +17,7 @@
 }
 
 .chip-sfyie1:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
   background-color: var(--elements-chips-normal, #f1f4f9);
 }
 
@@ -47,7 +47,7 @@
 }
 
 .active-uGgP1c:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
   background-color: var(--elements-chips-normal-current, #dff0fe);
 }
 

package/dist/components/Chip/Chip.types.d.ts

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
-import type { IHasTestId, ValueOf } from '../../common/types';
+import type { IHasTabIndex, IHasTestId, ValueOf } from '../../common/types';
+import type { TextColorToken } from '../Text/Text';
 /**
  * Этот тип сейчас необходим для поддержки legacy-поведения.
  * Все они уже фактически используются.
@@ -73,10 +74,12 @@ type ChipAppearanceProps = {
 };
 type ChipNewSelectionProps = {
     selected: boolean;
-    onSelectedChange: (nextSelected: boolean) => void;
+    onSelectedChange?: (nextSelected: boolean) => void;
 };
-type ChipNewContentProps = {
+type ChipNewContentProps = IHasTabIndex & {
     label: string;
+    labelColorToken?: TextColorToken;
+    className?: string;
     leadingIcon?: ReactNode;
 };
 type ChipClearProps = {
@@ -169,6 +172,7 @@ export interface ChipLegacyProps extends ChipButtonLegacyCompatProps {
     onSelectedChange?: never;
     onPress?: never;
     label?: never;
+    labelColorToken?: never;
     leadingIcon?: never;
     trailingIcon?: never;
     trailingIconBehavior?: never;
@@ -259,9 +263,11 @@ export type ChipTextBehaviorResolved = {
 export type Resolved = (ResolvedBase & {
     mode: 'legacy';
     legacy: LegacyResolved;
-}) | (ResolvedBase & {
+}) | (ResolvedBase & IHasTabIndex & {
     mode: 'new';
     label: string;
+    labelColorToken?: TextColorToken;
+    className?: string;
     leadingIcon?: ReactNode;
     trailing: ResolvedTrailing;
     indicators: ResolvedIndicators;

package/dist/components/Chip/Chip_module.css

@@ -12,7 +12,7 @@
 }
 
 .chip-m4AltR:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .chip-m4AltR:disabled {
@@ -126,7 +126,7 @@
 }
 
 .wrapper-BRrIHY:has(.chipButton-_9Yan_:focus-visible) {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .chipButton-_9Yan_ {
@@ -143,7 +143,7 @@
 }
 
 .chipButton-_9Yan_:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .trailingButton-D8uCaI {
@@ -163,7 +163,7 @@
 }
 
 .trailingButton-D8uCaI:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .clearButton-fN81yO {
@@ -183,7 +183,7 @@
 }
 
 .clearButton-fN81yO:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .rightActions-f8Q4y9 {

package/dist/components/Chip/components/ChipLabel.d.ts

@@ -1,9 +1,11 @@
+import { type TextColorToken } from '../../Text/Text';
 import type { ChipTextBehaviorResolved } from '../Chip.types';
 type ChipLabelProps = {
     label: string;
+    colorToken?: TextColorToken;
     isCompact: boolean;
     textBehavior: ChipTextBehaviorResolved;
     hintZIndex?: number;
 };
-export declare const ChipLabel: ({ label, isCompact, textBehavior, hintZIndex, }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChipLabel: ({ label, colorToken, isCompact, textBehavior, hintZIndex, }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};