@vibe/core 3.18.0-alpha-a3fe2.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/components/Avatar/Avatar.types.d.ts +1 -1
  2. package/dist/components/Avatar/AvatarConstants.d.ts +1 -0
  3. package/dist/components/Counter/Counter.types.d.ts +1 -1
  4. package/dist/components/Counter/CounterConstants.d.ts +1 -0
  5. package/dist/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.d.ts +4 -0
  6. package/dist/components/Modal/Modal/Modal.types.d.ts +0 -24
  7. package/dist/components/Modal/context/ModalContext.types.d.ts +0 -4
  8. package/dist/components/Slider/Slider.d.ts +9 -1
  9. package/dist/components/Slider/Slider.types.d.ts +4 -0
  10. package/dist/components/Slider/SliderConstants.d.ts +3 -1
  11. package/dist/components/Slider/SliderContext.d.ts +1 -1
  12. package/dist/mocked_classnames/components/Avatar/Avatar.types.d.ts +1 -1
  13. package/dist/mocked_classnames/components/Avatar/AvatarConstants.d.ts +1 -0
  14. package/dist/mocked_classnames/components/Counter/Counter.types.d.ts +1 -1
  15. package/dist/mocked_classnames/components/Counter/CounterConstants.d.ts +1 -0
  16. package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.d.ts +4 -0
  17. package/dist/mocked_classnames/components/Modal/Modal/Modal.types.d.ts +0 -24
  18. package/dist/mocked_classnames/components/Modal/context/ModalContext.types.d.ts +0 -4
  19. package/dist/mocked_classnames/components/Slider/Slider.d.ts +9 -1
  20. package/dist/mocked_classnames/components/Slider/Slider.types.d.ts +4 -0
  21. package/dist/mocked_classnames/components/Slider/SliderConstants.d.ts +3 -1
  22. package/dist/mocked_classnames/components/Slider/SliderContext.d.ts +1 -1
  23. package/dist/mocked_classnames/src/components/Avatar/Avatar.module.scss.js +1 -1
  24. package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  25. package/dist/mocked_classnames/src/components/Avatar/AvatarConstants.js +1 -1
  26. package/dist/mocked_classnames/src/components/Avatar/AvatarConstants.js.map +1 -1
  27. package/dist/mocked_classnames/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  28. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
  29. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
  30. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  31. package/dist/mocked_classnames/src/components/Counter/Counter.module.scss.js +1 -1
  32. package/dist/mocked_classnames/src/components/Counter/CounterConstants.js +1 -1
  33. package/dist/mocked_classnames/src/components/Counter/CounterConstants.js.map +1 -1
  34. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js +1 -1
  35. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js.map +1 -1
  36. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss.js +1 -1
  37. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
  38. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
  39. package/dist/mocked_classnames/src/components/Modal/ModalContent/ModalContent.js +1 -1
  40. package/dist/mocked_classnames/src/components/Modal/ModalContent/ModalContent.js.map +1 -1
  41. package/dist/mocked_classnames/src/components/Slider/Slider.js +1 -1
  42. package/dist/mocked_classnames/src/components/Slider/Slider.js.map +1 -1
  43. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js +1 -1
  44. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
  45. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  46. package/dist/mocked_classnames/src/components/Slider/SliderConstants.js.map +1 -1
  47. package/dist/mocked_classnames/src/components/Slider/SliderContext.js +1 -1
  48. package/dist/mocked_classnames/src/components/Slider/SliderContext.js.map +1 -1
  49. package/dist/src/components/Avatar/Avatar.module.scss.js +1 -1
  50. package/dist/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  51. package/dist/src/components/Avatar/AvatarConstants.js +1 -1
  52. package/dist/src/components/Avatar/AvatarConstants.js.map +1 -1
  53. package/dist/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  54. package/dist/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
  55. package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
  56. package/dist/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  57. package/dist/src/components/Counter/Counter.module.scss.js +1 -1
  58. package/dist/src/components/Counter/CounterConstants.js +1 -1
  59. package/dist/src/components/Counter/CounterConstants.js.map +1 -1
  60. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js +1 -1
  61. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js.map +1 -1
  62. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss.js +1 -1
  63. package/dist/src/components/Modal/Modal/Modal.js +1 -1
  64. package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
  65. package/dist/src/components/Modal/ModalContent/ModalContent.js +1 -1
  66. package/dist/src/components/Modal/ModalContent/ModalContent.js.map +1 -1
  67. package/dist/src/components/Slider/Slider.js +1 -1
  68. package/dist/src/components/Slider/Slider.js.map +1 -1
  69. package/dist/src/components/Slider/SliderBase/SliderThumb.js +1 -1
  70. package/dist/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
  71. package/dist/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  72. package/dist/src/components/Slider/SliderConstants.js.map +1 -1
  73. package/dist/src/components/Slider/SliderContext.js +1 -1
  74. package/dist/src/components/Slider/SliderContext.js.map +1 -1
  75. package/package.json +3 -3
@@ -1,2 +1,2 @@
1
1
  export type AvatarType = "img" | "icon" | "text";
2
- export type AvatarSize = "small" | "medium" | "large";
2
+ export type AvatarSize = "xs" | "small" | "medium" | "large";
@@ -10,6 +10,7 @@ export declare enum AvatarType {
10
10
  * @deprecated
11
11
  */
12
12
  export declare enum AvatarSize {
13
+ XS = "xs",
13
14
  SMALL = "small",
14
15
  MEDIUM = "medium",
15
16
  LARGE = "large"
@@ -1,3 +1,3 @@
1
1
  export type CounterType = "fill" | "line";
2
2
  export type CounterColor = "primary" | "dark" | "negative" | "light";
3
- export type CounterSize = "small" | "large";
3
+ export type CounterSize = "xs" | "small" | "large";
@@ -18,6 +18,7 @@ export declare enum CounterColor {
18
18
  * @deprecated
19
19
  */
20
20
  export declare enum CounterSize {
21
+ XS = "xs",
21
22
  SMALL = "small",
22
23
  LARGE = "large"
23
24
  }
@@ -19,5 +19,9 @@ export interface SimpleMenuItemSubMenuIconProps {
19
19
  * Label for the submenu icon, used for accessibility.
20
20
  */
21
21
  label?: string;
22
+ /**
23
+ * Whether the split submenu icon is disabled.
24
+ */
25
+ disabled?: boolean;
22
26
  }
23
27
  export type MenuItemSubMenuIconProps = SimpleMenuItemSubMenuIconProps | SplitMenuItemSubMenuIconProps;
@@ -29,30 +29,6 @@ export interface ModalProps extends VibeComponentProps {
29
29
  * Callback fired when the modal should close.
30
30
  */
31
31
  onClose?: (event: ModalCloseEvent) => void;
32
- /**
33
- * This is intended for advanced use-cases.
34
- * It allows you to control the default focus behavior when the modal mounts.
35
- * Make sure to use this prop only when you understand the implications.
36
- *
37
- * Determines if focus should automatically move to the first focusable element when the component mounts.
38
- * When set to `false` - disables the automatic focus behavior.
39
- * - Notice this might break keyboard and general accessibility and should be used with caution.
40
- */
41
- autoFocus?: boolean;
42
- /**
43
- * This is intended for advanced use-cases.
44
- * It allows you to control the focus behavior when moving between elements within the modal.
45
- * Make sure to use this prop only when you understand the implications.
46
- *
47
- * Called whenever focus is about to move to a new element within the modal.
48
- * Return:
49
- * - `true` to allow normal flow focus.
50
- * - `false` to block it (let the browser decide, usually moves to body).
51
- * - Notice this might break keyboard accessibility and should be used with caution.
52
- * - An HTMLElement to redirect focus to instead of normal flow.
53
- * - Any other value (e.g., null, undefined) would act as `false`.
54
- */
55
- onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
56
32
  /**
57
33
  * Additional action to render in the header area.
58
34
  */
@@ -14,10 +14,6 @@ export type ModalProviderValue = {
14
14
  * Callback to set the description element ID for accessibility.
15
15
  */
16
16
  setDescriptionId: (id: string) => void;
17
- /**
18
- * Passed from the Modal component, `true` by default, `false` if set by user.
19
- */
20
- autoFocus?: boolean;
21
17
  };
22
18
  export interface ModalProviderProps {
23
19
  /**
@@ -1,7 +1,7 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { IconType } from "../Icon";
3
3
  import { SliderColor as SliderColorEnum } from "./SliderConstants";
4
- import { SliderColor, SliderSize } from "./Slider.types";
4
+ import { SliderColor, SliderLabelColor, SliderLabelPosition, SliderSize } from "./Slider.types";
5
5
  export type SliderProps = {
6
6
  /**
7
7
  * Define a string that labels the current element (Slider)
@@ -65,6 +65,14 @@ export type SliderProps = {
65
65
  * Always show `value` instead of Tooltip
66
66
  */
67
67
  showValue?: boolean;
68
+ /**
69
+ * Position of the `value` when `showValue` is true
70
+ */
71
+ valueLabelPosition?: SliderLabelPosition;
72
+ /**
73
+ * Color of the `value` when `showValue` is true
74
+ */
75
+ valueLabelColor?: SliderLabelColor;
68
76
  /**
69
77
  * Size small/medium/large of the component (Slider)
70
78
  */
@@ -1,4 +1,8 @@
1
1
  import { BASE_SIZES } from "../../constants";
2
+ import { DialogPosition } from "../Dialog";
3
+ import { TypographyColor } from "../Typography";
2
4
  export type SliderColor = "primary" | "negative" | "positive";
5
+ export type SliderLabelColor = Extract<TypographyColor, "primary" | "secondary">;
6
+ export type SliderLabelPosition = Extract<DialogPosition, "top" | "bottom">;
3
7
  export type SliderSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
4
8
  export type InfixKind = "prefix" | "postfix";
@@ -1,6 +1,6 @@
1
1
  import { IconType } from "../Icon";
2
2
  import { ReactElement } from "react";
3
- import { SliderSize, SliderColor as SliderColorType } from "./Slider.types";
3
+ import { SliderSize, SliderColor as SliderColorType, SliderLabelPosition, SliderLabelColor } from "./Slider.types";
4
4
  export declare const BEM_PREFIX = "monday";
5
5
  export declare const COMPONENT_ID = "slider";
6
6
  export declare const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;
@@ -39,6 +39,8 @@ export type SliderContextUI = {
39
39
  size: SliderSize;
40
40
  shapeTestId: (subElement: string) => string;
41
41
  showValue: boolean;
42
+ valueLabelPosition: SliderLabelPosition;
43
+ valueLabelColor: SliderLabelColor;
42
44
  };
43
45
  export type SliderContextActions = {
44
46
  setActive: (value: number) => void;
@@ -31,7 +31,7 @@ export interface SliderProviderProps extends SliderProps {
31
31
  selectionIndicatorWidth?: string;
32
32
  };
33
33
  }
34
- export declare function SliderProvider({ children, ariaLabel, ariaLabelledby, color, "data-testid": dataTestId, defaultValue, disabled, max, min, onChange, ranged, showValue, size, step, value, valueFormatter, valueText, infixOptions }: SliderProviderProps): React.JSX.Element;
34
+ export declare function SliderProvider({ children, ariaLabel, ariaLabelledby, color, "data-testid": dataTestId, defaultValue, disabled, max, min, onChange, ranged, showValue, valueLabelPosition, valueLabelColor, size, step, value, valueFormatter, valueText, infixOptions }: SliderProviderProps): React.JSX.Element;
35
35
  export declare function useSliderUi(): SliderContextUI;
36
36
  export declare function useSliderInfix(): SliderContextInfix;
37
37
  export declare function useSliderSelection(): SliderContextSelection;
@@ -1,2 +1,2 @@
1
1
  export type AvatarType = "img" | "icon" | "text";
2
- export type AvatarSize = "small" | "medium" | "large";
2
+ export type AvatarSize = "xs" | "small" | "medium" | "large";
@@ -10,6 +10,7 @@ export declare enum AvatarType {
10
10
  * @deprecated
11
11
  */
12
12
  export declare enum AvatarSize {
13
+ XS = "xs",
13
14
  SMALL = "small",
14
15
  MEDIUM = "medium",
15
16
  LARGE = "large"
@@ -1,3 +1,3 @@
1
1
  export type CounterType = "fill" | "line";
2
2
  export type CounterColor = "primary" | "dark" | "negative" | "light";
3
- export type CounterSize = "small" | "large";
3
+ export type CounterSize = "xs" | "small" | "large";
@@ -18,6 +18,7 @@ export declare enum CounterColor {
18
18
  * @deprecated
19
19
  */
20
20
  export declare enum CounterSize {
21
+ XS = "xs",
21
22
  SMALL = "small",
22
23
  LARGE = "large"
23
24
  }
@@ -19,5 +19,9 @@ export interface SimpleMenuItemSubMenuIconProps {
19
19
  * Label for the submenu icon, used for accessibility.
20
20
  */
21
21
  label?: string;
22
+ /**
23
+ * Whether the split submenu icon is disabled.
24
+ */
25
+ disabled?: boolean;
22
26
  }
23
27
  export type MenuItemSubMenuIconProps = SimpleMenuItemSubMenuIconProps | SplitMenuItemSubMenuIconProps;
@@ -29,30 +29,6 @@ export interface ModalProps extends VibeComponentProps {
29
29
  * Callback fired when the modal should close.
30
30
  */
31
31
  onClose?: (event: ModalCloseEvent) => void;
32
- /**
33
- * This is intended for advanced use-cases.
34
- * It allows you to control the default focus behavior when the modal mounts.
35
- * Make sure to use this prop only when you understand the implications.
36
- *
37
- * Determines if focus should automatically move to the first focusable element when the component mounts.
38
- * When set to `false` - disables the automatic focus behavior.
39
- * - Notice this might break keyboard and general accessibility and should be used with caution.
40
- */
41
- autoFocus?: boolean;
42
- /**
43
- * This is intended for advanced use-cases.
44
- * It allows you to control the focus behavior when moving between elements within the modal.
45
- * Make sure to use this prop only when you understand the implications.
46
- *
47
- * Called whenever focus is about to move to a new element within the modal.
48
- * Return:
49
- * - `true` to allow normal flow focus.
50
- * - `false` to block it (let the browser decide, usually moves to body).
51
- * - Notice this might break keyboard accessibility and should be used with caution.
52
- * - An HTMLElement to redirect focus to instead of normal flow.
53
- * - Any other value (e.g., null, undefined) would act as `false`.
54
- */
55
- onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
56
32
  /**
57
33
  * Additional action to render in the header area.
58
34
  */
@@ -14,10 +14,6 @@ export type ModalProviderValue = {
14
14
  * Callback to set the description element ID for accessibility.
15
15
  */
16
16
  setDescriptionId: (id: string) => void;
17
- /**
18
- * Passed from the Modal component, `true` by default, `false` if set by user.
19
- */
20
- autoFocus?: boolean;
21
17
  };
22
18
  export interface ModalProviderProps {
23
19
  /**
@@ -1,7 +1,7 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { IconType } from "../Icon";
3
3
  import { SliderColor as SliderColorEnum } from "./SliderConstants";
4
- import { SliderColor, SliderSize } from "./Slider.types";
4
+ import { SliderColor, SliderLabelColor, SliderLabelPosition, SliderSize } from "./Slider.types";
5
5
  export type SliderProps = {
6
6
  /**
7
7
  * Define a string that labels the current element (Slider)
@@ -65,6 +65,14 @@ export type SliderProps = {
65
65
  * Always show `value` instead of Tooltip
66
66
  */
67
67
  showValue?: boolean;
68
+ /**
69
+ * Position of the `value` when `showValue` is true
70
+ */
71
+ valueLabelPosition?: SliderLabelPosition;
72
+ /**
73
+ * Color of the `value` when `showValue` is true
74
+ */
75
+ valueLabelColor?: SliderLabelColor;
68
76
  /**
69
77
  * Size small/medium/large of the component (Slider)
70
78
  */
@@ -1,4 +1,8 @@
1
1
  import { BASE_SIZES } from "../../constants";
2
+ import { DialogPosition } from "../Dialog";
3
+ import { TypographyColor } from "../Typography";
2
4
  export type SliderColor = "primary" | "negative" | "positive";
5
+ export type SliderLabelColor = Extract<TypographyColor, "primary" | "secondary">;
6
+ export type SliderLabelPosition = Extract<DialogPosition, "top" | "bottom">;
3
7
  export type SliderSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
4
8
  export type InfixKind = "prefix" | "postfix";
@@ -1,6 +1,6 @@
1
1
  import { IconType } from "../Icon";
2
2
  import { ReactElement } from "react";
3
- import { SliderSize, SliderColor as SliderColorType } from "./Slider.types";
3
+ import { SliderSize, SliderColor as SliderColorType, SliderLabelPosition, SliderLabelColor } from "./Slider.types";
4
4
  export declare const BEM_PREFIX = "monday";
5
5
  export declare const COMPONENT_ID = "slider";
6
6
  export declare const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;
@@ -39,6 +39,8 @@ export type SliderContextUI = {
39
39
  size: SliderSize;
40
40
  shapeTestId: (subElement: string) => string;
41
41
  showValue: boolean;
42
+ valueLabelPosition: SliderLabelPosition;
43
+ valueLabelColor: SliderLabelColor;
42
44
  };
43
45
  export type SliderContextActions = {
44
46
  setActive: (value: number) => void;
@@ -31,7 +31,7 @@ export interface SliderProviderProps extends SliderProps {
31
31
  selectionIndicatorWidth?: string;
32
32
  };
33
33
  }
34
- export declare function SliderProvider({ children, ariaLabel, ariaLabelledby, color, "data-testid": dataTestId, defaultValue, disabled, max, min, onChange, ranged, showValue, size, step, value, valueFormatter, valueText, infixOptions }: SliderProviderProps): React.JSX.Element;
34
+ export declare function SliderProvider({ children, ariaLabel, ariaLabelledby, color, "data-testid": dataTestId, defaultValue, disabled, max, min, onChange, ranged, showValue, valueLabelPosition, valueLabelColor, size, step, value, valueFormatter, valueText, infixOptions }: SliderProviderProps): React.JSX.Element;
35
35
  export declare function useSliderUi(): SliderContextUI;
36
36
  export declare function useSliderInfix(): SliderContextInfix;
37
37
  export declare function useSliderSelection(): SliderContextSelection;
@@ -1,2 +1,2 @@
1
- var n={avatar:"avatar",large:"large",medium:"medium",small:"small",clickableWrapper:"clickableWrapper",circle:"circle","focus-visible":"focus-visible",circleImg:"circleImg",circleText:"circleText",disabled:"disabled",square:"square",withoutBorder:"withoutBorder",badges:"badges",badge:"badge",badgeTopLeft:"badgeTopLeft",badgeTopRight:"badgeTopRight",badgeBottomLeft:"badgeBottomLeft",badgeBottomRight:"badgeBottomRight"};!function(n){const e="s_id-929eed46119e_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('.avatar {\n position: relative;\n}\n\n.large {\n height: 50px;\n width: 50px;\n}\n\n.medium {\n height: 32px;\n width: 32px;\n}\n\n.small {\n height: 28px;\n width: 28px;\n}\n\n.clickableWrapper {\n height: 100%;\n width: 100%;\n}\n\n.circle {\n height: 100%;\n width: 100%;\n position: relative;\n border: 1px solid;\n border-radius: 50%;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--text-color-on-primary);\n}\n\n.circle:focus {\n outline: none;\n}\n\n.circle:focus:focus-visible, .circle:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.circle:focus:focus:not(.focus-visible) {\n outline: none;\n}\n\n.circleImg {\n border-color: var(--primary-background-color);\n}\n\n.circleText {\n border-color: var(--layout-border-color);\n}\n\n.disabled:before {\n content: "";\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n opacity: 0.7;\n background: var(--primary-background-color);\n}\n\n.square {\n border-radius: var(--border-radius-small);\n}\n\n.square:focus {\n outline: none;\n}\n\n.square:focus:focus-visible, .square:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: var(--border-radius-small);\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.square:focus:focus:not(.focus-visible) {\n outline: none;\n}\n\n.withoutBorder {\n border: none;\n}\n\n.badges {\n position: absolute;\n top: 50%;\n left: 50%; /* position the left edge of the element at the middle of the parent */\n transform: translate(-50%, -50%);\n display: grid;\n grid-template-columns: 50% 50%;\n margin-left: auto;\n margin-right: auto;\n height: 110%;\n width: 110%;\n}\n\n.badges .badge {\n display: flex;\n}\n\n.badges .badgeTopLeft {\n grid-row: 1;\n grid-column: 1;\n justify-self: start;\n}\n\n.badges .badgeTopRight {\n grid-row: 1;\n grid-column: 2;\n justify-self: end;\n}\n\n.badges .badgeBottomLeft {\n grid-row: 2;\n grid-column: 1;\n justify-self: start;\n align-self: end;\n}\n\n.badges .badgeBottomRight {\n grid-row: 2;\n grid-column: 2;\n justify-self: end;\n align-self: end;\n}');export{n as default};
1
+ var n={avatar:"avatar",large:"large",medium:"medium",small:"small",xs:"xs",clickableWrapper:"clickableWrapper",circle:"circle","focus-visible":"focus-visible",circleImg:"circleImg",circleText:"circleText",disabled:"disabled",square:"square",withoutBorder:"withoutBorder",badges:"badges",badge:"badge",badgeTopLeft:"badgeTopLeft",badgeTopRight:"badgeTopRight",badgeBottomLeft:"badgeBottomLeft",badgeBottomRight:"badgeBottomRight"};!function(n){const e="s_id-dccf983c2f60_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('.avatar {\n position: relative;\n}\n\n.large {\n height: 50px;\n width: 50px;\n}\n\n.medium {\n height: 32px;\n width: 32px;\n}\n\n.small {\n height: 28px;\n width: 28px;\n}\n\n.xs {\n height: 20px;\n width: 20px;\n}\n\n.clickableWrapper {\n height: 100%;\n width: 100%;\n}\n\n.circle {\n height: 100%;\n width: 100%;\n position: relative;\n border: 1px solid;\n border-radius: 50%;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--text-color-on-primary);\n}\n\n.circle:focus {\n outline: none;\n}\n\n.circle:focus:focus-visible, .circle:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.circle:focus:focus:not(.focus-visible) {\n outline: none;\n}\n\n.circleImg {\n border-color: var(--primary-background-color);\n}\n\n.circleText {\n border-color: var(--layout-border-color);\n}\n\n.disabled:before {\n content: "";\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n opacity: 0.7;\n background: var(--primary-background-color);\n}\n\n.square {\n border-radius: var(--border-radius-small);\n}\n\n.square:focus {\n outline: none;\n}\n\n.square:focus:focus-visible, .square:focus.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: var(--border-radius-small);\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.square:focus:focus:not(.focus-visible) {\n outline: none;\n}\n\n.withoutBorder {\n border: none;\n}\n\n.badges {\n position: absolute;\n top: 50%;\n left: 50%; /* position the left edge of the element at the middle of the parent */\n transform: translate(-50%, -50%);\n display: grid;\n grid-template-columns: 50% 50%;\n margin-left: auto;\n margin-right: auto;\n height: 110%;\n width: 110%;\n}\n\n.badges .badge {\n display: flex;\n}\n\n.badges .badgeTopLeft {\n grid-row: 1;\n grid-column: 1;\n justify-self: start;\n}\n\n.badges .badgeTopRight {\n grid-row: 1;\n grid-column: 2;\n justify-self: end;\n}\n\n.badges .badgeBottomLeft {\n grid-row: 2;\n grid-column: 1;\n justify-self: start;\n align-self: end;\n}\n\n.badges .badgeBottomRight {\n grid-row: 2;\n grid-column: 2;\n justify-self: end;\n align-self: end;\n}');export{n as default};
2
2
  //# sourceMappingURL=Avatar.module.scss.js.map
@@ -1,2 +1,2 @@
1
- var e={badgeLarge:"badgeLarge",badgeMedium:"badgeMedium",badgeSmall:"badgeSmall"};!function(e){const d="s_id-86fd2091f40c_3_17_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge {\n height: 19px;\n width: 19px;\n}\n\n.badgeMedium {\n height: 13px;\n width: 13px;\n}\n\n.badgeSmall {\n height: 10px;\n width: 10px;\n}");export{e as default};
1
+ var e={badgeLarge:"badgeLarge",badgeMedium:"badgeMedium",badgeSmall:"badgeSmall",badgeXs:"badgeXs"};!function(e){const d="s_id-e545a08d61b0_3_17_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+d))return;const t=document.createElement("style");t.id=d,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge {\n height: 19px;\n width: 19px;\n}\n\n.badgeMedium {\n height: 13px;\n width: 13px;\n}\n\n.badgeSmall,\n.badgeXs {\n height: 10px;\n width: 10px;\n}");export{e as default};
2
2
  //# sourceMappingURL=AvatarBadge.module.scss.js.map
@@ -1,2 +1,2 @@
1
- var i,n;!function(i){i.IMG="img",i.ICON="icon",i.TEXT="text"}(i||(i={})),function(i){i.SMALL="small",i.MEDIUM="medium",i.LARGE="large"}(n||(n={}));export{n as AvatarSize,i as AvatarType};
1
+ var i,n;!function(i){i.IMG="img",i.ICON="icon",i.TEXT="text"}(i||(i={})),function(i){i.XS="xs",i.SMALL="small",i.MEDIUM="medium",i.LARGE="large"}(n||(n={}));export{n as AvatarSize,i as AvatarType};
2
2
  //# sourceMappingURL=AvatarConstants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarConstants.js","sources":["../../../../../src/components/Avatar/AvatarConstants.tsx"],"sourcesContent":["/**\n * @deprecated\n */\nexport enum AvatarType {\n IMG = \"img\",\n ICON = \"icon\",\n TEXT = \"text\"\n}\n\n/**\n * @deprecated\n */\nexport enum AvatarSize {\n SMALL = \"small\",\n MEDIUM = \"medium\",\n LARGE = \"large\"\n}\n"],"names":["AvatarType","AvatarSize"],"mappings":"IAGYA,EASAC,GATZ,SAAYD,GACVA,EAAA,IAAA,MACAA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAKD,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
1
+ {"version":3,"file":"AvatarConstants.js","sources":["../../../../../src/components/Avatar/AvatarConstants.tsx"],"sourcesContent":["/**\n * @deprecated\n */\nexport enum AvatarType {\n IMG = \"img\",\n ICON = \"icon\",\n TEXT = \"text\"\n}\n\n/**\n * @deprecated\n */\nexport enum AvatarSize {\n XS = \"xs\",\n SMALL = \"small\",\n MEDIUM = \"medium\",\n LARGE = \"large\"\n}\n"],"names":["AvatarType","AvatarSize"],"mappings":"IAGYA,EASAC,GATZ,SAAYD,GACVA,EAAA,IAAA,MACAA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAKD,SAAYC,GACVA,EAAA,GAAA,KACAA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CALD,CAAYA,IAAAA,EAKX,CAAA"}
@@ -1,2 +1,2 @@
1
- var n={contentImg:"contentImg",contentText:"contentText",contentTextLarge:"contentTextLarge",contentTextMedium:"contentTextMedium",contentTextSmall:"contentTextSmall",contentIconLarge:"contentIconLarge",contentIconMedium:"contentIconMedium",contentIconSmall:"contentIconSmall"};!function(n){const t="s_id-dcc3109ac00f_3_17_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".contentImg {\n object-fit: cover;\n width: 100%;\n height: 100%;\n}\n\n.contentText {\n font-family: var(--font-family);\n font-weight: 400;\n line-height: 21px;\n letter-spacing: -0.5px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.contentTextLarge {\n font: var(--font-h3-normal);\n letter-spacing: var(--letter-spacing-h3-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font-family: var(--font-family) !important;\n}\n\n.contentTextMedium {\n font: var(--font-text1-normal);\n margin-top: 1px;\n}\n\n.contentTextSmall {\n margin-top: 1px;\n font-size: 12px;\n}\n\n.contentIconLarge {\n height: 28px;\n width: 28px;\n}\n\n.contentIconMedium {\n height: 18px;\n width: 18px;\n}\n\n.contentIconSmall {\n height: 12px;\n width: 12px;\n}");export{n as default};
1
+ var n={contentImg:"contentImg",contentText:"contentText",contentTextLarge:"contentTextLarge",contentTextMedium:"contentTextMedium",contentTextSmall:"contentTextSmall",contentTextXs:"contentTextXs",contentIconLarge:"contentIconLarge",contentIconMedium:"contentIconMedium",contentIconSmall:"contentIconSmall"};!function(n){const t="s_id-50188146c7c7_3_17_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".contentImg {\n object-fit: cover;\n width: 100%;\n height: 100%;\n}\n\n.contentText {\n font-family: var(--font-family);\n font-weight: 400;\n line-height: 21px;\n letter-spacing: -0.5px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.contentTextLarge {\n font: var(--font-h3-normal);\n letter-spacing: var(--letter-spacing-h3-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font-family: var(--font-family) !important;\n}\n\n.contentTextMedium {\n font: var(--font-text1-normal);\n margin-top: 1px;\n}\n\n.contentTextSmall {\n margin-top: 1px;\n font-size: 12px;\n}\n\n.contentTextXs {\n margin-top: 1px;\n font: var(--font-text3-normal);\n}\n\n.contentIconLarge {\n height: 28px;\n width: 28px;\n}\n\n.contentIconMedium {\n height: 18px;\n width: 18px;\n}\n\n.contentIconSmall {\n height: 12px;\n width: 12px;\n}");export{n as default};
2
2
  //# sourceMappingURL=AvatarContent.module.scss.js.map
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{getStyle as m}from"../../helpers/typesciptCssModulesHelper.js";import{avatarOnClick as c}from"./AvatarGroupHelper.js";import p from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";var v=function(v){var f=v.counterTooltipAvatars,C=void 0===f?[]:f,b=v.counterTooltipCustomProps,I=v.counterTooltipIsVirtualizedList,j=void 0!==I&&I,x=v.size,M=void 0===x?"medium":x,P=v.type,g=v.counterAriaLabel,E=v.disabled,A=v.counterProps||{},L=A.color,z=void 0===L?"light":L,N=A.count,T=void 0===N?C.length:N,h=A.prefix,y=void 0===h?"+":h,G=A.maxDigits,k=void 0===G?3:G,B=A.ariaLabelItemsName,D=void 0===B?"items":B,H=A.noAnimation,O=A.dialogContainerSelector,R=m(p,null==M?void 0:""+M),S=p[z],V=t(null),_=t(null),U=t(null),q=r((function(){return o.createElement(i,{color:z,count:T,prefix:y,maxDigits:k,ariaLabel:g||"Tab for more ".concat(D),noAnimation:H,counterClassName:n(e({},p.disabled,E))})}),[g,D,z,k,y,T,E,H]);return C.length||T?E?o.createElement("div",{ref:U,className:n(p.counterContainer,p.disabled,R,S)},q()):C.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:q,zIndex:1,className:n(p.counterContainer,R,S),ariaLabel:g||"".concat(T," additional ").concat(D),dialogContainerSelector:O},o.createElement(l,{id:"menu",size:l.sizes.MEDIUM,className:p.menu,focusItemIndexOnMount:0},C.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a.ariaLabel),onClick:function(o){return c(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,ariaLabel:"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:V,focusNextPlaceholderRef:_,counterContainerRef:U,avatars:C,counterTooltipCustomProps:b,counterTooltipIsVirtualizedList:j,type:P},o.createElement("div",{tabIndex:-1,ref:V}),o.createElement("div",{tabIndex:0,className:n(p.counterContainer,R,S),ref:U},q(),o.createElement("div",{tabIndex:-1,ref:_}))):null};export{v as default};
1
+ import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{getStyle as m}from"../../helpers/typesciptCssModulesHelper.js";import{avatarOnClick as c}from"./AvatarGroupHelper.js";import p from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";var v=function(v){var f=v.counterTooltipAvatars,C=void 0===f?[]:f,b=v.counterTooltipCustomProps,x=v.counterTooltipIsVirtualizedList,I=void 0!==x&&x,j=v.size,M=void 0===j?"medium":j,P=v.type,g=v.counterAriaLabel,E=v.disabled,A=v.counterProps||{},z=A.color,L=void 0===z?"light":z,N=A.count,T=void 0===N?C.length:N,h=A.prefix,y=void 0===h?"+":h,G=A.maxDigits,k=void 0===G?3:G,B=A.ariaLabelItemsName,D=void 0===B?"items":B,H=A.noAnimation,O=A.dialogContainerSelector,R=m(p,null==M?void 0:""+M),S=p[L],V=t(null),_=t(null),U=t(null),q=r((function(){return o.createElement(i,{color:L,count:T,prefix:y,maxDigits:k,ariaLabel:g||"Tab for more ".concat(D),noAnimation:H,counterClassName:n(e({},p.disabled,E)),size:"xs"===M?"xs":void 0})}),[g,D,L,k,y,T,E,H]);return C.length||T?E?o.createElement("div",{ref:U,className:n(p.counterContainer,p.disabled,R,S)},q()):C.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:q,zIndex:1,className:n(p.counterContainer,R,S),ariaLabel:g||"".concat(T," additional ").concat(D),dialogContainerSelector:O},o.createElement(l,{id:"menu",size:l.sizes.MEDIUM,className:p.menu,focusItemIndexOnMount:0},C.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a.ariaLabel),onClick:function(o){return c(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,ariaLabel:"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:V,focusNextPlaceholderRef:_,counterContainerRef:U,avatars:C,counterTooltipCustomProps:b,counterTooltipIsVirtualizedList:I,type:P},o.createElement("div",{tabIndex:-1,ref:V}),o.createElement("div",{tabIndex:0,className:n(p.counterContainer,R,S),ref:U},q(),o.createElement("div",{tabIndex:-1,ref:_}))):null};export{v as default};
2
2
  //# sourceMappingURL=AvatarGroupCounter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { AvatarSize, AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /**\n * Array of Avatar elements\n */\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /**\n * AvatarGroupCounterVisualProps: props for counter\n */\n counterProps?: AvatarGroupCounterVisualProps;\n counterTooltipCustomProps?: Partial<TooltipProps>;\n counterTooltipIsVirtualizedList?: boolean;\n size?: AvatarSize;\n type?: AvatarType;\n counterAriaLabel?: string;\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector\n } = counterProps || {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n ariaLabel={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size={Menu.sizes.MEDIUM} className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id || String(index),\n title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.ariaLabel,\n onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n ariaLabel: \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}\n <div\n tabIndex={0}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","ariaLabel","concat","counterClassName","cx","_defineProperty","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","sizes","MEDIUM","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","tabIndex","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"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"}
1
+ {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { AvatarSize, AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /**\n * Array of Avatar elements\n */\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /**\n * AvatarGroupCounterVisualProps: props for counter\n */\n counterProps?: AvatarGroupCounterVisualProps;\n counterTooltipCustomProps?: Partial<TooltipProps>;\n counterTooltipIsVirtualizedList?: boolean;\n size?: AvatarSize;\n type?: AvatarType;\n counterAriaLabel?: string;\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector\n } = counterProps || {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n ariaLabel={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n size={size === \"xs\" ? \"xs\" : undefined}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size={Menu.sizes.MEDIUM} className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id || String(index),\n title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.ariaLabel,\n onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n ariaLabel: \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}\n <div\n tabIndex={0}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","ariaLabel","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","sizes","MEDIUM","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","tabIndex","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- var n={counterContainer:"counterContainer","focus-visible":"focus-visible",small:"small",medium:"medium",large:"large",primary:"primary",dark:"dark",negative:"negative",light:"light",disabled:"disabled",menu:"menu"};!function(n){const e="s_id-abc6ab3af47c_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".counterContainer {\n background: var(--ui-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: calc(-1 * var(--spacing-small));\n z-index: 1;\n border: 1px solid var(--primary-background-color);\n}\n.counterContainer:focus-visible, .counterContainer.focus-visible {\n outline: none;\n}\n.counterContainer:focus-visible:focus-visible, .counterContainer:focus-visible.focus-visible, .counterContainer.focus-visible:focus-visible, .counterContainer.focus-visible.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer:focus-visible:focus:not(.focus-visible), .counterContainer.focus-visible:focus:not(.focus-visible) {\n outline: none;\n}\n.counterContainer.small {\n height: 28px;\n min-width: 28px;\n border-radius: 14px;\n padding: 0 1px;\n}\n.counterContainer.medium {\n height: 32px;\n min-width: 32px;\n border-radius: 16px;\n padding: 0 2px;\n}\n.counterContainer.large {\n height: 50px;\n min-width: 50px;\n border-radius: 25px;\n padding: 0 var(--spacing-xs);\n}\n.counterContainer.primary {\n color: var(--text-color-on-primary);\n background-color: var(--primary-color);\n}\n.counterContainer.dark {\n color: var(--text-color-on-inverted);\n background-color: var(--inverted-color-background);\n}\n.counterContainer.negative {\n color: var(--text-color-on-primary);\n background-color: var(--negative-color);\n}\n.counterContainer.light {\n color: var(--primary-text-color);\n background-color: var(--ui-background-color);\n}\n.counterContainer .disabled, .counterContainer.disabled {\n background-color: var(--disabled-background-color);\n color: var(--disabled-text-color);\n}\n.menu {\n max-height: 300px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n.menu::-webkit-scrollbar {\n width: 4px;\n height: 6px;\n}\n.menu::-webkit-scrollbar-thumb {\n background-color: var(--ui-border-color);\n border-radius: 4px;\n}");export{n as default};
1
+ var n={counterContainer:"counterContainer","focus-visible":"focus-visible",xs:"xs",small:"small",medium:"medium",large:"large",primary:"primary",dark:"dark",negative:"negative",light:"light",disabled:"disabled",menu:"menu"};!function(n){const e="s_id-6c7433759f1e_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".counterContainer {\n background: var(--ui-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: calc(-1 * var(--spacing-small));\n z-index: 1;\n border: 1px solid var(--primary-background-color);\n}\n.counterContainer:focus-visible, .counterContainer.focus-visible {\n outline: none;\n}\n.counterContainer:focus-visible:focus-visible, .counterContainer:focus-visible.focus-visible, .counterContainer.focus-visible:focus-visible, .counterContainer.focus-visible.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer:focus-visible:focus:not(.focus-visible), .counterContainer.focus-visible:focus:not(.focus-visible) {\n outline: none;\n}\n.counterContainer.xs {\n height: 20px;\n min-width: 20px;\n border-radius: 10px;\n padding: 0 1px;\n}\n.counterContainer.small {\n height: 28px;\n min-width: 28px;\n border-radius: 14px;\n padding: 0 1px;\n}\n.counterContainer.medium {\n height: 32px;\n min-width: 32px;\n border-radius: 16px;\n padding: 0 2px;\n}\n.counterContainer.large {\n height: 50px;\n min-width: 50px;\n border-radius: 25px;\n padding: 0 var(--spacing-xs);\n}\n.counterContainer.primary {\n color: var(--text-color-on-primary);\n background-color: var(--primary-color);\n}\n.counterContainer.dark {\n color: var(--text-color-on-inverted);\n background-color: var(--inverted-color-background);\n}\n.counterContainer.negative {\n color: var(--text-color-on-primary);\n background-color: var(--negative-color);\n}\n.counterContainer.light {\n color: var(--primary-text-color);\n background-color: var(--ui-background-color);\n}\n.counterContainer .disabled, .counterContainer.disabled {\n background-color: var(--disabled-background-color);\n color: var(--disabled-text-color);\n}\n.menu {\n max-height: 300px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n.menu::-webkit-scrollbar {\n width: 4px;\n height: 6px;\n}\n.menu::-webkit-scrollbar-thumb {\n background-color: var(--ui-border-color);\n border-radius: 4px;\n}");export{n as default};
2
2
  //# sourceMappingURL=AvatarGroupCounter.module.scss.js.map
@@ -1,2 +1,2 @@
1
- var n={counter:"counter",withAnimation:"withAnimation",counterPopElastic:"counterPopElastic",sizeSmall:"sizeSmall",sizeLarge:"sizeLarge",kindFill:"kindFill",colorPrimary:"colorPrimary",colorDark:"colorDark",colorNegative:"colorNegative",colorLight:"colorLight",kindLine:"kindLine",fadeEnter:"fadeEnter",fadeEnterActive:"fadeEnterActive",fadeExit:"fadeExit",fadeExitActive:"fadeExitActive","counter-pop-elastic":"counter-pop-elastic"};!function(n){const o="s_id-2d04cfa2a785_3_17_1";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+o))return;const t=document.createElement("style");t.id=o,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".counter {\n display: inline-flex;\n justify-content: center;\n border-radius: 30px;\n overflow: hidden;\n transform-origin: center;\n}\n@keyframes counter-pop-elastic {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(1.2);\n }\n 66% {\n transform: scale(0.9);\n }\n 100% {\n transform: scale(1);\n }\n}\n.withAnimation {\n animation: counterPopElastic var(--motion-expressive-short);\n}\n.sizeSmall {\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n min-width: 18px;\n line-height: 18px;\n padding: 0 var(--spacing-small);\n}\n.sizeLarge {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n min-width: 24px;\n padding: 2px var(--spacing-small);\n}\n.kindFill.colorPrimary {\n color: var(--fixed-light-color);\n background-color: var(--primary-color);\n}\n.kindFill.colorDark {\n color: var(--text-color-on-inverted);\n background-color: var(--inverted-color-background);\n}\n.kindFill.colorNegative {\n color: var(--fixed-light-color);\n background-color: var(--negative-color);\n}\n.kindFill.colorLight {\n color: var(--primary-text-color);\n background-color: var(--ui-background-color);\n}\n.kindLine {\n box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine.colorPrimary {\n color: var(--primary-color);\n}\n.kindLine.colorDark {\n color: var(--inverted-color-background);\n}\n.kindLine.colorNegative {\n color: var(--negative-color);\n}\n.kindLine.colorLight {\n color: var(--primary-text-color);\n box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter {\n opacity: 0;\n transform: translateY(15px);\n}\n.fadeEnterActive {\n position: relative;\n opacity: 1;\n transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit {\n position: relative;\n opacity: 1;\n transform: translateY(0);\n}\n.fadeExitActive {\n position: relative;\n opacity: 0;\n transform: translateY(-15px);\n transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
1
+ var n={counter:"counter",withAnimation:"withAnimation",counterPopElastic:"counterPopElastic",sizeXs:"sizeXs",sizeSmall:"sizeSmall",sizeLarge:"sizeLarge",kindFill:"kindFill",colorPrimary:"colorPrimary",colorDark:"colorDark",colorNegative:"colorNegative",colorLight:"colorLight",kindLine:"kindLine",fadeEnter:"fadeEnter",fadeEnterActive:"fadeEnterActive",fadeExit:"fadeExit",fadeExitActive:"fadeExitActive","counter-pop-elastic":"counter-pop-elastic"};!function(n){const o="s_id-51f4f5079107_3_17_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}(".counter {\n display: inline-flex;\n justify-content: center;\n border-radius: 30px;\n overflow: hidden;\n transform-origin: center;\n}\n@keyframes counter-pop-elastic {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(1.2);\n }\n 66% {\n transform: scale(0.9);\n }\n 100% {\n transform: scale(1);\n }\n}\n.withAnimation {\n animation: counterPopElastic var(--motion-expressive-short);\n}\n.sizeXs {\n font: var(--font-text3-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n min-width: 18px;\n line-height: 18px;\n padding: 0 var(--spacing-small);\n}\n.sizeSmall {\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n min-width: 18px;\n line-height: 18px;\n padding: 0 var(--spacing-small);\n}\n.sizeLarge {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n font: var(--font-text2-normal);\n min-width: 24px;\n padding: 2px var(--spacing-small);\n}\n.kindFill.colorPrimary {\n color: var(--fixed-light-color);\n background-color: var(--primary-color);\n}\n.kindFill.colorDark {\n color: var(--text-color-on-inverted);\n background-color: var(--inverted-color-background);\n}\n.kindFill.colorNegative {\n color: var(--fixed-light-color);\n background-color: var(--negative-color);\n}\n.kindFill.colorLight {\n color: var(--primary-text-color);\n background-color: var(--ui-background-color);\n}\n.kindLine {\n box-shadow: 0 0 0 1px currentColor inset;\n}\n.kindLine.colorPrimary {\n color: var(--primary-color);\n}\n.kindLine.colorDark {\n color: var(--inverted-color-background);\n}\n.kindLine.colorNegative {\n color: var(--negative-color);\n}\n.kindLine.colorLight {\n color: var(--primary-text-color);\n box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n/* New number enters */\n.fadeEnter {\n opacity: 0;\n transform: translateY(15px);\n}\n.fadeEnterActive {\n position: relative;\n opacity: 1;\n transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n transform: translateY(0);\n}\n/* Old number exits */\n.fadeExit {\n position: relative;\n opacity: 1;\n transform: translateY(0);\n}\n.fadeExitActive {\n position: relative;\n opacity: 0;\n transform: translateY(-15px);\n transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}");export{n as default};
2
2
  //# sourceMappingURL=Counter.module.scss.js.map
@@ -1,2 +1,2 @@
1
- var i,n,l;!function(i){i.FILL="fill",i.LINE="line"}(i||(i={})),function(i){i.PRIMARY="primary",i.DARK="dark",i.NEGATIVE="negative",i.LIGHT="light"}(n||(n={})),function(i){i.SMALL="small",i.LARGE="large"}(l||(l={}));export{n as CounterColor,l as CounterSize,i as CounterType};
1
+ var i,n,l;!function(i){i.FILL="fill",i.LINE="line"}(i||(i={})),function(i){i.PRIMARY="primary",i.DARK="dark",i.NEGATIVE="negative",i.LIGHT="light"}(n||(n={})),function(i){i.XS="xs",i.SMALL="small",i.LARGE="large"}(l||(l={}));export{n as CounterColor,l as CounterSize,i as CounterType};
2
2
  //# sourceMappingURL=CounterConstants.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CounterConstants.js","sources":["../../../../../src/components/Counter/CounterConstants.ts"],"sourcesContent":["/**\n * @deprecated\n */\nexport enum CounterType {\n FILL = \"fill\",\n LINE = \"line\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterColor {\n PRIMARY = \"primary\",\n DARK = \"dark\",\n NEGATIVE = \"negative\",\n LIGHT = \"light\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterSize {\n SMALL = \"small\",\n LARGE = \"large\"\n}\n"],"names":["CounterType","CounterColor","CounterSize"],"mappings":"IAGYA,EAQAC,EAUAC,GAlBZ,SAAYF,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,KAAA,OACAA,EAAA,SAAA,WACAA,EAAA,MAAA,OACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAKD,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
1
+ {"version":3,"file":"CounterConstants.js","sources":["../../../../../src/components/Counter/CounterConstants.ts"],"sourcesContent":["/**\n * @deprecated\n */\nexport enum CounterType {\n FILL = \"fill\",\n LINE = \"line\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterColor {\n PRIMARY = \"primary\",\n DARK = \"dark\",\n NEGATIVE = \"negative\",\n LIGHT = \"light\"\n}\n\n/**\n * @deprecated\n */\nexport enum CounterSize {\n XS = \"xs\",\n SMALL = \"small\",\n LARGE = \"large\"\n}\n"],"names":["CounterType","CounterColor","CounterSize"],"mappings":"IAGYA,EAQAC,EAUAC,GAlBZ,SAAYF,GACVA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,KAAA,OACAA,EAAA,SAAA,WACAA,EAAA,MAAA,OACD,CALD,CAAYA,IAAAA,EAKX,CAAA,IAKD,SAAYC,GACVA,EAAA,GAAA,KACAA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as r}from"react";import o from"classnames";import i from"../../../../Divider/Divider.js";import n from"../../../../Icon/Icon.js";import s from"../../../../Flex/Flex.js";import a from"../../../../IconButton/IconButton.js";import l from"./MenuItemSubMenuIcon.module.scss.js";import c from"../../../../../../icons/dist/react/DropdownChevronRight.js";var m=r((function(r,m){return t.createElement(s,{justify:"center",className:l.subMenuIconWrapper},!0===r.isSplit?t.createElement(t.Fragment,null,t.createElement(i,{direction:"vertical",className:l.divider}),t.createElement(a,{icon:c,className:l.splitMenuItemIconButton,kind:"tertiary",size:null,iconClassName:o(l.splitSubMenuIcon,e({},l.disabled,r.disabled)),tabIndex:-1,ref:m,active:r.active,disabled:r.disabled})):t.createElement(n,{icon:c,iconLabel:r.label,className:l.subMenuIcon,ignoreFocusStyle:!0,iconSize:18}))}));export{m as default};
1
+ import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as r}from"react";import i from"classnames";import o from"../../../../Divider/Divider.js";import n from"../../../../Icon/Icon.js";import s from"../../../../Flex/Flex.js";import a from"../../../../IconButton/IconButton.js";import l from"./MenuItemSubMenuIcon.module.scss.js";import c from"../../../../../../icons/dist/react/DropdownChevronRight.js";var m=r((function(r,m){return t.createElement(s,{justify:"center",className:l.subMenuIconWrapper},!0===r.isSplit?t.createElement(t.Fragment,null,t.createElement(o,{direction:"vertical",className:l.divider}),t.createElement(a,{icon:c,className:l.splitMenuItemIconButton,kind:"tertiary",size:null,iconClassName:i(l.splitSubMenuIcon,e({},l.disabled,r.disabled)),tabIndex:-1,ref:m,active:r.active,disabled:r.disabled})):t.createElement(n,{icon:c,iconLabel:r.label,className:i(l.subMenuIcon,e({},l.disabled,r.disabled)),ignoreFocusStyle:!0,iconSize:18}))}));export{m as default};
2
2
  //# sourceMappingURL=MenuItemSubMenuIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItemSubMenuIcon.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport Divider from \"../../../../Divider/Divider\";\nimport Icon from \"../../../../Icon/Icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport IconButton from \"../../../../IconButton/IconButton\";\nimport { DropdownChevronRight } from \"@vibe/icons\";\nimport styles from \"./MenuItemSubMenuIcon.module.scss\";\nimport { MenuItemSubMenuIconProps } from \"./MenuItemSubMenuIcon.types\";\n\nconst MenuItemSubMenuIcon = forwardRef((props: MenuItemSubMenuIconProps, ref: React.ForwardedRef<HTMLDivElement>) => (\n <Flex justify=\"center\" className={styles.subMenuIconWrapper}>\n {props.isSplit === true ? (\n <>\n <Divider direction=\"vertical\" className={styles.divider} />\n <IconButton\n icon={DropdownChevronRight}\n className={styles.splitMenuItemIconButton}\n kind=\"tertiary\"\n size={null} // Customizing size via className\n iconClassName={cx(styles.splitSubMenuIcon, { [styles.disabled]: props.disabled })}\n tabIndex={-1}\n ref={ref}\n active={props.active}\n disabled={props.disabled}\n />\n </>\n ) : (\n <Icon\n icon={DropdownChevronRight}\n iconLabel={props.label}\n className={styles.subMenuIcon}\n ignoreFocusStyle\n iconSize={18}\n />\n )}\n </Flex>\n));\n\nexport default MenuItemSubMenuIcon;\n"],"names":["MenuItemSubMenuIcon","forwardRef","props","ref","React","createElement","Flex","justify","className","styles","subMenuIconWrapper","isSplit","Fragment","Divider","direction","divider","IconButton","icon","DropdownChevronRight","splitMenuItemIconButton","kind","size","iconClassName","cx","splitSubMenuIcon","_defineProperty","disabled","tabIndex","active","Icon","iconLabel","label","subMenuIcon","ignoreFocusStyle","iconSize"],"mappings":"ycAUA,IAAMA,EAAsBC,GAAW,SAACC,EAAiCC,GAAuC,OAC9GC,EAAAC,cAACC,EAAK,CAAAC,QAAQ,SAASC,UAAWC,EAAOC,qBACpB,IAAlBR,EAAMS,QACLP,EAAAC,cAAAD,EAAAQ,SAAA,KACER,EAACC,cAAAQ,EAAQ,CAAAC,UAAU,WAAWN,UAAWC,EAAOM,UAChDX,EAACC,cAAAW,GACCC,KAAMC,EACNV,UAAWC,EAAOU,wBAClBC,KAAK,WACLC,KAAM,KACNC,cAAeC,EAAGd,EAAOe,iBAAgBC,EAAKhB,GAAAA,EAAOiB,SAAWxB,EAAMwB,WACtEC,UAAW,EACXxB,IAAKA,EACLyB,OAAQ1B,EAAM0B,OACdF,SAAUxB,EAAMwB,YAIpBtB,EAAAC,cAACwB,EAAI,CACHZ,KAAMC,EACNY,UAAW5B,EAAM6B,MACjBvB,UAAWC,EAAOuB,YAClBC,kBAAgB,EAChBC,SAAU,KAGT"}
1
+ {"version":3,"file":"MenuItemSubMenuIcon.js","sources":["../../../../../../../../src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport Divider from \"../../../../Divider/Divider\";\nimport Icon from \"../../../../Icon/Icon\";\nimport Flex from \"../../../../Flex/Flex\";\nimport IconButton from \"../../../../IconButton/IconButton\";\nimport { DropdownChevronRight } from \"@vibe/icons\";\nimport styles from \"./MenuItemSubMenuIcon.module.scss\";\nimport { MenuItemSubMenuIconProps } from \"./MenuItemSubMenuIcon.types\";\n\nconst MenuItemSubMenuIcon = forwardRef((props: MenuItemSubMenuIconProps, ref: React.ForwardedRef<HTMLDivElement>) => (\n <Flex justify=\"center\" className={styles.subMenuIconWrapper}>\n {props.isSplit === true ? (\n <>\n <Divider direction=\"vertical\" className={styles.divider} />\n <IconButton\n icon={DropdownChevronRight}\n className={styles.splitMenuItemIconButton}\n kind=\"tertiary\"\n size={null} // Customizing size via className\n iconClassName={cx(styles.splitSubMenuIcon, { [styles.disabled]: props.disabled })}\n tabIndex={-1}\n ref={ref}\n active={props.active}\n disabled={props.disabled}\n />\n </>\n ) : (\n <Icon\n icon={DropdownChevronRight}\n iconLabel={props.label}\n className={cx(styles.subMenuIcon, { [styles.disabled]: props.disabled })}\n ignoreFocusStyle\n iconSize={18}\n />\n )}\n </Flex>\n));\n\nexport default MenuItemSubMenuIcon;\n"],"names":["MenuItemSubMenuIcon","forwardRef","props","ref","React","createElement","Flex","justify","className","styles","subMenuIconWrapper","isSplit","Fragment","Divider","direction","divider","IconButton","icon","DropdownChevronRight","splitMenuItemIconButton","kind","size","iconClassName","cx","splitSubMenuIcon","_defineProperty","disabled","tabIndex","active","Icon","iconLabel","label","subMenuIcon","ignoreFocusStyle","iconSize"],"mappings":"ycAUA,IAAMA,EAAsBC,GAAW,SAACC,EAAiCC,GAAuC,OAC9GC,EAAAC,cAACC,EAAK,CAAAC,QAAQ,SAASC,UAAWC,EAAOC,qBACpB,IAAlBR,EAAMS,QACLP,EAAAC,cAAAD,EAAAQ,SAAA,KACER,EAACC,cAAAQ,EAAQ,CAAAC,UAAU,WAAWN,UAAWC,EAAOM,UAChDX,EAACC,cAAAW,EACC,CAAAC,KAAMC,EACNV,UAAWC,EAAOU,wBAClBC,KAAK,WACLC,KAAM,KACNC,cAAeC,EAAGd,EAAOe,iBAAgBC,EAAKhB,GAAAA,EAAOiB,SAAWxB,EAAMwB,WACtEC,UAAW,EACXxB,IAAKA,EACLyB,OAAQ1B,EAAM0B,OACdF,SAAUxB,EAAMwB,YAIpBtB,EAACC,cAAAwB,GACCZ,KAAMC,EACNY,UAAW5B,EAAM6B,MACjBvB,UAAWe,EAAGd,EAAOuB,YAAWP,EAAKhB,GAAAA,EAAOiB,SAAWxB,EAAMwB,WAC7DO,kBAAgB,EAChBC,SAAU,KAGT"}
@@ -1,2 +1,2 @@
1
- var e={subMenuIconWrapper:"subMenuIconWrapper",divider:"divider",splitSubMenuIcon:"splitSubMenuIcon",disabled:"disabled",subMenuIcon:"subMenuIcon",splitMenuItemIconButton:"splitMenuItemIconButton"};!function(e){const n="s_id-ce61865c18da_3_17_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".subMenuIconWrapper {\n margin-left: var(--spacing-xs);\n}\n.subMenuIconWrapper .divider {\n height: 19px;\n}\n.subMenuIconWrapper .splitSubMenuIcon {\n width: 18px;\n height: 18px;\n}\n.subMenuIconWrapper .splitSubMenuIcon.disabled {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.subMenuIconWrapper .subMenuIcon,\n.subMenuIconWrapper .splitSubMenuIcon {\n color: var(--icon-color);\n}\n.subMenuIconWrapper .splitMenuItemIconButton {\n width: 34px;\n height: 30px;\n --primary-selected-color: rgba(103, 104, 121, 0.1);\n}");export{e as default};
1
+ var e={subMenuIconWrapper:"subMenuIconWrapper",divider:"divider",splitSubMenuIcon:"splitSubMenuIcon",subMenuIcon:"subMenuIcon",disabled:"disabled",splitMenuItemIconButton:"splitMenuItemIconButton"};!function(e){const n="s_id-3539aaaaa2b9_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".subMenuIconWrapper {\n margin-left: var(--spacing-xs);\n}\n.subMenuIconWrapper .divider {\n height: 19px;\n}\n.subMenuIconWrapper .splitSubMenuIcon {\n width: 18px;\n height: 18px;\n}\n.subMenuIconWrapper .subMenuIcon,\n.subMenuIconWrapper .splitSubMenuIcon {\n color: var(--icon-color);\n}\n.subMenuIconWrapper .subMenuIcon.disabled,\n.subMenuIconWrapper .splitSubMenuIcon.disabled {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.subMenuIconWrapper .splitMenuItemIconButton {\n width: 34px;\n height: 30px;\n --primary-selected-color: rgba(103, 104, 121, 0.1);\n}");export{e as default};
2
2
  //# sourceMappingURL=MenuItemSubMenuIcon.module.scss.js.map
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as L}from"react-dom";import P from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import k from"../../../hooks/useMergeRef.js";var w=c.default||c,I=r((function(r,c){var I=r.id,N=r.show,g=r.size,z=void 0===g?"medium":g,F=r.renderHeaderAction,H=r.closeButtonTheme,_=r.closeButtonAriaLabel,B=r.onClose,D=void 0===B?function(){}:B,R=r.autoFocus,O=void 0===R||R,V=r.onFocusAttempt,X=r.anchorElementRef,K=r.alertModal,S=r.container,Y=void 0===S?document.body:S,q=r.children,G=r.style,J=r.zIndex,Q=r.className,U=r["data-testid"],W=r["aria-labelledby"],Z=r["aria-describedby"],$=P(Y),ee=a(null),te=k(c,ee),oe=a(null),re=i(),ae=e(re,2),ie=ae[0],se=ae[1],ne=i(),le=e(ne,2),me=le[0],ce=le[1],de=s((function(e){W||se(e)}),[W]),ue=s((function(e){Z||ce(e)}),[Z]),fe=n((function(){return{modalId:I,setTitleId:de,setDescriptionId:ue,autoFocus:O}}),[I,de,ue,O]),pe=s((function(e){N&&!K&&D(e)}),[N,K,D]),ve=s((function(e){e.key===A.ESCAPE&&N&&!K&&D(e)}),[K,D,N]),ye="full-view"===z?h:(null==X?void 0:X.current)?x:M,Ee=J?{"--monday-modal-z-index":J}:{},be=s((function(e){if(!V)return!0;var t=V(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}),[V]);return o.createElement(d,null,N&&o.createElement(C,{layerRef:oe},o.createElement(j,{value:fe},L(o.createElement(w,{returnFocus:!0,autoFocus:O,whiteList:be},o.createElement("div",{ref:oe,className:v.container,style:Ee},o.createElement(u.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,I),className:v.overlay,onClick:pe,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:te},o.createElement(u.div,{variants:ye,initial:"exit",animate:"enter",exit:"exit",custom:X,className:l(v.modal,E(v,b("size-"+z)),t({},v.withHeaderAction,!!F),Q),id:I,"data-testid":U||f(p.MODAL_NEXT,I),role:"dialog","aria-modal":!0,"aria-labelledby":W||ie,"aria-describedby":Z||me,style:G,onKeyDown:ve,tabIndex:-1},q,o.createElement(y,{renderAction:F,theme:H,closeButtonAriaLabel:_,onClose:D}))))),$))))}));export{I as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as f}from"framer-motion";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import C from"../hooks/usePortalTarget/usePortalTarget.js";import L from"../../LayerProvider/LayerProvider.js";import k from"../../../hooks/useMergeRef.js";var I=d.default||d,N=r((function(r,d){var N=r.id,g=r.show,w=r.size,z=void 0===w?"medium":w,_=r.renderHeaderAction,B=r.closeButtonTheme,D=r.closeButtonAriaLabel,H=r.onClose,R=void 0===H?function(){}:H,O=r.anchorElementRef,V=r.alertModal,X=r.container,F=void 0===X?document.body:X,K=r.children,S=r.style,Y=r.zIndex,q=r.className,G=r["data-testid"],J=r["aria-labelledby"],Q=r["aria-describedby"],U=C(F),W=a(null),Z=k(d,W),$=a(null),ee=i(),te=e(ee,2),oe=te[0],re=te[1],ae=i(),ie=e(ae,2),se=ie[0],ne=ie[1],le=s((function(e){J||re(e)}),[J]),me=s((function(e){Q||ne(e)}),[Q]),de=n((function(){return{modalId:N,setTitleId:le,setDescriptionId:me}}),[N,le,me]),ce=s((function(e){g&&!V&&R(e)}),[g,V,R]),fe=s((function(e){e.key===A.ESCAPE&&g&&!V&&R(e)}),[V,R,g]),ue="full-view"===z?h:(null==O?void 0:O.current)?x:M;return o.createElement(c,null,g&&o.createElement(L,{layerRef:$},o.createElement(j,{value:de},P(o.createElement(I,{returnFocus:!0},o.createElement("div",{ref:$,className:y.container,style:Y?{"--monday-modal-z-index":Y}:{}},o.createElement(f.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":u(p.MODAL_NEXT_OVERLAY,N),className:y.overlay,onClick:ce,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:Z},o.createElement(f.div,{variants:ue,initial:"exit",animate:"enter",exit:"exit",custom:O,className:l(y.modal,E(y,b("size-"+z)),t({},y.withHeaderAction,!!_),q),id:N,"data-testid":G||u(p.MODAL_NEXT,N),role:"dialog","aria-modal":!0,"aria-labelledby":J||oe,"aria-describedby":Q||se,style:S,onKeyDown:fe,tabIndex:-1},K,o.createElement(v,{renderAction:_,theme:B,closeButtonAriaLabel:D,onClose:R}))))),U))))}));export{N as default};
2
2
  //# sourceMappingURL=Modal.js.map