@alfalab/core-components-picker-button 11.0.1 → 11.0.3

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.
Files changed (43) hide show
  1. package/Component-63dec22f.d.ts +18 -1
  2. package/Component.desktop.js +1 -1
  3. package/cssm/Component-63dec22f.d.ts +18 -1
  4. package/cssm/field/Component.js +5 -3
  5. package/cssm/field/index.module.css +4 -1
  6. package/cssm/shared-4cd3936b.d.ts +1 -29
  7. package/cssm/types-1b036d4b.d.ts +13 -0
  8. package/cssm/types-72dda473.d.ts +9 -1
  9. package/cssm/useSkeleton-ebda875c.d.ts +12 -0
  10. package/esm/Component-63dec22f.d.ts +18 -1
  11. package/esm/Component.desktop.js +1 -1
  12. package/esm/field/Component.js +6 -4
  13. package/esm/field/index.css +9 -6
  14. package/esm/index.css +5 -5
  15. package/esm/option/Component.js +1 -1
  16. package/esm/option/index.css +4 -4
  17. package/esm/shared-4cd3936b.d.ts +1 -29
  18. package/esm/types-1b036d4b.d.ts +13 -0
  19. package/esm/types-72dda473.d.ts +9 -1
  20. package/esm/useSkeleton-ebda875c.d.ts +12 -0
  21. package/field/Component.js +6 -4
  22. package/field/index.css +9 -6
  23. package/index.css +5 -5
  24. package/modern/Component-63dec22f.d.ts +18 -1
  25. package/modern/Component.desktop.js +1 -1
  26. package/modern/field/Component.js +4 -2
  27. package/modern/field/index.css +9 -6
  28. package/modern/index.css +5 -5
  29. package/modern/option/Component.js +1 -1
  30. package/modern/option/index.css +4 -4
  31. package/modern/shared-4cd3936b.d.ts +1 -29
  32. package/modern/types-1b036d4b.d.ts +13 -0
  33. package/modern/types-72dda473.d.ts +9 -1
  34. package/modern/useSkeleton-ebda875c.d.ts +12 -0
  35. package/option/Component.js +1 -1
  36. package/option/index.css +4 -4
  37. package/package.json +3 -3
  38. package/shared-4cd3936b.d.ts +1 -29
  39. package/src/field/Component.tsx +3 -1
  40. package/src/field/index.module.css +4 -0
  41. package/types-1b036d4b.d.ts +13 -0
  42. package/types-72dda473.d.ts +9 -1
  43. package/useSkeleton-ebda875c.d.ts +12 -0
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
4
+ import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
4
5
  declare const colors: readonly [
5
6
  "tertiary",
6
7
  "disabled",
@@ -23,7 +24,6 @@ declare const colors: readonly [
23
24
  "static-accent"
24
25
  ];
25
26
  type Color = (typeof colors)[number];
26
- type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
27
27
  type NativeProps = HTMLAttributes<HTMLSpanElement>;
28
28
  type TextBaseProps = {
29
29
  /**
@@ -66,6 +66,14 @@ type TextBaseProps = {
66
66
  * Количество строк (не поддерживает IE)
67
67
  */
68
68
  rowLimit?: 1 | 2 | 3;
69
+ /**
70
+ * Показать скелетон
71
+ */
72
+ showSkeleton?: boolean;
73
+ /**
74
+ * Пропы для скелетона
75
+ */
76
+ skeletonProps?: TextSkeletonProps;
69
77
  };
70
78
  type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
71
79
  tag?: "p";
@@ -114,6 +122,14 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
114
122
  * Количество строк (не поддерживает IE)
115
123
  */
116
124
  rowLimit?: 1 | 2 | 3;
125
+ /**
126
+ * Показать скелетон
127
+ */
128
+ showSkeleton?: boolean;
129
+ /**
130
+ * Пропы для скелетона
131
+ */
132
+ skeletonProps?: TextSkeletonProps;
117
133
  };
118
134
  type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
119
135
  declare const Typography: {
@@ -165,3 +181,4 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
165
181
  declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
166
182
  export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
167
183
  export type { TitleProps, TextProps, Color };
184
+ export * from "./useSkeleton-ebda875c";
@@ -20,7 +20,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
20
20
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
21
21
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
22
22
 
23
- var styles = {"container":"picker-button__container_1bvhf","optionsPopover":"picker-button__optionsPopover_1bvhf","sideGap":"picker-button__sideGap_1bvhf","option":"picker-button__option_1bvhf"};
23
+ var styles = {"container":"picker-button__container_19mq7","optionsPopover":"picker-button__optionsPopover_19mq7","sideGap":"picker-button__sideGap_19mq7","option":"picker-button__option_19mq7"};
24
24
  require('./index.css')
25
25
 
26
26
  var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
4
+ import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
4
5
  declare const colors: readonly [
5
6
  "tertiary",
6
7
  "disabled",
@@ -23,7 +24,6 @@ declare const colors: readonly [
23
24
  "static-accent"
24
25
  ];
25
26
  type Color = (typeof colors)[number];
26
- type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
27
27
  type NativeProps = HTMLAttributes<HTMLSpanElement>;
28
28
  type TextBaseProps = {
29
29
  /**
@@ -66,6 +66,14 @@ type TextBaseProps = {
66
66
  * Количество строк (не поддерживает IE)
67
67
  */
68
68
  rowLimit?: 1 | 2 | 3;
69
+ /**
70
+ * Показать скелетон
71
+ */
72
+ showSkeleton?: boolean;
73
+ /**
74
+ * Пропы для скелетона
75
+ */
76
+ skeletonProps?: TextSkeletonProps;
69
77
  };
70
78
  type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
71
79
  tag?: "p";
@@ -114,6 +122,14 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
114
122
  * Количество строк (не поддерживает IE)
115
123
  */
116
124
  rowLimit?: 1 | 2 | 3;
125
+ /**
126
+ * Показать скелетон
127
+ */
128
+ showSkeleton?: boolean;
129
+ /**
130
+ * Пропы для скелетона
131
+ */
132
+ skeletonProps?: TextSkeletonProps;
117
133
  };
118
134
  type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
119
135
  declare const Typography: {
@@ -165,3 +181,4 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
165
181
  declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
166
182
  export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
167
183
  export type { TitleProps, TextProps, Color };
184
+ export * from "./useSkeleton-ebda875c";
@@ -20,8 +20,8 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
20
20
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
21
21
 
22
22
  var Field = function (_a) {
23
- var _b;
24
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, 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 _e = _a.showArrow, showArrow = _e === void 0 ? true : _e; _a.labelView; var restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView"]);
23
+ var _b, _c;
24
+ var _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _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"]);
25
25
  var Icon = utils_index.getIcon(buttonVariant, buttonSize);
26
26
  var ref = innerProps.ref, restInnerProps = tslib.__rest(innerProps, ["ref"]);
27
27
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), restInnerProps);
@@ -31,7 +31,9 @@ var Field = function (_a) {
31
31
  _b[styles__default.default.showControlIcon] = showArrow || buttonVariant === 'compact',
32
32
  _b)) }, rightAddons)),
33
33
  (showArrow || buttonVariant === 'compact') && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconContainer, buttonVariant !== 'compact' && open && styles__default.default.open) },
34
- React__default.default.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn__default.default(styles__default.default.component, view === 'primary' && styles__default.default.primary, className) }), buttonVariant !== 'compact' && label)));
34
+ React__default.default.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn__default.default(className, (_c = {},
35
+ _c[styles__default.default.linkOpen] = view === 'link' && open,
36
+ _c)) }), buttonVariant !== 'compact' && label)));
35
37
  };
36
38
 
37
39
  exports.Field = Field;
@@ -1,5 +1,6 @@
1
1
  :root {
2
- } /* 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 */
2
+ } /* deprecated */ :root {
3
+ --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 */
3
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 */
4
5
  } :root {
5
6
  } :root {
@@ -24,4 +25,6 @@
24
25
  margin-right: var(--gap-2xs);
25
26
  } .open {
26
27
  transform: var(--arrow-transform);
28
+ } .linkOpen:not(:hover) {
29
+ background-color: var(--color-light-specialbg-secondary-transparent);
27
30
  }
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
- import { ReactNode } from "react";
4
3
  import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
5
4
  // eslint-disable-next-line @typescript-eslint/naming-convention
6
5
  type useSelectWithLoadingProps = {
@@ -57,36 +56,9 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
57
56
  };
58
57
  reset: () => void;
59
58
  };
60
- type SkeletonProps = {
61
- /**
62
- * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
63
- */
64
- visible?: boolean;
65
- /**
66
- * Флаг явного включения анимации скелета
67
- */
68
- animate?: boolean;
69
- /**
70
- * Дополнительный класс
71
- */
72
- className?: string;
73
- /**
74
- * Дополнительные инлайн стили
75
- */
76
- style?: React.CSSProperties;
77
- /**
78
- * Идентификатор для систем автоматизированного тестирования
79
- */
80
- dataTestId?: string;
81
- /**
82
- * Дочерние элементы.
83
- */
84
- children?: ReactNode;
85
- };
86
- declare const Skeleton: React.FC<SkeletonProps>;
87
59
  export * from "./index-ebda875c";
88
60
  export * from "./Component-5e1b8383";
89
- export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
61
+ export { useSelectWithLoading, useLazyLoading };
90
62
  export * from "./hook-9ea9e32c";
91
63
  export * from "./typings-5e1b8383";
92
64
  export * from "./utils-5e1b8383";
@@ -0,0 +1,13 @@
1
+ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
2
+ type WidthUnit = number | string;
3
+ type TextSkeletonProps = {
4
+ /**
5
+ * Кол-во строк текста
6
+ */
7
+ rows?: number;
8
+ /**
9
+ * Ширина строки
10
+ */
11
+ width?: WidthUnit | WidthUnit[];
12
+ };
13
+ export { TextElementType, TextSkeletonProps };
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react-transition-group" />
2
- import { HTMLAttributes, ReactNode, RefObject } from 'react';
2
+ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
3
3
  import { TransitionProps } from 'react-transition-group/Transition';
4
4
  import { BaseModalProps } from "./index-bdb4c6b9";
5
5
  import { NavigationBarProps } from "./index-c76d6398";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
88
88
  * Дополнительный класс для обертки модального окна
89
89
  */
90
90
  modalWrapperClassName?: string;
91
+ /**
92
+ * Дополнительный класс для маркера
93
+ */
94
+ swipeableMarkerClassName?: string;
95
+ /**
96
+ * Кастомный маркер
97
+ */
98
+ swipeableMarker?: ReactElement;
91
99
  /**
92
100
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
93
101
  */
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TextSkeletonProps } from "./types-1b036d4b";
4
+ type SkeletonProps = {
5
+ wrapperClassName?: string;
6
+ dataTestId?: string;
7
+ };
8
+ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
9
+ renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
10
+ textRef: React.RefObject<HTMLElement>;
11
+ };
12
+ export { useSkeleton };
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
4
+ import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
4
5
  declare const colors: readonly [
5
6
  "tertiary",
6
7
  "disabled",
@@ -23,7 +24,6 @@ declare const colors: readonly [
23
24
  "static-accent"
24
25
  ];
25
26
  type Color = (typeof colors)[number];
26
- type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
27
27
  type NativeProps = HTMLAttributes<HTMLSpanElement>;
28
28
  type TextBaseProps = {
29
29
  /**
@@ -66,6 +66,14 @@ type TextBaseProps = {
66
66
  * Количество строк (не поддерживает IE)
67
67
  */
68
68
  rowLimit?: 1 | 2 | 3;
69
+ /**
70
+ * Показать скелетон
71
+ */
72
+ showSkeleton?: boolean;
73
+ /**
74
+ * Пропы для скелетона
75
+ */
76
+ skeletonProps?: TextSkeletonProps;
69
77
  };
70
78
  type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
71
79
  tag?: "p";
@@ -114,6 +122,14 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
114
122
  * Количество строк (не поддерживает IE)
115
123
  */
116
124
  rowLimit?: 1 | 2 | 3;
125
+ /**
126
+ * Показать скелетон
127
+ */
128
+ showSkeleton?: boolean;
129
+ /**
130
+ * Пропы для скелетона
131
+ */
132
+ skeletonProps?: TextSkeletonProps;
117
133
  };
118
134
  type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
119
135
  declare const Typography: {
@@ -165,3 +181,4 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
165
181
  declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
166
182
  export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
167
183
  export type { TitleProps, TextProps, Color };
184
+ export * from "./useSkeleton-ebda875c";
@@ -11,7 +11,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
11
11
  import '@alfalab/icons-glyph/MoreMIcon';
12
12
  import '@alfalab/icons-glyph/MoreSIcon';
13
13
 
14
- var styles = {"container":"picker-button__container_1bvhf","optionsPopover":"picker-button__optionsPopover_1bvhf","sideGap":"picker-button__sideGap_1bvhf","option":"picker-button__option_1bvhf"};
14
+ var styles = {"container":"picker-button__container_19mq7","optionsPopover":"picker-button__optionsPopover_19mq7","sideGap":"picker-button__sideGap_19mq7","option":"picker-button__option_19mq7"};
15
15
  require('./index.css')
16
16
 
17
17
  var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
@@ -8,12 +8,12 @@ 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-button__iconContainer_1tzr7","addonsContainer":"picker-button__addonsContainer_1tzr7","showControlIcon":"picker-button__showControlIcon_1tzr7","open":"picker-button__open_1tzr7"};
11
+ var styles = {"iconContainer":"picker-button__iconContainer_77eml","addonsContainer":"picker-button__addonsContainer_77eml","showControlIcon":"picker-button__showControlIcon_77eml","open":"picker-button__open_77eml","linkOpen":"picker-button__linkOpen_77eml"};
12
12
  require('./index.css')
13
13
 
14
14
  var Field = function (_a) {
15
- var _b;
16
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, 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 _e = _a.showArrow, showArrow = _e === void 0 ? true : _e; _a.labelView; var restProps = __rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView"]);
15
+ var _b, _c;
16
+ var _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _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 = __rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView"]);
17
17
  var Icon = getIcon(buttonVariant, buttonSize);
18
18
  var ref = innerProps.ref, restInnerProps = __rest(innerProps, ["ref"]);
19
19
  var buttonProps = __assign(__assign({}, restProps), restInnerProps);
@@ -23,7 +23,9 @@ var Field = function (_a) {
23
23
  _b[styles.showControlIcon] = showArrow || buttonVariant === 'compact',
24
24
  _b)) }, rightAddons)),
25
25
  (showArrow || buttonVariant === 'compact') && (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
26
- React.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }), buttonVariant !== 'compact' && label)));
26
+ React.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn(className, (_c = {},
27
+ _c[styles.linkOpen] = view === 'link' && open,
28
+ _c)) }), buttonVariant !== 'compact' && label)));
27
29
  };
28
30
 
29
31
  export { Field };
@@ -1,6 +1,7 @@
1
- /* hash: 11ls2 */
1
+ /* hash: bimam */
2
2
  :root {
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 */
3
+ } /* deprecated */ :root {
4
+ --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 */
4
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 */
5
6
  } :root {
6
7
  } :root {
@@ -16,13 +17,15 @@
16
17
  } :root {
17
18
  } :root {
18
19
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1tzr7 {
20
+ } .picker-button__iconContainer_77eml {
20
21
  display: flex;
21
22
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1tzr7 {
23
+ } .picker-button__addonsContainer_77eml {
23
24
  display: flex
24
- } .picker-button__addonsContainer_1tzr7.picker-button__showControlIcon_1tzr7 {
25
+ } .picker-button__addonsContainer_77eml.picker-button__showControlIcon_77eml {
25
26
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1tzr7 {
27
+ } .picker-button__open_77eml {
27
28
  transform: var(--arrow-transform);
29
+ } .picker-button__linkOpen_77eml:not(:hover) {
30
+ background-color: var(--color-light-specialbg-secondary-transparent);
28
31
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 158ll */
1
+ /* hash: f5fua */
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-button__container_1bvhf {
19
+ } .picker-button__container_19mq7 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_1bvhf.picker-button__sideGap_1bvhf {
21
+ } .cc-picker-button.picker-button__optionsPopover_19mq7.picker-button__sideGap_19mq7 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_1bvhf {
23
+ } .cc-picker-button .picker-button__option_19mq7 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_1bvhf:before {
25
+ } .cc-picker-button .picker-button__option_19mq7:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
@@ -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-button__container_y5v6g","icon":"picker-button__icon_y5v6g","content":"picker-button__content_y5v6g"};
5
+ var styles = {"container":"picker-button__container_vx3yl","icon":"picker-button__icon_vx3yl","content":"picker-button__content_vx3yl"};
6
6
  require('./index.css')
7
7
 
8
8
  var Option = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: jecxe */
1
+ /* hash: 1scb7 */
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-button__container_y5v6g {
18
+ } .picker-button__container_vx3yl {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_y5v6g {
21
+ } .picker-button__icon_vx3yl {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_y5v6g {
24
+ } .picker-button__content_vx3yl {
25
25
  overflow: hidden;
26
26
  flex: 1;
27
27
  text-overflow: ellipsis;
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
- import { ReactNode } from "react";
4
3
  import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
5
4
  // eslint-disable-next-line @typescript-eslint/naming-convention
6
5
  type useSelectWithLoadingProps = {
@@ -57,36 +56,9 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
57
56
  };
58
57
  reset: () => void;
59
58
  };
60
- type SkeletonProps = {
61
- /**
62
- * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
63
- */
64
- visible?: boolean;
65
- /**
66
- * Флаг явного включения анимации скелета
67
- */
68
- animate?: boolean;
69
- /**
70
- * Дополнительный класс
71
- */
72
- className?: string;
73
- /**
74
- * Дополнительные инлайн стили
75
- */
76
- style?: React.CSSProperties;
77
- /**
78
- * Идентификатор для систем автоматизированного тестирования
79
- */
80
- dataTestId?: string;
81
- /**
82
- * Дочерние элементы.
83
- */
84
- children?: ReactNode;
85
- };
86
- declare const Skeleton: React.FC<SkeletonProps>;
87
59
  export * from "./index-ebda875c";
88
60
  export * from "./Component-5e1b8383";
89
- export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
61
+ export { useSelectWithLoading, useLazyLoading };
90
62
  export * from "./hook-9ea9e32c";
91
63
  export * from "./typings-5e1b8383";
92
64
  export * from "./utils-5e1b8383";
@@ -0,0 +1,13 @@
1
+ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
2
+ type WidthUnit = number | string;
3
+ type TextSkeletonProps = {
4
+ /**
5
+ * Кол-во строк текста
6
+ */
7
+ rows?: number;
8
+ /**
9
+ * Ширина строки
10
+ */
11
+ width?: WidthUnit | WidthUnit[];
12
+ };
13
+ export { TextElementType, TextSkeletonProps };
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react-transition-group" />
2
- import { HTMLAttributes, ReactNode, RefObject } from 'react';
2
+ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
3
3
  import { TransitionProps } from 'react-transition-group/Transition';
4
4
  import { BaseModalProps } from "./index-bdb4c6b9";
5
5
  import { NavigationBarProps } from "./index-c76d6398";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
88
88
  * Дополнительный класс для обертки модального окна
89
89
  */
90
90
  modalWrapperClassName?: string;
91
+ /**
92
+ * Дополнительный класс для маркера
93
+ */
94
+ swipeableMarkerClassName?: string;
95
+ /**
96
+ * Кастомный маркер
97
+ */
98
+ swipeableMarker?: ReactElement;
91
99
  /**
92
100
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
93
101
  */
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TextSkeletonProps } from "./types-1b036d4b";
4
+ type SkeletonProps = {
5
+ wrapperClassName?: string;
6
+ dataTestId?: string;
7
+ };
8
+ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
9
+ renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
10
+ textRef: React.RefObject<HTMLElement>;
11
+ };
12
+ export { useSkeleton };
@@ -17,12 +17,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
19
 
20
- var styles = {"iconContainer":"picker-button__iconContainer_1tzr7","addonsContainer":"picker-button__addonsContainer_1tzr7","showControlIcon":"picker-button__showControlIcon_1tzr7","open":"picker-button__open_1tzr7"};
20
+ var styles = {"iconContainer":"picker-button__iconContainer_77eml","addonsContainer":"picker-button__addonsContainer_77eml","showControlIcon":"picker-button__showControlIcon_77eml","open":"picker-button__open_77eml","linkOpen":"picker-button__linkOpen_77eml"};
21
21
  require('./index.css')
22
22
 
23
23
  var Field = function (_a) {
24
- var _b;
25
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, 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 _e = _a.showArrow, showArrow = _e === void 0 ? true : _e; _a.labelView; var restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "setSelectedItems", "toggleMenu", "valueRenderer", "showArrow", "labelView"]);
24
+ var _b, _c;
25
+ var _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _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"]);
26
26
  var Icon = utils_index.getIcon(buttonVariant, buttonSize);
27
27
  var ref = innerProps.ref, restInnerProps = tslib.__rest(innerProps, ["ref"]);
28
28
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), restInnerProps);
@@ -32,7 +32,9 @@ var Field = function (_a) {
32
32
  _b[styles.showControlIcon] = showArrow || buttonVariant === 'compact',
33
33
  _b)) }, rightAddons)),
34
34
  (showArrow || buttonVariant === 'compact') && (React__default.default.createElement("span", { className: cn__default.default(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
35
- React__default.default.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn__default.default(styles.component, view === 'primary' && styles.primary, className) }), buttonVariant !== 'compact' && label)));
35
+ React__default.default.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn__default.default(className, (_c = {},
36
+ _c[styles.linkOpen] = view === 'link' && open,
37
+ _c)) }), buttonVariant !== 'compact' && label)));
36
38
  };
37
39
 
38
40
  exports.Field = Field;
package/field/index.css CHANGED
@@ -1,6 +1,7 @@
1
- /* hash: 11ls2 */
1
+ /* hash: bimam */
2
2
  :root {
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 */
3
+ } /* deprecated */ :root {
4
+ --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 */
4
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 */
5
6
  } :root {
6
7
  } :root {
@@ -16,13 +17,15 @@
16
17
  } :root {
17
18
  } :root {
18
19
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1tzr7 {
20
+ } .picker-button__iconContainer_77eml {
20
21
  display: flex;
21
22
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1tzr7 {
23
+ } .picker-button__addonsContainer_77eml {
23
24
  display: flex
24
- } .picker-button__addonsContainer_1tzr7.picker-button__showControlIcon_1tzr7 {
25
+ } .picker-button__addonsContainer_77eml.picker-button__showControlIcon_77eml {
25
26
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1tzr7 {
27
+ } .picker-button__open_77eml {
27
28
  transform: var(--arrow-transform);
29
+ } .picker-button__linkOpen_77eml:not(:hover) {
30
+ background-color: var(--color-light-specialbg-secondary-transparent);
28
31
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 158ll */
1
+ /* hash: f5fua */
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-button__container_1bvhf {
19
+ } .picker-button__container_19mq7 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_1bvhf.picker-button__sideGap_1bvhf {
21
+ } .cc-picker-button.picker-button__optionsPopover_19mq7.picker-button__sideGap_19mq7 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_1bvhf {
23
+ } .cc-picker-button .picker-button__option_19mq7 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_1bvhf:before {
25
+ } .cc-picker-button .picker-button__option_19mq7:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
3
  import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
4
+ import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
4
5
  declare const colors: readonly [
5
6
  "tertiary",
6
7
  "disabled",
@@ -23,7 +24,6 @@ declare const colors: readonly [
23
24
  "static-accent"
24
25
  ];
25
26
  type Color = (typeof colors)[number];
26
- type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
27
27
  type NativeProps = HTMLAttributes<HTMLSpanElement>;
28
28
  type TextBaseProps = {
29
29
  /**
@@ -66,6 +66,14 @@ type TextBaseProps = {
66
66
  * Количество строк (не поддерживает IE)
67
67
  */
68
68
  rowLimit?: 1 | 2 | 3;
69
+ /**
70
+ * Показать скелетон
71
+ */
72
+ showSkeleton?: boolean;
73
+ /**
74
+ * Пропы для скелетона
75
+ */
76
+ skeletonProps?: TextSkeletonProps;
69
77
  };
70
78
  type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
71
79
  tag?: "p";
@@ -114,6 +122,14 @@ type TitleProps = Omit<NativeProps$0, "color"> & {
114
122
  * Количество строк (не поддерживает IE)
115
123
  */
116
124
  rowLimit?: 1 | 2 | 3;
125
+ /**
126
+ * Показать скелетон
127
+ */
128
+ showSkeleton?: boolean;
129
+ /**
130
+ * Пропы для скелетона
131
+ */
132
+ skeletonProps?: TextSkeletonProps;
117
133
  };
118
134
  type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
119
135
  declare const Typography: {
@@ -165,3 +181,4 @@ interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
165
181
  declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
166
182
  export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
167
183
  export type { TitleProps, TextProps, Color };
184
+ export * from "./useSkeleton-ebda875c";
@@ -10,7 +10,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
10
10
  import '@alfalab/icons-glyph/MoreMIcon';
11
11
  import '@alfalab/icons-glyph/MoreSIcon';
12
12
 
13
- const styles = {"container":"picker-button__container_1bvhf","optionsPopover":"picker-button__optionsPopover_1bvhf","sideGap":"picker-button__sideGap_1bvhf","option":"picker-button__option_1bvhf"};
13
+ const styles = {"container":"picker-button__container_19mq7","optionsPopover":"picker-button__optionsPopover_19mq7","sideGap":"picker-button__sideGap_19mq7","option":"picker-button__option_19mq7"};
14
14
  require('./index.css')
15
15
 
16
16
  const SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
@@ -7,7 +7,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
7
7
  import '@alfalab/icons-glyph/MoreMIcon';
8
8
  import '@alfalab/icons-glyph/MoreSIcon';
9
9
 
10
- const styles = {"iconContainer":"picker-button__iconContainer_1tzr7","addonsContainer":"picker-button__addonsContainer_1tzr7","showControlIcon":"picker-button__showControlIcon_1tzr7","open":"picker-button__open_1tzr7"};
10
+ const styles = {"iconContainer":"picker-button__iconContainer_77eml","addonsContainer":"picker-button__addonsContainer_77eml","showControlIcon":"picker-button__showControlIcon_77eml","open":"picker-button__open_77eml","linkOpen":"picker-button__linkOpen_77eml"};
11
11
  require('./index.css')
12
12
 
13
13
  const Field = ({ buttonSize = 'm', buttonVariant = 'default', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, showArrow = true, labelView, ...restProps }) => {
@@ -23,7 +23,9 @@ const Field = ({ buttonSize = 'm', buttonVariant = 'default', view, label, open,
23
23
  [styles.showControlIcon]: showArrow || buttonVariant === 'compact',
24
24
  }) }, rightAddons)),
25
25
  (showArrow || buttonVariant === 'compact') && (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
26
- React.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }, buttonVariant !== 'compact' && label)));
26
+ React.createElement(Icon, { "data-test-id": 'picker-button-icon' })))), block: true, view: view, size: buttonSize, className: cn(className, {
27
+ [styles.linkOpen]: view === 'link' && open,
28
+ }) }, buttonVariant !== 'compact' && label)));
27
29
  };
28
30
 
29
31
  export { Field };
@@ -1,6 +1,7 @@
1
- /* hash: 11ls2 */
1
+ /* hash: bimam */
2
2
  :root {
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 */
3
+ } /* deprecated */ :root {
4
+ --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 */
4
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 */
5
6
  } :root {
6
7
  } :root {
@@ -16,13 +17,15 @@
16
17
  } :root {
17
18
  } :root {
18
19
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1tzr7 {
20
+ } .picker-button__iconContainer_77eml {
20
21
  display: flex;
21
22
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1tzr7 {
23
+ } .picker-button__addonsContainer_77eml {
23
24
  display: flex
24
- } .picker-button__addonsContainer_1tzr7.picker-button__showControlIcon_1tzr7 {
25
+ } .picker-button__addonsContainer_77eml.picker-button__showControlIcon_77eml {
25
26
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1tzr7 {
27
+ } .picker-button__open_77eml {
27
28
  transform: var(--arrow-transform);
29
+ } .picker-button__linkOpen_77eml:not(:hover) {
30
+ background-color: var(--color-light-specialbg-secondary-transparent);
28
31
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 158ll */
1
+ /* hash: f5fua */
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-button__container_1bvhf {
19
+ } .picker-button__container_19mq7 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_1bvhf.picker-button__sideGap_1bvhf {
21
+ } .cc-picker-button.picker-button__optionsPopover_19mq7.picker-button__sideGap_19mq7 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_1bvhf {
23
+ } .cc-picker-button .picker-button__option_19mq7 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_1bvhf:before {
25
+ } .cc-picker-button .picker-button__option_19mq7:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
@@ -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-button__container_y5v6g","icon":"picker-button__icon_y5v6g","content":"picker-button__content_y5v6g"};
4
+ const styles = {"container":"picker-button__container_vx3yl","icon":"picker-button__icon_vx3yl","content":"picker-button__content_vx3yl"};
5
5
  require('./index.css')
6
6
 
7
7
  const Option = ({ option, children, ...restProps }) => {
@@ -1,4 +1,4 @@
1
- /* hash: jecxe */
1
+ /* hash: 1scb7 */
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-button__container_y5v6g {
18
+ } .picker-button__container_vx3yl {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_y5v6g {
21
+ } .picker-button__icon_vx3yl {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_y5v6g {
24
+ } .picker-button__content_vx3yl {
25
25
  overflow: hidden;
26
26
  flex: 1;
27
27
  text-overflow: ellipsis;
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
- import { ReactNode } from "react";
4
3
  import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
5
4
  // eslint-disable-next-line @typescript-eslint/naming-convention
6
5
  type useSelectWithLoadingProps = {
@@ -57,36 +56,9 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
57
56
  };
58
57
  reset: () => void;
59
58
  };
60
- type SkeletonProps = {
61
- /**
62
- * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
63
- */
64
- visible?: boolean;
65
- /**
66
- * Флаг явного включения анимации скелета
67
- */
68
- animate?: boolean;
69
- /**
70
- * Дополнительный класс
71
- */
72
- className?: string;
73
- /**
74
- * Дополнительные инлайн стили
75
- */
76
- style?: React.CSSProperties;
77
- /**
78
- * Идентификатор для систем автоматизированного тестирования
79
- */
80
- dataTestId?: string;
81
- /**
82
- * Дочерние элементы.
83
- */
84
- children?: ReactNode;
85
- };
86
- declare const Skeleton: React.FC<SkeletonProps>;
87
59
  export * from "./index-ebda875c";
88
60
  export * from "./Component-5e1b8383";
89
- export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
61
+ export { useSelectWithLoading, useLazyLoading };
90
62
  export * from "./hook-9ea9e32c";
91
63
  export * from "./typings-5e1b8383";
92
64
  export * from "./utils-5e1b8383";
@@ -0,0 +1,13 @@
1
+ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
2
+ type WidthUnit = number | string;
3
+ type TextSkeletonProps = {
4
+ /**
5
+ * Кол-во строк текста
6
+ */
7
+ rows?: number;
8
+ /**
9
+ * Ширина строки
10
+ */
11
+ width?: WidthUnit | WidthUnit[];
12
+ };
13
+ export { TextElementType, TextSkeletonProps };
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react-transition-group" />
2
- import { HTMLAttributes, ReactNode, RefObject } from 'react';
2
+ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
3
3
  import { TransitionProps } from 'react-transition-group/Transition';
4
4
  import { BaseModalProps } from "./index-bdb4c6b9";
5
5
  import { NavigationBarProps } from "./index-c76d6398";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
88
88
  * Дополнительный класс для обертки модального окна
89
89
  */
90
90
  modalWrapperClassName?: string;
91
+ /**
92
+ * Дополнительный класс для маркера
93
+ */
94
+ swipeableMarkerClassName?: string;
95
+ /**
96
+ * Кастомный маркер
97
+ */
98
+ swipeableMarker?: ReactElement;
91
99
  /**
92
100
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
93
101
  */
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TextSkeletonProps } from "./types-1b036d4b";
4
+ type SkeletonProps = {
5
+ wrapperClassName?: string;
6
+ dataTestId?: string;
7
+ };
8
+ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
9
+ renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
10
+ textRef: React.RefObject<HTMLElement>;
11
+ };
12
+ export { useSkeleton };
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
 
13
- var styles = {"container":"picker-button__container_y5v6g","icon":"picker-button__icon_y5v6g","content":"picker-button__content_y5v6g"};
13
+ var styles = {"container":"picker-button__container_vx3yl","icon":"picker-button__icon_vx3yl","content":"picker-button__content_vx3yl"};
14
14
  require('./index.css')
15
15
 
16
16
  var Option = function (_a) {
package/option/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: jecxe */
1
+ /* hash: 1scb7 */
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-button__container_y5v6g {
18
+ } .picker-button__container_vx3yl {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_y5v6g {
21
+ } .picker-button__icon_vx3yl {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_y5v6g {
24
+ } .picker-button__content_vx3yl {
25
25
  overflow: hidden;
26
26
  flex: 1;
27
27
  text-overflow: ellipsis;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-picker-button",
3
- "version": "11.0.1",
3
+ "version": "11.0.3",
4
4
  "description": "Picker button component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -39,8 +39,8 @@
39
39
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
40
40
  },
41
41
  "dependencies": {
42
- "@alfalab/core-components-button": "^9.0.1",
43
- "@alfalab/core-components-select": "^15.0.1",
42
+ "@alfalab/core-components-button": "^9.0.2",
43
+ "@alfalab/core-components-select": "^15.0.3",
44
44
  "@alfalab/hooks": "^1.13.0",
45
45
  "@alfalab/icons-glyph": "^2.108.0",
46
46
  "classnames": "^2.3.1",
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import React from "react";
3
- import { ReactNode } from "react";
4
3
  import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
5
4
  // eslint-disable-next-line @typescript-eslint/naming-convention
6
5
  type useSelectWithLoadingProps = {
@@ -57,36 +56,9 @@ declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton
57
56
  };
58
57
  reset: () => void;
59
58
  };
60
- type SkeletonProps = {
61
- /**
62
- * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
63
- */
64
- visible?: boolean;
65
- /**
66
- * Флаг явного включения анимации скелета
67
- */
68
- animate?: boolean;
69
- /**
70
- * Дополнительный класс
71
- */
72
- className?: string;
73
- /**
74
- * Дополнительные инлайн стили
75
- */
76
- style?: React.CSSProperties;
77
- /**
78
- * Идентификатор для систем автоматизированного тестирования
79
- */
80
- dataTestId?: string;
81
- /**
82
- * Дочерние элементы.
83
- */
84
- children?: ReactNode;
85
- };
86
- declare const Skeleton: React.FC<SkeletonProps>;
87
59
  export * from "./index-ebda875c";
88
60
  export * from "./Component-5e1b8383";
89
- export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
61
+ export { useSelectWithLoading, useLazyLoading };
90
62
  export * from "./hook-9ea9e32c";
91
63
  export * from "./typings-5e1b8383";
92
64
  export * from "./utils-5e1b8383";
@@ -77,7 +77,9 @@ export const Field = ({
77
77
  block={true}
78
78
  view={view}
79
79
  size={buttonSize}
80
- className={cn(styles.component, view === 'primary' && styles.primary, className)}
80
+ className={cn(className, {
81
+ [styles.linkOpen]: view === 'link' && open,
82
+ })}
81
83
  >
82
84
  {buttonVariant !== 'compact' && label}
83
85
  </Button>
@@ -16,3 +16,7 @@
16
16
  .open {
17
17
  transform: var(--arrow-transform);
18
18
  }
19
+
20
+ .linkOpen:not(:hover) {
21
+ background-color: var(--color-light-specialbg-secondary-transparent);
22
+ }
@@ -0,0 +1,13 @@
1
+ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
2
+ type WidthUnit = number | string;
3
+ type TextSkeletonProps = {
4
+ /**
5
+ * Кол-во строк текста
6
+ */
7
+ rows?: number;
8
+ /**
9
+ * Ширина строки
10
+ */
11
+ width?: WidthUnit | WidthUnit[];
12
+ };
13
+ export { TextElementType, TextSkeletonProps };
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react-transition-group" />
2
- import { HTMLAttributes, ReactNode, RefObject } from 'react';
2
+ import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
3
3
  import { TransitionProps } from 'react-transition-group/Transition';
4
4
  import { BaseModalProps } from "./index-bdb4c6b9";
5
5
  import { NavigationBarProps } from "./index-c76d6398";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
88
88
  * Дополнительный класс для обертки модального окна
89
89
  */
90
90
  modalWrapperClassName?: string;
91
+ /**
92
+ * Дополнительный класс для маркера
93
+ */
94
+ swipeableMarkerClassName?: string;
95
+ /**
96
+ * Кастомный маркер
97
+ */
98
+ swipeableMarker?: ReactElement;
91
99
  /**
92
100
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
93
101
  */
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TextSkeletonProps } from "./types-1b036d4b";
4
+ type SkeletonProps = {
5
+ wrapperClassName?: string;
6
+ dataTestId?: string;
7
+ };
8
+ declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
9
+ renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
10
+ textRef: React.RefObject<HTMLElement>;
11
+ };
12
+ export { useSkeleton };