@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/LabelValue/LabelValue.js

@@ -1,22 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { cn } from "../../common/index.js";
 import { mergeRefs } from "../../common/react/mergeRefs.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
-import { Hint } from "../Hint/Hint.js";
-import { Text } from "../Text/Text.js";
-import { useTooltip } from "./hooks/useTooltip.js";
+import { FieldLabel } from "../FieldLabel/FieldLabel.js";
+import { HelpSize } from "../Help/Help.js";
+import { TextColor, TextVariant } from "../Text/Text.js";
 import { OPEN_BUTTONS } from "./consts.js";
-import { HelpButton } from "./HelpButton/index.js";
 import { ValueBlock } from "./ValueBlock/index.js";
 import LabelValue_module from "./LabelValue.module.js";
 const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value, disabled, error, className, required = false, testId, helpPopupContent, valueBlockRef = null, customDropdown, isCustomDropdownOpen = false, customDropdownTrigger, valueBlockContent, dropdownContent, onFocus, onBlur, onValueKeyUp, onDropdownClose, onDropdownOpen, ...props }, forwardedRef)=>{
     const valueBlockInnerRef = useRef(null);
-    const labelTooltip = useTooltip({
-        targetText: label
-    });
     const labelValueDropdown = useDropdown();
-    const [isLabelHintVisible, setIsLabelHintVisible] = useState(false);
+    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
     const isDropdownOpen = customDropdown ? isCustomDropdownOpen : labelValueDropdown.open;
     const openDropdown = ()=>{
         if (!disabled) {
@@ -48,11 +44,6 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
         props.onClick?.(event);
         openDropdown();
     };
-    useEffect(()=>{
-        if (isDropdownOpen) setIsLabelHintVisible(false);
-    }, [
-        isDropdownOpen
-    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
@@ -69,43 +60,18 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
                     /*#__PURE__*/ jsxs("div", {
                         className: LabelValue_module.labelValueBlock,
                         children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: LabelValue_module.labelBlock,
-                                children: [
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: LabelValue_module.textWithRequiredMark,
-                                        children: [
-                                            /*#__PURE__*/ jsx(Hint, {
-                                                visible: isLabelHintVisible,
-                                                onVisibleChange: setIsLabelHintVisible,
-                                                overlay: /*#__PURE__*/ jsx(Text.Body, {
-                                                    testId: testId ? `${testId}-label-hint-text` : void 0,
-                                                    colorToken: "invert",
-                                                    className: LabelValue_module.hintText,
-                                                    children: label
-                                                }),
-                                                trigger: labelTooltip.needShowTooltip ? 'hover' : [],
-                                                overlayClassName: LabelValue_module.hint,
-                                                children: /*#__PURE__*/ jsx(Text.Caption, {
-                                                    ref: labelTooltip.targetRef,
-                                                    className: cn(LabelValue_module.overflowText, LabelValue_module.labelText),
-                                                    testId: testId ? `${testId}-label` : void 0,
-                                                    colorToken: "secondary",
-                                                    children: label
-                                                })
-                                            }),
-                                            required && /*#__PURE__*/ jsx(Text.Caption, {
-                                                testId: testId ? `${testId}-required-mark` : void 0,
-                                                colorToken: "critical",
-                                                children: "*"
-                                            })
-                                        ]
-                                    }),
-                                    !!helpPopupContent && /*#__PURE__*/ jsx(HelpButton, {
-                                        helpPopupContent: helpPopupContent,
-                                        className: LabelValue_module.helpButtonContainer
-                                    })
-                                ]
+                            /*#__PURE__*/ jsx(FieldLabel, {
+                                label: label,
+                                required: required,
+                                testId: testId,
+                                variant: TextVariant.caption,
+                                colorToken: TextColor.secondary,
+                                onOverflowChange: setIsLabelOverflowing,
+                                helpProps: helpPopupContent ? {
+                                    popup: helpPopupContent
+                                } : void 0,
+                                helpButtonClassName: LabelValue_module.helpButtonContainer,
+                                helpSize: HelpSize.S
                             }),
                             /*#__PURE__*/ jsx(ValueBlock, {
                                 ref: mergeRefs([
@@ -118,7 +84,7 @@ const LabelValue = /*#__PURE__*/ forwardRef(({ isEmpty, renderIcon, label, value
                                 disabled: disabled,
                                 error: error,
                                 isEmpty: isEmpty,
-                                needShowLabelTooltip: labelTooltip.needShowTooltip,
+                                needShowLabelTooltip: isLabelOverflowing,
                                 forceHideTooltip: isDropdownOpen,
                                 onBlur: onBlur,
                                 onFocus: onFocus,

package/dist/components/LabelValue/LabelValue.module.js

@@ -9,9 +9,6 @@ const LabelValue_module = {
     helpButtonContainer: "helpButtonContainer-C1lSsU",
     labelValueBlock: "labelValueBlock-pbU3kQ",
     empty: "empty-VyYkn0",
-    labelBlock: "labelBlock-p9nrQ3",
-    textWithRequiredMark: "textWithRequiredMark-j_8oxd",
-    labelText: "labelText-g0yIDb",
     overflowText: "overflowText-NCe0S_",
     hint: "hint-qf0pZB",
     hintText: "hintText-kzd4VM",

package/dist/components/LabelValue/LabelValue_module.css

@@ -48,23 +48,6 @@
   line-height: 20px;
 }
 
-.labelBlock-p9nrQ3 {
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-  display: flex;
-}
-
-.textWithRequiredMark-j_8oxd {
-  align-items: center;
-  display: flex;
-  overflow: hidden;
-}
-
-.labelText-g0yIDb {
-  flex: 1;
-}
-
 .valueBlock-UgP3Nr {
   cursor: pointer;
   justify-content: flex-start;

package/dist/components/LabelValueCheckbox/LabelValueCheckbox.d.ts

@@ -0,0 +1,10 @@
+import { type CheckboxProps } from '../Checkbox/Checkbox';
+import { type SharedLabelValueProps } from '../LabelValue/LabelValue';
+type PickedCheckboxProps = Pick<CheckboxProps, 'checked' | 'defaultChecked' | 'indeterminate' | 'tabIndex' | 'onChange'>;
+type OmitedLabelValueProps = Omit<SharedLabelValueProps, 'dropdownClassName' | 'dropdownStyles' | 'valueBlockContent' | 'onDropdownClose' | 'onChange' | 'error'>;
+export interface LabelValueCheckboxProps extends OmitedLabelValueProps, PickedCheckboxProps {
+    checkboxClassName?: string;
+    checkboxProps?: CheckboxProps;
+}
+export declare const LabelValueCheckbox: ({ checked, defaultChecked, indeterminate, tabIndex, checkboxClassName, checkboxProps, onChange, ...props }: LabelValueCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LabelValueCheckbox/LabelValueCheckbox.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../common/css/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { LabelValue } from "../LabelValue/LabelValue.js";
+import LabelValueCheckbox_module from "./LabelValueCheckbox.module.js";
+const LabelValueCheckbox = ({ checked, defaultChecked, indeterminate, tabIndex, checkboxClassName, checkboxProps, onChange, ...props })=>/*#__PURE__*/ jsx(LabelValue, {
+        ...props,
+        value: "",
+        valueBlockContent: ()=>/*#__PURE__*/ jsx(Checkbox, {
+                testId: props.testId ? `${props.testId}-checkbox` : void 0,
+                checked: checked,
+                disabled: props.disabled,
+                defaultChecked: defaultChecked,
+                indeterminate: indeterminate,
+                tabIndex: tabIndex,
+                className: cn(LabelValueCheckbox_module.checkbox, checkboxClassName),
+                onChange: onChange,
+                ...checkboxProps
+            }),
+        customDropdown: true
+    });
+export { LabelValueCheckbox };

package/dist/components/LabelValueCheckbox/LabelValueCheckbox.module.js

@@ -0,0 +1,5 @@
+import "./LabelValueCheckbox_module.css";
+const LabelValueCheckbox_module = {
+    checkbox: "checkbox-Hn5FOs"
+};
+export default LabelValueCheckbox_module;

package/dist/components/LabelValueCheckbox/LabelValueCheckbox_module.css

@@ -0,0 +1,5 @@
+.checkbox-Hn5FOs {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+

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

@@ -50,9 +50,7 @@
 }
 
 .inputWithActions-Jl3bV3: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);
 }
 
 .inputWithActions-Jl3bV3 {

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

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

package/dist/components/MentionsTextfield/MentionsTextfield.js

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

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

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import type { TMentionOption } from '../types';
+interface Props {
+    item: TMentionOption;
+}
+export declare const OptionForStory: FC<Props>;
+export {};

package/dist/components/MentionsTextfield/OptionForStory/OptionForStory.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Text, TextColor } from "../../Text/Text.js";
+import OptionForStory_module from "./OptionForStory.module.js";
+const OptionForStory = /*#__PURE__*/ memo(({ item })=>/*#__PURE__*/ jsxs("div", {
+        className: OptionForStory_module.container,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: OptionForStory_module.avatar
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: OptionForStory_module.info,
+                children: [
+                    /*#__PURE__*/ jsx(Text.Body, {
+                        className: OptionForStory_module.label,
+                        children: item.label
+                    }),
+                    /*#__PURE__*/ jsx(Text.Caption, {
+                        colorToken: TextColor.secondary,
+                        children: item.value
+                    })
+                ]
+            })
+        ]
+    }));
+OptionForStory.displayName = 'OptionForStory';
+export { OptionForStory };

package/dist/components/MentionsTextfield/OptionForStory/OptionForStory.module.js

@@ -0,0 +1,8 @@
+import "./OptionForStory_module.css";
+const OptionForStory_module = {
+    container: "container-oHBM6w",
+    avatar: "avatar-HqQ2Lj",
+    info: "info-htRmbC",
+    label: "label-klpfkQ"
+};
+export default OptionForStory_module;

package/dist/components/MentionsTextfield/OptionForStory/OptionForStory_module.css

@@ -0,0 +1,25 @@
+.container-oHBM6w {
+  align-items: center;
+  column-gap: 12px;
+  height: 36px;
+  padding-inline: 12px;
+  display: flex;
+}
+
+.avatar-HqQ2Lj {
+  background-color: var(--light-grey-300, #d3d8ddb3);
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+}
+
+.info-htRmbC {
+  flex-direction: column;
+  row-gap: 2px;
+  display: flex;
+}
+
+.label-klpfkQ {
+  line-height: 14px;
+}
+

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

@@ -0,0 +1 @@
+export { OptionForStory } from './OptionForStory';

package/dist/components/MentionsTextfield/OptionForStory/index.js

@@ -0,0 +1 @@
+export { OptionForStory } from "./OptionForStory.js";

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

@@ -1,6 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as external_react_Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import lodash_debounce from "lodash.debounce";
 import { cn } from "../../../common/css/cn.js";
 import { Button } from "../../Button/Button.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
@@ -9,6 +8,7 @@ import { SearchInput } from "../../SearchInput/SearchInput.js";
 import { EmptyState } from "../../Select/EmptyState/EmptyState.js";
 import { Loading } from "../../Select/Loading/Loading.js";
 import { Text, TextColor } from "../../Text/Text.js";
+import { useDebounceCallback } from "../../../hooks/useDebounceCallback/useDebounceCallback.js";
 import { Add16Icon, RemoveClose12Icon } from "../../../icon/index.js";
 import { useAsyncDropdownContext } from "../AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { minChipsWidth, selectAllCheckboxDefaultText } from "../lib/consts.js";
@@ -19,6 +19,9 @@ import { TooltipedChip } from "../TooltipedChip/TooltipedChip.js";
 import { TooltipedOptionText } from "../TooltipedOptionText/TooltipedOptionText.js";
 import MultiselectDropdownContent_module from "./MultiselectDropdownContent.module.js";
 const handleCheck = ()=>{};
+const DEBOUNCE_OPTIONS = {
+    leading: true
+};
 const MultiselectDropdownContent = (props)=>{
     const asyncDropdownContext = useAsyncDropdownContext();
     const selectedItems = (asyncDropdownContext?.selectedValues ?? props.items).filter((item)=>props.values.includes(item.value));
@@ -39,9 +42,7 @@ const MultiselectDropdownContent = (props)=>{
         asyncDropdownContext?.changeCachedItems(items ?? []);
         setFilteredItems(items ?? []);
     }, []);
-    const handleAsyncSearchDebounced = useCallback(lodash_debounce(handleAsyncSearch, props.searchDebounce, {
-        leading: true
-    }), []);
+    const handleAsyncSearchDebounced = useDebounceCallback(handleAsyncSearch, props.searchDebounce, DEBOUNCE_OPTIONS);
     const handleSearch = (inputValue)=>{
         setSearchInputValue(inputValue);
         if (!inputValue.trim()) {

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

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

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

@@ -24,6 +24,10 @@ type SharedProps<T extends Key, DTO = unknown> = Pick<InputProps, 'placeholder'
     wrapSelectedItems?: boolean;
     closeDropdownOnCreateButtonClick?: boolean;
     onDropdownVisibleChange?: (visible: boolean) => void;
+    /**
+     * асинхронный коллбэк, вызываемый при изменении input, возвращает список отфильтрованных опций
+     */
+    onSearch?: (value: string) => Promise<DropdownItem<T>[]>;
     renderItem?: (item: DropdownItem<T, DTO>) => ReactNode;
     renderSelectedItem?: RenderSelectedItem;
 };

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);
 }
 

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

@@ -20,6 +20,7 @@ interface Props<T> extends IHasTestId {
     scrollable?: boolean;
     isFocusable?: boolean;
     onPressEsc?: () => 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, onPressEsc, skipSelectOnEnterWithoutCursor, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ 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, onPressEsc, skipSelectOnEnterWithoutCursor })=>{
     const resolvedListboxId = useId(listboxId);
     const listRef = useRef(null);
     useKeyPress(KEYBOARD_KEYS.TAB, ()=>{
@@ -29,7 +29,8 @@ 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

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

@@ -3,6 +3,10 @@
   padding: 4px;
 }
 
+.optionsList-nnTF3n:focus {
+  outline: none;
+}
+
 .scrollable-BpMvGu {
   flex: 1;
   overflow-y: auto;

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

@@ -1,4 +1,4 @@
-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';
@@ -28,6 +28,10 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     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;
@@ -41,11 +45,13 @@ export interface SelectProps<T> extends IBaseSelectProps<T> {
     isArchived?: 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;