@transferwise/components 46.139.0 → 46.140.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/build/main.css +17 -281
  2. package/build/popover/Popover.js +2 -2
  3. package/build/popover/Popover.js.map +1 -1
  4. package/build/popover/Popover.mjs +2 -2
  5. package/build/popover/Popover.mjs.map +1 -1
  6. package/build/select/Select.js +0 -3
  7. package/build/select/Select.js.map +1 -1
  8. package/build/select/Select.mjs +0 -3
  9. package/build/select/Select.mjs.map +1 -1
  10. package/build/styles/css/neptune.css +11 -275
  11. package/build/styles/less/neptune-tokens.less +2 -2
  12. package/build/styles/main.css +17 -281
  13. package/build/styles/props/neptune-tokens.css +1 -1
  14. package/build/styles/styles/less/neptune.css +11 -275
  15. package/build/types/select/Select.d.ts.map +1 -1
  16. package/package.json +1 -1
  17. package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx +82 -0
  18. package/src/main.css +17 -281
  19. package/src/modal/Modal.test.story.tsx +61 -0
  20. package/src/popover/Popover.story.tsx +45 -0
  21. package/src/popover/Popover.test.story.tsx +124 -0
  22. package/src/popover/Popover.test.tsx +55 -0
  23. package/src/popover/Popover.tsx +2 -2
  24. package/src/select/Select.test.story.tsx +74 -1
  25. package/src/select/Select.tsx +0 -3
  26. package/src/styles/less/neptune.css +11 -275
package/build/main.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
3
+ * Generated on Wed, 13 May 2026 12:45:11 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,7 +144,7 @@
144
144
 
145
145
  /**
146
146
  * Do not edit directly, this file was auto-generated.
147
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
147
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
148
148
  */
149
149
 
150
150
  .np-theme-personal {
@@ -326,75 +326,9 @@
326
326
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
327
327
  }
328
328
 
329
- /**
330
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
331
- *
332
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
333
- */
334
-
335
- @media (max-width: 320px) {
336
- .np-theme-personal {
337
- --delta: 2;
338
- --size-4: calc(4px / var(--delta));
339
- --size-5: calc(5px / var(--delta));
340
- --size-8: calc(8px / var(--delta));
341
- --size-10: calc(10px / var(--delta));
342
- --size-12: calc(12px / var(--delta));
343
- --size-14: calc(14px / var(--delta));
344
- --size-16: calc(16px / var(--delta));
345
- --size-24: calc(24px / var(--delta));
346
- --size-32: calc(32px / var(--delta));
347
- --size-40: calc(40px / var(--delta));
348
- --size-48: calc(48px / var(--delta));
349
- --size-52: calc(52px / var(--delta));
350
- --size-56: calc(56px / var(--delta));
351
- --size-60: calc(60px / var(--delta));
352
- --size-64: calc(64px / var(--delta));
353
- --size-72: calc(72px / var(--delta));
354
- --size-80: calc(80px / var(--delta));
355
- --size-88: calc(88px / var(--delta));
356
- --size-96: calc(96px / var(--delta));
357
- --size-104: calc(104px / var(--delta));
358
- --size-112: calc(112px / var(--delta));
359
- --size-120: calc(120px / var(--delta));
360
- --size-126: calc(126px / var(--delta));
361
- --size-128: calc(128px / var(--delta));
362
- --size-146: calc(146px / var(--delta));
363
- --size-154: calc(154px / var(--delta));
364
- --size-x-small: calc(24px / var(--delta));
365
- --size-small: calc(32px / var(--delta));
366
- --size-medium: calc(40px / var(--delta));
367
- --size-large: calc(48px / var(--delta));
368
- --size-x-large: calc(56px / var(--delta));
369
- --size-2x-large: calc(72px / var(--delta));
370
- --space-content-horizontal: calc(16px / var(--delta));
371
- --space-small: calc(16px / var(--delta));
372
- --space-medium: calc(32px / var(--delta));
373
- --space-large: calc(40px / var(--delta));
374
- --space-x-large: calc(56px / var(--delta));
375
- --padding-x-small: var(--size-8);
376
- --padding-small: var(--size-16);
377
- --padding-medium: var(--size-24);
378
- --padding-large: var(--size-32);
379
- --input-height-base: var(--size-32);
380
- --input-height-large: var(--input-height-small);
381
- --input-padding: var(--input-padding-small);
382
- --input-padding-large: var(--input-padding-small);
383
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
384
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
385
- --btn-height: var(--input-height-base);
386
- --btn-lg-height: var(--btn-height);
387
- --btn-sm-height: var(--btn-height);
388
- --btn-padding: var(--input-padding);
389
- --btn-sm-padding: var(--btn-padding);
390
- --btn-lg-padding: var(--btn-padding);
391
- --dropdown-link-padding: var(--size-12) var(--size-16);
392
- }
393
- }
394
-
395
329
  /**
396
330
  * Do not edit directly, this file was auto-generated.
397
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
331
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
398
332
  */
399
333
 
400
334
  .np-theme-personal--forest-green {
@@ -576,75 +510,9 @@
576
510
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
577
511
  }
578
512
 
579
- /**
580
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
581
- *
582
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
583
- */
584
-
585
- @media (max-width: 320px) {
586
- .np-theme-personal {
587
- --delta: 2;
588
- --size-4: calc(4px / var(--delta));
589
- --size-5: calc(5px / var(--delta));
590
- --size-8: calc(8px / var(--delta));
591
- --size-10: calc(10px / var(--delta));
592
- --size-12: calc(12px / var(--delta));
593
- --size-14: calc(14px / var(--delta));
594
- --size-16: calc(16px / var(--delta));
595
- --size-24: calc(24px / var(--delta));
596
- --size-32: calc(32px / var(--delta));
597
- --size-40: calc(40px / var(--delta));
598
- --size-48: calc(48px / var(--delta));
599
- --size-52: calc(52px / var(--delta));
600
- --size-56: calc(56px / var(--delta));
601
- --size-60: calc(60px / var(--delta));
602
- --size-64: calc(64px / var(--delta));
603
- --size-72: calc(72px / var(--delta));
604
- --size-80: calc(80px / var(--delta));
605
- --size-88: calc(88px / var(--delta));
606
- --size-96: calc(96px / var(--delta));
607
- --size-104: calc(104px / var(--delta));
608
- --size-112: calc(112px / var(--delta));
609
- --size-120: calc(120px / var(--delta));
610
- --size-126: calc(126px / var(--delta));
611
- --size-128: calc(128px / var(--delta));
612
- --size-146: calc(146px / var(--delta));
613
- --size-154: calc(154px / var(--delta));
614
- --size-x-small: calc(24px / var(--delta));
615
- --size-small: calc(32px / var(--delta));
616
- --size-medium: calc(40px / var(--delta));
617
- --size-large: calc(48px / var(--delta));
618
- --size-x-large: calc(56px / var(--delta));
619
- --size-2x-large: calc(72px / var(--delta));
620
- --space-content-horizontal: calc(16px / var(--delta));
621
- --space-small: calc(16px / var(--delta));
622
- --space-medium: calc(32px / var(--delta));
623
- --space-large: calc(40px / var(--delta));
624
- --space-x-large: calc(56px / var(--delta));
625
- --padding-x-small: var(--size-8);
626
- --padding-small: var(--size-16);
627
- --padding-medium: var(--size-24);
628
- --padding-large: var(--size-32);
629
- --input-height-base: var(--size-32);
630
- --input-height-large: var(--input-height-small);
631
- --input-padding: var(--input-padding-small);
632
- --input-padding-large: var(--input-padding-small);
633
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
634
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
635
- --btn-height: var(--input-height-base);
636
- --btn-lg-height: var(--btn-height);
637
- --btn-sm-height: var(--btn-height);
638
- --btn-padding: var(--input-padding);
639
- --btn-sm-padding: var(--btn-padding);
640
- --btn-lg-padding: var(--btn-padding);
641
- --dropdown-link-padding: var(--size-12) var(--size-16);
642
- }
643
- }
644
-
645
513
  /**
646
514
  * Do not edit directly, this file was auto-generated.
647
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
515
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
648
516
  */
649
517
 
650
518
  .np-theme-personal--bright-green {
@@ -826,75 +694,9 @@
826
694
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
827
695
  }
828
696
 
829
- /**
830
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
831
- *
832
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
833
- */
834
-
835
- @media (max-width: 320px) {
836
- .np-theme-personal {
837
- --delta: 2;
838
- --size-4: calc(4px / var(--delta));
839
- --size-5: calc(5px / var(--delta));
840
- --size-8: calc(8px / var(--delta));
841
- --size-10: calc(10px / var(--delta));
842
- --size-12: calc(12px / var(--delta));
843
- --size-14: calc(14px / var(--delta));
844
- --size-16: calc(16px / var(--delta));
845
- --size-24: calc(24px / var(--delta));
846
- --size-32: calc(32px / var(--delta));
847
- --size-40: calc(40px / var(--delta));
848
- --size-48: calc(48px / var(--delta));
849
- --size-52: calc(52px / var(--delta));
850
- --size-56: calc(56px / var(--delta));
851
- --size-60: calc(60px / var(--delta));
852
- --size-64: calc(64px / var(--delta));
853
- --size-72: calc(72px / var(--delta));
854
- --size-80: calc(80px / var(--delta));
855
- --size-88: calc(88px / var(--delta));
856
- --size-96: calc(96px / var(--delta));
857
- --size-104: calc(104px / var(--delta));
858
- --size-112: calc(112px / var(--delta));
859
- --size-120: calc(120px / var(--delta));
860
- --size-126: calc(126px / var(--delta));
861
- --size-128: calc(128px / var(--delta));
862
- --size-146: calc(146px / var(--delta));
863
- --size-154: calc(154px / var(--delta));
864
- --size-x-small: calc(24px / var(--delta));
865
- --size-small: calc(32px / var(--delta));
866
- --size-medium: calc(40px / var(--delta));
867
- --size-large: calc(48px / var(--delta));
868
- --size-x-large: calc(56px / var(--delta));
869
- --size-2x-large: calc(72px / var(--delta));
870
- --space-content-horizontal: calc(16px / var(--delta));
871
- --space-small: calc(16px / var(--delta));
872
- --space-medium: calc(32px / var(--delta));
873
- --space-large: calc(40px / var(--delta));
874
- --space-x-large: calc(56px / var(--delta));
875
- --padding-x-small: var(--size-8);
876
- --padding-small: var(--size-16);
877
- --padding-medium: var(--size-24);
878
- --padding-large: var(--size-32);
879
- --input-height-base: var(--size-32);
880
- --input-height-large: var(--input-height-small);
881
- --input-padding: var(--input-padding-small);
882
- --input-padding-large: var(--input-padding-small);
883
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
884
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
885
- --btn-height: var(--input-height-base);
886
- --btn-lg-height: var(--btn-height);
887
- --btn-sm-height: var(--btn-height);
888
- --btn-padding: var(--input-padding);
889
- --btn-sm-padding: var(--btn-padding);
890
- --btn-lg-padding: var(--btn-padding);
891
- --dropdown-link-padding: var(--size-12) var(--size-16);
892
- }
893
- }
894
-
895
697
  /**
896
698
  * Do not edit directly, this file was auto-generated.
897
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
699
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
898
700
  */
899
701
 
900
702
  .np-theme-personal--dark {
@@ -1076,75 +878,9 @@
1076
878
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1077
879
  }
1078
880
 
1079
- /**
1080
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
1081
- *
1082
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
1083
- */
1084
-
1085
- @media (max-width: 320px) {
1086
- .np-theme-personal {
1087
- --delta: 2;
1088
- --size-4: calc(4px / var(--delta));
1089
- --size-5: calc(5px / var(--delta));
1090
- --size-8: calc(8px / var(--delta));
1091
- --size-10: calc(10px / var(--delta));
1092
- --size-12: calc(12px / var(--delta));
1093
- --size-14: calc(14px / var(--delta));
1094
- --size-16: calc(16px / var(--delta));
1095
- --size-24: calc(24px / var(--delta));
1096
- --size-32: calc(32px / var(--delta));
1097
- --size-40: calc(40px / var(--delta));
1098
- --size-48: calc(48px / var(--delta));
1099
- --size-52: calc(52px / var(--delta));
1100
- --size-56: calc(56px / var(--delta));
1101
- --size-60: calc(60px / var(--delta));
1102
- --size-64: calc(64px / var(--delta));
1103
- --size-72: calc(72px / var(--delta));
1104
- --size-80: calc(80px / var(--delta));
1105
- --size-88: calc(88px / var(--delta));
1106
- --size-96: calc(96px / var(--delta));
1107
- --size-104: calc(104px / var(--delta));
1108
- --size-112: calc(112px / var(--delta));
1109
- --size-120: calc(120px / var(--delta));
1110
- --size-126: calc(126px / var(--delta));
1111
- --size-128: calc(128px / var(--delta));
1112
- --size-146: calc(146px / var(--delta));
1113
- --size-154: calc(154px / var(--delta));
1114
- --size-x-small: calc(24px / var(--delta));
1115
- --size-small: calc(32px / var(--delta));
1116
- --size-medium: calc(40px / var(--delta));
1117
- --size-large: calc(48px / var(--delta));
1118
- --size-x-large: calc(56px / var(--delta));
1119
- --size-2x-large: calc(72px / var(--delta));
1120
- --space-content-horizontal: calc(16px / var(--delta));
1121
- --space-small: calc(16px / var(--delta));
1122
- --space-medium: calc(32px / var(--delta));
1123
- --space-large: calc(40px / var(--delta));
1124
- --space-x-large: calc(56px / var(--delta));
1125
- --padding-x-small: var(--size-8);
1126
- --padding-small: var(--size-16);
1127
- --padding-medium: var(--size-24);
1128
- --padding-large: var(--size-32);
1129
- --input-height-base: var(--size-32);
1130
- --input-height-large: var(--input-height-small);
1131
- --input-padding: var(--input-padding-small);
1132
- --input-padding-large: var(--input-padding-small);
1133
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
1134
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
1135
- --btn-height: var(--input-height-base);
1136
- --btn-lg-height: var(--btn-height);
1137
- --btn-sm-height: var(--btn-height);
1138
- --btn-padding: var(--input-padding);
1139
- --btn-sm-padding: var(--btn-padding);
1140
- --btn-lg-padding: var(--btn-padding);
1141
- --dropdown-link-padding: var(--size-12) var(--size-16);
1142
- }
1143
- }
1144
-
1145
881
  /**
1146
882
  * Do not edit directly, this file was auto-generated.
1147
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
883
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
1148
884
  */
1149
885
 
1150
886
  .np-theme-platform {
@@ -1328,7 +1064,7 @@
1328
1064
 
1329
1065
  /**
1330
1066
  * Do not edit directly, this file was auto-generated.
1331
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1067
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
1332
1068
  */
1333
1069
 
1334
1070
  .np-theme-platform--forest-green {
@@ -1512,7 +1248,7 @@
1512
1248
 
1513
1249
  /**
1514
1250
  * Do not edit directly, this file was auto-generated.
1515
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1251
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
1516
1252
  */
1517
1253
 
1518
1254
  .np-theme-business {
@@ -1697,7 +1433,7 @@
1697
1433
 
1698
1434
  /**
1699
1435
  * Do not edit directly, this file was auto-generated.
1700
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1436
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
1701
1437
  */
1702
1438
 
1703
1439
  .np-theme-business--dark {
@@ -1882,7 +1618,7 @@
1882
1618
 
1883
1619
  /**
1884
1620
  * Do not edit directly, this file was auto-generated.
1885
- * Generated on Fri, 10 Apr 2026 14:46:00 GMT
1621
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
1886
1622
  */
1887
1623
 
1888
1624
  .np-theme-business--forest-green {
@@ -2067,7 +1803,7 @@
2067
1803
 
2068
1804
  /**
2069
1805
  * Do not edit directly, this file was auto-generated.
2070
- * Generated on Fri, 10 Apr 2026 14:46:01 GMT
1806
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
2071
1807
  */
2072
1808
 
2073
1809
  .np-theme-business--bright-green {
@@ -28156,11 +27892,11 @@ a[data-toggle="tooltip"] {
28156
27892
  align-items: stretch;
28157
27893
  background-color: rgba(134,167,189,0.10196);
28158
27894
  background-color: var(--Card-background-color);
28159
- border-radius: calc(32px / 2);
27895
+ border-radius: 32px;
28160
27896
  border-radius: var(--Card-border-radius);
28161
- gap: calc(16px / 2);
27897
+ gap: 16px;
28162
27898
  gap: var(--Card-flex-gap);
28163
- padding: calc(24px / 2);
27899
+ padding: 24px;
28164
27900
  padding: var(--Card-padding);
28165
27901
  position: relative;
28166
27902
  box-sizing: border-box;
@@ -31480,7 +31216,7 @@ html:not([dir="rtl"]) .np-navigation-option {
31480
31216
  border-radius: var(--nudge-border-radius);
31481
31217
  display: flex;
31482
31218
  flex: 1;
31483
- gap: calc(16px / 2);
31219
+ gap: 16px;
31484
31220
  gap: var(--nudge-flex-gap);
31485
31221
  min-height: 106px;
31486
31222
  min-height: var(--nudge-min-height);
@@ -34678,9 +34414,9 @@ html:not([dir="rtl"]) .np-navigation-option {
34678
34414
  --buttonTopRightOffset: var(--size-16);
34679
34415
  --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
34680
34416
  position: absolute;
34681
- right: calc(16px / 2);
34417
+ right: 16px;
34682
34418
  right: var(--buttonTopRightOffset);
34683
- top: calc(16px / 2);
34419
+ top: 16px;
34684
34420
  top: var(--buttonTopRightOffset);
34685
34421
  }
34686
34422
 
package/build/popover/Popover.js CHANGED
@@ -67,7 +67,7 @@ function Popover({
67
67
  onClose?.();
68
68
  };
69
69
  return /*#__PURE__*/jsxRuntime.jsxs("span", {
70
- className: clsx.clsx('np-popover', className),
70
+ className: "np-popover",
71
71
  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
72
72
  ref: anchorReference,
73
73
  className: "d-inline-block",
@@ -84,7 +84,7 @@ function Popover({
84
84
  anchorRef: anchorReference,
85
85
  position: resolvedPlacement,
86
86
  arrow: true,
87
- className: "np-popover__container",
87
+ className: clsx.clsx('np-popover__container', className),
88
88
  onClose: handleOnClose,
89
89
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
90
90
  className: "np-popover__content np-text-default-body",
package/build/popover/Popover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,SAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,oBAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,kBAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,cAAA,CAACY,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className=\"np-popover\">\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className={clsx('np-popover__container', className)}\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,oBAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,kBAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,SAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,cAAA,CAACa,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
package/build/popover/Popover.mjs CHANGED
@@ -63,7 +63,7 @@ function Popover({
63
63
  onClose?.();
64
64
  };
65
65
  return /*#__PURE__*/jsxs("span", {
66
- className: clsx('np-popover', className),
66
+ className: "np-popover",
67
67
  children: [/*#__PURE__*/jsx("span", {
68
68
  ref: anchorReference,
69
69
  className: "d-inline-block",
@@ -80,7 +80,7 @@ function Popover({
80
80
  anchorRef: anchorReference,
81
81
  position: resolvedPlacement,
82
82
  arrow: true,
83
- className: "np-popover__container",
83
+ className: clsx('np-popover__container', className),
84
84
  onClose: handleOnClose,
85
85
  children: /*#__PURE__*/jsxs("div", {
86
86
  className: "np-popover__content np-text-default-body",
package/build/popover/Popover.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className={clsx('np-popover', className)}>\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className=\"np-popover__container\"\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","clsx","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAEmB,IAAI,CAAC,YAAY,EAAEnB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBAC7CqB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDuB,cAAc,CAA2BvB,QAAQ,CAAC,gBAC/CwB,YAAY,CAACxB,QAAQ,EAAE;QACrByB,OAAO,EAAEA,MAAK;AACZzB,UAAAA,QAAQ,CAAC0B,KAAK,CAACD,OAAO,IAAI;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF3B;AAAQ,KACR,CACN,eAAAqB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYrB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGqB,SAAU;AAC3Dd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,SAAS,EAAEjB,eAAgB;AAC3BkB,MAAAA,QAAQ,EAAErB,iBAAkB;MAC5BsB,KAAK,EAAA,IAAA;AACL/B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJgB,GAAA,CAACY,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
1
+ {"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n | `${Position.LEFT_TOP}`\n | `${Position.RIGHT_TOP}`\n | `${Position.BOTTOM_RIGHT}`\n | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n | `${Position.TOP}`\n | `${Position.RIGHT}`\n | `${Position.BOTTOM}`\n | `${Position.LEFT}`\n | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n children?: React.ReactNode;\n title?: React.ReactNode;\n /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n 'aria-label'?: string;\n /** @default 'right' */\n preferredPlacement?: PopoverPreferredPlacement;\n content: React.ReactNode;\n onClose?: () => void;\n className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n switch (preferredPlacement) {\n case 'left-top':\n case 'right-top':\n return 'top';\n case 'bottom-left':\n case 'bottom-right':\n return 'bottom';\n default:\n return preferredPlacement;\n }\n}\n\nexport default function Popover({\n children,\n className,\n content,\n preferredPlacement = Position.RIGHT,\n title,\n onClose,\n 'aria-label': ariaLabel,\n}: PopoverProps) {\n const titleId = useId();\n\n const resolvedPlacement = resolvePlacement(preferredPlacement);\n useEffect(() => {\n if (resolvedPlacement !== preferredPlacement) {\n logActionRequired(\n `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n );\n }\n }, [preferredPlacement, resolvedPlacement]);\n\n const anchorReference = useRef(null);\n const [open, setOpen] = useState(false);\n\n const handleOnClose = () => {\n setOpen(false);\n onClose?.();\n };\n\n return (\n <span className=\"np-popover\">\n <span ref={anchorReference} className=\"d-inline-block\">\n {isValidElement<{ onClick?: () => void }>(children)\n ? cloneElement(children, {\n onClick: () => {\n children.props.onClick?.();\n setOpen((prevOpen) => !prevOpen);\n },\n })\n : children}\n </span>\n <ResponsivePanel\n aria-label={ariaLabel}\n aria-labelledby={title && !ariaLabel ? titleId : undefined}\n open={open}\n anchorRef={anchorReference}\n position={resolvedPlacement}\n arrow\n className={clsx('np-popover__container', className)}\n onClose={handleOnClose}\n >\n <div className=\"np-popover__content np-text-default-body\">\n {title && (\n <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n {title}\n </Title>\n )}\n {content}\n </div>\n </ResponsivePanel>\n </span>\n );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,cAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,YAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,IAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,GAAA,CAACa,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
package/build/select/Select.js CHANGED
@@ -286,9 +286,6 @@ function Select({
286
286
  const handleCloseOptions = () => {
287
287
  setOpen(false);
288
288
  setKeyboardFocusedOptionIndex(-1);
289
- if (dropdownButtonReference.current) {
290
- dropdownButtonReference.current.focus();
291
- }
292
289
  };
293
290
  function createSelectHandlerForOption(option) {
294
291
  return event => {