@alfalab/core-components-select 15.2.3 → 16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "15.2.3",
+    "version": "16.0.0",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -15,23 +15,25 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.2.0",
-        "@alfalab/core-components-base-modal": "^5.4.1",
-        "@alfalab/core-components-bottom-sheet": "^6.11.2",
-        "@alfalab/core-components-button": "^9.0.6",
+        "@alfalab/core-components-badge": "^5.3.0",
+        "@alfalab/core-components-base-modal": "^5.6.0",
+        "@alfalab/core-components-bottom-sheet": "^6.11.4",
+        "@alfalab/core-components-button": "^10.0.0",
         "@alfalab/core-components-checkbox": "^3.2.0",
-        "@alfalab/core-components-form-control": "^10.1.1",
-        "@alfalab/core-components-input": "^12.2.1",
-        "@alfalab/core-components-modal": "^8.0.9",
+        "@alfalab/core-components-form-control": "^11.0.0",
+        "@alfalab/core-components-input": "^13.0.0",
+        "@alfalab/core-components-modal": "^8.1.1",
+        "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/core-components-scrollbar": "^2.2.0",
         "@alfalab/core-components-skeleton": "^4.1.0",
-        "@alfalab/core-components-shared": "^0.6.0",
+        "@alfalab/core-components-shared": "^0.8.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "@juggle/resize-observer": "^3.3.1",
+        "compute-scroll-into-view": "^3.1.0",
         "classnames": "^2.3.1",
-        "downshift": "^5.4.7",
+        "downshift": "^8.2.2",
         "intersection-observer": "^0.12.0",
         "react-merge-refs": "^1.1.0",
         "react-virtual": "^2.3.2",

package/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-8abfea97";
+export * from "../hook-ad89c253";

package/presets/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-74d61833.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-cb17586d.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-skeleton');
@@ -20,8 +20,9 @@ require('intersection-observer');
 require('../utils.js');
 require('../components/options-list/Component.js');
 require('react-merge-refs');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../consts.js');
 require('../components/optgroup/Component.js');
 require('./useSelectWithApply/options-list-with-apply/footer/Component.js');

package/presets/useSelectWithApply/hook.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-74d61833.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-cb17586d.js');
 require('../../components/options-list/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../consts.js');
 require('../../components/optgroup/Component.js');
 require('./options-list-with-apply/footer/Component.js');

package/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -6,13 +6,14 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-74d61833.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-cb17586d.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../../utils.js');
 require('../../../components/optgroup/Component.js');
 require('@alfalab/core-components-button/desktop');

package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"footer":"select__footer_2pb3f"};
+var styles = {"footer":"select__footer_o7lyx"};
 require('./index.css')
 
 var Footer = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 2aepk */
+/* hash: 1avs6 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_2pb3f {
+} .select__footer_o7lyx {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_2pb3f > * + * {
+} .select__footer_o7lyx > * + * {
         margin-left: var(--gap-xs);
     }

package/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_dmh01","mobile":"select__mobile_dmh01"};
+var styles = {"desktop":"select__desktop_1y3b9","mobile":"select__mobile_1y3b9"};
 require('./index.css')
 
 var Header = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ef7o */
+/* hash: bjmos */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_dmh01 {
+} .select__desktop_1y3b9 {
     padding: var(--gap-s);
-} .select__mobile_dmh01 {
+} .select__mobile_1y3b9 {
     padding: var(--gap-s) var(--gap-xs);
 }

package/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-74d61833";
+export * from "../../../hook-cb17586d";

package/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-74d61833.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-cb17586d.js');
 require('tslib');
 require('react');
 require('../../../utils.js');
 require('../../../components/options-list/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('@alfalab/hooks');
+require('@alfalab/core-components-shared');
 require('../../../consts.js');
 require('../../../components/optgroup/Component.js');
 require('./footer/Component.js');

package/presets/useSelectWithLoading/hook.js

@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_lrgo1"};
+var styles = {"skeleton":"select__skeleton_iqksk"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 41vyx */
-.select__skeleton_lrgo1 {
+/* hash: gi2w6 */
+.select__skeleton_iqksk {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared/index.d.ts

@@ -0,0 +1,12 @@
+export * from "../presets/index";
+export * from "../typings";
+export * from "../utils";
+export * from "../components/option/index";
+export * from "../components/base-option/index";
+export * from "../components/options-list/index";
+export * from "../components/virtual-options-list/index";
+export * from "../components/field/index";
+export * from "../components/arrow/index";
+export * from "../components/base-select/index";
+export * from "../components/optgroup/index";
+export * from "../components/footer/index";

package/{shared.js → shared/index.js}

@@ -2,59 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_arrow_Component = require('./components/arrow/Component.js');
-var components_baseSelect_Component = require('./components/base-select/Component.js');
-var components_field_Component = require('./components/field/Component.js');
-var components_optgroup_Component = require('./components/optgroup/Component.js');
-var components_option_Component = require('./components/option/Component.js');
-var components_optionsList_Component = require('./components/options-list/Component.js');
-var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
-var components_baseOption_Component = require('./components/base-option/Component.js');
-var components_search_Component = require('./components/search/Component.js');
-var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
-var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-74d61833.js');
-var utils = require('./utils.js');
+var presets_useSelectWithLoading_hook = require('../presets/useSelectWithLoading/hook.js');
+var presets_useLazyLoading_hook = require('../presets/useLazyLoading/hook.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-cb17586d.js');
+var utils = require('../utils.js');
+var components_option_Component = require('../components/option/Component.js');
+var components_baseOption_Component = require('../components/base-option/Component.js');
+var components_optionsList_Component = require('../components/options-list/Component.js');
+var components_virtualOptionsList_Component = require('../components/virtual-options-list/Component.js');
+var components_field_Component = require('../components/field/Component.js');
+var components_arrow_Component = require('../components/arrow/Component.js');
+var components_baseSelect_Component = require('../components/base-select/Component.js');
+var components_optgroup_Component = require('../components/optgroup/Component.js');
+var components_footer_Component = require('../components/footer/Component.js');
+require('tslib');
 require('react');
+require('@alfalab/core-components-skeleton');
+require('intersection-observer');
+require('../consts.js');
+require('../presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
+require('@alfalab/core-components-button/desktop');
+require('../presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 require('classnames');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('tslib');
-require('react-merge-refs');
-require('@juggle/resize-observer');
-require('downshift');
-require('@alfalab/core-components-popover');
-require('@alfalab/core-components-shared');
-require('@alfalab/hooks');
-require('./components/native-select/Component.js');
-require('./components/checkmark/Component.js');
-require('@alfalab/core-components-badge');
 require('@alfalab/core-components-checkbox');
+require('../components/checkmark/Component.js');
+require('@alfalab/core-components-badge');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/CheckmarkMIcon');
-require('./components/checkmark-mobile/Component.js');
+require('../components/checkmark-mobile/Component.js');
+require('../components/base-checkmark/Component.js');
+require('react-merge-refs');
+require('@alfalab/core-components-mq');
 require('@alfalab/core-components-scrollbar');
-require('./consts.js');
+require('@alfalab/core-components-shared');
 require('react-virtual');
-require('./components/base-checkmark/Component.js');
-require('@alfalab/core-components-input');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-require('@alfalab/core-components-skeleton');
-require('intersection-observer');
-require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
-require('@alfalab/core-components-button/desktop');
-require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('@juggle/resize-observer');
+require('compute-scroll-into-view');
+require('downshift');
+require('../components/native-select/Component.js');
+require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-button/mobile');
 
 
 
-exports.Arrow = components_arrow_Component.Arrow;
-exports.BaseSelect = components_baseSelect_Component.BaseSelect;
-exports.Field = components_field_Component.Field;
-exports.Optgroup = components_optgroup_Component.Optgroup;
-exports.Option = components_option_Component.Option;
-exports.OptionsList = components_optionsList_Component.OptionsList;
-exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
-exports.BaseOption = components_baseOption_Component.BaseOption;
-exports.Search = components_search_Component.Search;
 exports.useSelectWithLoading = presets_useSelectWithLoading_hook.useSelectWithLoading;
 exports.useLazyLoading = presets_useLazyLoading_hook.useLazyLoading;
 exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Component.SELECT_ALL_KEY;
@@ -68,3 +60,12 @@ exports.lastIndexOf = utils.lastIndexOf;
 exports.processOptions = utils.processOptions;
 exports.usePrevious = utils.usePrevious;
 exports.useVisibleOptions = utils.useVisibleOptions;
+exports.Option = components_option_Component.Option;
+exports.BaseOption = components_baseOption_Component.BaseOption;
+exports.OptionsList = components_optionsList_Component.OptionsList;
+exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
+exports.Field = components_field_Component.Field;
+exports.Arrow = components_arrow_Component.Arrow;
+exports.BaseSelect = components_baseSelect_Component.BaseSelect;
+exports.Optgroup = components_optgroup_Component.Optgroup;
+exports.Footer = components_footer_Component.Footer;

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/Component.desktop.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import {
-    FormControlDesktop,
-    FormControlDesktopProps,
-} from '@alfalab/core-components-form-control/desktop';
+import { FormControlDesktop } from '@alfalab/core-components-form-control/desktop';
+import { Popover } from '@alfalab/core-components-popover';
 
 import { Arrow as DefaultArrow } from './components/arrow';
 import { BaseSelect } from './components/base-select';
@@ -12,16 +10,7 @@ import { Optgroup as DefaultOptgroup } from './components/optgroup';
 import { Option as DefaultOption } from './components/option';
 import { OptionsList as DefaultOptionsList } from './components/options-list';
 import { Search as DefaultSearch } from './components/search';
-import { BaseSelectProps } from './typings';
-
-export type SelectFieldProps = Omit<FormControlDesktopProps, 'size'> & Record<string, unknown>;
-
-export type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
-    fieldProps?: SelectFieldProps;
-};
+import { SelectDesktopProps } from './typings';
 
 export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
     (
@@ -39,6 +28,7 @@ export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
     ) => (
         <BaseSelect
             ref={ref}
+            view='desktop'
             Option={Option}
             Field={Field}
             fieldProps={{
@@ -49,6 +39,7 @@ export const SelectDesktop = forwardRef<HTMLDivElement, SelectDesktopProps>(
             Optgroup={Optgroup}
             OptionsList={OptionsList}
             Arrow={Arrow}
+            Popover={Popover}
             {...restProps}
         />
     ),

package/src/Component.mobile.tsx

@@ -1,62 +1,26 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
 
-import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet';
 import { FormControlMobile } from '@alfalab/core-components-form-control/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/Component.mobile';
 
 import { Arrow as DefaultArrow } from './components/arrow';
-import { BaseSelectMobile } from './components/base-select-mobile';
-import { Footer } from './components/base-select-mobile/footer';
+import { BaseSelect } from './components/base-select';
 import { Field as DefaultField } from './components/field';
+import { Footer } from './components/footer';
 import { Optgroup as DefaultOptgroup } from './components/optgroup';
 import { Option as DefaultOption } from './components/option';
 import { OptionsList as DefaultOptionsList } from './components/options-list';
 import { Search as DefaultSearch } from './components/search';
 import { VirtualOptionsList as DefaultVirtualOptionsList } from './components/virtual-options-list';
-import { useSelectWithApply, UseSelectWithApplyProps } from './presets/useSelectWithApply/hook';
+import { useSelectWithApply } from './presets/useSelectWithApply/hook';
 import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component';
-import { AnyObject, BaseSelectProps } from './typings';
-
-export type AdditionalMobileProps = {
-    /**
-     * Футер
-     * @deprecated Используйте bottomSheetProps.actionButton
-     */
-    footer?: ReactNode;
-
-    /**
-     * Будет ли свайпаться шторка
-     * @deprecated Используйте bottomSheetProps.swipeable
-     */
-    swipeable?: boolean;
-
-    /**
-     * Дополнительные пропсы шторки
-     */
-    bottomSheetProps?: Partial<BottomSheetProps>;
-
-    /**
-     * Показывать кнопку очистки
-     */
-    showClear?: UseSelectWithApplyProps['showClear'];
-
-    /**
-     * Показывать пункт "Выбрать все"
-     */
-    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
-
-    /**
-     * Показывать пункт "Выбрать все" в заголовке списка
-     */
-    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
-
-    /**
-     * Использовать ли хук useSelectWithApply
-     */
-    useWithApplyHook?: boolean;
-};
-
-export type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> &
-    AdditionalMobileProps;
+import {
+    AnyObject,
+    BottomSheetSelectMobileProps,
+    ModalSelectMobileProps,
+    SelectMobileProps,
+} from './typings';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 
@@ -82,12 +46,12 @@ export const SelectMobile = forwardRef(
             Option = DefaultOption,
             Search = DefaultSearch,
             selected,
+            isBottomSheet = true,
             options,
             OptionsList = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
                 ? DefaultVirtualOptionsList
                 : DefaultOptionsList,
             onChange,
-            bottomSheetProps,
             showClear = true,
             showSelectAll,
             showHeaderWithSelectAll,
@@ -98,6 +62,9 @@ export const SelectMobile = forwardRef(
         }: SelectMobileProps,
         ref,
     ) => {
+        const typedRestBottomSheetProps = restProps as BottomSheetSelectMobileProps;
+        const typedRestModalProps = restProps as ModalSelectMobileProps;
+
         const applyProps = useSelectWithApply({
             optionsListProps: {
                 ...(optionsListProps as AnyObject),
@@ -113,9 +80,14 @@ export const SelectMobile = forwardRef(
             showSelectAll,
         });
 
+        const bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (
+            <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
+        );
+
         return (
-            <BaseSelectMobile
+            <BaseSelect
                 ref={ref}
+                view='mobile'
                 autocomplete={autocomplete}
                 multiple={multiple}
                 allowUnselect={allowUnselect}
@@ -136,19 +108,28 @@ export const SelectMobile = forwardRef(
                 Optgroup={Optgroup}
                 Option={Option}
                 Search={Search}
-                isBottomSheet={true}
+                isBottomSheet={isBottomSheet}
                 options={options}
                 selected={selected}
                 onChange={onChange}
                 OptionsList={OptionsList}
                 showSearch={showSearch}
                 searchProps={searchProps}
-                bottomSheetProps={{
-                    bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (
-                        <Header {...applyProps.optionsListProps.headerProps} mobile={true} />
-                    ),
-                    ...bottomSheetProps,
-                }}
+                BottomSheet={BottomSheet}
+                ModalMobile={ModalMobile}
+                {...(isBottomSheet
+                    ? {
+                          bottomSheetProps: {
+                              bottomAddons,
+                              ...typedRestBottomSheetProps.bottomSheetProps,
+                          },
+                      }
+                    : {
+                          modalHeaderProps: {
+                              bottomAddons,
+                              ...typedRestModalProps.modalHeaderProps,
+                          },
+                      })}
                 optionsListProps={optionsListProps}
                 {...restProps}
                 {...(useWithApplyHook && applyProps)}