@alfalab/core-components-picker-button 11.6.8 → 11.7.1
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/{cssm/Component-57569e57.d.ts → Component-1fe708ea.d.ts} +1 -1
- package/Component-bdb4c6b9.d.ts +2 -1
- package/Component-c44170fe.d.ts +1 -1
- package/Component.responsive.d.ts +2 -1
- package/{esm/ResponsiveContext-88b743b5.d.ts → ResponsiveContext-d6bfd5b7.d.ts} +1 -1
- package/{Component-57569e57.d.ts → cssm/Component-1fe708ea.d.ts} +1 -1
- package/cssm/Component-bdb4c6b9.d.ts +2 -1
- package/cssm/Component-c44170fe.d.ts +1 -1
- package/cssm/Component.responsive.d.ts +2 -1
- package/{modern/ResponsiveContext-88b743b5.d.ts → cssm/ResponsiveContext-d6bfd5b7.d.ts} +1 -1
- package/cssm/desktop/Component.desktop.d.ts +11 -3
- package/cssm/desktop/Component.desktop.js +2 -1
- package/cssm/field/Component.d.ts +4 -2
- package/cssm/field/Component.js +2 -2
- package/cssm/iconMap-09d2f9c9.d.ts +4 -0
- package/cssm/index-09d2f9c9.d.ts +38 -0
- package/{esm/index-a5b021bd.d.ts → cssm/index-307da6d7.d.ts} +2 -1
- package/cssm/index-bdb4c6b9.d.ts +11 -4
- package/cssm/mobile/Component.mobile.js +2 -1
- package/{esm/types-667e33fd.d.ts → cssm/types-a870d1f8.d.ts} +2 -2
- package/cssm/{typings-57569e57.d.ts → typings-1fe708ea.d.ts} +17 -15
- package/{esm/typings-88b743b5.d.ts → cssm/typings-d6bfd5b7.d.ts} +4 -0
- package/cssm/use-skeleton-1328ead9.d.ts +4 -0
- package/cssm/utils/index.d.ts +5 -3
- package/cssm/utils/index.js +9 -2
- package/cssm/utils-89376c31.d.ts +1 -1
- package/desktop/Component.desktop.d.ts +11 -3
- package/desktop/Component.desktop.js +3 -2
- package/esm/{Component-57569e57.d.ts → Component-1fe708ea.d.ts} +1 -1
- package/esm/Component-bdb4c6b9.d.ts +2 -1
- package/esm/Component-c44170fe.d.ts +1 -1
- package/esm/Component.responsive.d.ts +2 -1
- package/{cssm/ResponsiveContext-88b743b5.d.ts → esm/ResponsiveContext-d6bfd5b7.d.ts} +1 -1
- package/esm/desktop/Component.desktop.d.ts +11 -3
- package/esm/desktop/Component.desktop.js +3 -2
- package/esm/field/Component.d.ts +4 -2
- package/esm/field/Component.js +3 -3
- package/esm/field/index.css +6 -6
- package/esm/iconMap-09d2f9c9.d.ts +4 -0
- package/esm/index-09d2f9c9.d.ts +38 -0
- package/{index-a5b021bd.d.ts → esm/index-307da6d7.d.ts} +2 -1
- package/esm/index-bdb4c6b9.d.ts +11 -4
- package/esm/index.css +5 -5
- package/esm/mobile/Component.mobile.js +2 -1
- package/esm/option/Component.js +1 -1
- package/esm/option/index.css +4 -4
- package/{modern/types-667e33fd.d.ts → esm/types-a870d1f8.d.ts} +2 -2
- package/esm/{typings-57569e57.d.ts → typings-1fe708ea.d.ts} +17 -15
- package/{modern/typings-88b743b5.d.ts → esm/typings-d6bfd5b7.d.ts} +4 -0
- package/esm/use-skeleton-1328ead9.d.ts +4 -0
- package/esm/utils/index.d.ts +5 -3
- package/esm/utils/index.js +9 -3
- package/esm/utils-89376c31.d.ts +1 -1
- package/field/Component.d.ts +4 -2
- package/field/Component.js +3 -3
- package/field/index.css +6 -6
- package/iconMap-09d2f9c9.d.ts +4 -0
- package/index-09d2f9c9.d.ts +38 -0
- package/{cssm/index-a5b021bd.d.ts → index-307da6d7.d.ts} +2 -1
- package/index-bdb4c6b9.d.ts +11 -4
- package/index.css +5 -5
- package/mobile/Component.mobile.js +2 -1
- package/modern/{Component-57569e57.d.ts → Component-1fe708ea.d.ts} +1 -1
- package/modern/Component-bdb4c6b9.d.ts +2 -1
- package/modern/Component-c44170fe.d.ts +1 -1
- package/modern/Component.responsive.d.ts +2 -1
- package/{ResponsiveContext-88b743b5.d.ts → modern/ResponsiveContext-d6bfd5b7.d.ts} +1 -1
- package/modern/desktop/Component.desktop.d.ts +11 -3
- package/modern/desktop/Component.desktop.js +3 -2
- package/modern/field/Component.d.ts +4 -2
- package/modern/field/Component.js +3 -3
- package/modern/field/index.css +6 -6
- package/modern/iconMap-09d2f9c9.d.ts +4 -0
- package/modern/index-09d2f9c9.d.ts +38 -0
- package/modern/{index-a5b021bd.d.ts → index-307da6d7.d.ts} +2 -1
- package/modern/index-bdb4c6b9.d.ts +11 -4
- package/modern/index.css +5 -5
- package/modern/mobile/Component.mobile.js +2 -1
- package/modern/option/Component.js +1 -1
- package/modern/option/index.css +4 -4
- package/{cssm/types-667e33fd.d.ts → modern/types-a870d1f8.d.ts} +2 -2
- package/modern/{typings-57569e57.d.ts → typings-1fe708ea.d.ts} +17 -15
- package/{cssm/typings-88b743b5.d.ts → modern/typings-d6bfd5b7.d.ts} +4 -0
- package/modern/use-skeleton-1328ead9.d.ts +4 -0
- package/modern/utils/index.d.ts +5 -3
- package/modern/utils/index.js +9 -3
- package/modern/utils-89376c31.d.ts +1 -1
- package/option/Component.js +1 -1
- package/option/index.css +4 -4
- package/package.json +3 -3
- package/src/desktop/Component.desktop.tsx +9 -2
- package/src/field/Component.tsx +6 -2
- package/src/mobile/Component.mobile.tsx +2 -0
- package/src/utils/index.ts +12 -3
- package/{types-667e33fd.d.ts → types-a870d1f8.d.ts} +2 -2
- package/{typings-57569e57.d.ts → typings-1fe708ea.d.ts} +17 -15
- package/{typings-88b743b5.d.ts → typings-d6bfd5b7.d.ts} +4 -0
- package/use-skeleton-1328ead9.d.ts +4 -0
- package/utils/index.d.ts +5 -3
- package/utils/index.js +9 -2
- package/utils-89376c31.d.ts +1 -1
- package/Component-064acd29.d.ts +0 -56
- package/cssm/Component-064acd29.d.ts +0 -56
- package/esm/Component-064acd29.d.ts +0 -56
- package/modern/Component-064acd29.d.ts +0 -56
- /package/{Component-a5b021bd.d.ts → Component-307da6d7.d.ts} +0 -0
- /package/cssm/{Component-a5b021bd.d.ts → Component-307da6d7.d.ts} +0 -0
- /package/esm/{Component-a5b021bd.d.ts → Component-307da6d7.d.ts} +0 -0
- /package/modern/{Component-a5b021bd.d.ts → Component-307da6d7.d.ts} +0 -0
package/field/Component.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { ComponentType, SVGProps } from "react";
|
|
3
4
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
4
|
-
import { FieldProps as BaseFieldProps } from "../typings-
|
|
5
|
+
import { FieldProps as BaseFieldProps } from "../typings-1fe708ea";
|
|
5
6
|
import { PickerButtonSize, PickerButtonVariant } from "../types";
|
|
6
7
|
type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
|
|
7
8
|
buttonSize?: PickerButtonSize;
|
|
8
9
|
buttonVariant?: PickerButtonVariant;
|
|
9
10
|
showArrow?: boolean;
|
|
11
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
12
|
};
|
|
11
|
-
declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, ...restProps }: FieldProps) => React.JSX.Element;
|
|
13
|
+
declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, FormControlComponent, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
14
|
export { Field };
|
package/field/Component.js
CHANGED
|
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
14
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
15
15
|
|
|
16
|
-
var styles = {"iconContainer":"picker-
|
|
16
|
+
var styles = {"iconContainer":"picker-button__iconContainer_x24qp","addonsContainer":"picker-button__addonsContainer_x24qp","showControlIcon":"picker-button__showControlIcon_x24qp","open":"picker-button__open_x24qp","linkOpen":"picker-button__linkOpen_x24qp"};
|
|
17
17
|
require('./index.css')
|
|
18
18
|
|
|
19
19
|
var SIZE_TO_CLASSNAME_MAP = {
|
|
@@ -32,8 +32,8 @@ var SIZE_TO_CLASSNAME_MAP = {
|
|
|
32
32
|
};
|
|
33
33
|
var Field = function (_a) {
|
|
34
34
|
var _b, _c;
|
|
35
|
-
var _d = _a.buttonSize, buttonSize = _d === void 0 ? 56 : _d, _e = _a.buttonVariant, buttonVariant = _e === void 0 ? 'default' : _e, view = _a.view, label = _a.label, open = _a.open; _a.multiple; var rightAddons = _a.rightAddons; _a.Arrow; var innerProps = _a.innerProps, className = _a.className; _a.selected; _a.selectedMultiple; _a.setSelectedItems; _a.toggleMenu; _a.valueRenderer; var _f = _a.showArrow, showArrow = _f === void 0 ? true : _f; _a.labelView; var restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView"]);
|
|
36
|
-
var Icon = utils_index.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
|
|
35
|
+
var _d = _a.buttonSize, buttonSize = _d === void 0 ? 56 : _d, _e = _a.buttonVariant, buttonVariant = _e === void 0 ? 'default' : _e, view = _a.view, label = _a.label, open = _a.open; _a.multiple; var rightAddons = _a.rightAddons; _a.Arrow; var innerProps = _a.innerProps, className = _a.className; _a.selected; _a.selectedMultiple; _a.setSelectedItems; _a.toggleMenu; _a.valueRenderer; var _f = _a.showArrow, showArrow = _f === void 0 ? true : _f; _a.labelView; _a.FormControlComponent; var icon = _a.icon, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView", "FormControlComponent", "icon"]);
|
|
36
|
+
var Icon = utils_index.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
|
|
37
37
|
var ref = innerProps.ref, restInnerProps = tslib.__rest(innerProps, ["ref"]);
|
|
38
38
|
var buttonProps = tslib.__assign(tslib.__assign({}, restProps), restInnerProps);
|
|
39
39
|
return (React__default.default.createElement("div", { ref: ref },
|
package/field/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1y06d */
|
|
2
2
|
: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 */ /* 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 */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
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 */
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
19
|
--arrow-transform: rotate(180deg);
|
|
20
|
-
} .picker-
|
|
20
|
+
} .picker-button__iconContainer_x24qp {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_x24qp {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_x24qp.picker-button__showControlIcon_x24qp {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_x24qp {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_x24qp:not(:hover) {
|
|
30
30
|
background-color: var(--color-light-transparent-default-hover);
|
|
31
31
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
type StatusBadgeViews = "positive-checkmark" | "negative-cross" | "negative-alert" | "negative-block" | "attention-alert" | "neutral-information" | "neutral-operation" | "neutral-cross";
|
|
4
|
+
type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
|
|
5
|
+
type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
|
|
6
|
+
type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
|
|
7
|
+
type StatusBadgeProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Дополнительный класс
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Размер компонента
|
|
14
|
+
* @default 24
|
|
15
|
+
*/
|
|
16
|
+
size?: StatusBadgeSizes;
|
|
17
|
+
/**
|
|
18
|
+
* Набор цветов для компонента
|
|
19
|
+
*/
|
|
20
|
+
colors?: "default" | "inverted";
|
|
21
|
+
/**
|
|
22
|
+
* Вид бейджа.
|
|
23
|
+
*/
|
|
24
|
+
view: StatusBadgeViews;
|
|
25
|
+
/**
|
|
26
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
27
|
+
*/
|
|
28
|
+
dataTestId?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Кастомные иконки
|
|
31
|
+
*/
|
|
32
|
+
customIcons?: StatusBadgeCustomIcon;
|
|
33
|
+
};
|
|
34
|
+
declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons }: StatusBadgeProps) => React.JSX.Element;
|
|
35
|
+
declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
|
|
36
|
+
Icon: StatusBadgeIcon;
|
|
37
|
+
};
|
|
38
|
+
export { StatusBadgeProps, StatusBadge, useStatusBadgeIcon, StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };
|
|
@@ -62,5 +62,6 @@ declare function preventDefault(e: React.UIEvent): void;
|
|
|
62
62
|
declare const dom: {
|
|
63
63
|
preventDefault: typeof preventDefault;
|
|
64
64
|
};
|
|
65
|
-
|
|
65
|
+
declare const exhaustiveCheck: (value: never) => never;
|
|
66
|
+
export { isClient, os, getDataTestId, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks, dom, exhaustiveCheck };
|
|
66
67
|
export * from "./browser-a216f694";
|
package/index-bdb4c6b9.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/// <reference types="react-transition-group" />
|
|
3
3
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
4
|
import React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, FC, RefObject } from "react";
|
|
6
6
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
7
|
import { BackdropProps } from "./index-ebda875c";
|
|
8
8
|
type PortalProps = {
|
|
@@ -25,7 +25,7 @@ type BaseModalProps = {
|
|
|
25
25
|
/**
|
|
26
26
|
* Компонент бэкдропа
|
|
27
27
|
*/
|
|
28
|
-
Backdrop?:
|
|
28
|
+
Backdrop?: ComponentType<BackdropProps>;
|
|
29
29
|
/**
|
|
30
30
|
* Свойства для Бэкдропа
|
|
31
31
|
*/
|
|
@@ -146,6 +146,10 @@ type BaseModalProps = {
|
|
|
146
146
|
* Реф, который должен быть установлен компонентной области
|
|
147
147
|
*/
|
|
148
148
|
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
149
|
+
/**
|
|
150
|
+
* Блокирует скролл когда модальное окно открыто. Работает только на iOS.
|
|
151
|
+
*/
|
|
152
|
+
iOSLock?: boolean;
|
|
149
153
|
};
|
|
150
154
|
type BaseModalContext = {
|
|
151
155
|
parentRef: React.RefObject<HTMLDivElement>;
|
|
@@ -169,7 +173,7 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
|
169
173
|
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
170
174
|
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
171
175
|
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
172
|
-
declare const handleContainer: (container?: HTMLElement) => void;
|
|
176
|
+
declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
|
|
173
177
|
/**
|
|
174
178
|
* Набор констант для z-index соответствующих классов компонентов.
|
|
175
179
|
* Значения выбраны по приоритету.
|
|
@@ -195,6 +199,9 @@ type StackProps = {
|
|
|
195
199
|
value?: number;
|
|
196
200
|
};
|
|
197
201
|
declare const Stack: FC<StackProps>;
|
|
202
|
+
declare const lockScroll: () => void;
|
|
203
|
+
declare const unlockScroll: () => void;
|
|
204
|
+
declare const syncHeight: () => void;
|
|
198
205
|
declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
|
|
199
206
|
declare const getDefaultPortalContainer: () => Element;
|
|
200
207
|
declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
@@ -219,5 +226,5 @@ declare class GlobalStore {
|
|
|
219
226
|
constructor();
|
|
220
227
|
getModalStore: () => ModalStore;
|
|
221
228
|
}
|
|
222
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
229
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, lockScroll, unlockScroll, syncHeight, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
223
230
|
export type { SavedStyle };
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fccjv */
|
|
2
2
|
: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 */ /* 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 */
|
|
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_9ecqi {
|
|
20
20
|
min-width: auto;
|
|
21
|
-
} .cc-picker-button.picker-
|
|
21
|
+
} .cc-picker-button.picker-button__optionsPopover_9ecqi.picker-button__sideGap_9ecqi {
|
|
22
22
|
padding: 0 var(--gap-xs);
|
|
23
|
-
} .cc-picker-button .picker-
|
|
23
|
+
} .cc-picker-button .picker-button__option_9ecqi {
|
|
24
24
|
padding: 0 var(--gap-m)
|
|
25
|
-
} .cc-picker-button .picker-
|
|
25
|
+
} .cc-picker-button .picker-button__option_9ecqi:before {
|
|
26
26
|
/* Удаляем разделители у опций выпадающего списка. */
|
|
27
27
|
display: none;
|
|
28
28
|
}
|
|
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
15
|
|
|
16
16
|
var PickerButtonMobile = React.forwardRef(function (_a, ref) {
|
|
17
|
-
var options = _a.options, label = _a.label, _b = _a.Option, Option = _b === void 0 ? option_Component.Option : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? shared.Optgroup : _c, view = _a.view, loading = _a.loading, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, size = _a.size, bottomSheetProps = _a.bottomSheetProps, showArrow = _a.showArrow, _e = _a.Field, Field = _e === void 0 ? field_Component.Field : _e, _f = _a.fieldProps, fieldProps = _f === void 0 ? {} : _f, _g = _a.breakpoint, breakpoint = _g === void 0 ? 1024 : _g, restProps = tslib.__rest(_a, ["options", "label", "Option", "Optgroup", "view", "loading", "variant", "leftAddons", "rightAddons", "size", "bottomSheetProps", "showArrow", "Field", "fieldProps", "breakpoint"]);
|
|
17
|
+
var options = _a.options, label = _a.label, _b = _a.Option, Option = _b === void 0 ? option_Component.Option : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? shared.Optgroup : _c, view = _a.view, loading = _a.loading, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, size = _a.size, bottomSheetProps = _a.bottomSheetProps, showArrow = _a.showArrow, _e = _a.Field, Field = _e === void 0 ? field_Component.Field : _e, _f = _a.fieldProps, fieldProps = _f === void 0 ? {} : _f, icon = _a.icon, _g = _a.breakpoint, breakpoint = _g === void 0 ? 1024 : _g, restProps = tslib.__rest(_a, ["options", "label", "Option", "Optgroup", "view", "loading", "variant", "leftAddons", "rightAddons", "size", "bottomSheetProps", "showArrow", "Field", "fieldProps", "icon", "breakpoint"]);
|
|
18
18
|
var fieldDefaultProps = {
|
|
19
19
|
view: view,
|
|
20
20
|
loading: loading,
|
|
@@ -25,6 +25,7 @@ var PickerButtonMobile = React.forwardRef(function (_a, ref) {
|
|
|
25
25
|
rightAddons: rightAddons,
|
|
26
26
|
showArrow: showArrow,
|
|
27
27
|
breakpoint: breakpoint,
|
|
28
|
+
icon: icon,
|
|
28
29
|
};
|
|
29
30
|
return (React__default.default.createElement(mobile.SelectMobile, tslib.__assign({}, restProps, { label: label, Option: Option, bottomSheetProps: tslib.__assign({ title: label, stickyHeader: true }, bottomSheetProps), Field: Field, Optgroup: Optgroup, size: size === 'm' || size === 56 ? 56 : 48, closeOnSelect: true, fieldProps: tslib.__assign(tslib.__assign({}, fieldDefaultProps), fieldProps), ref: ref, options: options, selected: [] })));
|
|
30
31
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { OptgroupProps } from "./typings-
|
|
3
|
+
import { OptgroupProps } from "./typings-1fe708ea";
|
|
4
4
|
declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;
|
|
5
5
|
export { Optgroup };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { View } from "./typings-
|
|
3
|
+
import { View } from "./typings-d6bfd5b7";
|
|
4
4
|
declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
|
|
5
5
|
size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
|
|
6
6
|
fullscreen?: boolean | undefined;
|
|
7
7
|
fixedPosition?: boolean | undefined;
|
|
8
8
|
hasCloser?: boolean | undefined;
|
|
9
|
+
iOSLock?: boolean | undefined;
|
|
9
10
|
} & {
|
|
10
11
|
view: View;
|
|
11
12
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -6,6 +6,7 @@ interface ClearButtonProps {
|
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
8
|
colors: "default" | "inverted";
|
|
9
|
+
dataTestId?: string;
|
|
9
10
|
}
|
|
10
11
|
declare const ClearButton: React.FC<ClearButtonProps>;
|
|
11
12
|
type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown' | 'enterKeyHint'> & {
|
|
@@ -287,5 +288,4 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
|
|
|
287
288
|
*/
|
|
288
289
|
disableUserInput?: boolean | undefined;
|
|
289
290
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
290
|
-
export * from "./Component-064acd29";
|
|
291
291
|
export { ClearButton, BaseInputProps, BaseInput };
|
|
@@ -11,11 +11,12 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
|
|
|
11
11
|
};
|
|
12
12
|
declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("@alfalab/core-components-select/shared").BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "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
|
-
icon?: React.
|
|
14
|
+
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
|
|
15
15
|
})[];
|
|
16
16
|
size?: import("./types").PickerButtonSize | undefined;
|
|
17
17
|
variant?: import("./types").PickerButtonVariant | undefined;
|
|
18
18
|
showArrow?: boolean | undefined;
|
|
19
|
+
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
|
|
19
20
|
} & AdditionalMobileProps & BottomSheetSelectMobileProps & {
|
|
20
21
|
/**
|
|
21
22
|
* Контрольная точка, с нее начинается desktop версия
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { TResponsiveModalContext } from "./typings-
|
|
3
|
+
import { TResponsiveModalContext } from "./typings-d6bfd5b7";
|
|
4
4
|
declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
|
|
5
5
|
export { ResponsiveContext };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ComponentType, SVGProps } from "react";
|
|
4
4
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
5
5
|
import { BaseSelectProps } from "@alfalab/core-components-select/shared";
|
|
6
6
|
import { PickerButtonSize, PickerButtonVariant } from "../types";
|
|
@@ -9,7 +9,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' |
|
|
|
9
9
|
/**
|
|
10
10
|
* Иконка, отображающаяся слева от текстового представления пункта
|
|
11
11
|
*/
|
|
12
|
-
icon?:
|
|
12
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
13
13
|
}>;
|
|
14
14
|
/**
|
|
15
15
|
* Размер кнопки
|
|
@@ -25,13 +25,17 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' |
|
|
|
25
25
|
* @default true
|
|
26
26
|
*/
|
|
27
27
|
showArrow?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Кастомная иконка при variant = compact
|
|
30
|
+
*/
|
|
31
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
28
32
|
};
|
|
29
33
|
declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "showSearch" | "searchProps" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow" | "Search"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
|
|
30
34
|
options: Array<BaseSelectProps['options'][0] & {
|
|
31
35
|
/**
|
|
32
36
|
* Иконка, отображающаяся слева от текстового представления пункта
|
|
33
37
|
*/
|
|
34
|
-
icon?:
|
|
38
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
35
39
|
}>;
|
|
36
40
|
/**
|
|
37
41
|
* Размер кнопки
|
|
@@ -47,5 +51,9 @@ declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSele
|
|
|
47
51
|
* @default true
|
|
48
52
|
*/
|
|
49
53
|
showArrow?: boolean | undefined;
|
|
54
|
+
/**
|
|
55
|
+
* Кастомная иконка при variant = compact
|
|
56
|
+
*/
|
|
57
|
+
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
|
|
50
58
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
51
59
|
export { PickerButtonDesktopProps, PickerButtonDesktop };
|
|
@@ -5,11 +5,11 @@ import { BaseSelect, OptionsList, Optgroup } from '@alfalab/core-components-sele
|
|
|
5
5
|
import { Field } from '../field/Component.js';
|
|
6
6
|
import { Option } from '../option/Component.js';
|
|
7
7
|
|
|
8
|
-
const styles = {"container":"picker-
|
|
8
|
+
const styles = {"container":"picker-button__container_9ecqi","optionsPopover":"picker-button__optionsPopover_9ecqi","sideGap":"picker-button__sideGap_9ecqi","option":"picker-button__option_9ecqi"};
|
|
9
9
|
require('./../index.css')
|
|
10
10
|
|
|
11
11
|
const SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|
|
12
|
-
const PickerButtonDesktop = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, view, loading, size = 56, variant = 'default', className, leftAddons, rightAddons, popperClassName, optionClassName, showArrow, Field: Field$1 = Field, fieldProps = {}, ...restProps }, ref) => {
|
|
12
|
+
const PickerButtonDesktop = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, view, loading, size = 56, variant = 'default', className, leftAddons, rightAddons, popperClassName, optionClassName, showArrow, Field: Field$1 = Field, fieldProps = {}, icon, ...restProps }, ref) => {
|
|
13
13
|
const isSideGap = !!restProps.popoverPosition && SIDE_POSITIONS.includes(restProps.popoverPosition);
|
|
14
14
|
const fieldDefaultProps = {
|
|
15
15
|
view,
|
|
@@ -21,6 +21,7 @@ const PickerButtonDesktop = forwardRef(({ OptionsList: OptionsList$1 = OptionsLi
|
|
|
21
21
|
rightAddons,
|
|
22
22
|
showArrow,
|
|
23
23
|
breakpoint: 1,
|
|
24
|
+
icon,
|
|
24
25
|
};
|
|
25
26
|
return (React.createElement(BaseSelect, { ...restProps, Popover: Popover, view: 'desktop', optionProps: { Checkmark: null }, ref: ref, Option: Option$1, Field: Field$1, size: size === 'm' || size === 56 ? 56 : 48, fieldProps: {
|
|
26
27
|
...fieldDefaultProps,
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { ComponentType, SVGProps } from "react";
|
|
3
4
|
import { ButtonProps } from "@alfalab/core-components-button";
|
|
4
|
-
import { FieldProps as BaseFieldProps } from "../typings-
|
|
5
|
+
import { FieldProps as BaseFieldProps } from "../typings-1fe708ea";
|
|
5
6
|
import { PickerButtonSize, PickerButtonVariant } from "../types";
|
|
6
7
|
type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> & ButtonProps & {
|
|
7
8
|
buttonSize?: PickerButtonSize;
|
|
8
9
|
buttonVariant?: PickerButtonVariant;
|
|
9
10
|
showArrow?: boolean;
|
|
11
|
+
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
10
12
|
};
|
|
11
|
-
declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, ...restProps }: FieldProps) => React.JSX.Element;
|
|
13
|
+
declare const Field: ({ buttonSize, buttonVariant, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow, labelView, FormControlComponent, icon, ...restProps }: FieldProps) => React.JSX.Element;
|
|
12
14
|
export { Field };
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import { Button } from '@alfalab/core-components-button/modern';
|
|
4
4
|
import { getIcon } from '../utils/index.js';
|
|
5
5
|
|
|
6
|
-
const styles = {"iconContainer":"picker-
|
|
6
|
+
const styles = {"iconContainer":"picker-button__iconContainer_x24qp","addonsContainer":"picker-button__addonsContainer_x24qp","showControlIcon":"picker-button__showControlIcon_x24qp","open":"picker-button__open_x24qp","linkOpen":"picker-button__linkOpen_x24qp"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
const SIZE_TO_CLASSNAME_MAP = {
|
|
@@ -20,8 +20,8 @@ const SIZE_TO_CLASSNAME_MAP = {
|
|
|
20
20
|
64: 'size-64',
|
|
21
21
|
72: 'size-72',
|
|
22
22
|
};
|
|
23
|
-
const Field = ({ buttonSize = 56, buttonVariant = 'default', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow = true, labelView, ...restProps }) => {
|
|
24
|
-
const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
|
|
23
|
+
const Field = ({ buttonSize = 56, buttonVariant = 'default', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow = true, labelView, FormControlComponent, icon, ...restProps }) => {
|
|
24
|
+
const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
|
|
25
25
|
const { ref, ...restInnerProps } = innerProps;
|
|
26
26
|
const buttonProps = {
|
|
27
27
|
...restProps,
|
package/modern/field/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1y06d */
|
|
2
2
|
: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 */ /* 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 */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
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 */
|
|
@@ -17,15 +17,15 @@
|
|
|
17
17
|
} :root {
|
|
18
18
|
} :root {
|
|
19
19
|
--arrow-transform: rotate(180deg);
|
|
20
|
-
} .picker-
|
|
20
|
+
} .picker-button__iconContainer_x24qp {
|
|
21
21
|
display: flex;
|
|
22
22
|
transition: transform 0.15s ease-in-out;
|
|
23
|
-
} .picker-
|
|
23
|
+
} .picker-button__addonsContainer_x24qp {
|
|
24
24
|
display: flex
|
|
25
|
-
} .picker-
|
|
25
|
+
} .picker-button__addonsContainer_x24qp.picker-button__showControlIcon_x24qp {
|
|
26
26
|
margin-right: var(--gap-2xs);
|
|
27
|
-
} .picker-
|
|
27
|
+
} .picker-button__open_x24qp {
|
|
28
28
|
transform: var(--arrow-transform);
|
|
29
|
-
} .picker-
|
|
29
|
+
} .picker-button__linkOpen_x24qp:not(:hover) {
|
|
30
30
|
background-color: var(--color-light-transparent-default-hover);
|
|
31
31
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
type StatusBadgeViews = "positive-checkmark" | "negative-cross" | "negative-alert" | "negative-block" | "attention-alert" | "neutral-information" | "neutral-operation" | "neutral-cross";
|
|
4
|
+
type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
|
|
5
|
+
type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
|
|
6
|
+
type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
|
|
7
|
+
type StatusBadgeProps = {
|
|
8
|
+
/**
|
|
9
|
+
* Дополнительный класс
|
|
10
|
+
*/
|
|
11
|
+
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Размер компонента
|
|
14
|
+
* @default 24
|
|
15
|
+
*/
|
|
16
|
+
size?: StatusBadgeSizes;
|
|
17
|
+
/**
|
|
18
|
+
* Набор цветов для компонента
|
|
19
|
+
*/
|
|
20
|
+
colors?: "default" | "inverted";
|
|
21
|
+
/**
|
|
22
|
+
* Вид бейджа.
|
|
23
|
+
*/
|
|
24
|
+
view: StatusBadgeViews;
|
|
25
|
+
/**
|
|
26
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
27
|
+
*/
|
|
28
|
+
dataTestId?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Кастомные иконки
|
|
31
|
+
*/
|
|
32
|
+
customIcons?: StatusBadgeCustomIcon;
|
|
33
|
+
};
|
|
34
|
+
declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons }: StatusBadgeProps) => React.JSX.Element;
|
|
35
|
+
declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
|
|
36
|
+
Icon: StatusBadgeIcon;
|
|
37
|
+
};
|
|
38
|
+
export { StatusBadgeProps, StatusBadge, useStatusBadgeIcon, StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };
|
|
@@ -62,5 +62,6 @@ declare function preventDefault(e: React.UIEvent): void;
|
|
|
62
62
|
declare const dom: {
|
|
63
63
|
preventDefault: typeof preventDefault;
|
|
64
64
|
};
|
|
65
|
-
|
|
65
|
+
declare const exhaustiveCheck: (value: never) => never;
|
|
66
|
+
export { isClient, os, getDataTestId, createPaddingStyle, easingFns, fnUtils, maskUtils, hooks, dom, exhaustiveCheck };
|
|
66
67
|
export * from "./browser-a216f694";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/// <reference types="react-transition-group" />
|
|
3
3
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
4
4
|
import React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, FC, RefObject } from "react";
|
|
6
6
|
import { TransitionProps } from "react-transition-group/Transition";
|
|
7
7
|
import { BackdropProps } from "./index-ebda875c";
|
|
8
8
|
type PortalProps = {
|
|
@@ -25,7 +25,7 @@ type BaseModalProps = {
|
|
|
25
25
|
/**
|
|
26
26
|
* Компонент бэкдропа
|
|
27
27
|
*/
|
|
28
|
-
Backdrop?:
|
|
28
|
+
Backdrop?: ComponentType<BackdropProps>;
|
|
29
29
|
/**
|
|
30
30
|
* Свойства для Бэкдропа
|
|
31
31
|
*/
|
|
@@ -146,6 +146,10 @@ type BaseModalProps = {
|
|
|
146
146
|
* Реф, который должен быть установлен компонентной области
|
|
147
147
|
*/
|
|
148
148
|
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
149
|
+
/**
|
|
150
|
+
* Блокирует скролл когда модальное окно открыто. Работает только на iOS.
|
|
151
|
+
*/
|
|
152
|
+
iOSLock?: boolean;
|
|
149
153
|
};
|
|
150
154
|
type BaseModalContext = {
|
|
151
155
|
parentRef: React.RefObject<HTMLDivElement>;
|
|
@@ -169,7 +173,7 @@ declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
|
169
173
|
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
170
174
|
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
171
175
|
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
172
|
-
declare const handleContainer: (container?: HTMLElement) => void;
|
|
176
|
+
declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
|
|
173
177
|
/**
|
|
174
178
|
* Набор констант для z-index соответствующих классов компонентов.
|
|
175
179
|
* Значения выбраны по приоритету.
|
|
@@ -195,6 +199,9 @@ type StackProps = {
|
|
|
195
199
|
value?: number;
|
|
196
200
|
};
|
|
197
201
|
declare const Stack: FC<StackProps>;
|
|
202
|
+
declare const lockScroll: () => void;
|
|
203
|
+
declare const unlockScroll: () => void;
|
|
204
|
+
declare const syncHeight: () => void;
|
|
198
205
|
declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
|
|
199
206
|
declare const getDefaultPortalContainer: () => Element;
|
|
200
207
|
declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
|
|
@@ -219,5 +226,5 @@ declare class GlobalStore {
|
|
|
219
226
|
constructor();
|
|
220
227
|
getModalStore: () => ModalStore;
|
|
221
228
|
}
|
|
222
|
-
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
229
|
+
export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, lockScroll, unlockScroll, syncHeight, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
|
|
223
230
|
export type { SavedStyle };
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fccjv */
|
|
2
2
|
: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 */ /* 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 */
|
|
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_9ecqi {
|
|
20
20
|
min-width: auto;
|
|
21
|
-
} .cc-picker-button.picker-
|
|
21
|
+
} .cc-picker-button.picker-button__optionsPopover_9ecqi.picker-button__sideGap_9ecqi {
|
|
22
22
|
padding: 0 var(--gap-xs);
|
|
23
|
-
} .cc-picker-button .picker-
|
|
23
|
+
} .cc-picker-button .picker-button__option_9ecqi {
|
|
24
24
|
padding: 0 var(--gap-m)
|
|
25
|
-
} .cc-picker-button .picker-
|
|
25
|
+
} .cc-picker-button .picker-button__option_9ecqi:before {
|
|
26
26
|
/* Удаляем разделители у опций выпадающего списка. */
|
|
27
27
|
display: none;
|
|
28
28
|
}
|
|
@@ -4,7 +4,7 @@ import { Optgroup } from '@alfalab/core-components-select/modern/shared';
|
|
|
4
4
|
import { Field } from '../field/Component.js';
|
|
5
5
|
import { Option } from '../option/Component.js';
|
|
6
6
|
|
|
7
|
-
const PickerButtonMobile = forwardRef(({ options, label, Option: Option$1 = Option, Optgroup: Optgroup$1 = Optgroup, view, loading, variant = 'default', leftAddons, rightAddons, size, bottomSheetProps, showArrow, Field: Field$1 = Field, fieldProps = {}, breakpoint = 1024, ...restProps }, ref) => {
|
|
7
|
+
const PickerButtonMobile = forwardRef(({ options, label, Option: Option$1 = Option, Optgroup: Optgroup$1 = Optgroup, view, loading, variant = 'default', leftAddons, rightAddons, size, bottomSheetProps, showArrow, Field: Field$1 = Field, fieldProps = {}, icon, breakpoint = 1024, ...restProps }, ref) => {
|
|
8
8
|
const fieldDefaultProps = {
|
|
9
9
|
view,
|
|
10
10
|
loading,
|
|
@@ -15,6 +15,7 @@ const PickerButtonMobile = forwardRef(({ options, label, Option: Option$1 = Opti
|
|
|
15
15
|
rightAddons,
|
|
16
16
|
showArrow,
|
|
17
17
|
breakpoint,
|
|
18
|
+
icon,
|
|
18
19
|
};
|
|
19
20
|
return (React.createElement(SelectMobile, { ...restProps, label: label, Option: Option$1, bottomSheetProps: {
|
|
20
21
|
title: label,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Option as Option$1 } from '@alfalab/core-components-select/modern/shared';
|
|
3
3
|
|
|
4
|
-
const styles = {"container":"picker-
|
|
4
|
+
const styles = {"container":"picker-button__container_g1kh7","icon":"picker-button__icon_g1kh7","content":"picker-button__content_g1kh7"};
|
|
5
5
|
require('./index.css')
|
|
6
6
|
|
|
7
7
|
const Option = ({ option, children, ...restProps }) => {
|