@transferwise/components 0.0.0-experimental-a18466a → 0.0.0-experimental-e789c10
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/criticalBanner/CriticalCommsBanner.js +68 -3
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +69 -4
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +12 -5
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +11 -4
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +16 -8
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +14 -6
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/index.js +12 -7
- package/build/index.js.map +1 -1
- package/build/index.mjs +9 -3
- package/build/index.mjs.map +1 -1
- package/build/inputs/{_BottomSheet.js → SelectInput/BottomSheet/SelectInputBottomSheet.js} +7 -7
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -0
- package/build/inputs/{_BottomSheet.mjs → SelectInput/BottomSheet/SelectInputBottomSheet.mjs} +7 -7
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -0
- package/build/inputs/{_ButtonInput.js → SelectInput/ButtonInput/SelectInputButtonInput.js} +5 -5
- package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.js.map +1 -0
- package/build/inputs/{_ButtonInput.mjs → SelectInput/ButtonInput/SelectInputButtonInput.mjs} +5 -5
- package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.mjs.map +1 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js +26 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js.map +1 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs +24 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs.map +1 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js +59 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js.map +1 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs +56 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs.map +1 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js +50 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js.map +1 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs +48 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs.map +1 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.js +47 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.js.map +1 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs +45 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs.map +1 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.js +42 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.js.map +1 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.mjs +40 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js +40 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +38 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js +48 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js.map +1 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs +46 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs.map +1 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.js +300 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.js.map +1 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs +298 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map +1 -0
- package/build/inputs/{_Popover.js → SelectInput/Popover/SelectInputPopover.js} +7 -7
- package/build/inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -0
- package/build/inputs/{_Popover.mjs → SelectInput/Popover/SelectInputPopover.mjs} +7 -7
- package/build/inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.contexts.js +29 -0
- package/build/inputs/SelectInput/SelectInput.contexts.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.contexts.mjs +24 -0
- package/build/inputs/SelectInput/SelectInput.contexts.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.js +222 -0
- package/build/inputs/SelectInput/SelectInput.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.messages.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.messages.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.mjs +216 -0
- package/build/inputs/SelectInput/SelectInput.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.utils.js +164 -0
- package/build/inputs/SelectInput/SelectInput.utils.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.utils.mjs +154 -0
- package/build/inputs/SelectInput/SelectInput.utils.mjs.map +1 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js +42 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map +1 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs +36 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map +1 -0
- package/build/main.css +123 -105
- package/build/moneyInput/MoneyInput.js +9 -2
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +8 -1
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +10 -3
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +9 -2
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -15
- package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
- package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
- package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
- package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
- package/build/styles/inputs/SelectInput/Option/SelectInputOption.css +33 -0
- package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
- package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
- package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
- package/build/styles/main.css +123 -105
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts +4 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/criticalBanner/index.d.ts +1 -0
- package/build/types/criticalBanner/index.d.ts.map +1 -1
- package/build/types/index.d.ts +2 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/{_BottomSheet.d.ts → SelectInput/BottomSheet/SelectInputBottomSheet.d.ts} +3 -3
- package/build/types/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/BottomSheet/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/BottomSheet/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts +5 -0
- package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ButtonInput/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ButtonInput/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts +7 -0
- package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ClearButton/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ClearButton/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts +16 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts +2 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts +9 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts +11 -0
- package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/index.d.ts +4 -0
- package/build/types/inputs/SelectInput/ItemView/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts +11 -0
- package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Option/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Option/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts +13 -0
- package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/OptionContent/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/OptionContent/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts +9 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts +21 -0
- package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/index.d.ts +4 -0
- package/build/types/inputs/SelectInput/Options/index.d.ts.map +1 -0
- package/build/types/inputs/{_Popover.d.ts → SelectInput/Popover/SelectInputPopover.d.ts} +3 -3
- package/build/types/inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Popover/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Popover/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts +33 -0
- package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.d.ts +10 -0
- package/build/types/inputs/SelectInput/SelectInput.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.messages.d.ts.map +1 -0
- package/build/types/inputs/{SelectInput.d.ts → SelectInput/SelectInput.types.d.ts} +12 -38
- package/build/types/inputs/SelectInput/SelectInput.types.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.utils.d.ts +60 -0
- package/build/types/inputs/SelectInput/SelectInput.utils.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts +12 -0
- package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/TriggerButton/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/components.d.ts +10 -0
- package/build/types/inputs/SelectInput/components.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/index.d.ts +10 -0
- package/build/types/inputs/SelectInput/index.d.ts.map +1 -0
- package/build/types/uploadInput/UploadInput.d.ts +2 -2
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/package.json +1 -1
- package/src/criticalBanner/CriticalCommsBanner.css +33 -15
- package/src/criticalBanner/CriticalCommsBanner.less +46 -36
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +9 -15
- package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +70 -0
- package/src/criticalBanner/CriticalCommsBanner.test.tsx +66 -0
- package/src/criticalBanner/CriticalCommsBanner.tsx +54 -5
- package/src/criticalBanner/index.ts +1 -0
- package/src/index.ts +1 -1
- package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
- package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx} +7 -7
- package/src/inputs/SelectInput/BottomSheet/index.ts +2 -0
- package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
- package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx} +5 -5
- package/src/inputs/SelectInput/ButtonInput/index.ts +2 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +39 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx +27 -0
- package/src/inputs/SelectInput/ClearButton/index.ts +2 -0
- package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx +74 -0
- package/src/inputs/SelectInput/DefaultRenderTrigger/index.ts +5 -0
- package/src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx +61 -0
- package/src/inputs/SelectInput/ItemView/GroupItemView/index.ts +2 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.less +17 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.tsx +48 -0
- package/src/inputs/SelectInput/ItemView/index.ts +3 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.css +33 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.less +32 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.tsx +57 -0
- package/src/inputs/SelectInput/Option/index.ts +2 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less +38 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +72 -0
- package/src/inputs/SelectInput/OptionContent/index.ts +2 -0
- package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx +59 -0
- package/src/inputs/SelectInput/Options/OptionsContainer/index.ts +2 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.less +77 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.tsx +411 -0
- package/src/inputs/SelectInput/Options/index.ts +3 -0
- package/src/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
- package/src/inputs/{_Popover.tsx → SelectInput/Popover/SelectInputPopover.tsx} +7 -7
- package/src/inputs/SelectInput/Popover/index.ts +2 -0
- package/src/inputs/SelectInput/SelectInput.contexts.tsx +40 -0
- package/src/inputs/SelectInput/SelectInput.less +22 -0
- package/src/inputs/{SelectInput.test.tsx → SelectInput/SelectInput.test.tsx} +9 -11
- package/src/inputs/SelectInput/SelectInput.tsx +257 -0
- package/src/inputs/SelectInput/SelectInput.types.ts +113 -0
- package/src/inputs/SelectInput/SelectInput.utils.ts +205 -0
- package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx +36 -0
- package/src/inputs/SelectInput/TriggerButton/index.ts +5 -0
- package/src/inputs/{SelectInput.docs.mdx → SelectInput/_stories/SelectInput.docs.mdx} +0 -1
- package/src/inputs/{SelectInput.story.tsx → SelectInput/_stories/SelectInput.story.tsx} +11 -8
- package/src/inputs/{SelectInput.test.story.tsx → SelectInput/_stories/SelectInput.test.story.tsx} +6 -10
- package/src/inputs/SelectInput/components.ts +10 -0
- package/src/inputs/SelectInput/index.ts +12 -0
- package/src/main.css +123 -105
- package/src/main.less +1 -1
- package/src/uploadInput/UploadInput.tsx +2 -2
- package/build/inputs/SelectInput.js +0 -890
- package/build/inputs/SelectInput.js.map +0 -1
- package/build/inputs/SelectInput.messages.js.map +0 -1
- package/build/inputs/SelectInput.messages.mjs.map +0 -1
- package/build/inputs/SelectInput.mjs +0 -881
- package/build/inputs/SelectInput.mjs.map +0 -1
- package/build/inputs/_BottomSheet.js.map +0 -1
- package/build/inputs/_BottomSheet.mjs.map +0 -1
- package/build/inputs/_ButtonInput.js.map +0 -1
- package/build/inputs/_ButtonInput.mjs.map +0 -1
- package/build/inputs/_Popover.js.map +0 -1
- package/build/inputs/_Popover.mjs.map +0 -1
- package/build/types/inputs/SelectInput.d.ts.map +0 -1
- package/build/types/inputs/SelectInput.messages.d.ts.map +0 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +0 -1
- package/build/types/inputs/_ButtonInput.d.ts +0 -5
- package/build/types/inputs/_ButtonInput.d.ts.map +0 -1
- package/build/types/inputs/_Popover.d.ts.map +0 -1
- package/src/inputs/SelectInput.less +0 -219
- package/src/inputs/SelectInput.tsx +0 -1269
- package/build/inputs/{SelectInput.messages.js → SelectInput/SelectInput.messages.js} +0 -0
- package/build/inputs/{SelectInput.messages.mjs → SelectInput/SelectInput.messages.mjs} +0 -0
- package/build/styles/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
- package/build/types/inputs/{SelectInput.messages.d.ts → SelectInput/SelectInput.messages.d.ts} +0 -0
- package/src/inputs/{_BottomSheet.less → SelectInput/BottomSheet/SelectInputBottomSheet.less} +0 -0
- package/src/inputs/{_ButtonInput.less → SelectInput/ButtonInput/SelectInputButtonInput.less} +0 -0
- package/src/inputs/{_Popover.less → SelectInput/Popover/SelectInputPopover.less} +0 -0
- package/src/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
- /package/src/inputs/{SelectInput.messages.ts → SelectInput/SelectInput.messages.ts} +0 -0
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var Button_resolver = require('../../button/Button.resolver.js');
|
|
4
|
-
var SelectInput = require('../../inputs/SelectInput.js');
|
|
4
|
+
var SelectInput = require('../../inputs/SelectInput/SelectInput.js');
|
|
5
5
|
var icons = require('@transferwise/icons');
|
|
6
|
-
|
|
7
|
-
var React = require('react');
|
|
6
|
+
require('clsx');
|
|
8
7
|
var reactIntl = require('react-intl');
|
|
9
|
-
|
|
8
|
+
require('../../dateLookup/dateTrigger/DateTrigger.messages.js');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
var React = require('react');
|
|
11
|
+
require('@headlessui/react');
|
|
12
|
+
var SelectInputOptionContent = require('../../inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
|
|
13
|
+
var SelectInputTriggerButton = require('../../inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
|
|
14
|
+
require('../../inputs/contexts.js');
|
|
15
|
+
require('../../header/Header.js');
|
|
16
|
+
require('virtua');
|
|
10
17
|
require('../../common/theme.js');
|
|
11
18
|
require('../../common/direction.js');
|
|
12
19
|
require('../../common/propsValues/control.js');
|
|
@@ -27,9 +34,10 @@ require('../../common/propsValues/scroll.js');
|
|
|
27
34
|
require('../../common/propsValues/markdownNodeType.js');
|
|
28
35
|
require('../../common/fileType.js');
|
|
29
36
|
var index = require('../../common/locale/index.js');
|
|
30
|
-
require('clsx');
|
|
31
37
|
require('../../common/closeButton/CloseButton.messages.js');
|
|
32
|
-
|
|
38
|
+
require('../../inputs/SelectInput/SelectInput.messages.js');
|
|
39
|
+
var art = require('@wise/art');
|
|
40
|
+
var ExpressiveMoneyInput_messages = require('../ExpressiveMoneyInput.messages.js');
|
|
33
41
|
|
|
34
42
|
const CurrencySelector = ({
|
|
35
43
|
id,
|
|
@@ -75,7 +83,7 @@ const CurrencySelector = ({
|
|
|
75
83
|
code,
|
|
76
84
|
label
|
|
77
85
|
}) => {
|
|
78
|
-
return /*#__PURE__*/jsxRuntime.jsx(
|
|
86
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent.SelectInputOptionContent, {
|
|
79
87
|
title: code,
|
|
80
88
|
note: label,
|
|
81
89
|
icon: /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
|
|
@@ -84,7 +92,7 @@ const CurrencySelector = ({
|
|
|
84
92
|
})
|
|
85
93
|
});
|
|
86
94
|
},
|
|
87
|
-
renderTrigger: () => /*#__PURE__*/jsxRuntime.jsx(
|
|
95
|
+
renderTrigger: () => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButton, {
|
|
88
96
|
as: ButtonInput
|
|
89
97
|
// @ts-expect-error new (v2) ButtonProps
|
|
90
98
|
,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import Button from '../../button/Button.resolver.mjs';
|
|
2
|
-
import { SelectInput
|
|
2
|
+
import { SelectInput } from '../../inputs/SelectInput/SelectInput.mjs';
|
|
3
3
|
import { ChevronDown } from '@transferwise/icons';
|
|
4
|
-
import
|
|
5
|
-
import { useMemo, useState, forwardRef } from 'react';
|
|
4
|
+
import 'clsx';
|
|
6
5
|
import { useIntl } from 'react-intl';
|
|
7
|
-
import
|
|
6
|
+
import '../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
|
|
7
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
|
+
import { useMemo, useState, forwardRef } from 'react';
|
|
9
|
+
import '@headlessui/react';
|
|
10
|
+
import { SelectInputOptionContent } from '../../inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
|
|
11
|
+
import { SelectInputTriggerButton } from '../../inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs';
|
|
12
|
+
import '../../inputs/contexts.mjs';
|
|
13
|
+
import '../../header/Header.mjs';
|
|
14
|
+
import 'virtua';
|
|
8
15
|
import '../../common/theme.mjs';
|
|
9
16
|
import '../../common/direction.mjs';
|
|
10
17
|
import '../../common/propsValues/control.mjs';
|
|
@@ -25,9 +32,10 @@ import '../../common/propsValues/scroll.mjs';
|
|
|
25
32
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
26
33
|
import '../../common/fileType.mjs';
|
|
27
34
|
import { getLocaleCurrencyName } from '../../common/locale/index.mjs';
|
|
28
|
-
import 'clsx';
|
|
29
35
|
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
30
|
-
import
|
|
36
|
+
import '../../inputs/SelectInput/SelectInput.messages.mjs';
|
|
37
|
+
import { Flag } from '@wise/art';
|
|
38
|
+
import messages from '../ExpressiveMoneyInput.messages.mjs';
|
|
31
39
|
|
|
32
40
|
const CurrencySelector = ({
|
|
33
41
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n SelectInput,\n SelectInputOptionContent,\n SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n type MouseEventHandler,\n useMemo,\n useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n label?: string;\n code: string;\n keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n title: string;\n currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n id: string;\n labelId: string;\n options?: CurrencyOptions;\n onChange?: (currency: CurrencyType) => void;\n onOpen?: () => void;\n addons?: AvatarLayoutProps['avatars'];\n onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n id,\n currency,\n options = [],\n labelId,\n onChange,\n addons,\n onOpen,\n onSearchChange,\n}: Props) => {\n const intl = useIntl();\n\n const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n const activeCurrencyOption = useMemo(() => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return allCurrencyOptions.find((option) => option.code === currency)!;\n }, [currency, allCurrencyOptions]);\n\n const disabled =\n !onChange ||\n options.length === 0 ||\n (options.length === 1 && options[0].currencies.length <= 1);\n\n const [searchQuery, setSearchQuery] = useState<string>('');\n\n const handleTriggerClick: MouseEventHandler = (event) => {\n const triggerEl = event.currentTarget;\n if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n onOpen?.();\n }\n };\n\n const items = searchQuery\n ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n : options.map(getCurrencyGroup);\n\n return (\n <SelectInput\n compareValues=\"code\"\n disabled={disabled}\n id={id}\n value={activeCurrencyOption}\n filterable\n filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n UNSAFE_triggerButtonProps={{\n id: undefined,\n 'aria-labelledby': undefined,\n 'aria-describedby': labelId,\n 'aria-invalid': undefined,\n 'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n }}\n items={items}\n renderValue={({ code, label }) => {\n return (\n <SelectInputOptionContent\n title={code}\n note={label}\n icon={<Flag code={code} intrinsicSize={24} />}\n />\n );\n }}\n renderTrigger={() => (\n <SelectInputTriggerButton\n as={ButtonInput}\n // @ts-expect-error new (v2) ButtonProps\n addonStart={{\n type: 'avatar',\n value: [\n addons ? addons[0] : null,\n {\n ...(addons && addons.length > 1\n ? { ...addons[1] }\n : {\n asset: <Flag code={currency} />,\n }),\n },\n ]\n .filter(Boolean)\n .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n }}\n addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n onClick={(event) => handleTriggerClick(event)}\n >\n <>\n <span aria-hidden>{currency}</span>\n <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n </>\n </SelectInputTriggerButton>\n )}\n onChange={(newValue) => {\n onChange?.(newValue.code);\n }}\n onFilterChange={({ queryNormalized }) => {\n setSearchQuery(queryNormalized ?? '');\n if (queryNormalized) {\n onSearchChange?.({\n query: queryNormalized,\n resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n .length,\n });\n }\n }}\n />\n );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n return (\n <Button\n ref={ref}\n size=\"md\"\n v2\n className=\"wds-currency-selector\"\n priority=\"secondary-neutral\"\n {...rest}\n >\n {children}\n </Button>\n );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n return {\n type: 'option' as const,\n value: currency,\n filterMatchers: currency.keywords,\n };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n return {\n type: 'group' as const,\n label: section.title,\n options: section.currencies.map(getCurrencySelectOption),\n };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n const allCurrencyOptions = options.flatMap((section) => section.currencies);\n const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n allCurrencyOptions.forEach((currencyObj) => {\n uniqueCurrencies.set(currencyObj.code, currencyObj);\n });\n\n return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n currencies: CurrencyOption[],\n query: string,\n): CurrencyOption[] => {\n return (\n currencies\n .filter((currency) => {\n return (\n currency.code.toLowerCase().includes(query) ||\n (currency.label ?? '').toLowerCase().includes(query) ||\n currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n );\n })\n // prefer exact matches, then sort alphabetically by code\n .sort((a, b) => {\n const aCode = a.code.toLowerCase();\n const bCode = b.code.toLowerCase();\n if (aCode === query) {\n return -1;\n }\n if (bCode === query) {\n return 1;\n }\n return aCode.localeCompare(bCode);\n })\n );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
|
package/build/index.js
CHANGED
|
@@ -58,7 +58,15 @@ var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayF
|
|
|
58
58
|
var Input = require('./inputs/Input.js');
|
|
59
59
|
var InputGroup = require('./inputs/InputGroup.js');
|
|
60
60
|
var SearchInput = require('./inputs/SearchInput.js');
|
|
61
|
-
var SelectInput = require('./inputs/SelectInput.js');
|
|
61
|
+
var SelectInput = require('./inputs/SelectInput/SelectInput.js');
|
|
62
|
+
require('react-intl');
|
|
63
|
+
require('./dateLookup/dateTrigger/DateTrigger.messages.js');
|
|
64
|
+
require('@headlessui/react');
|
|
65
|
+
var SelectInputOptionContent = require('./inputs/SelectInput/OptionContent/SelectInputOptionContent.js');
|
|
66
|
+
var SelectInputTriggerButton = require('./inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js');
|
|
67
|
+
var Section = require('./section/Section.js');
|
|
68
|
+
require('virtua');
|
|
69
|
+
require('./inputs/SelectInput/SelectInput.messages.js');
|
|
62
70
|
var TextArea = require('./inputs/TextArea.js');
|
|
63
71
|
var InstructionsList = require('./instructionsList/InstructionsList.js');
|
|
64
72
|
var Label = require('./label/Label.js');
|
|
@@ -90,7 +98,6 @@ var Radio = require('./radio/Radio.js');
|
|
|
90
98
|
var RadioGroup = require('./radioGroup/RadioGroup.js');
|
|
91
99
|
var RadioOption = require('./radioOption/RadioOption.js');
|
|
92
100
|
var ResponsivePanel = require('./common/responsivePanel/ResponsivePanel.js');
|
|
93
|
-
var Section = require('./section/Section.js');
|
|
94
101
|
var SegmentedControl = require('./segmentedControl/SegmentedControl.js');
|
|
95
102
|
var Select = require('./select/Select.js');
|
|
96
103
|
var SentimentSurface = require('./sentimentSurface/SentimentSurface.js');
|
|
@@ -139,7 +146,6 @@ var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
|
|
|
139
146
|
var fileType = require('./common/fileType.js');
|
|
140
147
|
var index = require('./common/locale/index.js');
|
|
141
148
|
var colors = require('./common/colors.js');
|
|
142
|
-
require('react-intl');
|
|
143
149
|
require('./common/closeButton/CloseButton.messages.js');
|
|
144
150
|
var index$1 = require('./i18n/index.js');
|
|
145
151
|
var withId = require('./withId/withId.js');
|
|
@@ -220,9 +226,9 @@ exports.Input = Input.Input;
|
|
|
220
226
|
exports.InputGroup = InputGroup.InputGroup;
|
|
221
227
|
exports.SearchInput = SearchInput.SearchInput;
|
|
222
228
|
exports.SelectInput = SelectInput.SelectInput;
|
|
223
|
-
exports.SelectInputOptionContent =
|
|
224
|
-
exports.SelectInputTriggerButton =
|
|
225
|
-
exports.
|
|
229
|
+
exports.SelectInputOptionContent = SelectInputOptionContent.SelectInputOptionContent;
|
|
230
|
+
exports.SelectInputTriggerButton = SelectInputTriggerButton.SelectInputTriggerButton;
|
|
231
|
+
exports.Section = Section.default;
|
|
226
232
|
exports.TextArea = TextArea.TextArea;
|
|
227
233
|
exports.InstructionsList = InstructionsList.default;
|
|
228
234
|
exports.Label = Label.Label;
|
|
@@ -258,7 +264,6 @@ exports.Radio = Radio.default;
|
|
|
258
264
|
exports.RadioGroup = RadioGroup.default;
|
|
259
265
|
exports.RadioOption = RadioOption.default;
|
|
260
266
|
exports.ResponsivePanel = ResponsivePanel.default;
|
|
261
|
-
exports.Section = Section.default;
|
|
262
267
|
exports.SegmentedControl = SegmentedControl.default;
|
|
263
268
|
exports.Select = Select.default;
|
|
264
269
|
exports.SentimentSurface = SentimentSurface.default;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -56,7 +56,15 @@ export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/Inpu
|
|
|
56
56
|
export { Input } from './inputs/Input.mjs';
|
|
57
57
|
export { InputGroup } from './inputs/InputGroup.mjs';
|
|
58
58
|
export { SearchInput } from './inputs/SearchInput.mjs';
|
|
59
|
-
export { SelectInput
|
|
59
|
+
export { SelectInput } from './inputs/SelectInput/SelectInput.mjs';
|
|
60
|
+
import 'react-intl';
|
|
61
|
+
import './dateLookup/dateTrigger/DateTrigger.messages.mjs';
|
|
62
|
+
import '@headlessui/react';
|
|
63
|
+
export { SelectInputOptionContent } from './inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
|
|
64
|
+
export { SelectInputTriggerButton } from './inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs';
|
|
65
|
+
export { default as Section } from './section/Section.mjs';
|
|
66
|
+
import 'virtua';
|
|
67
|
+
import './inputs/SelectInput/SelectInput.messages.mjs';
|
|
60
68
|
export { TextArea } from './inputs/TextArea.mjs';
|
|
61
69
|
export { default as InstructionsList } from './instructionsList/InstructionsList.mjs';
|
|
62
70
|
export { Label } from './label/Label.mjs';
|
|
@@ -88,7 +96,6 @@ export { default as Radio } from './radio/Radio.mjs';
|
|
|
88
96
|
export { default as RadioGroup } from './radioGroup/RadioGroup.mjs';
|
|
89
97
|
export { default as RadioOption } from './radioOption/RadioOption.mjs';
|
|
90
98
|
export { default as ResponsivePanel } from './common/responsivePanel/ResponsivePanel.mjs';
|
|
91
|
-
export { default as Section } from './section/Section.mjs';
|
|
92
99
|
export { default as SegmentedControl } from './segmentedControl/SegmentedControl.mjs';
|
|
93
100
|
export { default as Select } from './select/Select.mjs';
|
|
94
101
|
export { default as SentimentSurface } from './sentimentSurface/SentimentSurface.mjs';
|
|
@@ -137,7 +144,6 @@ export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
|
|
|
137
144
|
export { FileType } from './common/fileType.mjs';
|
|
138
145
|
export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, getLocaleCurrencyName } from './common/locale/index.mjs';
|
|
139
146
|
export { getBrandColorFromSeed } from './common/colors.mjs';
|
|
140
|
-
import 'react-intl';
|
|
141
147
|
import './common/closeButton/CloseButton.messages.mjs';
|
|
142
148
|
export { default as translations } from './i18n/index.mjs';
|
|
143
149
|
export { default as withId } from './withId/withId.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,13 +6,13 @@ var focus = require('@react-aria/focus');
|
|
|
6
6
|
var componentsTheming = require('@wise/components-theming');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var React = require('react');
|
|
9
|
-
var CloseButton = require('
|
|
10
|
-
var useVirtualKeyboard = require('
|
|
11
|
-
var PreventScroll = require('
|
|
12
|
-
var size = require('
|
|
9
|
+
var CloseButton = require('../../../common/closeButton/CloseButton.js');
|
|
10
|
+
var useVirtualKeyboard = require('../../../common/hooks/useVirtualKeyboard.js');
|
|
11
|
+
var PreventScroll = require('../../../common/preventScroll/PreventScroll.js');
|
|
12
|
+
var size = require('../../../common/propsValues/size.js');
|
|
13
13
|
var jsxRuntime = require('react/jsx-runtime');
|
|
14
14
|
|
|
15
|
-
function
|
|
15
|
+
function SelectInputBottomSheet({
|
|
16
16
|
open,
|
|
17
17
|
renderTrigger,
|
|
18
18
|
title,
|
|
@@ -109,5 +109,5 @@ function BottomSheet({
|
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
exports.
|
|
113
|
-
//# sourceMappingURL=
|
|
112
|
+
exports.SelectInputBottomSheet = SelectInputBottomSheet;
|
|
113
|
+
//# sourceMappingURL=SelectInputBottomSheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputBottomSheet.js","sources":["../../../../src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../../../common/closeButton';\nimport { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\nimport { Size } from '../../../common/propsValues/size';\n\nexport interface SelectInputBottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function SelectInputBottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputBottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <TransitionChild\n as=\"div\"\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <TransitionChild\n ref={refs.setFloating}\n as=\"div\"\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </TransitionChild>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["SelectInputBottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
package/build/inputs/{_BottomSheet.mjs → SelectInput/BottomSheet/SelectInputBottomSheet.mjs}
RENAMED
|
@@ -4,13 +4,13 @@ import { FocusScope } from '@react-aria/focus';
|
|
|
4
4
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { useState, Fragment as Fragment$1 } from 'react';
|
|
7
|
-
import { CloseButton } from '
|
|
8
|
-
import { useVirtualKeyboard } from '
|
|
9
|
-
import { PreventScroll } from '
|
|
10
|
-
import { Size } from '
|
|
7
|
+
import { CloseButton } from '../../../common/closeButton/CloseButton.mjs';
|
|
8
|
+
import { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard.mjs';
|
|
9
|
+
import { PreventScroll } from '../../../common/preventScroll/PreventScroll.mjs';
|
|
10
|
+
import { Size } from '../../../common/propsValues/size.mjs';
|
|
11
11
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
12
12
|
|
|
13
|
-
function
|
|
13
|
+
function SelectInputBottomSheet({
|
|
14
14
|
open,
|
|
15
15
|
renderTrigger,
|
|
16
16
|
title,
|
|
@@ -107,5 +107,5 @@ function BottomSheet({
|
|
|
107
107
|
});
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
export {
|
|
111
|
-
//# sourceMappingURL=
|
|
110
|
+
export { SelectInputBottomSheet };
|
|
111
|
+
//# sourceMappingURL=SelectInputBottomSheet.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputBottomSheet.mjs","sources":["../../../../src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition, TransitionChild } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../../../common/closeButton';\nimport { useVirtualKeyboard } from '../../../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\nimport { Size } from '../../../common/propsValues/size';\n\nexport interface SelectInputBottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nexport function SelectInputBottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputBottomSheetProps) {\n useVirtualKeyboard(open);\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <TransitionChild\n as=\"div\"\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <TransitionChild\n ref={refs.setFloating}\n as=\"div\"\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </TransitionChild>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["SelectInputBottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var InputGroup = require('
|
|
6
|
-
var _common = require('
|
|
5
|
+
var InputGroup = require('../../InputGroup.js');
|
|
6
|
+
var _common = require('../../_common.js');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const SelectInputButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
|
|
10
10
|
size = 'md',
|
|
11
11
|
className,
|
|
12
12
|
style,
|
|
@@ -27,5 +27,5 @@ const ButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
|
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
-
exports.
|
|
31
|
-
//# sourceMappingURL=
|
|
30
|
+
exports.SelectInputButtonInput = SelectInputButtonInput;
|
|
31
|
+
//# sourceMappingURL=SelectInputButtonInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputButtonInput.js","sources":["../../../../src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from '../../InputGroup';\nimport { inputClassNameBase } from '../../_common';\n\nexport interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectInputButtonInput = forwardRef(function ButtonInput(\n { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const inputPaddings = useInputPaddings();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}\n style={{ ...inputPaddings, ...style }}\n {...restProps}\n />\n );\n});\n"],"names":["SelectInputButtonInput","forwardRef","ButtonInput","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAUaA,sBAAsB,gBAAGC,gBAAU,CAAC,SAASC,WAAWA,CACnE;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAS,CAA+B,EAC5EC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,SAAI,CAACC,0BAAkB,CAAC;AAAEV,MAAAA;AAAI,KAAE,CAAC,EAAE,iBAAiB,EAAEC,SAAS,CAAE;AAC5EC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH;KAAQ;IAAA,GAClCC;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
|
package/build/inputs/{_ButtonInput.mjs → SelectInput/ButtonInput/SelectInputButtonInput.mjs}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { useInputPaddings } from '
|
|
4
|
-
import { inputClassNameBase } from '
|
|
3
|
+
import { useInputPaddings } from '../../InputGroup.mjs';
|
|
4
|
+
import { inputClassNameBase } from '../../_common.mjs';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const SelectInputButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
|
|
8
8
|
size = 'md',
|
|
9
9
|
className,
|
|
10
10
|
style,
|
|
@@ -25,5 +25,5 @@ const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
|
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
-
export {
|
|
29
|
-
//# sourceMappingURL=
|
|
28
|
+
export { SelectInputButtonInput };
|
|
29
|
+
//# sourceMappingURL=SelectInputButtonInput.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputButtonInput.mjs","sources":["../../../../src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from '../../InputGroup';\nimport { inputClassNameBase } from '../../_common';\n\nexport interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectInputButtonInput = forwardRef(function ButtonInput(\n { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,\n ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const inputPaddings = useInputPaddings();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}\n style={{ ...inputPaddings, ...style }}\n {...restProps}\n />\n );\n});\n"],"names":["SelectInputButtonInput","forwardRef","ButtonInput","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","clsx","inputClassNameBase"],"mappings":";;;;;;MAUaA,sBAAsB,gBAAGC,UAAU,CAAC,SAASC,WAAWA,CACnE;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAS,CAA+B,EAC5EC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,IAAI,CAACC,kBAAkB,CAAC;AAAEV,MAAAA;AAAI,KAAE,CAAC,EAAE,iBAAiB,EAAEC,SAAS,CAAE;AAC5EC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH;KAAQ;IAAA,GAClCC;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var icons = require('@transferwise/icons');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var reactIntl = require('react-intl');
|
|
6
|
+
var DateTrigger_messages = require('../../../dateLookup/dateTrigger/DateTrigger.messages.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function SelectInputClearButton({
|
|
10
|
+
className,
|
|
11
|
+
onClick
|
|
12
|
+
}) {
|
|
13
|
+
const intl = reactIntl.useIntl();
|
|
14
|
+
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
15
|
+
type: "button",
|
|
16
|
+
"aria-label": intl.formatMessage(DateTrigger_messages.default.ariaLabel),
|
|
17
|
+
className: clsx.clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
|
|
18
|
+
onClick: onClick,
|
|
19
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
|
|
20
|
+
size: 16
|
|
21
|
+
})
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
exports.SelectInputClearButton = SelectInputClearButton;
|
|
26
|
+
//# sourceMappingURL=SelectInputClearButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputClearButton.js","sources":["../../../../src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport interface SelectInputClearButtonProps extends Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'className' | 'onClick'\n> {}\n\n/**\n * A button component used to clear the selected value in a SelectInput.\n */\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n const intl = useIntl();\n\n return (\n <button\n type=\"button\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n onClick={onClick}\n >\n <Cross size={16} />\n </button>\n );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;;;SAagBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,4BAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,cAAA,CAACO,WAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Cross } from '@transferwise/icons';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { useIntl } from 'react-intl';
|
|
4
|
+
import messages from '../../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function SelectInputClearButton({
|
|
8
|
+
className,
|
|
9
|
+
onClick
|
|
10
|
+
}) {
|
|
11
|
+
const intl = useIntl();
|
|
12
|
+
return /*#__PURE__*/jsx("button", {
|
|
13
|
+
type: "button",
|
|
14
|
+
"aria-label": intl.formatMessage(messages.ariaLabel),
|
|
15
|
+
className: clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
|
|
16
|
+
onClick: onClick,
|
|
17
|
+
children: /*#__PURE__*/jsx(Cross, {
|
|
18
|
+
size: 16
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export { SelectInputClearButton };
|
|
24
|
+
//# sourceMappingURL=SelectInputClearButton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputClearButton.mjs","sources":["../../../../src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport interface SelectInputClearButtonProps extends Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'className' | 'onClick'\n> {}\n\n/**\n * A button component used to clear the selected value in a SelectInput.\n */\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n const intl = useIntl();\n\n return (\n <button\n type=\"button\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n onClick={onClick}\n >\n <Cross size={16} />\n </button>\n );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;SAagBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,QAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,GAAA,CAACO,KAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}
|