@alfalab/core-components-select 18.2.5 → 18.2.6

package/modern/components/clear-button/index.css

@@ -4,13 +4,13 @@
     --color-light-neutral-translucent-500-press: rgba(4, 4, 21, 0.47);
 } :root {
     --input-error-icon-display: none;
-} .select__clearIcon_1gevr {
+} .select__clearIcon_15ggj {
     display: block;
     color: var(--color-light-neutral-translucent-500);
-} .select__clearIcon_1gevr:hover {
+} .select__clearIcon_15ggj:hover {
         color: var(--color-light-neutral-translucent-500-hover);
-    } .select__clearIcon_1gevr:active {
+    } .select__clearIcon_15ggj:active {
         color: var(--color-light-neutral-translucent-500-press);
-    } .select__clearButton_1gevr + [data-addon='error-icon'] {
+    } .select__clearButton_15ggj + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/modern/components/clear-button/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"clearIcon":"select__clearIcon_1gevr","clearButton":"select__clearButton_1gevr"};
+const styles = {"clearIcon":"select__clearIcon_15ggj","clearButton":"select__clearButton_15ggj"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/field/index.css

@@ -10,22 +10,22 @@
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
 } :root {
     --select-arrow-hover-opacity: 0.7;
-} .select__component_mifbx {
+} .select__component_bk046 {
     width: 100%;
     outline: none;
-} .select__field_mifbx:not(.select__disabled_mifbx) {
+} .select__field_bk046:not(.select__disabled_bk046) {
     cursor: pointer;
-} .select__field_mifbx:not(.select__disabled_mifbx):hover .select__arrow_mifbx {
+} .select__field_bk046:not(.select__disabled_bk046):hover .select__arrow_bk046 {
             opacity: var(--select-arrow-hover-opacity);
-        } .select__disabled_mifbx {
+        } .select__disabled_bk046 {
     cursor: var(--disabled-cursor);
-} .select__placeholder_mifbx {
+} .select__placeholder_bk046 {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_mifbx 0.2s ease;
-} .select__placeholder_mifbx.select__focused_mifbx {
+    animation: select__show-placeholder_bk046 0.2s ease;
+} .select__placeholder_bk046.select__focused_bk046 {
         color: var(--input-focus-placeholder-color);
-    } .select__contentWrapper_mifbx {
+    } .select__contentWrapper_bk046 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -34,22 +34,22 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .select__contentWrapper_mifbx.select__size-40_mifbx {
+} .select__contentWrapper_bk046.select__size-40_bk046 {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__value_mifbx {
+    } .select__value_bk046 {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .select__value_mifbx.select__size-40_mifbx {
+} .select__value_bk046.select__size-40_bk046 {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-    } .select__focusVisible_mifbx {
+    } .select__focusVisible_bk046 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} @keyframes select__show-placeholder_mifbx {
+} @keyframes select__show-placeholder_bk046 {
     from {
         opacity: 0;
     }

package/modern/components/field/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_mifbx","field":"select__field_mifbx","disabled":"select__disabled_mifbx","arrow":"select__arrow_mifbx","placeholder":"select__placeholder_mifbx","show-placeholder":"select__show-placeholder_mifbx","focused":"select__focused_mifbx","contentWrapper":"select__contentWrapper_mifbx","size-40":"select__size-40_mifbx","value":"select__value_mifbx","focusVisible":"select__focusVisible_mifbx"};
+const styles = {"component":"select__component_bk046","field":"select__field_bk046","disabled":"select__disabled_bk046","arrow":"select__arrow_bk046","placeholder":"select__placeholder_bk046","show-placeholder":"select__show-placeholder_bk046","focused":"select__focused_bk046","contentWrapper":"select__contentWrapper_bk046","size-40":"select__size-40_bk046","value":"select__value_bk046","focusVisible":"select__focusVisible_bk046"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/footer/index.css

@@ -4,17 +4,17 @@
 } :root {
     --gap-m: 16px;
     --gap-16: var(--gap-m);
-} .select__footer_1d3i3 {
+} .select__footer_16eho {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-16) var(--gap-16);
     background-color: var(--color-light-modal-bg-primary);
-} .select__footer_1d3i3 .select__button_1d3i3:first-of-type {
+} .select__footer_16eho .select__button_16eho:first-of-type {
         margin-right: var(--gap-16);
-    } .select__button_1d3i3 {
+    } .select__button_16eho {
     width: 50%;
-} .select__highlighted_1d3i3 {
+} .select__highlighted_16eho {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

package/modern/components/footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_1d3i3","button":"select__button_1d3i3","highlighted":"select__highlighted_1d3i3"};
+const styles = {"footer":"select__footer_16eho","button":"select__button_16eho","highlighted":"select__highlighted_16eho"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/optgroup/index.css

@@ -16,7 +16,7 @@
     --select-optgroup-right-padding: var(--gap-12);
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
-} .select__optgroup_5im0r {
+} .select__optgroup_7v3if {
     position: relative;
     display: flex;
     align-items: center;
@@ -25,9 +25,9 @@
     box-sizing: border-box;
     background: var(--select-optgroup-background);
     min-height: 40px;
-} .select__optgroup_5im0r + *[role='option']:before {
+} .select__optgroup_7v3if + *[role='option']:before {
         display: none;
-    } .select__label_5im0r {
+    } .select__label_7v3if {
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
@@ -36,7 +36,7 @@
 
     display: block;
     color: var(--select-optgroup-color);
-} .select__size-72_5im0r {
+} .select__size-72_7v3if {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/modern/components/optgroup/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optgroup":"select__optgroup_5im0r","label":"select__label_5im0r","size-72":"select__size-72_5im0r"};
+const styles = {"optgroup":"select__optgroup_7v3if","label":"select__label_7v3if","size-72":"select__size-72_7v3if"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/desktop/index.css

@@ -35,7 +35,7 @@
     --select-option-hover-color: var(--color-light-text-primary);
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
-} .select__option_bhdb6 {
+} .select__option_1hxpg {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_bhdb6:not(.select__disabled_bhdb6):active {
+} .select__option_1hxpg:not(.select__disabled_1hxpg):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_bhdb6:before {
+    } .select__option_1hxpg:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -63,46 +63,46 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_bhdb6:first-child:before {
+    } .select__option_1hxpg:first-child:before {
         display: none;
-    } .select__size-48_bhdb6 {
+    } .select__size-48_1hxpg {
     min-height: var(--size-s-height);
-} .select__size-56_bhdb6 {
+} .select__size-56_1hxpg {
     min-height: var(--size-m-height);
-} .select__size-64_bhdb6 {
+} .select__size-64_1hxpg {
     min-height: var(--size-l-height);
-} .select__size-72_bhdb6 {
+} .select__size-72_1hxpg {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
-} .select__size-72_bhdb6:before {
+} .select__size-72_1hxpg:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_bhdb6 {
+    } .select__selected_1hxpg {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_bhdb6 {
+} .select__highlighted_1hxpg {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_bhdb6:before,
-    .select__highlighted_bhdb6 + .select__option_bhdb6:before {
+} .select__highlighted_1hxpg:before,
+    .select__highlighted_1hxpg + .select__option_1hxpg:before {
         opacity: 0;
-    } .select__disabled_bhdb6 {
+    } .select__disabled_1hxpg {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_bhdb6 {
+} .select__content_1hxpg {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_bhdb6 {
+} .select__textContent_1hxpg {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
-} .select__highlighted_bhdb6 {
+} .select__highlighted_1hxpg {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_bhdb6:before,
-    .select__highlighted_bhdb6 + .select__option_bhdb6:before {
+} .select__highlighted_1hxpg:before,
+    .select__highlighted_1hxpg + .select__option_1hxpg:before {
         opacity: 0;
     }

package/modern/components/option/desktop/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_bhdb6","disabled":"select__disabled_bhdb6","size-48":"select__size-48_bhdb6","size-56":"select__size-56_bhdb6","size-64":"select__size-64_bhdb6","size-72":"select__size-72_bhdb6","selected":"select__selected_bhdb6","highlighted":"select__highlighted_bhdb6","content":"select__content_bhdb6","textContent":"select__textContent_bhdb6"};
+const styles = {"option":"select__option_1hxpg","disabled":"select__disabled_1hxpg","size-48":"select__size-48_1hxpg","size-56":"select__size-56_1hxpg","size-64":"select__size-64_1hxpg","size-72":"select__size-72_1hxpg","selected":"select__selected_1hxpg","highlighted":"select__highlighted_1hxpg","content":"select__content_1hxpg","textContent":"select__textContent_1hxpg"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/mobile/index.css

@@ -35,7 +35,7 @@
     --select-option-hover-color: var(--color-light-text-primary);
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
-} .select__option_urs46 {
+} .select__option_1ipxd {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,10 +50,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
-} .select__option_urs46:not(.select__disabled_urs46):active {
+} .select__option_1ipxd:not(.select__disabled_1ipxd):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_urs46:before {
+    } .select__option_1ipxd:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -63,40 +63,40 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_urs46:first-child:before {
+    } .select__option_1ipxd:first-child:before {
         display: none;
-    } .select__size-48_urs46 {
+    } .select__size-48_1ipxd {
     min-height: var(--size-s-height);
-} .select__size-56_urs46 {
+} .select__size-56_1ipxd {
     min-height: var(--size-m-height);
-} .select__size-64_urs46 {
+} .select__size-64_1ipxd {
     min-height: var(--size-l-height);
-} .select__size-72_urs46 {
+} .select__size-72_1ipxd {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
-} .select__size-72_urs46:before {
+} .select__size-72_1ipxd:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_urs46 {
+    } .select__selected_1ipxd {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_urs46 {
+} .select__highlighted_1ipxd {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__highlighted_urs46:before,
-    .select__highlighted_urs46 + .select__option_urs46:before {
+} .select__highlighted_1ipxd:before,
+    .select__highlighted_1ipxd + .select__option_1ipxd:before {
         opacity: 0;
-    } .select__disabled_urs46 {
+    } .select__disabled_1ipxd {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_urs46 {
+} .select__content_1ipxd {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_urs46 {
+} .select__textContent_1ipxd {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

package/modern/components/option/mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"option":"select__option_urs46","disabled":"select__disabled_urs46","size-48":"select__size-48_urs46","size-56":"select__size-56_urs46","size-64":"select__size-64_urs46","size-72":"select__size-72_urs46","selected":"select__selected_urs46","highlighted":"select__highlighted_urs46","content":"select__content_urs46","textContent":"select__textContent_urs46"};
+const styles = {"option":"select__option_1ipxd","disabled":"select__disabled_1ipxd","size-48":"select__size-48_1ipxd","size-56":"select__size-56_1ipxd","size-64":"select__size-64_1ipxd","size-72":"select__size-72_1ipxd","selected":"select__selected_1ipxd","highlighted":"select__highlighted_1ipxd","content":"select__content_1ipxd","textContent":"select__textContent_1ipxd"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/options-list/Component.d.ts

@@ -1,3 +1,36 @@
 import React from 'react';
-import { type OptionsListProps } from '../../typings';
-export declare const OptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;
+import { type GroupShape, type OptionShape } from '../../typings';
+export declare const OptionsList: React.ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
+    className?: string | undefined;
+    optionGroupClassName?: string | undefined;
+    scrollbarClassName?: string | undefined;
+    footerClassName?: string | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+    Option: React.ComponentType<import("../../typings").OptionProps>;
+    getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
+    groupOptionProps?: import("../../typings").AnyObject | undefined;
+    selectedItems?: OptionShape[] | undefined;
+    setSelectedItems: (selected: OptionShape[]) => void;
+    toggleMenu: () => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    options?: (OptionShape | GroupShape)[] | undefined;
+    flatOptions?: OptionShape[] | undefined;
+    highlightedIndex?: number | undefined;
+    open?: boolean | undefined;
+    Optgroup?: React.ComponentType<import("../../typings").OptgroupProps> | undefined;
+    emptyPlaceholder?: React.ReactNode;
+    visibleOptions?: number | undefined;
+    onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    dataTestId?: string | undefined;
+    inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+    showFooter?: boolean | undefined;
+    nativeScrollbar?: boolean | undefined;
+    optionsListWidth?: "field" | "content" | undefined;
+    onApply?: (() => void) | undefined;
+    onClear?: (() => void) | undefined;
+    setHighlightedIndex?: ((index: number) => void) | undefined;
+    search?: string | undefined;
+    multiple?: boolean | undefined;
+    limitDynamicOptionGroupSize?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/modern/components/options-list/Component.js

@@ -1,10 +1,9 @@
 import React, { forwardRef, useState, useCallback, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { useMatchMedia } from '@alfalab/core-components-mq/modern';
 import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
-import { isClient } from '@alfalab/core-components-shared/modern';
 import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
+import { useNativeScrollbar } from '../../hooks/use-native-scrollbar.js';
 import { useVisibleOptions, isGroup } from '../../utils.js';
 import { Optgroup } from '../optgroup/Component.js';
 import styles from './index.module.css.js';
@@ -14,12 +13,13 @@ const createCounter = () => {
     // eslint-disable-next-line no-plusplus
     return () => count++;
 };
-const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, footerClassName, scrollbarClassName, Option, getOptionProps, groupOptionProps = {}, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, selectedItems, search, setSelectedItems, multiple, limitDynamicOptionGroupSize = false, }, ref) => {
+const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, footerClassName, scrollbarClassName, Option, getOptionProps, groupOptionProps = {}, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, selectedItems, search, setSelectedItems, multiple, limitDynamicOptionGroupSize = false, client, }, ref) => {
     const [scrollTop, setScrollTop] = useState(true);
     const [scrollBottom, setScrollBottom] = useState(false);
-    const query = '(max-width: 1023px)';
-    let [nativeScrollbar] = useMatchMedia(query, () => isClient() ? window.matchMedia(query).matches : true);
-    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    const nativeScrollbar = useNativeScrollbar({
+        nativeScrollbar: nativeScrollbarProp,
+        client,
+    });
     const handleScroll = useCallback((event) => {
         const scrolledToHeader = event.currentTarget.scrollTop <= 0;
         const scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=

package/modern/components/options-list/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { useMatchMedia } from '@alfalab/core-components-mq';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\nimport { isClient } from '@alfalab/core-components-shared';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, useVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nconst createCounter = () => {\n    let count = 0;\n\n    // eslint-disable-next-line no-plusplus\n    return () => count++;\n};\n\nexport const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n    (\n        {\n            size = 48,\n            className,\n            optionGroupClassName,\n            footerClassName,\n            scrollbarClassName,\n            Option,\n            getOptionProps,\n            groupOptionProps = {},\n            options = [],\n            Optgroup = DefaultOptgroup,\n            dataTestId,\n            emptyPlaceholder,\n            visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n            onScroll,\n            open,\n            header,\n            footer,\n            showFooter = true,\n            optionsListWidth,\n            nativeScrollbar: nativeScrollbarProp,\n            flatOptions = [],\n            setHighlightedIndex,\n            selectedItems,\n            search,\n            setSelectedItems,\n            multiple,\n            limitDynamicOptionGroupSize = false,\n        },\n        ref,\n    ) => {\n        const [scrollTop, setScrollTop] = useState(true);\n        const [scrollBottom, setScrollBottom] = useState(false);\n\n        const query = '(max-width: 1023px)';\n        let [nativeScrollbar] = useMatchMedia(query, () =>\n            isClient() ? window.matchMedia(query).matches : true,\n        );\n\n        nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);\n\n        const handleScroll = useCallback(\n            (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n                const scrolledToHeader = event.currentTarget.scrollTop <= 0;\n                const scrolledToFooter =\n                    event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=\n                    event.currentTarget.scrollTop;\n\n                setScrollTop(scrolledToHeader);\n                setScrollBottom(scrolledToFooter);\n\n                onScroll?.(event);\n            },\n            [onScroll],\n        );\n\n        const renderOption = (option: OptionShape, index: number) => (\n            <Option key={option.key} {...getOptionProps(option, index)} />\n        );\n\n        const listRef = useRef<HTMLDivElement>(null);\n        const scrollbarRef = useRef<HTMLDivElement>(null);\n        const counter = createCounter();\n        const renderGroup = (group: GroupShape) => {\n            const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n                group.options.some((option) => option.key === selectedItemKey),\n            );\n            const handleSelectedItems = (items: OptionShape[]) => {\n                setSelectedItems(\n                    (\n                        selectedItems?.filter(\n                            ({ key: selectedItemKey }) =>\n                                !group.options.some((option) => option.key === selectedItemKey),\n                        ) ?? []\n                    ).concat(items),\n                );\n            };\n\n            return (\n                <Optgroup\n                    className={optionGroupClassName}\n                    label={group.label}\n                    key={group.label}\n                    size={size}\n                    options={group.options}\n                    selectedItems={groupSelectedItems}\n                    setSelectedItems={handleSelectedItems}\n                    search={search}\n                    multiple={multiple}\n                    {...groupOptionProps}\n                >\n                    {group.options.map((option) => renderOption(option, counter()))}\n                </Optgroup>\n            );\n        };\n\n        const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;\n\n        const [measured, height] = useVisibleOptions({\n            visibleOptions,\n            listRef,\n            open,\n            options,\n            actualOptionsCount,\n            size: actualOptionsCount\n                ? (() => {\n                      switch (typeof size) {\n                          case 'string':\n                              throw new Error(\n                                  'OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type',\n                              );\n                          default:\n                              return size;\n                      }\n                  })()\n                : undefined,\n        });\n\n        if (options.length === 0 && !emptyPlaceholder && !header && !footer) {\n            return null;\n        }\n\n        const renderListItems = () => (\n            <React.Fragment>\n                {options.map((option) =>\n                    isGroup(option) ? renderGroup(option) : renderOption(option, counter()),\n                )}\n\n                {emptyPlaceholder && options.length === 0 && (\n                    <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n                )}\n            </React.Fragment>\n        );\n\n        const renderWithCustomScrollbar = () => {\n            const scrollableNodeProps = {\n                onScroll: handleScroll,\n                'data-test-id': dataTestId,\n                ref: ref as React.RefObject<HTMLDivElement>,\n            };\n\n            return (\n                <Scrollbar\n                    className={cn(styles.scrollable, scrollbarClassName)}\n                    ref={scrollbarRef}\n                    style={{ height }}\n                    horizontalAutoStretch={optionsListWidth === 'content'}\n                    scrollableNodeProps={scrollableNodeProps}\n                    contentNodeProps={{ ref: listRef }}\n                    maskProps={{\n                        /*\n                         * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'\n                         * высота опции всегда будет равна высоте одной строчки)\n                         */\n                        className: cn({\n                            [styles.mask]: optionsListWidth === 'content' && !measured,\n                        }),\n                    }}\n                >\n                    {renderListItems()}\n                </Scrollbar>\n            );\n        };\n\n        const renderWithNativeScrollbar = () => (\n            <div\n                className={cn(styles.scrollable, scrollbarClassName)}\n                ref={mergeRefs([listRef, ref])}\n                onScroll={handleScroll}\n                style={{ height }}\n            >\n                {renderListItems()}\n            </div>\n        );\n\n        const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n        return (\n            <div\n                {...(nativeScrollbar && { 'data-test-id': dataTestId })}\n                className={cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className)}\n            >\n                {header && (\n                    <div\n                        className={cn(styles.optionsListHeader, {\n                            [styles.headerHighlighted]: !scrollTop,\n                        })}\n                        onMouseEnter={resetHighlightedIndex}\n                    >\n                        {header}\n                    </div>\n                )}\n\n                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n                {showFooter && footer && (\n                    <div\n                        onMouseEnter={resetHighlightedIndex}\n                        className={cn(styles.optionsListFooter, footerClassName, {\n                            [styles.withBorder]:\n                                visibleOptions &&\n                                flatOptions.length > visibleOptions &&\n                                !scrollBottom,\n                        })}\n                    >\n                        {footer}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":["Optgroup","DefaultOptgroup"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { useNativeScrollbar } from '../../hooks/use-native-scrollbar';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, useVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nconst createCounter = () => {\n    let count = 0;\n\n    // eslint-disable-next-line no-plusplus\n    return () => count++;\n};\n\nexport const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n    (\n        {\n            size = 48,\n            className,\n            optionGroupClassName,\n            footerClassName,\n            scrollbarClassName,\n            Option,\n            getOptionProps,\n            groupOptionProps = {},\n            options = [],\n            Optgroup = DefaultOptgroup,\n            dataTestId,\n            emptyPlaceholder,\n            visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n            onScroll,\n            open,\n            header,\n            footer,\n            showFooter = true,\n            optionsListWidth,\n            nativeScrollbar: nativeScrollbarProp,\n            flatOptions = [],\n            setHighlightedIndex,\n            selectedItems,\n            search,\n            setSelectedItems,\n            multiple,\n            limitDynamicOptionGroupSize = false,\n            client,\n        },\n        ref,\n    ) => {\n        const [scrollTop, setScrollTop] = useState(true);\n        const [scrollBottom, setScrollBottom] = useState(false);\n\n        const nativeScrollbar = useNativeScrollbar({\n            nativeScrollbar: nativeScrollbarProp,\n            client,\n        });\n\n        const handleScroll = useCallback(\n            (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n                const scrolledToHeader = event.currentTarget.scrollTop <= 0;\n                const scrolledToFooter =\n                    event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=\n                    event.currentTarget.scrollTop;\n\n                setScrollTop(scrolledToHeader);\n                setScrollBottom(scrolledToFooter);\n\n                onScroll?.(event);\n            },\n            [onScroll],\n        );\n\n        const renderOption = (option: OptionShape, index: number) => (\n            <Option key={option.key} {...getOptionProps(option, index)} />\n        );\n\n        const listRef = useRef<HTMLDivElement>(null);\n        const scrollbarRef = useRef<HTMLDivElement>(null);\n        const counter = createCounter();\n        const renderGroup = (group: GroupShape) => {\n            const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n                group.options.some((option) => option.key === selectedItemKey),\n            );\n            const handleSelectedItems = (items: OptionShape[]) => {\n                setSelectedItems(\n                    (\n                        selectedItems?.filter(\n                            ({ key: selectedItemKey }) =>\n                                !group.options.some((option) => option.key === selectedItemKey),\n                        ) ?? []\n                    ).concat(items),\n                );\n            };\n\n            return (\n                <Optgroup\n                    className={optionGroupClassName}\n                    label={group.label}\n                    key={group.label}\n                    size={size}\n                    options={group.options}\n                    selectedItems={groupSelectedItems}\n                    setSelectedItems={handleSelectedItems}\n                    search={search}\n                    multiple={multiple}\n                    {...groupOptionProps}\n                >\n                    {group.options.map((option) => renderOption(option, counter()))}\n                </Optgroup>\n            );\n        };\n\n        const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;\n\n        const [measured, height] = useVisibleOptions({\n            visibleOptions,\n            listRef,\n            open,\n            options,\n            actualOptionsCount,\n            size: actualOptionsCount\n                ? (() => {\n                      switch (typeof size) {\n                          case 'string':\n                              throw new Error(\n                                  'OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type',\n                              );\n                          default:\n                              return size;\n                      }\n                  })()\n                : undefined,\n        });\n\n        if (options.length === 0 && !emptyPlaceholder && !header && !footer) {\n            return null;\n        }\n\n        const renderListItems = () => (\n            <React.Fragment>\n                {options.map((option) =>\n                    isGroup(option) ? renderGroup(option) : renderOption(option, counter()),\n                )}\n\n                {emptyPlaceholder && options.length === 0 && (\n                    <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n                )}\n            </React.Fragment>\n        );\n\n        const renderWithCustomScrollbar = () => {\n            const scrollableNodeProps = {\n                onScroll: handleScroll,\n                'data-test-id': dataTestId,\n                ref: ref as React.RefObject<HTMLDivElement>,\n            };\n\n            return (\n                <Scrollbar\n                    className={cn(styles.scrollable, scrollbarClassName)}\n                    ref={scrollbarRef}\n                    style={{ height }}\n                    horizontalAutoStretch={optionsListWidth === 'content'}\n                    scrollableNodeProps={scrollableNodeProps}\n                    contentNodeProps={{ ref: listRef }}\n                    maskProps={{\n                        /*\n                         * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'\n                         * высота опции всегда будет равна высоте одной строчки)\n                         */\n                        className: cn({\n                            [styles.mask]: optionsListWidth === 'content' && !measured,\n                        }),\n                    }}\n                >\n                    {renderListItems()}\n                </Scrollbar>\n            );\n        };\n\n        const renderWithNativeScrollbar = () => (\n            <div\n                className={cn(styles.scrollable, scrollbarClassName)}\n                ref={mergeRefs([listRef, ref])}\n                onScroll={handleScroll}\n                style={{ height }}\n            >\n                {renderListItems()}\n            </div>\n        );\n\n        const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n        return (\n            <div\n                {...(nativeScrollbar && { 'data-test-id': dataTestId })}\n                className={cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className)}\n            >\n                {header && (\n                    <div\n                        className={cn(styles.optionsListHeader, {\n                            [styles.headerHighlighted]: !scrollTop,\n                        })}\n                        onMouseEnter={resetHighlightedIndex}\n                    >\n                        {header}\n                    </div>\n                )}\n\n                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n                {showFooter && footer && (\n                    <div\n                        onMouseEnter={resetHighlightedIndex}\n                        className={cn(styles.optionsListFooter, footerClassName, {\n                            [styles.withBorder]:\n                                visibleOptions &&\n                                flatOptions.length > visibleOptions &&\n                                !scrollBottom,\n                        })}\n                    >\n                        {footer}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n"],"names":["Optgroup","DefaultOptgroup"],"mappings":"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"}

package/modern/components/options-list/index.css

@@ -11,33 +11,33 @@
     --gap-24: var(--gap-xl);
 } :root {
     --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
-} .select__optionsList_soul5 {
+} .select__optionsList_qcd3h {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
-} .select__optionsListHeader_soul5 {
+} .select__optionsListHeader_qcd3h {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
     transition: border-color 0.2s ease;
-} .select__optionsListHeader_soul5.select__headerHighlighted_soul5 {
+} .select__optionsListHeader_qcd3h.select__headerHighlighted_qcd3h {
         border-bottom-color: var(--color-light-neutral-300);
-    } .select__optionsListFooter_soul5 {
+    } .select__optionsListFooter_qcd3h {
     position: sticky;
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease;
-} .select__optionsListFooter_soul5.select__withBorder_soul5 {
+} .select__optionsListFooter_qcd3h.select__withBorder_qcd3h {
         border-top-color: var(--color-light-neutral-300);
-    } .select__scrollable_soul5 {
+    } .select__scrollable_qcd3h {
     overflow: auto;
     width: 100%;
-} .select__mask_soul5 {
+} .select__mask_qcd3h {
     min-width: 4000px;
-} .select__emptyPlaceholder_soul5 {
+} .select__emptyPlaceholder_qcd3h {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__size-72_soul5 .select__emptyPlaceholder_soul5 {
+} .select__size-72_qcd3h .select__emptyPlaceholder_qcd3h {
     padding: var(--gap-24) var(--gap-16);
 }

package/modern/components/options-list/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optionsList":"select__optionsList_soul5","optionsListHeader":"select__optionsListHeader_soul5","headerHighlighted":"select__headerHighlighted_soul5","optionsListFooter":"select__optionsListFooter_soul5","withBorder":"select__withBorder_soul5","scrollable":"select__scrollable_soul5","mask":"select__mask_soul5","emptyPlaceholder":"select__emptyPlaceholder_soul5","size-72":"select__size-72_soul5"};
+const styles = {"optionsList":"select__optionsList_qcd3h","optionsListHeader":"select__optionsListHeader_qcd3h","headerHighlighted":"select__headerHighlighted_qcd3h","optionsListFooter":"select__optionsListFooter_qcd3h","withBorder":"select__withBorder_qcd3h","scrollable":"select__scrollable_qcd3h","mask":"select__mask_qcd3h","emptyPlaceholder":"select__emptyPlaceholder_qcd3h","size-72":"select__size-72_qcd3h"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/search/Component.js

@@ -1,10 +1,26 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Input } from '@alfalab/core-components-input/modern';
+import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
+import { InputMobile } from '@alfalab/core-components-input/modern/mobile';
 import { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';
 import styles from './index.module.css.js';
 
-const Search = forwardRef(({ clear = true, placeholder = 'Поиск', className, leftAddons = React.createElement(MagnifierMIcon, { color: '#86868A' }), ...restProps }, ref) => (React.createElement(Input, { ref: ref, className: cn(styles.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear, ...restProps })));
+const getComponent = (client) => {
+    switch (client) {
+        case 'desktop':
+            return InputDesktop;
+        case 'mobile':
+            return InputMobile;
+        default:
+            return Input;
+    }
+};
+const Search = forwardRef(({ clear = true, placeholder = 'Поиск', className, leftAddons = React.createElement(MagnifierMIcon, { color: '#86868A' }), ...restProps }, ref) => {
+    const { client } = restProps;
+    const Component = getComponent(client);
+    return (React.createElement(Component, { ref: ref, className: cn(styles.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear, ...restProps }));
+});
 
 export { Search };
 //# sourceMappingURL=Component.js.map

package/modern/components/search/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/search/Component.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { Input } from '@alfalab/core-components-input';\nimport { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';\n\nimport { type SearchProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n    (\n        {\n            clear = true,\n            placeholder = 'Поиск',\n            className,\n            leftAddons = <MagnifierMIcon color='#86868A' />,\n            ...restProps\n        },\n        ref,\n    ) => (\n        <Input\n            ref={ref}\n            className={cn(styles.component, className)}\n            placeholder={placeholder}\n            leftAddons={leftAddons}\n            clear={clear}\n            {...restProps}\n        />\n    ),\n);\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,MAAM,GAAG,UAAU,CAC5B,CACI,EACI,KAAK,GAAG,IAAI,EACZ,WAAW,GAAG,OAAO,EACrB,SAAS,EACT,UAAU,GAAG,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAC/C,GAAG,SAAS,EACf,EACD,GAAG,MAEH,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACR,GAAA,SAAS,EACf,CAAA,CACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/search/Component.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { Input } from '@alfalab/core-components-input';\nimport { InputDesktop } from '@alfalab/core-components-input/desktop';\nimport { InputMobile } from '@alfalab/core-components-input/mobile';\nimport { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';\n\nimport { type SearchProps } from '../../typings';\n\nimport styles from './index.module.css';\n\nconst getComponent = (client: SearchProps['client']) => {\n    switch (client) {\n        case 'desktop':\n            return InputDesktop;\n        case 'mobile':\n            return InputMobile;\n        default:\n            return Input;\n    }\n};\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n    (\n        {\n            clear = true,\n            placeholder = 'Поиск',\n            className,\n            leftAddons = <MagnifierMIcon color='#86868A' />,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { client } = restProps;\n\n        const Component = getComponent(client);\n\n        return (\n            <Component\n                ref={ref}\n                className={cn(styles.component, className)}\n                placeholder={placeholder}\n                leftAddons={leftAddons}\n                clear={clear}\n                {...restProps}\n            />\n        );\n    },\n);\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,YAAY,GAAG,CAAC,MAA6B,KAAI;AACnD,IAAA,QAAQ,MAAM;AACV,QAAA,KAAK,SAAS;AACV,YAAA,OAAO,YAAY;AACvB,QAAA,KAAK,QAAQ;AACT,YAAA,OAAO,WAAW;AACtB,QAAA;AACI,YAAA,OAAO,KAAK;AACnB;AACL,CAAC;AAEM,MAAM,MAAM,GAAG,UAAU,CAC5B,CACI,EACI,KAAK,GAAG,IAAI,EACZ,WAAW,GAAG,OAAO,EACrB,SAAS,EACT,UAAU,GAAG,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EAC/C,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS;AAE5B,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC;AAEtC,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EAAA,GACR,SAAS,EAAA,CACf;AAEV,CAAC;;;;"}

package/modern/components/search/index.css

@@ -1,3 +1,3 @@
-.select__component_1s09e.select__component_1s09e {
+.select__component_1h1u7.select__component_1h1u7 {
     width: auto;
 }

package/modern/components/search/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"select__component_1s09e"};
+const styles = {"component":"select__component_1h1u7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map