@alfalab/core-components-picker-button 11.3.2 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component-081223cb.d.ts +6 -2
- package/Component-bdb4c6b9.d.ts +12 -0
- package/{Component-0816e61d.d.ts → Component-c29389e5.d.ts} +1 -1
- package/Component-c44170fe.d.ts +14 -6
- package/Component.desktop-63dec22f.d.ts +6 -0
- package/{cssm/Component.desktop-785df74d.d.ts → Component.desktop-ebda875c.d.ts} +1 -1
- package/Component.mobile-96988a65.d.ts +6 -0
- package/{esm/Component.mobile-d7e9f69d.d.ts → Component.mobile-ebda875c.d.ts} +1 -1
- package/Component.responsive.d.ts +1 -1
- package/Component.responsive.js +3 -3
- package/ResponsiveContext-08e5596c.d.ts +5 -0
- package/cssm/Component-081223cb.d.ts +6 -2
- package/cssm/Component-bdb4c6b9.d.ts +12 -0
- package/{esm/Component-0816e61d.d.ts → cssm/Component-c29389e5.d.ts} +1 -1
- package/cssm/Component-c44170fe.d.ts +14 -6
- package/cssm/Component.desktop-63dec22f.d.ts +6 -0
- package/{Component.desktop-785df74d.d.ts → cssm/Component.desktop-ebda875c.d.ts} +1 -1
- package/cssm/Component.mobile-96988a65.d.ts +6 -0
- package/cssm/{Component.mobile-d7e9f69d.d.ts → Component.mobile-ebda875c.d.ts} +1 -1
- package/cssm/Component.responsive.d.ts +1 -1
- package/cssm/Component.responsive.js +3 -3
- package/cssm/ResponsiveContext-08e5596c.d.ts +5 -0
- package/cssm/{Component.desktop.d.ts → desktop/Component.desktop.d.ts} +2 -2
- package/cssm/{Component.desktop.js → desktop/Component.desktop.js} +6 -6
- package/cssm/desktop/index.d.ts +1 -1
- package/cssm/desktop/index.js +2 -2
- package/cssm/field/Component.d.ts +1 -1
- package/cssm/field/index.module.css +2 -2
- package/cssm/index-63dec22f.d.ts +2 -0
- package/cssm/index-96988a65.d.ts +2 -0
- package/cssm/index-bdb4c6b9.d.ts +223 -0
- package/cssm/index-c44170fe.d.ts +1 -0
- package/cssm/index-ebda875c.d.ts +2 -79
- package/cssm/index.js +2 -2
- package/{Component.mobile.d.ts → cssm/mobile/Component.mobile.d.ts} +1 -1
- package/cssm/{Component.mobile.js → mobile/Component.mobile.js} +5 -5
- package/cssm/mobile/index.d.ts +1 -1
- package/cssm/mobile/index.js +2 -2
- package/{esm/types-1c79e231.d.ts → cssm/types-667e33fd.d.ts} +5 -1
- package/cssm/typings-08e5596c.d.ts +56 -0
- package/cssm/{typings-0816e61d.d.ts → typings-c29389e5.d.ts} +51 -311
- package/cssm/utils-d2597f31.d.ts +1 -1
- package/{esm → desktop}/Component.desktop.d.ts +2 -2
- package/{Component.desktop.js → desktop/Component.desktop.js} +5 -5
- package/desktop/index.d.ts +1 -1
- package/desktop/index.js +2 -2
- package/esm/Component-081223cb.d.ts +6 -2
- package/esm/Component-bdb4c6b9.d.ts +12 -0
- package/{modern/Component-0816e61d.d.ts → esm/Component-c29389e5.d.ts} +1 -1
- package/esm/Component-c44170fe.d.ts +14 -6
- package/esm/Component.desktop-63dec22f.d.ts +6 -0
- package/esm/{Component.desktop-785df74d.d.ts → Component.desktop-ebda875c.d.ts} +1 -1
- package/esm/Component.mobile-96988a65.d.ts +6 -0
- package/{Component.mobile-d7e9f69d.d.ts → esm/Component.mobile-ebda875c.d.ts} +1 -1
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/Component.responsive.js +2 -2
- package/esm/ResponsiveContext-08e5596c.d.ts +5 -0
- package/{Component.desktop.d.ts → esm/desktop/Component.desktop.d.ts} +2 -2
- package/esm/{Component.desktop.js → desktop/Component.desktop.js} +5 -5
- package/esm/desktop/index.d.ts +1 -1
- package/esm/desktop/index.js +1 -1
- package/esm/field/Component.d.ts +1 -1
- package/esm/field/Component.js +1 -1
- package/esm/field/index.css +8 -8
- package/esm/index-63dec22f.d.ts +2 -0
- package/esm/index-96988a65.d.ts +2 -0
- package/esm/index-bdb4c6b9.d.ts +223 -0
- package/esm/index-c44170fe.d.ts +1 -0
- package/esm/index-ebda875c.d.ts +2 -79
- package/esm/index.css +5 -5
- package/esm/index.js +2 -2
- package/{cssm → esm/mobile}/Component.mobile.d.ts +1 -1
- package/esm/{Component.mobile.js → mobile/Component.mobile.js} +3 -3
- package/esm/mobile/index.d.ts +1 -1
- package/esm/mobile/index.js +1 -1
- package/esm/option/Component.js +1 -1
- package/esm/option/index.css +4 -4
- package/{cssm/types-1c79e231.d.ts → esm/types-667e33fd.d.ts} +5 -1
- package/esm/typings-08e5596c.d.ts +56 -0
- package/esm/{typings-0816e61d.d.ts → typings-c29389e5.d.ts} +51 -311
- package/esm/utils-d2597f31.d.ts +1 -1
- package/field/Component.d.ts +1 -1
- package/field/Component.js +1 -1
- package/field/index.css +8 -8
- package/index-63dec22f.d.ts +2 -0
- package/index-96988a65.d.ts +2 -0
- package/index-bdb4c6b9.d.ts +223 -0
- package/index-c44170fe.d.ts +1 -0
- package/index-ebda875c.d.ts +2 -79
- package/index.css +5 -5
- package/index.js +2 -2
- package/{esm → mobile}/Component.mobile.d.ts +1 -1
- package/{Component.mobile.js → mobile/Component.mobile.js} +3 -3
- package/mobile/index.d.ts +1 -1
- package/mobile/index.js +2 -2
- package/modern/Component-081223cb.d.ts +6 -2
- package/modern/Component-bdb4c6b9.d.ts +12 -0
- package/{cssm/Component-0816e61d.d.ts → modern/Component-c29389e5.d.ts} +1 -1
- package/modern/Component-c44170fe.d.ts +14 -6
- package/modern/Component.desktop-63dec22f.d.ts +6 -0
- package/modern/{Component.desktop-785df74d.d.ts → Component.desktop-ebda875c.d.ts} +1 -1
- package/modern/Component.mobile-96988a65.d.ts +6 -0
- package/modern/{Component.mobile-d7e9f69d.d.ts → Component.mobile-ebda875c.d.ts} +1 -1
- package/modern/Component.responsive.d.ts +1 -1
- package/modern/Component.responsive.js +2 -2
- package/modern/ResponsiveContext-08e5596c.d.ts +5 -0
- package/modern/{Component.desktop.d.ts → desktop/Component.desktop.d.ts} +2 -2
- package/modern/{Component.desktop.js → desktop/Component.desktop.js} +5 -5
- package/modern/desktop/index.d.ts +1 -1
- package/modern/desktop/index.js +1 -1
- package/modern/field/Component.d.ts +1 -1
- package/modern/field/Component.js +1 -1
- package/modern/field/index.css +8 -8
- package/modern/index-63dec22f.d.ts +2 -0
- package/modern/index-96988a65.d.ts +2 -0
- package/modern/index-bdb4c6b9.d.ts +223 -0
- package/modern/index-c44170fe.d.ts +1 -0
- package/modern/index-ebda875c.d.ts +2 -79
- package/modern/index.css +5 -5
- package/modern/index.js +2 -2
- package/modern/{Component.mobile.d.ts → mobile/Component.mobile.d.ts} +1 -1
- package/modern/{Component.mobile.js → mobile/Component.mobile.js} +3 -3
- package/modern/mobile/index.d.ts +1 -1
- package/modern/mobile/index.js +1 -1
- package/modern/option/Component.js +1 -1
- package/modern/option/index.css +4 -4
- package/modern/{types-1c79e231.d.ts → types-667e33fd.d.ts} +5 -1
- package/modern/typings-08e5596c.d.ts +56 -0
- package/modern/{typings-0816e61d.d.ts → typings-c29389e5.d.ts} +51 -311
- package/modern/utils-d2597f31.d.ts +1 -1
- package/option/Component.js +1 -1
- package/option/index.css +4 -4
- package/package.json +4 -4
- package/src/{Component.desktop.tsx → desktop/Component.desktop.tsx} +4 -4
- package/src/desktop/index.ts +1 -1
- package/src/field/index.module.css +1 -1
- package/src/{Component.mobile.tsx → mobile/Component.mobile.tsx} +3 -3
- package/src/mobile/index.ts +1 -1
- package/{types-1c79e231.d.ts → types-667e33fd.d.ts} +5 -1
- package/typings-08e5596c.d.ts +56 -0
- package/{typings-0816e61d.d.ts → typings-c29389e5.d.ts} +51 -311
- package/utils-d2597f31.d.ts +1 -1
- package/cssm/index-785df74d.d.ts +0 -2
- package/cssm/index-d7e9f69d.d.ts +0 -2
- package/esm/index-785df74d.d.ts +0 -2
- package/esm/index-d7e9f69d.d.ts +0 -2
- package/index-785df74d.d.ts +0 -2
- package/index-d7e9f69d.d.ts +0 -2
- package/modern/index-785df74d.d.ts +0 -2
- package/modern/index-d7e9f69d.d.ts +0 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { BaseFormControlProps } from "./index-
|
|
3
|
+
import { BaseFormControlProps } from "./index-ebda875c";
|
|
4
4
|
type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
|
|
5
5
|
declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
6
|
export { FormControlMobileProps, FormControlMobile };
|
|
@@ -9,7 +9,7 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
|
|
|
9
9
|
*/
|
|
10
10
|
breakpoint?: number;
|
|
11
11
|
};
|
|
12
|
-
declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/shared").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "
|
|
12
|
+
declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/shared").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<import("@alfalab/core-components-button").ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
|
|
13
13
|
options: ((import("@alfalab/core-components-select/shared").OptionShape | import("@alfalab/core-components-select/shared").GroupShape) & {
|
|
14
14
|
icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
|
|
15
15
|
})[];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __rest, __assign } from 'tslib';
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
3
|
import { useMedia } from '@alfalab/hooks';
|
|
4
|
-
import { PickerButtonDesktop } from './Component.desktop.js';
|
|
5
|
-
import { PickerButtonMobile } from './Component.mobile.js';
|
|
4
|
+
import { PickerButtonDesktop } from './desktop/Component.desktop.js';
|
|
5
|
+
import { PickerButtonMobile } from './mobile/Component.mobile.js';
|
|
6
6
|
import 'classnames';
|
|
7
7
|
import '@alfalab/core-components-popover/esm';
|
|
8
8
|
import '@alfalab/core-components-select/esm/shared';
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { FC, SVGProps } from "react";
|
|
4
4
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
5
5
|
import { BaseSelectProps } from "@alfalab/core-components-select/shared";
|
|
6
|
-
import { PickerButtonSize, PickerButtonVariant } from "
|
|
6
|
+
import { PickerButtonSize, PickerButtonVariant } from "../types";
|
|
7
7
|
type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' | 'autocomplete' | 'size' | 'onFocus' | 'selected' | 'closeOnSelect' | 'multiple' | 'hint' | 'allowUnselect' | 'options' | 'searchProps' | 'showSearch' | 'Search'> & Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
|
|
8
8
|
options: Array<BaseSelectProps['options'][0] & {
|
|
9
9
|
/**
|
|
@@ -25,7 +25,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' |
|
|
|
25
25
|
*/
|
|
26
26
|
showArrow?: boolean;
|
|
27
27
|
};
|
|
28
|
-
declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "
|
|
28
|
+
declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
|
|
29
29
|
options: Array<BaseSelectProps['options'][0] & {
|
|
30
30
|
/**
|
|
31
31
|
* Иконка, отображающаяся слева от текстового представления пункта
|
|
@@ -3,17 +3,17 @@ import React, { forwardRef } from 'react';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
5
5
|
import { BaseSelect, OptionsList, Optgroup } from '@alfalab/core-components-select/esm/shared';
|
|
6
|
-
import { Field } from '
|
|
7
|
-
import { Option } from '
|
|
6
|
+
import { Field } from '../field/Component.js';
|
|
7
|
+
import { Option } from '../option/Component.js';
|
|
8
8
|
import '@alfalab/core-components-button/esm';
|
|
9
|
-
import '
|
|
9
|
+
import '../utils/index.js';
|
|
10
10
|
import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
11
11
|
import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
12
12
|
import '@alfalab/icons-glyph/MoreMIcon';
|
|
13
13
|
import '@alfalab/icons-glyph/MoreSIcon';
|
|
14
14
|
|
|
15
|
-
var styles = {"container":"picker-
|
|
16
|
-
require('
|
|
15
|
+
var styles = {"container":"picker-button__container_q0aq2","optionsPopover":"picker-button__optionsPopover_q0aq2","sideGap":"picker-button__sideGap_q0aq2","option":"picker-button__option_q0aq2"};
|
|
16
|
+
require('./../index.css')
|
|
17
17
|
|
|
18
18
|
var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|
|
19
19
|
var PickerButtonDesktop = forwardRef(function (_a, ref) {
|
package/esm/desktop/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { PickerButtonDesktop, PickerButtonDesktopProps } from "
|
|
1
|
+
export { PickerButtonDesktop, PickerButtonDesktopProps } from "./Component.desktop";
|
|
2
2
|
export {};
|
package/esm/desktop/index.js
CHANGED
package/esm/field/Component.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
4
|
-
import { FieldProps as BaseFieldProps } from "../typings-
|
|
4
|
+
import { FieldProps as BaseFieldProps } from "../typings-c29389e5";
|
|
5
5
|
import { PickerButtonSize, PickerButtonVariant } from "../types";
|
|
6
6
|
type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
|
|
7
7
|
buttonSize?: PickerButtonSize;
|
package/esm/field/Component.js
CHANGED
|
@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
|
8
8
|
import '@alfalab/icons-glyph/MoreMIcon';
|
|
9
9
|
import '@alfalab/icons-glyph/MoreSIcon';
|
|
10
10
|
|
|
11
|
-
var styles = {"iconContainer":"picker-
|
|
11
|
+
var styles = {"iconContainer":"picker-button__iconContainer_qtu41","addonsContainer":"picker-button__addonsContainer_qtu41","showControlIcon":"picker-button__showControlIcon_qtu41","open":"picker-button__open_qtu41","linkOpen":"picker-button__linkOpen_qtu41"};
|
|
12
12
|
require('./index.css')
|
|
13
13
|
|
|
14
14
|
var Field = function (_a) {
|
package/esm/field/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: nti2t */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
|
-
--color-light-
|
|
4
|
+
--color-light-transparent-default-hover: 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 */
|
|
5
5
|
} :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 */
|
|
6
6
|
} :root {
|
|
7
7
|
} :root {
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
19
|
--arrow-transform: rotate(180deg);
|
|
20
|
-
} .picker-
|
|
20
|
+
} .picker-button__iconContainer_qtu41 {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_qtu41 {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_qtu41.picker-button__showControlIcon_qtu41 {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_qtu41 {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
30
|
-
background-color: var(--color-light-
|
|
29
|
+
} .picker-button__linkOpen_qtu41:not(:hover) {
|
|
30
|
+
background-color: var(--color-light-transparent-default-hover);
|
|
31
31
|
}
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react-transition-group" />
|
|
3
|
+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, RefObject } from "react";
|
|
6
|
+
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
|
+
import { BackdropProps } from "./index-ebda875c";
|
|
8
|
+
type PortalProps = {
|
|
9
|
+
/** Контент */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
|
|
13
|
+
*/
|
|
14
|
+
getPortalContainer?: () => Element;
|
|
15
|
+
/**
|
|
16
|
+
* Немедленно отрендерить дочерние элементы (false - контент будет отрендерен на след. рендер).
|
|
17
|
+
*/
|
|
18
|
+
immediateMount?: boolean;
|
|
19
|
+
};
|
|
20
|
+
type BaseModalProps = {
|
|
21
|
+
/**
|
|
22
|
+
* Контент
|
|
23
|
+
*/
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Компонент бэкдропа
|
|
27
|
+
*/
|
|
28
|
+
Backdrop?: FC<BackdropProps>;
|
|
29
|
+
/**
|
|
30
|
+
* Свойства для Бэкдропа
|
|
31
|
+
*/
|
|
32
|
+
backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
|
|
33
|
+
/**
|
|
34
|
+
* Нода, компонент или функция возвращающая их
|
|
35
|
+
*
|
|
36
|
+
* Контейнер к которому будут добавляться порталы
|
|
37
|
+
*/
|
|
38
|
+
container?: PortalProps["getPortalContainer"];
|
|
39
|
+
/**
|
|
40
|
+
* Отключает автоматический перевод фокуса на модалку при открытии
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
disableAutoFocus?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Отключает ловушку фокуса
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
disableFocusLock?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
disableRestoreFocus?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Отключает вызов `callback` при нажатии Escape
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
disableEscapeKeyDown?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Отключает вызов `callback` при клике на бэкдроп
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
disableBackdropClick?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Отключает блокировку скролла при открытии модального окна
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
disableBlockingScroll?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Содержимое модалки всегда в DOM
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
73
|
+
keepMounted?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Управление видимостью модалки
|
|
76
|
+
*/
|
|
77
|
+
open: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Дополнительный класс
|
|
80
|
+
*/
|
|
81
|
+
className?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Дополнительный класс
|
|
84
|
+
*/
|
|
85
|
+
contentClassName?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Дополнительные пропсы на dialog wrapper
|
|
88
|
+
*/
|
|
89
|
+
wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
90
|
+
/**
|
|
91
|
+
* Дополнительные пропсы на обертку контента
|
|
92
|
+
*/
|
|
93
|
+
contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
94
|
+
/**
|
|
95
|
+
* Дополнительные пропсы на компонентную обертку контента
|
|
96
|
+
*/
|
|
97
|
+
componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
98
|
+
/**
|
|
99
|
+
* Дополнительный класс для обертки (Modal)
|
|
100
|
+
*/
|
|
101
|
+
wrapperClassName?: string;
|
|
102
|
+
/**
|
|
103
|
+
* Обработчик скролла контента
|
|
104
|
+
*/
|
|
105
|
+
scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
|
|
106
|
+
/**
|
|
107
|
+
* Пропсы для анимации (CSSTransition)
|
|
108
|
+
*/
|
|
109
|
+
transitionProps?: Partial<TransitionProps>;
|
|
110
|
+
/**
|
|
111
|
+
* Рендерить ли в контейнер через портал.
|
|
112
|
+
* @default true
|
|
113
|
+
*/
|
|
114
|
+
usePortal?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* Обработчик события нажатия на бэкдроп
|
|
117
|
+
*/
|
|
118
|
+
onBackdropClick?: (event: MouseEvent) => void;
|
|
119
|
+
/**
|
|
120
|
+
* Обработчик события нажатия на Escape
|
|
121
|
+
*
|
|
122
|
+
* Если `disableEscapeKeyDown` - false и модальное окно в фокусе
|
|
123
|
+
*/
|
|
124
|
+
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
125
|
+
/**
|
|
126
|
+
* Обработчик закрытия
|
|
127
|
+
*/
|
|
128
|
+
onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
129
|
+
/**
|
|
130
|
+
* Обработчик события onEntered компонента Transition
|
|
131
|
+
*/
|
|
132
|
+
onMount?: () => void;
|
|
133
|
+
/**
|
|
134
|
+
* Обработчик события onExited компонента Transition
|
|
135
|
+
*/
|
|
136
|
+
onUnmount?: () => void;
|
|
137
|
+
/**
|
|
138
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
139
|
+
*/
|
|
140
|
+
dataTestId?: string;
|
|
141
|
+
/**
|
|
142
|
+
* z-index компонента
|
|
143
|
+
*/
|
|
144
|
+
zIndex?: number;
|
|
145
|
+
/**
|
|
146
|
+
* Реф, который должен быть установлен компонентной области
|
|
147
|
+
*/
|
|
148
|
+
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
149
|
+
};
|
|
150
|
+
type BaseModalContext = {
|
|
151
|
+
parentRef: React.RefObject<HTMLDivElement>;
|
|
152
|
+
componentRef: React.RefObject<HTMLDivElement>;
|
|
153
|
+
hasFooter?: boolean;
|
|
154
|
+
hasHeader?: boolean;
|
|
155
|
+
hasScroll?: boolean;
|
|
156
|
+
headerHighlighted?: boolean;
|
|
157
|
+
footerHighlighted?: boolean;
|
|
158
|
+
headerOffset?: number;
|
|
159
|
+
setHeaderOffset: (offset: number) => void;
|
|
160
|
+
contentRef: Ref<HTMLElement>;
|
|
161
|
+
setHasHeader: (exists: boolean) => void;
|
|
162
|
+
setHasFooter: (exists: boolean) => void;
|
|
163
|
+
onClose: Required<BaseModalProps>["onClose"];
|
|
164
|
+
};
|
|
165
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
166
|
+
declare const BaseModalContext: React.Context<BaseModalContext>;
|
|
167
|
+
declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
168
|
+
declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
169
|
+
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
170
|
+
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
171
|
+
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
172
|
+
declare const handleContainer: (container?: HTMLElement) => void;
|
|
173
|
+
/**
|
|
174
|
+
* Набор констант для z-index соответствующих классов компонентов.
|
|
175
|
+
* Значения выбраны по приоритету.
|
|
176
|
+
*/
|
|
177
|
+
declare const stackingOrder: {
|
|
178
|
+
FOCUSED: number;
|
|
179
|
+
DEFAULT: number;
|
|
180
|
+
POPOVER: number;
|
|
181
|
+
MODAL: number;
|
|
182
|
+
TOAST: number;
|
|
183
|
+
};
|
|
184
|
+
declare const StackingContext: import("react").Context<number>;
|
|
185
|
+
type StackProps = {
|
|
186
|
+
/**
|
|
187
|
+
* Render prop, в который передается функция.
|
|
188
|
+
* Функция принимает аргумент со значением z-index из текущего контекста.
|
|
189
|
+
*/
|
|
190
|
+
children: (value: number) => ReactNode;
|
|
191
|
+
/**
|
|
192
|
+
* Исходное значение для z-index.
|
|
193
|
+
* @default 5
|
|
194
|
+
*/
|
|
195
|
+
value?: number;
|
|
196
|
+
};
|
|
197
|
+
declare const Stack: FC<StackProps>;
|
|
198
|
+
declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
|
|
199
|
+
declare const getDefaultPortalContainer: () => Element;
|
|
200
|
+
declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
201
|
+
type SavedStyle = {
|
|
202
|
+
value: string;
|
|
203
|
+
key: string;
|
|
204
|
+
el: HTMLElement;
|
|
205
|
+
};
|
|
206
|
+
type RestoreStyle = {
|
|
207
|
+
container: HTMLElement;
|
|
208
|
+
modals: number;
|
|
209
|
+
styles: SavedStyle[];
|
|
210
|
+
};
|
|
211
|
+
declare class ModalStore {
|
|
212
|
+
private readonly restoreStyles;
|
|
213
|
+
constructor();
|
|
214
|
+
getRestoreStyles: () => RestoreStyle[];
|
|
215
|
+
}
|
|
216
|
+
declare const getModalStore: () => ModalStore;
|
|
217
|
+
declare class GlobalStore {
|
|
218
|
+
private readonly modalStore;
|
|
219
|
+
constructor();
|
|
220
|
+
getModalStore: () => ModalStore;
|
|
221
|
+
}
|
|
222
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
223
|
+
export type { SavedStyle };
|
package/esm/index-c44170fe.d.ts
CHANGED
package/esm/index-ebda875c.d.ts
CHANGED
|
@@ -1,80 +1,3 @@
|
|
|
1
|
+
/// <reference types="react-transition-group" />
|
|
1
2
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
import { ButtonHTMLAttributes, ElementType, FC, AnchorHTMLAttributes, ReactElement } from "react";
|
|
4
|
-
import { ButtonProps } from "@alfalab/core-components-button";
|
|
5
|
-
interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
-
/**
|
|
7
|
-
* Вид компонента
|
|
8
|
-
*/
|
|
9
|
-
view: "desktop" | "mobile";
|
|
10
|
-
/**
|
|
11
|
-
* Дополнительный класс
|
|
12
|
-
*/
|
|
13
|
-
className?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Позиция крестика
|
|
16
|
-
*/
|
|
17
|
-
align?: "left" | "right";
|
|
18
|
-
/**
|
|
19
|
-
* Фиксирует крестик
|
|
20
|
-
*/
|
|
21
|
-
sticky?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Иконка
|
|
24
|
-
*/
|
|
25
|
-
icon?: ElementType;
|
|
26
|
-
/**
|
|
27
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
28
|
-
*/
|
|
29
|
-
dataTestId?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Коллбэк закрытия.
|
|
32
|
-
*/
|
|
33
|
-
onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
34
|
-
}
|
|
35
|
-
declare const Closer: FC<CloserProps>;
|
|
36
|
-
type IconButtonProps = {
|
|
37
|
-
/**
|
|
38
|
-
* Компонент иконки
|
|
39
|
-
*/
|
|
40
|
-
icon: ElementType<{
|
|
41
|
-
className?: string;
|
|
42
|
-
}> | ReactElement;
|
|
43
|
-
/**
|
|
44
|
-
* Тип кнопки
|
|
45
|
-
*/
|
|
46
|
-
view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
|
|
47
|
-
/**
|
|
48
|
-
* Размер компонента
|
|
49
|
-
*/
|
|
50
|
-
size?: "xxs" | "xs" | "s";
|
|
51
|
-
/**
|
|
52
|
-
* Дополнительный класс
|
|
53
|
-
*/
|
|
54
|
-
className?: string;
|
|
55
|
-
/**
|
|
56
|
-
* Выравнивание иконки
|
|
57
|
-
* @default 'center'
|
|
58
|
-
*/
|
|
59
|
-
alignIcon?: "left" | "center" | "right";
|
|
60
|
-
/**
|
|
61
|
-
* Идентификатор для систем автоматизированного тестирования
|
|
62
|
-
*/
|
|
63
|
-
dataTestId?: string;
|
|
64
|
-
/**
|
|
65
|
-
* Набор цветов для компонента
|
|
66
|
-
*/
|
|
67
|
-
colors?: "default" | "inverted";
|
|
68
|
-
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "Component" | "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
|
|
69
|
-
declare const IconButton: React.ForwardRefExoticComponent<{
|
|
70
|
-
icon: ElementType<{
|
|
71
|
-
className?: string;
|
|
72
|
-
}> | ReactElement;
|
|
73
|
-
view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
|
|
74
|
-
size?: "s" | "xs" | "xxs" | undefined;
|
|
75
|
-
className?: string | undefined;
|
|
76
|
-
alignIcon?: "center" | "right" | "left" | undefined;
|
|
77
|
-
dataTestId?: string | undefined;
|
|
78
|
-
colors?: "default" | "inverted" | undefined;
|
|
79
|
-
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "Component" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
|
|
80
|
-
export { CloserProps, Closer, IconButtonProps, IconButton };
|
|
3
|
+
export * from "./Component-c44170fe";
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: cysxi */
|
|
2
2
|
:root {
|
|
3
3
|
} /* 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 */
|
|
4
4
|
} :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 @@
|
|
|
16
16
|
--gap-m: 16px;
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
|
-
} .picker-
|
|
19
|
+
} .picker-button__container_q0aq2 {
|
|
20
20
|
min-width: auto;
|
|
21
|
-
} .cc-picker-button.picker-
|
|
21
|
+
} .cc-picker-button.picker-button__optionsPopover_q0aq2.picker-button__sideGap_q0aq2 {
|
|
22
22
|
padding: 0 var(--gap-xs);
|
|
23
|
-
} .cc-picker-button .picker-
|
|
23
|
+
} .cc-picker-button .picker-button__option_q0aq2 {
|
|
24
24
|
padding: 0 var(--gap-m)
|
|
25
|
-
} .cc-picker-button .picker-
|
|
25
|
+
} .cc-picker-button .picker-button__option_q0aq2:before {
|
|
26
26
|
/* Удаляем разделители у опций выпадающего списка. */
|
|
27
27
|
display: none;
|
|
28
28
|
}
|
package/esm/index.js
CHANGED
|
@@ -2,7 +2,7 @@ export { PickerButtonResponsive as PickerButton } from './Component.responsive.j
|
|
|
2
2
|
import 'tslib';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '@alfalab/hooks';
|
|
5
|
-
import './Component.desktop.js';
|
|
5
|
+
import './desktop/Component.desktop.js';
|
|
6
6
|
import 'classnames';
|
|
7
7
|
import '@alfalab/core-components-popover/esm';
|
|
8
8
|
import '@alfalab/core-components-select/esm/shared';
|
|
@@ -14,5 +14,5 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
|
14
14
|
import '@alfalab/icons-glyph/MoreMIcon';
|
|
15
15
|
import '@alfalab/icons-glyph/MoreSIcon';
|
|
16
16
|
import './option/Component.js';
|
|
17
|
-
import './Component.mobile.js';
|
|
17
|
+
import './mobile/Component.mobile.js';
|
|
18
18
|
import '@alfalab/core-components-select/esm/mobile';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "@alfalab/core-components-select/shared";
|
|
4
|
-
import { PickerButtonDesktopProps } from "
|
|
4
|
+
import { PickerButtonDesktopProps } from "../desktop/index";
|
|
5
5
|
type PickerButtonMobileProps = Omit<PickerButtonDesktopProps, 'OptionsList' | 'Checkmark' | 'onScroll'> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
|
|
6
6
|
/**
|
|
7
7
|
* Контрольная точка для кнопки, с нее начинается desktop версия
|
|
@@ -2,11 +2,11 @@ import { __rest, __assign } from 'tslib';
|
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
3
|
import { SelectMobile } from '@alfalab/core-components-select/esm/mobile';
|
|
4
4
|
import { Optgroup } from '@alfalab/core-components-select/esm/shared';
|
|
5
|
-
import { Field } from '
|
|
6
|
-
import { Option } from '
|
|
5
|
+
import { Field } from '../field/Component.js';
|
|
6
|
+
import { Option } from '../option/Component.js';
|
|
7
7
|
import 'classnames';
|
|
8
8
|
import '@alfalab/core-components-button/esm';
|
|
9
|
-
import '
|
|
9
|
+
import '../utils/index.js';
|
|
10
10
|
import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
|
|
11
11
|
import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
12
12
|
import '@alfalab/icons-glyph/MoreMIcon';
|
package/esm/mobile/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { PickerButtonMobile, PickerButtonMobileProps } from "
|
|
1
|
+
export { PickerButtonMobile, PickerButtonMobileProps } from "./Component.mobile";
|
|
2
2
|
export {};
|
package/esm/mobile/index.js
CHANGED
package/esm/option/Component.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Option as Option$1 } from '@alfalab/core-components-select/esm/shared';
|
|
4
4
|
|
|
5
|
-
var styles = {"container":"picker-
|
|
5
|
+
var styles = {"container":"picker-button__container_caoh6","icon":"picker-button__icon_caoh6","content":"picker-button__content_caoh6"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
var Option = function (_a) {
|
package/esm/option/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1q5oa */
|
|
2
2
|
:root {
|
|
3
3
|
} /* 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 */
|
|
4
4
|
} :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 @@
|
|
|
15
15
|
--gap-s: 12px;
|
|
16
16
|
} :root {
|
|
17
17
|
} :root {
|
|
18
|
-
} .picker-
|
|
18
|
+
} .picker-button__container_caoh6 {
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
|
-
} .picker-
|
|
21
|
+
} .picker-button__icon_caoh6 {
|
|
22
22
|
display: flex;
|
|
23
23
|
margin-right: var(--gap-s);
|
|
24
|
-
} .picker-
|
|
24
|
+
} .picker-button__content_caoh6 {
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
flex: 1;
|
|
27
27
|
text-overflow: ellipsis;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ReactNode } from "react";
|
|
4
|
-
import { CloserProps } from "./index-ebda875c";
|
|
4
|
+
import { BackArrowAddonProps, CloserProps } from "./index-ebda875c";
|
|
5
5
|
type NavigationBarProps = {
|
|
6
6
|
/**
|
|
7
7
|
* Контент шапки
|
|
@@ -51,6 +51,10 @@ type NavigationBarProps = {
|
|
|
51
51
|
* Дополнительный класс для правого аддона
|
|
52
52
|
*/
|
|
53
53
|
backButtonClassName?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Дополнительные пропсы для кнопки "Назад"
|
|
56
|
+
*/
|
|
57
|
+
backButtonProps?: Omit<BackArrowAddonProps, 'view' | 'textOpacity' | 'onClick'>;
|
|
54
58
|
/**
|
|
55
59
|
* Дополнительный класс
|
|
56
60
|
*/
|