@alphakits/ui 2.0.13 → 2.2.0

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;
-    }) => JSX.Element | null;
-    /**
-     * Список вариантов выбора
-     */
+    }) => 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;
 };

package/dist/select/utils.d.ts

@@ -11,25 +11,10 @@ export declare function processOptions(options: BaseSelectProps['options'], sele
     selectedOptions: OptionShape[];
 };
 type useVisibleOptionsArgs = {
-    /**
-     * Количество видимых пунктов
-     */
     visibleOptions: number;
-    /**
-     * Реф на контейнер с пунтами меню
-     */
-    listRef: RefObject<HTMLElement>;
-    /**
-     * Реф на контейнер, которому нужно установить высоту
-     */
-    styleTargetRef?: RefObject<HTMLElement>;
-    /**
-     * Флаг открытия меню
-     */
+    listRef: RefObject<HTMLElement | null>;
+    styleTargetRef?: RefObject<HTMLElement | null>;
     open?: boolean;
-    /**
-     * Позволяет вызвать пересчет высоты
-     */
     invalidate?: unknown;
 };
 export declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;

package/dist/select/utils.js

@@ -1,40 +1,42 @@
 import { useEffect as p, isValidElement as f, cloneElement as y } from "react";
-const a = (t) => Object.prototype.hasOwnProperty.call(t, "options"), d = (t) => !!t && Object.prototype.hasOwnProperty.call(t, "key"), O = ({
+const a = (t) => Object.prototype.hasOwnProperty.call(t, "options"), g = (t) => !!t && Object.prototype.hasOwnProperty.call(t, "key"), O = ({
   selected: t,
   selectedMultiple: s
 }) => {
   const e = s || (t ? [t] : []);
-  return e.length ? e.reduce((r, c, o) => (f(c.content) ? r.push(y(c.content, { key: c.key })) : r.push(c.content), o < e.length - 1 && r.push(", "), r), []) : null;
+  return e.length ? e.reduce((r, o, c) => (f(o.content) ? r.push(y(o.content, { key: o.key })) : r.push(o.content), c < e.length - 1 && r.push(", "), r), []) : null;
 };
 function k(t, s = []) {
-  const e = [], r = Array.isArray(s) ? s : [s], c = r.filter(d), o = r.filter(
-    (n) => typeof n == "string" || typeof n == "number"
-  ), i = (n) => o.includes(n.key), l = (n) => {
-    e.push(n), i(n) && c.push(n);
+  const e = [], r = Array.isArray(s) ? s : [s], o = r.filter(g), c = new Set(
+    r.filter(
+      (n) => typeof n == "string" || typeof n == "number"
+    )
+  ), h = (n) => c.has(n.key), l = (n) => {
+    e.push(n), h(n) && o.push(n);
   };
   return t.forEach((n) => {
     a(n) ? n.options.forEach(l) : l(n);
-  }), { flatOptions: e, selectedOptions: c };
+  }), { flatOptions: e, selectedOptions: o };
 }
 function E({
   visibleOptions: t,
   listRef: s,
   styleTargetRef: e = s,
   open: r,
-  invalidate: c
+  invalidate: o
 }) {
   p(() => {
-    const o = s.current, i = e.current;
-    if (r && o && i) {
+    const c = s.current, h = e.current;
+    if (r && c && h) {
       const l = [].slice.call(
-        o.children,
+        c.children,
         0,
         t + 1
       );
-      let n = l.slice(0, t).reduce((h, u) => h + u.clientHeight, 0);
-      t < o.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), i.style.height = `${n}px`;
+      let n = l.slice(0, t).reduce((i, u) => i + u.clientHeight, 0);
+      t < c.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
     }
-  }, [s, r, e, t, c]);
+  }, [s, r, e, t, o]);
 }
 const j = (t, s) => {
   for (let e = t.length - 1; e >= 0; e--)
@@ -47,10 +49,9 @@ const j = (t, s) => {
 export {
   m as convertToOptions,
   a as isGroup,
-  d as isOptionShape,
+  g as isOptionShape,
   O as joinOptions,
   j as lastIndexOf,
   k as processOptions,
   E as useVisibleOptions
 };
-//# sourceMappingURL=utils.js.map

package/dist/sidepanel/component.d.ts

@@ -19,6 +19,7 @@ export type SidepanelProps = {
     showCloser?: boolean;
     noStickyFooter?: boolean;
     noStickyHeader?: boolean;
+    children?: React.ReactNode;
 } & Back;
 export declare const Sidepanel: React.FC<SidepanelProps>;
 export {};

package/dist/sidepanel/component.js

@@ -40,4 +40,3 @@ const R = ({
 export {
   R as Sidepanel
 };
-//# sourceMappingURL=component.js.map

package/dist/sidepanel/index.js

@@ -2,4 +2,3 @@ import { Sidepanel as p } from "./component.js";
 export {
   p as Sidepanel
 };
-//# sourceMappingURL=index.js.map

package/dist/sidepanel/index.module.css.js

@@ -16,4 +16,3 @@ export {
   o as loader,
   c as noSticky
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/sidepanel-header/component.d.ts

@@ -8,25 +8,10 @@ type Back = {
     t?: never;
 };
 export type SidepanelHeaderProps = {
-    /**
-     * Кастомный класс
-     */
     className?: string;
-    /**
-     * title
-     */
     title?: string;
-    /**
-     * rightAddons - слот слева
-     */
     rightAddons?: React.ReactNode;
-    /**
-     * bottomAddons - слот внизу
-     */
     bottomAddons?: React.ReactNode;
-    /**
-     * Id компонента для тестов
-     */
     noCloser?: boolean;
     showCloser?: boolean;
     dataTestId?: string;

package/dist/sidepanel-header/component.js

@@ -37,4 +37,3 @@ const h = ({ title: m, subtitle: l }) => /* @__PURE__ */ a(w, { columns: 1, gr:
 export {
   u as SidepanelHeader
 };
-//# sourceMappingURL=component.js.map

package/dist/sidepanel-header/index.js

@@ -2,4 +2,3 @@ import { SidepanelHeader as a } from "./component.js";
 export {
   a as SidepanelHeader
 };
-//# sourceMappingURL=index.js.map

package/dist/sidepanel-header/index.module.css.js

@@ -16,4 +16,3 @@ export {
   n as title,
   o as wrapper
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/skeleton/component.d.ts

@@ -1,21 +1,9 @@
 import { default as React } from 'react';
 export type SkeletonProps = {
     children?: React.ReactNode;
-    /**
-     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
-     */
     visible?: boolean;
-    /**
-     * Флаг явного включения анимации скелета
-     */
     animate?: boolean;
-    /**
-     * Дополнительный класс
-     */
     className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
     dataTestId?: string;
 };
 export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/skeleton/component.js

@@ -19,4 +19,3 @@ const d = ({
 export {
   d as Skeleton
 };
-//# sourceMappingURL=component.js.map

package/dist/skeleton/index.js

@@ -2,4 +2,3 @@ import { Skeleton as r } from "./component.js";
 export {
   r as Skeleton
 };
-//# sourceMappingURL=index.js.map

package/dist/skeleton/index.module.css.js

@@ -8,4 +8,3 @@ export {
   n as component,
   o as default
 };
-//# sourceMappingURL=index.module.css.js.map

package/dist/space/Item.d.ts

@@ -11,5 +11,5 @@ export interface ItemProps {
     divider?: string | React.ReactNode;
     wrap?: boolean;
 }
-declare const Item: (props: ItemProps) => JSX.Element | null;
+declare const Item: (props: ItemProps) => React.JSX.Element | null;
 export default Item;

package/dist/space/Item.js

@@ -33,4 +33,3 @@ const u = (a) => {
 export {
   u as default
 };
-//# sourceMappingURL=Item.js.map