@transferwise/components 46.98.0 → 46.98.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (199) hide show
  1. package/build/dateInput/DateInput.js +4 -4
  2. package/build/dateInput/DateInput.js.map +1 -1
  3. package/build/dateInput/DateInput.mjs +4 -4
  4. package/build/dateInput/DateInput.mjs.map +1 -1
  5. package/build/dateLookup/DateLookup.js +4 -4
  6. package/build/dateLookup/DateLookup.js.map +1 -1
  7. package/build/dateLookup/DateLookup.mjs +4 -4
  8. package/build/dateLookup/DateLookup.mjs.map +1 -1
  9. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
  10. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
  11. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs +3 -3
  12. package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +1 -1
  13. package/build/i18n/cs.json +0 -2
  14. package/build/i18n/cs.json.js +0 -2
  15. package/build/i18n/cs.json.js.map +1 -1
  16. package/build/i18n/cs.json.mjs +0 -2
  17. package/build/i18n/cs.json.mjs.map +1 -1
  18. package/build/i18n/de.json +0 -2
  19. package/build/i18n/de.json.js +0 -2
  20. package/build/i18n/de.json.js.map +1 -1
  21. package/build/i18n/de.json.mjs +0 -2
  22. package/build/i18n/de.json.mjs.map +1 -1
  23. package/build/i18n/en.json +0 -2
  24. package/build/i18n/en.json.js +0 -2
  25. package/build/i18n/en.json.js.map +1 -1
  26. package/build/i18n/en.json.mjs +0 -2
  27. package/build/i18n/en.json.mjs.map +1 -1
  28. package/build/i18n/es.json +0 -2
  29. package/build/i18n/es.json.js +0 -2
  30. package/build/i18n/es.json.js.map +1 -1
  31. package/build/i18n/es.json.mjs +0 -2
  32. package/build/i18n/es.json.mjs.map +1 -1
  33. package/build/i18n/fr.json +0 -2
  34. package/build/i18n/fr.json.js +0 -2
  35. package/build/i18n/fr.json.js.map +1 -1
  36. package/build/i18n/fr.json.mjs +0 -2
  37. package/build/i18n/fr.json.mjs.map +1 -1
  38. package/build/i18n/hu.json +0 -2
  39. package/build/i18n/hu.json.js +0 -2
  40. package/build/i18n/hu.json.js.map +1 -1
  41. package/build/i18n/hu.json.mjs +0 -2
  42. package/build/i18n/hu.json.mjs.map +1 -1
  43. package/build/i18n/id.json +0 -2
  44. package/build/i18n/id.json.js +0 -2
  45. package/build/i18n/id.json.js.map +1 -1
  46. package/build/i18n/id.json.mjs +0 -2
  47. package/build/i18n/id.json.mjs.map +1 -1
  48. package/build/i18n/it.json +0 -2
  49. package/build/i18n/it.json.js +0 -2
  50. package/build/i18n/it.json.js.map +1 -1
  51. package/build/i18n/it.json.mjs +0 -2
  52. package/build/i18n/it.json.mjs.map +1 -1
  53. package/build/i18n/ja.json +0 -2
  54. package/build/i18n/ja.json.js +0 -2
  55. package/build/i18n/ja.json.js.map +1 -1
  56. package/build/i18n/ja.json.mjs +0 -2
  57. package/build/i18n/ja.json.mjs.map +1 -1
  58. package/build/i18n/nl.json +0 -2
  59. package/build/i18n/pl.json +0 -2
  60. package/build/i18n/pl.json.js +0 -2
  61. package/build/i18n/pl.json.js.map +1 -1
  62. package/build/i18n/pl.json.mjs +0 -2
  63. package/build/i18n/pl.json.mjs.map +1 -1
  64. package/build/i18n/pt.json +0 -2
  65. package/build/i18n/pt.json.js +0 -2
  66. package/build/i18n/pt.json.js.map +1 -1
  67. package/build/i18n/pt.json.mjs +0 -2
  68. package/build/i18n/pt.json.mjs.map +1 -1
  69. package/build/i18n/ro.json +0 -2
  70. package/build/i18n/ro.json.js +0 -2
  71. package/build/i18n/ro.json.js.map +1 -1
  72. package/build/i18n/ro.json.mjs +0 -2
  73. package/build/i18n/ro.json.mjs.map +1 -1
  74. package/build/i18n/ru.json +0 -2
  75. package/build/i18n/ru.json.js +0 -2
  76. package/build/i18n/ru.json.js.map +1 -1
  77. package/build/i18n/ru.json.mjs +0 -2
  78. package/build/i18n/ru.json.mjs.map +1 -1
  79. package/build/i18n/th.json +0 -2
  80. package/build/i18n/th.json.js +0 -2
  81. package/build/i18n/th.json.js.map +1 -1
  82. package/build/i18n/th.json.mjs +0 -2
  83. package/build/i18n/th.json.mjs.map +1 -1
  84. package/build/i18n/tr.json +0 -2
  85. package/build/i18n/tr.json.js +0 -2
  86. package/build/i18n/tr.json.js.map +1 -1
  87. package/build/i18n/tr.json.mjs +0 -2
  88. package/build/i18n/tr.json.mjs.map +1 -1
  89. package/build/i18n/zh-CN.json +0 -2
  90. package/build/i18n/zh-CN.json.js +0 -2
  91. package/build/i18n/zh-CN.json.js.map +1 -1
  92. package/build/i18n/zh-CN.json.mjs +0 -2
  93. package/build/i18n/zh-CN.json.mjs.map +1 -1
  94. package/build/i18n/zh-HK.json +0 -2
  95. package/build/i18n/zh-HK.json.js +0 -2
  96. package/build/i18n/zh-HK.json.js.map +1 -1
  97. package/build/i18n/zh-HK.json.mjs +0 -2
  98. package/build/i18n/zh-HK.json.mjs.map +1 -1
  99. package/build/index.js +0 -2
  100. package/build/index.js.map +1 -1
  101. package/build/index.mjs +0 -1
  102. package/build/index.mjs.map +1 -1
  103. package/build/main.css +13 -45
  104. package/build/moneyInput/MoneyInput.js +2 -2
  105. package/build/moneyInput/MoneyInput.js.map +1 -1
  106. package/build/moneyInput/MoneyInput.mjs +2 -2
  107. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  108. package/build/snackbar/Snackbar.js +1 -1
  109. package/build/snackbar/Snackbar.js.map +1 -1
  110. package/build/snackbar/Snackbar.mjs +1 -1
  111. package/build/snackbar/Snackbar.mjs.map +1 -1
  112. package/build/styles/dateInput/DateInput.css +13 -1
  113. package/build/styles/main.css +13 -45
  114. package/build/tabs/Tabs.js +3 -3
  115. package/build/tabs/Tabs.js.map +1 -1
  116. package/build/tabs/Tabs.mjs +3 -3
  117. package/build/tabs/Tabs.mjs.map +1 -1
  118. package/build/test-utils/assets/apple-pay-logo.svg +84 -0
  119. package/build/typeahead/Typeahead.js +2 -2
  120. package/build/typeahead/Typeahead.js.map +1 -1
  121. package/build/typeahead/Typeahead.mjs +2 -2
  122. package/build/typeahead/Typeahead.mjs.map +1 -1
  123. package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -2
  124. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  125. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
  126. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  127. package/build/types/index.d.ts +0 -2
  128. package/build/types/index.d.ts.map +1 -1
  129. package/build/types/test-utils/fake-data.d.ts +2 -0
  130. package/build/types/test-utils/fake-data.d.ts.map +1 -1
  131. package/build/types/test-utils/index.d.ts +0 -4
  132. package/build/types/test-utils/index.d.ts.map +1 -1
  133. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  134. package/build/upload/Upload.js +2 -2
  135. package/build/upload/Upload.js.map +1 -1
  136. package/build/upload/Upload.mjs +2 -2
  137. package/build/upload/Upload.mjs.map +1 -1
  138. package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
  139. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  140. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
  141. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  142. package/build/uploadInput/UploadInput.js +0 -1
  143. package/build/uploadInput/UploadInput.js.map +1 -1
  144. package/build/uploadInput/UploadInput.mjs +0 -1
  145. package/build/uploadInput/UploadInput.mjs.map +1 -1
  146. package/package.json +11 -11
  147. package/src/dateInput/DateInput.css +13 -1
  148. package/src/dateInput/DateInput.less +20 -3
  149. package/src/dateInput/DateInput.tests.story.tsx +14 -3
  150. package/src/dateInput/DateInput.tsx +4 -4
  151. package/src/i18n/cs.json +0 -2
  152. package/src/i18n/de.json +0 -2
  153. package/src/i18n/en.json +0 -2
  154. package/src/i18n/es.json +0 -2
  155. package/src/i18n/fr.json +0 -2
  156. package/src/i18n/hu.json +0 -2
  157. package/src/i18n/id.json +0 -2
  158. package/src/i18n/it.json +0 -2
  159. package/src/i18n/ja.json +0 -2
  160. package/src/i18n/nl.json +0 -2
  161. package/src/i18n/pl.json +0 -2
  162. package/src/i18n/pt.json +0 -2
  163. package/src/i18n/ro.json +0 -2
  164. package/src/i18n/ru.json +0 -2
  165. package/src/i18n/th.json +0 -2
  166. package/src/i18n/tr.json +0 -2
  167. package/src/i18n/zh-CN.json +0 -2
  168. package/src/i18n/zh-HK.json +0 -2
  169. package/src/index.ts +0 -2
  170. package/src/legacylistItem/LegacyListItem.story.tsx +5 -5
  171. package/src/legacylistItem/LegacyListItem.tests.story.tsx +6 -6
  172. package/src/main.css +13 -45
  173. package/src/main.less +0 -1
  174. package/src/ssr.spec.tsx +0 -1
  175. package/src/test-utils/assets/apple-pay-logo.svg +84 -0
  176. package/src/test-utils/fake-data.ts +5 -0
  177. package/src/uploadInput/UploadInput.tsx +4 -13
  178. package/build/selectOption/SelectOption.js +0 -131
  179. package/build/selectOption/SelectOption.js.map +0 -1
  180. package/build/selectOption/SelectOption.messages.js +0 -17
  181. package/build/selectOption/SelectOption.messages.js.map +0 -1
  182. package/build/selectOption/SelectOption.messages.mjs +0 -13
  183. package/build/selectOption/SelectOption.messages.mjs.map +0 -1
  184. package/build/selectOption/SelectOption.mjs +0 -127
  185. package/build/selectOption/SelectOption.mjs.map +0 -1
  186. package/build/styles/selectOption/SelectOption.css +0 -44
  187. package/build/types/selectOption/SelectOption.d.ts +0 -21
  188. package/build/types/selectOption/SelectOption.d.ts.map +0 -1
  189. package/build/types/selectOption/SelectOption.messages.d.ts +0 -12
  190. package/build/types/selectOption/SelectOption.messages.d.ts.map +0 -1
  191. package/build/types/selectOption/index.d.ts +0 -3
  192. package/build/types/selectOption/index.d.ts.map +0 -1
  193. package/src/selectOption/SelectOption.css +0 -44
  194. package/src/selectOption/SelectOption.less +0 -40
  195. package/src/selectOption/SelectOption.messages.ts +0 -12
  196. package/src/selectOption/SelectOption.spec.tsx +0 -83
  197. package/src/selectOption/SelectOption.story.tsx +0 -277
  198. package/src/selectOption/SelectOption.tsx +0 -151
  199. package/src/selectOption/index.ts +0 -2
@@ -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);
@@ -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
@@ -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;;;;"}
@@ -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
@@ -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;;;;"}
@@ -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
@@ -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;;;;"}
@@ -1,127 +0,0 @@
1
- import { useRef, useState } from 'react';
2
- import { clsx } from 'clsx';
3
- import Option from '../common/Option/Option.mjs';
4
- import '../common/theme.mjs';
5
- import '../common/direction.mjs';
6
- import '../common/propsValues/control.mjs';
7
- import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
8
- import '../common/propsValues/size.mjs';
9
- import '../common/propsValues/typography.mjs';
10
- import '../common/propsValues/width.mjs';
11
- import '../common/propsValues/type.mjs';
12
- import '../common/propsValues/dateMode.mjs';
13
- import '../common/propsValues/monthFormat.mjs';
14
- import { Position } from '../common/propsValues/position.mjs';
15
- import '../common/propsValues/layouts.mjs';
16
- import '../common/propsValues/status.mjs';
17
- import '../common/propsValues/sentiment.mjs';
18
- import '../common/propsValues/profileType.mjs';
19
- import '../common/propsValues/variant.mjs';
20
- import '../common/propsValues/scroll.mjs';
21
- import '../common/propsValues/markdownNodeType.mjs';
22
- import '../common/fileType.mjs';
23
- import { ChevronDown, Plus } from '@transferwise/icons';
24
- import { useIntl } from 'react-intl';
25
- import '../common/closeButton/CloseButton.messages.mjs';
26
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
27
- import Section from '../section/Section.mjs';
28
- import { Header } from '../header/Header.mjs';
29
- import NavigationOption from '../navigationOption/NavigationOption.mjs';
30
- import NavigationOptionList from '../navigationOptionsList/NavigationOptionsList.mjs';
31
- import { useInputAttributes } from '../inputs/contexts.mjs';
32
- import messages from './SelectOption.messages.mjs';
33
- import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
34
- import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
35
-
36
- function SelectOption({
37
- selected = undefined,
38
- options,
39
- onChange,
40
- placeholder,
41
- disabled,
42
- ...props
43
- }) {
44
- const intl = useIntl();
45
- const rootRef = useRef(null);
46
- const [showOptions, setShowOptions] = useState(false);
47
- const hasSelected = selected !== undefined;
48
- const isLargeScreen = useScreenSize(Breakpoint.SMALL);
49
- const inputAttributes = useInputAttributes();
50
- const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
51
- function handleOnClick(showOptionsStatus) {
52
- return () => {
53
- setShowOptions(showOptionsStatus);
54
- };
55
- }
56
- function handleOnChange(data) {
57
- return () => {
58
- setShowOptions(false);
59
- onChange(data);
60
- };
61
- }
62
- function getOptions(isLargeScreen = false) {
63
- return /*#__PURE__*/jsx("div", {
64
- className: clsx({
65
- 'np-select-option-list': isLargeScreen
66
- }),
67
- children: options.map((optionsSection, index) => /*#__PURE__*/jsxs(Section, {
68
- className: clsx({
69
- 'p-x-2 p-y-1': isLargeScreen
70
- }),
71
- children: [optionsSection.title && /*#__PURE__*/jsx(Header, {
72
- title: optionsSection.title
73
- }), /*#__PURE__*/jsx(NavigationOptionList, {
74
- children: optionsSection.options.map((option, index) => {
75
- return /*#__PURE__*/jsx(NavigationOption, {
76
- isContainerAligned: !isLargeScreen,
77
- showMediaCircle: true,
78
- showMediaAtAllSizes: true,
79
- onClick: handleOnChange(option),
80
- ...option
81
- }, index);
82
- })
83
- })]
84
- }, index))
85
- });
86
- }
87
- return /*#__PURE__*/jsxs(Fragment, {
88
- children: [/*#__PURE__*/jsx(Option, {
89
- ref: rootRef,
90
- as: "div",
91
- showMediaAtAllSizes: true,
92
- disabled: disabled,
93
- decision: false,
94
- media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsx(Plus, {
95
- size: 24
96
- }),
97
- title: (hasSelected ? selected : placeholder).title,
98
- content: (hasSelected ? selected : placeholder).content,
99
- className: clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
100
- button: /*#__PURE__*/jsx("button", {
101
- ...inputAttributes,
102
- type: "button",
103
- disabled: disabled,
104
- "aria-labelledby": ariaLabelledBy,
105
- "aria-haspopup": "dialog",
106
- "aria-expanded": showOptions,
107
- className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
108
- "aria-label": hasSelected ? undefined : props['aria-label'],
109
- onClick: handleOnClick(true),
110
- children: hasSelected ? /*#__PURE__*/jsx(ChevronDown, {
111
- title: intl.formatMessage(messages.selectedActionLabel)
112
- }) : placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
113
- })
114
- }), /*#__PURE__*/jsx(ResponsivePanel, {
115
- anchorWidth: true,
116
- altAxis: true,
117
- anchorRef: rootRef,
118
- open: showOptions,
119
- position: Position.BOTTOM,
120
- onClose: handleOnClick(false),
121
- children: getOptions(isLargeScreen)
122
- })]
123
- });
124
- }
125
-
126
- export { SelectOption as default };
127
- //# sourceMappingURL=SelectOption.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.mjs","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":"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"}
@@ -1,44 +0,0 @@
1
- .np-select-option {
2
- border-radius: 10px;
3
- border-radius: var(--radius-small);
4
- padding: 16px;
5
- padding: var(--size-16);
6
- }
7
- .np-select-option-placeholder {
8
- background-color: rgba(134,167,189,0.10196);
9
- background-color: var(--color-background-neutral);
10
- }
11
- .np-select-option-placeholder:not(.disabled):hover {
12
- background-color: var(--color-background-neutral-hover);
13
- }
14
- .np-select-option-placeholder:not(.disabled):focus,
15
- .np-select-option-placeholder:not(.disabled):active {
16
- background-color: var(--color-background-neutral-active);
17
- }
18
- .np-select-option-selected {
19
- border: 1px solid #c9cbce;
20
- border: 1px solid var(--color-interactive-secondary);
21
- }
22
- .np-select-option-list {
23
- max-height: 350px;
24
- overflow-y: auto;
25
- }
26
- .np-select-option-list > .np-section {
27
- margin-top: 0;
28
- }
29
- .has-error * .np-select-option {
30
- --ring-outline-color: var(--color-sentiment-negative);
31
- --ring-outline-width: 3px;
32
- --ring-outline-offset: calc(-1 * var(--ring-outline-width));
33
- outline: var(--ring-outline-color) solid 3px;
34
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
35
- outline-offset: calc(-1 * 3px);
36
- outline-offset: var(--ring-outline-offset);
37
- }
38
- .has-error * .np-select-option:focus {
39
- outline: none;
40
- }
41
- .has-error * .np-select-option:focus-visible {
42
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
43
- outline-offset: var(--ring-outline-offset);
44
- }
@@ -1,21 +0,0 @@
1
- import { ActionButtonProps } from '../actionButton';
2
- import type { OptionProps } from '../common/Option/Option';
3
- import { HeaderProps } from '../header/Header';
4
- export type SelectOptiopsSection<T = unknown> = {
5
- title?: HeaderProps['title'];
6
- options: SelectOptionValue<T>[];
7
- };
8
- export type SelectOptionValue<T = unknown> = Pick<OptionProps, 'media' | 'title' | 'content' | 'disabled'> & {
9
- value?: T;
10
- };
11
- export type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {
12
- actionLabel?: ActionButtonProps['children'];
13
- };
14
- export type SelectOptionProps<T = unknown> = {
15
- onChange: (selected: SelectOptionValue<T>) => void;
16
- selected?: SelectOptionValue<T>;
17
- options: SelectOptiopsSection<T>[];
18
- placeholder: SelectOptionPlaceholder;
19
- } & Omit<OptionProps, 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'>;
20
- export default function SelectOption<T>({ selected, options, onChange, placeholder, disabled, ...props }: SelectOptionProps<T>): import("react").JSX.Element;
21
- //# sourceMappingURL=SelectOption.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAoB,EACpB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAmGtB"}
@@ -1,12 +0,0 @@
1
- declare const _default: {
2
- actionLabel: {
3
- id: string;
4
- defaultMessage: string;
5
- };
6
- selectedActionLabel: {
7
- id: string;
8
- defaultMessage: string;
9
- };
10
- };
11
- export default _default;
12
- //# sourceMappingURL=SelectOption.messages.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}
@@ -1,3 +0,0 @@
1
- export { default } from './SelectOption';
2
- export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selectOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,44 +0,0 @@
1
- .np-select-option {
2
- border-radius: 10px;
3
- border-radius: var(--radius-small);
4
- padding: 16px;
5
- padding: var(--size-16);
6
- }
7
- .np-select-option-placeholder {
8
- background-color: rgba(134,167,189,0.10196);
9
- background-color: var(--color-background-neutral);
10
- }
11
- .np-select-option-placeholder:not(.disabled):hover {
12
- background-color: var(--color-background-neutral-hover);
13
- }
14
- .np-select-option-placeholder:not(.disabled):focus,
15
- .np-select-option-placeholder:not(.disabled):active {
16
- background-color: var(--color-background-neutral-active);
17
- }
18
- .np-select-option-selected {
19
- border: 1px solid #c9cbce;
20
- border: 1px solid var(--color-interactive-secondary);
21
- }
22
- .np-select-option-list {
23
- max-height: 350px;
24
- overflow-y: auto;
25
- }
26
- .np-select-option-list > .np-section {
27
- margin-top: 0;
28
- }
29
- .has-error * .np-select-option {
30
- --ring-outline-color: var(--color-sentiment-negative);
31
- --ring-outline-width: 3px;
32
- --ring-outline-offset: calc(-1 * var(--ring-outline-width));
33
- outline: var(--ring-outline-color) solid 3px;
34
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
35
- outline-offset: calc(-1 * 3px);
36
- outline-offset: var(--ring-outline-offset);
37
- }
38
- .has-error * .np-select-option:focus {
39
- outline: none;
40
- }
41
- .has-error * .np-select-option:focus-visible {
42
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
43
- outline-offset: var(--ring-outline-offset);
44
- }
@@ -1,40 +0,0 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
2
-
3
- .np-select-option {
4
- border-radius: var(--radius-small);
5
- padding: var(--size-16);
6
-
7
- &-placeholder {
8
- background-color: var(--color-background-neutral);
9
-
10
- &:not(.disabled):hover {
11
- background-color: var(--color-background-neutral-hover);
12
- }
13
-
14
- &:not(.disabled):focus,
15
- &:not(.disabled):active {
16
- background-color: var(--color-background-neutral-active);
17
- }
18
- }
19
-
20
- &-selected {
21
- border: 1px solid var(--color-interactive-secondary);
22
- }
23
-
24
- &-list {
25
- max-height: 350px;
26
- overflow-y: auto;
27
-
28
- & > .np-section {
29
- // remove large margin in Section & Header
30
- margin-top: 0;
31
- }
32
- }
33
-
34
- .has-error * & {
35
- .ring-negative();
36
- .ring-inset();
37
- .ring();
38
- .focus-ring();
39
- }
40
- }
@@ -1,12 +0,0 @@
1
- import { defineMessages } from 'react-intl';
2
-
3
- export default defineMessages({
4
- actionLabel: {
5
- id: 'neptune.SelectOption.action.label',
6
- defaultMessage: 'Choose',
7
- },
8
- selectedActionLabel: {
9
- id: 'neptune.SelectOption.selected.action.label',
10
- defaultMessage: 'Change chosen option',
11
- },
12
- });