@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.1

package/select/cssm/presets/useLazyLoading/hook.js

@@ -1,51 +1,48 @@
-import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
-import { Skeleton } from '../../../../skeleton/cssm';
-import { Option } from '../../components/option/Component.js';
-import 'intersection-observer';
-import 'classnames';
-import '../../consts.js';
-import '../../components/checkmark/Component.js';
-import '../../../../badge/cssm';
-import '../../../../checkbox/cssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../../components/checkmark/index.module.css';
-import '../../components/checkmark-mobile/Component.js';
-import '../../components/checkmark-mobile/index.module.css';
-import '../../components/option/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const DEBOUNCE_TIMEOUT = 300;
-const actions = {
-    fetchOptionsStart() {
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsSkeleton = require('../../../../skeleton/cssm');
+var components_option_Component = require('../../components/option/Component.js');
+require('intersection-observer');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var DEBOUNCE_TIMEOUT = 300;
+var actions = {
+    fetchOptionsStart: function () {
         return { type: 'FETCH_OPTIONS_START' };
     },
-    fetchOptionsBreak() {
+    fetchOptionsBreak: function () {
         return { type: 'FETCH_OPTIONS_BREAK' };
     },
-    fetchOptionsSuccess(payload) {
-        return { type: 'FETCH_OPTIONS_SUCCESS', payload };
+    fetchOptionsSuccess: function (payload) {
+        return { type: 'FETCH_OPTIONS_SUCCESS', payload: payload };
     },
-    setIsOpened(opened) {
+    setIsOpened: function (opened) {
         return { type: 'SET_IS_OPENED', payload: opened };
     },
-    setQueryString(qs) {
+    setQueryString: function (qs) {
         return { type: 'SET_QUERY_STRING', payload: qs };
     },
-    reset() {
+    reset: function () {
         return { type: 'RESET' };
     },
 };
-const skeletonStyle = {
+var skeletonStyle = {
     position: 'absolute',
     top: '50%',
     transform: 'translateY(-50%)',
     height: '16px',
     width: '50%',
 };
-function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleton = React.createElement(Skeleton, { style: skeletonStyle, visible: true }), Option: Option$1 = Option, }) {
-    const initialOptions = [];
-    const initialLoading = false;
-    const lazyLoadingInitialState = {
+function useLazyLoading(_a) {
+    var _b = _a.limit, limit = _b === void 0 ? 10 : _b, _c = _a.initialOffset, initialOffset = _c === void 0 ? 0 : _c, optionsFetcher = _a.optionsFetcher, _d = _a.skeleton, skeleton = _d === void 0 ? React__default.default.createElement(coreComponentsSkeleton.Skeleton, { style: skeletonStyle, visible: true }) : _d, _e = _a.Option, Option = _e === void 0 ? components_option_Component.Option : _e;
+    var initialOptions = [];
+    var initialLoading = false;
+    var lazyLoadingInitialState = {
         opened: false,
         offset: initialOffset,
         options: initialOptions,
@@ -53,79 +50,59 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
         allOptionsLoaded: false,
         queryString: '',
     };
-    const lazyLoadingReducer = (state, action) => {
+    var lazyLoadingReducer = function (state, action) {
         switch (action.type) {
             case 'FETCH_OPTIONS_START': {
-                return {
-                    ...state,
-                    loading: true,
-                };
+                return tslib.__assign(tslib.__assign({}, state), { loading: true });
             }
             case 'FETCH_OPTIONS_BREAK': {
-                return {
-                    ...state,
-                    loading: false,
-                };
+                return tslib.__assign(tslib.__assign({}, state), { loading: false });
             }
             case 'FETCH_OPTIONS_SUCCESS': {
-                return {
-                    ...state,
-                    options: [...state.options, ...action.payload.options],
-                    offset: state.offset + (action.payload.options.length ? 1 : 0),
-                    allOptionsLoaded: !action.payload.hasMore,
-                    loading: false,
-                };
+                return tslib.__assign(tslib.__assign({}, state), { options: tslib.__spreadArray(tslib.__spreadArray([], state.options, true), action.payload.options, true), offset: state.offset + (action.payload.options.length ? 1 : 0), allOptionsLoaded: !action.payload.hasMore, loading: false });
             }
             case 'SET_IS_OPENED': {
-                return {
-                    ...state,
-                    opened: action.payload,
-                };
+                return tslib.__assign(tslib.__assign({}, state), { opened: action.payload });
             }
             case 'SET_QUERY_STRING': {
-                return {
-                    // Изменение queryString подразумевает сброс текущих опций.
-                    ...lazyLoadingInitialState,
-                    opened: state.opened,
-                    loading: true,
-                    queryString: action.payload,
-                };
+                return tslib.__assign(tslib.__assign({}, lazyLoadingInitialState), { opened: state.opened, loading: true, queryString: action.payload });
             }
             case 'RESET': {
-                return {
-                    ...lazyLoadingInitialState,
-                };
+                return tslib.__assign({}, lazyLoadingInitialState);
             }
             default: {
                 return state;
             }
         }
     };
-    const [{ opened, offset, options, loading, allOptionsLoaded, queryString }, dispatch] = useReducer(lazyLoadingReducer, lazyLoadingInitialState);
-    const abortFetchingOptionsRef = useRef();
-    const fetchNextOffsetOptions = useCallback(() => {
+    var _f = React.useReducer(lazyLoadingReducer, lazyLoadingInitialState), _g = _f[0], opened = _g.opened, offset = _g.offset, options = _g.options, loading = _g.loading, allOptionsLoaded = _g.allOptionsLoaded, queryString = _g.queryString, dispatch = _f[1];
+    var abortFetchingOptionsRef = React.useRef();
+    var fetchNextOffsetOptions = React.useCallback(function () {
         dispatch(actions.fetchOptionsStart());
-        new Promise((resolve, reject) => {
+        new Promise(function (resolve, reject) {
+            var _a;
             // eslint-disable-next-line no-unused-expressions
-            abortFetchingOptionsRef.current?.();
+            (_a = abortFetchingOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(abortFetchingOptionsRef);
             abortFetchingOptionsRef.current = reject;
-            optionsFetcher(offset, limit, queryString).then((res) => {
+            optionsFetcher(offset, limit, queryString).then(function (res) {
                 resolve(res);
             });
         })
-            .then((res) => {
+            .then(function (res) {
             dispatch(actions.fetchOptionsSuccess(res));
             abortFetchingOptionsRef.current = undefined;
         })
             .catch(
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        () => { });
+        function () { });
     }, [optionsFetcher, offset, limit, queryString]);
-    const listRef = useRef(null);
-    useEffect(() => {
-        let observer;
+    var listRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        var observer;
         if (opened && !loading && !allOptionsLoaded) {
-            observer = new IntersectionObserver(([entry]) => {
+            observer = new IntersectionObserver(function (_a) {
+                var entry = _a[0];
                 if (entry.isIntersecting) {
                     if (observer) {
                         observer.disconnect();
@@ -140,19 +117,20 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
              * Таким образом, загрузка следующей "страницы" начнется когда юзер доскроллит список
              * до верхнего края последней опции, что обеспечивает плавность
              */
-            const optionList = listRef.current?.querySelectorAll('[role="option"]');
-            const lastOption = optionList?.[optionList.length - 1];
+            var optionList = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="option"]');
+            var lastOption = optionList === null || optionList === void 0 ? void 0 : optionList[optionList.length - 1];
             if (lastOption) {
                 observer.observe(lastOption);
             }
         }
-        return () => {
+        return function () {
             if (observer) {
                 observer.disconnect();
             }
         };
     }, [offset, fetchNextOffsetOptions, opened, allOptionsLoaded, initialOffset, loading]);
-    const onOpen = useCallback((payload) => {
+    var onOpen = React.useCallback(function (payload) {
+        var _a, _b;
         if (payload.open) {
             if (options.length === initialOptions.length) {
                 fetchNextOffsetOptions();
@@ -160,30 +138,32 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
         }
         else {
             // eslint-disable-next-line no-unused-expressions
-            abortFetchingOptionsRef.current?.();
+            (_a = abortFetchingOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(abortFetchingOptionsRef);
             dispatch(actions.fetchOptionsBreak());
         }
-        dispatch(actions.setIsOpened(payload.open ?? false));
+        dispatch(actions.setIsOpened((_b = payload.open) !== null && _b !== void 0 ? _b : false));
     }, [initialOptions.length, fetchNextOffsetOptions, options.length]);
-    const fetchNextOptionsRef = useRef();
-    const fetchNextOptionsTimerRef = useRef();
-    useEffect(() => {
+    var fetchNextOptionsRef = React.useRef();
+    var fetchNextOptionsTimerRef = React.useRef();
+    React.useEffect(function () {
         fetchNextOptionsRef.current = fetchNextOffsetOptions;
     }, [fetchNextOffsetOptions]);
-    const onQueryStringChange = useCallback((_, payload) => {
+    var onQueryStringChange = React.useCallback(function (_, payload) {
+        var _a, _b;
         dispatch(actions.setQueryString(payload.value));
         /* eslint-disable no-unused-expressions */
         /*
          * Если во время загрузки опций юзер ввел новый текст в инпут,
          * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу
          */
-        abortFetchingOptionsRef.current?.();
-        listRef.current?.scrollTo({ top: 0 });
+        (_a = abortFetchingOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(abortFetchingOptionsRef);
+        (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
         /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */
         if (fetchNextOptionsTimerRef.current) {
             clearTimeout(fetchNextOptionsTimerRef.current);
         }
-        fetchNextOptionsTimerRef.current = setTimeout(() => {
+        fetchNextOptionsTimerRef.current = setTimeout(function () {
+            var _a;
             /*
              * После дебаунса необходимо вызвать функцию-загрузчик,
              * содержащую актуальные на данный момент данные оффсета и queryString.
@@ -191,25 +171,27 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
              * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,
              * так что берем ее из обновляемого рефа
              */
-            fetchNextOptionsRef.current?.();
+            (_a = fetchNextOptionsRef.current) === null || _a === void 0 ? void 0 : _a.call(fetchNextOptionsRef);
         }, DEBOUNCE_TIMEOUT);
         /* eslint-enable */
     }, []);
-    const renderOption = (props) => (React.createElement(Option$1, { ...props, highlighted: loading ? false : props.highlighted }));
-    const skeletonOptions = useMemo(() => Array(loading ? limit : 0)
-        .fill(0)
-        .map((_, key) => ({
-        key: `loading-${key}`,
-        disabled: true,
-        content: skeleton,
-    })), [loading, limit, skeleton]);
-    const reset = useCallback(() => {
+    var renderOption = function (props) { return (React__default.default.createElement(Option, tslib.__assign({}, props, { highlighted: loading ? false : props.highlighted }))); };
+    var skeletonOptions = React.useMemo(function () {
+        return Array(loading ? limit : 0)
+            .fill(0)
+            .map(function (_, key) { return ({
+            key: "loading-".concat(key),
+            disabled: true,
+            content: skeleton,
+        }); });
+    }, [loading, limit, skeleton]);
+    var reset = React.useCallback(function () {
         dispatch(actions.reset());
     }, []);
     return {
         optionsProps: {
             Option: renderOption,
-            options: [...options, ...skeletonOptions],
+            options: tslib.__spreadArray(tslib.__spreadArray([], options, true), skeletonOptions, true),
             optionsListProps: {
                 ref: listRef,
                 inputProps: {
@@ -217,10 +199,10 @@ function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleto
                     value: queryString,
                 },
             },
-            onOpen,
+            onOpen: onOpen,
         },
-        reset,
+        reset: reset,
     };
 }
 
-export { useLazyLoading };
+exports.useLazyLoading = useLazyLoading;

package/select/cssm/presets/useSelectWithApply/hook.js

@@ -1,19 +1,11 @@
-import 'react';
-import '../../../../shared/cssm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-489e60aa.js';
-import '../../utils.js';
-import '../../components/options-list/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../../mq/cssm';
-import '../../../../scrollbar/cssm';
-import '../../consts.js';
-import '../../components/optgroup/Component.js';
-import '../../components/optgroup/index.module.css';
-import '../../components/options-list/index.module.css';
-import './options-list-with-apply/footer/Component.js';
-import '../../../../button/cssm/desktop';
-import './options-list-with-apply/footer/index.module.css';
-import './options-list-with-apply/header/Component.js';
-import '../../../../checkbox/cssm';
-import './options-list-with-apply/header/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('tslib');
+require('react');
+require('../../utils.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-aae7b381.js');
+
+
+
+exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Component.SELECT_ALL_KEY;
+exports.useSelectWithApply = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply;

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

@@ -1,19 +1,13 @@
-import 'react';
-import '../../../components/options-list/Component.js';
-export { O as OptionsListWithApply } from '../../../hook-489e60aa.js';
-import '../../../../../button/cssm/desktop';
-import '../../../../../shared/cssm';
-import './footer/index.module.css';
-import 'classnames';
-import '../../../../../checkbox/cssm';
-import './header/index.module.css';
-import 'react-merge-refs';
-import '../../../../../mq/cssm';
-import '../../../../../scrollbar/cssm';
-import '../../../consts.js';
-import '../../../utils.js';
-import '../../../components/optgroup/Component.js';
-import '../../../components/optgroup/index.module.css';
-import '../../../components/options-list/index.module.css';
-import './footer/Component.js';
-import './header/Component.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('tslib');
+require('react');
+require('../../../components/options-list/Component.js');
+require('../../../consts.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-aae7b381.js');
+require('./footer/Component.js');
+require('./header/Component.js');
+
+
+
+exports.OptionsListWithApply = presets_useSelectWithApply_optionsListWithApply_Component.OptionsListWithApply;

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

@@ -1,12 +1,22 @@
-import React from 'react';
-import { ButtonDesktop } from '../../../../../../button/cssm/desktop';
-import { getDataTestId } from '../../../../../../shared/cssm';
-import styles from './index.module.css';
-
-const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], dataTestId, }) => (React.createElement("div", { 
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    tabIndex: 0, className: styles.footer },
-    React.createElement(ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
-    showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
-
-export { Footer };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var desktop = require('../../../../../../button/cssm/desktop');
+var coreComponentsShared = require('../../../../../../shared/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Footer = function (_a) {
+    var handleApply = _a.handleApply, handleClear = _a.handleClear, showClear = _a.showClear, _b = _a.selectedDraft, selectedDraft = _b === void 0 ? [] : _b, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement("div", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, className: styles__default.default.footer },
+        React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'apply') }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+        showClear && selectedDraft.length > 0 && (React__default.default.createElement(desktop.ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+};
+
+exports.Footer = Footer;

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

@@ -1,9 +1,21 @@
-import React from 'react';
-import cn from 'classnames';
-import { Checkbox } from '../../../../../../checkbox/cssm';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Header = ({ onChange, checked, indeterminate, mobile }) => (React.createElement("div", { className: cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile }) },
-    React.createElement(Checkbox, { block: true, indeterminate: indeterminate, size: 'm', onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435' })));
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsCheckbox = require('../../../../../../checkbox/cssm');
+var styles = require('./index.module.css');
 
-export { Header };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Header = function (_a) {
+    var _b;
+    var onChange = _a.onChange, checked = _a.checked, indeterminate = _a.indeterminate, mobile = _a.mobile;
+    return (React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.desktop] = !mobile, _b[styles__default.default.mobile] = mobile, _b)) },
+        React__default.default.createElement(coreComponentsCheckbox.Checkbox, { block: true, indeterminate: indeterminate, size: 'm', onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435' })));
+};
+
+exports.Header = Header;

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

@@ -1 +1 @@
-export * from "../../../hook-489e60aa";
+export * from "../../../hook-aae7b381";

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

@@ -1,19 +1,7 @@
-export { O as OptionsListWithApply } from '../../../hook-489e60aa.js';
-import 'react';
-import '../../../utils.js';
-import '../../../../../shared/cssm';
-import '../../../components/options-list/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../../../mq/cssm';
-import '../../../../../scrollbar/cssm';
-import '../../../consts.js';
-import '../../../components/optgroup/Component.js';
-import '../../../components/optgroup/index.module.css';
-import '../../../components/options-list/index.module.css';
-import './footer/Component.js';
-import '../../../../../button/cssm/desktop';
-import './footer/index.module.css';
-import './header/Component.js';
-import '../../../../../checkbox/cssm';
-import './header/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-aae7b381.js');
+
+
+
+exports.OptionsListWithApply = presets_useSelectWithApply_optionsListWithApply_Component.OptionsListWithApply;

package/select/cssm/presets/useSelectWithLoading/hook.js

@@ -1,34 +1,32 @@
-import React from 'react';
-import { Skeleton } from '../../../../skeleton/cssm';
-import { Option } from '../../components/option/Component.js';
-import styles from './index.module.css';
-import 'classnames';
-import '../../consts.js';
-import '../../components/checkmark/Component.js';
-import '../../../../badge/cssm';
-import '../../../../checkbox/cssm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../../components/checkmark/index.module.css';
-import '../../components/checkmark-mobile/Component.js';
-import '../../components/checkmark-mobile/index.module.css';
-import '../../components/option/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-function useSelectWithLoading({ loading = false, visibleOptions = 6, Option: Option$1 = Option, }) {
-    const renderOption = (props) => (React.createElement(Option$1, { ...props, Checkmark: null, highlighted: loading ? false : props.highlighted }));
-    const options = Array(visibleOptions)
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsSkeleton = require('../../../../skeleton/cssm');
+var components_option_Component = require('../../components/option/Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+function useSelectWithLoading(_a) {
+    var _b = _a.loading, loading = _b === void 0 ? false : _b, _c = _a.visibleOptions, visibleOptions = _c === void 0 ? 6 : _c, _d = _a.Option, Option = _d === void 0 ? components_option_Component.Option : _d;
+    var renderOption = function (props) { return (React__default.default.createElement(Option, tslib.__assign({}, props, { Checkmark: null, highlighted: loading ? false : props.highlighted }))); };
+    var options = Array(visibleOptions)
         .fill(0)
-        .map((_, key) => ({
-        key: `loading-${key}`,
+        .map(function (_, key) { return ({
+        key: "loading-".concat(key),
         disabled: true,
-        content: React.createElement(Skeleton, { className: styles.skeleton, visible: true }),
-    }));
+        content: React__default.default.createElement(coreComponentsSkeleton.Skeleton, { className: styles__default.default.skeleton, visible: true }),
+    }); });
     if (!loading)
         return null;
     return {
         Option: renderOption,
-        options,
+        options: options,
     };
 }
 
-export { useSelectWithLoading };
+exports.useSelectWithLoading = useSelectWithLoading;