@moysklad/uikit 28.1.0

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

@@ -0,0 +1,16 @@
+import "./Combobox_module.css";
+const Combobox_module = {
+    container: "container-aL2rxg",
+    fullWidth: "fullWidth-ELe2u2",
+    combobox: "combobox-b5S72r",
+    error: "error-MHdmR7",
+    disabled: "disabled-eTf2L9",
+    innerCombobox: "innerCombobox-ojzOuH",
+    placeholder: "placeholder-_WVTl5",
+    selectedValue: "selectedValue-oFS_XU",
+    archivedDisabledTextColor: "archivedDisabledTextColor-qThU95",
+    arrowAction: "arrowAction-lxn4Ah",
+    search: "search-_t7sYi",
+    archivedTextColor: "archivedTextColor-TFgYY_"
+};
+export default Combobox_module;

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

@@ -0,0 +1,144 @@
+.container-aL2rxg {
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 4px;
+  width: fit-content;
+  display: flex;
+}
+
+.container-aL2rxg.fullWidth-ELe2u2 {
+  width: 100%;
+}
+
+.container-aL2rxg .combobox-b5S72r {
+  border: 1px solid var(--border-normal, #d1d6df);
+  background: var(--bgd-white, #fff);
+  border-radius: 8px;
+  outline: none;
+}
+
+.container-aL2rxg .combobox-b5S72r:hover {
+  border: 1px solid var(--border-hover, #5f6d79);
+}
+
+.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);
+}
+
+.container-aL2rxg .combobox-b5S72r {
+  box-sizing: border-box;
+  grid-template-columns: 3fr 1fr 1fr;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  display: grid;
+  position: relative;
+}
+
+.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);
+  --action-button-color: var(--elements-hover, #091739);
+}
+
+.container-aL2rxg .combobox-b5S72r[data-searchable="false"]:focus, .container-aL2rxg .combobox-b5S72r[data-searchable="false"]:focus-visible {
+  box-shadow: none;
+  border-color: var(--border-hover, #5f6d79);
+  outline: none;
+}
+
+.container-aL2rxg .combobox-b5S72r[data-searchable="false"].error-MHdmR7:focus-visible {
+  border-color: var(--border-critical, #e50347);
+}
+
+.container-aL2rxg .combobox-b5S72r.disabled-eTf2L9 {
+  border: 1px solid var(--border-normal, #d1d6df);
+  background: var(--bgd-secondary, #f1f4f9);
+}
+
+.container-aL2rxg .combobox-b5S72r.disabled-eTf2L9:hover, .container-aL2rxg .combobox-b5S72r.disabled-eTf2L9:focus {
+  border: 1px solid var(--border-normal, #d1d6df);
+}
+
+.container-aL2rxg .combobox-b5S72r.disabled-eTf2L9 {
+  --action-button-color: var(--elements-inactive, #9fa7af);
+}
+
+.container-aL2rxg .combobox-b5S72r.error-MHdmR7 {
+  border-color: var(--border-critical, #e50347);
+}
+
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH {
+  box-sizing: border-box;
+  grid-column: 1 / 4;
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .placeholder-_WVTl5 {
+  -webkit-user-select: none;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  overflow: hidden;
+  transform: translateY(-50%);
+}
+
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .selectedValue-oFS_XU {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.container-aL2rxg .combobox-b5S72r .innerCombobox-ojzOuH .archivedDisabledTextColor-qThU95 {
+  color: var(--text-secondary, #5f6d79);
+  padding-right: 24px;
+}
+
+.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 .arrowAction-lxn4Ah {
+  grid-column: 5 / 6;
+  padding-left: 4px;
+}
+
+.container-aL2rxg .combobox-b5S72r .search-_t7sYi {
+  z-index: 1;
+  width: 100%;
+  color: var(--text-primary, #091739);
+  text-overflow: ellipsis;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.container-aL2rxg .combobox-b5S72r .search-_t7sYi:disabled, .container-aL2rxg .combobox-b5S72r .search-_t7sYi:disabled:hover, .container-aL2rxg .combobox-b5S72r .search-_t7sYi:disabled:focus {
+  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);
+}
+

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

@@ -0,0 +1,17 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ISelectOption } from '../types';
+export interface DropDownWithColorsProps {
+    listboxId?: string;
+    items: ISelectOption[];
+    cursor: number | null;
+    testId?: string;
+    isLoading?: boolean;
+    loadingComponent?: ReactNode;
+    notFound?: ReactNode;
+    isEllipsis: boolean;
+    onSelect: (option: ISelectOption) => void;
+    onSetCursor?: (cursor: number) => void;
+    searchText?: string;
+    value?: ISelectOption;
+}
+export declare const DropDownWithColors: (props: DropDownWithColorsProps) => ReactElement;

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

@@ -0,0 +1,42 @@
+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 })=>{
+    if (isLoading) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            " ",
+            loadingComponent,
+            " "
+        ]
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: items.length > 0 ? /*#__PURE__*/ jsx(Fragment, {
+            children: /*#__PURE__*/ jsx(OptionsList, {
+                listboxId: listboxId,
+                items: items,
+                onSelect: onSelect,
+                value: value,
+                testId: testId,
+                cursor: cursor,
+                onSetCursor: onSetCursor,
+                searchText: searchText,
+                isOptionEllipsis: isEllipsis,
+                renderOption: ({ color }, highlightedText)=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: DropDownWithColors_module.status,
+                                style: {
+                                    backgroundColor: color
+                                }
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: DropDownWithColors_module.itemText,
+                                children: highlightedText
+                            })
+                        ]
+                    })
+            })
+        }) : notFound
+    });
+};
+export { DropDownWithColors };

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

@@ -0,0 +1,6 @@
+import "./DropDownWithColors_module.css";
+const DropDownWithColors_module = {
+    status: "status-FAMG9L",
+    itemText: "itemText-nW0Ptu"
+};
+export default DropDownWithColors_module;

package/dist/components/Select/DropDownWithColors/DropDownWithColors_module.css

@@ -0,0 +1,12 @@
+.status-FAMG9L {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  position: absolute;
+}
+
+.itemText-nW0Ptu {
+  margin-left: 24px;
+}
+

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

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import { type IButtonProps } from '../../Button/Button';
+type Props = Omit<IButtonProps, 'variant' | 'size'>;
+export declare const DropdownActionButton: FC<Props>;
+export {};

package/dist/components/Select/DropdownActionButton/DropdownActionButton.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Button } from "../../Button/Button.js";
+const DropdownActionButton = /*#__PURE__*/ memo((props)=>/*#__PURE__*/ jsx(Button, {
+        size: "l",
+        variant: "frameless",
+        ...props
+    }));
+DropdownActionButton.displayName = 'DropdownActionButton';
+export { DropdownActionButton };

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

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

package/dist/components/Select/DropdownActionButton/index.js

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

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

@@ -0,0 +1,5 @@
+interface Props {
+    text?: string;
+}
+export declare const EmptyState: import("react").MemoExoticComponent<({ text }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Select/EmptyState/EmptyState.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Text, TextColor } from "../../Text/Text.js";
+import EmptyState_module from "./EmptyState.module.js";
+const EmptyState = /*#__PURE__*/ memo(({ text })=>/*#__PURE__*/ jsx("div", {
+        className: EmptyState_module.container,
+        children: /*#__PURE__*/ jsx(Text.Body, {
+            className: EmptyState_module.text,
+            colorToken: TextColor.secondary,
+            children: text
+        })
+    }));
+EmptyState.displayName = 'EmptyState';
+export { EmptyState };

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

@@ -0,0 +1,6 @@
+import "./EmptyState_module.css";
+const EmptyState_module = {
+    container: "container-RoBg38",
+    text: "text-rNjxN0"
+};
+export default EmptyState_module;

package/dist/components/Select/EmptyState/EmptyState_module.css

@@ -0,0 +1,11 @@
+.container-RoBg38 {
+  justify-content: center;
+  align-items: center;
+  padding: 20px 12px;
+  display: flex;
+}
+
+.text-rNjxN0 {
+  text-align: center;
+}
+

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

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react';
+import { type IHasTestId } from '../../../common';
+interface Props extends IHasTestId {
+    error?: boolean;
+}
+export declare const HelperText: import("react").MemoExoticComponent<({ testId, children, error }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Select/HelperText/HelperText.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Text, TextColor } from "../../Text/Text.js";
+import HelperText_module from "./HelperText.module.js";
+const HelperText = /*#__PURE__*/ memo(({ testId, children, error })=>/*#__PURE__*/ jsx(Text.Caption, {
+        className: HelperText_module.helperText,
+        testId: testId,
+        colorToken: error ? TextColor.critical : TextColor.secondary,
+        children: children
+    }));
+HelperText.displayName = 'HelperText';
+export { HelperText };

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

@@ -0,0 +1,5 @@
+import "./HelperText_module.css";
+const HelperText_module = {
+    helperText: "helperText-nb0EiY"
+};
+export default HelperText_module;

package/dist/components/Select/HelperText/HelperText_module.css

@@ -0,0 +1,5 @@
+.helperText-nb0EiY {
+  margin-top: 4px;
+  display: block;
+}
+

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

@@ -0,0 +1,6 @@
+import type { IHasTestId } from '../../../common/types';
+interface Props extends IHasTestId {
+    text: string;
+}
+export declare const Loading: import("react").MemoExoticComponent<({ text, testId }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Select/Loading/Loading.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Text } from "../../Text/Text.js";
+import Loading_module from "./Loading.module.js";
+const Loading = /*#__PURE__*/ memo(({ text, testId })=>/*#__PURE__*/ jsxs("div", {
+        className: Loading_module.container,
+        "data-test-id": testId,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: Loading_module.spinner
+            }),
+            /*#__PURE__*/ jsx(Text.Body, {
+                children: text
+            })
+        ]
+    }));
+Loading.displayName = 'Loading';
+export { Loading };

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

@@ -0,0 +1,10 @@
+import "./Loading_module.css";
+const Loading_module = {
+    container: "container-rE7Yrt",
+    spinner: "spinner-fj5RAD",
+    "spinner-animation": "spinner-animation-UCRSQ7",
+    spinnerAnimation: "spinner-animation-UCRSQ7",
+    "spinner-animation-2": "spinner-animation-2-CQEJxh",
+    spinnerAnimation2: "spinner-animation-2-CQEJxh"
+};
+export default Loading_module;

package/dist/components/Select/Loading/Loading_module.css

@@ -0,0 +1,63 @@
+.container-rE7Yrt {
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  display: flex;
+}
+
+.spinner-fj5RAD {
+  border: 1px solid var(--elements-normal, #5f6d79);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  width: 18px;
+  animation: .8s linear infinite alternate spinner-animation-UCRSQ7, 1.6s linear infinite spinner-animation-2-CQEJxh;
+}
+
+@keyframes spinner-animation-UCRSQ7 {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+
+  12.5% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+
+  62.5% {
+    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+
+  75% {
+    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+  }
+}
+
+@keyframes spinner-animation-2-CQEJxh {
+  0% {
+    transform: scaleY(1) rotate(0);
+  }
+
+  49.99% {
+    transform: scaleY(1) rotate(135deg);
+  }
+
+  50% {
+    transform: scaleY(-1) rotate(0);
+  }
+
+  100% {
+    transform: scaleY(-1) rotate(-135deg);
+  }
+}
+

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

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+import { type IHasTestId } from '../../../common/types';
+import { type ISelectOption } from '../types';
+interface Props extends IHasTestId {
+    id?: string;
+    searchText?: string;
+    className?: string;
+    isEllipsis?: boolean;
+    isSelected?: boolean;
+    isFocused?: boolean;
+    showHighlight?: boolean;
+    option: ISelectOption;
+    hintZIndex?: number;
+    renderOption?: (option: ISelectOption, highlightedText?: ReactNode) => ReactNode;
+    onClick: (option: ISelectOption) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ISelectOption) => void;
+}
+export declare const Option: React.MemoExoticComponent<({ searchText, className, isSelected, isFocused, isEllipsis, testId, id, showHighlight, option, hintZIndex, renderOption, onClick, onMouseDown, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Select/Option/Option.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../../common/css/cn.js";
+import { Placement } from "../../Tooltip/Tooltip.js";
+import { OverflowingHint } from "../OverflowingHint/OverflowingHint.js";
+import Option_module from "./Option.module.js";
+const getHighlightedText = (text, highlight)=>{
+    if (!highlight.length) return text;
+    const parts = text.split(new RegExp(`(${highlight.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')})`, 'gi'));
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: parts.map((part, i)=>/*#__PURE__*/ jsx("span", {
+                className: part.toLowerCase() === highlight.toLowerCase() ? Option_module.highlightText : '',
+                children: part
+            }, i))
+    });
+};
+const Option = /*#__PURE__*/ memo(({ searchText = '', className, isSelected = false, isFocused = false, isEllipsis = false, testId, id, showHighlight = true, option, hintZIndex, renderOption, onClick, onMouseDown })=>{
+    const formattedLabel = showHighlight ? getHighlightedText(option.label, searchText) : option.label;
+    return /*#__PURE__*/ jsx(OverflowingHint, {
+        hintText: formattedLabel,
+        placement: Placement.BOTTOM_LEFT,
+        zIndex: hintZIndex,
+        children: (ref)=>/*#__PURE__*/ jsx("li", {
+                id: id,
+                role: "option",
+                "aria-selected": isSelected,
+                className: cn(Option_module.option, className, isSelected && Option_module.isSelected, isFocused && Option_module.cursor, isEllipsis && Option_module.ellipsis),
+                onClick: ()=>onClick(option),
+                onMouseDown: (e)=>onMouseDown?.(e, option),
+                onKeyDown: (event)=>event.preventDefault(),
+                onKeyUp: (event)=>event.preventDefault(),
+                "data-test-id": testId,
+                ref: ref,
+                children: renderOption ? renderOption(option, formattedLabel) : formattedLabel
+            })
+    });
+});
+Option.displayName = 'Option';
+export { Option };

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

@@ -0,0 +1,9 @@
+import "./Option_module.css";
+const Option_module = {
+    option: "option-M0ILTj",
+    ellipsis: "ellipsis-UCDj0a",
+    isSelected: "isSelected-qn2868",
+    cursor: "cursor-ogyOVz",
+    highlightText: "highlightText-sRe3CQ"
+};
+export default Option_module;

package/dist/components/Select/Option/Option_module.css

@@ -0,0 +1,37 @@
+.option-M0ILTj {
+  cursor: pointer;
+  color: var(--text-primary, #091739);
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  list-style-type: none;
+}
+
+.option-M0ILTj.ellipsis-UCDj0a {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.option-M0ILTj:hover {
+  background-color: var(--elements-bg-hover, #f1f4f9);
+}
+
+.option-M0ILTj.isSelected-qn2868 {
+  background-color: var(--elements-bg-pressed, #bfddf7bf);
+}
+
+.option-M0ILTj.cursor-ogyOVz:not(.isSelected-qn2868) {
+  background-color: var(--elements-bg-hover, #f1f4f9);
+}
+
+.option-M0ILTj .highlightText-sRe3CQ {
+  color: var(--text-attention, #db5202);
+}
+

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

@@ -0,0 +1,25 @@
+import React, { type MouseEvent, type ReactNode } from 'react';
+import { type IHasTestId } from '../../../common/types';
+import { type ISelectOption } from '../types';
+interface Props<T> extends IHasTestId {
+    listboxId?: string;
+    items: ISelectOption<T>[];
+    value?: ISelectOption<T>;
+    searchText?: string;
+    optionClassName?: string;
+    isOptionEllipsis?: boolean;
+    searchable?: boolean;
+    cursor: number | null;
+    hintZIndex?: number;
+    renderOption?: (option: ISelectOption<T>, highlightedText?: ReactNode) => ReactNode;
+    skipSelectOnTab?: boolean;
+    onSelect: (option: ISelectOption<T>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ISelectOption<T>) => void;
+    onSetCursor?: (cursor: number) => void;
+    className?: string;
+    scrollable?: boolean;
+    isFocusable?: boolean;
+    onPressEsc?: () => void;
+}
+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 {};

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

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../../common/css/index.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 resolvedListboxId = useId(listboxId);
+    const listRef = useRef(null);
+    useKeyPress(KEYBOARD_KEYS.TAB, ()=>{
+        if (skipSelectOnTab) return;
+        onSelect(items[cursor ?? 0]);
+    });
+    const enterPressed = useKeyPress(KEYBOARD_KEYS.ENTER);
+    useKeyPress(KEYBOARD_KEYS.ESCAPE, onPressEsc);
+    useArrowDownListener({
+        cursor,
+        itemsLength: items.length,
+        listRef,
+        onSetCursor
+    });
+    useArrowUpListener({
+        cursor,
+        itemsLength: items.length,
+        listRef,
+        onSetCursor
+    });
+    useEffect(()=>{
+        if (!enterPressed || searchable) return;
+        onSelect(items[cursor ?? 0]);
+    }, [
+        enterPressed
+    ]);
+    return /*#__PURE__*/ jsx("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);
+        })
+    });
+};
+const OptionsList = genericMemo(Options);
+export { OptionsList };

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

@@ -0,0 +1,6 @@
+import "./OptionsList_module.css";
+const OptionsList_module = {
+    optionsList: "optionsList-nnTF3n",
+    scrollable: "scrollable-BpMvGu"
+};
+export default OptionsList_module;