@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/Layout/Layout_module.css

@@ -0,0 +1,77 @@
+.mainWrap-JLBf3u {
+  --layout-bg-color: var(--bgd-secondary);
+  background-color: var(--layout-bg-color);
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  min-width: 1200px;
+  min-height: 100dvh;
+  display: flex;
+}
+
+.white-nNMpTy {
+  --layout-bg-color: var(--bgd-white);
+}
+
+.header-kLeLQu {
+  background-color: var(--layout-bg-color);
+  z-index: 3;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.body-PmmRSC {
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  max-width: 1640px;
+  padding: 0 20px 32px;
+  display: flex;
+}
+
+.bodyFull-mcyirc {
+  max-width: 100%;
+}
+
+.pBLarge-fg0fvb {
+  padding-bottom: 100px;
+}
+
+.contentHeader-pB7tPR {
+  background-color: var(--layout-bg-color);
+  flex-direction: row;
+  width: 100%;
+  padding: 20px 0;
+  display: flex;
+}
+
+.stickyContentHeader-PISsux {
+  z-index: 2;
+  position: sticky;
+  top: 0;
+}
+
+.main-rrgu1Q {
+  flex-direction: row;
+  flex: 1;
+  gap: 20px;
+  width: 100%;
+  display: flex;
+}
+
+.aside-ztLelP {
+  flex-direction: column;
+  width: 280px;
+  display: flex;
+}
+
+.content-XWW4aN {
+  flex-direction: column;
+  flex: 1;
+  gap: 20px;
+  display: flex;
+}
+

package/dist/components/Link/Link.d.ts

@@ -1,8 +1,7 @@
-import React, { type AnchorHTMLAttributes } from 'react';
-import { type TextAtomProps } from '../Text/Text.atom';
-export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & TextAtomProps & {
+import { ClickableTag, type ClickableTagValue, type PolymorphicClickableProps } from '../_shared/utils/polymorphicClickableTypes';
+import type { TextAtomProps } from '../Text/Text.atom';
+export type LinkOwnProps = TextAtomProps & {
     disabled?: boolean;
 };
-export declare const Link: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & TextAtomProps & {
-    disabled?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export type LinkProps<As extends ClickableTagValue = typeof ClickableTag.a> = PolymorphicClickableProps<LinkOwnProps, As>;
+export declare const Link: import("../_shared/utils/polymorphicClickableTypes").ClickableComponent<LinkOwnProps, "a">;

package/dist/components/Link/Link.js

@@ -1,22 +1,48 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { createElement } from "react";
 import { cn } from "../../common/css/cn.js";
-import { TextTag, TextVariant } from "../Text/Text.js";
-import { TextAtom } from "../Text/Text.atom.js";
+import { ClickableTag, polymorphicClickableRef } from "../_shared/utils/polymorphicClickableTypes.js";
+import { TextVariant } from "../Text/Text.js";
+import { getClassByVariant } from "../Text/tokens/variants/textVariant.js";
 import Link_module from "./Link.module.js";
-const Link = /*#__PURE__*/ forwardRef(({ variant = TextVariant.body, className, children, href, disabled, onClick, ...restProps }, ref)=>{
+import Text_atom_module from "../Text/Text.atom.module.js";
+const ClickableTextAtom = polymorphicClickableRef((props, ref)=>{
+    const { as: elementProp = ClickableTag.a, variant = TextVariant.body, preline, testId, className, children, ...restProps } = props;
+    const element = elementProp;
+    return /*#__PURE__*/ createElement(element, {
+        'data-test-id': testId,
+        className: cn(Text_atom_module.text, getClassByVariant(variant), preline && Text_atom_module.preLine, className),
+        ref,
+        ...restProps
+    }, children);
+});
+ClickableTextAtom.displayName = 'ClickableTextAtom';
+const Link = polymorphicClickableRef((props, ref)=>{
+    const { as: elementProp = ClickableTag.a, variant = TextVariant.body, className, children, disabled, onClick, href, ...rest } = props;
+    const element = elementProp;
+    const isAnchor = element === ClickableTag.a;
     const handleClick = (e)=>{
-        if (disabled) return e.preventDefault();
+        if (disabled) {
+            if (isAnchor) e.preventDefault();
+            return;
+        }
         if ('function' != typeof onClick) return;
         return onClick(e);
     };
-    return /*#__PURE__*/ jsx(TextAtom, {
-        ...restProps,
+    const tagSpecificProps = isAnchor ? {
         href: disabled ? void 0 : href,
+        'aria-disabled': disabled || void 0
+    } : {
+        type: rest.type ?? 'button',
+        disabled
+    };
+    return /*#__PURE__*/ jsx(ClickableTextAtom, {
+        ...rest,
+        ...tagSpecificProps,
         ref: ref,
         variant: variant,
-        as: TextTag.a,
-        className: cn(Link_module.link, disabled && Link_module.linkDisabled, className),
+        as: element,
+        className: cn(Link_module.link, !isAnchor && Link_module.linkButtonReset, disabled && Link_module.linkDisabled, className),
         onClick: handleClick,
         children: children
     });

package/dist/components/Link/Link.module.js

@@ -1,6 +1,7 @@
 import "./Link_module.css";
 const Link_module = {
     link: "link-ALIkeV",
+    linkButtonReset: "linkButtonReset-Q4HSqs",
     linkDisabled: "linkDisabled-TARqlL"
 };
 export default Link_module;

package/dist/components/Link/Link_module.css

@@ -12,6 +12,15 @@
   color: var(--product-blue-600);
 }
 
+.linkButtonReset-Q4HSqs {
+  cursor: pointer;
+  text-align: inherit;
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 .linkDisabled-TARqlL:hover, .linkDisabled-TARqlL:active, .linkDisabled-TARqlL {
   color: #797979;
   text-decoration: none;

package/dist/components/MentionsTextfield/Mentions/style.css

@@ -33,7 +33,7 @@
   width: 420px;
   max-height: 428px;
   margin: 0;
-  padding: 16px;
+  padding: 4px;
   list-style: none;
   position: absolute;
   overflow: hidden auto;
@@ -51,12 +51,8 @@
   padding: 0;
 }
 
-.lognex-uikit-mentions-dropdown-menu-item:not(:last-child) {
-  margin-bottom: 4px;
-}
-
 .lognex-uikit-mentions-dropdown-menu-item-active {
-  background-color: var(--light-grey-100);
+  background-color: var(--elements-bg-hover, #f1f4f9);
   border-radius: 8px;
 }
 

package/dist/components/MentionsTextfield/MentionsTextfield.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
+import type { TextfieldProps } from '../Textfield/Textfield';
 import { type MentionsProps } from './Mentions/Mentions';
 export type { TMentionOption, TMentionsMap, TMentionValue } from './types';
-import type { TextfieldProps } from '../Textfield/Textfield';
 export interface MentionTextfieldProps<Dto = unknown> extends MentionsProps<Dto>, Omit<TextfieldProps, 'defaultValue' | 'name' | 'onChange' | 'onSelect' | 'prefix' | 'value'> {
 }
 export declare const MentionsTextfield: <T>(props: MentionTextfieldProps<T>) => ReactElement;

package/dist/components/MentionsTextfield/MentionsTextfield.js

@@ -1,38 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from "react";
-import { cn } from "../../common/css/cn.js";
+import { forwardRef, useRef } from "react";
 import { Container } from "../Textfield/components/Container/Container.js";
 import { InnerContainer } from "../Textfield/components/InnerContainer/InnerContainer.js";
 import { InputContainer } from "../Textfield/components/InputContainer/InputContainer.js";
+import { ResizeHandle } from "../Textfield/components/ResizeHandle/index.js";
+import { TextfieldSize } from "../Textfield/types/index.js";
+import { getMinHeight } from "../Textfield/utils/index.js";
 import { useId } from "../../hooks/useId/index.js";
 import { useTextField } from "../../hooks/useTextField/useTextField.js";
 import { Mentions } from "./Mentions/Mentions.js";
 import Textfield_module from "../Textfield/Textfield.module.js";
-const MentionsTextfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, clearable, resize, style, value, limit, showCounterLimit, autoVerticalResize, resetHeightOnClear, minHeight = 90, maxHeight, rows, actionsBar, onFocus, onBlur, onClear, onChange, ...textfieldProps }, forwardedRef)=>{
+import { cn } from "../../common/index.js";
+const MentionsTextfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, label, info, required, error, help, disabled, resize, style, value, limit, showCounterLimit, autoVerticalResize = false, resetHeightOnClear = false, minHeight: minHeightProp, maxHeight, rows, size = TextfieldSize.M, onFocus, onBlur, onChange, onMainBtnClick, onEmojiBtnClick, isFileBtnVisible, mainBtnIcon, emojiBtnIcon, fileBtnIcon, fileUploaderProps, resizeTop = false, resizeBottom = false, fitContentHeightOnInit = false, actionsBar, helpProps, ...textfieldProps }, forwardedRef)=>{
     const textfieldId = useId(textfieldProps.id);
     const ref = useRef(null);
     const innerRef = forwardedRef || ref;
     const textValue = value.backend;
-    const handleClear = useCallback(()=>{
-        onChange({
-            backend: '',
-            mentionsMap: {},
-            raw: ''
-        });
-        onClear?.();
-    }, [
-        onClear,
-        onChange
-    ]);
-    const { height, isFocused, isLimitError, setIsFocused } = useTextField({
+    const minHeight = getMinHeight(minHeightProp, size);
+    const hasResizeHandles = resizeTop || resizeBottom;
+    const { height, isFocused, isLimitError, setIsFocused, setHeight } = useTextField({
         minHeight,
         maxHeight,
         ref,
+        value: textValue,
         autoVerticalResize,
+        limit,
         resetHeightOnClear,
-        value: textValue,
-        limit
+        fitContentHeightOnInit,
+        hasResizeHandles
     });
+    const effectiveHeight = autoVerticalResize || fitContentHeightOnInit || resetHeightOnClear || hasResizeHandles ? height || void 0 : void 0;
     return /*#__PURE__*/ jsx(Container, {
         textfieldId: textfieldId,
         label: label,
@@ -46,20 +43,40 @@ const MentionsTextfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, classNam
         error: error,
         info: info,
         hasHelp: !!help,
+        size: size,
+        helpProps: helpProps,
         children: /*#__PURE__*/ jsx(InnerContainer, {
-            clearable: clearable,
-            value: textValue,
-            disabled: disabled,
             withHelp: !!help,
-            onClear: handleClear,
             popup: help,
             testId: testId,
             children: /*#__PURE__*/ jsx(InputContainer, {
-                clearable: clearable,
                 disabled: disabled,
                 focused: isFocused,
                 error: error || isLimitError,
                 actionsBar: actionsBar,
+                size: size,
+                mainBtnIcon: mainBtnIcon,
+                emojiBtnIcon: emojiBtnIcon,
+                fileBtnIcon: fileBtnIcon,
+                onMainBtnClick: onMainBtnClick,
+                onEmojiBtnClick: onEmojiBtnClick,
+                isFileBtnVisible: isFileBtnVisible,
+                testId: testId,
+                fileUploaderProps: fileUploaderProps,
+                resizeTopSlot: resizeTop ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "top",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
+                resizeBottomSlot: resizeBottom ? /*#__PURE__*/ jsx(ResizeHandle, {
+                    direction: "bottom",
+                    onHeightChange: setHeight,
+                    startHeight: height || minHeight,
+                    minHeight: minHeight,
+                    maxHeight: maxHeight
+                }) : null,
                 children: /*#__PURE__*/ jsx(Mentions, {
                     ...textfieldProps,
                     onChange: onChange,
@@ -67,14 +84,14 @@ const MentionsTextfield = /*#__PURE__*/ forwardRef(({ testId, tabIndex, classNam
                     id: textfieldId,
                     ref: innerRef,
                     testId: testId ? `${testId}-textfield` : void 0,
-                    className: cn(Textfield_module.input, clearable && Textfield_module.clearable),
+                    className: cn(Textfield_module.input, Textfield_module[size]),
                     disabled: disabled,
                     style: {
-                        resize
+                        resize: hasResizeHandles ? 'none' : resize
                     },
                     styles: {
                         textarea: {
-                            height: autoVerticalResize ? height : '',
+                            height: effectiveHeight,
                             minHeight,
                             ...style
                         }

package/dist/components/Multiselect/AllSelectedChip/AllSelectedChip.d.ts

@@ -0,0 +1,8 @@
+import { type IHasTestId } from '../../../common/types';
+interface AllSelectedChipProps extends IHasTestId {
+    label: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const AllSelectedChip: (props: AllSelectedChipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Multiselect/AllSelectedChip/AllSelectedChip.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../common/css/cn.js";
+import { Chip } from "../../Chip/Chip.js";
+import AllSelectedChip_module from "./AllSelectedChip.module.js";
+const AllSelectedChip = (props)=>/*#__PURE__*/ jsx(Chip, {
+        selected: true,
+        label: props.label,
+        disabled: props.disabled,
+        tabIndex: -1,
+        className: cn(props.className, AllSelectedChip_module.nonInteractive),
+        testId: props.testId
+    });
+export { AllSelectedChip };

package/dist/components/Multiselect/AllSelectedChip/AllSelectedChip.module.js

@@ -0,0 +1,5 @@
+import "./AllSelectedChip_module.css";
+const AllSelectedChip_module = {
+    nonInteractive: "nonInteractive-TiKaBZ"
+};
+export default AllSelectedChip_module;

package/dist/components/Multiselect/AllSelectedChip/AllSelectedChip_module.css

@@ -0,0 +1,9 @@
+.nonInteractive-TiKaBZ {
+  pointer-events: none;
+  cursor: default;
+}
+
+.nonInteractive-TiKaBZ:focus, .nonInteractive-TiKaBZ:focus-visible {
+  box-shadow: none;
+}
+

package/dist/components/Multiselect/DropdownContent/MultiselectDropdownContent.d.ts

@@ -1,5 +1,5 @@
 import React, { type Key, type KeyboardEventHandler, type ReactNode, type Ref } from 'react';
-import { type DropdownItem, type RenderSelectedItem } from '../types';
+import { type AllSelectedChipTextVariant, type DropdownItem, type GetAllSelectedChipText, type RenderSelectedItem } from '../types';
 export interface RenderContentParams {
     options: ReactNode;
     input: ReactNode;
@@ -20,6 +20,17 @@ export interface MultiselectDropdownContentProps<T extends Key, DTO = any> {
      * @example (count) => `выбрано ${count} элементов`
      */
     getManyItemsChipText?: (itemsCount: number) => string;
+    /**
+     *
+     * коллбэк для определения текста для невлезающих элементов, отображаемого в строке поиска
+     * при выборе большого количества элементов
+     *
+     * @param itemsCount количество оставшихся элементов которые не влезли
+     * @example (count) => `еще ${count}...`
+     */
+    getOtherText?: (itemsCount: number) => string;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
     /**
      *
      * коллбэк для определения текста, отображаемого при остутствии элемента при фильтрации

package/dist/components/Multiselect/DropdownContent/MultiselectDropdownContent.js

@@ -1,6 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as external_react_Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../../common/css/cn.js";
 import { Button } from "../../Button/Button.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
@@ -9,9 +8,12 @@ import { SearchInput } from "../../SearchInput/SearchInput.js";
 import { EmptyState } from "../../Select/EmptyState/EmptyState.js";
 import { Loading } from "../../Select/Loading/Loading.js";
 import { Text, TextColor } from "../../Text/Text.js";
+import { useDebounceCallback } from "../../../hooks/useDebounceCallback/useDebounceCallback.js";
 import { Add16Icon, RemoveClose12Icon } from "../../../icon/index.js";
+import { AllSelectedChip } from "../AllSelectedChip/AllSelectedChip.js";
 import { useAsyncDropdownContext } from "../AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { minChipsWidth, selectAllCheckboxDefaultText } from "../lib/consts.js";
+import { canSelectAllItems, getDefaultAllSelectedChipText, isAllItemsSelected } from "../lib/helpers.js";
 import { useChipsKeyDown } from "../lib/useChipsKeyDown.js";
 import { useItemKeyDown } from "../lib/useItemKeyDown.js";
 import { SelectAllCheckbox } from "../SelectAllCheckbox/SelectAllCheckbox.js";
@@ -19,11 +21,13 @@ import { TooltipedChip } from "../TooltipedChip/TooltipedChip.js";
 import { TooltipedOptionText } from "../TooltipedOptionText/TooltipedOptionText.js";
 import MultiselectDropdownContent_module from "./MultiselectDropdownContent.module.js";
 const handleCheck = ()=>{};
+const DEBOUNCE_OPTIONS = {
+    leading: true
+};
 const MultiselectDropdownContent = (props)=>{
     const asyncDropdownContext = useAsyncDropdownContext();
     const selectedItems = (asyncDropdownContext?.selectedValues ?? props.items).filter((item)=>props.values.includes(item.value));
     const [filteredItems, setFilteredItems] = useState(asyncDropdownContext?.cachedItems ?? props.items);
-    const [filteredSelectedItems, setFilteredSelectedItems] = useState(selectedItems);
     const [searchInputValue, setSearchInputValue] = useState(asyncDropdownContext?.cachedInputValue ?? '');
     const searchInputValueRef = useRef(searchInputValue);
     searchInputValueRef.current = searchInputValue;
@@ -39,20 +43,16 @@ const MultiselectDropdownContent = (props)=>{
         asyncDropdownContext?.changeCachedItems(items ?? []);
         setFilteredItems(items ?? []);
     }, []);
-    const handleAsyncSearchDebounced = useCallback(lodash_debounce(handleAsyncSearch, props.searchDebounce, {
-        leading: true
-    }), []);
+    const handleAsyncSearchDebounced = useDebounceCallback(handleAsyncSearch, props.searchDebounce, DEBOUNCE_OPTIONS);
     const handleSearch = (inputValue)=>{
         setSearchInputValue(inputValue);
         if (!inputValue.trim()) {
-            setFilteredSelectedItems(selectedItems);
             if (props.onSearch) {
                 setFilteredItems([]);
                 handleAsyncSearchDebounced(inputValue);
             } else setFilteredItems(props.items);
             return;
         }
-        setFilteredSelectedItems(selectedItems.filter((item)=>item.label.toLowerCase().includes(inputValue.trim().toLowerCase())));
         if (props.onSearch) {
             setFilteredItems([]);
             handleAsyncSearchDebounced(inputValue);
@@ -60,15 +60,13 @@ const MultiselectDropdownContent = (props)=>{
         }
         setFilteredItems(props.items.filter((item)=>item.label.toLowerCase().includes(inputValue.trim().toLowerCase())));
     };
-    const updateFilteredSelectedItems = (inputValue)=>{
-        if (!inputValue.trim()) return void setFilteredSelectedItems(selectedItems);
-        setFilteredSelectedItems(selectedItems.filter((item)=>item.label.toLowerCase().includes(inputValue.trim().toLowerCase())));
-    };
-    useEffect(()=>{
-        updateFilteredSelectedItems(searchInputValue);
+    const filteredSelectedItems = useMemo(()=>{
+        const trimmedSearchInputValue = searchInputValue.trim().toLowerCase();
+        if (!trimmedSearchInputValue) return selectedItems;
+        return selectedItems.filter((item)=>item.label.toLowerCase().includes(trimmedSearchInputValue));
     }, [
-        props.values,
-        asyncDropdownContext?.selectedValues
+        searchInputValue,
+        selectedItems
     ]);
     useEffect(()=>{
         if (props.onSearch) return;
@@ -89,13 +87,16 @@ const MultiselectDropdownContent = (props)=>{
     const isManySelected = useMemo(()=>filteredSelectedItems.length > 9, [
         filteredSelectedItems
     ]);
+    const availableItems = asyncDropdownContext?.cachedItems ?? props.items;
+    const isAllSelected = props.showSelectAllCheckbox && isAllItemsSelected(availableItems, props.values);
     const selectAllCheckboxText = useMemo(()=>props.selectAllCheckboxText ?? selectAllCheckboxDefaultText, [
         props.selectAllCheckboxText
     ]);
     const isShowSelectAllCheckbox = useMemo(()=>{
         if (!props.showSelectAllCheckbox) return false;
-        return selectAllCheckboxText.toLowerCase().includes(searchInputValue.trim().toLowerCase());
+        return canSelectAllItems(availableItems) && selectAllCheckboxText.toLowerCase().includes(searchInputValue.trim().toLowerCase());
     }, [
+        availableItems,
         props.showSelectAllCheckbox,
         searchInputValue,
         selectAllCheckboxText
@@ -236,10 +237,15 @@ const MultiselectDropdownContent = (props)=>{
             })
         })
     });
-    const chips = !!filteredSelectedItems.length && /*#__PURE__*/ jsxs("div", {
+    const chips = (isAllSelected || !!filteredSelectedItems.length) && /*#__PURE__*/ jsxs("div", {
         className: cn(MultiselectDropdownContent_module.chipsContainer, props.chipsContainerClassName),
         children: [
-            !isManySelected && filteredSelectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
+            isAllSelected && /*#__PURE__*/ jsx(AllSelectedChip, {
+                label: props.getAllSelectedChipText?.(availableItems.length) ?? getDefaultAllSelectedChipText(availableItems.length, props.allSelectedChipTextVariant),
+                className: cn(MultiselectDropdownContent_module.chip, MultiselectDropdownContent_module.moreElementsChip),
+                testId: props.testId ? `${props.testId}-all-selected` : void 0
+            }),
+            !isAllSelected && !isManySelected && filteredSelectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
                     tooltipDelay: props.tooltipDelay,
                     ref: (ref)=>chipRefs.current[index] = ref,
                     minWidth: minChipsWidth,
@@ -252,7 +258,7 @@ const MultiselectDropdownContent = (props)=>{
                     renderSelectedItem: props.renderSelectedItem,
                     item: item
                 }, item.value)),
-            isManySelected && /*#__PURE__*/ jsx(Chip, {
+            !isAllSelected && isManySelected && /*#__PURE__*/ jsx(Chip, {
                 isActive: true,
                 onClick: ()=>{},
                 icon: /*#__PURE__*/ jsx("div", {

package/dist/components/Multiselect/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes } from 'react';
-import { type InputValue, type RenderSelectedItem } from '../types';
+import { type AllSelectedChipTextVariant, type GetAllSelectedChipText, type InputValue, type RenderSelectedItem } from '../types';
 export interface InputProps {
     id?: HTMLInputElement['id'];
     placeholder?: string;
@@ -12,7 +12,7 @@ export interface InputProps {
      * используется для форматирования строки невлезающих элементов в input
      *
      * @param elementsCount количество оставшихся элементов которые не влезли
-     * @example (count) => `ещё ${count}`
+     * @example (count) => `еще ${count}`
      */
     getOtherText?: (elementsCount: number) => string;
     /**
@@ -23,6 +23,10 @@ export interface InputProps {
     className?: string;
     testId?: string;
     disabled?: boolean;
+    canShowAllSelectedChip?: boolean;
+    isAllSelected?: boolean;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
     wrapSelectedItems?: boolean;
     renderSelectedItem?: RenderSelectedItem;
     triggerAriaProps?: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>;

package/dist/components/Multiselect/Input/Input.js

@@ -4,8 +4,10 @@ import { cn } from "../../../common/css/cn.js";
 import { Chip } from "../../Chip/Chip.js";
 import { Text, TextColor } from "../../Text/Text.js";
 import { Down12Icon } from "../../../icon/index.js";
+import { AllSelectedChip } from "../AllSelectedChip/AllSelectedChip.js";
 import { useAsyncDropdownContext } from "../AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { chipsContainerGap, minChipsWidth } from "../lib/consts.js";
+import { getAllSelectedChipState, getDefaultAllSelectedChipText } from "../lib/helpers.js";
 import { useChipsKeyDown } from "../lib/useChipsKeyDown.js";
 import { TooltipedChip, chipStyles } from "../TooltipedChip/TooltipedChip.js";
 import Input_module from "./Input.module.js";
@@ -13,6 +15,12 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
     const chipsContainerRef = useRef(null);
     const asyncDropdownContext = useAsyncDropdownContext();
     const selectedItems = asyncDropdownContext?.selectedValues ?? props.selectedItems;
+    const allSelectedChipState = getAllSelectedChipState({
+        asyncItems: asyncDropdownContext?.cachedItems,
+        canShowAllSelectedChip: props.canShowAllSelectedChip,
+        isAllSelected: props.isAllSelected,
+        selectedItems
+    });
     const [displayedSelectedItems, setDisplayedSelectedItems] = useState([]);
     const otherChipRef = useRef(null);
     const [otherElementsCount, setOtherElementsCount] = useState(0);
@@ -48,6 +56,7 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
         props.onItemDelete?.(item.value);
         if (ifFirstItem) containerRef.current?.focus();
     });
+    const hasVisibleValue = allSelectedChipState.isAllSelected || displayedSelectedItems.length;
     return /*#__PURE__*/ jsxs("div", {
         ...props.triggerAriaProps,
         id: props.id,
@@ -77,7 +86,7 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
         },
         "aria-disabled": props.disabled,
         children: [
-            props.placeholder && !displayedSelectedItems.length && /*#__PURE__*/ jsx(Text.Body, {
+            props.placeholder && !hasVisibleValue && /*#__PURE__*/ jsx(Text.Body, {
                 className: Input_module.placeholder,
                 colorToken: TextColor.tertiary,
                 children: props.placeholder
@@ -90,7 +99,12 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
                 },
                 "data-test-id": props.testId ? `${props.testId}-values` : '',
                 children: [
-                    displayedSelectedItems.map((item, i)=>/*#__PURE__*/ jsx(TooltipedChip, {
+                    allSelectedChipState.isAllSelected ? /*#__PURE__*/ jsx(AllSelectedChip, {
+                        label: props.getAllSelectedChipText?.(allSelectedChipState.itemsCount) ?? getDefaultAllSelectedChipText(allSelectedChipState.itemsCount, props.allSelectedChipTextVariant),
+                        disabled: props.disabled,
+                        className: cn(chipStyles.chip, chipStyles.multiselectChip),
+                        testId: props.testId ? `${props.testId}-all-selected` : void 0
+                    }) : displayedSelectedItems.map((item, i)=>/*#__PURE__*/ jsx(TooltipedChip, {
                             ref: (ref)=>chipRefs.current[i] = ref,
                             text: item.label,
                             minWidth: minChipsWidth,
@@ -106,7 +120,7 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
                             renderSelectedItem: props.renderSelectedItem,
                             item: item
                         }, item.value)),
-                    !props.wrapSelectedItems && /*#__PURE__*/ jsx(Chip, {
+                    !allSelectedChipState.isAllSelected && !props.wrapSelectedItems && /*#__PURE__*/ jsx(Chip, {
                         ref: otherChipRef,
                         className: cn(chipStyles.chip, chipStyles.multiselectChip),
                         isActive: true,
@@ -117,7 +131,7 @@ const Input = /*#__PURE__*/ forwardRef((props, refProp)=>{
                         },
                         disabled: props.disabled,
                         testId: `${props.testId}-is-many-selected`,
-                        children: props.getOtherText?.(otherElementsCount) ?? `ещё ${otherElementsCount}...`
+                        children: props.getOtherText?.(otherElementsCount) ?? `еще ${otherElementsCount}...`
                     })
                 ]
             }),

package/dist/components/Multiselect/Input/Input_module.css

@@ -16,9 +16,7 @@
 }
 
 .input-Wuu6VO:focus-visible {
-  --input-shadow: var(--invert-accent-normal, #7eb4ff);
-  box-shadow: 0 0 4px 0 var(--input-shadow);
-  border: 1px solid var(--border-accent, #036ce5);
+  border: 1px solid var(--border-focused, #091739);
 }
 
 .input-Wuu6VO {