@moysklad/uikit 28.1.0 → 31.20.0

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

@@ -22,9 +22,7 @@
 }
 
 .container-aL2rxg .combobox-b5S72r: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);
 }
 
 .container-aL2rxg .combobox-b5S72r {
@@ -40,9 +38,7 @@
 }
 
 .container-aL2rxg .combobox-b5S72r[data-searchable="true"]:focus-within {
-  --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);
   --action-button-color: var(--elements-hover, #091739);
 }
 
@@ -99,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 {
@@ -116,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;
@@ -134,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/DropDownWithColors/DropDownWithColors.d.ts

@@ -13,5 +13,6 @@ export interface DropDownWithColorsProps {
     onSetCursor?: (cursor: number) => void;
     searchText?: string;
     value?: ISelectOption;
+    skipSelectOnTab?: boolean;
 }
 export declare const DropDownWithColors: (props: DropDownWithColorsProps) => ReactElement;

package/dist/components/Select/DropDownWithColors/DropDownWithColors.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OptionsList } from "../OptionsList/OptionsList.js";
 import DropDownWithColors_module from "./DropDownWithColors.module.js";
-const DropDownWithColors = ({ items, listboxId, cursor, onSelect, testId, isLoading, loadingComponent, notFound, isEllipsis = false, onSetCursor, searchText, value })=>{
+const DropDownWithColors = ({ items, listboxId, cursor, onSelect, testId, isLoading, loadingComponent, notFound, isEllipsis = false, onSetCursor, searchText, value, skipSelectOnTab })=>{
     if (isLoading) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             " ",
@@ -21,6 +21,7 @@ const DropDownWithColors = ({ items, listboxId, cursor, onSelect, testId, isLoad
                 onSetCursor: onSetCursor,
                 searchText: searchText,
                 isOptionEllipsis: isEllipsis,
+                skipSelectOnTab: skipSelectOnTab,
                 renderOption: ({ color }, highlightedText)=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx("div", {

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

@@ -0,0 +1,3 @@
+export declare const DropdownActionsContainer: import("react").ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/DropdownActionsContainer/DropdownActionsContainer.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DropdownDivider } from "../../Dropdown/Dropdown.js";
+import DropdownActionsContainer_module from "./DropdownActionsContainer.module.js";
+const DropdownActionsContainer = /*#__PURE__*/ forwardRef(({ children }, ref)=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: DropdownActionsContainer_module.dropdownActionsContainer,
+        children: [
+            /*#__PURE__*/ jsx(DropdownDivider, {}),
+            /*#__PURE__*/ jsx("div", {
+                className: DropdownActionsContainer_module.dropdownActions,
+                children: children
+            })
+        ]
+    }));
+DropdownActionsContainer.displayName = 'DropdownActionsContainer';
+export { DropdownActionsContainer };

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

@@ -0,0 +1,6 @@
+import "./DropdownActionsContainer_module.css";
+const DropdownActionsContainer_module = {
+    dropdownActionsContainer: "dropdownActionsContainer-AWmfpE",
+    dropdownActions: "dropdownActions-JUeYRM"
+};
+export default DropdownActionsContainer_module;

package/dist/components/Select/DropdownActionsContainer/DropdownActionsContainer_module.css

@@ -0,0 +1,12 @@
+.dropdownActionsContainer-AWmfpE {
+  background-color: var(--bgd-white, #fff);
+  position: sticky;
+  bottom: 0;
+}
+
+.dropdownActions-JUeYRM {
+  justify-content: center;
+  align-items: center;
+  padding: 0 16px 8px;
+}
+

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

@@ -19,7 +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, }: 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 })=>{
+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, ()=>{
@@ -29,36 +31,51 @@ const Options = ({ listboxId, items, value, searchText, optionClassName, isOptio
         onSetCursor
     });
     useEffect(()=>{
-        if (!enterPressed || searchable) return;
+        const skipOnMissingCursor = skipSelectOnEnterWithoutCursor && null === cursor;
+        if (!enterPressed || searchable || skipOnMissingCursor) return;
         onSelect(items[cursor ?? 0]);
     }, [
         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,8 +1,27 @@
+.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;
 }
 
+.optionsList-nnTF3n:focus {
+  outline: none;
+}
+
 .scrollable-BpMvGu {
   flex: 1;
   overflow-y: auto;

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

@@ -1,6 +1,5 @@
-import { type CSSProperties, type ForwardedRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+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,12 +21,17 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     dropdownStyle?: CSSProperties;
     dropdownZIndex?: number;
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputHintText?: string;
     variant?: SelectVariantsEnum;
     disableShortClear?: boolean;
     isSearchDebounced?: boolean;
     searchDebounceTimeout?: number;
     isLoading?: boolean;
     loadingText?: string;
+    skipSelectOnTab?: boolean;
+    shortVariantTextClassName?: string;
+    shortVariantContainerClassName?: string;
+    shortVariantIsVisibleFocusOutline?: boolean;
     onSearch?: (searchText: string) => void;
     renderDropdownContent?: (options: IRenderDropdownContentOptions<T>) => ReactNode;
     renderOption?: (option: ISelectOption<T>, highlightedText?: ReactNode) => ReactNode;
@@ -38,14 +42,16 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     renderInput?: (options: IRenderInputOptions) => ReactNode;
     isDisableEnterSelect?: boolean;
     isBlurNecessarily?: boolean;
-    isArchived?: boolean;
+    showArchived?: boolean;
     onAddButtonClick?: () => void;
     addButtonText?: string;
-    skipSelectOnTab?: boolean;
     scrollableOptionsList?: boolean;
     isFocusableOptionsList?: boolean;
     closeOnSelect?: boolean;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
     renderDropdownActions?: (options: IRenderActionsOptions) => ReactNode;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }
 export interface SelectRef<T> {
     closeDropdown: () => void;
@@ -62,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

@@ -1,13 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../common/css/cn.js";
-import { Dropdown, DropdownDivider } from "../Dropdown/Dropdown.js";
+import { Dropdown } from "../Dropdown/Dropdown.js";
 import { getListboxTriggerA11y } from "../Dropdown/utils/getListboxTriggerA11y.js";
+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";
 import { EmptyState } from "./EmptyState/EmptyState.js";
 import { Loading } from "./Loading/Loading.js";
@@ -16,15 +16,16 @@ import { OptionsList } from "./OptionsList/OptionsList.js";
 import { ShortVariant } from "./ShortVariant/ShortVariant.js";
 import { DropdownActionButton } from "./DropdownActionButton/index.js";
 import { KEYBOARD_KEYS } from "./types.js";
+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 = 'Загрузка...', onSearch, renderActions, renderDropdownContent, renderOption, onChange, onClear, renderValue, onDropdownToggle, renderInput, isDisableEnterSelect = false, isBlurNecessarily = false, isArchived = false, onAddButtonClick, addButtonText = '', skipSelectOnTab, scrollableOptionsList, isFocusableOptionsList, closeOnSelect = true, renderDropdownActions }, 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 [dropdownActionsContainerHeight, setDropdownActionsContainerHeight] = useState(0);
-    const showClearButton = clearable && (searchText.length > 0 || value);
+    const showClearButton = clearable && !disabled && (searchText.length > 0 || value);
     const valueLabel = value?.label ?? '';
     const filteredOptions = getFilteredOptions({
         searchText,
@@ -32,10 +33,10 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         newOptions,
         valueLabel
     });
-    const handleDebouncedSearch = useCallback(lodash_debounce((text)=>onSearch?.(text), searchDebounceTimeout), [
-        onSearch,
-        searchDebounceTimeout
+    const handleSearchCb = useCallback((text)=>onSearch?.(text), [
+        onSearch
     ]);
+    const handleDebouncedSearch = useDebounceCallback(handleSearchCb, searchDebounceTimeout);
     const restoreInputFromValue = useCallback(()=>{
         handleDebouncedSearch.cancel?.();
         setSearchText(valueLabel);
@@ -85,13 +86,9 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         cursor,
         hasActiveOption: open && null !== cursor && Boolean(filteredOptions[cursor])
     });
+    const { scrollPaddings, dropdownActionsContainerRefCb } = useDropdownPadding();
     const getDropdownStyle = ()=>{
         const triggerWidth = triggerRef.current?.getBoundingClientRect()?.width ?? 0;
-        const scrollPadding = 4;
-        const scrollPaddings = {
-            scrollPaddingTop: scrollPadding,
-            scrollPaddingBottom: dropdownActionsContainerHeight + scrollPadding
-        };
         if (renderDropdownContent) return {
             minWidth: triggerWidth,
             ...scrollPaddings
@@ -131,6 +128,7 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         if (closeOnSelect) closeDropdown(SELECT_DROPDOWN_CLOSE_REASON.SELECT);
     }, [
         value,
+        closeOnSelect,
         onChange,
         closeDropdown
     ]);
@@ -155,16 +153,20 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
         if (e.key === KEYBOARD_KEYS.ESCAPE) restoreInputFromValue();
         inputProps?.onKeyUp?.(e);
     };
-    const dropdownActionsContainerRefCb = useCallback((node)=>{
-        setDropdownActionsContainerHeight(node?.clientHeight ?? 0);
-    }, []);
+    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, ()=>({
@@ -233,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,
@@ -277,7 +283,13 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
                 style: style,
                 disableClear: disableShortClear,
                 testId: testId,
-                hintZIndex: hintZIndex
+                hintZIndex: hintZIndex,
+                textClassName: shortVariantTextClassName,
+                shortVariantContainerClassName: shortVariantContainerClassName,
+                isVisibleFocusOutline: shortVariantIsVisibleFocusOutline,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown
             }),
             renderInput && renderInput({
                 triggerRef,
@@ -293,8 +305,8 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
             }),
             /*#__PURE__*/ jsxs(Dropdown, {
                 ...dropdownAriaProps,
-                className: dropdownClassName,
-                open: open,
+                className: cn(Select_module.dropdown, dropdownClassName),
+                open: disabled ? false : open,
                 triggerRef: triggerRef,
                 onClose: closeDropdown,
                 testId: testId ? `${testId}-dropdown` : '',
@@ -326,32 +338,26 @@ function SelectInner({ options, value, label, required, testId, disabled, placeh
                         value,
                         searchHandler: handleSearch,
                         inputKeyUpHandler: handleInputKeyUp,
-                        clearHandler: handleClear
+                        clearHandler: handleClear,
+                        isDropdownOpen: open
                     }) : /*#__PURE__*/ jsx(Fragment, {
                         children: isLoading ? loadingComponent : optionsList
                     }),
                     !isLoading && !renderDropdownContent && 0 === filteredOptions.length && /*#__PURE__*/ jsx(EmptyState, {
                         text: emptyText
                     }),
-                    showDropdownActions && /*#__PURE__*/ jsxs("div", {
+                    showDropdownActions && /*#__PURE__*/ jsxs(DropdownActionsContainer, {
                         ref: dropdownActionsContainerRefCb,
-                        className: Select_module.dropdownActionsContainer,
                         children: [
-                            /*#__PURE__*/ jsx(DropdownDivider, {}),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: Select_module.dropdownActions,
+                            onAddButtonClick && /*#__PURE__*/ jsxs(DropdownActionButton, {
+                                onClick: onAddButtonClick,
                                 children: [
-                                    onAddButtonClick && /*#__PURE__*/ jsxs(DropdownActionButton, {
-                                        onClick: onAddButtonClick,
-                                        children: [
-                                            /*#__PURE__*/ jsx(Add16Icon, {}),
-                                            addButtonText
-                                        ]
-                                    }),
-                                    renderDropdownActions?.({
-                                        closeDropdown
-                                    })
+                                    /*#__PURE__*/ jsx(Add16Icon, {}),
+                                    addButtonText
                                 ]
+                            }),
+                            renderDropdownActions?.({
+                                closeDropdown
                             })
                         ]
                     })
@@ -367,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.js

@@ -3,7 +3,6 @@ const Select_module = {
     container: "container-C2p99t",
     clearAction: "clearAction-sc7Lsp",
     actions: "actions-cQr4nG",
-    dropdownActionsContainer: "dropdownActionsContainer-NsKpjZ",
-    dropdownActions: "dropdownActions-O89Lx9"
+    dropdown: "dropdown-_J2KVk"
 };
 export default Select_module;

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,21 +14,13 @@
   padding-left: 0;
   padding-right: 12px;
   display: none;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
 }
 
-.dropdownActionsContainer-NsKpjZ {
-  background-color: var(--bgd-white);
-  position: sticky;
-  bottom: 0;
-}
-
-.dropdownActions-O89Lx9 {
-  justify-content: center;
-  align-items: center;
-  padding: 0 16px 8px;
-}
-
-.dropdownActions-O89Lx9 > button {
-  width: 100%;
+.dropdown-_J2KVk:focus {
+  outline: none;
 }
 

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

@@ -1,9 +1,13 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type KeyboardEventHandler } from 'react';
 import type { IHasTestId } from '../../../common/types';
 import type { IBaseSelectProps } from '../types';
 interface Props extends IBaseSelectProps, HTMLAttributes<HTMLDivElement>, IHasTestId {
     onClear: () => void;
     disableClear?: boolean;
+    textClassName?: string;
+    shortVariantContainerClassName?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    isVisibleFocusOutline?: boolean;
 }
 export declare const ShortVariant: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,19 +1,19 @@
 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";
-const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, label, helperText, info, error, required, className, disabled, disableClear, hintZIndex = 100, renderValue, onClear, tabIndex, ...otherProps }, ref)=>{
+const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, label, helperText, info, error, required, className, disabled, textClassName, disableClear, hintZIndex = 100, shortVariantContainerClassName, renderValue, onClear, tabIndex, onKeyDown, isVisibleFocusOutline = true, ...otherProps }, ref)=>{
     const handleClear = (e)=>{
         e.stopPropagation();
         onClear();
     };
     return /*#__PURE__*/ jsxs("div", {
-        className: ShortVariant_module.outerContainer,
+        className: cn(ShortVariant_module.outerContainer, shortVariantContainerClassName),
         children: [
             /*#__PURE__*/ jsx(Label, {
                 label: label,
@@ -24,9 +24,10 @@ const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, lab
                 role: "combobox",
                 tabIndex: disabled ? -1 : tabIndex ?? 0,
                 "aria-disabled": disabled,
-                className: cn(ShortVariant_module.container, className),
+                className: cn(ShortVariant_module.container, !isVisibleFocusOutline && ShortVariant_module.focusOutlineNone, className),
                 ref: ref,
                 "data-test-id": testId,
+                onKeyDown: onKeyDown,
                 ...otherProps,
                 children: [
                     renderValue ? renderValue({
@@ -39,7 +40,7 @@ const ShortVariant = /*#__PURE__*/ forwardRef(({ testId, value, placeholder, lab
                         zIndex: hintZIndex,
                         hintText: value ? value.label : placeholder,
                         children: (ref)=>/*#__PURE__*/ jsx(Text.Body, {
-                                className: ShortVariant_module.value,
+                                className: cn(ShortVariant_module.value, textClassName),
                                 ref: ref,
                                 children: value ? value.label : placeholder
                             })

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

@@ -4,6 +4,7 @@ const ShortVariant_module = {
     container: "container-sh9fLu",
     deleteButton: "deleteButton-vXaACU",
     downIcon: "downIcon-XaLwIU",
+    focusOutlineNone: "focusOutlineNone-j96au6",
     value: "value-W7MA4Q"
 };
 export default ShortVariant_module;