@vibe/core 3.53.1-alpha-685df.0 → 3.53.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/components/Toast/Toast.d.ts +2 -2
  2. package/dist/icons/dist/react/DropdownChevronDown.js +1 -1
  3. package/dist/icons/dist/react/DropdownChevronDown.js.map +1 -1
  4. package/dist/icons/dist/react/DropdownChevronUp.js +1 -1
  5. package/dist/icons/dist/react/DropdownChevronUp.js.map +1 -1
  6. package/dist/metadata.json +30 -16
  7. package/dist/mocked_classnames/components/Toast/Toast.d.ts +2 -2
  8. package/dist/mocked_classnames/icons/dist/react/DropdownChevronDown.js +1 -1
  9. package/dist/mocked_classnames/icons/dist/react/DropdownChevronDown.js.map +1 -1
  10. package/dist/mocked_classnames/icons/dist/react/DropdownChevronUp.js +1 -1
  11. package/dist/mocked_classnames/icons/dist/react/DropdownChevronUp.js.map +1 -1
  12. package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js +1 -1
  13. package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js.map +1 -1
  14. package/dist/mocked_classnames/src/components/Button/Button.js +1 -1
  15. package/dist/mocked_classnames/src/components/Button/Button.js.map +1 -1
  16. package/dist/mocked_classnames/src/components/Counter/Counter.js +1 -1
  17. package/dist/mocked_classnames/src/components/Counter/Counter.js.map +1 -1
  18. package/dist/mocked_classnames/src/components/Dialog/DialogContent/DialogContent.js +1 -1
  19. package/dist/mocked_classnames/src/components/Dialog/DialogContent/DialogContent.js.map +1 -1
  20. package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js +1 -1
  21. package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js.map +1 -1
  22. package/dist/mocked_classnames/src/components/Toast/Toast.js +1 -1
  23. package/dist/mocked_classnames/src/components/Toast/Toast.js.map +1 -1
  24. package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js +1 -1
  25. package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js.map +1 -1
  26. package/dist/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js +1 -1
  27. package/dist/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js.map +1 -1
  28. package/dist/src/components/Button/Button.js +1 -1
  29. package/dist/src/components/Button/Button.js.map +1 -1
  30. package/dist/src/components/Counter/Counter.js +1 -1
  31. package/dist/src/components/Counter/Counter.js.map +1 -1
  32. package/dist/src/components/Dialog/DialogContent/DialogContent.js +1 -1
  33. package/dist/src/components/Dialog/DialogContent/DialogContent.js.map +1 -1
  34. package/dist/src/components/SplitButton/SplitButton.js +1 -1
  35. package/dist/src/components/SplitButton/SplitButton.js.map +1 -1
  36. package/dist/src/components/Toast/Toast.js +1 -1
  37. package/dist/src/components/Toast/Toast.js.map +1 -1
  38. package/dist/src/components/Toast/ToastButton/ToastButton.js +1 -1
  39. package/dist/src/components/Toast/ToastButton/ToastButton.js.map +1 -1
  40. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- import React, { ReactElement, type JSX } from "react";
1
+ import React, { ReactElement } from "react";
2
2
  import { IconSubComponentProps } from "../Icon/Icon";
3
3
  import { ToastActionType as ToastActionTypeEnum, ToastType as ToastTypeEnum } from "./ToastConstants";
4
4
  import { ToastType, ToastAction } from "./Toast.types";
@@ -48,7 +48,7 @@ export interface ToastProps extends VibeComponentProps {
48
48
  /**
49
49
  * The content displayed inside the toast.
50
50
  */
51
- children?: ReactElement<any> | ReactElement<any>[] | string;
51
+ children?: ReactElement | ReactElement[] | string;
52
52
  /**
53
53
  * The aria-label for the close button.
54
54
  */
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M9.442 12.762a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.158.77.77 0 0 0-1.116 0L10 11.027 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.158l4.21 4.363Z"}))};t.displayName="DropdownChevronDown";export{t as default};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"}))};t.displayName="DropdownChevronDown";export{t as default};
2
2
  //# sourceMappingURL=DropdownChevronDown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownChevronDown.js","sources":["../../../../../icons/dist/react/DropdownChevronDown.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,o=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},o),t.createElement(\"path\",{d:\"M9.442 12.762a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.158.77.77 0 0 0-1.116 0L10 11.027 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.158l4.21 4.363Z\"}))};r.displayName=\"DropdownChevronDown\";export{r as default};\n"],"names":["r","a","size","o","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,sKAAsK,EAAEb,EAAEc,YAAY"}
1
+ {"version":3,"file":"DropdownChevronDown.js","sources":["../../../../../icons/dist/react/DropdownChevronDown.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,o=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},o),t.createElement(\"path\",{d:\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"}))};r.displayName=\"DropdownChevronDown\";export{r as default};\n"],"names":["r","a","size","o","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,qKAAqK,EAAEb,EAAEc,YAAY"}
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var l=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:l||"20",height:l||"20"},i),r.createElement("path",{d:"M9.46967 7.46967L10 8L10.5303 7.46967C10.2374 7.17678 9.76256 7.17678 9.46967 7.46967ZM10 9.06066L13.4697 12.5303C13.7626 12.8232 14.2374 12.8232 14.5303 12.5303C14.8232 12.2374 14.8232 11.7626 14.5303 11.4697L10.5303 7.46967L10 8L9.46967 7.46967L5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10 9.06066Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))};t.displayName="DropdownChevronUp";export{t as default};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M10.558 7.24a.77.77 0 0 0-1.116 0l-4.21 4.363a.84.84 0 0 0 0 1.157.77.77 0 0 0 1.116 0L10 8.975l3.652 3.785a.77.77 0 0 0 1.117 0 .84.84 0 0 0 0-1.157l-4.21-4.363Z"}))};t.displayName="DropdownChevronUp";export{t as default};
2
2
  //# sourceMappingURL=DropdownChevronUp.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownChevronUp.js","sources":["../../../../../icons/dist/react/DropdownChevronUp.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as r from\"react\";const t=t=>{var{size:l}=t,o=e(t,[\"size\"]);return r.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:l||\"20\",height:l||\"20\"},o),r.createElement(\"path\",{d:\"M9.46967 7.46967L10 8L10.5303 7.46967C10.2374 7.17678 9.76256 7.17678 9.46967 7.46967ZM10 9.06066L13.4697 12.5303C13.7626 12.8232 14.2374 12.8232 14.5303 12.5303C14.8232 12.2374 14.8232 11.7626 14.5303 11.4697L10.5303 7.46967L10 8L9.46967 7.46967L5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10 9.06066Z\",fill:\"currentColor\",fillRule:\"evenodd\",clipRule:\"evenodd\"}))};t.displayName=\"DropdownChevronUp\";export{t as default};\n"],"names":["t","l","size","o","e","r","createElement","Object","assign","viewBox","fill","width","height","d","fillRule","clipRule","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,qXAAqXH,KAAK,eAAeI,SAAS,UAAUC,SAAS,YAAY,EAAEf,EAAEgB,YAAY"}
1
+ {"version":3,"file":"DropdownChevronUp.js","sources":["../../../../../icons/dist/react/DropdownChevronUp.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,i=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},i),t.createElement(\"path\",{d:\"M10.558 7.24a.77.77 0 0 0-1.116 0l-4.21 4.363a.84.84 0 0 0 0 1.157.77.77 0 0 0 1.116 0L10 8.975l3.652 3.785a.77.77 0 0 0 1.117 0 .84.84 0 0 0 0-1.157l-4.21-4.363Z\"}))};r.displayName=\"DropdownChevronUp\";export{r as default};\n"],"names":["r","a","size","i","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,uKAAuK,EAAEb,EAAEc,YAAY"}
@@ -2944,7 +2944,9 @@
2944
2944
  }
2945
2945
  },
2946
2946
  "name": {
2947
- "defaultValue": null,
2947
+ "defaultValue": {
2948
+ "value": "undefined"
2949
+ },
2948
2950
  "description": "Name of the button - for form submit usages",
2949
2951
  "name": "name",
2950
2952
  "required": false,
@@ -3112,7 +3114,9 @@
3112
3114
  }
3113
3115
  },
3114
3116
  "loading": {
3115
- "defaultValue": null,
3117
+ "defaultValue": {
3118
+ "value": "false"
3119
+ },
3116
3120
  "description": "loading boolean which switches the text to a loader",
3117
3121
  "name": "loading",
3118
3122
  "required": false,
@@ -3121,7 +3125,9 @@
3121
3125
  }
3122
3126
  },
3123
3127
  "loaderClassName": {
3124
- "defaultValue": null,
3128
+ "defaultValue": {
3129
+ "value": "undefined"
3130
+ },
3125
3131
  "description": "className which is applied to loader container *",
3126
3132
  "name": "loaderClassName",
3127
3133
  "required": false,
@@ -3130,7 +3136,9 @@
3130
3136
  }
3131
3137
  },
3132
3138
  "style": {
3133
- "defaultValue": null,
3139
+ "defaultValue": {
3140
+ "value": "undefined"
3141
+ },
3134
3142
  "description": "",
3135
3143
  "name": "style",
3136
3144
  "required": false,
@@ -3181,7 +3189,9 @@
3181
3189
  }
3182
3190
  },
3183
3191
  "ariaLabeledBy": {
3184
- "defaultValue": null,
3192
+ "defaultValue": {
3193
+ "value": "undefined"
3194
+ },
3185
3195
  "description": "element id to describe the button accordingly",
3186
3196
  "name": "ariaLabeledBy",
3187
3197
  "required": false,
@@ -3190,7 +3200,9 @@
3190
3200
  }
3191
3201
  },
3192
3202
  "ariaLabel": {
3193
- "defaultValue": null,
3203
+ "defaultValue": {
3204
+ "value": "undefined"
3205
+ },
3194
3206
  "description": "aria label to provide important when providing only Icon",
3195
3207
  "name": "ariaLabel",
3196
3208
  "required": false,
@@ -3199,7 +3211,9 @@
3199
3211
  }
3200
3212
  },
3201
3213
  "ariaHasPopup": {
3202
- "defaultValue": null,
3214
+ "defaultValue": {
3215
+ "value": "undefined"
3216
+ },
3203
3217
  "description": "aria for a button popup",
3204
3218
  "name": "ariaHasPopup",
3205
3219
  "required": false,
@@ -3208,7 +3222,9 @@
3208
3222
  }
3209
3223
  },
3210
3224
  "ariaExpanded": {
3211
- "defaultValue": null,
3225
+ "defaultValue": {
3226
+ "value": "undefined"
3227
+ },
3212
3228
  "description": "aria to be set if the popup is open",
3213
3229
  "name": "ariaExpanded",
3214
3230
  "required": false,
@@ -3217,7 +3233,9 @@
3217
3233
  }
3218
3234
  },
3219
3235
  "ariaControls": {
3220
- "defaultValue": null,
3236
+ "defaultValue": {
3237
+ "value": "undefined"
3238
+ },
3221
3239
  "description": "aria controls - receives id for the controlled region",
3222
3240
  "name": "ariaControls",
3223
3241
  "required": false,
@@ -13654,7 +13672,7 @@
13654
13672
  },
13655
13673
  "dialogPaddingSize": {
13656
13674
  "defaultValue": {
13657
- "value": "medium"
13675
+ "value": "DialogContentContainer.sizes.MEDIUM"
13658
13676
  },
13659
13677
  "description": "The padding size inside the secondary dialog.",
13660
13678
  "name": "dialogPaddingSize",
@@ -13715,9 +13733,7 @@
13715
13733
  }
13716
13734
  },
13717
13735
  "kind": {
13718
- "defaultValue": {
13719
- "value": "primary"
13720
- },
13736
+ "defaultValue": null,
13721
13737
  "description": "The button's kind",
13722
13738
  "name": "kind",
13723
13739
  "required": false,
@@ -13801,9 +13817,7 @@
13801
13817
  }
13802
13818
  },
13803
13819
  "color": {
13804
- "defaultValue": {
13805
- "value": "primary"
13806
- },
13820
+ "defaultValue": null,
13807
13821
  "description": "The button's color",
13808
13822
  "name": "color",
13809
13823
  "required": false,
@@ -1,4 +1,4 @@
1
- import React, { ReactElement, type JSX } from "react";
1
+ import React, { ReactElement } from "react";
2
2
  import { IconSubComponentProps } from "../Icon/Icon";
3
3
  import { ToastActionType as ToastActionTypeEnum, ToastType as ToastTypeEnum } from "./ToastConstants";
4
4
  import { ToastType, ToastAction } from "./Toast.types";
@@ -48,7 +48,7 @@ export interface ToastProps extends VibeComponentProps {
48
48
  /**
49
49
  * The content displayed inside the toast.
50
50
  */
51
- children?: ReactElement<any> | ReactElement<any>[] | string;
51
+ children?: ReactElement | ReactElement[] | string;
52
52
  /**
53
53
  * The aria-label for the close button.
54
54
  */
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M9.442 12.762a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.158.77.77 0 0 0-1.116 0L10 11.027 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.158l4.21 4.363Z"}))};t.displayName="DropdownChevronDown";export{t as default};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z"}))};t.displayName="DropdownChevronDown";export{t as default};
2
2
  //# sourceMappingURL=DropdownChevronDown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownChevronDown.js","sources":["../../../../../../icons/dist/react/DropdownChevronDown.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,o=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},o),t.createElement(\"path\",{d:\"M9.442 12.762a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.158.77.77 0 0 0-1.116 0L10 11.027 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.158l4.21 4.363Z\"}))};r.displayName=\"DropdownChevronDown\";export{r as default};\n"],"names":["r","a","size","o","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,sKAAsK,EAAEb,EAAEc,YAAY"}
1
+ {"version":3,"file":"DropdownChevronDown.js","sources":["../../../../../../icons/dist/react/DropdownChevronDown.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,o=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},o),t.createElement(\"path\",{d:\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"}))};r.displayName=\"DropdownChevronDown\";export{r as default};\n"],"names":["r","a","size","o","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,qKAAqK,EAAEb,EAAEc,YAAY"}
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var l=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:l||"20",height:l||"20"},i),r.createElement("path",{d:"M9.46967 7.46967L10 8L10.5303 7.46967C10.2374 7.17678 9.76256 7.17678 9.46967 7.46967ZM10 9.06066L13.4697 12.5303C13.7626 12.8232 14.2374 12.8232 14.5303 12.5303C14.8232 12.2374 14.8232 11.7626 14.5303 11.4697L10.5303 7.46967L10 8L9.46967 7.46967L5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10 9.06066Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))};t.displayName="DropdownChevronUp";export{t as default};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import*as r from"react";var t=function(t){var a=t.size,i=e(t,["size"]);return r.createElement("svg",Object.assign({viewBox:"0 0 20 20",fill:"currentColor",width:a||"20",height:a||"20"},i),r.createElement("path",{d:"M10.558 7.24a.77.77 0 0 0-1.116 0l-4.21 4.363a.84.84 0 0 0 0 1.157.77.77 0 0 0 1.116 0L10 8.975l3.652 3.785a.77.77 0 0 0 1.117 0 .84.84 0 0 0 0-1.157l-4.21-4.363Z"}))};t.displayName="DropdownChevronUp";export{t as default};
2
2
  //# sourceMappingURL=DropdownChevronUp.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownChevronUp.js","sources":["../../../../../../icons/dist/react/DropdownChevronUp.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as r from\"react\";const t=t=>{var{size:l}=t,o=e(t,[\"size\"]);return r.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:l||\"20\",height:l||\"20\"},o),r.createElement(\"path\",{d:\"M9.46967 7.46967L10 8L10.5303 7.46967C10.2374 7.17678 9.76256 7.17678 9.46967 7.46967ZM10 9.06066L13.4697 12.5303C13.7626 12.8232 14.2374 12.8232 14.5303 12.5303C14.8232 12.2374 14.8232 11.7626 14.5303 11.4697L10.5303 7.46967L10 8L9.46967 7.46967L5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10 9.06066Z\",fill:\"currentColor\",fillRule:\"evenodd\",clipRule:\"evenodd\"}))};t.displayName=\"DropdownChevronUp\";export{t as default};\n"],"names":["t","l","size","o","e","r","createElement","Object","assign","viewBox","fill","width","height","d","fillRule","clipRule","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,qXAAqXH,KAAK,eAAeI,SAAS,UAAUC,SAAS,YAAY,EAAEf,EAAEgB,YAAY"}
1
+ {"version":3,"file":"DropdownChevronUp.js","sources":["../../../../../../icons/dist/react/DropdownChevronUp.js"],"sourcesContent":["import{__rest as e}from\"../_virtual/_tslib.js\";import*as t from\"react\";const r=r=>{var{size:a}=r,i=e(r,[\"size\"]);return t.createElement(\"svg\",Object.assign({viewBox:\"0 0 20 20\",fill:\"currentColor\",width:a||\"20\",height:a||\"20\"},i),t.createElement(\"path\",{d:\"M10.558 7.24a.77.77 0 0 0-1.116 0l-4.21 4.363a.84.84 0 0 0 0 1.157.77.77 0 0 0 1.116 0L10 8.975l3.652 3.785a.77.77 0 0 0 1.117 0 .84.84 0 0 0 0-1.157l-4.21-4.363Z\"}))};r.displayName=\"DropdownChevronUp\";export{r as default};\n"],"names":["r","a","size","i","e","t","createElement","Object","assign","viewBox","fill","width","height","d","displayName"],"mappings":"uEAAuE,IAAMA,EAAE,SAAAA,GAAO,IAAMC,EAAGD,EAARE,KAAUC,EAAEC,EAAEJ,EAAE,CAAC,SAAS,OAAOK,EAAEC,cAAc,MAAMC,OAAOC,OAAO,CAACC,QAAQ,YAAYC,KAAK,eAAeC,MAAMV,GAAG,KAAKW,OAAOX,GAAG,MAAME,GAAGE,EAAEC,cAAc,OAAO,CAACO,EAAE,uKAAuK,EAAEb,EAAEc,YAAY"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as r}from"../../../../_virtual/_tslib.js";import{getTestId as a,ComponentDefaultTestId as e}from"../../../tests/testIds.js";import s from"classnames";import o from"../../Button/Button.js";import i from"react";import n from"./AlertBannerButton.module.scss.js";var m=function(m){var l=m.marginLeft,d=void 0!==l&&l,c=m.isDarkBackground,u=void 0!==c&&c,f=m.id,p=m["data-testid"],B=r(m,["marginLeft","isDarkBackground","id","data-testid"]),g=s(t(t({},n.marginLeft,d),n.darkBackground,u));return i.createElement("div",{className:g,"data-testid":p||a(e.ALERT_BANNER_BUTTON,f),id:f},i.createElement(o,Object.assign({},B,{size:"small",className:s(n.bannerButton),color:"on-primary-color"})))};Object.assign(m,{isAlertBannerItem:!0});export{m as default};
1
+ import{defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as r}from"../../../../_virtual/_tslib.js";import{getTestId as a,ComponentDefaultTestId as e}from"../../../tests/testIds.js";import s from"classnames";import i from"../../Button/Button.js";import o from"react";import n from"./AlertBannerButton.module.scss.js";var m=function(m){var l=m.marginLeft,d=void 0!==l&&l,c=m.isDarkBackground,u=void 0!==c&&c,f=m.id,p=m["data-testid"],B=r(m,["marginLeft","isDarkBackground","id","data-testid"]),g=Object.assign(Object.assign({},i.defaultProps),B),j=s(t(t({},n.marginLeft,d),n.darkBackground,u));return o.createElement("div",{className:j,"data-testid":p||a(e.ALERT_BANNER_BUTTON,f),id:f},o.createElement(i,Object.assign({},g,{size:"small",className:s(n.bannerButton),color:"on-primary-color"})))};Object.assign(m,{isAlertBannerItem:!0});export{m as default};
2
2
  //# sourceMappingURL=AlertBannerButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AlertBannerButton.js","sources":["../../../../../../src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport Button, { ButtonProps } from \"../../Button/Button\";\nimport React, { FC } from \"react\";\nimport styles from \"./AlertBannerButton.module.scss\";\n\nexport interface AlertBannerButtonProps extends ButtonProps {\n /**\n * If true, the button is displayed on a dark background.\n */\n isDarkBackground?: boolean;\n}\n\nconst AlertBannerButton: FC<AlertBannerButtonProps> = ({\n marginLeft = false,\n isDarkBackground = false,\n id,\n \"data-testid\": dataTestId,\n ...buttonProps\n}) => {\n const classNames = cx({\n [styles.marginLeft]: marginLeft,\n [styles.darkBackground]: isDarkBackground\n });\n\n return (\n <div\n className={classNames}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_BUTTON, id)}\n id={id}\n >\n <Button {...buttonProps} size=\"small\" className={cx(styles.bannerButton)} color=\"on-primary-color\" />\n </div>\n );\n};\n\nObject.assign(AlertBannerButton, {\n isAlertBannerItem: true\n});\n\nexport default AlertBannerButton;\n"],"names":["AlertBannerButton","_a","_a$marginLeft","marginLeft","_a$isDarkBackground","isDarkBackground","id","dataTestId","buttonProps","__rest","classNames","cx","_defineProperty","styles","darkBackground","React","createElement","className","getTestId","ComponentDefaultTestId","ALERT_BANNER_BUTTON","Button","size","bannerButton","color","Object","assign","isAlertBannerItem"],"mappings":"oWAaA,IAAMA,EAAgD,SAACC,GAAA,IAAAC,EAI5BD,EAHzBE,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAGOH,EAFzBI,iBAAAA,OAAmB,IAAHD,GAAQA,EACxBE,EACyBL,EADzBK,GACeC,EAAUN,EAAzB,eACGO,EAAWC,EAAAR,EALuC,sDAO/CS,EAAaC,EAAEC,EAAAA,KAClBC,EAAOV,WAAaA,GACpBU,EAAOC,eAAiBT,IAG3B,OACEU,EACEC,cAAA,MAAA,CAAAC,UAAWP,EAAU,cACRH,GAAcW,EAAUC,EAAuBC,oBAAqBd,GACjFA,GAAIA,GAEJS,EAACC,cAAAK,mBAAWb,EAAW,CAAEc,KAAK,QAAQL,UAAWN,EAAGE,EAAOU,cAAeC,MAAM,sBAGtF,EAEAC,OAAOC,OAAO1B,EAAmB,CAC/B2B,mBAAmB"}
1
+ {"version":3,"file":"AlertBannerButton.js","sources":["../../../../../../src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport Button, { ButtonProps } from \"../../Button/Button\";\nimport React, { FC } from \"react\";\nimport styles from \"./AlertBannerButton.module.scss\";\n\nexport interface AlertBannerButtonProps extends ButtonProps {\n /**\n * If true, the button is displayed on a dark background.\n */\n isDarkBackground?: boolean;\n}\n\nconst AlertBannerButton: FC<AlertBannerButtonProps> = ({\n marginLeft = false,\n isDarkBackground = false,\n id,\n \"data-testid\": dataTestId,\n ...buttonProps\n}) => {\n const overrideButtonProps = { ...Button.defaultProps, ...buttonProps };\n\n const classNames = cx({\n [styles.marginLeft]: marginLeft,\n [styles.darkBackground]: isDarkBackground\n });\n\n return (\n <div\n className={classNames}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_BUTTON, id)}\n id={id}\n >\n <Button {...overrideButtonProps} size=\"small\" className={cx(styles.bannerButton)} color=\"on-primary-color\" />\n </div>\n );\n};\n\nObject.assign(AlertBannerButton, {\n isAlertBannerItem: true\n});\n\nexport default AlertBannerButton;\n"],"names":["AlertBannerButton","_a","_a$marginLeft","marginLeft","_a$isDarkBackground","isDarkBackground","id","dataTestId","buttonProps","__rest","overrideButtonProps","Button","defaultProps","classNames","cx","_defineProperty","styles","darkBackground","React","createElement","className","getTestId","ComponentDefaultTestId","ALERT_BANNER_BUTTON","size","bannerButton","color","Object","assign","isAlertBannerItem"],"mappings":"oWAaA,IAAMA,EAAgD,SAACC,GAAA,IAAAC,EAI5BD,EAHzBE,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAGOH,EAFzBI,iBAAAA,OAAmB,IAAHD,GAAQA,EACxBE,EACyBL,EADzBK,GACeC,EAAUN,EAAzB,eACGO,EAAWC,EAAAR,EALuC,sDAO/CS,iCAA2BC,EAAOC,cAAiBJ,GAEnDK,EAAaC,EAAEC,EAAAA,KAClBC,EAAOb,WAAaA,GACpBa,EAAOC,eAAiBZ,IAG3B,OACEa,EACEC,cAAA,MAAA,CAAAC,UAAWP,EAAU,cACRN,GAAcc,EAAUC,EAAuBC,oBAAqBjB,GACjFA,GAAIA,GAEJY,EAACC,cAAAR,mBAAWD,EAAmB,CAAEc,KAAK,QAAQJ,UAAWN,EAAGE,EAAOS,cAAeC,MAAM,sBAG9F,EAEAC,OAAOC,OAAO5B,EAAmB,CAC/B6B,mBAAmB"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as i,useEffect as a,useCallback as r,useMemo as n}from"react";import{camelCase as s}from"lodash-es";import l from"classnames";import{SIZES as c}from"../../constants/sizes.js";import d from"../../hooks/useMergeRef.js";import{NOOP as u}from"../../utils/function-utils.js";import m from"../Icon/Icon.js";import p from"../Loader/Loader.js";import{ButtonColor as f,ButtonType as v,ButtonInputType as y,BUTTON_ICON_SIZE as g,SMALL_BUTTON_ICON_SIZE as b}from"./ButtonConstants.js";import{getParentBackgroundColorNotTransparent as h,TRANSPARENT_COLOR as j}from"./helper/dom-helpers.js";import{getTestId as N}from"../../tests/testIds.js";import{withStaticProps as x}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getStyle as C}from"../../helpers/typesciptCssModulesHelper.js";import{ComponentDefaultTestId as E,ComponentVibeId as F}from"../../tests/constants.js";import k from"./Button.module.scss.js";import{useButtonLoading as B}from"./helper/useButtonLoading.js";var I=x(t((function(t,c){var f=t.className,v=t.children,y=t.kind,x=void 0===y?"primary":y,I=t.onClick,S=void 0===I?u:I,T=t.name,P=t.size,L=void 0===P?"medium":P,z=t.color,O=void 0===z?"primary":z,M=t.disabled,w=void 0!==M&&M,D=t.rightIcon,U=void 0===D?null:D,A=t.leftIcon,H=void 0===A?null:A,R=t.success,_=void 0!==R&&R,q=t.successText,G=void 0===q?"":q,J=t.successIcon,K=void 0===J?null:J,Q=t.style,V=t.loading,W=void 0!==V&&V,X=t.loaderClassName,Y=t.active,Z=void 0!==Y&&Y,$=t.activeButtonClassName,ee=t.id,oe=t.marginRight,te=void 0!==oe&&oe,ie=t.marginLeft,ae=void 0!==ie&&ie,re=t.type,ne=void 0===re?"button":re,se=t.onMouseDown,le=void 0===se?u:se,ce=t.ariaLabel,de=t.rightFlat,ue=void 0!==de&&de,me=t.leftFlat,pe=void 0!==me&&me,fe=t.preventClickAnimation,ve=void 0!==fe&&fe,ye=t.noSidePadding,ge=void 0!==ye&&ye,be=t.onFocus,he=void 0===be?u:be,je=t.onBlur,Ne=void 0===je?u:je,xe=t.ariaLabeledBy,Ce=t.defaultTextColorOnPrimaryColor,Ee=void 0===Ce?j:Ce,Fe=t.ariaHasPopup,ke=t.ariaExpanded,Be=t.ariaControls,Ie=t["aria-describedby"],Se=t["aria-hidden"],Te=t["aria-pressed"],Pe=t.blurOnMouseUp,Le=void 0===Pe||Pe,ze=t["data-testid"],Oe=t.insetFocus,Me=void 0!==Oe&&Oe,we=t.tabIndex,De=i(null),Ue=d(c,De),Ae=B({isLoading:W}).loading;a((function(){if(("on-primary-color"===O||"fixed-light"===O)&&"primary"===x&&De.current){var e=De.current;e.style.color=h(e,Ee)}}),[x,De,O,Ee]);var He=r((function(){var e=De.current;!w&&e&&Le&&e.blur()}),[w,De,Le]),Re=r((function(e){w||Ae||_?e.preventDefault():S&&S(e)}),[S,w,Ae,_]),_e=r((function(e){w||Ae||_?e.preventDefault():le&&le(e)}),[le,w,Ae,_]),qe=n((function(){var o,t=_?"positive":O;return l(f,k.button,C(k,s("size-"+L)),C(k,s("kind-"+x)),C(k,s("color-"+t)),(e(e(e(e(e(e(e(e(e(e(o={},k.success,_),C(k,s("color-"+t+"-active")),Z),$,Z),k.marginRight,te),k.marginLeft,ae),k.rightFlat,ue),k.leftFlat,pe),k.preventClickAnimation,ve),k.noSidePadding,ge),k.disabled,w),e(o,k.insetFocusStyle,Me)))}),[_,O,f,L,x,Z,$,te,ae,ue,pe,ve,ge,w,Me]),Ge=n((function(){return{ref:Ue,type:ne,className:qe,name:T,onMouseUp:He,style:Q,onClick:Re,id:ee,onFocus:he,onBlur:Ne,tabIndex:w||Se?-1:we,"data-testid":ze||N(E.BUTTON,ee),"data-vibe":F.BUTTON,onMouseDown:_e,"aria-disabled":w,"aria-busy":Ae,"aria-labelledby":xe,"aria-label":ce,"aria-haspopup":Fe,"aria-expanded":ke,"aria-controls":Be,"aria-describedby":Ie,"aria-hidden":Se,"aria-pressed":Te}}),[Ue,ne,qe,T,He,Q,Re,ee,he,Ne,we,ze,_e,w,Ae,xe,ce,Fe,ke,Be,Ie,Se,Te]),Je=r((function(e){if("function"==typeof e)switch(L){case"xxs":case"xs":return b;default:return g}}),[L]),Ke=n((function(){return o.Children.toArray(v).some(Boolean)}),[v]),Qe=n((function(){return o.createElement(o.Fragment,null,H?o.createElement(m,{iconType:"font",icon:H,iconSize:Je(H),className:l(e({},k.leftIcon,Ke)),ignoreFocusStyle:!0}):null,v,U?o.createElement(m,{iconType:"font",icon:U,iconSize:Je(U),className:l(e({},k.rightIcon,Ke)),ignoreFocusStyle:!0}):null)}),[v,Ke,Je,H,U]);return Ae?o.createElement("button",Object.assign({},Ge,{key:"".concat(ee,"-loading")}),o.createElement("span",{className:l(k.loader,X)},o.createElement(p,{className:k.loaderSvg}),o.createElement("span",{"aria-hidden":!0,className:k.textPlaceholder},Qe))):_?o.createElement("button",Object.assign({},Ge,{key:"".concat(ee,"-success")}),o.createElement("span",{className:k.successContent},K?o.createElement(m,{iconType:"font",icon:K,iconSize:Je(K),className:l(e({},k.leftIcon,!!G)),ignoreFocusStyle:!0}):null,G),o.createElement("span",{"aria-hidden":"true",className:k.textPlaceholder},Qe)):o.createElement("button",Object.assign({},Ge,{key:"".concat(ee,"-button")}),Qe)})),{sizes:c,colors:f,kinds:v,types:y,inputTags:y});export{I as default};
1
+ import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as a,useRef as o,useEffect as n,useCallback as r,useMemo as i}from"react";import{camelCase as s}from"lodash-es";import l from"classnames";import{SIZES as c}from"../../constants/sizes.js";import u from"../../hooks/useMergeRef.js";import{NOOP as d}from"../../utils/function-utils.js";import m from"../Icon/Icon.js";import p from"../Loader/Loader.js";import{BUTTON_ICON_SIZE as f,SMALL_BUTTON_ICON_SIZE as g,ButtonColor as y,ButtonType as b,ButtonInputType as v}from"./ButtonConstants.js";import{TRANSPARENT_COLOR as h,getParentBackgroundColorNotTransparent as C}from"./helper/dom-helpers.js";import{getTestId as j}from"../../tests/testIds.js";import{withStaticProps as x}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getStyle as F}from"../../helpers/typesciptCssModulesHelper.js";import{ComponentDefaultTestId as N,ComponentVibeId as k}from"../../tests/constants.js";import E from"./Button.module.scss.js";import{useButtonLoading as I}from"./helper/useButtonLoading.js";var B=a((function(a,c){var d=a.className,y=a.children,b=a.kind,v=a.onClick,h=a.name,x=a.size,B=a.color,P=a.disabled,S=a.rightIcon,T=a.leftIcon,L=a.success,O=a.successText,z=a.successIcon,M=a.style,w=a.loading,D=a.loaderClassName,U=a.active,A=a.activeButtonClassName,H=a.id,R=a.marginRight,_=a.marginLeft,q=a.type,G=a.onMouseDown,J=a.ariaLabel,K=a.rightFlat,Q=a.leftFlat,V=a.preventClickAnimation,W=a.noSidePadding,X=a.onFocus,Y=a.onBlur,Z=a.ariaLabeledBy,$=a.defaultTextColorOnPrimaryColor,ee=a.ariaHasPopup,te=a.ariaExpanded,ae=a.ariaControls,oe=a["aria-describedby"],ne=a["aria-hidden"],re=a["aria-pressed"],ie=a.blurOnMouseUp,se=a["data-testid"],le=a.insetFocus,ce=a.tabIndex,ue=o(null),de=u(c,ue),me=I({isLoading:w}).loading;n((function(){if(("on-primary-color"===B||"fixed-light"===B)&&"primary"===b&&ue.current){var e=ue.current;e.style.color=C(e,$)}}),[b,ue,B,$]);var pe=r((function(){var e=ue.current;!P&&e&&ie&&e.blur()}),[P,ue,ie]),fe=r((function(e){P||me||L?e.preventDefault():v&&v(e)}),[v,P,me,L]),ge=r((function(e){P||me||L?e.preventDefault():G&&G(e)}),[G,P,me,L]),ye=i((function(){var t,a=L?"positive":B;return l(d,E.button,F(E,s("size-"+x)),F(E,s("kind-"+b)),F(E,s("color-"+a)),(e(e(e(e(e(e(e(e(e(e(t={},E.success,L),F(E,s("color-"+a+"-active")),U),A,U),E.marginRight,R),E.marginLeft,_),E.rightFlat,K),E.leftFlat,Q),E.preventClickAnimation,V),E.noSidePadding,W),E.disabled,P),e(t,E.insetFocusStyle,le)))}),[L,B,d,x,b,U,A,R,_,K,Q,V,W,P,le]),be=i((function(){return{ref:de,type:q,className:ye,name:h,onMouseUp:pe,style:M,onClick:fe,id:H,onFocus:X,onBlur:Y,tabIndex:P||ne?-1:ce,"data-testid":se||j(N.BUTTON,H),"data-vibe":k.BUTTON,onMouseDown:ge,"aria-disabled":P,"aria-busy":me,"aria-labelledby":Z,"aria-label":J,"aria-haspopup":ee,"aria-expanded":te,"aria-controls":ae,"aria-describedby":oe,"aria-hidden":ne,"aria-pressed":re}}),[de,q,ye,h,pe,M,fe,H,X,Y,ce,se,ge,P,me,Z,J,ee,te,ae,oe,ne,re]),ve=r((function(e){if("function"==typeof e)switch(x){case"xxs":case"xs":return g;default:return f}}),[x]),he=i((function(){return t.Children.toArray(y).some(Boolean)}),[y]),Ce=i((function(){return t.createElement(t.Fragment,null,T?t.createElement(m,{iconType:"font",icon:T,iconSize:ve(T),className:l(e({},E.leftIcon,he)),ignoreFocusStyle:!0}):null,y,S?t.createElement(m,{iconType:"font",icon:S,iconSize:ve(S),className:l(e({},E.rightIcon,he)),ignoreFocusStyle:!0}):null)}),[y,he,ve,T,S]);return me?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-loading")}),t.createElement("span",{className:l(E.loader,D)},t.createElement(p,{className:E.loaderSvg}),t.createElement("span",{"aria-hidden":!0,className:E.textPlaceholder},Ce))):L?t.createElement("button",Object.assign({},be,{key:"".concat(H,"-success")}),t.createElement("span",{className:E.successContent},z?t.createElement(m,{iconType:"font",icon:z,iconSize:ve(z),className:l(e({},E.leftIcon,!!O)),ignoreFocusStyle:!0}):null,O),t.createElement("span",{"aria-hidden":"true",className:E.textPlaceholder},Ce)):t.createElement("button",Object.assign({},be,{key:"".concat(H,"-button")}),Ce)}));B.defaultProps={name:void 0,style:void 0,kind:"primary",onClick:d,size:"medium",color:"primary",disabled:!1,rightIcon:null,leftIcon:null,success:!1,successText:"",successIcon:null,loading:!1,loaderClassName:void 0,active:!1,marginRight:!1,marginLeft:!1,type:"button",onMouseDown:d,rightFlat:!1,leftFlat:!1,preventClickAnimation:!1,noSidePadding:!1,onFocus:d,onBlur:d,defaultTextColorOnPrimaryColor:h,ariaHasPopup:void 0,blurOnMouseUp:!0,ariaExpanded:void 0,ariaControls:void 0,ariaLabel:void 0,ariaLabeledBy:void 0,insetFocus:!1};var P=x(B,{sizes:c,colors:y,kinds:b,types:v,inputTags:v});export{P as default};
2
2
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport Icon from \"../../components/Icon/Icon\";\nimport Loader from \"../../components/Loader/Loader\";\nimport {\n BUTTON_ICON_SIZE,\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum,\n SMALL_BUTTON_ICON_SIZE\n} from \"./ButtonConstants\";\nimport { ButtonColor, ButtonInputType, ButtonType, ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /** Custom class names to pass to the component */\n className?: string;\n activeButtonClassName?: string;\n /** The button's kind */\n kind?: ButtonType;\n /** Callback function to run when the button is clicked */\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** Blur on button click */\n blurOnMouseUp?: boolean;\n /** Name of the button - for form submit usages */\n name?: string;\n /** The button's size */\n size?: ButtonSize;\n /** The button's color */\n color?: ButtonColor;\n /** The button's type */\n type?: ButtonInputType;\n /** Whether the button should be disabled or not */\n disabled?: boolean;\n /** Icon to place on the right */\n rightIcon?: SubIcon;\n /** Icon to place on the left */\n leftIcon?: SubIcon;\n /** the success props are used when you have async action and wants to display a success message */\n success?: boolean;\n /** Success icon name */\n successIcon?: SubIcon;\n /** Success text */\n successText?: string;\n /** loading boolean which switches the text to a loader */\n loading?: boolean;\n /** className which is applied to loader container **/\n loaderClassName?: string;\n style?: React.CSSProperties;\n /** displays the active state */\n active?: boolean;\n /** id to pass to the button */\n id?: string;\n /** adds 8px margin to the right */\n marginRight?: boolean;\n /** adds 8px margin to the left */\n marginLeft?: boolean;\n /** element id to describe the button accordingly */\n ariaLabeledBy?: string;\n /** aria label to provide important when providing only Icon */\n ariaLabel?: string;\n /** aria for a button popup */\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /** aria to be set if the popup is open */\n ariaExpanded?: boolean;\n /** aria controls - receives id for the controlled region */\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /**\n * aria to be used for screen reader to know if the button is hidden\n */\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /**\n * Indicates the current \"pressed\" state of toggle buttons\n */\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /** On Button Focus callback */\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /** On Button Blur callback */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /** Change the focus indicator from around the button to within it */\n insetFocus?: boolean;\n /** Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind = \"primary\",\n onClick = NOOP,\n name,\n size = \"medium\",\n color = \"primary\",\n disabled = false,\n rightIcon = null,\n leftIcon = null,\n success = false,\n successText = \"\",\n successIcon = null,\n style,\n loading: isLoading = false,\n loaderClassName,\n active = false,\n activeButtonClassName,\n id,\n marginRight = false,\n marginLeft = false,\n type = \"button\",\n onMouseDown = NOOP,\n ariaLabel,\n rightFlat = false,\n leftFlat = false,\n preventClickAnimation = false,\n noSidePadding = false,\n onFocus = NOOP,\n onBlur = NOOP,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp = true,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled || !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: disabled || ariaHidden ? -1 : tabIndex,\n \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return SMALL_BUTTON_ICON_SIZE;\n default:\n return BUTTON_ICON_SIZE;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","children","_ref$kind","kind","_ref$onClick","onClick","NOOP","name","_ref$size","size","_ref$color","color","_ref$disabled","disabled","_ref$rightIcon","rightIcon","_ref$leftIcon","leftIcon","_ref$success","success","_ref$successText","successText","_ref$successIcon","successIcon","style","_ref$loading","loading","isLoading","loaderClassName","_ref$active","active","activeButtonClassName","id","_ref$marginRight","marginRight","_ref$marginLeft","marginLeft","_ref$type","type","_ref$onMouseDown","onMouseDown","ariaLabel","_ref$rightFlat","rightFlat","_ref$leftFlat","leftFlat","_ref$preventClickAnim","preventClickAnimation","_ref$noSidePadding","noSidePadding","_ref$onFocus","onFocus","_ref$onBlur","onBlur","ariaLabeledBy","_ref$defaultTextColor","defaultTextColorOnPrimaryColor","TRANSPARENT_COLOR","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","_ref$blurOnMouseUp","blurOnMouseUp","dataTestId","_ref$insetFocus","insetFocus","tabIndex","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","_cx","calculatedColor","cx","styles","getStyle","camelCase","_defineProperty","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","SMALL_BUTTON_ICON_SIZE","BUTTON_ICON_SIZE","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","concat","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport { SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport Icon from \"../../components/Icon/Icon\";\nimport Loader from \"../../components/Loader/Loader\";\nimport {\n BUTTON_ICON_SIZE,\n ButtonColor as ButtonColorEnum,\n ButtonInputType as ButtonInputTypeEnum,\n ButtonType as ButtonTypeEnum,\n SMALL_BUTTON_ICON_SIZE\n} from \"./ButtonConstants\";\nimport { ButtonColor, ButtonInputType, ButtonType, ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n children: React.ReactNode;\n /** Custom class names to pass to the component */\n className?: string;\n activeButtonClassName?: string;\n /** The button's kind */\n kind?: ButtonType;\n /** Callback function to run when the button is clicked */\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /** Blur on button click */\n blurOnMouseUp?: boolean;\n /** Name of the button - for form submit usages */\n name?: string;\n /** The button's size */\n size?: ButtonSize;\n /** The button's color */\n color?: ButtonColor;\n /** The button's type */\n type?: ButtonInputType;\n /** Whether the button should be disabled or not */\n disabled?: boolean;\n /** Icon to place on the right */\n rightIcon?: SubIcon;\n /** Icon to place on the left */\n leftIcon?: SubIcon;\n /** the success props are used when you have async action and wants to display a success message */\n success?: boolean;\n /** Success icon name */\n successIcon?: SubIcon;\n /** Success text */\n successText?: string;\n /** loading boolean which switches the text to a loader */\n loading?: boolean;\n /** className which is applied to loader container **/\n loaderClassName?: string;\n style?: React.CSSProperties;\n /** displays the active state */\n active?: boolean;\n /** id to pass to the button */\n id?: string;\n /** adds 8px margin to the right */\n marginRight?: boolean;\n /** adds 8px margin to the left */\n marginLeft?: boolean;\n /** element id to describe the button accordingly */\n ariaLabeledBy?: string;\n /** aria label to provide important when providing only Icon */\n ariaLabel?: string;\n /** aria for a button popup */\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /** aria to be set if the popup is open */\n ariaExpanded?: boolean;\n /** aria controls - receives id for the controlled region */\n ariaControls?: string;\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /**\n * aria to be used for screen reader to know if the button is hidden\n */\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /**\n * Indicates the current \"pressed\" state of toggle buttons\n */\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /** On Button Focus callback */\n onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /** On Button Blur callback */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n rightFlat?: boolean;\n leftFlat?: boolean;\n preventClickAnimation?: boolean;\n noSidePadding?: boolean;\n /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n defaultTextColorOnPrimaryColor?: string;\n \"data-testid\"?: string;\n /** Change the focus indicator from around the button to within it */\n insetFocus?: boolean;\n /** Specifies the tab order of an element */\n tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n kind,\n onClick,\n name,\n size,\n color,\n disabled,\n rightIcon,\n leftIcon,\n success,\n successText,\n successIcon,\n style,\n loading: isLoading,\n loaderClassName,\n active,\n activeButtonClassName,\n id,\n marginRight,\n marginLeft,\n type,\n onMouseDown,\n ariaLabel,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n onFocus,\n onBlur,\n ariaLabeledBy,\n defaultTextColorOnPrimaryColor,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n blurOnMouseUp,\n \"data-testid\": dataTestId,\n insetFocus,\n tabIndex\n }: ButtonProps,\n ref\n ) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, buttonRef);\n\n const { loading } = useButtonLoading({ isLoading });\n\n useEffect(() => {\n if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n if (kind !== \"primary\") return;\n if (!buttonRef.current) return;\n\n const buttonElement = buttonRef.current;\n buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n const onMouseUp = useCallback(() => {\n const button = buttonRef.current;\n if (disabled || !button) {\n return;\n }\n if (blurOnMouseUp) {\n button.blur();\n }\n }, [disabled, buttonRef, blurOnMouseUp]);\n\n const onButtonClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onClick) {\n onClick(event);\n }\n },\n [onClick, disabled, loading, success]\n );\n\n const onMouseDownClicked = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || loading || success) {\n event.preventDefault();\n return;\n }\n\n if (onMouseDown) {\n onMouseDown(event);\n }\n },\n [onMouseDown, disabled, loading, success]\n );\n\n const classNames = useMemo(() => {\n const calculatedColor = success ? \"positive\" : color;\n return cx(\n className,\n styles.button,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n {\n [styles.success]: success,\n [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n [activeButtonClassName]: active,\n [styles.marginRight]: marginRight,\n [styles.marginLeft]: marginLeft,\n [styles.rightFlat]: rightFlat,\n [styles.leftFlat]: leftFlat,\n [styles.preventClickAnimation]: preventClickAnimation,\n [styles.noSidePadding]: noSidePadding,\n [styles.disabled]: disabled,\n [styles.insetFocusStyle]: insetFocus\n }\n );\n }, [\n success,\n color,\n className,\n size,\n kind,\n active,\n activeButtonClassName,\n marginRight,\n marginLeft,\n rightFlat,\n leftFlat,\n preventClickAnimation,\n noSidePadding,\n disabled,\n insetFocus\n ]);\n\n const buttonProps = useMemo(() => {\n const props: Record<string, unknown> = {\n ref: mergedRef,\n type,\n className: classNames,\n name,\n onMouseUp,\n style,\n onClick: onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex: disabled || ariaHidden ? -1 : tabIndex,\n \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n \"data-vibe\": ComponentVibeId.BUTTON,\n onMouseDown: onMouseDownClicked,\n \"aria-disabled\": disabled,\n \"aria-busy\": loading,\n \"aria-labelledby\": ariaLabeledBy,\n \"aria-label\": ariaLabel,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-expanded\": ariaExpanded,\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed\n };\n return props;\n }, [\n mergedRef,\n type,\n classNames,\n name,\n onMouseUp,\n style,\n onButtonClicked,\n id,\n onFocus,\n onBlur,\n tabIndex,\n dataTestId,\n onMouseDownClicked,\n disabled,\n loading,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n ariaDescribedBy,\n ariaHidden,\n ariaPressed\n ]);\n\n const iconSize = useCallback(\n (icon: SubIcon) => {\n if (typeof icon !== \"function\") return;\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return SMALL_BUTTON_ICON_SIZE;\n default:\n return BUTTON_ICON_SIZE;\n }\n },\n [size]\n );\n\n const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n const buttonContent = useMemo(\n () => (\n <>\n {leftIcon ? (\n <Icon\n iconType=\"font\"\n icon={leftIcon}\n iconSize={iconSize(leftIcon)}\n className={cx({\n [styles.leftIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n {children}\n {rightIcon ? (\n <Icon\n iconType=\"font\"\n icon={rightIcon}\n iconSize={iconSize(rightIcon)}\n className={cx({\n [styles.rightIcon]: hasRenderableChildren\n })}\n ignoreFocusStyle\n />\n ) : null}\n </>\n ),\n [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n );\n\n if (loading) {\n return (\n <button {...buttonProps} key={`${id}-loading`}>\n <span className={cx(styles.loader, loaderClassName)}>\n <Loader className={styles.loaderSvg} />\n <span aria-hidden className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </span>\n </button>\n );\n }\n\n if (success) {\n return (\n <button {...buttonProps} key={`${id}-success`}>\n <span className={styles.successContent}>\n {successIcon ? (\n <Icon\n iconType=\"font\"\n icon={successIcon}\n iconSize={iconSize(successIcon)}\n className={cx({\n [styles.leftIcon]: !!successText\n })}\n ignoreFocusStyle\n />\n ) : null}\n {successText}\n </span>\n <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n {buttonContent}\n </span>\n </button>\n );\n }\n\n return (\n <button {...buttonProps} key={`${id}-button`}>\n {buttonContent}\n </button>\n );\n }\n);\n\nButton.defaultProps = {\n name: undefined,\n style: undefined,\n kind: \"primary\",\n onClick: NOOP,\n size: \"medium\",\n color: \"primary\",\n disabled: false,\n rightIcon: null,\n leftIcon: null,\n success: false,\n successText: \"\",\n successIcon: null,\n loading: false,\n loaderClassName: undefined,\n active: false,\n marginRight: false,\n marginLeft: false,\n type: \"button\",\n onMouseDown: NOOP,\n rightFlat: false,\n leftFlat: false,\n preventClickAnimation: false,\n noSidePadding: false,\n onFocus: NOOP,\n onBlur: NOOP,\n defaultTextColorOnPrimaryColor: TRANSPARENT_COLOR,\n ariaHasPopup: undefined,\n blurOnMouseUp: true,\n ariaExpanded: undefined,\n ariaControls: undefined,\n ariaLabel: undefined,\n ariaLabeledBy: undefined,\n insetFocus: false\n};\n\ninterface ButtonStaticProps {\n sizes: typeof SIZES;\n colors: typeof ButtonColorEnum;\n kinds: typeof ButtonTypeEnum;\n types: typeof ButtonInputTypeEnum;\n inputTags: typeof ButtonInputTypeEnum;\n}\n\nexport default withStaticProps<ButtonProps, ButtonStaticProps>(Button, {\n sizes: SIZES,\n colors: ButtonColorEnum,\n kinds: ButtonTypeEnum,\n types: ButtonInputTypeEnum,\n inputTags: ButtonInputTypeEnum\n});\n"],"names":["Button","forwardRef","_ref","ref","className","children","kind","onClick","name","size","color","disabled","rightIcon","leftIcon","success","successText","successIcon","style","isLoading","loading","loaderClassName","active","activeButtonClassName","id","marginRight","marginLeft","type","onMouseDown","ariaLabel","rightFlat","leftFlat","preventClickAnimation","noSidePadding","onFocus","onBlur","ariaLabeledBy","defaultTextColorOnPrimaryColor","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","blurOnMouseUp","dataTestId","insetFocus","tabIndex","buttonRef","useRef","mergedRef","useMergeRef","useButtonLoading","useEffect","current","buttonElement","getParentBackgroundColorNotTransparent","onMouseUp","useCallback","button","blur","onButtonClicked","event","preventDefault","onMouseDownClicked","classNames","useMemo","_cx","calculatedColor","cx","styles","getStyle","camelCase","_defineProperty","insetFocusStyle","buttonProps","getTestId","ComponentDefaultTestId","BUTTON","ComponentVibeId","iconSize","icon","SMALL_BUTTON_ICON_SIZE","BUTTON_ICON_SIZE","hasRenderableChildren","React","Children","toArray","some","Boolean","buttonContent","createElement","Fragment","Icon","iconType","ignoreFocusStyle","key","concat","loader","Loader","loaderSvg","textPlaceholder","successContent","Object","assign","defaultProps","undefined","NOOP","TRANSPARENT_COLOR","withStaticProps","sizes","SIZES","colors","ButtonColorEnum","kinds","ButtonTypeEnum","types","ButtonInputTypeEnum","inputTags"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"lodash-es";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import n from"classnames";import s,{useState as l,useRef as d,useCallback as m,useEffect as c,useMemo as u}from"react";import{SwitchTransition as f,CSSTransition as p}from"react-transition-group";import v from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import{CounterSize as j,CounterColor as x,CounterType as h}from"./CounterConstants.js";import{withStaticPropsWithoutForwardRef as y}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import A from"./Counter.module.scss.js";var N=y((function(j){var x=j.className,h=j.counterClassName,y=j.count,N=void 0===y?0:y,k=j.size,C=void 0===k?"large":k,g=j.kind,w=void 0===g?"fill":g,L=j.color,M=void 0===L?"primary":L,R=j.maxDigits,z=void 0===R?3:R,D=j.ariaLabeledBy,P=void 0===D?"":D,T=j.ariaLabel,B=void 0===T?"":T,H=j.id,O=void 0===H?"":H,U=j.prefix,_=void 0===U?"":U,F=j.onMouseDown,I=void 0===F?b:F,S=j.noAnimation,q=void 0!==S&&S,G=j["data-testid"],J=l(!1),K=e(J,2),Q=K[0],V=K[1],W=d(null),X=d(null),Y=m((function(){V(!0)}),[V]),Z=m((function(){V(!1)}),[V]);v({eventName:"animationend",callback:Z,ref:W});var $=E();c((function(){$.current&&Y()}),[N,$,Y]),c((function(){z>0||console.error("Max digits must be a positive number")}),[z]);var ee=u((function(){return n(A.counter,i(A,o("size-"+C)),i(A,o("kind-"+w)),i(A,o("color-"+M)),t({},A.withAnimation,Q),h)}),[C,w,M,Q,h]),te="counter"+(O?"-".concat(O):""),oe=(null==N?void 0:(""+N).length)>z?"".concat(Math.pow(10,z)-1,"+"):N+"",ie=s.createElement("span",{id:te,"data-testid":G||r(a.COUNTER,O)},_+oe);return s.createElement("span",{className:x,"aria-label":"".concat(B," ").concat(oe),"aria-labelledby":P,onMouseDown:I},s.createElement("div",{className:ee,"aria-label":oe,ref:W},q?ie:s.createElement(f,{mode:"out-in"},s.createElement(p,{key:oe,nodeRef:X,classNames:{enter:A.fadeEnter,enterActive:A.fadeEnterActive,exit:A.fadeExit,exitActive:A.fadeExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)}},s.createElement("span",{ref:X,id:te,"data-testid":G||r(a.COUNTER,O)},_+oe)))))}),{sizes:j,colors:x,kinds:h});export{N as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"lodash-es";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import n from"classnames";import s,{useState as l,useRef as d,useCallback as m,useEffect as c,useMemo as u}from"react";import{SwitchTransition as p,CSSTransition as f}from"react-transition-group";import v from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import{CounterSize as j,CounterColor as x,CounterType as h}from"./CounterConstants.js";import{withStaticPropsWithoutForwardRef as y}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import A from"./Counter.module.scss.js";var N=y((function(j){var x=j.className,h=j.counterClassName,y=j.count,N=void 0===y?0:y,k=j.size,C=void 0===k?"large":k,g=j.kind,w=void 0===g?"fill":g,L=j.color,M=void 0===L?"primary":L,z=j.maxDigits,D=void 0===z?3:z,P=j.ariaLabeledBy,R=void 0===P?"":P,T=j.ariaLabel,B=void 0===T?"":T,H=j.id,O=void 0===H?"":H,U=j.prefix,_=void 0===U?"":U,F=j.onMouseDown,I=void 0===F?b:F,S=j.noAnimation,q=void 0!==S&&S,G=j["data-testid"],J=l(!1),K=e(J,2),Q=K[0],V=K[1],W=d(null),X=m((function(){V(!0)}),[V]),Y=m((function(){V(!1)}),[V]);v({eventName:"animationend",callback:Y,ref:W});var Z=E();c((function(){Z.current&&X()}),[N,Z,X]),c((function(){D>0||console.error("Max digits must be a positive number")}),[D]);var $=u((function(){return n(A.counter,i(A,o("size-"+C)),i(A,o("kind-"+w)),i(A,o("color-"+M)),t({},A.withAnimation,Q),h)}),[C,w,M,Q,h]),ee="counter"+(O?"-".concat(O):""),te=(null==N?void 0:(""+N).length)>D?"".concat(Math.pow(10,D)-1,"+"):N+"",oe=s.createElement("span",{id:ee,"data-testid":G||r(a.COUNTER,O)},_+te);return s.createElement("span",{className:x,"aria-label":"".concat(B," ").concat(te),"aria-labelledby":R,onMouseDown:I},s.createElement("div",{className:$,"aria-label":te,ref:W},q?oe:s.createElement(p,{mode:"out-in"},s.createElement(f,{key:te,classNames:{enter:A.fadeEnter,enterActive:A.fadeEnterActive,exit:A.fadeExit,exitActive:A.fadeExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)}},s.createElement("span",{id:ee,"data-testid":G||r(a.COUNTER,O)},_+te)))))}),{sizes:j,colors:x,kinds:h});export{N as default};
2
2
  //# sourceMappingURL=Counter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport {\n CounterColor as CounterColorEnum,\n CounterSize as CounterSizeEnum,\n CounterType as CounterTypeEnum\n} from \"./CounterConstants\";\nimport { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\n\nexport interface CounterProps extends VibeComponentProps {\n /**\n * The ID of the element describing the counter.\n */\n ariaLabeledBy?: string;\n /**\n * Class name applied to the counter element.\n */\n counterClassName?: string;\n /**\n * The numeric value displayed in the counter.\n */\n count?: number;\n /**\n * The label of the counter for accessibility.\n */\n ariaLabel?: string;\n /**\n * The size of the counter.\n */\n size?: CounterSize;\n /**\n * The visual style of the counter.\n */\n kind?: CounterType;\n /**\n * The color of the counter.\n */\n color?: CounterColor;\n /**\n * The maximum number of digits displayed before truncation.\n */\n maxDigits?: number;\n /**\n * Text prepended to the counter value.\n */\n prefix?: string;\n /**\n * Callback fired when the counter is clicked.\n */\n onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n /**\n * If true, disables counter animations.\n */\n noAnimation?: boolean;\n}\n\nconst Counter = ({\n className,\n counterClassName,\n count = 0,\n size = \"large\",\n kind = \"fill\",\n color = \"primary\",\n maxDigits = 3,\n ariaLabeledBy = \"\",\n ariaLabel = \"\",\n id = \"\",\n prefix = \"\",\n onMouseDown = NOOP,\n noAnimation = false,\n \"data-testid\": dataTestId\n}: CounterProps) => {\n const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n const ref = useRef<HTMLDivElement>(null);\n const nodeRef = useRef<HTMLSpanElement>(null);\n\n const setCountChangedAnimationActive = useCallback(() => {\n setCountChangeAnimationState(true);\n }, [setCountChangeAnimationState]);\n\n const setCountChangedAnimationNotActive = useCallback(() => {\n setCountChangeAnimationState(false);\n }, [setCountChangeAnimationState]);\n\n useEventListener({\n eventName: \"animationend\",\n callback: setCountChangedAnimationNotActive,\n ref\n });\n\n const isAfterFirstRender = useAfterFirstRender();\n\n useEffect(() => {\n if (isAfterFirstRender.current) {\n setCountChangedAnimationActive();\n }\n }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n useEffect(() => {\n if (maxDigits <= 0) {\n console.error(\"Max digits must be a positive number\");\n }\n }, [maxDigits]);\n\n const classNames = useMemo(() => {\n return cx(\n styles.counter,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.withAnimation]: countChangeAnimationState\n },\n counterClassName\n );\n }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n const counterId = \"counter\" + (id ? `-${id}` : \"\");\n const countText = count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : String(count);\n const counter = (\n <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n );\n\n return (\n <span\n className={className}\n aria-label={`${ariaLabel} ${countText}`}\n aria-labelledby={ariaLabeledBy}\n onMouseDown={onMouseDown}\n >\n <div className={classNames} aria-label={countText} ref={ref}>\n {noAnimation ? (\n counter\n ) : (\n <SwitchTransition mode=\"out-in\">\n <CSSTransition\n key={countText}\n nodeRef={nodeRef}\n classNames={{\n enter: styles.fadeEnter,\n enterActive: styles.fadeEnterActive,\n exit: styles.fadeExit,\n exitActive: styles.fadeExitActive\n }}\n // @ts-expect-error @definitelyTyped typings expecting a single parameter for some reason when the function passed here is called with two parameters\n // See https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L522-L534\n addEndListener={(node: HTMLElement, done: () => void) => {\n node.addEventListener(\"transitionend\", done, false);\n }}\n >\n <span\n ref={nodeRef}\n id={counterId}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}\n >\n {prefix + countText}\n </span>\n </CSSTransition>\n </SwitchTransition>\n )}\n </div>\n </span>\n );\n};\n\ninterface CounterStaticProps {\n sizes: typeof CounterSizeEnum;\n colors: typeof CounterColorEnum;\n kinds: typeof CounterTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<CounterProps, CounterStaticProps>(Counter, {\n sizes: CounterSizeEnum,\n colors: CounterColorEnum,\n kinds: CounterTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","className","counterClassName","_ref$count","count","_ref$size","size","_ref$kind","kind","_ref$color","color","_ref$maxDigits","maxDigits","_ref$ariaLabeledBy","ariaLabeledBy","_ref$ariaLabel","ariaLabel","_ref$id","id","_ref$prefix","prefix","_ref$onMouseDown","onMouseDown","NOOP","_ref$noAnimation","noAnimation","dataTestId","_useState","useState","_useState2","_slicedToArray","countChangeAnimationState","setCountChangeAnimationState","ref","useRef","nodeRef","setCountChangedAnimationActive","useCallback","setCountChangedAnimationNotActive","useEventListener","eventName","callback","isAfterFirstRender","useAfterFirstRender","useEffect","current","console","error","classNames","useMemo","cx","styles","counter","getStyle","camelCase","_defineProperty","withAnimation","counterId","concat","countText","length","Math","pow","String","React","createElement","getTestId","ComponentDefaultTestId","COUNTER","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","node","done","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"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"}
1
+ {"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport {\n CounterColor as CounterColorEnum,\n CounterSize as CounterSizeEnum,\n CounterType as CounterTypeEnum\n} from \"./CounterConstants\";\nimport { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\n\nexport interface CounterProps extends VibeComponentProps {\n /**\n * The ID of the element describing the counter.\n */\n ariaLabeledBy?: string;\n /**\n * Class name applied to the counter element.\n */\n counterClassName?: string;\n /**\n * The numeric value displayed in the counter.\n */\n count?: number;\n /**\n * The label of the counter for accessibility.\n */\n ariaLabel?: string;\n /**\n * The size of the counter.\n */\n size?: CounterSize;\n /**\n * The visual style of the counter.\n */\n kind?: CounterType;\n /**\n * The color of the counter.\n */\n color?: CounterColor;\n /**\n * The maximum number of digits displayed before truncation.\n */\n maxDigits?: number;\n /**\n * Text prepended to the counter value.\n */\n prefix?: string;\n /**\n * Callback fired when the counter is clicked.\n */\n onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n /**\n * If true, disables counter animations.\n */\n noAnimation?: boolean;\n}\n\nconst Counter = ({\n className,\n counterClassName,\n count = 0,\n size = \"large\",\n kind = \"fill\",\n color = \"primary\",\n maxDigits = 3,\n ariaLabeledBy = \"\",\n ariaLabel = \"\",\n id = \"\",\n prefix = \"\",\n onMouseDown = NOOP,\n noAnimation = false,\n \"data-testid\": dataTestId\n}: CounterProps) => {\n const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const setCountChangedAnimationActive = useCallback(() => {\n setCountChangeAnimationState(true);\n }, [setCountChangeAnimationState]);\n\n const setCountChangedAnimationNotActive = useCallback(() => {\n setCountChangeAnimationState(false);\n }, [setCountChangeAnimationState]);\n\n useEventListener({\n eventName: \"animationend\",\n callback: setCountChangedAnimationNotActive,\n ref\n });\n\n const isAfterFirstRender = useAfterFirstRender();\n\n useEffect(() => {\n if (isAfterFirstRender.current) {\n setCountChangedAnimationActive();\n }\n }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n useEffect(() => {\n if (maxDigits <= 0) {\n console.error(\"Max digits must be a positive number\");\n }\n }, [maxDigits]);\n\n const classNames = useMemo(() => {\n return cx(\n styles.counter,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.withAnimation]: countChangeAnimationState\n },\n counterClassName\n );\n }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n const counterId = \"counter\" + (id ? `-${id}` : \"\");\n const countText = count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : String(count);\n const counter = (\n <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n );\n\n return (\n <span\n className={className}\n aria-label={`${ariaLabel} ${countText}`}\n aria-labelledby={ariaLabeledBy}\n onMouseDown={onMouseDown}\n >\n <div className={classNames} aria-label={countText} ref={ref}>\n {noAnimation ? (\n counter\n ) : (\n <SwitchTransition mode=\"out-in\">\n <CSSTransition\n key={countText}\n classNames={{\n enter: styles.fadeEnter,\n enterActive: styles.fadeEnterActive,\n exit: styles.fadeExit,\n exitActive: styles.fadeExitActive\n }}\n // @ts-expect-error @definitelyTyped typings expecting a single parameter for some reason when the function passed here is called with two parameters\n // See https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L522-L534\n addEndListener={(node: HTMLElement, done: () => void) => {\n node.addEventListener(\"transitionend\", done, false);\n }}\n >\n <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n </CSSTransition>\n </SwitchTransition>\n )}\n </div>\n </span>\n );\n};\n\ninterface CounterStaticProps {\n sizes: typeof CounterSizeEnum;\n colors: typeof CounterColorEnum;\n kinds: typeof CounterTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<CounterProps, CounterStaticProps>(Counter, {\n sizes: CounterSizeEnum,\n colors: CounterColorEnum,\n kinds: CounterTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","className","counterClassName","_ref$count","count","_ref$size","size","_ref$kind","kind","_ref$color","color","_ref$maxDigits","maxDigits","_ref$ariaLabeledBy","ariaLabeledBy","_ref$ariaLabel","ariaLabel","_ref$id","id","_ref$prefix","prefix","_ref$onMouseDown","onMouseDown","NOOP","_ref$noAnimation","noAnimation","dataTestId","_useState","useState","_useState2","_slicedToArray","countChangeAnimationState","setCountChangeAnimationState","ref","useRef","setCountChangedAnimationActive","useCallback","setCountChangedAnimationNotActive","useEventListener","eventName","callback","isAfterFirstRender","useAfterFirstRender","useEffect","current","console","error","classNames","useMemo","cx","styles","counter","getStyle","camelCase","_defineProperty","withAnimation","counterId","concat","countText","length","Math","pow","String","React","createElement","getTestId","ComponentDefaultTestId","COUNTER","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","node","done","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"43BAiEA,IAgHeA,EAAAA,GAhHC,SAAHC,GAeM,IAdjBC,EAASD,EAATC,UACAC,EAAgBF,EAAhBE,iBAAgBC,EAAAH,EAChBI,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAL,EACTM,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACdQ,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAT,EACbU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,EAACA,EAAAE,EAAAb,EACbc,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EACdkB,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAnB,EACPoB,OAAAA,OAAS,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACXsB,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAxB,EAClByB,YAAAA,OAAc,IAAHD,GAAQA,EACJE,EAAU1B,EAAzB,eAEA2B,EAAkEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAA1EI,EAAyBF,EAAA,GAAEG,EAA4BH,EAAA,GAExDI,EAAMC,EAAuB,MAE7BC,EAAiCC,GAAY,WACjDJ,GAA6B,EAC/B,GAAG,CAACA,IAEEK,EAAoCD,GAAY,WACpDJ,GAA6B,EAC/B,GAAG,CAACA,IAEJM,EAAiB,CACfC,UAAW,eACXC,SAAUH,EACVJ,IAAAA,IAGF,IAAMQ,EAAqBC,IAE3BC,GAAU,WACJF,EAAmBG,SACrBT,GAEH,GAAE,CAAC/B,EAAOqC,EAAoBN,IAE/BQ,GAAU,WACJ/B,EAAa,GACfiC,QAAQC,MAAM,uCAElB,GAAG,CAAClC,IAEJ,IAAMmC,EAAaC,GAAQ,WACzB,OAAOC,EACLC,EAAOC,QACPC,EAASF,EAAQG,EAAU,QAAU/C,IACrC8C,EAASF,EAAQG,EAAU,QAAU7C,IACrC4C,EAASF,EAAQG,EAAU,SAAW3C,IAAO4C,EAAA,CAAA,EAE1CJ,EAAOK,cAAgBxB,GAE1B7B,EAEJ,GAAG,CAACI,EAAME,EAAME,EAAOqB,EAA2B7B,IAE5CsD,GAAY,WAAatC,EAAEuC,IAAAA,OAAOvC,GAAO,IACzCwC,IAAYtD,aAAK,GAALA,MAAkBuD,QAAS/C,EAAS,GAAA6C,OAAMG,KAAAC,IAAA,GAAMjD,GAAY,OAAcR,EAAP0D,GAC/EX,GACJY,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAS,cAAe9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,IAId,OACEK,EACEC,cAAA,OAAA,CAAA/D,UAAWA,yBACIe,OAASyC,OAAIC,IACX,kBAAA5C,EACjBQ,YAAaA,GAEbyC,EAAKC,cAAA,MAAA,CAAA/D,UAAW8C,EAAwB,aAAAW,GAAWzB,IAAKA,GACrDR,EACC0B,GAEAY,EAAAC,cAACI,EAAgB,CAACC,KAAK,UACrBN,EAAAC,cAACM,EACC,CAAAC,IAAKb,GACLX,WAAY,CACVyB,MAAOtB,EAAOuB,UACdC,YAAaxB,EAAOyB,gBACpBC,KAAM1B,EAAO2B,SACbC,WAAY5B,EAAO6B,gBAIrBC,eAAgB,SAACC,EAAmBC,GAClCD,EAAKE,iBAAiB,gBAAiBD,GAAM,EAC/C,GAEAnB,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAwB,cAAA9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,OAQ1B,GAQ2F,CACzF0B,MAAOC,EACPC,OAAQC,EACRC,MAAOC"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as s,useEffect as r,cloneElement as i}from"react";import n from"classnames";import{camelCase as p}from"lodash-es";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import y from"./DialogContent.module.scss.js";import k from"../../../hooks/useDisableScroll/index.js";var C={},x=[f.ESCAPE],h=t((function(t,f){var h=t.onEsc,E=void 0===h?m:h,b=t.children,j=t.position,A=t.wrapperClassName,N=t.isOpen,g=void 0!==N&&N,M=t.startingEdge,S=t.animationType,w=void 0===S?"expand":S,O=t.onMouseEnter,D=void 0===O?m:O,H=t.onMouseLeave,L=void 0===H?m:H,P=t.onClickOutside,T=void 0===P?m:P,R=t.onClick,_=void 0===R?m:R,z=t.onContextMenu,B=void 0===z?m:z,K=t.showDelay,W=t.styleObject,q=void 0===W?C:W,F=t.isReferenceHidden,G=t.hasTooltip,I=void 0!==G&&G,J=t.containerSelector,Q=t.disableContainerScroll,U=void 0!==Q&&Q,V=t["data-testid"],X=a(null),Y=s((function(e){if(g)return T(e,"clickoutside")}),[g,T]),Z=s((function(e){g&&B(e)}),[g,B]);u({keys:x,callback:E}),c({callback:Y,ref:X}),c({eventName:"contextmenu",callback:Z,ref:X});var $=k("string"==typeof U?U:J),ee=$.disableScroll,oe=$.enableScroll;r((function(){U&&(g?ee():oe())}),[U,ee,oe,g]);var te={classNames:void 0};switch(w){case"expand":te.classNames={appear:y.expandAppear,appearActive:y.expandAppearActive,exit:y.expandExit};break;case"opacity-and-slide":te.classNames={appear:y.opacitySlideAppear,appearActive:y.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",y.contentWrapper,A),ref:f,"data-testid":V,style:q,onClickCapture:_,"data-popper-reference-hidden":F},o.createElement(l,{classNames:te.classNames,nodeRef:X,in:g,appear:!!w,timeout:K},o.createElement("div",{className:n(y.contentComponent,v(y,p(j)),e(e({},v(y,p("edge-"+M)),M),y.hasTooltip,I)),ref:X},o.Children.toArray(b).map((function(e){return i(e,{onMouseEnter:d([e.props.onMouseEnter,D]),onMouseLeave:d([e.props.onMouseLeave,L])})})))))}));export{h as default};
1
+ import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as t,useRef as a,useCallback as r,useEffect as i,cloneElement as s}from"react";import n from"classnames";import{camelCase as p}from"lodash-es";import{CSSTransition as l}from"react-transition-group";import c from"../../../hooks/useClickOutside/index.js";import{chainFunctions as d,NOOP as m}from"../../../utils/function-utils.js";import u from"../../../hooks/useKeyEvent/index.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{getStyle as v}from"../../../helpers/typesciptCssModulesHelper.js";import y from"./DialogContent.module.scss.js";import k from"../../../hooks/useDisableScroll/index.js";var C={},x=[f.ESCAPE],h=t((function(t,f){var h=t.onEsc,E=void 0===h?m:h,b=t.children,j=t.position,A=t.wrapperClassName,g=t.isOpen,M=void 0!==g&&g,S=t.startingEdge,N=t.animationType,O=void 0===N?"expand":N,w=t.onMouseEnter,D=void 0===w?m:w,H=t.onMouseLeave,L=void 0===H?m:H,P=t.onClickOutside,T=void 0===P?m:P,_=t.onClick,z=void 0===_?m:_,B=t.onContextMenu,K=void 0===B?m:B,R=t.showDelay,W=t.styleObject,q=void 0===W?C:W,F=t.isReferenceHidden,G=t.hasTooltip,I=void 0!==G&&G,J=t.containerSelector,Q=t.disableContainerScroll,U=void 0!==Q&&Q,V=t["data-testid"],X=a(null),Y=r((function(e){if(M)return T(e,"clickoutside")}),[M,T]),Z=r((function(e){M&&K(e)}),[M,K]);u({keys:x,callback:E}),c({callback:Y,ref:X}),c({eventName:"contextmenu",callback:Z,ref:X});var $=k("string"==typeof U?U:J),ee=$.disableScroll,oe=$.enableScroll;i((function(){U&&(M?ee():oe())}),[U,ee,oe,M]);var te={classNames:void 0};switch(O){case"expand":te.classNames={appear:y.expandAppear,appearActive:y.expandAppearActive,exit:y.expandExit};break;case"opacity-and-slide":te.classNames={appear:y.opacitySlideAppear,appearActive:y.opacitySlideAppearActive}}return o.createElement("span",{className:n("monday-style-dialog-content-wrapper",y.contentWrapper,A),ref:f,"data-testid":V,style:q,onClickCapture:z,"data-popper-reference-hidden":F},o.createElement(l,Object.assign({},te,{in:M,appear:!!O,timeout:R}),o.createElement("div",{className:n(y.contentComponent,v(y,p(j)),e(e({},v(y,p("edge-"+S)),S),y.hasTooltip,I)),ref:X},o.Children.toArray(b).map((function(e){return s(e,{onMouseEnter:d([e.props.onMouseEnter,D]),onMouseLeave:d([e.props.onMouseLeave,L])})})))))}));export{h as default};
2
2
  //# sourceMappingURL=DialogContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.js","sources":["../../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, { cloneElement, CSSProperties, forwardRef, ReactElement, useCallback, useEffect, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { DialogAnimationType, DialogTriggerEvent } from \"../Dialog.types\";\nimport * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const ref = useRef<HTMLDivElement>(null);\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n useClickOutside({ callback: onOutSideClick, ref });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={forwardRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition\n classNames={transitionOptions.classNames}\n nodeRef={ref}\n in={isOpen}\n appear={!!animationType}\n timeout={showDelay}\n >\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={ref}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","ref","useRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","nodeRef","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}
1
+ {"version":3,"file":"DialogContent.js","sources":["../../../../../../src/components/Dialog/DialogContent/DialogContent.tsx"],"sourcesContent":["import React, { cloneElement, CSSProperties, forwardRef, ReactElement, useCallback, useEffect, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport useClickOutside from \"../../../hooks/useClickOutside\";\nimport { chainFunctions, NOOP } from \"../../../utils/function-utils\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { VibeComponentProps } from \"../../../types\";\nimport { keyCodes } from \"../../../constants\";\nimport { DialogAnimationType, DialogTriggerEvent } from \"../Dialog.types\";\nimport * as PopperJS from \"@popperjs/core\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../../hooks/useDisableScroll\";\n\nconst EMPTY_OBJECT = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n /**\n * The content inside the dialog.\n */\n children?: ReactElement | ReactElement[];\n /**\n * The placement of the dialog relative to the reference element.\n */\n position?: PopperJS.Placement;\n /**\n * Class name applied to the dialog wrapper.\n */\n wrapperClassName?: string;\n /**\n * If true, the dialog is open.\n */\n isOpen?: boolean;\n // TODO: [breaking] use type\n /**\n * The starting edge of the dialog.\n */\n startingEdge?: any;\n /**\n * The animation type used for showing/hiding the dialog.\n */\n animationType?: DialogAnimationType;\n /**\n * Callback fired when the Escape key is pressed.\n */\n onEsc?: (event: React.KeyboardEvent) => void;\n /**\n * Callback fired when the mouse enters the dialog.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse leaves the dialog.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when clicking outside the dialog.\n */\n onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n /**\n * Callback fired when clicking inside the dialog.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Delay before showing the dialog.\n */\n showDelay?: number;\n /**\n * Inline styles applied to the dialog.\n */\n styleObject?: CSSProperties;\n /**\n * If true, hides the reference element when the dialog is shown.\n */\n isReferenceHidden?: boolean;\n /**\n * If true, applies tooltip arrow to the dialog.\n */\n hasTooltip?: boolean;\n /**\n * The CSS selector of the container where the dialog should be rendered.\n */\n containerSelector?: string;\n /**\n * If true, disables scrolling in the container when the dialog is open.\n */\n disableContainerScroll?: boolean | string;\n /**\n * Callback fired when the context menu (right-click) event occurs outside the dialog.\n */\n onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef(\n (\n {\n onEsc = NOOP,\n children,\n position,\n wrapperClassName,\n isOpen = false,\n startingEdge,\n animationType = \"expand\",\n onMouseEnter = NOOP,\n onMouseLeave = NOOP,\n onClickOutside = NOOP,\n onClick = NOOP,\n onContextMenu = NOOP,\n showDelay,\n styleObject = EMPTY_OBJECT,\n isReferenceHidden,\n hasTooltip = false,\n containerSelector,\n disableContainerScroll = false,\n \"data-testid\": dataTestId\n }: DialogContentProps,\n forwardRef: React.ForwardedRef<HTMLElement>\n ) => {\n const ref = useRef(null);\n const onOutSideClick = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n return onClickOutside(event, \"clickoutside\");\n }\n },\n [isOpen, onClickOutside]\n );\n const overrideOnContextMenu = useCallback(\n (event: React.MouseEvent) => {\n if (isOpen) {\n onContextMenu(event);\n }\n },\n [isOpen, onContextMenu]\n );\n useKeyEvent({ keys: ESCAPE_KEYS, callback: onEsc });\n useClickOutside({ callback: onOutSideClick, ref });\n useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref });\n const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n useEffect(() => {\n if (disableContainerScroll) {\n if (isOpen) {\n disableScroll();\n } else {\n enableScroll();\n }\n }\n }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n switch (animationType) {\n case \"expand\":\n transitionOptions.classNames = {\n appear: styles.expandAppear,\n appearActive: styles.expandAppearActive,\n exit: styles.expandExit\n };\n break;\n case \"opacity-and-slide\":\n transitionOptions.classNames = {\n appear: styles.opacitySlideAppear,\n appearActive: styles.opacitySlideAppearActive\n };\n break;\n }\n return (\n <span\n // don't remove old classname - override from Monolith\n className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n ref={forwardRef}\n data-testid={dataTestId}\n style={styleObject}\n onClickCapture={onClick}\n data-popper-reference-hidden={isReferenceHidden}\n >\n <CSSTransition {...transitionOptions} in={isOpen} appear={!!animationType} timeout={showDelay}>\n <div\n className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n [styles.hasTooltip]: hasTooltip\n })}\n ref={ref}\n >\n {React.Children.toArray(children).map((child: ReactElement) => {\n return cloneElement(child, {\n onMouseEnter: chainFunctions([child.props.onMouseEnter, onMouseEnter]),\n onMouseLeave: chainFunctions([child.props.onMouseLeave, onMouseLeave])\n });\n })}\n </div>\n </CSSTransition>\n </span>\n );\n }\n);\n\nexport default DialogContent;\n"],"names":["EMPTY_OBJECT","ESCAPE_KEYS","keyCodes","ESCAPE","DialogContent","forwardRef","_ref","_ref$onEsc","onEsc","NOOP","children","position","wrapperClassName","_ref$isOpen","isOpen","startingEdge","_ref$animationType","animationType","_ref$onMouseEnter","onMouseEnter","_ref$onMouseLeave","onMouseLeave","_ref$onClickOutside","onClickOutside","_ref$onClick","onClick","_ref$onContextMenu","onContextMenu","showDelay","_ref$styleObject","styleObject","isReferenceHidden","_ref$hasTooltip","hasTooltip","containerSelector","_ref$disableContainer","disableContainerScroll","dataTestId","ref","useRef","onOutSideClick","useCallback","event","overrideOnContextMenu","useKeyEvent","keys","callback","useClickOutside","eventName","_useDisableScroll","useDisableScroll","disableScroll","enableScroll","useEffect","transitionOptions","classNames","undefined","appear","styles","expandAppear","appearActive","expandAppearActive","exit","expandExit","opacitySlideAppear","opacitySlideAppearActive","React","createElement","className","cx","contentWrapper","style","onClickCapture","CSSTransition","Object","assign","in","timeout","contentComponent","getStyle","camelCase","_defineProperty","Children","toArray","map","child","cloneElement","chainFunctions","props"],"mappings":"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"}