@transferwise/components 46.98.0 → 46.99.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 (217) hide show
  1. package/build/body/Body.js +2 -1
  2. package/build/body/Body.js.map +1 -1
  3. package/build/body/Body.mjs +2 -1
  4. package/build/body/Body.mjs.map +1 -1
  5. package/build/dateInput/DateInput.js +4 -4
  6. package/build/dateInput/DateInput.js.map +1 -1
  7. package/build/dateInput/DateInput.mjs +4 -4
  8. package/build/dateInput/DateInput.mjs.map +1 -1
  9. package/build/dateLookup/DateLookup.js +4 -4
  10. package/build/dateLookup/DateLookup.js.map +1 -1
  11. package/build/dateLookup/DateLookup.mjs +4 -4
  12. package/build/dateLookup/DateLookup.mjs.map +1 -1
  13. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
  14. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
  15. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs +3 -3
  16. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +1 -1
  17. package/build/i18n/cs.json +0 -2
  18. package/build/i18n/cs.json.js +0 -2
  19. package/build/i18n/cs.json.js.map +1 -1
  20. package/build/i18n/cs.json.mjs +0 -2
  21. package/build/i18n/cs.json.mjs.map +1 -1
  22. package/build/i18n/de.json +0 -2
  23. package/build/i18n/de.json.js +0 -2
  24. package/build/i18n/de.json.js.map +1 -1
  25. package/build/i18n/de.json.mjs +0 -2
  26. package/build/i18n/de.json.mjs.map +1 -1
  27. package/build/i18n/en.json +0 -2
  28. package/build/i18n/en.json.js +0 -2
  29. package/build/i18n/en.json.js.map +1 -1
  30. package/build/i18n/en.json.mjs +0 -2
  31. package/build/i18n/en.json.mjs.map +1 -1
  32. package/build/i18n/es.json +0 -2
  33. package/build/i18n/es.json.js +0 -2
  34. package/build/i18n/es.json.js.map +1 -1
  35. package/build/i18n/es.json.mjs +0 -2
  36. package/build/i18n/es.json.mjs.map +1 -1
  37. package/build/i18n/fr.json +0 -2
  38. package/build/i18n/fr.json.js +0 -2
  39. package/build/i18n/fr.json.js.map +1 -1
  40. package/build/i18n/fr.json.mjs +0 -2
  41. package/build/i18n/fr.json.mjs.map +1 -1
  42. package/build/i18n/hu.json +0 -2
  43. package/build/i18n/hu.json.js +0 -2
  44. package/build/i18n/hu.json.js.map +1 -1
  45. package/build/i18n/hu.json.mjs +0 -2
  46. package/build/i18n/hu.json.mjs.map +1 -1
  47. package/build/i18n/id.json +0 -2
  48. package/build/i18n/id.json.js +0 -2
  49. package/build/i18n/id.json.js.map +1 -1
  50. package/build/i18n/id.json.mjs +0 -2
  51. package/build/i18n/id.json.mjs.map +1 -1
  52. package/build/i18n/it.json +0 -2
  53. package/build/i18n/it.json.js +0 -2
  54. package/build/i18n/it.json.js.map +1 -1
  55. package/build/i18n/it.json.mjs +0 -2
  56. package/build/i18n/it.json.mjs.map +1 -1
  57. package/build/i18n/ja.json +0 -2
  58. package/build/i18n/ja.json.js +0 -2
  59. package/build/i18n/ja.json.js.map +1 -1
  60. package/build/i18n/ja.json.mjs +0 -2
  61. package/build/i18n/ja.json.mjs.map +1 -1
  62. package/build/i18n/nl.json +0 -2
  63. package/build/i18n/pl.json +0 -2
  64. package/build/i18n/pl.json.js +0 -2
  65. package/build/i18n/pl.json.js.map +1 -1
  66. package/build/i18n/pl.json.mjs +0 -2
  67. package/build/i18n/pl.json.mjs.map +1 -1
  68. package/build/i18n/pt.json +0 -2
  69. package/build/i18n/pt.json.js +0 -2
  70. package/build/i18n/pt.json.js.map +1 -1
  71. package/build/i18n/pt.json.mjs +0 -2
  72. package/build/i18n/pt.json.mjs.map +1 -1
  73. package/build/i18n/ro.json +0 -2
  74. package/build/i18n/ro.json.js +0 -2
  75. package/build/i18n/ro.json.js.map +1 -1
  76. package/build/i18n/ro.json.mjs +0 -2
  77. package/build/i18n/ro.json.mjs.map +1 -1
  78. package/build/i18n/ru.json +0 -2
  79. package/build/i18n/ru.json.js +0 -2
  80. package/build/i18n/ru.json.js.map +1 -1
  81. package/build/i18n/ru.json.mjs +0 -2
  82. package/build/i18n/ru.json.mjs.map +1 -1
  83. package/build/i18n/th.json +0 -2
  84. package/build/i18n/th.json.js +0 -2
  85. package/build/i18n/th.json.js.map +1 -1
  86. package/build/i18n/th.json.mjs +0 -2
  87. package/build/i18n/th.json.mjs.map +1 -1
  88. package/build/i18n/tr.json +0 -2
  89. package/build/i18n/tr.json.js +0 -2
  90. package/build/i18n/tr.json.js.map +1 -1
  91. package/build/i18n/tr.json.mjs +0 -2
  92. package/build/i18n/tr.json.mjs.map +1 -1
  93. package/build/i18n/zh-CN.json +0 -2
  94. package/build/i18n/zh-CN.json.js +0 -2
  95. package/build/i18n/zh-CN.json.js.map +1 -1
  96. package/build/i18n/zh-CN.json.mjs +0 -2
  97. package/build/i18n/zh-CN.json.mjs.map +1 -1
  98. package/build/i18n/zh-HK.json +0 -2
  99. package/build/i18n/zh-HK.json.js +0 -2
  100. package/build/i18n/zh-HK.json.js.map +1 -1
  101. package/build/i18n/zh-HK.json.mjs +0 -2
  102. package/build/i18n/zh-HK.json.mjs.map +1 -1
  103. package/build/index.js +0 -2
  104. package/build/index.js.map +1 -1
  105. package/build/index.mjs +0 -1
  106. package/build/index.mjs.map +1 -1
  107. package/build/instructionsList/InstructionsList.js +1 -0
  108. package/build/instructionsList/InstructionsList.js.map +1 -1
  109. package/build/instructionsList/InstructionsList.mjs +1 -0
  110. package/build/instructionsList/InstructionsList.mjs.map +1 -1
  111. package/build/main.css +16 -45
  112. package/build/moneyInput/MoneyInput.js +2 -2
  113. package/build/moneyInput/MoneyInput.js.map +1 -1
  114. package/build/moneyInput/MoneyInput.mjs +2 -2
  115. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  116. package/build/snackbar/Snackbar.js +1 -1
  117. package/build/snackbar/Snackbar.js.map +1 -1
  118. package/build/snackbar/Snackbar.mjs +1 -1
  119. package/build/snackbar/Snackbar.mjs.map +1 -1
  120. package/build/styles/body/Body.css +3 -0
  121. package/build/styles/dateInput/DateInput.css +13 -1
  122. package/build/styles/main.css +16 -45
  123. package/build/tabs/Tabs.js +3 -3
  124. package/build/tabs/Tabs.js.map +1 -1
  125. package/build/tabs/Tabs.mjs +3 -3
  126. package/build/tabs/Tabs.mjs.map +1 -1
  127. package/build/test-utils/assets/apple-pay-logo.svg +84 -0
  128. package/build/typeahead/Typeahead.js +2 -2
  129. package/build/typeahead/Typeahead.js.map +1 -1
  130. package/build/typeahead/Typeahead.mjs +2 -2
  131. package/build/typeahead/Typeahead.mjs.map +1 -1
  132. package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -2
  133. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  134. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
  135. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  136. package/build/types/body/Body.d.ts +5 -0
  137. package/build/types/body/Body.d.ts.map +1 -1
  138. package/build/types/index.d.ts +0 -2
  139. package/build/types/index.d.ts.map +1 -1
  140. package/build/types/test-utils/fake-data.d.ts +2 -0
  141. package/build/types/test-utils/fake-data.d.ts.map +1 -1
  142. package/build/types/test-utils/index.d.ts +0 -4
  143. package/build/types/test-utils/index.d.ts.map +1 -1
  144. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  145. package/build/upload/Upload.js +2 -2
  146. package/build/upload/Upload.js.map +1 -1
  147. package/build/upload/Upload.mjs +2 -2
  148. package/build/upload/Upload.mjs.map +1 -1
  149. package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
  150. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  151. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
  152. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  153. package/build/uploadInput/UploadInput.js +0 -1
  154. package/build/uploadInput/UploadInput.js.map +1 -1
  155. package/build/uploadInput/UploadInput.mjs +0 -1
  156. package/build/uploadInput/UploadInput.mjs.map +1 -1
  157. package/package.json +14 -14
  158. package/src/body/Body.css +3 -0
  159. package/src/body/Body.less +3 -0
  160. package/src/body/Body.spec.tsx +8 -0
  161. package/src/body/Body.story.tsx +12 -0
  162. package/src/body/Body.tsx +11 -2
  163. package/src/dateInput/DateInput.css +13 -1
  164. package/src/dateInput/DateInput.less +20 -3
  165. package/src/dateInput/DateInput.tests.story.tsx +14 -3
  166. package/src/dateInput/DateInput.tsx +4 -4
  167. package/src/i18n/cs.json +0 -2
  168. package/src/i18n/de.json +0 -2
  169. package/src/i18n/en.json +0 -2
  170. package/src/i18n/es.json +0 -2
  171. package/src/i18n/fr.json +0 -2
  172. package/src/i18n/hu.json +0 -2
  173. package/src/i18n/id.json +0 -2
  174. package/src/i18n/it.json +0 -2
  175. package/src/i18n/ja.json +0 -2
  176. package/src/i18n/nl.json +0 -2
  177. package/src/i18n/pl.json +0 -2
  178. package/src/i18n/pt.json +0 -2
  179. package/src/i18n/ro.json +0 -2
  180. package/src/i18n/ru.json +0 -2
  181. package/src/i18n/th.json +0 -2
  182. package/src/i18n/tr.json +0 -2
  183. package/src/i18n/zh-CN.json +0 -2
  184. package/src/i18n/zh-HK.json +0 -2
  185. package/src/index.ts +0 -2
  186. package/src/instructionsList/InstructionsList.story.tsx +35 -37
  187. package/src/instructionsList/InstructionsList.tsx +1 -1
  188. package/src/legacylistItem/LegacyListItem.story.tsx +5 -5
  189. package/src/legacylistItem/LegacyListItem.tests.story.tsx +6 -6
  190. package/src/main.css +16 -45
  191. package/src/main.less +1 -1
  192. package/src/ssr.spec.tsx +0 -1
  193. package/src/test-utils/assets/apple-pay-logo.svg +84 -0
  194. package/src/test-utils/fake-data.ts +5 -0
  195. package/src/uploadInput/UploadInput.tsx +4 -13
  196. package/build/selectOption/SelectOption.js +0 -131
  197. package/build/selectOption/SelectOption.js.map +0 -1
  198. package/build/selectOption/SelectOption.messages.js +0 -17
  199. package/build/selectOption/SelectOption.messages.js.map +0 -1
  200. package/build/selectOption/SelectOption.messages.mjs +0 -13
  201. package/build/selectOption/SelectOption.messages.mjs.map +0 -1
  202. package/build/selectOption/SelectOption.mjs +0 -127
  203. package/build/selectOption/SelectOption.mjs.map +0 -1
  204. package/build/styles/selectOption/SelectOption.css +0 -44
  205. package/build/types/selectOption/SelectOption.d.ts +0 -21
  206. package/build/types/selectOption/SelectOption.d.ts.map +0 -1
  207. package/build/types/selectOption/SelectOption.messages.d.ts +0 -12
  208. package/build/types/selectOption/SelectOption.messages.d.ts.map +0 -1
  209. package/build/types/selectOption/index.d.ts +0 -3
  210. package/build/types/selectOption/index.d.ts.map +0 -1
  211. package/src/selectOption/SelectOption.css +0 -44
  212. package/src/selectOption/SelectOption.less +0 -40
  213. package/src/selectOption/SelectOption.messages.ts +0 -12
  214. package/src/selectOption/SelectOption.spec.tsx +0 -83
  215. package/src/selectOption/SelectOption.story.tsx +0 -277
  216. package/src/selectOption/SelectOption.tsx +0 -151
  217. package/src/selectOption/index.ts +0 -2
package/src/index.ts CHANGED
@@ -5,7 +5,6 @@
5
5
  */
6
6
  export type { AccordionItem, AccordionProps } from './accordion';
7
7
  export type { ActionOptionProps } from './actionOption';
8
- export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
9
8
  export type { AlertAction, AlertProps, AlertType } from './alert';
10
9
  export type { AvatarProps } from './avatar';
11
10
  export type { AvatarViewProps } from './avatarView';
@@ -116,7 +115,6 @@ export type {
116
115
  export { default as Accordion } from './accordion';
117
116
  export { default as ActionButton } from './actionButton';
118
117
  export { default as ActionOption } from './actionOption';
119
- export { default as SelectOption } from './selectOption';
120
118
  export { default as Alert } from './alert';
121
119
  export { default as Avatar } from './avatar';
122
120
  export { default as AvatarView } from './avatarView';
package/src/instructionsList/InstructionsList.story.tsx CHANGED
@@ -1,4 +1,6 @@
1
- import { StoryFn } from '@storybook/react';
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { fn } from '@storybook/test';
3
+ import { storyConfig } from '../test-utils';
2
4
 
3
5
  import Link from '../link';
4
6
 
@@ -7,46 +9,42 @@ import InstructionsList, { InstructionsListProps } from './InstructionsList';
7
9
  export default {
8
10
  component: InstructionsList,
9
11
  title: 'Typography/InstructionsList',
10
- };
12
+ render: (args) => <InstructionsList {...args} />,
13
+ tags: ['autodocs'],
14
+ } satisfies Meta<typeof InstructionsList>;
15
+
16
+ type Story = StoryObj<typeof InstructionsList>;
11
17
 
12
- export const Template: StoryFn = (args: InstructionsListProps) => {
13
- return (
14
- <>
15
- <InstructionsList
16
- className={args.className}
17
- dos={[
18
- 'Do an initial money transfer',
19
- 'Invite at least 3 friends',
20
- <span key="12">
21
- Paying extra{' '}
22
- <Link href="" type="link-large">
23
- hidden fees
24
- </Link>{' '}
25
- for transfers
26
- </span>,
27
- ]}
28
- donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
29
- sort={args.sort}
30
- />
31
- <hr />
32
- <InstructionsList
33
- dos={[
34
- { content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
35
- { content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
36
- ]}
37
- donts={[
38
- { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
39
- { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
40
- ]}
41
- sort={args.sort}
42
- />
43
- </>
44
- );
18
+ export const Basic: Story = {
19
+ args: {
20
+ sort: 'dosFirst',
21
+ dos: [
22
+ 'Do an initial money transfer',
23
+ 'Invite at least 3 friends',
24
+ <span key="12">
25
+ Paying extra{' '}
26
+ <Link href="" type="link-large">
27
+ hidden fees
28
+ </Link>{' '}
29
+ for transfers
30
+ </span>,
31
+ ],
32
+ donts: ['Paying extra hidden fees for transfers', 'Use bad exchange rate'],
33
+ },
45
34
  };
46
35
 
47
- export const Basic = {
48
- render: Template,
36
+ export const WithNewLine: Story = {
49
37
  args: {
50
38
  sort: 'dosFirst',
39
+ dos: [
40
+ 'Do an initial money transfer',
41
+ 'Invite at least 3 friends',
42
+ 'This do item has a newline:\nSecond line appears below',
43
+ ],
44
+ donts: [
45
+ 'Paying extra hidden fees for transfers',
46
+ 'Use bad exchange rate',
47
+ 'This dont item has a newline:\nSecond line appears below',
48
+ ],
51
49
  },
52
50
  };
package/src/instructionsList/InstructionsList.tsx CHANGED
@@ -71,7 +71,7 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
71
71
  title={isInstructionNode ? item['aria-label'] : undefined}
72
72
  />
73
73
  )}
74
- <Body className="text-primary" type={Typography.BODY_LARGE}>
74
+ <Body className="text-primary" type={Typography.BODY_LARGE} preserveNewlines>
75
75
  {isInstructionNode ? item.content : item}
76
76
  </Body>
77
77
  </li>
package/src/legacylistItem/LegacyListItem.story.tsx CHANGED
@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
6
6
  import AvatarView from '../avatarView';
7
7
  import Info from '../info';
8
8
  import Title from '../title/Title';
9
- import ListItem, { List } from '.';
9
+ import LegacyListItem, { List } from '.';
10
10
 
11
11
  export default {
12
- component: ListItem,
13
- title: 'Other/ListItem',
12
+ component: LegacyListItem,
13
+ title: 'Other/LegacyListItem',
14
14
  tags: ['autodocs'],
15
15
  };
16
16
 
@@ -18,8 +18,8 @@ const Template = ({
18
18
  title = 'Wise',
19
19
  value = 'We’re building the world’s most international account',
20
20
  ...props
21
- }: Partial<ComponentProps<typeof ListItem>>) => {
22
- return <ListItem title={title} value={value} {...props} />;
21
+ }: Partial<ComponentProps<typeof LegacyListItem>>) => {
22
+ return <LegacyListItem title={title} value={value} {...props} />;
23
23
  };
24
24
 
25
25
  export const Basic = () => {
package/src/legacylistItem/LegacyListItem.tests.story.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import { FastFlag } from '@transferwise/icons';
2
2
  import Button from '../button';
3
3
  import AvatarView from '../avatarView';
4
- import ListItem, { List, type LegacyListItemProps } from '.';
4
+ import LegacyListItem, { List, type LegacyListItemProps } from '.';
5
5
 
6
6
  export default {
7
- component: ListItem,
8
- title: 'Other/ListItem/tests',
7
+ component: LegacyListItem,
8
+ title: 'Other/LegacyListItem/tests',
9
9
  };
10
10
 
11
11
  export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
21
21
  return (
22
22
  <div style={{ width: '35rem' }}>
23
23
  <List>
24
- <ListItem
24
+ <LegacyListItem
25
25
  {...sharedProps}
26
26
  title="Default behaviour"
27
27
  value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
28
28
  />
29
29
 
30
- <ListItem
30
+ <LegacyListItem
31
31
  {...sharedProps}
32
32
  title="Wrapping the long word with a 'span.text-word-break'"
33
33
  value={
@@ -41,7 +41,7 @@ export const LongText = () => {
41
41
  }
42
42
  />
43
43
 
44
- <ListItem
44
+ <LegacyListItem
45
45
  {...sharedProps}
46
46
  title="Using '&amp;shy;' HTML entitty"
47
47
  value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
package/src/main.css CHANGED
@@ -658,6 +658,9 @@
658
658
  border-width: 1px;
659
659
  border-color: var(--badge-border-color);
660
660
  }
661
+ .np-text--pre-line {
662
+ white-space: pre-line;
663
+ }
661
664
  .np-btn {
662
665
  position: relative;
663
666
  }
@@ -1789,50 +1792,6 @@ button.np-option {
1789
1792
  margin-top: -3px;
1790
1793
  }
1791
1794
  }
1792
- .np-select-option {
1793
- border-radius: 10px;
1794
- border-radius: var(--radius-small);
1795
- padding: 16px;
1796
- padding: var(--size-16);
1797
- }
1798
- .np-select-option-placeholder {
1799
- background-color: rgba(134,167,189,0.10196);
1800
- background-color: var(--color-background-neutral);
1801
- }
1802
- .np-select-option-placeholder:not(.disabled):hover {
1803
- background-color: var(--color-background-neutral-hover);
1804
- }
1805
- .np-select-option-placeholder:not(.disabled):focus,
1806
- .np-select-option-placeholder:not(.disabled):active {
1807
- background-color: var(--color-background-neutral-active);
1808
- }
1809
- .np-select-option-selected {
1810
- border: 1px solid #c9cbce;
1811
- border: 1px solid var(--color-interactive-secondary);
1812
- }
1813
- .np-select-option-list {
1814
- max-height: 350px;
1815
- overflow-y: auto;
1816
- }
1817
- .np-select-option-list > .np-section {
1818
- margin-top: 0;
1819
- }
1820
- .has-error * .np-select-option {
1821
- --ring-outline-color: var(--color-sentiment-negative);
1822
- --ring-outline-width: 3px;
1823
- --ring-outline-offset: calc(-1 * var(--ring-outline-width));
1824
- outline: var(--ring-outline-color) solid 3px;
1825
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
1826
- outline-offset: calc(-1 * 3px);
1827
- outline-offset: var(--ring-outline-offset);
1828
- }
1829
- .has-error * .np-select-option:focus {
1830
- outline: none;
1831
- }
1832
- .has-error * .np-select-option:focus-visible {
1833
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
1834
- outline-offset: var(--ring-outline-offset);
1835
- }
1836
1795
  .np-panel__content {
1837
1796
  opacity: 0;
1838
1797
  visibility: hidden;
@@ -1910,10 +1869,22 @@ button.np-option {
1910
1869
  border-color: rgba(0,0,0,0.10196);
1911
1870
  border-color: var(--color-border-neutral);
1912
1871
  }
1913
- .np-theme-personal .tw-date label {
1872
+ .tw-date label {
1914
1873
  width: 100%;
1874
+ }
1875
+ .tw-date .tw-date--year label {
1915
1876
  margin-bottom: 0;
1916
1877
  }
1878
+ .tw-date .tw-date--year,
1879
+ .tw-date .tw-date--month,
1880
+ .tw-date .tw-date--day {
1881
+ margin-bottom: 0;
1882
+ }
1883
+ @media (min-width: 576px) {
1884
+ .np-theme-personal .tw-date label {
1885
+ margin-bottom: 0;
1886
+ }
1887
+ }
1917
1888
  .tw-date-lookup-menu {
1918
1889
  width: 400px;
1919
1890
  }
package/src/main.less CHANGED
@@ -8,6 +8,7 @@
8
8
  @import "./avatarLayout/AvatarLayout.less";
9
9
  @import "./iconButton/IconButton.less";
10
10
  @import "./badge/Badge.less";
11
+ @import "./body/Body.less";
11
12
  @import "./button/LegacyButton.less";
12
13
  @import "./button/Button.less";
13
14
  @import "./card/Card.less";
@@ -20,7 +21,6 @@
20
21
  @import "./common/card/Card.less";
21
22
  @import "./common/closeButton/CloseButton.less";
22
23
  @import "./common/Option/Option.less";
23
- @import "./selectOption/SelectOption.less";
24
24
  @import "./common/panel/Panel.less";
25
25
  @import "./common/RadioButton/RadioButton.less";
26
26
  @import "./dateInput/DateInput.less";
package/src/ssr.spec.tsx CHANGED
@@ -228,7 +228,6 @@ describe('Server side rendering', () => {
228
228
  DateLookup: { value: new Date() },
229
229
  Link: { size: 16 },
230
230
  Tooltip: { children: <>yo</> },
231
- SelectOption: { placeholder: { media: <img alt="img" /> } },
232
231
  };
233
232
 
234
233
  const { Provider } = exposedLibraryItems;
package/src/test-utils/assets/apple-pay-logo.svg ADDED
@@ -0,0 +1,84 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ width="165.52107px" height="105.9651px" viewBox="0 0 165.52107 105.9651" enable-background="new 0 0 165.52107 105.9651"
5
+ xml:space="preserve">
6
+ <g>
7
+ <path id="XMLID_4_" d="M150.69807,0H14.82318c-0.5659,0-1.1328,0-1.69769,0.0033c-0.47751,0.0034-0.95391,0.0087-1.43031,0.0217
8
+ c-1.039,0.0281-2.0869,0.0894-3.1129,0.2738c-1.0424,0.1876-2.0124,0.4936-2.9587,0.9754
9
+ c-0.9303,0.4731-1.782,1.0919-2.52009,1.8303c-0.73841,0.7384-1.35721,1.5887-1.83021,2.52
10
+ c-0.4819,0.9463-0.7881,1.9166-0.9744,2.9598c-0.18539,1.0263-0.2471,2.074-0.2751,3.1119
11
+ c-0.0128,0.4764-0.01829,0.9528-0.0214,1.4291c-0.0033,0.5661-0.0022,1.1318-0.0022,1.6989V91.142
12
+ c0,0.5671-0.0011,1.13181,0.0022,1.69901c0.00311,0.4763,0.0086,0.9527,0.0214,1.4291
13
+ c0.028,1.03699,0.08971,2.08469,0.2751,3.11069c0.1863,1.0436,0.4925,2.0135,0.9744,2.9599
14
+ c0.473,0.9313,1.0918,1.7827,1.83021,2.52c0.73809,0.7396,1.58979,1.3583,2.52009,1.8302
15
+ c0.9463,0.4831,1.9163,0.7892,2.9587,0.9767c1.026,0.1832,2.0739,0.2456,3.1129,0.2737c0.4764,0.0108,0.9528,0.0172,1.43031,0.0194
16
+ c0.56489,0.0044,1.13179,0.0044,1.69769,0.0044h135.87489c0.5649,0,1.13181,0,1.69659-0.0044
17
+ c0.47641-0.0022,0.95282-0.0086,1.4314-0.0194c1.0368-0.0281,2.0845-0.0905,3.11301-0.2737
18
+ c1.041-0.1875,2.0112-0.4936,2.9576-0.9767c0.9313-0.4719,1.7805-1.0906,2.52011-1.8302c0.7372-0.7373,1.35599-1.5887,1.8302-2.52
19
+ c0.48299-0.9464,0.78889-1.9163,0.97429-2.9599c0.1855-1.026,0.2457-2.0737,0.2738-3.11069
20
+ c0.013-0.4764,0.01941-0.9528,0.02161-1.4291c0.00439-0.5672,0.00439-1.1319,0.00439-1.69901V14.8242
21
+ c0-0.5671,0-1.1328-0.00439-1.6989c-0.0022-0.4763-0.00861-0.9527-0.02161-1.4291c-0.02811-1.0379-0.0883-2.0856-0.2738-3.1119
22
+ c-0.18539-1.0432-0.4913-2.0135-0.97429-2.9598c-0.47421-0.9313-1.093-1.7816-1.8302-2.52
23
+ c-0.73961-0.7384-1.58881-1.3572-2.52011-1.8303c-0.9464-0.4818-1.9166-0.7878-2.9576-0.9754
24
+ c-1.0285-0.1844-2.0762-0.2457-3.11301-0.2738c-0.47858-0.013-0.95499-0.0183-1.4314-0.0217C151.82988,0,151.26297,0,150.69807,0
25
+ L150.69807,0z"/>
26
+ <path id="XMLID_3_" fill="#FFFFFF" d="M150.69807,3.532l1.67149,0.0032c0.4528,0.0032,0.90561,0.0081,1.36092,0.0205
27
+ c0.79201,0.0214,1.71849,0.0643,2.58209,0.2191c0.7507,0.1352,1.38029,0.3408,1.9845,0.6484
28
+ c0.5965,0.3031,1.14301,0.7003,1.62019,1.1768c0.479,0.4797,0.87671,1.0271,1.18381,1.6302
29
+ c0.30589,0.5995,0.51019,1.2261,0.64459,1.9823c0.1544,0.8542,0.1971,1.7832,0.21881,2.5801
30
+ c0.01219,0.4498,0.01819,0.8996,0.0204,1.3601c0.00429,0.5569,0.0042,1.1135,0.0042,1.6715V91.142
31
+ c0,0.558,0.00009,1.1136-0.0043,1.6824c-0.00211,0.4497-0.0081,0.8995-0.0204,1.3501c-0.02161,0.7957-0.0643,1.7242-0.2206,2.5885
32
+ c-0.13251,0.7458-0.3367,1.3725-0.64429,1.975c-0.30621,0.6016-0.70331,1.1484-1.18022,1.6251
33
+ c-0.47989,0.48-1.0246,0.876-1.62819,1.1819c-0.5997,0.3061-1.22821,0.51151-1.97151,0.6453
34
+ c-0.88109,0.157-1.84639,0.2002-2.57339,0.2199c-0.4574,0.0103-0.9126,0.01649-1.37889,0.0187
35
+ c-0.55571,0.0043-1.1134,0.0042-1.6692,0.0042H14.82318c-0.0074,0-0.0146,0-0.0221,0c-0.5494,0-1.0999,0-1.6593-0.0043
36
+ c-0.4561-0.00211-0.9112-0.0082-1.3512-0.0182c-0.7436-0.0201-1.7095-0.0632-2.5834-0.2193
37
+ c-0.74969-0.1348-1.3782-0.3402-1.9858-0.6503c-0.59789-0.3032-1.1422-0.6988-1.6223-1.1797
38
+ c-0.4764-0.4756-0.8723-1.0207-1.1784-1.6232c-0.3064-0.6019-0.5114-1.2305-0.64619-1.9852
39
+ c-0.15581-0.8626-0.19861-1.7874-0.22-2.5777c-0.01221-0.4525-0.01731-0.9049-0.02021-1.3547l-0.0022-1.3279l0.0001-0.3506V14.8242
40
+ l-0.0001-0.3506l0.0021-1.3251c0.003-0.4525,0.0081-0.9049,0.02031-1.357c0.02139-0.7911,0.06419-1.7163,0.22129-2.5861
41
+ c0.1336-0.7479,0.3385-1.3765,0.6465-1.9814c0.3037-0.5979,0.7003-1.1437,1.17921-1.6225
42
+ c0.477-0.4772,1.02309-0.8739,1.62479-1.1799c0.6011-0.3061,1.2308-0.5116,1.9805-0.6465c0.8638-0.1552,1.7909-0.198,2.5849-0.2195
43
+ c0.4526-0.0123,0.9052-0.0172,1.3544-0.0203l1.6771-0.0033H150.69807"/>
44
+ <g>
45
+ <g>
46
+ <path d="M45.1862,35.64053c1.41724-1.77266,2.37897-4.15282,2.12532-6.58506c-2.07464,0.10316-4.60634,1.36871-6.07207,3.14276
47
+ c-1.31607,1.5192-2.4809,3.99902-2.17723,6.3293C41.39111,38.72954,43.71785,37.36345,45.1862,35.64053"/>
48
+ <path d="M47.28506,38.98252c-3.38211-0.20146-6.25773,1.91951-7.87286,1.91951c-1.61602,0-4.08931-1.81799-6.76438-1.76899
49
+ c-3.48177,0.05114-6.71245,2.01976-8.4793,5.15079c-3.63411,6.2636-0.95904,15.55471,2.57494,20.65606
50
+ c1.71618,2.5238,3.78447,5.30269,6.50976,5.20287c2.57494-0.10104,3.58421-1.66732,6.71416-1.66732
51
+ c3.12765,0,4.03679,1.66732,6.76252,1.61681c2.82665-0.05054,4.59381-2.52506,6.30997-5.05132
52
+ c1.96878-2.877,2.77473-5.65498,2.82542-5.80748c-0.0507-0.05051-5.45058-2.12204-5.50065-8.33358
53
+ c-0.05098-5.20101,4.23951-7.6749,4.44144-7.82832C52.3832,39.4881,48.5975,39.08404,47.28506,38.98252"/>
54
+ </g>
55
+ <g>
56
+ <path d="M76.73385,31.94381c7.35096,0,12.4697,5.06708,12.4697,12.44437c0,7.40363-5.22407,12.49704-12.65403,12.49704h-8.13892
57
+ v12.94318h-5.88037v-37.8846H76.73385z M68.41059,51.9493h6.74732c5.11975,0,8.0336-2.75636,8.0336-7.53479
58
+ c0-4.77792-2.91385-7.50845-8.00727-7.50845h-6.77365V51.9493z"/>
59
+ <path d="M90.73997,61.97864c0-4.8311,3.70182-7.79761,10.26583-8.16526l7.56061-0.44614v-2.12639
60
+ c0-3.07185-2.07423-4.90959-5.53905-4.90959c-3.28251,0-5.33041,1.57492-5.82871,4.04313h-5.35574
61
+ c0.31499-4.98859,4.56777-8.66407,11.3941-8.66407c6.69466,0,10.97377,3.54432,10.97377,9.08388v19.03421h-5.43472v-4.54194
62
+ h-0.13065c-1.60125,3.07185-5.09341,5.01441-8.71623,5.01441C94.52078,70.30088,90.73997,66.94038,90.73997,61.97864z
63
+ M108.56641,59.4846v-2.17905l-6.8,0.41981c-3.38683,0.23649-5.30306,1.73291-5.30306,4.09579
64
+ c0,2.41504,1.99523,3.99046,5.04075,3.99046C105.46823,65.81161,108.56641,63.08108,108.56641,59.4846z"/>
65
+ <path d="M119.34167,79.9889v-4.5946c0.4193,0.10483,1.36425,0.10483,1.83723,0.10483c2.6252,0,4.04313-1.10245,4.90908-3.9378
66
+ c0-0.05267,0.49931-1.68025,0.49931-1.70658l-9.97616-27.64562h6.14268l6.98432,22.47371h0.10432l6.98433-22.47371h5.9857
67
+ l-10.34483,29.06304c-2.36186,6.69517-5.0924,8.84789-10.81577,8.84789C121.17891,80.12006,119.76098,80.06739,119.34167,79.9889
68
+ z"/>
69
+ </g>
70
+ </g>
71
+ </g>
72
+ <g>
73
+ </g>
74
+ <g>
75
+ </g>
76
+ <g>
77
+ </g>
78
+ <g>
79
+ </g>
80
+ <g>
81
+ </g>
82
+ <g>
83
+ </g>
84
+ </svg>
package/src/test-utils/fake-data.ts CHANGED
@@ -1,6 +1,11 @@
1
+ export const lorem5 = 'Lorem ipsum dolor sit amet.';
2
+
1
3
  export const lorem10 =
2
4
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
3
5
 
6
+ export const lorem20 =
7
+ 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
8
+
4
9
  export const lorem40 =
5
10
  'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';
6
11
 
package/src/uploadInput/UploadInput.tsx CHANGED
@@ -328,9 +328,7 @@ const UploadInput = ({
328
328
  | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
329
329
  | null;
330
330
 
331
- const [nextFocusable, setNextFocusable] = useState<NextFocusable>(
332
- uploadInputRef.current,
333
- );
331
+ const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);
334
332
 
335
333
  const handleFocus = (fileId: string | number) => {
336
334
  fileRefs = fileRefs.filter((ref) => {
@@ -363,7 +361,7 @@ const UploadInput = ({
363
361
  // If next is an UploadItemRef, check if it has a URL (succeeded)
364
362
  if (next && 'status' in next) {
365
363
  // Find the file object for this ref
366
- const fileObj = uploadedFiles.find(f => f.id === next?.id);
364
+ const fileObj = uploadedFiles.find((f) => f.id === next?.id);
367
365
  if (
368
366
  fileObj &&
369
367
  (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&
@@ -404,19 +402,12 @@ const UploadInput = ({
404
402
  typeof focusTarget.ref.focus === 'function'
405
403
  ) {
406
404
  setTimeout(() => {
407
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
408
- if (
409
- focusTarget.ref &&
410
- typeof (focusTarget.ref as UploadItemRef).focus === 'function'
411
- ) {
405
+ if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {
412
406
  // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
413
407
  (focusTarget.ref as UploadItemRef).focus(focusTarget.target);
414
408
  }
415
409
  }, 0);
416
- } else if (
417
- focusTarget &&
418
- typeof (focusTarget as UploadItemRef).focus === 'function'
419
- ) {
410
+ } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {
420
411
  setTimeout(() => {
421
412
  (focusTarget as UploadItemRef).focus();
422
413
  }, 0);
package/build/selectOption/SelectOption.js DELETED
@@ -1,131 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var clsx = require('clsx');
7
- var Option = require('../common/Option/Option.js');
8
- require('../common/theme.js');
9
- require('../common/direction.js');
10
- require('../common/propsValues/control.js');
11
- var breakpoint = require('../common/propsValues/breakpoint.js');
12
- require('../common/propsValues/size.js');
13
- require('../common/propsValues/typography.js');
14
- require('../common/propsValues/width.js');
15
- require('../common/propsValues/type.js');
16
- require('../common/propsValues/dateMode.js');
17
- require('../common/propsValues/monthFormat.js');
18
- var position = require('../common/propsValues/position.js');
19
- require('../common/propsValues/layouts.js');
20
- require('../common/propsValues/status.js');
21
- require('../common/propsValues/sentiment.js');
22
- require('../common/propsValues/profileType.js');
23
- require('../common/propsValues/variant.js');
24
- require('../common/propsValues/scroll.js');
25
- require('../common/propsValues/markdownNodeType.js');
26
- require('../common/fileType.js');
27
- var icons = require('@transferwise/icons');
28
- var reactIntl = require('react-intl');
29
- require('../common/closeButton/CloseButton.messages.js');
30
- var jsxRuntime = require('react/jsx-runtime');
31
- var Section = require('../section/Section.js');
32
- var Header = require('../header/Header.js');
33
- var NavigationOption = require('../navigationOption/NavigationOption.js');
34
- var NavigationOptionsList = require('../navigationOptionsList/NavigationOptionsList.js');
35
- var contexts = require('../inputs/contexts.js');
36
- var SelectOption_messages = require('./SelectOption.messages.js');
37
- var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
38
- var useScreenSize = require('../common/hooks/useScreenSize.js');
39
-
40
- function SelectOption({
41
- selected = undefined,
42
- options,
43
- onChange,
44
- placeholder,
45
- disabled,
46
- ...props
47
- }) {
48
- const intl = reactIntl.useIntl();
49
- const rootRef = React.useRef(null);
50
- const [showOptions, setShowOptions] = React.useState(false);
51
- const hasSelected = selected !== undefined;
52
- const isLargeScreen = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
53
- const inputAttributes = contexts.useInputAttributes();
54
- const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
55
- function handleOnClick(showOptionsStatus) {
56
- return () => {
57
- setShowOptions(showOptionsStatus);
58
- };
59
- }
60
- function handleOnChange(data) {
61
- return () => {
62
- setShowOptions(false);
63
- onChange(data);
64
- };
65
- }
66
- function getOptions(isLargeScreen = false) {
67
- return /*#__PURE__*/jsxRuntime.jsx("div", {
68
- className: clsx.clsx({
69
- 'np-select-option-list': isLargeScreen
70
- }),
71
- children: options.map((optionsSection, index) => /*#__PURE__*/jsxRuntime.jsxs(Section.default, {
72
- className: clsx.clsx({
73
- 'p-x-2 p-y-1': isLargeScreen
74
- }),
75
- children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
76
- title: optionsSection.title
77
- }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionsList.default, {
78
- children: optionsSection.options.map((option, index) => {
79
- return /*#__PURE__*/jsxRuntime.jsx(NavigationOption.default, {
80
- isContainerAligned: !isLargeScreen,
81
- showMediaCircle: true,
82
- showMediaAtAllSizes: true,
83
- onClick: handleOnChange(option),
84
- ...option
85
- }, index);
86
- })
87
- })]
88
- }, index))
89
- });
90
- }
91
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
92
- children: [/*#__PURE__*/jsxRuntime.jsx(Option.default, {
93
- ref: rootRef,
94
- as: "div",
95
- showMediaAtAllSizes: true,
96
- disabled: disabled,
97
- decision: false,
98
- media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {
99
- size: 24
100
- }),
101
- title: (hasSelected ? selected : placeholder).title,
102
- content: (hasSelected ? selected : placeholder).content,
103
- className: clsx.clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
104
- button: /*#__PURE__*/jsxRuntime.jsx("button", {
105
- ...inputAttributes,
106
- type: "button",
107
- disabled: disabled,
108
- "aria-labelledby": ariaLabelledBy,
109
- "aria-haspopup": "dialog",
110
- "aria-expanded": showOptions,
111
- className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
112
- "aria-label": hasSelected ? undefined : props['aria-label'],
113
- onClick: handleOnClick(true),
114
- children: hasSelected ? /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
115
- title: intl.formatMessage(SelectOption_messages.default.selectedActionLabel)
116
- }) : placeholder.actionLabel || intl.formatMessage(SelectOption_messages.default.actionLabel)
117
- })
118
- }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel.default, {
119
- anchorWidth: true,
120
- altAxis: true,
121
- anchorRef: rootRef,
122
- open: showOptions,
123
- position: position.Position.BOTTOM,
124
- onClose: handleOnClick(false),
125
- children: getOptions(isLargeScreen)
126
- })]
127
- });
128
- }
129
-
130
- exports.default = SelectOption;
131
- //# sourceMappingURL=SelectOption.js.map
package/build/selectOption/SelectOption.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.js","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n title?: HeaderProps['title'];\n options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n OptionProps,\n 'media' | 'title' | 'content' | 'disabled'\n> & {\n value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n onChange: (selected: SelectOptionValue<T>) => void;\n selected?: SelectOptionValue<T>;\n options: SelectOptiopsSection<T>[];\n placeholder: SelectOptionPlaceholder;\n} & Omit<\n OptionProps,\n 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n selected = undefined,\n options,\n onChange,\n placeholder,\n disabled,\n ...props\n}: SelectOptionProps<T>) {\n const intl = useIntl();\n const rootRef = useRef(null);\n const [showOptions, setShowOptions] = useState(false);\n\n const hasSelected = selected !== undefined;\n const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n const inputAttributes = useInputAttributes();\n const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n function handleOnClick(showOptionsStatus: boolean) {\n return () => {\n setShowOptions(showOptionsStatus);\n };\n }\n\n function handleOnChange(data: SelectOptionValue<T>) {\n return () => {\n setShowOptions(false);\n onChange(data);\n };\n }\n\n function getOptions(isLargeScreen = false) {\n return (\n <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n {options.map((optionsSection, index) => (\n <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n {optionsSection.title && <Header title={optionsSection.title} />}\n <NavigationOptionsList>\n {optionsSection.options.map((option, index) => {\n return (\n <NavigationOption\n key={index}\n isContainerAligned={!isLargeScreen}\n showMediaCircle\n showMediaAtAllSizes\n onClick={handleOnChange(option)}\n {...option}\n />\n );\n })}\n </NavigationOptionsList>\n </Section>\n ))}\n </div>\n );\n }\n\n return (\n <>\n <Option\n ref={rootRef}\n as=\"div\"\n showMediaAtAllSizes\n disabled={disabled}\n decision={false}\n media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n title={(hasSelected ? selected : placeholder).title}\n content={(hasSelected ? selected : placeholder).content}\n className={clsx(\n 'np-select-option',\n 'clickable',\n hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n props.className,\n )}\n button={\n <button\n {...inputAttributes}\n type=\"button\"\n disabled={disabled}\n aria-labelledby={ariaLabelledBy}\n aria-haspopup=\"dialog\"\n aria-expanded={showOptions}\n className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n aria-label={hasSelected ? undefined : props['aria-label']}\n onClick={handleOnClick(true)}\n >\n {hasSelected ? (\n <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n ) : (\n placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n )}\n </button>\n }\n />\n <ResponsivePanel\n anchorWidth\n altAxis\n anchorRef={rootRef}\n open={showOptions}\n position={Position.BOTTOM}\n onClose={handleOnClick(false)}\n >\n {getOptions(isLargeScreen)}\n </ResponsivePanel>\n </>\n );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CwB,SAAAA,YAAYA,CAAI;AACtCC,EAAAA,QAAQ,GAAGC,SAAS;EACpBC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,QAAQ;EACR,GAAGC;AACkB,CAAA,EAAA;AACrB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,OAAO,GAAGC,YAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAErD,EAAA,MAAMC,WAAW,GAAGd,QAAQ,KAAKC,SAAS;AAC1C,EAAA,MAAMc,aAAa,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAErD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;EAC5C,MAAMC,cAAc,GAAGf,KAAK,CAAC,iBAAiB,CAAC,IAAIa,eAAe,GAAG,iBAAiB,CAAC;EAEvF,SAASG,aAAaA,CAACC,iBAA0B,EAAA;AAC/C,IAAA,OAAO,MAAK;MACVX,cAAc,CAACW,iBAAiB,CAAC;KAClC;AACH;EAEA,SAASC,cAAcA,CAACC,IAA0B,EAAA;AAChD,IAAA,OAAO,MAAK;MACVb,cAAc,CAAC,KAAK,CAAC;MACrBT,QAAQ,CAACsB,IAAI,CAAC;KACf;AACH;AAEA,EAAA,SAASC,UAAUA,CAACX,aAAa,GAAG,KAAK,EAAA;AACvC,IAAA,oBACEY,cAAA,CAAA,KAAA,EAAA;MAAKC,SAAS,EAAEC,SAAI,CAAC;AAAE,QAAA,uBAAuB,EAAEd;AAAe,OAAA,CAAE;AAAAe,MAAAA,QAAA,EAC9D5B,OAAO,CAAC6B,GAAG,CAAC,CAACC,cAAc,EAAEC,KAAK,kBACjCC,eAAA,CAACC,eAAO,EAAA;QAAaP,SAAS,EAAEC,SAAI,CAAC;AAAE,UAAA,aAAa,EAAEd;AAAe,SAAA,CAAE;AAAAe,QAAAA,QAAA,GACpEE,cAAc,CAACI,KAAK,iBAAIT,cAAA,CAACU,aAAM,EAAA;UAACD,KAAK,EAAEJ,cAAc,CAACI;AAAM,UAAG,eAChET,cAAA,CAACW,6BAAqB,EAAA;UAAAR,QAAA,EACnBE,cAAc,CAAC9B,OAAO,CAAC6B,GAAG,CAAC,CAACQ,MAAM,EAAEN,KAAK,KAAI;YAC5C,oBACEN,cAAA,CAACa,wBAAgB,EAAA;cAEfC,kBAAkB,EAAE,CAAC1B,aAAc;cACnC2B,eAAe,EAAA,IAAA;cACfC,mBAAmB,EAAA,IAAA;AACnBC,cAAAA,OAAO,EAAEpB,cAAc,CAACe,MAAM,CAAE;cAAA,GAC5BA;AAAM,aAAA,EALLN,KAKM,CACX;WAEL;AAAC,SACmB,CACzB;AAAA,OAAA,EAhBcA,KAgBL,CACV;AAAC,KACC,CAAC;AAEV;EAEA,oBACEC,eAAA,CAAAW,mBAAA,EAAA;IAAAf,QAAA,EAAA,cACEH,cAAA,CAACmB,cAAM,EAAA;AACLC,MAAAA,GAAG,EAAEtC,OAAQ;AACbuC,MAAAA,EAAE,EAAC,KAAK;MACRL,mBAAmB,EAAA,IAAA;AACnBtC,MAAAA,QAAQ,EAAEA,QAAS;AACnB4C,MAAAA,QAAQ,EAAE,KAAM;AAChBC,MAAAA,KAAK,EAAEpC,WAAW,GAAGd,QAAQ,CAACkD,KAAK,GAAI9C,WAAW,CAAC8C,KAAK,iBAAIvB,cAAA,CAACwB,UAAI,EAAA;AAACC,QAAAA,IAAI,EAAE;AAAG,OAAA,CAAK;MAChFhB,KAAK,EAAE,CAACtB,WAAW,GAAGd,QAAQ,GAAGI,WAAW,EAAEgC,KAAM;MACpDiB,OAAO,EAAE,CAACvC,WAAW,GAAGd,QAAQ,GAAGI,WAAW,EAAEiD,OAAQ;AACxDzB,MAAAA,SAAS,EAAEC,SAAI,CACb,kBAAkB,EAClB,WAAW,EACXf,WAAW,GAAG,2BAA2B,GAAG,8BAA8B,EAC1ER,KAAK,CAACsB,SAAS,CACf;AACF0B,MAAAA,MAAM,eACJ3B,cAAA,CAAA,QAAA,EAAA;AAAA,QAAA,GACMR,eAAe;AACnBoC,QAAAA,IAAI,EAAC,QAAQ;AACblD,QAAAA,QAAQ,EAAEA,QAAS;AACnB,QAAA,iBAAA,EAAiBgB,cAAe;AAChC,QAAA,eAAA,EAAc,QAAQ;AACtB,QAAA,eAAA,EAAeV,WAAY;AAC3BiB,QAAAA,SAAS,EAAEd,WAAW,GAAG,cAAc,GAAG,eAAgB;AAC1D,QAAA,YAAA,EAAYA,WAAW,GAAGb,SAAS,GAAGK,KAAK,CAAC,YAAY,CAAE;AAC1DsC,QAAAA,OAAO,EAAEtB,aAAa,CAAC,IAAI,CAAE;AAAAQ,QAAAA,QAAA,EAE5BhB,WAAW,gBACVa,cAAA,CAAC6B,iBAAW,EAAA;AAACpB,UAAAA,KAAK,EAAE7B,IAAI,CAACkD,aAAa,CAACC,6BAAQ,CAACC,mBAAmB;AAAE,SAAA,CAAG,GAExEvD,WAAW,CAACwD,WAAW,IAAIrD,IAAI,CAACkD,aAAa,CAACC,6BAAQ,CAACE,WAAW;OAE9D;AACT,KAEH,CAAA,eAAAjC,cAAA,CAACkC,uBAAe,EAAA;MACdC,WAAW,EAAA,IAAA;MACXC,OAAO,EAAA,IAAA;AACPC,MAAAA,SAAS,EAAEvD,OAAQ;AACnBwD,MAAAA,IAAI,EAAEtD,WAAY;MAClBuD,QAAQ,EAAEC,iBAAQ,CAACC,MAAO;AAC1BC,MAAAA,OAAO,EAAE/C,aAAa,CAAC,KAAK,CAAE;MAAAQ,QAAA,EAE7BJ,UAAU,CAACX,aAAa;AAAC,KACX,CACnB;AAAA,GAAA,CAAG;AAEP;;;;"}
package/build/selectOption/SelectOption.messages.js DELETED
@@ -1,17 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactIntl = require('react-intl');
6
-
7
- var messages = reactIntl.defineMessages({
8
- actionLabel: {
9
- id: "neptune.SelectOption.action.label"
10
- },
11
- selectedActionLabel: {
12
- id: "neptune.SelectOption.selected.action.label"
13
- }
14
- });
15
-
16
- exports.default = messages;
17
- //# sourceMappingURL=SelectOption.messages.js.map
package/build/selectOption/SelectOption.messages.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.messages.js","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n actionLabel: {\n id: 'neptune.SelectOption.action.label',\n defaultMessage: 'Choose',\n },\n selectedActionLabel: {\n id: 'neptune.SelectOption.selected.action.label',\n defaultMessage: 'Change chosen option',\n },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
package/build/selectOption/SelectOption.messages.mjs DELETED
@@ -1,13 +0,0 @@
1
- import { defineMessages } from 'react-intl';
2
-
3
- var messages = defineMessages({
4
- actionLabel: {
5
- id: "neptune.SelectOption.action.label"
6
- },
7
- selectedActionLabel: {
8
- id: "neptune.SelectOption.selected.action.label"
9
- }
10
- });
11
-
12
- export { messages as default };
13
- //# sourceMappingURL=SelectOption.messages.mjs.map
package/build/selectOption/SelectOption.messages.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.messages.mjs","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n actionLabel: {\n id: 'neptune.SelectOption.action.label',\n defaultMessage: 'Choose',\n },\n selectedActionLabel: {\n id: 'neptune.SelectOption.selected.action.label',\n defaultMessage: 'Change chosen option',\n },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}