@moysklad/uikit 30.4.0 → 31.20.0

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

@@ -1,7 +1,6 @@
 import "./ArchivedInputValue_module.css";
 const ArchivedInputValue_module = {
-    rightIconContainer: "rightIconContainer-gnRvlS",
-    rightIconText: "rightIconText-fpxSCr",
+    textContainer: "textContainer-BEuqYt",
     rightIcon: "rightIcon-PUbQMv",
     rightIconDisabled: "rightIconDisabled-chCxrA"
 };

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue_module.css

@@ -1,21 +1,14 @@
-.rightIconContainer-gnRvlS {
-  pointer-events: none;
+.textContainer-BEuqYt {
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  height: 100%;
+  min-width: 0;
   display: flex;
-  position: absolute;
-}
-
-.rightIconText-fpxSCr {
-  opacity: 0;
-  text-overflow: ellipsis;
-  height: 0;
-  margin-right: 8px;
-  overflow: hidden;
 }
 
 .rightIcon-PUbQMv {
   color: var(--elements-disable, #d1d6df);
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -5,11 +5,13 @@ interface Props extends IBaseSelectProps, HTMLAttributes<HTMLDivElement>, IHasTe
     id?: HTMLInputElement['id'];
     searchText?: string;
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputHintText?: string;
     onToggle?: () => void;
     onSearch: (searchText: string) => void;
     isDropdownOpen: boolean;
     actions?: ReactNode;
-    isArchived?: boolean;
+    showArchived?: boolean;
+    isFocus?: boolean;
     triggerAriaProps?: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-activedescendant'>;
 }
 export declare const Combobox: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/Combobox/Combobox.js

@@ -1,18 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { cn } from "../../../common/css/cn.js";
+import { FieldRow } from "../../_shared/FieldRow/FieldRow.js";
+import { Info } from "../../_shared/Info/Info.js";
 import { Text, TextColor } from "../../Text/Text.js";
 import { useId } from "../../../hooks/useId/index.js";
 import { Down12Icon } from "../../../icon/index.js";
-import { FieldRow } from "../../FieldRow/FieldRow.js";
-import { Info } from "../../Info/Info.js";
+import { checkIsArchivedValue } from "../../../utils/checkIsArchivedValue.js";
 import { Label } from "../../Label/Label.js";
 import { ActionButton } from "../ActionButton/ActionButton.js";
+import { ArchivedInputValue } from "../ArchivedInputValue/ArchivedInputValue.js";
 import Combobox_module from "./Combobox.module.js";
-const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabled, placeholder, searchable, error, helperText, info, helpComponent, actions, searchText, fullWidth, inputProps, triggerAriaProps, style, value, onSearch, onToggle, onMouseEnter, onMouseLeave, renderValue, isDropdownOpen, isArchived, ...otherProps }, ref)=>{
+const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabled, placeholder, searchable, error, helperText, info, helpComponent, actions, searchText, fullWidth, inputProps, inputHintText, triggerAriaProps, style, value, onSearch, onToggle, onMouseEnter, onMouseLeave, renderValue, isDropdownOpen, showArchived = false, isFocus = false, ...otherProps }, ref)=>{
     const [hovered, setHovered] = useState(false);
     const inputRef = useRef(null);
     const inputId = useId(id);
+    const isArchived = showArchived && checkIsArchivedValue(value);
     useEffect(()=>{
         if (inputRef.current && isDropdownOpen) inputRef.current.focus();
     }, [
@@ -28,7 +31,7 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
         id: inputId,
         ref: inputRef,
         type: "text",
-        className: cn(Combobox_module.search, isArchived && Combobox_module.archivedTextColor),
+        className: cn(Combobox_module.search, isArchived && Combobox_module.archivedTextColor, isArchived && Combobox_module.archivedFitContent),
         value: searchText,
         onChange: (e)=>onSearch(e.target.value),
         disabled: disabled,
@@ -38,19 +41,27 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
         ...inputProps
     });
     const inputComponentNotEdit = /*#__PURE__*/ jsx(Text.Body, {
-        className: cn(Combobox_module.selectedValue, isArchived && !disabled && Combobox_module.archivedTextColor, isArchived && disabled && Combobox_module.archivedDisabledTextColor),
+        className: cn(Combobox_module.selectedValue, isArchived && !disabled && Combobox_module.archivedTextColor, disabled && Combobox_module.disabledTextColor, isArchived && !isFocus && Combobox_module.archivedFitContent),
         children: searchText
     });
     const renderValueComponent = ()=>{
+        const input = searchable ? inputComponent : inputComponentNotEdit;
+        if (showArchived) return /*#__PURE__*/ jsx(ArchivedInputValue, {
+            input: input,
+            isShowIcon: isArchived && !isFocus,
+            disabled: disabled,
+            inputHintText: inputHintText,
+            testId: testId
+        });
         if (renderValue) return renderValue({
-            input: searchable ? inputComponent : inputComponentNotEdit,
+            input,
             placeholder: placeholderComponent,
             value,
             searchable,
             searchText,
             disabled
         });
-        return searchable ? inputComponent : inputComponentNotEdit;
+        return input;
     };
     return /*#__PURE__*/ jsxs("div", {
         className: cn(Combobox_module.container, fullWidth && Combobox_module.fullWidth),
@@ -84,7 +95,7 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
                     },
                     style: {
                         ...style,
-                        width: !fullWidth && style?.width
+                        width: fullWidth ? void 0 : style?.width
                     },
                     "data-searchable": searchable,
                     "data-test-id": testId ? `${testId}-search-container` : '',

package/dist/components/Select/Combobox/Combobox.module.js

@@ -8,9 +8,10 @@ const Combobox_module = {
     innerCombobox: "innerCombobox-ojzOuH",
     placeholder: "placeholder-_WVTl5",
     selectedValue: "selectedValue-oFS_XU",
-    archivedDisabledTextColor: "archivedDisabledTextColor-qThU95",
-    arrowAction: "arrowAction-lxn4Ah",
     search: "search-_t7sYi",
-    archivedTextColor: "archivedTextColor-TFgYY_"
+    archivedFitContent: "archivedFitContent-IhCvaO",
+    arrowAction: "arrowAction-lxn4Ah",
+    archivedTextColor: "archivedTextColor-TFgYY_",
+    disabledTextColor: "disabledTextColor-TmImIF"
 };
 export default Combobox_module;

package/dist/components/Select/Combobox/Combobox_module.css

@@ -95,13 +95,18 @@
   overflow: hidden;
 }
 
-.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .archivedDisabledTextColor-qThU95 {
-  color: var(--text-secondary, #5f6d79);
-  padding-right: 24px;
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .search-_t7sYi.archivedFitContent-IhCvaO {
+  field-sizing: content;
+  width: auto;
+  min-width: 0;
 }
 
-.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .archivedDisabledTextColor-qThU95:hover, .container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .archivedDisabledTextColor-qThU95:focus {
-  color: var(--text-secondary, #5f6d79);
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .selectedValue-oFS_XU.archivedFitContent-IhCvaO {
+  min-width: 0;
+}
+
+.container-aL2rxg .combobox-b5S72r:has([data-select-clear-action]):hover .innerCombobox-ojzOuH, .container-aL2rxg .combobox-b5S72r:has([data-select-clear-action]):focus-within .innerCombobox-ojzOuH {
+  width: calc(100% - 25px);
 }
 
 .container-aL2rxg .combobox-b5S72r .arrowAction-lxn4Ah {
@@ -112,6 +117,7 @@
 .container-aL2rxg .combobox-b5S72r .search-_t7sYi {
   z-index: 1;
   width: 100%;
+  min-width: 0;
   color: var(--text-primary, #091739);
   text-overflow: ellipsis;
   background-color: #0000;
@@ -130,11 +136,11 @@
   color: var(--text-secondary, #5f6d79);
 }
 
-.container-aL2rxg .combobox-b5S72r .archivedTextColor-TFgYY_ {
-  padding-right: 24px;
-}
-
 .container-aL2rxg .combobox-b5S72r .archivedTextColor-TFgYY_:not(:disabled, :focus) {
   color: var(--text-tertiary, #9fa7af);
 }
 
+.disabledTextColor-TmImIF, .disabledTextColor-TmImIF:hover, .disabledTextColor-TmImIF:focus {
+  color: var(--text-secondary, #5f6d79);
+}
+

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

@@ -19,8 +19,10 @@ interface Props<T> extends IHasTestId {
     className?: string;
     scrollable?: boolean;
     isFocusable?: boolean;
+    title?: string;
     onPressEsc?: () => void;
+    onOptionClick?: () => void;
     skipSelectOnEnterWithoutCursor?: boolean;
 }
-export declare const OptionsList: <T>({ listboxId, items, value, searchText, optionClassName, isOptionEllipsis, testId, cursor, onSetCursor, renderOption, skipSelectOnTab, onSelect, onMouseDown, searchable, hintZIndex, className, scrollable, isFocusable, onPressEsc, skipSelectOnEnterWithoutCursor, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsList: <T>({ listboxId, items, value, searchText, optionClassName, isOptionEllipsis, testId, cursor, onSetCursor, renderOption, skipSelectOnTab, onSelect, onMouseDown, searchable, hintZIndex, className, scrollable, isFocusable, title, onPressEsc, onOptionClick, skipSelectOnEnterWithoutCursor, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select/OptionsList/OptionsList.js

@@ -1,13 +1,15 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import { getOptionalTestId } from "../../../common/index.js";
 import { cn } from "../../../common/css/index.js";
+import { Text, TextColor } from "../../Text/Text.js";
 import { useId } from "../../../hooks/useId/index.js";
 import { genericMemo } from "../../../utils/genericMemo.js";
 import { Option } from "../Option/Option.js";
 import { KEYBOARD_KEYS } from "../types.js";
 import { useArrowDownListener, useArrowUpListener, useKeyPress } from "./hooks.js";
 import OptionsList_module from "./OptionsList.module.js";
-const Options = ({ listboxId, items, value, searchText, optionClassName, isOptionEllipsis, testId, cursor, onSetCursor, renderOption, skipSelectOnTab, onSelect, onMouseDown, searchable, hintZIndex, className, scrollable, isFocusable = true, onPressEsc, skipSelectOnEnterWithoutCursor })=>{
+const Options = ({ listboxId, items, value, searchText, optionClassName, isOptionEllipsis, testId, cursor, onSetCursor, renderOption, skipSelectOnTab, onSelect, onMouseDown, searchable, hintZIndex, className, scrollable, isFocusable = true, title, onPressEsc, onOptionClick, skipSelectOnEnterWithoutCursor })=>{
     const resolvedListboxId = useId(listboxId);
     const listRef = useRef(null);
     useKeyPress(KEYBOARD_KEYS.TAB, ()=>{
@@ -35,31 +37,45 @@ const Options = ({ listboxId, items, value, searchText, optionClassName, isOptio
     }, [
         enterPressed
     ]);
-    return /*#__PURE__*/ jsx("ul", {
+    return /*#__PURE__*/ jsxs("ul", {
         className: cn(OptionsList_module.optionsList, className, scrollable && OptionsList_module.scrollable),
         id: resolvedListboxId,
         role: "listbox",
         "data-test-id": testId ? `${testId}-options-list` : '',
         ref: listRef,
         tabIndex: isFocusable ? 0 : -1,
-        children: items.map((option, idx)=>{
-            const isSelected = value ? value.value === option.value : false;
-            return /*#__PURE__*/ jsx(Option, {
-                id: `${resolvedListboxId}-option-${idx}`,
-                isSelected: isSelected,
-                onClick: onSelect,
-                onMouseDown: onMouseDown,
-                searchText: searchText,
-                isFocused: idx === cursor,
-                className: optionClassName,
-                isEllipsis: isOptionEllipsis,
-                testId: testId ? `${testId}-option-${idx}` : '',
-                showHighlight: value ? value.label !== searchText : true,
-                option: option,
-                renderOption: renderOption,
-                hintZIndex: hintZIndex
-            }, option.value);
-        })
+        children: [
+            !!title && /*#__PURE__*/ jsx("div", {
+                className: OptionsList_module.titleWrapper,
+                children: /*#__PURE__*/ jsx(Text.Caption, {
+                    colorToken: TextColor.secondary,
+                    className: OptionsList_module.title,
+                    "data-test-id": getOptionalTestId(testId, 'options-list-title'),
+                    children: title
+                })
+            }),
+            items.map((option, idx)=>{
+                const isSelected = value ? value.value === option.value : false;
+                return /*#__PURE__*/ jsx(Option, {
+                    id: `${resolvedListboxId}-option-${idx}`,
+                    isSelected: isSelected,
+                    onClick: (option)=>{
+                        onSelect(option);
+                        onOptionClick?.();
+                    },
+                    onMouseDown: onMouseDown,
+                    searchText: searchText,
+                    isFocused: idx === cursor,
+                    className: optionClassName,
+                    isEllipsis: isOptionEllipsis,
+                    testId: testId ? `${testId}-option-${idx}` : '',
+                    showHighlight: value ? value.label !== searchText : true,
+                    option: option,
+                    renderOption: renderOption,
+                    hintZIndex: hintZIndex
+                }, option.value);
+            })
+        ]
     });
 };
 const OptionsList = genericMemo(Options);

package/dist/components/Select/OptionsList/OptionsList.module.js

@@ -1,5 +1,7 @@
 import "./OptionsList_module.css";
 const OptionsList_module = {
+    titleWrapper: "titleWrapper-kzjp2E",
+    title: "title-i2hZyT",
     optionsList: "optionsList-nnTF3n",
     scrollable: "scrollable-BpMvGu"
 };

package/dist/components/Select/OptionsList/OptionsList_module.css

@@ -1,3 +1,18 @@
+.titleWrapper-kzjp2E {
+  width: 100%;
+  display: flex;
+}
+
+.title-i2hZyT {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+  width: 10px;
+  padding-top: 4px;
+  padding-left: 12px;
+  overflow: hidden;
+}
+
 .optionsList-nnTF3n {
   margin: 0;
   padding: 4px;

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

@@ -1,6 +1,5 @@
 import { type CSSProperties, type FocusEventHandler, type ForwardedRef, type HTMLAttributes, type KeyboardEventHandler, type ReactElement, type ReactNode } from 'react';
 import { ActionButton } from './ActionButton/ActionButton';
-import { ArchivedInputValue } from './ArchivedInputValue/ArchivedInputValue';
 import { DropDownWithColors } from './DropDownWithColors/DropDownWithColors';
 import { Option } from './Option/Option';
 import { OptionsList } from './OptionsList/OptionsList';
@@ -22,6 +21,7 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     dropdownStyle?: CSSProperties;
     dropdownZIndex?: number;
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputHintText?: string;
     variant?: SelectVariantsEnum;
     disableShortClear?: boolean;
     isSearchDebounced?: boolean;
@@ -42,7 +42,7 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     renderInput?: (options: IRenderInputOptions) => ReactNode;
     isDisableEnterSelect?: boolean;
     isBlurNecessarily?: boolean;
-    isArchived?: boolean;
+    showArchived?: boolean;
     onAddButtonClick?: () => void;
     addButtonText?: string;
     scrollableOptionsList?: boolean;
@@ -68,7 +68,6 @@ interface ISelectComponent {
     Option: typeof Option;
     DropdownActionButton: typeof DropdownActionButton;
     DropDownWithColors: typeof DropDownWithColors;
-    ArchivedInputValue: typeof ArchivedInputValue;
     displayName?: string;
 }
 declare const SelectComponent: ISelectComponent;

package/dist/components/Select/Select.js

@@ -6,7 +6,6 @@ import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.j
 import { useDebounceCallback } from "../../hooks/useDebounceCallback/useDebounceCallback.js";
 import { Add16Icon, RemoveClose12Icon } from "../../icon/index.js";
 import { ActionButton } from "./ActionButton/ActionButton.js";
-import { ArchivedInputValue } from "./ArchivedInputValue/ArchivedInputValue.js";
 import { Combobox } from "./Combobox/Combobox.js";
 import { DropdownActionsContainer } from "./DropdownActionsContainer/DropdownActionsContainer.js";
 import { DropDownWithColors } from "./DropDownWithColors/DropDownWithColors.js";
@@ -21,11 +20,12 @@ import { useDropdownPadding } from "./useDropdownPadding.js";
 import { SELECT_DROPDOWN_CLOSE_REASON, useSelectDropdown } from "./useSelectDropdown.js";
 import { getFilteredOptions } from "./utils.js";
 import Select_module from "./Select.module.js";
-function SelectInner({ options, value, label, required, testId, disabled, placeholder, searchable = true, error, helperText = '', info = '', helpComponent, clearable = true, fullWidth, emptyText, className, dropdownClassName, dropdownOffsetX, dropdownOffsetY, isDropdownInnerScroll, optionClassName, isOptionEllipsis = true, style, dropdownStyle, dropdownZIndex, inputProps, variant = 'default', disableShortClear = false, hintZIndex = 100, isSearchDebounced = true, searchDebounceTimeout = 300, isLoading = false, loadingText = 'Загрузка...', skipSelectOnTab = false, shortVariantTextClassName, shortVariantContainerClassName, shortVariantIsVisibleFocusOutline, onSearch, renderActions, renderDropdownContent, renderOption, onChange, onClear, renderValue, onDropdownToggle, renderInput, isDisableEnterSelect = false, isBlurNecessarily = false, isArchived = false, onAddButtonClick, addButtonText = '', scrollableOptionsList, isFocusableOptionsList, closeOnSelect = true, renderDropdownActions, onFocus, onBlur, onKeyDown }, ref) {
+function SelectInner({ options, value, label, required, testId, disabled, placeholder, searchable = true, error, helperText = '', info = '', helpComponent, clearable = true, fullWidth, emptyText, className, dropdownClassName, dropdownOffsetX, dropdownOffsetY, isDropdownInnerScroll, optionClassName, isOptionEllipsis = true, style, dropdownStyle, dropdownZIndex, inputProps, inputHintText, variant = 'default', disableShortClear = false, hintZIndex = 100, isSearchDebounced = true, searchDebounceTimeout = 300, isLoading = false, loadingText = 'Загрузка...', skipSelectOnTab = false, shortVariantTextClassName, shortVariantContainerClassName, shortVariantIsVisibleFocusOutline, onSearch, renderActions, renderDropdownContent, renderOption, onChange, onClear, renderValue, onDropdownToggle, renderInput, isDisableEnterSelect = false, isBlurNecessarily = false, showArchived = false, onAddButtonClick, addButtonText = '', scrollableOptionsList, isFocusableOptionsList, closeOnSelect = true, renderDropdownActions, onFocus, onBlur, onKeyDown }, ref) {
+    const [isFocus, setIsFocus] = useState(false);
     const [cursor, setCursor] = useState(null);
     const [searchText, setSearchText] = useState(value?.label ?? '');
     const [newOptions, setNewOptions] = useState([]);
-    const showClearButton = clearable && (searchText.length > 0 || value);
+    const showClearButton = clearable && !disabled && (searchText.length > 0 || value);
     const valueLabel = value?.label ?? '';
     const filteredOptions = getFilteredOptions({
         searchText,
@@ -153,13 +153,20 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         if (e.key === KEYBOARD_KEYS.ESCAPE) restoreInputFromValue();
         inputProps?.onKeyUp?.(e);
     };
+    const handleInputFocus = useCallback((e)=>{
+        setIsFocus(true);
+        inputProps?.onFocus?.(e);
+    }, [
+        inputProps
+    ]);
     const handleInputBlur = useCallback((e)=>{
+        setIsFocus(false);
         if (isBlurNecessarily) inputProps?.onBlur?.(e);
         if (filteredOptions.length && searchText.length) return;
         if (!isBlurNecessarily) inputProps?.onBlur?.(e);
     }, [
-        searchText,
-        filteredOptions,
+        filteredOptions.length,
+        searchText.length,
         inputProps
     ]);
     useImperativeHandle(ref, ()=>({
@@ -228,19 +235,23 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
                     onClick: disabled ? void 0 : openDropdown,
                     triggerAriaProps: listboxTriggerAriaProps,
                     onToggle: disabled ? void 0 : toggleDropdown,
-                    isArchived: isArchived,
+                    showArchived: showArchived,
+                    isFocus: isFocus,
                     inputProps: {
                         ...listboxTriggerAriaProps,
                         ...inputProps,
                         onKeyUp: handleInputKeyUp,
+                        onFocus: handleInputFocus,
                         onBlur: handleInputBlur
                     },
+                    inputHintText: inputHintText,
                     style: style,
                     actions: /*#__PURE__*/ jsxs("div", {
                         className: cn(Select_module.actions, disabled && Select_module.disabled),
                         children: [
                             showClearButton && /*#__PURE__*/ jsx(ActionButton, {
                                 "data-test-id": testId ? `${testId}-clear-button` : '',
+                                "data-select-clear-action": true,
                                 onClick: handleClear,
                                 className: Select_module.clearAction,
                                 disabled: disabled,
@@ -362,6 +373,5 @@ SelectComponent.OptionsList = OptionsList;
 SelectComponent.Option = Option;
 SelectComponent.DropdownActionButton = DropdownActionButton;
 SelectComponent.DropDownWithColors = DropDownWithColors;
-SelectComponent.ArchivedInputValue = ArchivedInputValue;
 SelectComponent.displayName = 'Select';
 export { SelectComponent as Select };

package/dist/components/Select/Select_module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   display: flex;
+  position: relative;
 }
 
 .container-C2p99t .actions-cQr4nG .clearAction-sc7Lsp {
@@ -13,6 +14,10 @@
   padding-left: 0;
   padding-right: 12px;
   display: none;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
 }
 
 .dropdown-_J2KVk:focus {

package/dist/components/Select/ShortVariant/ShortVariant.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../../common/css/cn.js";
+import { Info } from "../../_shared/Info/Info.js";
 import { Text } from "../../Text/Text.js";
 import { Down12Icon, RemoveClose12Icon } from "../../../icon/index.js";
-import { Info } from "../../Info/Info.js";
 import { Label } from "../../Label/Label.js";
 import { OverflowingHint } from "../OverflowingHint/OverflowingHint.js";
 import ShortVariant_module from "./ShortVariant.module.js";

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,28 @@
+import { type ButtonHTMLAttributes } from 'react';
+import type { ValueOf } from '../../common/types';
+import { type ISelectOption } from '../Select/Select';
+import { StatusColor, type StatusColorType } from './utils/StatusBadgeColor';
+export declare const StatusBadgeSize: {
+    readonly Comfortable: "comfortable";
+    readonly Compact: "compact";
+};
+export type StatusBadgeSizeType = ValueOf<typeof StatusBadgeSize>;
+export interface StatusBadgeOption<T = unknown> extends Pick<ISelectOption<T>, 'label' | 'value' | 'dto'> {
+    color: StatusColorType;
+}
+export interface StatusBadgeProps<T = unknown> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'value'> {
+    title: string;
+    value?: StatusBadgeOption<T>;
+    testId?: string;
+    /**
+     * @default "comfortable"
+     */
+    size?: StatusBadgeSizeType;
+    availableStatuses: StatusBadgeOption<T>[];
+    dropdownZIndex?: number;
+    dropdownButtonText?: string;
+    onSelect?: (option: StatusBadgeOption<T>) => void;
+    onDropdownButtonClick?: () => void;
+}
+export declare const StatusBadge: <T>({ title, value, disabled, className, testId, size: sizeProp, availableStatuses, dropdownZIndex, dropdownButtonText, onSelect, onDropdownButtonClick, ...props }: StatusBadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { StatusColor, type StatusColorType };

package/dist/components/StatusBadge/StatusBadge.js

@@ -0,0 +1,167 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../common/css/index.js";
+import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { useOverflowHint } from "../../hooks/useOverflowHint/index.js";
+import { Down12Icon, Settings16Icon } from "../../icon/index.js";
+import { Button } from "../Button/Button.js";
+import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
+import { Hint } from "../Hint/Hint.js";
+import { Select } from "../Select/Select.js";
+import { Text, TextVariant } from "../Text/Text.js";
+import { getStatusColor } from "./utils/getStatusBadgeColor.js";
+import { StatusColor } from "./utils/StatusBadgeColor.js";
+import StatusBadge_module from "./StatusBadge.module.js";
+const StatusBadgeSize = {
+    Comfortable: 'comfortable',
+    Compact: 'compact'
+};
+const StatusBadge = ({ title, value, disabled, className, testId, size: sizeProp, availableStatuses, dropdownZIndex, dropdownButtonText = 'Настроить статусы', onSelect, onDropdownButtonClick, ...props })=>{
+    const color = value?.color ?? StatusColor.Empty;
+    const size = sizeProp ?? StatusBadgeSize.Comfortable;
+    const statusDropdown = useDropdown();
+    const titleHint = useOverflowHint({
+        targetText: title
+    });
+    const [cursor, setCursor] = useState(0);
+    const [isHintVisible, setIsHintVisible] = useState(false);
+    const badgeButtonRef = useRef(null);
+    const dropdownButtonRef = useRef(null);
+    const handleKeyDown = (event)=>{
+        props.onKeyDown?.(event);
+        if (statusDropdown.open && [
+            'ArrowUp',
+            'ArrowDown'
+        ].includes(event.key)) event.preventDefault();
+        if (statusDropdown.open && 'Tab' === event.key && !event.shiftKey) {
+            event.preventDefault();
+            dropdownButtonRef.current?.focus();
+        }
+    };
+    const handleClick = (event)=>{
+        props.onClick?.(event);
+        statusDropdown.handleToggle();
+    };
+    useEffect(()=>{
+        if (statusDropdown.open) setIsHintVisible(false);
+    }, [
+        statusDropdown.open
+    ]);
+    const handleSelect = (option)=>{
+        onSelect?.({
+            label: option.label,
+            value: option.value,
+            color: getStatusColor(option.color),
+            dto: option.dto
+        });
+    };
+    const handleDropdownButtonKeyDown = (event)=>{
+        if ('Enter' === event.key) event.stopPropagation();
+        if ('Tab' === event.key) {
+            event.preventDefault();
+            statusDropdown.handleClose();
+            badgeButtonRef.current?.focus();
+        }
+    };
+    const handleDropdownButtonClick = ()=>{
+        statusDropdown.handleClose();
+        badgeButtonRef.current?.focus();
+        onDropdownButtonClick?.();
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                ...props,
+                ...statusDropdown.triggerAriaProps,
+                ref: mergeRefs([
+                    badgeButtonRef,
+                    statusDropdown.triggerRef
+                ]),
+                className: cn(StatusBadge_module.container, StatusBadge_module[color], className, disabled && StatusBadge_module.disabled),
+                tabIndex: disabled ? -1 : 0,
+                "data-test-id": testId,
+                "data-disabled": disabled,
+                onClick: disabled ? void 0 : handleClick,
+                onKeyDown: handleKeyDown,
+                type: "button",
+                children: [
+                    /*#__PURE__*/ jsx(Hint, {
+                        visible: isHintVisible,
+                        onVisibleChange: (visible)=>{
+                            if (!statusDropdown.open) setIsHintVisible(visible);
+                        },
+                        overlay: /*#__PURE__*/ jsx(Text.Body, {
+                            colorToken: "invert",
+                            children: title
+                        }),
+                        trigger: titleHint.needShowHint ? 'hover' : [],
+                        testId: testId,
+                        children: /*#__PURE__*/ jsx(Text, {
+                            ref: titleHint.targetRef,
+                            variant: size === StatusBadgeSize.Comfortable ? TextVariant.body : TextVariant.caption,
+                            colorToken: color === StatusColor.Empty ? 'primary' : 'invert',
+                            className: StatusBadge_module.title,
+                            testId: testId ? `${testId}-title` : void 0,
+                            children: title
+                        })
+                    }),
+                    !disabled && /*#__PURE__*/ jsx(Down12Icon, {
+                        stroke: "var(--status-icon-color)"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Dropdown, {
+                ...statusDropdown.dropdownAriaProps,
+                open: statusDropdown.open,
+                ref: statusDropdown.dropdownRef,
+                onClose: statusDropdown.handleClose,
+                triggerRef: statusDropdown.triggerRef,
+                zIndex: dropdownZIndex,
+                className: StatusBadge_module.dropdown,
+                children: [
+                    /*#__PURE__*/ jsx(Select.OptionsList, {
+                        className: StatusBadge_module.optionsList,
+                        isFocusable: false,
+                        skipSelectOnTab: true,
+                        testId: testId,
+                        cursor: cursor,
+                        onSetCursor: setCursor,
+                        items: availableStatuses,
+                        value: value,
+                        onSelect: handleSelect,
+                        onOptionClick: statusDropdown.handleClose,
+                        renderOption: (option)=>/*#__PURE__*/ jsxs("div", {
+                                className: StatusBadge_module.statusWithText,
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: cn(StatusBadge_module.statusBullet, option.color && StatusBadge_module[option.color])
+                                    }),
+                                    /*#__PURE__*/ jsx(Text.Body, {
+                                        className: StatusBadge_module.optionText,
+                                        children: option.label
+                                    })
+                                ]
+                            })
+                    }),
+                    !!availableStatuses.length && /*#__PURE__*/ jsx("div", {
+                        className: StatusBadge_module.delimitter
+                    }),
+                    /*#__PURE__*/ jsxs(Button, {
+                        testId: testId ? `${testId}-settings-button` : void 0,
+                        ref: dropdownButtonRef,
+                        variant: "frameless",
+                        withHorisontalPadding: true,
+                        type: "button",
+                        onKeyDown: handleDropdownButtonKeyDown,
+                        onClick: handleDropdownButtonClick,
+                        children: [
+                            /*#__PURE__*/ jsx(Settings16Icon, {}),
+                            dropdownButtonText
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { StatusBadge, StatusBadgeSize, StatusColor };