@alphakits/ui 2.1.0 → 2.1.1

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

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

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

@@ -23,4 +23,3 @@ function k({
 export {
   k as useSelectWithLoading
 };
-//# sourceMappingURL=hook.js.map

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

@@ -1,4 +1,5 @@
-import './index.module.css';
+import * as __css from './index.css';
+export const __cssModule = __css;
 const e = "skeleton_9Xln", s = {
   skeleton: e
 };
@@ -6,4 +7,3 @@ export {
   s as default,
   e as skeleton
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/select/typings.d.ts

@@ -2,310 +2,98 @@ import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, Re
 import { InputProps } from '../input';
 import { PopoverProps } from '../popover';
 export type OptionShape = {
-    /**
-     * Текстовое представление пункта
-     */
     key: number | string;
-    /**
-     * Контент, который будет отрисован в выпадающем списке и в поле при выборе
-     */
     content?: ReactNode;
-    /**
-     * Блокирует данный пункт для выбора
-     */
     disabled?: boolean;
-    /**
-     * состояние прелоада
-     */
     loading?: boolean;
-    /**
-     * Дополнительные данные
-     */
     value?: any;
 };
 export type GroupShape = {
-    /**
-     * Заголовок группы
-     */
     label?: string;
-    /**
-     * Дочерние элементы
-     */
     options: OptionShape[];
 };
 export type BaseSelectProps = {
     filteredOptions?: any[];
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string;
-    /**
-     * Дополнительный класс
-     */
     className?: string;
     offset?: PopoverProps['offset'];
     withArrow?: boolean;
-    /**
-     * Класс для внешнего компонента листа опций
-     */
     popoverOuterClassname?: string;
     required?: boolean;
-    /**
-     * Дополнительный класс для поля
-     */
     fieldClassName?: string;
-    /**
-     * Дополнительный класс выпадающего меню
-     */
     optionsListClassName?: string;
-    /**
-     * Дополнительный класс для пункта меню
-     */
     optionClassName?: string;
-    /**
-     * Список вариантов выбора
-     */
     options: Array<OptionShape | GroupShape>;
-    /**
-     * Кнопка в листе опций
-     */
     actionButton?: {
         label: string;
         onClick: () => void;
     };
-    /**
-     * Атрибут id
-     */
     id?: string;
-    /**
-     * Атрибут name
-     */
     name?: string;
-    /**
-     * Управление возможностью выбора значения
-     */
     disabled?: boolean;
-    /**
-     * Начальное состояние селекта
-     */
     defaultOpen?: boolean;
-    /**
-     * Управление открытием
-     */
     open?: boolean;
-    /**
-     * Возможность выбрать несколько значений
-     */
     multiple?: boolean;
-    /**
-     * Размер компонента
-     */
     size?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Размер пунктов меню
-     */
     optionsSize?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
     block?: boolean;
-    /**
-     * Управляет шириной выпадающего меню.
-     * Ширину определяет контент, либо ширина равна ширине поля
-     */
     optionsListWidth?: 'content' | 'field';
-    /**
-     * Лейбл поля
-     */
     label?: ReactNode;
-    /**
-     * Плейсхолдер поля
-     */
     placeholder?: string;
-    /**
-     * Отображение ошибки
-     */
     error?: string | boolean;
-    /**
-     * Подсказка под полем
-     */
     hint?: string;
-    /**
-     * Возможность использовать селект как input-autocomplete
-     */
     autocomplete?: boolean;
-    /**
-     * Позволяет снять выбранное значение
-     */
     allowUnselect?: boolean;
-    /**
-     * Закрывать меню после выбора?
-     */
     closeOnSelect?: boolean;
-    /**
-     * При навигации с клавиатуры переходить от последнего пункта меню к первому и наоборот.
-     */
     circularNavigation?: boolean;
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
     preventFlip?: boolean;
-    /**
-     * Список value выбранных пунктов (controlled-селект)
-     */
     selected?: Array<string | number | OptionShape> | string | number | OptionShape | null;
-    /**
-     * Рендерит нативный селект вместо выпадающего меню. (на десктопе использовать только с multiple=false)
-     */
     nativeSelect?: boolean;
-    /**
-     * Позиционирование выпадающего списка
-     */
     popoverPosition?: PopoverProps['position'];
-    /**
-     * Количество видимых пунктов меню (5 = 5.5)
-     */
     visibleOptions?: number;
-    /**
-     * Кастомный рендер выбранного пункта
-     */
     valueRenderer?: ({ selected, selectedMultiple, }: {
         selected?: OptionShape;
         selectedMultiple: OptionShape[];
     }) => ReactNode;
-    /**
-     * Компонент стрелки
-     */
     Arrow?: FC<ArrowProps> | null | false;
-    /**
-     * Компонент поля
-     */
     Field?: FC<SelectFieldProps>;
-    /**
-     * Пропсы, которые будут прокинуты в компонент поля
-     */
     fieldProps?: Record<string, unknown>;
-    /**
-     * Пропсы, которые будут прокинуты в компонент списка
-     */
     optionsListProps?: Record<string, unknown>;
-    /**
-     * Пропсы, которые будут прокинуты в компонент пункта меню
-     */
     optionProps?: Record<string, unknown>;
-    /**
-     * Компонент выпадающего меню
-     */
     OptionsList?: FC<OptionsListProps>;
-    /**
-     * Компонент группы
-     */
     Optgroup?: FC<OptgroupProps>;
-    /**
-     * Компонент пункта меню
-     */
     Option?: FC<OptionProps>;
-    /**
-     * Обработчик выбора
-     */
     onChange?: (payload: {
         selected: OptionShape | null;
         selectedMultiple: OptionShape[];
         name?: string;
     }) => void;
-    /**
-     * Обработчик открытия\закрытия селекта
-     */
     onOpen?: (payload: {
         open?: boolean;
         name?: string;
     }) => void;
-    /**
-     * Обработчик фокуса поля
-     */
     onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
-    /**
-     * Обработчик блюра поля
-     */
     onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
-    /**
-     * Обработчик скрола
-     */
     onScroll?: (event: UIEvent<HTMLDivElement>) => void;
-    /**
-     * Хранит функцию, с помощью которой можно обновить положение поповера
-     */
     updatePopover?: PopoverProps['update'];
-    /**
-     * z-index поповера
-     */
     zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Показывать OptionsList, если он пустой
-     */
     showEmptyOptionsList?: boolean;
 };
 export type SelectFieldProps = {
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Размер компонента
-     */
     size?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Выбранный пункт
-     */
     selected?: OptionShape;
-    /**
-     * Список выбранных пунктов
-     */
     selectedMultiple?: OptionShape[];
-    /**
-     * Флаг, можно ли выбрать несколько значений
-     */
     multiple?: boolean;
-    /**
-     * Флаг, открыто ли меню
-     */
     open?: boolean;
-    /**
-     * Флаг, поле заблокировано
-     */
     disabled?: boolean;
-    /**
-     * Лейбл поля
-     */
     label?: ReactNode;
-    /**
-     * Плейсхолдер поля
-     */
     placeholder?: string;
-    /**
-     * Отображение ошибки
-     */
     error?: string | boolean;
-    /**
-     * Отображение иконки успеха
-     */
     success?: boolean;
-    /**
-     * Подсказка под полем
-     */
     hint?: string;
-    /**
-     * Компонент стрелки
-     */
     Arrow?: ReactElement | false | null;
-    /**
-     * Кастомный рендер выбранного пункта
-     */
     valueRenderer?: BaseSelectProps['valueRenderer'];
-    /**
-     * Внутренние свойства, которые должны быть установлены компоненту.
-     */
     innerProps: {
         onBlur?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
         onFocus?: (event: FocusEvent<HTMLDivElement | HTMLInputElement>) => void;
@@ -313,140 +101,50 @@ export type SelectFieldProps = {
         tabIndex: number;
         id: string;
     } & RefAttributes<HTMLDivElement | HTMLInputElement> & AriaAttributes;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string;
 };
 export type ArrowProps = {
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Флаг, открыто ли меню
-     */
     open?: boolean;
 };
 export type OptionsListProps = {
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Размер компонента
-     */
     size?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Компонент пункта меню
-     */
     Option: (props: {
         option: OptionShape;
         index: number;
     }) => ReactElement | null;
-    /**
-     * Список вариантов выбора
-     */
     options?: Array<OptionShape | GroupShape>;
-    /**
-     * Плоский список пунктов меню (например, нужно для виртуализации)
-     */
     flatOptions?: OptionShape[];
-    /**
-     * Кнопка в листе опций
-     */
     actionButton?: {
         label: string;
         onClick: () => void;
     };
-    /**
-     * Индекс выделенного пункта
-     */
     highlightedIndex?: number;
-    /**
-     * Флаг, открыто ли меню
-     */
     open?: boolean;
-    /**
-     * Компонент группы
-     */
     Optgroup?: BaseSelectProps['Optgroup'];
-    /**
-     * Будет отображаться, если компонент пустой
-     */
     emptyPlaceholder?: string | ReactNode;
-    /**
-     * Количество видимых пунктов меню (5 = 5.5)
-     */
     visibleOptions?: number;
-    /**
-     * Обработчик скрола
-     */
     onScroll?: (event: UIEvent<HTMLDivElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string;
-    /**
-     * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
-     */
     inputProps?: InputProps;
     toggleMenu: () => void;
 };
 export type OptgroupProps = {
-    /**
-     * Размер компонента
-     */
     size?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Заголовок группы
-     */
     label?: string;
-    /**
-     * Дочерние элементы
-     */
     children?: ReactNode;
 };
 export type OptionProps = {
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Размер компонента
-     */
     size?: 's' | 'm' | 'l' | 'xl' | 'xs';
-    /**
-     * Контент пункта меню
-     */
     children?: ReactNode;
-    /**
-     * Данные пункта меню
-     */
     option: OptionShape;
-    /**
-     * Индект пункта
-     */
     index: number;
-    /**
-     * Флаг, выбран ли данный пункт
-     */
     selected?: boolean;
-    /**
-     * Флаг, подсвечен ли данный пункт
-     */
     highlighted?: boolean;
-    /**
-     * Флаг, заблокирован ли данный пункт
-     */
     disabled?: boolean;
-    /**
-     * Компонент пункта меню
-     */
     Checkmark?: FC<CheckmarkProps>;
-    /**
-     * Внутренние свойства, которые должны быть установлены компоненту.
-     */
     innerProps?: {
         id?: string;
         onClick?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -456,8 +154,5 @@ export type OptionProps = {
     } & RefAttributes<HTMLDivElement> & AriaAttributes;
 };
 export type CheckmarkProps = {
-    /**
-     * Флаг, данный пункт выбран
-     */
     selected?: boolean;
 };