@alfalab/core-components-picker-button 10.3.17 → 10.3.18

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 (23) hide show
  1. package/Component.js +1 -1
  2. package/cssm/typings-5e1b8383.d.ts +15 -4
  3. package/esm/Component.js +1 -1
  4. package/esm/field/Component.js +1 -1
  5. package/esm/field/index.css +5 -5
  6. package/esm/index.css +5 -5
  7. package/esm/option/Component.js +1 -1
  8. package/esm/option/index.css +4 -4
  9. package/esm/typings-5e1b8383.d.ts +15 -4
  10. package/field/Component.js +1 -1
  11. package/field/index.css +5 -5
  12. package/index.css +5 -5
  13. package/modern/Component.js +1 -1
  14. package/modern/field/Component.js +1 -1
  15. package/modern/field/index.css +5 -5
  16. package/modern/index.css +5 -5
  17. package/modern/option/Component.js +1 -1
  18. package/modern/option/index.css +4 -4
  19. package/modern/typings-5e1b8383.d.ts +15 -4
  20. package/option/Component.js +1 -1
  21. package/option/index.css +4 -4
  22. package/package.json +2 -2
  23. package/typings-5e1b8383.d.ts +15 -4
package/Component.js CHANGED
@@ -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_17ruf","optionsPopover":"picker-button__optionsPopover_17ruf","sideGap":"picker-button__sideGap_17ruf","option":"picker-button__option_17ruf"};
23
+ var styles = {"container":"picker-button__container_fi1r2","optionsPopover":"picker-button__optionsPopover_fi1r2","sideGap":"picker-button__sideGap_fi1r2","option":"picker-button__option_fi1r2"};
24
24
  require('./index.css')
25
25
 
26
26
  var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
package/cssm/typings-5e1b8383.d.ts CHANGED
@@ -254,6 +254,9 @@ type PopoverProps = {
254
254
  children?: ReactNode;
255
255
  };
256
256
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
257
+ type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
258
+ type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
259
+ type IconColorType = Extract<GraphicColorType, "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary">;
257
260
  type BadgeProps = {
258
261
  /**
259
262
  * Дополнительный класс
@@ -285,16 +288,24 @@ type BadgeProps = {
285
288
  */
286
289
  height?: number;
287
290
  /**
288
- * Цветовое оформление иконки
291
+ * Цветовое оформление бейджа при view='count'
289
292
  */
290
- iconColor?: "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary";
293
+ color?: Extract<BackgroundColorType, "accent" | "primary" | "specialbg-secondary-transparent">;
294
+ /**
295
+ * Цветовое оформление бейджа при view='icon'
296
+ */
297
+ iconColor?: IconColorType;
298
+ /**
299
+ * Цвет подложки под иконкой
300
+ */
301
+ iconUnderlayColor?: Extract<GraphicColorType, "primary" | "static-light">;
291
302
  /**
292
303
  * Идентификатор для систем автоматизированного тестирования
293
304
  */
294
305
  dataTestId?: string;
295
306
  };
296
307
  // eslint-disable-next-line complexity
297
- declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId }: BadgeProps) => JSX.Element;
308
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId }: BadgeProps) => JSX.Element;
298
309
  type FormControlProps = HTMLAttributes<HTMLDivElement> & {
299
310
  /**
300
311
  * Растягивает компонент на ширину контейнера
@@ -991,4 +1002,4 @@ type CheckmarkProps = {
991
1002
  */
992
1003
  icon?: FC<SVGProps<SVGSVGElement>>;
993
1004
  };
994
- export { InputProps, Input, Position, PopoverProps, Popover, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
1005
+ export { InputProps, Input, Position, PopoverProps, Popover, IconColorType, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
package/esm/Component.js CHANGED
@@ -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_17ruf","optionsPopover":"picker-button__optionsPopover_17ruf","sideGap":"picker-button__sideGap_17ruf","option":"picker-button__option_17ruf"};
14
+ var styles = {"container":"picker-button__container_fi1r2","optionsPopover":"picker-button__optionsPopover_fi1r2","sideGap":"picker-button__sideGap_fi1r2","option":"picker-button__option_fi1r2"};
15
15
  require('./index.css')
16
16
 
17
17
  var SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
package/esm/field/Component.js CHANGED
@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ChevronDownMIcon';
8
8
  import '@alfalab/icons-glyph/MoreMIcon';
9
9
  import '@alfalab/icons-glyph/MoreSIcon';
10
10
 
11
- var styles = {"iconContainer":"picker-button__iconContainer_1edkr","addonsContainer":"picker-button__addonsContainer_1edkr","showControlIcon":"picker-button__showControlIcon_1edkr","open":"picker-button__open_1edkr"};
11
+ var styles = {"iconContainer":"picker-button__iconContainer_7m9e7","addonsContainer":"picker-button__addonsContainer_7m9e7","showControlIcon":"picker-button__showControlIcon_7m9e7","open":"picker-button__open_7m9e7"};
12
12
  require('./index.css')
13
13
 
14
14
  var Field = function (_a) {
package/esm/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ice6h */
1
+ /* hash: 1u67g */
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
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1edkr {
19
+ } .picker-button__iconContainer_7m9e7 {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1edkr {
22
+ } .picker-button__addonsContainer_7m9e7 {
23
23
  display: flex
24
- } .picker-button__addonsContainer_1edkr.picker-button__showControlIcon_1edkr {
24
+ } .picker-button__addonsContainer_7m9e7.picker-button__showControlIcon_7m9e7 {
25
25
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1edkr {
26
+ } .picker-button__open_7m9e7 {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 5kq2a */
1
+ /* hash: 1t9sf */
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_17ruf {
19
+ } .picker-button__container_fi1r2 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_17ruf.picker-button__sideGap_17ruf {
21
+ } .cc-picker-button.picker-button__optionsPopover_fi1r2.picker-button__sideGap_fi1r2 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_17ruf {
23
+ } .cc-picker-button .picker-button__option_fi1r2 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_17ruf:before {
25
+ } .cc-picker-button .picker-button__option_fi1r2:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
package/esm/option/Component.js CHANGED
@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
2
2
  import React from 'react';
3
3
  import { Option as Option$1 } from '@alfalab/core-components-select/esm';
4
4
 
5
- var styles = {"container":"picker-button__container_u286n","icon":"picker-button__icon_u286n","content":"picker-button__content_u286n"};
5
+ var styles = {"container":"picker-button__container_1sfi5","icon":"picker-button__icon_1sfi5","content":"picker-button__content_1sfi5"};
6
6
  require('./index.css')
7
7
 
8
8
  var Option = function (_a) {
package/esm/option/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1vx21 */
1
+ /* hash: 1kl0c */
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_u286n {
18
+ } .picker-button__container_1sfi5 {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_u286n {
21
+ } .picker-button__icon_1sfi5 {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_u286n {
24
+ } .picker-button__content_1sfi5 {
25
25
  overflow: hidden;
26
26
  flex: 1;
27
27
  text-overflow: ellipsis;
package/esm/typings-5e1b8383.d.ts CHANGED
@@ -254,6 +254,9 @@ type PopoverProps = {
254
254
  children?: ReactNode;
255
255
  };
256
256
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
257
+ type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
258
+ type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
259
+ type IconColorType = Extract<GraphicColorType, "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary">;
257
260
  type BadgeProps = {
258
261
  /**
259
262
  * Дополнительный класс
@@ -285,16 +288,24 @@ type BadgeProps = {
285
288
  */
286
289
  height?: number;
287
290
  /**
288
- * Цветовое оформление иконки
291
+ * Цветовое оформление бейджа при view='count'
289
292
  */
290
- iconColor?: "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary";
293
+ color?: Extract<BackgroundColorType, "accent" | "primary" | "specialbg-secondary-transparent">;
294
+ /**
295
+ * Цветовое оформление бейджа при view='icon'
296
+ */
297
+ iconColor?: IconColorType;
298
+ /**
299
+ * Цвет подложки под иконкой
300
+ */
301
+ iconUnderlayColor?: Extract<GraphicColorType, "primary" | "static-light">;
291
302
  /**
292
303
  * Идентификатор для систем автоматизированного тестирования
293
304
  */
294
305
  dataTestId?: string;
295
306
  };
296
307
  // eslint-disable-next-line complexity
297
- declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId }: BadgeProps) => JSX.Element;
308
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId }: BadgeProps) => JSX.Element;
298
309
  type FormControlProps = HTMLAttributes<HTMLDivElement> & {
299
310
  /**
300
311
  * Растягивает компонент на ширину контейнера
@@ -991,4 +1002,4 @@ type CheckmarkProps = {
991
1002
  */
992
1003
  icon?: FC<SVGProps<SVGSVGElement>>;
993
1004
  };
994
- export { InputProps, Input, Position, PopoverProps, Popover, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
1005
+ export { InputProps, Input, Position, PopoverProps, Popover, IconColorType, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
package/field/Component.js CHANGED
@@ -17,7 +17,7 @@ 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_1edkr","addonsContainer":"picker-button__addonsContainer_1edkr","showControlIcon":"picker-button__showControlIcon_1edkr","open":"picker-button__open_1edkr"};
20
+ var styles = {"iconContainer":"picker-button__iconContainer_7m9e7","addonsContainer":"picker-button__addonsContainer_7m9e7","showControlIcon":"picker-button__showControlIcon_7m9e7","open":"picker-button__open_7m9e7"};
21
21
  require('./index.css')
22
22
 
23
23
  var Field = function (_a) {
package/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ice6h */
1
+ /* hash: 1u67g */
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
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1edkr {
19
+ } .picker-button__iconContainer_7m9e7 {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1edkr {
22
+ } .picker-button__addonsContainer_7m9e7 {
23
23
  display: flex
24
- } .picker-button__addonsContainer_1edkr.picker-button__showControlIcon_1edkr {
24
+ } .picker-button__addonsContainer_7m9e7.picker-button__showControlIcon_7m9e7 {
25
25
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1edkr {
26
+ } .picker-button__open_7m9e7 {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 5kq2a */
1
+ /* hash: 1t9sf */
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_17ruf {
19
+ } .picker-button__container_fi1r2 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_17ruf.picker-button__sideGap_17ruf {
21
+ } .cc-picker-button.picker-button__optionsPopover_fi1r2.picker-button__sideGap_fi1r2 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_17ruf {
23
+ } .cc-picker-button .picker-button__option_fi1r2 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_17ruf:before {
25
+ } .cc-picker-button .picker-button__option_fi1r2:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
package/modern/Component.js CHANGED
@@ -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_17ruf","optionsPopover":"picker-button__optionsPopover_17ruf","sideGap":"picker-button__sideGap_17ruf","option":"picker-button__option_17ruf"};
13
+ const styles = {"container":"picker-button__container_fi1r2","optionsPopover":"picker-button__optionsPopover_fi1r2","sideGap":"picker-button__sideGap_fi1r2","option":"picker-button__option_fi1r2"};
14
14
  require('./index.css')
15
15
 
16
16
  const SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
package/modern/field/Component.js CHANGED
@@ -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_1edkr","addonsContainer":"picker-button__addonsContainer_1edkr","showControlIcon":"picker-button__showControlIcon_1edkr","open":"picker-button__open_1edkr"};
10
+ const styles = {"iconContainer":"picker-button__iconContainer_7m9e7","addonsContainer":"picker-button__addonsContainer_7m9e7","showControlIcon":"picker-button__showControlIcon_7m9e7","open":"picker-button__open_7m9e7"};
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 }) => {
package/modern/field/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ice6h */
1
+ /* hash: 1u67g */
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
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .picker-button__iconContainer_1edkr {
19
+ } .picker-button__iconContainer_7m9e7 {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .picker-button__addonsContainer_1edkr {
22
+ } .picker-button__addonsContainer_7m9e7 {
23
23
  display: flex
24
- } .picker-button__addonsContainer_1edkr.picker-button__showControlIcon_1edkr {
24
+ } .picker-button__addonsContainer_7m9e7.picker-button__showControlIcon_7m9e7 {
25
25
  margin-right: var(--gap-2xs);
26
- } .picker-button__open_1edkr {
26
+ } .picker-button__open_7m9e7 {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 5kq2a */
1
+ /* hash: 1t9sf */
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_17ruf {
19
+ } .picker-button__container_fi1r2 {
20
20
  min-width: auto;
21
- } .cc-picker-button.picker-button__optionsPopover_17ruf.picker-button__sideGap_17ruf {
21
+ } .cc-picker-button.picker-button__optionsPopover_fi1r2.picker-button__sideGap_fi1r2 {
22
22
  padding: 0 var(--gap-xs);
23
- } .cc-picker-button .picker-button__option_17ruf {
23
+ } .cc-picker-button .picker-button__option_fi1r2 {
24
24
  padding: 0 var(--gap-m)
25
- } .cc-picker-button .picker-button__option_17ruf:before {
25
+ } .cc-picker-button .picker-button__option_fi1r2:before {
26
26
  /* Удаляем разделители у опций выпадающего списка. */
27
27
  display: none;
28
28
  }
package/modern/option/Component.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Option as Option$1 } from '@alfalab/core-components-select/modern';
3
3
 
4
- const styles = {"container":"picker-button__container_u286n","icon":"picker-button__icon_u286n","content":"picker-button__content_u286n"};
4
+ const styles = {"container":"picker-button__container_1sfi5","icon":"picker-button__icon_1sfi5","content":"picker-button__content_1sfi5"};
5
5
  require('./index.css')
6
6
 
7
7
  const Option = ({ option, children, ...restProps }) => {
package/modern/option/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1vx21 */
1
+ /* hash: 1kl0c */
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_u286n {
18
+ } .picker-button__container_1sfi5 {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_u286n {
21
+ } .picker-button__icon_1sfi5 {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_u286n {
24
+ } .picker-button__content_1sfi5 {
25
25
  overflow: hidden;
26
26
  flex: 1;
27
27
  text-overflow: ellipsis;
package/modern/typings-5e1b8383.d.ts CHANGED
@@ -254,6 +254,9 @@ type PopoverProps = {
254
254
  children?: ReactNode;
255
255
  };
256
256
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
257
+ type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
258
+ type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
259
+ type IconColorType = Extract<GraphicColorType, "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary">;
257
260
  type BadgeProps = {
258
261
  /**
259
262
  * Дополнительный класс
@@ -285,16 +288,24 @@ type BadgeProps = {
285
288
  */
286
289
  height?: number;
287
290
  /**
288
- * Цветовое оформление иконки
291
+ * Цветовое оформление бейджа при view='count'
289
292
  */
290
- iconColor?: "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary";
293
+ color?: Extract<BackgroundColorType, "accent" | "primary" | "specialbg-secondary-transparent">;
294
+ /**
295
+ * Цветовое оформление бейджа при view='icon'
296
+ */
297
+ iconColor?: IconColorType;
298
+ /**
299
+ * Цвет подложки под иконкой
300
+ */
301
+ iconUnderlayColor?: Extract<GraphicColorType, "primary" | "static-light">;
291
302
  /**
292
303
  * Идентификатор для систем автоматизированного тестирования
293
304
  */
294
305
  dataTestId?: string;
295
306
  };
296
307
  // eslint-disable-next-line complexity
297
- declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId }: BadgeProps) => JSX.Element;
308
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId }: BadgeProps) => JSX.Element;
298
309
  type FormControlProps = HTMLAttributes<HTMLDivElement> & {
299
310
  /**
300
311
  * Растягивает компонент на ширину контейнера
@@ -991,4 +1002,4 @@ type CheckmarkProps = {
991
1002
  */
992
1003
  icon?: FC<SVGProps<SVGSVGElement>>;
993
1004
  };
994
- export { InputProps, Input, Position, PopoverProps, Popover, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
1005
+ export { InputProps, Input, Position, PopoverProps, Popover, IconColorType, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
package/option/Component.js CHANGED
@@ -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_u286n","icon":"picker-button__icon_u286n","content":"picker-button__content_u286n"};
13
+ var styles = {"container":"picker-button__container_1sfi5","icon":"picker-button__icon_1sfi5","content":"picker-button__content_1sfi5"};
14
14
  require('./index.css')
15
15
 
16
16
  var Option = function (_a) {
package/option/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1vx21 */
1
+ /* hash: 1kl0c */
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_u286n {
18
+ } .picker-button__container_1sfi5 {
19
19
  display: flex;
20
20
  align-items: center;
21
- } .picker-button__icon_u286n {
21
+ } .picker-button__icon_1sfi5 {
22
22
  display: flex;
23
23
  margin-right: var(--gap-s);
24
- } .picker-button__content_u286n {
24
+ } .picker-button__content_1sfi5 {
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": "10.3.17",
3
+ "version": "10.3.18",
4
4
  "description": "Picker button component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -19,7 +19,7 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@alfalab/core-components-button": "^8.0.0",
22
- "@alfalab/core-components-select": "^14.0.1",
22
+ "@alfalab/core-components-select": "^14.0.2",
23
23
  "@alfalab/icons-classic": "^2.3.0",
24
24
  "@alfalab/icons-glyph": "^2.89.0",
25
25
  "classnames": "^2.3.1",
package/typings-5e1b8383.d.ts CHANGED
@@ -254,6 +254,9 @@ type PopoverProps = {
254
254
  children?: ReactNode;
255
255
  };
256
256
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
257
+ type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
258
+ type GraphicColorType = "accent" | "link" | "attention" | "positive" | "negative" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "static-light" | "static-accent" | "static-dark";
259
+ type IconColorType = Extract<GraphicColorType, "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary">;
257
260
  type BadgeProps = {
258
261
  /**
259
262
  * Дополнительный класс
@@ -285,16 +288,24 @@ type BadgeProps = {
285
288
  */
286
289
  height?: number;
287
290
  /**
288
- * Цветовое оформление иконки
291
+ * Цветовое оформление бейджа при view='count'
289
292
  */
290
- iconColor?: "positive" | "attention" | "link" | "negative" | "tertiary" | "secondary" | "primary";
293
+ color?: Extract<BackgroundColorType, "accent" | "primary" | "specialbg-secondary-transparent">;
294
+ /**
295
+ * Цветовое оформление бейджа при view='icon'
296
+ */
297
+ iconColor?: IconColorType;
298
+ /**
299
+ * Цвет подложки под иконкой
300
+ */
301
+ iconUnderlayColor?: Extract<GraphicColorType, "primary" | "static-light">;
291
302
  /**
292
303
  * Идентификатор для систем автоматизированного тестирования
293
304
  */
294
305
  dataTestId?: string;
295
306
  };
296
307
  // eslint-disable-next-line complexity
297
- declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, dataTestId }: BadgeProps) => JSX.Element;
308
+ declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId }: BadgeProps) => JSX.Element;
298
309
  type FormControlProps = HTMLAttributes<HTMLDivElement> & {
299
310
  /**
300
311
  * Растягивает компонент на ширину контейнера
@@ -991,4 +1002,4 @@ type CheckmarkProps = {
991
1002
  */
992
1003
  icon?: FC<SVGProps<SVGSVGElement>>;
993
1004
  };
994
- export { InputProps, Input, Position, PopoverProps, Popover, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
1005
+ export { InputProps, Input, Position, PopoverProps, Popover, IconColorType, BadgeProps, Badge, FormControlProps, FormControl, PortalProps, Portal, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };