@alfalab/core-components-table 2.2.41 → 2.3.0

package/modern/components/tsortable-head-cell/Component.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import React from 'react';
 import { THeadCellProps } from "../thead-cell/index";
 type TSortableHeadCellProps = THeadCellProps & {
     isSortedDesc?: boolean;
     defaultIsSortedDesc?: boolean;
     onSort?: () => void;
 };
-declare const TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: TSortableHeadCellProps) => JSX.Element;
+declare const TSortableHeadCell: ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }: TSortableHeadCellProps) => React.JSX.Element;
 export { TSortableHeadCellProps, TSortableHeadCell };

package/modern/components/tsortable-head-cell/Component.js

@@ -6,7 +6,7 @@ import { SortIconDesc } from './sort-icon-desc.js';
 import { SortIconUnset } from './sort-icon-unset.js';
 import '../table-context/index.js';
 
-const styles = {"component":"table__component_yiint","content":"table__content_yiint","icon":"table__icon_yiint","reverse":"table__reverse_yiint","sorted":"table__sorted_yiint"};
+const styles = {"content":"table__content_ni7wn","icon":"table__icon_ni7wn","reverse":"table__reverse_ni7wn","sorted":"table__sorted_ni7wn"};
 require('./index.css')
 
 const TSortableHeadCell = ({ children, className, defaultIsSortedDesc, isSortedDesc, textAlign, onSort, ...restProps }) => {
@@ -18,7 +18,7 @@ const TSortableHeadCell = ({ children, className, defaultIsSortedDesc, isSortedD
             return value ? SortIconDesc : SortIconAsc;
         return SortIconUnset;
     }, [defaultIsSortedDesc, isSortedDesc]);
-    return (React.createElement(THeadCell, { className: cn(className, styles.component), ...restProps },
+    return (React.createElement(THeadCell, { className: className, ...restProps },
         React.createElement("div", { className: cn(styles.content, { [styles.reverse]: textAlign === 'right' }) },
             children,
             React.createElement(SortIcon, { onClick: onSort, className: cn(styles.icon, {

package/modern/components/tsortable-head-cell/index.css

@@ -1,4 +1,4 @@
-/* hash: 17er7 */
+/* hash: 16h2p */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-link: #0072ef;
@@ -18,12 +18,10 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .table__component_yiint {
-    position: relative;
-} .table__content_yiint {
+} .table__content_ni7wn {
     display: flex;
     align-items: flex-start;
-} .table__icon_yiint {
+} .table__icon_ni7wn {
     cursor: pointer;
     margin-left: var(--gap-xs);
 
@@ -35,15 +33,15 @@
     color: var(--color-light-graphic-secondary);
     transition: color 0.2s ease;
     flex-shrink: 0
-} .table__icon_yiint:hover {
+} .table__icon_ni7wn:hover {
         color: var(--color-light-graphic-primary);
-    } .table__reverse_yiint {
+    } .table__reverse_ni7wn {
     flex-direction: row-reverse
-} .table__reverse_yiint .table__icon_yiint {
+} .table__reverse_ni7wn .table__icon_ni7wn {
         margin-left: 0;
         margin-right: var(--gap-xs);
-    } .table__sorted_yiint {
+    } .table__sorted_ni7wn {
     color: var(--color-light-graphic-link)
-} .table__sorted_yiint:hover {
+} .table__sorted_ni7wn:hover {
         color: var(--color-light-graphic-link);
     }

package/modern/consts-f777ba1a.d.ts

@@ -0,0 +1,2 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+export { DEFAULT_VISIBLE_OPTIONS };

package/modern/desktop-63dec22f.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from "react";
+import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
+type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonDesktop: React.ForwardRefExoticComponent<ButtonDesktopProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktopProps, ButtonDesktop };

package/modern/hook-5e1b8383.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./typings-5e1b8383";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings-5e1b8383").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+        Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
+         * Показывать кнопку очистки
+         */
+        showHeaderWithSelectAll?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    optionsListProps: {
+        OptionsList: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+        showHeaderWithSelectAll: boolean;
+        headerProps: {
+            indeterminate: boolean;
+            checked: boolean;
+            onChange: () => void;
+        };
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./typings-5e1b8383").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+};
+export * from "./Component-ebda875c";
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/modern/hook-ebda875c.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionProps, OptionShape } from "./typings-5e1b8383";
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
+};
+declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option, }: useLazyLoadingProps): {
+    optionsProps: {
+        Option: (props: OptionProps) => React.JSX.Element;
+        options: OptionShape[];
+        optionsListProps: {
+            ref: React.RefObject<HTMLDivElement>;
+            inputProps: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                    value: string;
+                }) => void;
+                value: string;
+            };
+        };
+        onOpen: (payload: {
+            open?: boolean;
+        }) => void;
+    };
+    reset: () => void;
+};
+export { useLazyLoading };

package/modern/index-136acbb1.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FC, ReactNode } from "react";
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+export { stackingOrder, StackingContext, StackProps, Stack };

package/modern/index-3109f463.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/modern/index-425c8522.d.ts

@@ -0,0 +1,6 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };

package/modern/index-89a3cf4c.d.ts

@@ -0,0 +1,3 @@
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+export { isClient, getDataTestId };

package/modern/index-bdb4c6b9.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-ebda875c";
+export * from "./utils-1574ad8b";

package/modern/index-c44170fe.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from "react";
+import { BaseInputProps } from "./index-ebda875c";
+type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "colorStyles" | "FormControlComponent"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input, InputMobileProps, InputMobile };

package/modern/index-e81c389f.d.ts

@@ -0,0 +1,3 @@
+export * from "./Component-89a3cf4c";
+export * from "./index-ebda875c";
+export type { NavigationBarProps } from "./types-ebda875c";

package/modern/index-ebda875c.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from "react";
+import { ButtonHTMLAttributes, ElementType, FC, AnchorHTMLAttributes, ReactElement } from "react";
+import { ButtonProps } from "@alfalab/core-components-button";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+type IconButtonProps = {
+    /**
+     * Компонент иконки
+     */
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    /**
+     * Тип кнопки
+     */
+    view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
+    /**
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Выравнивание иконки
+     * @default 'center'
+     */
+    alignIcon?: "left" | "center" | "right";
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    view?: "transparent" | "primary" | "secondary" | "tertiary" | "negative" | undefined;
+    size?: "s" | "xxs" | "xs" | undefined;
+    className?: string | undefined;
+    alignIcon?: "center" | "left" | "right" | undefined;
+    dataTestId?: string | undefined;
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { CloserProps, Closer, IconButtonProps, IconButton };

package/modern/index-f12ee135.d.ts

@@ -0,0 +1,3 @@
+export * from "./component-89a3cf4c";
+export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-425c8522";
+export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/modern/index.js

@@ -8,7 +8,7 @@ import './utils.js';
 import './components/thead/Component.js';
 import './components/pagination/Component.js';
 import '@alfalab/core-components-pagination/modern';
-import '@alfalab/core-components-select/modern';
+import '@alfalab/core-components-select/modern/desktop';
 import './components/pagination/select-field/index.js';
 import '@alfalab/core-components-button/modern';
 import './components/thead-cell/Component.js';

package/modern/mobile-96988a65.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile-d7e9f69d";
+export {};