@transferwise/components 45.15.1 → 45.16.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 (40) hide show
  1. package/build/index.esm.js +172 -114
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +172 -114
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/main.css +1 -1
  7. package/build/styles/popover/Popover.css +1 -1
  8. package/build/styles/promoCard/PromoCard.css +1 -1
  9. package/build/types/alert/Alert.d.ts.map +1 -1
  10. package/build/types/common/card/Card.d.ts.map +1 -1
  11. package/build/types/common/card/index.d.ts +1 -0
  12. package/build/types/common/card/index.d.ts.map +1 -1
  13. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  14. package/build/types/inputs/_Popover.d.ts.map +1 -1
  15. package/build/types/promoCard/PromoCard.d.ts +9 -3
  16. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  17. package/build/types/promoCard/PromoCardIndicator.d.ts +5 -3
  18. package/build/types/promoCard/PromoCardIndicator.d.ts.map +1 -1
  19. package/package.json +3 -3
  20. package/src/alert/Alert.js +11 -9
  21. package/src/alert/Alert.spec.js +22 -13
  22. package/src/alert/withArrow/withArrow.spec.js +4 -4
  23. package/src/common/card/Card.tsx +6 -2
  24. package/src/common/card/index.ts +1 -0
  25. package/src/dateLookup/tableLink/TableLink.js +1 -0
  26. package/src/dateLookup/tableLink/TableLink.spec.js +6 -0
  27. package/src/inputs/SelectInput.story.tsx +22 -0
  28. package/src/inputs/_BottomSheet.less +1 -1
  29. package/src/inputs/_BottomSheet.tsx +57 -52
  30. package/src/inputs/_Popover.less +1 -1
  31. package/src/inputs/_Popover.tsx +31 -24
  32. package/src/listItem/ListItem.story.tsx +1 -1
  33. package/src/main.css +1 -1
  34. package/src/popover/Popover.css +1 -1
  35. package/src/promoCard/PromoCard.css +1 -1
  36. package/src/promoCard/PromoCard.less +9 -9
  37. package/src/promoCard/PromoCard.spec.tsx +1 -0
  38. package/src/promoCard/PromoCard.story.tsx +90 -30
  39. package/src/promoCard/PromoCard.tsx +69 -22
  40. package/src/promoCard/PromoCardIndicator.tsx +20 -8
package/src/inputs/_Popover.tsx CHANGED
@@ -13,6 +13,7 @@ import {
13
13
  useRole,
14
14
  } from '@floating-ui/react';
15
15
  import { Transition } from '@headlessui/react';
16
+ import { ThemeProvider, useTheme } from '@wise/components-theming';
16
17
  import classNames from 'classnames';
17
18
  import { useState } from 'react';
18
19
 
@@ -75,6 +76,8 @@ export function Popover({
75
76
 
76
77
  const [floatingKey, setFloatingKey] = useState(0);
77
78
 
79
+ const { theme, screenMode } = useTheme();
80
+
78
81
  return (
79
82
  <>
80
83
  {open ? <PreventScroll /> : null}
@@ -84,34 +87,38 @@ export function Popover({
84
87
  })}
85
88
 
86
89
  <FloatingPortal>
87
- <FloatingFocusManager context={context}>
88
- <Transition
89
- show={open}
90
- leave="transition-opacity"
91
- leaveTo="opacity-0"
92
- beforeEnter={() => {
93
- setFloatingKey((prev) => prev + 1);
94
- }}
95
- >
96
- <div
97
- key={floatingKey} // Force inner state invalidation on open
98
- ref={refs.setFloating}
99
- className="np-popover-v2-container"
100
- // eslint-disable-next-line react/forbid-dom-props
101
- style={floatingStyles}
102
- {...getFloatingProps()}
90
+ <ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
91
+ <FloatingFocusManager context={context}>
92
+ <Transition
93
+ show={open}
94
+ leave="transition-opacity"
95
+ leaveTo="opacity-0"
96
+ beforeEnter={() => {
97
+ setFloatingKey((prev) => prev + 1);
98
+ }}
103
99
  >
104
100
  <div
105
- className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
106
- 'np-popover-v2--padding-md': padding === 'md',
107
- })}
101
+ key={floatingKey} // Force inner state invalidation on open
102
+ ref={refs.setFloating}
103
+ className="np-popover-v2-container"
104
+ // eslint-disable-next-line react/forbid-dom-props
105
+ style={floatingStyles}
106
+ {...getFloatingProps()}
108
107
  >
109
- {title ? <h2 className="np-popover-v2-title np-text-title-body">{title}</h2> : null}
110
- <div className="np-popover-v2-content np-text-body-default">{children}</div>
108
+ <div
109
+ className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
110
+ 'np-popover-v2--padding-md': padding === 'md',
111
+ })}
112
+ >
113
+ {title ? (
114
+ <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
115
+ ) : null}
116
+ <div className="np-popover-v2-content np-text-body-default">{children}</div>
117
+ </div>
111
118
  </div>
112
- </div>
113
- </Transition>
114
- </FloatingFocusManager>
119
+ </Transition>
120
+ </FloatingFocusManager>
121
+ </ThemeProvider>
115
122
  </FloatingPortal>
116
123
  </>
117
124
  );
package/src/listItem/ListItem.story.tsx CHANGED
@@ -100,7 +100,7 @@ export const Variants = () => {
100
100
  </div>
101
101
  <div className="m-t-4 m-b-2">
102
102
  <Title type="title-body">Text Only List</Title>
103
- <ul style={{ paddingLeft: 0 }}>
103
+ <ul className="list-unstyled">
104
104
  <Template title="Sort code" value="23-14-71" />
105
105
  <Template title="Account number" value="12345678" />
106
106
  </ul>