@alfalab/core-components 46.1.0-beta.1 → 46.1.0-beta.2

package/scrollbar/esm/Component.js

@@ -1,5 +1,5 @@
 import { __rest, __assign, __spreadArray } from 'tslib';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import throttle from 'lodash.throttle';
@@ -9,7 +9,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import canUseDOM from 'can-use-dom';
 
 // Helper function to retrieve options from element attributes
-function getElementWindow(element) {
+function getElementWindow$1(element) {
     if (!element ||
         !element.ownerDocument ||
         !element.ownerDocument.defaultView) {
@@ -59,7 +59,7 @@ var SimpleBar = /** @class */ (function () {
          * On scroll event handling
          */
         this.onScroll = function () {
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             if (!_this.scrollXTicking) {
                 elWindow.requestAnimationFrame(_this.scrollX);
                 _this.scrollXTicking = true;
@@ -211,7 +211,7 @@ var SimpleBar = /** @class */ (function () {
          */
         this.onEndDrag = function (e) {
             var elDocument = getElementDocument(_this.el);
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             e.preventDefault();
             e.stopPropagation();
             _this.el.classList.remove(_this.classNames.dragging);
@@ -314,7 +314,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.getOffset = function (el) {
         var rect = el.getBoundingClientRect();
         var elDocument = getElementDocument(el);
-        var elWindow = getElementWindow(el);
+        var elWindow = getElementWindow$1(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
@@ -415,7 +415,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.initListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
@@ -456,7 +456,7 @@ var SimpleBar = /** @class */ (function () {
         });
     };
     SimpleBar.prototype.recalculate = function () {
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
         var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
@@ -634,7 +634,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.onDragStart = function (e, axis) {
         if (axis === void 0) { axis = 'y'; }
         var elDocument = getElementDocument(this.el);
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         var scrollbar = this.axis[axis].scrollbar;
         // Measure how far the user's mouse is from the top of the scrollbar drag handle.
         var eventOffset = axis === 'y' ? e.pageY : e.pageX;
@@ -658,7 +658,7 @@ var SimpleBar = /** @class */ (function () {
         if (axis === void 0) { axis = 'y'; }
         if (!this.options.clickOnTrack)
             return;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
         var scrollbar = this.axis[axis].scrollbar;
         var scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
@@ -724,7 +724,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.removeListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
@@ -844,12 +844,31 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
+function getElementWindow(element) {
+    var _a;
+    return (_a = element.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+}
+function elementHasAbsPosChild(element) {
+    var hasAbsPosChild = false;
+    var elementWindow = getElementWindow(element);
+    for (var i = 0; i < element.children.length; i++) {
+        var child = element.children[i];
+        var childStyle = elementWindow.getComputedStyle(child);
+        if (childStyle.position === 'absolute') {
+            hasAbsPosChild = true;
+            break;
+        }
+    }
+    return hasAbsPosChild;
+}
 var Scrollbar = React.forwardRef(function (_a, ref) {
-    var _b = _a.colors, colors = _b === void 0 ? 'default' : _b, className = _a.className, children = _a.children, _c = _a.scrollableNodeProps, scrollableNodeProps = _c === void 0 ? { ref: null } : _c, _d = _a.contentNodeProps, contentNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.forceVisible, forceVisible = _f === void 0 ? false : _f, _g = _a.autoHideTimeout, autoHideTimeout = _g === void 0 ? 1000 : _g, _h = _a.clickOnTrack, clickOnTrack = _h === void 0 ? true : _h, _j = _a.horizontalAutoStretch, horizontalAutoStretch = _j === void 0 ? false : _j, _k = _a.widthPropName, widthPropName = _k === void 0 ? 'minWidth' : _k, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
+    var _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
     var elRef = useRef(null);
     var scrollableNodeRef = useRef(null);
     var contentNodeRef = useRef(null);
     var maskNodeRef = useRef(null);
+    var _m = useState(), width = _m[0], setWidth = _m[1];
     var colorStyles = colorStylesMap[colors];
     useEffect(function () {
         var instance;
@@ -877,11 +896,21 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
     useEffect(function () {
         var mutationObserver = null;
         var contentNode = contentNodeRef.current;
-        var rootNode = elRef.current;
-        var scrollableNode = scrollableNodeRef.current;
         var maskNode = maskNodeRef.current;
         var setMinWidth = throttle(function () {
-            if (contentNode && rootNode && scrollableNode && maskNode) {
+            if (!contentNode)
+                return;
+            if (elementHasAbsPosChild(contentNode)) {
+                /*
+                 * Измеряем scrollWidth у contentNode, т.к. элементы внутри него позицинированы абсолютно
+                 */
+                setWidth(Math.ceil(contentNode.scrollWidth));
+            }
+            else {
+                if (!maskNode)
+                    return;
+                var prevMinWidth = maskNode.style.minWidth;
+                var prevDisplay = contentNode.style.display;
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
                  * Затем контенту устанавливаем display: inline-block, чтобы его ширина была равна ширине содержимого.
@@ -889,13 +918,9 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
                 var contentRect = contentNode.getBoundingClientRect();
-                var newWidth = "".concat(Math.ceil(contentRect.width), "px");
-                var prevWidth = rootNode.style[widthPropName];
-                if (newWidth !== prevWidth) {
-                    rootNode.style[widthPropName] = newWidth;
-                }
-                contentNode.style.display = '';
-                maskNode.style.minWidth = '';
+                setWidth(Math.ceil(contentRect.width));
+                maskNode.style.minWidth = prevMinWidth;
+                contentNode.style.display = prevDisplay;
             }
         }, 200);
         if (horizontalAutoStretch && contentNode) {
@@ -907,14 +932,15 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
                 characterData: true,
             });
         }
+        else {
+            setWidth(undefined);
+        }
         return function () {
             setMinWidth.cancel();
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
         };
-    }, [widthPropName, horizontalAutoStretch]);
-    return (React.createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) }),
+    }, [horizontalAutoStretch]);
+    return (React.createElement("div", __assign({}, htmlAttributes, { style: __assign(__assign({}, htmlAttributes.style), (_b = {}, _b[widthPropName] = width, _b)), ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) }),
         React.createElement("div", { className: classNames.wrapper },
             React.createElement("div", { className: classNames.heightAutoObserverWrapperEl },
                 React.createElement("div", { className: classNames.heightAutoObserverEl })),
@@ -932,5 +958,6 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
         React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
             React.createElement("div", { className: classNames.scrollbar }))));
 });
+Scrollbar.displayName = 'Scrollbar';
 
 export { Scrollbar };

package/scrollbar/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import throttle from 'lodash.throttle';
@@ -8,7 +8,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import canUseDOM from 'can-use-dom';
 
 // Helper function to retrieve options from element attributes
-function getElementWindow(element) {
+function getElementWindow$1(element) {
     if (!element ||
         !element.ownerDocument ||
         !element.ownerDocument.defaultView) {
@@ -57,7 +57,7 @@ class SimpleBar {
          * On scroll event handling
          */
         this.onScroll = () => {
-            const elWindow = getElementWindow(this.el);
+            const elWindow = getElementWindow$1(this.el);
             if (!this.scrollXTicking) {
                 elWindow.requestAnimationFrame(this.scrollX);
                 this.scrollXTicking = true;
@@ -209,7 +209,7 @@ class SimpleBar {
          */
         this.onEndDrag = e => {
             const elDocument = getElementDocument(this.el);
-            const elWindow = getElementWindow(this.el);
+            const elWindow = getElementWindow$1(this.el);
             e.preventDefault();
             e.stopPropagation();
             this.el.classList.remove(this.classNames.dragging);
@@ -315,7 +315,7 @@ class SimpleBar {
     static getOffset(el) {
         const rect = el.getBoundingClientRect();
         const elDocument = getElementDocument(el);
-        const elWindow = getElementWindow(el);
+        const elWindow = getElementWindow$1(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
@@ -412,7 +412,7 @@ class SimpleBar {
         this.contentWrapperEl.setAttribute('aria-label', ariaLabel);
     }
     initListeners() {
-        const elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
@@ -453,7 +453,7 @@ class SimpleBar {
         });
     }
     recalculate() {
-        const elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow$1(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
         const isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
@@ -624,7 +624,7 @@ class SimpleBar {
      */
     onDragStart(e, axis = 'y') {
         const elDocument = getElementDocument(this.el);
-        const elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow$1(this.el);
         const scrollbar = this.axis[axis].scrollbar;
         // Measure how far the user's mouse is from the top of the scrollbar drag handle.
         const eventOffset = axis === 'y' ? e.pageY : e.pageX;
@@ -646,7 +646,7 @@ class SimpleBar {
     onTrackClick(e, axis = 'y') {
         if (!this.options.clickOnTrack)
             return;
-        const elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow$1(this.el);
         this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
         const scrollbar = this.axis[axis].scrollbar;
         const scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
@@ -710,7 +710,7 @@ class SimpleBar {
         }
     }
     removeListeners() {
-        const elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
@@ -827,11 +827,28 @@ const classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
+function getElementWindow(element) {
+    return element.ownerDocument.defaultView ?? window;
+}
+function elementHasAbsPosChild(element) {
+    let hasAbsPosChild = false;
+    const elementWindow = getElementWindow(element);
+    for (let i = 0; i < element.children.length; i++) {
+        const child = element.children[i];
+        const childStyle = elementWindow.getComputedStyle(child);
+        if (childStyle.position === 'absolute') {
+            hasAbsPosChild = true;
+            break;
+        }
+    }
+    return hasAbsPosChild;
+}
 const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', ...htmlAttributes }, ref) => {
     const elRef = useRef(null);
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
     const maskNodeRef = useRef(null);
+    const [width, setWidth] = useState();
     const colorStyles = colorStylesMap[colors];
     useEffect(() => {
         let instance;
@@ -859,11 +876,21 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
     useEffect(() => {
         let mutationObserver = null;
         const contentNode = contentNodeRef.current;
-        const rootNode = elRef.current;
-        const scrollableNode = scrollableNodeRef.current;
         const maskNode = maskNodeRef.current;
         const setMinWidth = throttle(() => {
-            if (contentNode && rootNode && scrollableNode && maskNode) {
+            if (!contentNode)
+                return;
+            if (elementHasAbsPosChild(contentNode)) {
+                /*
+                 * Измеряем scrollWidth у contentNode, т.к. элементы внутри него позицинированы абсолютно
+                 */
+                setWidth(Math.ceil(contentNode.scrollWidth));
+            }
+            else {
+                if (!maskNode)
+                    return;
+                const prevMinWidth = maskNode.style.minWidth;
+                const prevDisplay = contentNode.style.display;
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
                  * Затем контенту устанавливаем display: inline-block, чтобы его ширина была равна ширине содержимого.
@@ -871,13 +898,9 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
                 const contentRect = contentNode.getBoundingClientRect();
-                const newWidth = `${Math.ceil(contentRect.width)}px`;
-                const prevWidth = rootNode.style[widthPropName];
-                if (newWidth !== prevWidth) {
-                    rootNode.style[widthPropName] = newWidth;
-                }
-                contentNode.style.display = '';
-                maskNode.style.minWidth = '';
+                setWidth(Math.ceil(contentRect.width));
+                maskNode.style.minWidth = prevMinWidth;
+                contentNode.style.display = prevDisplay;
             }
         }, 200);
         if (horizontalAutoStretch && contentNode) {
@@ -889,14 +912,15 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
                 characterData: true,
             });
         }
+        else {
+            setWidth(undefined);
+        }
         return () => {
             setMinWidth.cancel();
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
+            mutationObserver?.disconnect();
         };
-    }, [widthPropName, horizontalAutoStretch]);
-    return (React.createElement("div", { ...htmlAttributes, ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) },
+    }, [horizontalAutoStretch]);
+    return (React.createElement("div", { ...htmlAttributes, style: { ...htmlAttributes.style, [widthPropName]: width }, ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) },
         React.createElement("div", { className: classNames.wrapper },
             React.createElement("div", { className: classNames.heightAutoObserverWrapperEl },
                 React.createElement("div", { className: classNames.heightAutoObserverEl })),
@@ -916,5 +940,6 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
         React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
             React.createElement("div", { className: classNames.scrollbar }))));
 });
+Scrollbar.displayName = 'Scrollbar';
 
 export { Scrollbar };

package/select/Component.responsive.js

@@ -20,5 +20,6 @@ var SelectResponsive = React.forwardRef(function (_a, ref) {
     var mobileProps = tslib.__assign(tslib.__assign({}, restProps), restProps.originalProps);
     return React__default.default.createElement(mobile_Component_mobile.SelectMobile, tslib.__assign({ fieldProps: fieldProps }, mobileProps, { ref: ref }));
 });
+SelectResponsive.displayName = 'SelectResponsive';
 
 exports.SelectResponsive = SelectResponsive;

package/select/components/base-select/Component.js

@@ -363,7 +363,7 @@ function (_a, ref) {
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.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[mobileStyles.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles.optionsListBorder })));
     };
     var renderInPopover = function () {

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

@@ -27,7 +27,7 @@ var createCounter = function () {
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -47,7 +47,16 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) {
+        var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+            return group.options.includes(item);
+        });
+        var handleSelectedItems = function (items) {
+            var _a;
+            setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+        };
+        return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }, group.options.map(function (option) { return renderOption(option, counter()); })));
+    };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

package/select/components/virtual-options-list/Component.js

@@ -23,7 +23,7 @@ require('./index.css');
 
 var VirtualOptionsList = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex;
+    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search, multiple = _a.multiple;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -108,13 +108,25 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
         return rowVirtualizer.virtualItems.map(function (virtualRow) {
             var _a;
             var option = flatOptions[virtualRow.index];
-            var group = options[groupStartIndexes[virtualRow.index]];
+            var renderGroup = function () {
+                var group = options[groupStartIndexes[virtualRow.index]];
+                if (!group)
+                    return null;
+                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                    return group.options.includes(item);
+                });
+                var handleSelectedItems = function (items) {
+                    var _a;
+                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+                };
+                return (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }));
+            };
             return (React__default.default.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn__default.default(styles.virtualRow, (_a = {},
                     _a[styles.highlighted] = highlightedIndex === virtualRow.index,
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
+                renderGroup(),
                 !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/cssm/Component.responsive.js

@@ -20,5 +20,6 @@ var SelectResponsive = React.forwardRef(function (_a, ref) {
     var mobileProps = tslib.__assign(tslib.__assign({}, restProps), restProps.originalProps);
     return React__default.default.createElement(mobile_Component_mobile.SelectMobile, tslib.__assign({ fieldProps: fieldProps }, mobileProps, { ref: ref }));
 });
+SelectResponsive.displayName = 'SelectResponsive';
 
 exports.SelectResponsive = SelectResponsive;

package/select/cssm/components/base-select/Component.js

@@ -361,7 +361,7 @@ function (_a, ref) {
         return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles__default.default.optionsListWrapper, view === 'desktop' && styles__default.default.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[mobileStyles__default.default.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles__default.default.scrollbar] = view === 'mobile', _b)), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
                     _c[mobileStyles__default.default.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple })),
             view === 'desktop' && React__default.default.createElement("div", { className: styles__default.default.optionsListBorder })));
     };
     var renderInPopover = function () {

package/select/cssm/components/options-list/Component.js

@@ -26,7 +26,7 @@ var createCounter = function () {
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple;
     var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
     var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
     var query = '(max-width: 1023px)';
@@ -46,7 +46,16 @@ var OptionsList = React.forwardRef(function (_a, ref) {
     var listRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
+    var renderGroup = function (group) {
+        var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+            return group.options.includes(item);
+        });
+        var handleSelectedItems = function (items) {
+            var _a;
+            setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+        };
+        return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }, group.options.map(function (option) { return renderOption(option, counter()); })));
+    };
     utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;

package/select/cssm/components/virtual-options-list/Component.js

@@ -22,7 +22,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var VirtualOptionsList = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex;
+    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, setSelectedItems = _a.setSelectedItems, search = _a.search, multiple = _a.multiple;
     var listRef = React.useRef(null);
     var parentRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
@@ -107,13 +107,25 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
         return rowVirtualizer.virtualItems.map(function (virtualRow) {
             var _a;
             var option = flatOptions[virtualRow.index];
-            var group = options[groupStartIndexes[virtualRow.index]];
+            var renderGroup = function () {
+                var group = options[groupStartIndexes[virtualRow.index]];
+                if (!group)
+                    return null;
+                var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) {
+                    return group.options.includes(item);
+                });
+                var handleSelectedItems = function (items) {
+                    var _a;
+                    setSelectedItems(((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (item) { return !group.options.includes(item); })) !== null && _a !== void 0 ? _a : []).concat(items));
+                };
+                return (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }));
+            };
             return (React__default.default.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn__default.default(styles__default.default.virtualRow, (_a = {},
                     _a[styles__default.default.highlighted] = highlightedIndex === virtualRow.index,
                     _a)), style: {
                     transform: "translateY(".concat(virtualRow.start, "px)"),
                 } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
+                renderGroup(),
                 !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
         });
     };

package/select/cssm/{hook-aae7b381.d.ts → hook-546b2479.d.ts}

@@ -12,5 +12,6 @@ declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListP
     Header?: React.FC<HeaderProps> | undefined;
     headerProps?: HeaderProps | undefined;
     showHeaderWithSelectAll?: boolean | undefined;
+    setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { OptionsListWithApply };

package/select/cssm/{hook-aae7b381.js → hook-546b2479.js}

@@ -1,5 +1,6 @@
 var tslib = require('tslib');
 var React = require('react');
+var deepEqual = require('deep-equal');
 var utils = require('./utils.js');
 var components_optionsList_Component = require('./components/options-list/Component.js');
 var consts = require('./consts.js');
@@ -9,9 +10,10 @@ var presets_useSelectWithApply_optionsListWithApply_header_Component = require('
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var deepEqual__default = /*#__PURE__*/_interopDefaultCompat(deepEqual);
 
 var OptionsListWithApply = React.forwardRef(function (_a, ref) {
-    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, header = _a.header, headerProps = _a.headerProps, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps"]);
+    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, header = _a.header, headerProps = _a.headerProps, setSelectedDraft = _a.setSelectedDraft, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps", "setSelectedDraft"]);
     var getOptionProps = React.useCallback(function (option, index) {
         var optionProps = defaultGetOptionProps(option, index);
         var selected = option.key === SELECT_ALL_KEY
@@ -30,6 +32,9 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
         onClear();
         toggleMenu();
     }, [onClear, toggleMenu]);
+    var handleSelectedItems = React.useCallback(function (items) {
+        setSelectedDraft === null || setSelectedDraft === void 0 ? void 0 : setSelectedDraft(items);
+    }, [setSelectedDraft]);
     React.useEffect(function () {
         var activeElement = document.activeElement;
         return function () {
@@ -47,7 +52,7 @@ var OptionsListWithApply = React.forwardRef(function (_a, ref) {
             header,
             showHeaderWithSelectAll && React__default.default.createElement(Header, tslib.__assign({}, headerProps))));
     };
-    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
+    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), selectedItems: selectedDraft, setSelectedItems: handleSelectedItems, footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps === null || restProps === void 0 ? void 0 : restProps.dataTestId }) })));
 });
 
 var SELECT_ALL_KEY = 'select_all';
@@ -102,13 +107,16 @@ function useSelectWithApply(_a) {
     };
     var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
     React.useEffect(function () {
-        setSelectedDraft(selectedOptions);
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!deepEqual__default.default(selectedOptionsRef.current, selectedOptions)) {
+            setSelectedDraft(selectedOptions);
+        }
         selectedOptionsRef.current = selectedOptions;
     }, [selectedOptions]);
     var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib.__spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
     return {
         OptionsList: OptionsListWithApply,
-        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
+        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, setSelectedDraft: setSelectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
                 indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
                 checked: selectedDraft.length === flatOptions.length,
                 onChange: handleToggleAll,