@alphakits/ui 1.31.5 → 2.0.1

package/dist/select/presets/use-lazy-loading/index.js

@@ -1 +1,172 @@
-import{__assign as n,__spreadArray as e}from"tslib";import t,{useReducer as o,useRef as r,useCallback as i,useEffect as c,useMemo as a}from"react";import{Option as l}from"../../components/option/component.js";import{convertToOptions as s}from"../../utils.js";import"intersection-observer";import"classnames";import"../../../skeleton/component.js";import"../../components/checkmark/component.js";var u=300,p={fetchOptionsStart:function(){return{type:"FETCH_OPTIONS_START"}},fetchOptionsBreak:function(){return{type:"FETCH_OPTIONS_BREAK"}},fetchOptionsSuccess:function(n){return{type:"FETCH_OPTIONS_SUCCESS",payload:n}},setIsOpened:function(n){return{type:"SET_IS_OPENED",payload:n}},setQueryString:function(n){return{type:"SET_QUERY_STRING",payload:n}},reset:function(){return{type:"RESET"}}};function d(d){var f=d.limit,h=void 0===f?10:f,S=d.initialPage,T=void 0===S?0:S,g=d.optionsFetcher,m=[],v={opened:!1,page:T,options:m,loading:!1,allOptionsLoaded:!1,searchText:""},O=o((function(t,o){switch(o.type){case"FETCH_OPTIONS_START":return n(n({},t),{loading:!0});case"FETCH_OPTIONS_BREAK":return n(n({},t),{loading:!1});case"FETCH_OPTIONS_SUCCESS":return n(n({},t),{options:e(e([],t.options),o.payload.options),page:t.page+(o.payload.options.length?1:0),allOptionsLoaded:!o.payload.hasMore,loading:!1});case"SET_IS_OPENED":return n(n({},t),{opened:o.payload});case"SET_QUERY_STRING":return n(n({},v),{opened:t.opened,loading:!0,searchText:o.payload});case"RESET":return n({},v);default:return t}}),v),E=O[0],y=E.opened,_=E.page,P=E.options,I=E.loading,C=E.allOptionsLoaded,N=E.searchText,R=O[1],F=r(),k=i((function(){R(p.fetchOptionsStart()),new Promise((function(n,e){var t;null===(t=F.current)||void 0===t||t.call(F),F.current=e,g({page:_,limit:h,searchText:N}).then((function(e){n(e)}))})).then((function(n){var e=s(n.items),t=n.meta,o=t.totalPages,r=t.currentPage;R(p.fetchOptionsSuccess({options:e,hasMore:r<o})),F.current=void 0})).catch((function(n){console.log(n)}))}),[_,h,N,g]),A=r(null);c((function(){var n,e;if(y&&!I&&!C){e=new IntersectionObserver((function(n){n[0].isIntersecting&&(e&&e.disconnect(),k())}),{root:A.current});var t=null===(n=A.current)||void 0===n?void 0:n.querySelectorAll('[role="option"]'),o=null==t?void 0:t[t.length-1];o&&e.observe(o)}return function(){e&&e.disconnect()}}),[_,y,C,T,I,k]);var H=i((function(n){var e,t;n.open?P.length===m.length&&k():(null===(e=F.current)||void 0===e||e.call(F),R(p.fetchOptionsBreak())),R(p.setIsOpened(null!==(t=n.open)&&void 0!==t&&t))}),[m.length,P.length,k]),b=r(),x=r();c((function(){b.current=k}),[k]);var j=i((function(n,e){var t,o;R(p.setQueryString(e.value)),null===(t=F.current)||void 0===t||t.call(F),null===(o=A.current)||void 0===o||o.scrollTo({top:0}),x.current&&clearTimeout(x.current),x.current=setTimeout((function(){var n;null===(n=b.current)||void 0===n||n.call(b)}),u)}),[]),B=a((function(){return Array(I?h:0).fill(0).map((function(n,e){return{key:e,disabled:!0,content:"",loading:!0}}))}),[I,h]),L=i((function(){R(p.reset())}),[]);return{optionsProps:{Option:i((function(e){return t.createElement(l,n({},e,{highlighted:!I&&e.highlighted}))}),[I]),options:e(e([],P),B),optionsListProps:{ref:A,inputProps:{onChange:j,value:N}},onOpen:H},reset:L}}export{d as useLazyLoading};
+import { jsx as A } from "react/jsx-runtime";
+import { useReducer as H, useRef as O, useCallback as p, useEffect as P, useMemo as U } from "react";
+import { Option as B } from "../../components/option/component.js";
+import { convertToOptions as Q } from "../../utils.js";
+import "intersection-observer";
+const k = 300, l = {
+  fetchOptionsStart() {
+    return { type: "FETCH_OPTIONS_START" };
+  },
+  fetchOptionsBreak() {
+    return { type: "FETCH_OPTIONS_BREAK" };
+  },
+  fetchOptionsSuccess(r) {
+    return { type: "FETCH_OPTIONS_SUCCESS", payload: r };
+  },
+  setIsOpened(r) {
+    return { type: "SET_IS_OPENED", payload: r };
+  },
+  setQueryString(r) {
+    return { type: "SET_QUERY_STRING", payload: r };
+  },
+  reset() {
+    return { type: "RESET" };
+  }
+};
+function j({
+  limit: r = 10,
+  initialPage: y = 0,
+  optionsFetcher: I
+}) {
+  const S = [], f = {
+    opened: !1,
+    page: y,
+    options: S,
+    loading: !1,
+    allOptionsLoaded: !1,
+    searchText: ""
+  }, N = (e, t) => {
+    switch (t.type) {
+      case "FETCH_OPTIONS_START":
+        return {
+          ...e,
+          loading: !0
+        };
+      case "FETCH_OPTIONS_BREAK":
+        return {
+          ...e,
+          loading: !1
+        };
+      case "FETCH_OPTIONS_SUCCESS":
+        return {
+          ...e,
+          options: [...e.options, ...t.payload.options],
+          page: e.page + (t.payload.options.length ? 1 : 0),
+          allOptionsLoaded: !t.payload.hasMore,
+          loading: !1
+        };
+      case "SET_IS_OPENED":
+        return {
+          ...e,
+          opened: t.payload
+        };
+      case "SET_QUERY_STRING":
+        return {
+          // Изменение searchText подразумевает сброс текущих опций.
+          ...f,
+          opened: e.opened,
+          loading: !0,
+          searchText: t.payload
+        };
+      case "RESET":
+        return {
+          ...f
+        };
+      default:
+        return e;
+    }
+  }, [
+    {
+      opened: m,
+      page: g,
+      options: E,
+      loading: a,
+      allOptionsLoaded: C,
+      searchText: h
+    },
+    i
+  ] = H(N, f), o = O(), c = p(() => {
+    i(l.fetchOptionsStart()), new Promise((e, t) => {
+      var n;
+      (n = o.current) == null || n.call(o), o.current = t, I({ page: g, limit: r, searchText: h }).then((s) => {
+        e(s);
+      });
+    }).then((e) => {
+      const t = Q(e.items), { meta: { totalPages: n, currentPage: s } } = e;
+      i(l.fetchOptionsSuccess({ options: t, hasMore: s < n })), o.current = void 0;
+    }).catch(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (e) => {
+        console.log(e);
+      }
+    );
+  }, [g, r, h, I]), u = O(null);
+  P(() => {
+    var t;
+    let e;
+    if (m && !a && !C) {
+      e = new IntersectionObserver(
+        ([T]) => {
+          T.isIntersecting && (e && e.disconnect(), c());
+        },
+        {
+          root: u.current
+        }
+      );
+      const n = (t = u.current) == null ? void 0 : t.querySelectorAll('[role="option"]'), s = n == null ? void 0 : n[n.length - 1];
+      s && e.observe(s);
+    }
+    return () => {
+      e && e.disconnect();
+    };
+  }, [g, m, C, y, a, c]);
+  const L = p(
+    (e) => {
+      var t, n;
+      e.open ? E.length === S.length && c() : ((t = o.current) == null || t.call(o), i(l.fetchOptionsBreak())), i(l.setIsOpened((n = e.open) != null ? n : !1));
+    },
+    [S.length, E.length, c]
+  ), d = O(), _ = O();
+  P(() => {
+    d.current = c;
+  }, [c]);
+  const R = p(
+    (e, t) => {
+      var n, s;
+      i(l.setQueryString(t.value)), (n = o.current) == null || n.call(o), (s = u.current) == null || s.scrollTo({ top: 0 }), _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+        var T;
+        (T = d.current) == null || T.call(d);
+      }, k);
+    },
+    []
+  ), v = U(() => Array(a ? r : 0).fill(0).map((e, t) => ({
+    key: t,
+    disabled: !0,
+    content: "",
+    loading: !0
+  })), [a, r]), x = p(() => {
+    i(l.reset());
+  }, []);
+  return {
+    optionsProps: {
+      Option: p(
+        (e) => /* @__PURE__ */ A(B, { ...e, highlighted: a ? !1 : e.highlighted }),
+        [a]
+      ),
+      options: [...E, ...v],
+      optionsListProps: {
+        ref: u,
+        inputProps: {
+          onChange: R,
+          value: h
+        }
+      },
+      onOpen: L
+    },
+    reset: x
+  };
+}
+export {
+  j as useLazyLoading
+};
+//# sourceMappingURL=index.js.map

package/dist/select/presets/use-lazy-loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/select/presets/use-lazy-loading/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, {\n    Reducer, useCallback, useEffect, useMemo, useReducer, useRef,\n} from 'react';\n\nimport { InputProps } from '../../../input';\nimport { Option } from '../../components/option';\nimport { OptionShape } from '../../typings';\nimport { convertToOptions } from '../../utils';\n\nimport 'intersection-observer';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\ntype OptionsFetcherResponse = {\n    items: Array<{[x: string]: any; id: number | string }>;\n    meta: {\n        totalItems?: number;\n        itemCount?: number;\n        itemsPerPage?: number;\n        totalPages: number;\n        currentPage: number;\n    };\n};\n\ntype UseLazyLoadingProps = {\n    /** Количество элементов на \"странице\" */\n    limit?: number;\n\n    /** Начальный номер \"страницы\" */\n    initialPage?: number;\n\n    /**\n     * Функция-загрузчик опций.\n     * @param page - текущая страница\n     * @param limit - количество элементов на странице\n     * @param searchText - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList\n     * @returns Promise<{\n     *  options - список опций следующей \"страницы\". Они аппендятся к предыдущим\n     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать \"следующую страницу\")\n     * }>\n     */\n    optionsFetcher(\n        {\n            page, limit, searchText,\n        }: {\n            page: number;\n            limit: number;\n            searchText?: string;\n        }\n    ): Promise<OptionsFetcherResponse>;\n};\n\nconst actions = {\n    fetchOptionsStart() {\n        return { type: 'FETCH_OPTIONS_START' } as const;\n    },\n    fetchOptionsBreak() {\n        return { type: 'FETCH_OPTIONS_BREAK' } as const;\n    },\n    fetchOptionsSuccess(payload: { options: OptionShape[]; hasMore: boolean }) {\n        return { type: 'FETCH_OPTIONS_SUCCESS', payload } as const;\n    },\n    setIsOpened(opened: boolean) {\n        return { type: 'SET_IS_OPENED', payload: opened } as const;\n    },\n    setQueryString(qs: string) {\n        return { type: 'SET_QUERY_STRING', payload: qs } as const;\n    },\n    reset() {\n        return { type: 'RESET' } as const;\n    },\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Actions = typeof actions extends { [key: string]: (...args: any) => infer U } ? U : never;\n\nexport function useLazyLoading({\n    limit = 10,\n    initialPage = 0,\n    optionsFetcher,\n}: UseLazyLoadingProps) {\n    const initialOptions: OptionShape[] = [];\n    const initialLoading = false;\n\n    const lazyLoadingInitialState = {\n        opened: false,\n        page: initialPage,\n        options: initialOptions,\n        loading: initialLoading,\n        allOptionsLoaded: false,\n        searchText: '',\n    };\n\n    const lazyLoadingReducer: Reducer<typeof lazyLoadingInitialState, Actions> = (\n        state,\n        action,\n    ) => {\n        switch (action.type) {\n            case 'FETCH_OPTIONS_START': {\n                return {\n                    ...state,\n                    loading: true,\n                };\n            }\n            case 'FETCH_OPTIONS_BREAK': {\n                return {\n                    ...state,\n                    loading: false,\n                };\n            }\n            case 'FETCH_OPTIONS_SUCCESS': {\n                return {\n                    ...state,\n                    options: [...state.options, ...action.payload.options],\n                    page: state.page + (action.payload.options.length ? 1 : 0),\n                    allOptionsLoaded: !action.payload.hasMore,\n                    loading: false,\n                };\n            }\n            case 'SET_IS_OPENED': {\n                return {\n                    ...state,\n                    opened: action.payload,\n                };\n            }\n            case 'SET_QUERY_STRING': {\n                return {\n                    // Изменение searchText подразумевает сброс текущих опций.\n                    ...lazyLoadingInitialState,\n                    opened: state.opened,\n                    loading: true,\n                    searchText: action.payload,\n                };\n            }\n            case 'RESET': {\n                return {\n                    ...lazyLoadingInitialState,\n                };\n            }\n            default: {\n                return state;\n            }\n        }\n    };\n\n    const [\n        {\n            opened, page, options, loading, allOptionsLoaded, searchText,\n        },\n        dispatch,\n    ] = useReducer(lazyLoadingReducer, lazyLoadingInitialState);\n\n    const abortFetchingOptionsRef = useRef<() => void>();\n\n    const fetchNextOffsetOptions = useCallback(() => {\n        dispatch(actions.fetchOptionsStart());\n\n        new Promise<OptionsFetcherResponse>((resolve, reject) => {\n            // eslint-disable-next-line no-unused-expressions\n            abortFetchingOptionsRef.current?.();\n            abortFetchingOptionsRef.current = reject;\n            optionsFetcher({ page, limit, searchText }).then((res) => {\n                resolve(res);\n            });\n        }).then((res) => {\n            const serializedData = convertToOptions(res.items);\n            const { meta: { totalPages, currentPage } } = res;\n\n            dispatch(actions.fetchOptionsSuccess({ options: serializedData, hasMore: currentPage < totalPages }));\n            abortFetchingOptionsRef.current = undefined;\n        }).catch(\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            (err) => {\n                console.log(err);\n            },\n        );\n    }, [page, limit, searchText, optionsFetcher]);\n\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // fetchNextOffsetOptions();\n\n    useEffect(() => {\n        let observer: IntersectionObserver;\n\n        if (opened && !loading && !allOptionsLoaded) {\n            observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        if (observer) {\n                            observer.disconnect();\n                        }\n                        fetchNextOffsetOptions();\n                    }\n                },\n                {\n                    root: listRef.current,\n                },\n            );\n\n            /*\n             * Обсервим пересечение последней опции с контейнером.\n             * Таким образом, загрузка следующей \"страницы\" начнется когда юзер доскроллит список\n             * до верхнего края последней опции, что обеспечивает плавность\n             */\n            const listOptions = listRef.current?.querySelectorAll('[role=\"option\"]');\n            const lastOption = listOptions?.[listOptions.length - 1];\n\n            if (lastOption) {\n                observer.observe(lastOption);\n            }\n        }\n\n        return () => {\n            if (observer) {\n                observer.disconnect();\n            }\n        };\n    }, [page, opened, allOptionsLoaded, initialPage, loading, fetchNextOffsetOptions]);\n\n    const onOpen = useCallback(\n        (payload: { open?: boolean }) => {\n            if (payload.open) {\n                if (options.length === initialOptions.length) {\n                    fetchNextOffsetOptions();\n                }\n            } else {\n                // eslint-disable-next-line no-unused-expressions\n                abortFetchingOptionsRef.current?.();\n                dispatch(actions.fetchOptionsBreak());\n            }\n\n            dispatch(actions.setIsOpened(payload.open ?? false));\n        },\n\n        [initialOptions.length, options.length, fetchNextOffsetOptions],\n    );\n\n    const fetchNextOptionsRef = useRef<() => void>();\n    const fetchNextOptionsTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n    useEffect(() => {\n        fetchNextOptionsRef.current = fetchNextOffsetOptions;\n    }, [fetchNextOffsetOptions]);\n\n    const onQueryStringChange = useCallback<Exclude<InputProps['onChange'], undefined>>(\n        (_, payload) => {\n            dispatch(actions.setQueryString(payload.value));\n            /* eslint-disable no-unused-expressions */\n\n            /*\n             * Если во время загрузки опций юзер ввел новый текст в инпут,\n             * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу\n             */\n            abortFetchingOptionsRef.current?.();\n\n            listRef.current?.scrollTo({ top: 0 });\n\n            /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */\n            if (fetchNextOptionsTimerRef.current) {\n                clearTimeout(fetchNextOptionsTimerRef.current);\n            }\n            fetchNextOptionsTimerRef.current = setTimeout(() => {\n                /*\n                 * После дебаунса необходимо вызвать функцию-загрузчик,\n                 * содержащую актуальные на данный момент данные оффсета и searchText.\n                 * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,\n                 * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,\n                 * так что берем ее из обновляемого рефа\n                 */\n                fetchNextOptionsRef.current?.();\n            }, DEBOUNCE_TIMEOUT);\n            /* eslint-enable */\n        },\n        [],\n    );\n\n    const skeletonOptions: OptionShape[] = useMemo(() => Array(loading ? limit : 0)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: '',\n            loading: true,\n        })), [loading, limit]);\n\n    const reset = useCallback(() => {\n        dispatch(actions.reset());\n    }, []);\n\n    const renderOption = useCallback(\n        (props) => <Option { ...props } highlighted={ loading ? false : props.highlighted } />,\n        [loading],\n    );\n\n    return {\n        optionsProps: {\n            Option: renderOption,\n            options: [...options, ...skeletonOptions],\n            optionsListProps: {\n                ref: listRef,\n                inputProps: {\n                    onChange: onQueryStringChange,\n                    value: searchText,\n                },\n            },\n            onOpen,\n        },\n        reset,\n    };\n}\n"],"names":["DEBOUNCE_TIMEOUT","actions","payload","opened","qs","useLazyLoading","limit","initialPage","optionsFetcher","initialOptions","lazyLoadingInitialState","lazyLoadingReducer","state","action","page","options","loading","allOptionsLoaded","searchText","dispatch","useReducer","abortFetchingOptionsRef","useRef","fetchNextOffsetOptions","useCallback","resolve","reject","_a","res","serializedData","convertToOptions","totalPages","currentPage","err","listRef","useEffect","observer","entry","listOptions","lastOption","onOpen","_b","fetchNextOptionsRef","fetchNextOptionsTimerRef","onQueryStringChange","_","skeletonOptions","useMemo","key","reset","props","jsx","Option"],"mappings":"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"}

package/dist/select/presets/use-select-with-loading/hook.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "../../typings";
-type useSelectWithLoadingProps = {
+import { BaseSelectProps, OptionShape } from '../../typings';
+declare type useSelectWithLoadingProps = {
     loading?: boolean;
     visibleOptions?: BaseSelectProps['visibleOptions'];
 };
-declare function useSelectWithLoading({ loading, visibleOptions, }: useSelectWithLoadingProps): {
+export declare function useSelectWithLoading({ loading, visibleOptions, }: useSelectWithLoadingProps): {
     Option: (props: any) => JSX.Element;
     options: OptionShape[];
 } | null;
-export { useSelectWithLoading };
+export {};

package/dist/select/presets/use-select-with-loading/hook.js

@@ -1 +1,26 @@
-import{__assign as e}from"tslib";import o,{useCallback as n}from"react";import{Skeleton as t}from"../../../skeleton/component.js";import{Option as i}from"../../components/option/component.js";import"classnames";import"../../components/checkmark/component.js";var r={skeleton:"index-module_skeleton__3exug"};function m(m){var l=m.loading,s=void 0!==l&&l,c=m.visibleOptions,p=void 0===c?6:c,a=n((function(n){return o.createElement(i,e({},n,{Checkmark:null,highlighted:!s&&n.highlighted}))}),[s]),u=Array(p).fill(0).map((function(e,n){return{key:n,disabled:!0,content:o.createElement(t,{className:r.skeleton,visible:!0})}}));return s?{Option:a,options:u}:null}export{m as useSelectWithLoading};
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { Skeleton as m } from "../../../skeleton/component.js";
+import { Option as f } from "../../components/option/component.js";
+import a from "./index.module.css.js";
+function d({
+  loading: t = !1,
+  visibleOptions: o = 6
+}) {
+  const i = s(
+    (e) => /* @__PURE__ */ r(f, { ...e, Checkmark: null, highlighted: t ? !1 : e.highlighted }),
+    [t]
+  ), l = Array(o).fill(0).map((e, n) => ({
+    key: n,
+    disabled: !0,
+    content: /* @__PURE__ */ r(m, { className: a.skeleton, visible: !0 })
+  }));
+  return t ? {
+    Option: i,
+    options: l
+  } : null;
+}
+export {
+  d as useSelectWithLoading
+};
+//# sourceMappingURL=hook.js.map

package/dist/select/presets/use-select-with-loading/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sources":["../../../../src/select/presets/use-select-with-loading/hook.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Skeleton } from '../../../skeleton';\nimport { Option } from '../../components/option';\nimport { BaseSelectProps, OptionShape } from '../../typings';\n\nimport styles from './index.module.css';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useSelectWithLoadingProps = {\n    loading?: boolean;\n    visibleOptions?: BaseSelectProps['visibleOptions'];\n};\n\nexport function useSelectWithLoading({\n    loading = false,\n    visibleOptions = 6,\n}: useSelectWithLoadingProps) {\n    const renderOption = useCallback(\n        (props) => (\n            <Option { ...props } Checkmark={ null } highlighted={ loading ? false : props.highlighted } />\n        ),\n        [loading],\n    );\n\n    const options: OptionShape[] = Array(visibleOptions)\n        .fill(0)\n        .map((_, key) => ({\n            key,\n            disabled: true,\n            content: <Skeleton className={ styles.skeleton } visible={ true } />,\n        }));\n\n    if (!loading) return null;\n\n    return {\n        Option: renderOption,\n        options,\n    };\n}\n"],"names":["useSelectWithLoading","loading","visibleOptions","renderOption","useCallback","props","jsx","Option","options","_","key","Skeleton","styles"],"mappings":";;;;;AAcO,SAASA,EAAqB;AAAA,EACjC,SAAAC,IAAU;AAAA,EACV,gBAAAC,IAAiB;AACrB,GAA8B;AAC1B,QAAMC,IAAeC;AAAA,IACjB,CAACC,MACG,gBAAAC,EAACC,GAAA,EAAS,GAAGF,GAAQ,WAAY,MAAO,aAAcJ,IAAU,KAAQI,EAAM,YAAA,CAAc;AAAA,IAEhG,CAACJ,CAAO;AAAA,EAAA,GAGNO,IAAyB,MAAMN,CAAc,EAC9C,KAAK,CAAC,EACN,IAAI,CAACO,GAAGC,OAAS;AAAA,IACd,KAAAA;AAAA,IACA,UAAU;AAAA,IACV,SAAS,gBAAAJ,EAACK,GAAA,EAAS,WAAYC,EAAO,UAAW,SAAU,GAAA,CAAO;AAAA,EAAA,EACpE;AAEN,SAAKX,IAEE;AAAA,IACH,QAAQE;AAAA,IACR,SAAAK;AAAA,EAAA,IAJiB;AAMzB;"}

package/dist/select/presets/use-select-with-loading/index.module.css

@@ -0,0 +1 @@
+.index-module_skeleton__9Xlnt{position:absolute;top:50%;transform:translateY(-50%);height:16px;width:50%}

package/dist/select/presets/use-select-with-loading/index.module.css.js

@@ -0,0 +1,9 @@
+import './index.module.css';
+const e = "index-module_skeleton__9Xlnt", t = {
+  skeleton: e
+};
+export {
+  t as default,
+  e as skeleton
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/select/presets/use-select-with-loading/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}