@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.
- package/build/dateInput/DateInput.js +4 -4
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +4 -4
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +4 -4
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +4 -4
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs +3 -3
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +1 -1
- package/build/i18n/cs.json +0 -2
- package/build/i18n/cs.json.js +0 -2
- package/build/i18n/cs.json.js.map +1 -1
- package/build/i18n/cs.json.mjs +0 -2
- package/build/i18n/cs.json.mjs.map +1 -1
- package/build/i18n/de.json +0 -2
- package/build/i18n/de.json.js +0 -2
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/de.json.mjs +0 -2
- package/build/i18n/de.json.mjs.map +1 -1
- package/build/i18n/en.json +0 -2
- package/build/i18n/en.json.js +0 -2
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +0 -2
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/i18n/es.json +0 -2
- package/build/i18n/es.json.js +0 -2
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/es.json.mjs +0 -2
- package/build/i18n/es.json.mjs.map +1 -1
- package/build/i18n/fr.json +0 -2
- package/build/i18n/fr.json.js +0 -2
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/fr.json.mjs +0 -2
- package/build/i18n/fr.json.mjs.map +1 -1
- package/build/i18n/hu.json +0 -2
- package/build/i18n/hu.json.js +0 -2
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/hu.json.mjs +0 -2
- package/build/i18n/hu.json.mjs.map +1 -1
- package/build/i18n/id.json +0 -2
- package/build/i18n/id.json.js +0 -2
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/id.json.mjs +0 -2
- package/build/i18n/id.json.mjs.map +1 -1
- package/build/i18n/it.json +0 -2
- package/build/i18n/it.json.js +0 -2
- package/build/i18n/it.json.js.map +1 -1
- package/build/i18n/it.json.mjs +0 -2
- package/build/i18n/it.json.mjs.map +1 -1
- package/build/i18n/ja.json +0 -2
- package/build/i18n/ja.json.js +0 -2
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/ja.json.mjs +0 -2
- package/build/i18n/ja.json.mjs.map +1 -1
- package/build/i18n/nl.json +0 -2
- package/build/i18n/pl.json +0 -2
- package/build/i18n/pl.json.js +0 -2
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pl.json.mjs +0 -2
- package/build/i18n/pl.json.mjs.map +1 -1
- package/build/i18n/pt.json +0 -2
- package/build/i18n/pt.json.js +0 -2
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/pt.json.mjs +0 -2
- package/build/i18n/pt.json.mjs.map +1 -1
- package/build/i18n/ro.json +0 -2
- package/build/i18n/ro.json.js +0 -2
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ro.json.mjs +0 -2
- package/build/i18n/ro.json.mjs.map +1 -1
- package/build/i18n/ru.json +0 -2
- package/build/i18n/ru.json.js +0 -2
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/ru.json.mjs +0 -2
- package/build/i18n/ru.json.mjs.map +1 -1
- package/build/i18n/th.json +0 -2
- package/build/i18n/th.json.js +0 -2
- package/build/i18n/th.json.js.map +1 -1
- package/build/i18n/th.json.mjs +0 -2
- package/build/i18n/th.json.mjs.map +1 -1
- package/build/i18n/tr.json +0 -2
- package/build/i18n/tr.json.js +0 -2
- package/build/i18n/tr.json.js.map +1 -1
- package/build/i18n/tr.json.mjs +0 -2
- package/build/i18n/tr.json.mjs.map +1 -1
- package/build/i18n/zh-CN.json +0 -2
- package/build/i18n/zh-CN.json.js +0 -2
- package/build/i18n/zh-CN.json.js.map +1 -1
- package/build/i18n/zh-CN.json.mjs +0 -2
- package/build/i18n/zh-CN.json.mjs.map +1 -1
- package/build/i18n/zh-HK.json +0 -2
- package/build/i18n/zh-HK.json.js +0 -2
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/i18n/zh-HK.json.mjs +0 -2
- package/build/i18n/zh-HK.json.mjs.map +1 -1
- package/build/index.js +0 -2
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -1
- package/build/index.mjs.map +1 -1
- package/build/main.css +13 -45
- package/build/moneyInput/MoneyInput.js +2 -2
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +2 -2
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/snackbar/Snackbar.js +1 -1
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/Snackbar.mjs +1 -1
- package/build/snackbar/Snackbar.mjs.map +1 -1
- package/build/styles/dateInput/DateInput.css +13 -1
- package/build/styles/main.css +13 -45
- package/build/tabs/Tabs.js +3 -3
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +3 -3
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/test-utils/assets/apple-pay-logo.svg +84 -0
- package/build/typeahead/Typeahead.js +2 -2
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +2 -2
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js +2 -2
- package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +2 -2
- package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
- package/build/types/index.d.ts +0 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/fake-data.d.ts +2 -0
- package/build/types/test-utils/fake-data.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +0 -4
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/upload/Upload.js +2 -2
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +2 -2
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +0 -1
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +0 -1
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/package.json +11 -11
- package/src/dateInput/DateInput.css +13 -1
- package/src/dateInput/DateInput.less +20 -3
- package/src/dateInput/DateInput.tests.story.tsx +14 -3
- package/src/dateInput/DateInput.tsx +4 -4
- package/src/i18n/cs.json +0 -2
- package/src/i18n/de.json +0 -2
- package/src/i18n/en.json +0 -2
- package/src/i18n/es.json +0 -2
- package/src/i18n/fr.json +0 -2
- package/src/i18n/hu.json +0 -2
- package/src/i18n/id.json +0 -2
- package/src/i18n/it.json +0 -2
- package/src/i18n/ja.json +0 -2
- package/src/i18n/nl.json +0 -2
- package/src/i18n/pl.json +0 -2
- package/src/i18n/pt.json +0 -2
- package/src/i18n/ro.json +0 -2
- package/src/i18n/ru.json +0 -2
- package/src/i18n/th.json +0 -2
- package/src/i18n/tr.json +0 -2
- package/src/i18n/zh-CN.json +0 -2
- package/src/i18n/zh-HK.json +0 -2
- package/src/index.ts +0 -2
- package/src/legacylistItem/LegacyListItem.story.tsx +5 -5
- package/src/legacylistItem/LegacyListItem.tests.story.tsx +6 -6
- package/src/main.css +13 -45
- package/src/main.less +0 -1
- package/src/ssr.spec.tsx +0 -1
- package/src/test-utils/assets/apple-pay-logo.svg +84 -0
- package/src/test-utils/fake-data.ts +5 -0
- package/src/uploadInput/UploadInput.tsx +4 -13
- package/build/selectOption/SelectOption.js +0 -131
- package/build/selectOption/SelectOption.js.map +0 -1
- package/build/selectOption/SelectOption.messages.js +0 -17
- package/build/selectOption/SelectOption.messages.js.map +0 -1
- package/build/selectOption/SelectOption.messages.mjs +0 -13
- package/build/selectOption/SelectOption.messages.mjs.map +0 -1
- package/build/selectOption/SelectOption.mjs +0 -127
- package/build/selectOption/SelectOption.mjs.map +0 -1
- package/build/styles/selectOption/SelectOption.css +0 -44
- package/build/types/selectOption/SelectOption.d.ts +0 -21
- package/build/types/selectOption/SelectOption.d.ts.map +0 -1
- package/build/types/selectOption/SelectOption.messages.d.ts +0 -12
- package/build/types/selectOption/SelectOption.messages.d.ts.map +0 -1
- package/build/types/selectOption/index.d.ts +0 -3
- package/build/types/selectOption/index.d.ts.map +0 -1
- package/src/selectOption/SelectOption.css +0 -44
- package/src/selectOption/SelectOption.less +0 -40
- package/src/selectOption/SelectOption.messages.ts +0 -12
- package/src/selectOption/SelectOption.spec.tsx +0 -83
- package/src/selectOption/SelectOption.story.tsx +0 -277
- package/src/selectOption/SelectOption.tsx +0 -151
- 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
|
-
|
|
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":"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"}
|
|
@@ -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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}
|
|
@@ -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
|
-
});
|