@alfalab/core-components-select 19.1.10 → 19.2.0

package/components/arrow/index.css

@@ -9,7 +9,7 @@
     --select-arrow-color: var(--color-light-neutral-translucent-700);
     --select-arrow-disabled-color: var(--color-light-neutral-translucent-500);
 }
-.select__arrow_kz9bu {
+.select__arrow_13157 {
     display: block;
     width: 24px;
     height: 24px;
@@ -19,15 +19,15 @@
         transform 0.15s ease-in-out,
         opacity 0.2s ease;
 }
-.select__arrow_kz9bu.select__disabled_kz9bu {
+.select__arrow_13157.select__disabled_13157 {
         color: var(--select-arrow-disabled-color);
     }
-.select__arrow_kz9bu.select__size-40_kz9bu {
+.select__arrow_13157.select__size-40_13157 {
         width: auto;
         width: initial;
         height: auto;
         height: initial;
     }
-.select__open_kz9bu {
+.select__open_13157 {
     transform: var(--arrow-transform);
 }

package/components/arrow/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"arrow":"select__arrow_kz9bu","disabled":"select__disabled_kz9bu","size-40":"select__size-40_kz9bu","open":"select__open_kz9bu"};
+var styles = {"arrow":"select__arrow_13157","disabled":"select__disabled_13157","size-40":"select__size-40_13157","open":"select__open_13157"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/base-checkmark/index.css

@@ -2,32 +2,32 @@
     --gap-s: 12px;
     --gap-12: var(--gap-s);
 }
-.select__checkmark_dqysh {
+.select__checkmark_105cp {
     flex-shrink: 0;
     box-sizing: border-box;
 }
-.select__checkmark_dqysh.select__before_dqysh {
+.select__checkmark_105cp.select__before_105cp {
         margin-right: var(--gap-12);
     }
-.select__checkmark_dqysh.select__after_dqysh {
+.select__checkmark_105cp.select__after_105cp {
         margin-left: var(--gap-12);
     }
-.select__checkmark_dqysh.select__start_dqysh {
+.select__checkmark_105cp.select__start_105cp {
         align-self: start;
     }
-.select__checkmark_dqysh.select__center_dqysh {
+.select__checkmark_105cp.select__center_105cp {
         align-self: center;
     }
-.select__singleIcon_dqysh {
+.select__singleIcon_105cp {
     flex-shrink: 0;
     opacity: 0;
 }
-.select__singleIcon_dqysh.select__before_dqysh {
+.select__singleIcon_105cp.select__before_105cp {
         margin-right: var(--gap-12);
     }
-.select__singleIcon_dqysh.select__after_dqysh {
+.select__singleIcon_105cp.select__after_105cp {
         margin-left: var(--gap-12);
     }
-.select__singleIcon_dqysh.select__selected_dqysh {
+.select__singleIcon_105cp.select__selected_105cp {
         opacity: 1;
     }

package/components/base-checkmark/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"checkmark":"select__checkmark_dqysh","before":"select__before_dqysh","after":"select__after_dqysh","start":"select__start_dqysh","center":"select__center_dqysh","singleIcon":"select__singleIcon_dqysh","selected":"select__selected_dqysh"};
+var styles = {"checkmark":"select__checkmark_105cp","before":"select__before_105cp","after":"select__after_105cp","start":"select__start_105cp","center":"select__center_105cp","singleIcon":"select__singleIcon_105cp","selected":"select__selected_105cp"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/base-option/index.css

@@ -34,7 +34,7 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_psvdh {
+.select__option_1tmft {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,49 +50,49 @@
     cursor: pointer;
     min-height: var(--size-s-height);
 }
-.select__option_psvdh:not(.select__disabled_psvdh):active {
+.select__option_1tmft:not(.select__disabled_1tmft):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_psvdh.select__checkmarkBefore_psvdh {
+.select__option_1tmft.select__checkmarkBefore_1tmft {
         padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12);
     }
-.select__option_psvdh.select__checkmarkBefore_psvdh.select__mobile_psvdh {
+.select__option_1tmft.select__checkmarkBefore_1tmft.select__mobile_1tmft {
             padding-left: var(--gap-16);
         }
-.select__option_psvdh.select__checkmarkAfter_psvdh.select__checkmarkAfter_psvdh {
+.select__option_1tmft.select__checkmarkAfter_1tmft.select__checkmarkAfter_1tmft {
         padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0);
     }
-.select__option_psvdh.select__checkmarkAfter_psvdh.select__checkmarkAfter_psvdh.select__size-72_psvdh {
+.select__option_1tmft.select__checkmarkAfter_1tmft.select__checkmarkAfter_1tmft.select__size-72_1tmft {
             padding-right: var(--gap-16);
         }
-.select__option_psvdh.select__checkmarkAfter_psvdh.select__checkmarkAfter_psvdh.select__mobile_psvdh {
+.select__option_1tmft.select__checkmarkAfter_1tmft.select__checkmarkAfter_1tmft.select__mobile_1tmft {
             padding-right: var(--gap-20);
         }
-.select__option_psvdh.select__textContent_psvdh {
+.select__option_1tmft.select__textContent_1tmft {
         padding: var(--gap-12);
     }
-.select__option_psvdh.select__textContent_psvdh.select__size-72_psvdh {
+.select__option_1tmft.select__textContent_1tmft.select__size-72_1tmft {
             padding-left: var(--gap-16);
             padding-right: var(--gap-16);
         }
-.select__option_psvdh.select__textContent_psvdh.select__mobile_psvdh {
+.select__option_1tmft.select__textContent_1tmft.select__mobile_1tmft {
             padding: var(--gap-16) var(--gap-20);
         }
-.select__selected_psvdh {
+.select__selected_1tmft {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_psvdh {
+.select__highlighted_1tmft {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__disabled_psvdh {
+.select__disabled_1tmft {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_psvdh {
+.select__content_1tmft {
     flex: 1;
 }

package/components/base-option/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_psvdh","disabled":"select__disabled_psvdh","checkmarkBefore":"select__checkmarkBefore_psvdh","mobile":"select__mobile_psvdh","checkmarkAfter":"select__checkmarkAfter_psvdh","size-72":"select__size-72_psvdh","textContent":"select__textContent_psvdh","selected":"select__selected_psvdh","highlighted":"select__highlighted_psvdh","content":"select__content_psvdh"};
+var styles = {"option":"select__option_1tmft","disabled":"select__disabled_1tmft","checkmarkBefore":"select__checkmarkBefore_1tmft","mobile":"select__mobile_1tmft","checkmarkAfter":"select__checkmarkAfter_1tmft","size-72":"select__size-72_1tmft","textContent":"select__textContent_1tmft","selected":"select__selected_1tmft","highlighted":"select__highlighted_1tmft","content":"select__content_1tmft"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/base-select/Component.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
-var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var computeScrollIntoView = require('compute-scroll-into-view');
 var downshift = require('downshift');
 var coreComponentsShared = require('@alfalab/core-components-shared');
-var hooks = require('@alfalab/hooks');
 var utils = require('../../utils.js');
 var Component = require('../native-select/Component.js');
 var index_module = require('./index.module.css.js');
@@ -32,13 +30,13 @@ function (props, ref) {
     var _b, _c;
     var dataTestId = props.dataTestId, className = props.className, fieldClassName = props.fieldClassName, optionGroupClassName = props.optionGroupClassName, optionsListClassName = props.optionsListClassName, optionClassName = props.optionClassName, popperClassName = props.popperClassName, options = props.options, _d = props.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = props.multiple, multiple = _e === void 0 ? false : _e, _f = props.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = props.disabled, disabled = _g === void 0 ? false : _g, _h = props.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = props.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = props.nativeSelect, nativeSelect = _k === void 0 ? false : _k, _l = props.defaultOpen, defaultOpen = _l === void 0 ? false : _l, openProp = props.open, _m = props.popoverPosition, popoverPosition = _m === void 0 ? 'bottom-start' : _m, _o = props.preventFlip, preventFlip = _o === void 0 ? true : _o, _p = props.optionsListWidth, optionsListWidth = _p === void 0 ? 'content' : _p, name = props.name, id = props.id, selected = props.selected, _q = props.size, size = _q === void 0 ? 48 : _q, _r = props.optionsSize, optionsSize = _r === void 0 ? size : _r, error = props.error, hint = props.hint, block = props.block, label = props.label, labelView = props.labelView, placeholder = props.placeholder, _s = props.fieldProps, fieldProps = _s === void 0 ? {} : _s, _t = props.optionsListProps, optionsListProps = _t === void 0 ? {} : _t, _u = props.optionProps, optionProps = _u === void 0 ? {} : _u, _v = props.groupOptionProps, groupOptionProps = _v === void 0 ? {} : _v, _w = props.searchProps, searchProps = _w === void 0 ? {} : _w, _x = props.showSearch, showSearch = _x === void 0 ? false : _x, valueRenderer = props.valueRenderer, onChange = props.onChange, onOpen = props.onOpen, onFocus = props.onFocus, onBlur = props.onBlur, onScroll = props.onScroll, onClear = props.onClear, clear = props.clear, Arrow = props.Arrow, _y = props.Field, Field = _y === void 0 ? function () { return null; } : _y, _z = props.OptionsList, OptionsList = _z === void 0 ? function () { return null; } : _z, _0 = props.Optgroup, Optgroup = _0 === void 0 ? function () { return null; } : _0, _1 = props.Option, Option = _1 === void 0 ? function () { return null; } : _1, _2 = props.Search, Search = _2 === void 0 ? function () { return null; } : _2, updatePopover = props.updatePopover, zIndexPopover = props.zIndexPopover, _3 = props.showEmptyOptionsList, showEmptyOptionsList = _3 === void 0 ? false : _3, visibleOptions = props.visibleOptions, view = props.view, _4 = props.isBottomSheet, isBottomSheet = _4 === void 0 ? true : _4, footer = props.footer, swipeable = props.swipeable, modalProps = props.modalProps, popoverProps = props.popoverProps, modalFooterProps = props.modalFooterProps, modalHeaderProps = props.modalHeaderProps, bottomSheetProps = props.bottomSheetProps, Popover = props.Popover, ModalMobile = props.ModalMobile, BottomSheet = props.BottomSheet, limitDynamicOptionGroupSize = props.limitDynamicOptionGroupSize, _5 = props.environment, environment = _5 === void 0 ? coreComponentsShared.isClient() ? window : undefined : _5;
     var shouldSearchBlurRef = React.useRef(true);
-    var rootRef = React.useRef(null);
     var fieldRef = React.useRef(null);
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var searchRef = React.useRef(null);
     var scrollableContainerRef = React.useRef(null);
     var onOpenRef = React.useRef(onOpen);
+    var optionsListCtrlRef = React.useRef(null);
     var _6 = React__default.default.useState(''), searchState = _6[0], setSearchState = _6[1];
     var _7 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
         ? [searchProps.value, searchProps.onChange]
@@ -60,17 +58,26 @@ function (props, ref) {
     var scrollIntoView = function (node) {
         if (!node || view === 'mobile')
             return;
-        requestAnimationFrame(function () {
-            var actions = computeScrollIntoView.compute(node, {
-                boundary: listRef.current,
-                block: 'nearest',
-                scrollMode: 'if-needed',
-            });
-            actions.forEach(function (action) {
-                var el = action.el, top = action.top;
-                el.scrollTop = top;
+        var optionsListCtrl = optionsListCtrlRef.current;
+        if (optionsListCtrl) {
+            var dataIndex = node.getAttribute('data-index');
+            if (dataIndex) {
+                optionsListCtrl.scrollToIndex(Number(dataIndex));
+            }
+        }
+        else {
+            requestAnimationFrame(function () {
+                var actions = computeScrollIntoView.compute(node, {
+                    boundary: listRef.current,
+                    block: 'nearest',
+                    scrollMode: 'if-needed',
+                });
+                actions.forEach(function (action) {
+                    var el = action.el, top = action.top;
+                    el.scrollTop = top;
+                });
             });
-        });
+        }
     };
     var useMultipleSelectionProps = {
         itemToString: itemToString,
@@ -279,6 +286,7 @@ function (props, ref) {
     var getOptionProps = function (option, index) {
         var _a;
         return (tslib.__assign(tslib.__assign({}, optionProps), { mobile: view === 'mobile', className: cn__default.default(optionClassName, (_a = {},
+                _a[index_module.option] = view === 'desktop',
                 _a[mobile_module.option] = view === 'mobile',
                 _a)), innerProps: getItemProps({
                 index: index,
@@ -293,6 +301,7 @@ function (props, ref) {
                     shouldSearchBlurRef.current = true;
                     (_b = fieldRef.current) === null || _b === void 0 ? void 0 : _b.focus();
                 },
+                'data-index': index,
             }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
                 var key = _a.key;
                 return key === option.key;
@@ -308,35 +317,6 @@ function (props, ref) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var calcOptionsListWidth = React.useCallback(function () {
-        if (view === 'desktop' && listRef.current) {
-            var widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
-            var optionsListMinWidth = rootRef.current
-                ? rootRef.current.getBoundingClientRect().width
-                : 0;
-            listRef.current.removeAttribute('style');
-            listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
-        }
-    }, [view, optionsListWidth]);
-    React.useEffect(function () {
-        if (view === 'desktop') {
-            var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
-            var observer_1 = new ResizeObserver_1(calcOptionsListWidth);
-            if (rootRef.current) {
-                observer_1.observe(rootRef.current);
-            }
-            return function () {
-                observer_1.disconnect();
-            };
-        }
-        return coreComponentsShared.fnUtils.noop;
-    }, [view, calcOptionsListWidth, open, optionsListWidth]);
-    hooks.useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
-        open,
-        optionsListWidth,
-        filteredOptions,
-        selectedItems,
-    ]);
     var renderValue = function () {
         return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
     };
@@ -397,19 +377,26 @@ function (props, ref) {
         return undefined;
     };
     var renderOptionsList = function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
             return null;
         var listProps = optionsListProps;
-        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobile_module.optionsListWrapper, view === 'desktop' && index_module.optionsListWrapper) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobile_module.optionsList] = view === 'mobile', _a), listProps.className), scrollbarClassName: cn__default.default((_b = {}, _b[mobile_module.scrollbar] = view === 'mobile', _b), listProps.scrollbarClassName), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, groupOptionProps: groupOptionProps, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
-                    _c[mobile_module.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize, client: view })),
+        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobile_module.optionsListWrapper, view === 'desktop' && index_module.optionsListWrapper, (_a = {},
+                _a[index_module.matchContent] = view === 'desktop' && optionsListWidth === 'content',
+                _a)) }),
+            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ctrlRef: optionsListCtrlRef, ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_b = {},
+                    _b[mobile_module.optionsList] = view === 'mobile',
+                    _b), listProps.className), scrollbarClassName: cn__default.default((_c = {},
+                    _c[index_module.scrollbar] = view === 'desktop',
+                    _c[mobile_module.scrollbar] = view === 'mobile',
+                    _c), listProps.scrollbarClassName), scrollableNodeClassName: cn__default.default((_d = {}, _d[index_module.scrollable] = view === 'desktop', _d)), contentNodeClassName: cn__default.default((_e = {}, _e[index_module.content] = view === 'desktop', _e)), listNodeClassName: cn__default.default((_f = {}, _f[index_module.list] = view === 'desktop', _f)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, groupOptionProps: groupOptionProps, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_g = {},
+                    _g[mobile_module.optionGroup] = view === 'mobile',
+                    _g)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize, client: view })),
             view === 'desktop' && React__default.default.createElement("div", { className: index_module.optionsListBorder })));
     };
     var renderInPopover = function () {
         if (!nativeSelect && Popover) {
-            return (React__default.default.createElement(Popover, tslib.__assign({}, popoverProps, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(index_module.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }), renderOptionsList()));
+            return (React__default.default.createElement(Popover, tslib.__assign({}, popoverProps, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(index_module.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover, useAnchorWidth: true, widthProp: optionsListWidth === 'field' ? 'width' : 'minWidth' }), renderOptionsList()));
         }
         return null;
     };
@@ -453,7 +440,7 @@ function (props, ref) {
         }
         return null;
     };
-    return (React__default.default.createElement("div", tslib.__assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn__default.default(index_module.component, (_a = {}, _a[index_module.block] = block, _a), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
+    return (React__default.default.createElement("div", tslib.__assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn__default.default(index_module.component, (_a = {}, _a[index_module.block] = block, _a), className), onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
         React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open, size: size, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
                 onBlur: handleFieldBlur,