@alfalab/core-components-picker-button 11.2.0 → 11.3.0

package/esm/field/Component.js

@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/MoreMIcon';
 import '@alfalab/icons-glyph/MoreSIcon';
 
-var styles = {"iconContainer":"picker-button__iconContainer_12l54","addonsContainer":"picker-button__addonsContainer_12l54","showControlIcon":"picker-button__showControlIcon_12l54","open":"picker-button__open_12l54","linkOpen":"picker-button__linkOpen_12l54"};
+var styles = {"iconContainer":"picker-button__iconContainer_1c5yv","addonsContainer":"picker-button__addonsContainer_1c5yv","showControlIcon":"picker-button__showControlIcon_1c5yv","open":"picker-button__open_1c5yv","linkOpen":"picker-button__linkOpen_1c5yv"};
 require('./index.css')
 
 var Field = function (_a) {

package/esm/field/index.css

@@ -1,7 +1,7 @@
-/* hash: 12s27 */
+/* hash: 1w27n */
 :root {
 } /* deprecated */ :root {
-    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -17,15 +17,15 @@
 } :root {
 } :root {
     --arrow-transform: rotate(180deg);
-} .picker-button__iconContainer_12l54 {
+} .picker-button__iconContainer_1c5yv {
     display: flex;
     transition: transform 0.15s ease-in-out;
-} .picker-button__addonsContainer_12l54 {
+} .picker-button__addonsContainer_1c5yv {
     display: flex
-} .picker-button__addonsContainer_12l54.picker-button__showControlIcon_12l54 {
+} .picker-button__addonsContainer_1c5yv.picker-button__showControlIcon_1c5yv {
         margin-right: var(--gap-2xs);
-    } .picker-button__open_12l54 {
+    } .picker-button__open_1c5yv {
     transform: var(--arrow-transform);
-} .picker-button__linkOpen_12l54:not(:hover) {
-    background-color: var(--color-light-specialbg-secondary-transparent);
+} .picker-button__linkOpen_1c5yv:not(:hover) {
+    background-color: var(--color-light-neutral-translucent-100);
 }

package/esm/{index-5cb54b98.d.ts → index-081223cb.d.ts}

@@ -4,9 +4,15 @@ import { PaddingType } from "./index-72dda473";
 /* eslint-disable no-plusplus, no-param-reassign */
 import { MaskitoPlugin, MaskitoPostprocessor, MaskitoPreprocessor } from "@maskito/core";
 import { useCustomWebkitScrollbar } from "./useCustomWebkitScrollbar-a216f694";
-declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare const isClient: () => boolean;
+declare function isApplePlatform(): boolean;
+declare function isIOS(): boolean;
+declare const os: {
+    isIOS: typeof isIOS;
+    isApplePlatform: typeof isApplePlatform;
+};
 declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
 declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
@@ -51,5 +57,5 @@ declare const maskUtils: {
 declare const hooks: {
     useCustomWebkitScrollbar: typeof useCustomWebkitScrollbar;
 };
-export { createPaddingStyle, isClient, getDataTestId, easingFns, fnUtils, maskUtils, hooks };
+export { isClient, os, getDataTestId, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks };
 export * from "./browser-a216f694";

package/esm/index-785df74d.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-785df74d";
+export {};

package/{Component.responsive-3109f463.d.ts → esm/index-c44170fe.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import React from 'react';
-type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+import React from "react";
+type FormControlProps = Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -12,15 +12,7 @@ type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
 declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
     breakpoint?: number | undefined;
-    /**
-     * Значение по-умолчанию для хука useMatchMedia
-     */
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export * from "./Component-5cb54b98";
 export { FormControlProps, FormControl };

package/esm/index-d7e9f69d.d.ts

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

package/esm/index-ebda875c.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+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, "Component" | "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+declare const IconButton: React.ForwardRefExoticComponent<{
+    icon: ElementType<{
+        className?: string;
+    }> | ReactElement;
+    view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
+    size?: "s" | "xs" | "xxs" | undefined;
+    className?: string | undefined;
+    alignIcon?: "center" | "left" | "right" | undefined;
+    dataTestId?: string | undefined;
+    colors?: "default" | "inverted" | undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "Component" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+export { CloserProps, Closer, IconButtonProps, IconButton };

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 393qh */
+/* hash: nx5b1 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,13 +16,13 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .picker-button__container_19ryi {
+} .picker-button__container_1074s {
     min-width: auto;
-} .cc-picker-button.picker-button__optionsPopover_19ryi.picker-button__sideGap_19ryi {
+} .cc-picker-button.picker-button__optionsPopover_1074s.picker-button__sideGap_1074s {
             padding: 0 var(--gap-xs);
-        } .cc-picker-button .picker-button__option_19ryi {
+        } .cc-picker-button .picker-button__option_1074s {
         padding: 0 var(--gap-m)
-    } .cc-picker-button .picker-button__option_19ryi:before {
+    } .cc-picker-button .picker-button__option_1074s:before {
             /* Удаляем разделители у опций выпадающего списка. */
             display: none;
         }

package/esm/index.js

@@ -4,6 +4,7 @@ import 'react';
 import '@alfalab/hooks';
 import './Component.desktop.js';
 import 'classnames';
+import '@alfalab/core-components-popover/esm';
 import '@alfalab/core-components-select/esm/shared';
 import './field/Component.js';
 import '@alfalab/core-components-button/esm';

package/esm/option/Component.js

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { Option as Option$1 } from '@alfalab/core-components-select/esm/shared';
 
-var styles = {"container":"picker-button__container_17ijm","icon":"picker-button__icon_17ijm","content":"picker-button__content_17ijm"};
+var styles = {"container":"picker-button__container_xxpve","icon":"picker-button__icon_xxpve","content":"picker-button__content_xxpve"};
 require('./index.css')
 
 var Option = function (_a) {

package/esm/option/index.css

@@ -1,4 +1,4 @@
-/* hash: 1e4ss */
+/* hash: 1dusi */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .picker-button__container_17ijm {
+} .picker-button__container_xxpve {
     display: flex;
     align-items: center;
-} .picker-button__icon_17ijm {
+} .picker-button__icon_xxpve {
     display: flex;
     margin-right: var(--gap-s);
-} .picker-button__content_17ijm {
+} .picker-button__content_xxpve {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/esm/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };

package/esm/types-1c79e231.d.ts

@@ -0,0 +1,113 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { CloserProps } from "./index-ebda875c";
+type NavigationBarProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Подзаголовок (доступен только в мобильной версии)
+     */
+    subtitle?: ReactNode;
+    /**
+     * Размер заголовка (compact доступен только в мобильной версии)
+     */
+    titleSize?: 'default' | 'compact';
+    /**
+     * Доп. класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Дополнительный класс для closer
+     */
+    closerClassName?: string;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие кнопки "Назад"
+     */
+    hasBackButton?: boolean;
+    /**
+     * Дополнительный класс для правого аддона
+     */
+    backButtonClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для нижнего аддона
+     */
+    bottomAddonsClassName?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
+    /**
+     * Иконка closer.
+     */
+    closerIcon?: React.ElementType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: CloserProps['onClose'];
+    /**
+     * обработчик клика по кнопке "назад"
+     */
+    onBack?: () => void;
+    /**
+     * Вид шапки - мобильный или десктоп
+     */
+    view: 'desktop' | 'mobile';
+    /**
+     * Ссылка на родительскую ноду overflow: auto
+     */
+    scrollableParentRef?: React.RefObject<HTMLDivElement>;
+};
+type ContentParams = {
+    extraClassName?: string;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    style?: React.CSSProperties;
+    hidden?: boolean;
+};
+export { NavigationBarProps, ContentParams };