@moysklad/uikit 30.4.0 → 31.20.0

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

@@ -10,8 +10,10 @@ 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";
@@ -26,7 +28,6 @@ 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;
@@ -46,14 +47,12 @@ const MultiselectDropdownContent = (props)=>{
     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);
@@ -61,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;
@@ -90,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
@@ -237,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,
@@ -253,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/Multiselect.d.ts

@@ -2,7 +2,7 @@ import { type Key, type MutableRefObject, type ReactElement, type ReactNode, typ
 import { type InputProps } from './Input/Input';
 import { type MultiselectDropdownContentProps } from './DropdownContent/MultiselectDropdownContent';
 import { type ShortDropdownContentProps } from './ShortDropdownContent/ShortDropdownContent';
-import { type DropdownItem, type RenderSelectedItem } from './types';
+import { type AllSelectedChipTextVariant, type DropdownItem, type GetAllSelectedChipText, type RenderSelectedItem } from './types';
 type SharedProps<T extends Key, DTO = unknown> = Pick<InputProps, 'placeholder' | 'getOtherText' | 'tooltipDelay'> & {
     id?: HTMLElement['id'];
     label?: string;
@@ -30,6 +30,8 @@ type SharedProps<T extends Key, DTO = unknown> = Pick<InputProps, 'placeholder'
     onSearch?: (value: string) => Promise<DropdownItem<T>[]>;
     renderItem?: (item: DropdownItem<T, DTO>) => ReactNode;
     renderSelectedItem?: RenderSelectedItem;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
 };
 type DefaultProps<T extends Key, DTO = any> = MultiselectDropdownContentProps<T, DTO> & {
     variant?: 'default' | 'textarea';
@@ -46,4 +48,4 @@ export { useChipsKeyDown } from './lib/useChipsKeyDown';
 export { SelectedItemArchive, type SelectedItemArchiveProps, } from './SelectedItem/SelectedItemArchive';
 export { ShortDropdownContent, type ShortDropdownContentProps, } from './ShortDropdownContent/ShortDropdownContent';
 export { chipStyles, TooltipedChip, type TooltipedChipProps, } from './TooltipedChip/TooltipedChip';
-export { type DropdownItem } from './types';
+export { type AllSelectedChipTextVariant, type DropdownItem, type GetAllSelectedChipText, } from './types';

package/dist/components/Multiselect/Multiselect.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { cn } from "../../common/css/cn.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Input } from "./Input/Input.js";
 import { useId } from "../../hooks/useId/index.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Info } from "../Info/Info.js";
 import { Label } from "../Label/Label.js";
 import { AsyncDropdownContextProvider, useAsyncDropdownContext } from "./AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { MultiselectDropdownContent } from "./DropdownContent/MultiselectDropdownContent.js";
+import { isAllItemsSelected } from "./lib/helpers.js";
 import { useUpdateEffect } from "./lib/useUpdateEffect.js";
 import { ShortDropdownContent } from "./ShortDropdownContent/ShortDropdownContent.js";
 import { MultiselectTextField } from "./TextField/MultiselectTextField.js";
@@ -39,6 +40,7 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
         props.onCreateButtonClick(searchInputValue);
         if (props.closeDropdownOnCreateButtonClick) handleClose();
     };
+    const isAllSelected = props.showSelectAllCheckbox && isAllItemsSelected(props.items, props.values);
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         className: cn(Multiselect_module.container, props.className ?? ''),
@@ -80,6 +82,10 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                             getOtherText: props.getOtherText,
                             tooltipDelay: props.tooltipDelay,
                             disabled: props.disabled,
+                            canShowAllSelectedChip: props.showSelectAllCheckbox,
+                            isAllSelected: isAllSelected,
+                            allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                            getAllSelectedChipText: props.getAllSelectedChipText,
                             wrapSelectedItems: props.wrapSelectedItems,
                             renderSelectedItem: props.renderSelectedItem,
                             triggerAriaProps: triggerAriaProps
@@ -96,6 +102,10 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                             onItemDelete: handleItemDelete,
                             tooltipDelay: props.tooltipDelay,
                             disabled: props.disabled,
+                            canShowAllSelectedChip: props.showSelectAllCheckbox,
+                            isAllSelected: isAllSelected,
+                            allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                            getAllSelectedChipText: props.getAllSelectedChipText,
                             renderSelectedItem: props.renderSelectedItem,
                             triggerAriaProps: triggerAriaProps
                         }),
@@ -117,6 +127,8 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                                 onChange: props.onChange,
                                 values: props.values,
                                 getManyItemsChipText: props.getManyItemsChipText,
+                                allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                                getAllSelectedChipText: props.getAllSelectedChipText,
                                 getNotFoundText: props.getNotFoundText,
                                 showCreateButton: props.showCreateButton,
                                 getCreateButtonText: props.getCreateButtonText,

package/dist/components/Multiselect/ShortDropdownContent/ShortDropdownContent.js

@@ -4,6 +4,7 @@ import { Button } from "../../Button/Button.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
 import { Add16Icon } from "../../../icon/index.js";
 import { selectAllCheckboxDefaultText } from "../lib/consts.js";
+import { canSelectAllItems } from "../lib/helpers.js";
 import { useItemKeyDown } from "../lib/useItemKeyDown.js";
 import { SelectAllCheckbox } from "../SelectAllCheckbox/SelectAllCheckbox.js";
 import { TooltipedOptionText } from "../TooltipedOptionText/TooltipedOptionText.js";
@@ -20,7 +21,7 @@ const ShortDropdownContent = (props)=>{
                 className: ShortDropdownContent_module.itemsList,
                 "data-test-id": props.testId ? `${props.testId}-items-list` : '',
                 children: [
-                    props.showSelectAllCheckbox && /*#__PURE__*/ jsx(SelectAllCheckbox, {
+                    props.showSelectAllCheckbox && canSelectAllItems(props.items) && /*#__PURE__*/ jsx(SelectAllCheckbox, {
                         values: props.values,
                         items: props.items,
                         onChange: props.onChange,

package/dist/components/Multiselect/TextField/MultiselectTextField.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type Ref } from 'react';
-import { type InputValue, type RenderSelectedItem } from '../types';
+import { type AllSelectedChipTextVariant, type GetAllSelectedChipText, type InputValue, type RenderSelectedItem } from '../types';
 interface MultiselectTextFieldProps {
     id?: HTMLTextAreaElement['id'];
     selectedItems: InputValue[];
@@ -12,6 +12,10 @@ interface MultiselectTextFieldProps {
     onItemDelete?: (value: InputValue['value']) => void;
     tooltipDelay?: number;
     disabled?: boolean;
+    canShowAllSelectedChip?: boolean;
+    isAllSelected?: boolean;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
     renderSelectedItem?: RenderSelectedItem;
     triggerAriaProps?: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>;
 }

package/dist/components/Multiselect/TextField/MultiselectTextField.js

@@ -3,10 +3,12 @@ import { useEffect, useRef, useState } from "react";
 import { cn } from "../../../common/css/cn.js";
 import { mergeRefs } from "../../../common/react/mergeRefs.js";
 import { Textfield } from "../../Textfield/Textfield.js";
+import { AllSelectedChip } from "../AllSelectedChip/AllSelectedChip.js";
 import { useAsyncDropdownContext } from "../AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { minChipsWidth } from "../lib/consts.js";
+import { getAllSelectedChipState, getDefaultAllSelectedChipText } from "../lib/helpers.js";
 import { useChipsKeyDown } from "../lib/useChipsKeyDown.js";
-import { TooltipedChip } from "../TooltipedChip/TooltipedChip.js";
+import { TooltipedChip, chipStyles } from "../TooltipedChip/TooltipedChip.js";
 import MultiselectTextField_module from "./MultiselectTextField.module.js";
 const minHeight = 90;
 const defaultPadding = {
@@ -23,6 +25,12 @@ const MultiselectTextField = (props)=>{
     ]);
     const asyncDropdownContext = useAsyncDropdownContext();
     const selectedItems = asyncDropdownContext?.selectedValues ?? props.selectedItems;
+    const allSelectedChipState = getAllSelectedChipState({
+        asyncItems: asyncDropdownContext?.cachedItems,
+        canShowAllSelectedChip: props.canShowAllSelectedChip,
+        isAllSelected: props.isAllSelected,
+        selectedItems
+    });
     const [height, setHeight] = useState(`${minHeight}px`);
     const [padding, setPadding] = useState(defaultPadding);
     const chipsContainerStyle = {
@@ -96,7 +104,12 @@ const MultiselectTextField = (props)=>{
             /*#__PURE__*/ jsx("div", {
                 className: MultiselectTextField_module.chipsContainer,
                 style: chipsContainerStyle,
-                children: selectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
+                children: allSelectedChipState.isAllSelected ? /*#__PURE__*/ jsx(AllSelectedChip, {
+                    label: props.getAllSelectedChipText?.(allSelectedChipState.itemsCount) ?? getDefaultAllSelectedChipText(allSelectedChipState.itemsCount, props.allSelectedChipTextVariant),
+                    disabled: props.disabled,
+                    className: cn(chipStyles.chip, chipStyles.multiselectChip, MultiselectTextField_module.chip),
+                    testId: props.testId ? `${props.testId}-all-selected` : void 0
+                }) : selectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
                         minWidth: minChipsWidth,
                         text: item.label,
                         ref: (ref)=>chipRefs.current[index] = ref,

package/dist/components/Multiselect/lib/consts.d.ts

@@ -1,3 +1,3 @@
 export declare const minChipsWidth = 64;
 export declare const chipsContainerGap = 4;
-export declare const selectAllCheckboxDefaultText = "\u0412\u0441\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B";
+export declare const selectAllCheckboxDefaultText = "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435";

package/dist/components/Multiselect/lib/consts.js

@@ -1,4 +1,4 @@
 const minChipsWidth = 64;
 const chipsContainerGap = 4;
-const selectAllCheckboxDefaultText = 'Все элементы';
+const selectAllCheckboxDefaultText = 'Выбрать все';
 export { chipsContainerGap, minChipsWidth, selectAllCheckboxDefaultText };

package/dist/components/Multiselect/lib/helpers.d.ts

@@ -0,0 +1,24 @@
+import { type Key } from 'react';
+import type { AllSelectedChipTextVariant } from '../types';
+type AllSelectedChipStateParams<T extends Key> = {
+    asyncItems?: {
+        value: T;
+    }[];
+    canShowAllSelectedChip?: boolean;
+    isAllSelected?: boolean;
+    selectedItems: {
+        value: T;
+    }[];
+};
+export declare const canSelectAllItems: <T extends Key>(items: {
+    value: T;
+}[]) => boolean;
+export declare const isAllItemsSelected: <T extends Key>(items: {
+    value: T;
+}[], values: T[]) => boolean;
+export declare const getAllSelectedChipState: <T extends Key>({ asyncItems, canShowAllSelectedChip, isAllSelected, selectedItems, }: AllSelectedChipStateParams<T>) => {
+    isAllSelected: boolean;
+    itemsCount: number;
+};
+export declare const getDefaultAllSelectedChipText: (itemsCount: number, variant?: AllSelectedChipTextVariant) => string;
+export {};

package/dist/components/Multiselect/lib/helpers.js

@@ -0,0 +1,15 @@
+const canSelectAllItems = (items)=>items.length > 1;
+const isAllItemsSelected = (items, values)=>canSelectAllItems(items) && items.every((item)=>values.includes(item.value));
+const getAllSelectedChipState = ({ asyncItems, canShowAllSelectedChip, isAllSelected, selectedItems })=>{
+    const selectedItemValues = selectedItems.map((item)=>item.value);
+    const isAllSelectedInAsyncContext = canShowAllSelectedChip && !!asyncItems && isAllItemsSelected(asyncItems, selectedItemValues);
+    return {
+        isAllSelected: Boolean(isAllSelected || isAllSelectedInAsyncContext),
+        itemsCount: asyncItems?.length || selectedItems.length
+    };
+};
+const getDefaultAllSelectedChipText = (itemsCount, variant = 'full')=>{
+    if ('short' === variant) return 'Выбраны все';
+    return `Выбраны все ${itemsCount}`;
+};
+export { canSelectAllItems, getAllSelectedChipState, getDefaultAllSelectedChipText, isAllItemsSelected };

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

@@ -9,6 +9,8 @@ export interface DropdownItem<T extends Key, DTO = unknown> {
     label: string;
     dto?: DTO;
 }
+export type GetAllSelectedChipText = (itemsCount: number) => string;
+export type AllSelectedChipTextVariant = 'full' | 'short';
 export type RenderSelectedItemProps = {
     element: ReactNode;
     chipRef: ForwardedRef<HTMLButtonElement> | undefined;

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type Key, type ReactNode } from 'react';
+import { type IHasTestId } from '../../common';
+export interface PanelItem {
+    id: Key;
+    element: ReactNode;
+    width: number;
+}
+export interface PanelProps extends HTMLAttributes<HTMLDivElement>, IHasTestId {
+    items: PanelItem[];
+    /**
+     * maximum - 40
+     *
+     * @default 6
+     */
+    columnsCount?: number;
+    /**
+     * @default 12
+     */
+    rowGap?: number;
+    /**
+     * @default 20
+     */
+    columnGap?: number;
+    /**
+     * @default 38
+     */
+    minRowHeight?: number;
+}
+declare const ForwardedRefPanel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Empty: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: typeof ForwardedRefPanel & {
+    EmptyItem: typeof Empty;
+};
+export {};

package/dist/components/Panel/Panel.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn, getOptionalTestId } from "../../common/index.js";
+import Panel_module from "./Panel.module.js";
+const ForwardedRefPanel = /*#__PURE__*/ forwardRef(({ items, columnsCount: columnsCountProp = 6, rowGap = 12, columnGap = 20, minRowHeight = 38, testId, ...restProps }, ref)=>{
+    const columnsCount = Math.min(columnsCountProp, 40);
+    const containerStyles = {
+        '--panel-columns-count': columnsCount,
+        '--panel-row-gap': `${rowGap}px`,
+        '--panel-column-gap': `${columnGap}px`,
+        '--panel-min-row-height': `${minRowHeight}px`
+    };
+    const getItemStyles = (bentoItem)=>({
+            '--panel-item-width': Math.min(Math.round(bentoItem.width), columnsCount)
+        });
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: cn(Panel_module.container, restProps.className),
+        style: {
+            ...restProps.style,
+            ...containerStyles
+        },
+        "data-test-id": testId,
+        children: items.map((panelItem)=>/*#__PURE__*/ jsx("div", {
+                className: Panel_module.item,
+                style: getItemStyles(panelItem),
+                "data-test-id": getOptionalTestId(testId, `item-${panelItem.id}`),
+                children: panelItem.element
+            }, panelItem.id))
+    });
+});
+ForwardedRefPanel.displayName = 'Panel';
+const Empty = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props
+    });
+const Panel = ForwardedRefPanel;
+Panel.EmptyItem = Empty;
+export { Panel };

package/dist/components/Panel/Panel.module.js

@@ -0,0 +1,6 @@
+import "./Panel_module.css";
+const Panel_module = {
+    container: "container-iTBnxl",
+    item: "item-mDdH69"
+};
+export default Panel_module;

package/dist/components/Panel/Panel_module.css

@@ -0,0 +1,17 @@
+.container-iTBnxl {
+  --panel-columns-count: 6;
+  --panel-row-gap: 12px;
+  --panel-column-gap: 20px;
+  --panel-min-row-height: 38px;
+  grid-template-columns: repeat(var(--panel-columns-count), minmax(50px, 1fr));
+  grid-auto-rows: minmax(var(--panel-min-row-height), auto);
+  gap: var(--panel-row-gap) var(--panel-column-gap);
+  display: grid;
+}
+
+.item-mDdH69 {
+  --panel-item-width: 1;
+  grid-column: auto/span var(--panel-item-width);
+  overflow: hidden;
+}
+

package/dist/components/Radiobutton/Radiobutton.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { cn } from "../../common/css/cn.js";
 import { getOptionalTestId } from "../../common/testId/index.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Indicator } from "../Indicator/Indicator.js";
 import { getIndicatorProps } from "../Indicator/Indicator.helpers.js";
-import { Info } from "../Info/Info.js";
 import { RadiobuttonContent } from "./components/RadiobuttonContent.js";
 import { RadiobuttonHelp } from "./components/RadiobuttonHelp.js";
 import Radiobutton_module from "./Radiobutton.module.js";

package/dist/components/Radiobutton/Radiobutton_module.css

@@ -52,6 +52,11 @@
   order: 1;
 }
 
+.input-Z8mheX[type="radio"] {
+  margin-right: initial;
+  height: initial;
+}
+
 .input-Z8mheX:focus {
   outline: none;
 }

package/dist/components/SearchInput/SearchInput_module.css

@@ -7,7 +7,7 @@
 }
 
 .container-Ukb21O:focus-within {
-  outline: 1px solid var(--dark-grey-dark-900);
+  outline: 1px solid var(--border-focused, #091739);
   color: var(--dark-grey-dark-900);
   border: none;
 }

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue.d.ts

@@ -1,11 +1,10 @@
 import { type ReactElement, type ReactNode } from 'react';
-import type { ISelectOption } from '../types';
 interface ArchivedInputValueProps {
-    value: ISelectOption;
     input: ReactNode;
     isShowIcon: boolean;
-    overlayText?: ReactNode;
+    inputHintText?: string;
     disabled?: boolean;
+    testId?: string;
 }
-export declare const ArchivedInputValue: (props: ArchivedInputValueProps) => ReactElement;
+export declare const ArchivedInputValue: ({ input, isShowIcon, inputHintText, disabled, testId, }: ArchivedInputValueProps) => ReactElement;
 export {};

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue.js

@@ -5,40 +5,35 @@ import { Hint } from "../../Hint/Hint.js";
 import { Text, TextColor } from "../../Text/Text.js";
 import { Archived16Icon } from "../../../icon/index.js";
 import ArchivedInputValue_module from "./ArchivedInputValue.module.js";
-const ArchivedInputValue = ({ input, value, isShowIcon, overlayText, disabled })=>{
+const ArchivedInputValue = ({ input, isShowIcon, inputHintText = 'В архиве', disabled, testId })=>{
     const [visible, setVisible] = useState(false);
     const handleVisibleChange = (show)=>{
-        setVisible(isShowIcon && !!value?.isArchived && show);
+        setVisible(isShowIcon && show);
     };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Hint, {
-                visible: visible,
-                onVisibleChange: handleVisibleChange,
-                mouseEnterDelay: 0.3,
-                overlay: /*#__PURE__*/ jsx(Fragment, {
-                    children: /*#__PURE__*/ jsx(Text.Body, {
-                        colorToken: TextColor.invert,
-                        preline: true,
-                        children: overlayText
-                    })
-                }),
-                children: input
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Hint, {
+            visible: visible,
+            onVisibleChange: handleVisibleChange,
+            mouseEnterDelay: 0.3,
+            overlay: /*#__PURE__*/ jsx(Fragment, {
+                children: /*#__PURE__*/ jsx(Text.Body, {
+                    colorToken: TextColor.invert,
+                    preline: true,
+                    children: inputHintText
+                })
             }),
-            isShowIcon && value?.isArchived && /*#__PURE__*/ jsxs("div", {
-                className: ArchivedInputValue_module.rightIconContainer,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: ArchivedInputValue_module.textContainer,
                 children: [
-                    /*#__PURE__*/ jsx(Text.Body, {
-                        className: ArchivedInputValue_module.rightIconText,
-                        children: value.label
-                    }),
-                    /*#__PURE__*/ jsx("div", {
+                    input,
+                    isShowIcon && /*#__PURE__*/ jsx("div", {
                         className: cn(ArchivedInputValue_module.rightIcon, disabled && ArchivedInputValue_module.rightIconDisabled),
+                        "data-test-id": testId ? `${testId}-archived-icon` : void 0,
                         children: /*#__PURE__*/ jsx(Archived16Icon, {})
                     })
                 ]
             })
-        ]
+        })
     });
 };
 export { ArchivedInputValue };