@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-5cd0315

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/build/dateInput/DateInput.js +3 -6
  2. package/build/dateInput/DateInput.js.map +1 -1
  3. package/build/dateInput/DateInput.mjs +2 -5
  4. package/build/dateInput/DateInput.mjs.map +1 -1
  5. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +3 -5
  6. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
  7. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +1 -3
  8. package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
  9. package/build/index.js +3 -5
  10. package/build/index.js.map +1 -1
  11. package/build/index.mjs +1 -3
  12. package/build/index.mjs.map +1 -1
  13. package/build/inputs/SelectInput.js +840 -0
  14. package/build/inputs/SelectInput.js.map +1 -0
  15. package/build/inputs/SelectInput.messages.js.map +1 -0
  16. package/build/inputs/SelectInput.messages.mjs.map +1 -0
  17. package/build/inputs/SelectInput.mjs +832 -0
  18. package/build/inputs/SelectInput.mjs.map +1 -0
  19. package/build/main.css +70 -65
  20. package/build/moneyInput/MoneyInput.js +2 -5
  21. package/build/moneyInput/MoneyInput.js.map +1 -1
  22. package/build/moneyInput/MoneyInput.mjs +1 -4
  23. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  24. package/build/phoneNumberInput/PhoneNumberInput.js +2 -5
  25. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  26. package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -4
  27. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  28. package/build/styles/inputs/{SelectInput/SelectInput.css → SelectInput.css} +70 -65
  29. package/build/styles/main.css +70 -65
  30. package/build/types/inputs/{SelectInput/SelectInput.types.d.ts → SelectInput.d.ts} +7 -10
  31. package/build/types/inputs/SelectInput.d.ts.map +1 -0
  32. package/build/types/inputs/SelectInput.messages.d.ts.map +1 -0
  33. package/package.json +2 -2
  34. package/src/inputs/{SelectInput/SelectInput.css → SelectInput.css} +70 -65
  35. package/src/inputs/{SelectInput/SelectInput.docs.mdx → SelectInput.docs.mdx} +1 -0
  36. package/src/inputs/SelectInput.less +219 -0
  37. package/src/inputs/{SelectInput/SelectInput.story.tsx → SelectInput.story.tsx} +7 -7
  38. package/src/inputs/SelectInput.tsx +1209 -0
  39. package/src/main.css +70 -65
  40. package/src/main.less +1 -1
  41. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js +0 -26
  42. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js.map +0 -1
  43. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs +0 -24
  44. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs.map +0 -1
  45. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js +0 -54
  46. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js.map +0 -1
  47. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs +0 -52
  48. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs.map +0 -1
  49. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js +0 -41
  50. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +0 -1
  51. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +0 -38
  52. package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +0 -1
  53. package/build/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.js +0 -50
  54. package/build/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.js.map +0 -1
  55. package/build/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.mjs +0 -48
  56. package/build/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.mjs.map +0 -1
  57. package/build/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.js +0 -45
  58. package/build/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.js.map +0 -1
  59. package/build/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.mjs +0 -41
  60. package/build/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.mjs.map +0 -1
  61. package/build/inputs/SelectInput/Options/ItemView/SelectInputItemView.js +0 -50
  62. package/build/inputs/SelectInput/Options/ItemView/SelectInputItemView.js.map +0 -1
  63. package/build/inputs/SelectInput/Options/ItemView/SelectInputItemView.mjs +0 -48
  64. package/build/inputs/SelectInput/Options/ItemView/SelectInputItemView.mjs.map +0 -1
  65. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js +0 -48
  66. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js.map +0 -1
  67. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs +0 -46
  68. package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs.map +0 -1
  69. package/build/inputs/SelectInput/Options/SelectInputOptions.js +0 -270
  70. package/build/inputs/SelectInput/Options/SelectInputOptions.js.map +0 -1
  71. package/build/inputs/SelectInput/Options/SelectInputOptions.mjs +0 -268
  72. package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map +0 -1
  73. package/build/inputs/SelectInput/SelectInput.constants.js +0 -6
  74. package/build/inputs/SelectInput/SelectInput.constants.js.map +0 -1
  75. package/build/inputs/SelectInput/SelectInput.constants.mjs +0 -4
  76. package/build/inputs/SelectInput/SelectInput.constants.mjs.map +0 -1
  77. package/build/inputs/SelectInput/SelectInput.helpers.js +0 -115
  78. package/build/inputs/SelectInput/SelectInput.helpers.js.map +0 -1
  79. package/build/inputs/SelectInput/SelectInput.helpers.mjs +0 -109
  80. package/build/inputs/SelectInput/SelectInput.helpers.mjs.map +0 -1
  81. package/build/inputs/SelectInput/SelectInput.js +0 -216
  82. package/build/inputs/SelectInput/SelectInput.js.map +0 -1
  83. package/build/inputs/SelectInput/SelectInput.messages.js.map +0 -1
  84. package/build/inputs/SelectInput/SelectInput.messages.mjs.map +0 -1
  85. package/build/inputs/SelectInput/SelectInput.mjs +0 -210
  86. package/build/inputs/SelectInput/SelectInput.mjs.map +0 -1
  87. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js +0 -41
  88. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map +0 -1
  89. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs +0 -34
  90. package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map +0 -1
  91. package/build/styles/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.css +0 -17
  92. package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +0 -37
  93. package/build/styles/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.css +0 -33
  94. package/build/styles/inputs/SelectInput/Options/ItemView/SelectInputItemView.css +0 -44
  95. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +0 -125
  96. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts +0 -5
  97. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts.map +0 -1
  98. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts +0 -2
  99. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts.map +0 -1
  100. package/build/types/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.d.ts +0 -9
  101. package/build/types/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.d.ts.map +0 -1
  102. package/build/types/inputs/SelectInput/DefaultTrigger/index.d.ts +0 -2
  103. package/build/types/inputs/SelectInput/DefaultTrigger/index.d.ts.map +0 -1
  104. package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts +0 -9
  105. package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map +0 -1
  106. package/build/types/inputs/SelectInput/OptionContent/index.d.ts +0 -3
  107. package/build/types/inputs/SelectInput/OptionContent/index.d.ts.map +0 -1
  108. package/build/types/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.d.ts +0 -3
  109. package/build/types/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.d.ts.map +0 -1
  110. package/build/types/inputs/SelectInput/Options/GroupItemView/index.d.ts +0 -2
  111. package/build/types/inputs/SelectInput/Options/GroupItemView/index.d.ts.map +0 -1
  112. package/build/types/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.d.ts +0 -10
  113. package/build/types/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.d.ts.map +0 -1
  114. package/build/types/inputs/SelectInput/Options/ItemView/Option/index.d.ts +0 -2
  115. package/build/types/inputs/SelectInput/Options/ItemView/Option/index.d.ts.map +0 -1
  116. package/build/types/inputs/SelectInput/Options/ItemView/SelectInputItemView.d.ts +0 -3
  117. package/build/types/inputs/SelectInput/Options/ItemView/SelectInputItemView.d.ts.map +0 -1
  118. package/build/types/inputs/SelectInput/Options/ItemView/index.d.ts +0 -2
  119. package/build/types/inputs/SelectInput/Options/ItemView/index.d.ts.map +0 -1
  120. package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts +0 -6
  121. package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts.map +0 -1
  122. package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts +0 -2
  123. package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts.map +0 -1
  124. package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts +0 -15
  125. package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map +0 -1
  126. package/build/types/inputs/SelectInput/Options/index.d.ts +0 -2
  127. package/build/types/inputs/SelectInput/Options/index.d.ts.map +0 -1
  128. package/build/types/inputs/SelectInput/SelectInput.constants.d.ts +0 -2
  129. package/build/types/inputs/SelectInput/SelectInput.constants.d.ts.map +0 -1
  130. package/build/types/inputs/SelectInput/SelectInput.d.ts +0 -3
  131. package/build/types/inputs/SelectInput/SelectInput.d.ts.map +0 -1
  132. package/build/types/inputs/SelectInput/SelectInput.helpers.d.ts +0 -28
  133. package/build/types/inputs/SelectInput/SelectInput.helpers.d.ts.map +0 -1
  134. package/build/types/inputs/SelectInput/SelectInput.messages.d.ts.map +0 -1
  135. package/build/types/inputs/SelectInput/SelectInput.types.d.ts.map +0 -1
  136. package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts +0 -15
  137. package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map +0 -1
  138. package/build/types/inputs/SelectInput/TriggerButton/index.d.ts +0 -3
  139. package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map +0 -1
  140. package/build/types/inputs/SelectInput/index.d.ts +0 -5
  141. package/build/types/inputs/SelectInput/index.d.ts.map +0 -1
  142. package/src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx +0 -25
  143. package/src/inputs/SelectInput/DefaultTrigger/ClearButton/index.ts +0 -1
  144. package/src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.css +0 -17
  145. package/src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.less +0 -15
  146. package/src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx +0 -56
  147. package/src/inputs/SelectInput/DefaultTrigger/index.ts +0 -1
  148. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +0 -37
  149. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less +0 -38
  150. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +0 -67
  151. package/src/inputs/SelectInput/OptionContent/index.ts +0 -5
  152. package/src/inputs/SelectInput/Options/GroupItemView/SelectInputGroupItemView.tsx +0 -53
  153. package/src/inputs/SelectInput/Options/GroupItemView/index.ts +0 -1
  154. package/src/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.css +0 -33
  155. package/src/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.less +0 -32
  156. package/src/inputs/SelectInput/Options/ItemView/Option/SelectInputOption.tsx +0 -51
  157. package/src/inputs/SelectInput/Options/ItemView/Option/index.ts +0 -5
  158. package/src/inputs/SelectInput/Options/ItemView/SelectInputItemView.css +0 -44
  159. package/src/inputs/SelectInput/Options/ItemView/SelectInputItemView.less +0 -14
  160. package/src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx +0 -37
  161. package/src/inputs/SelectInput/Options/ItemView/index.ts +0 -1
  162. package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx +0 -55
  163. package/src/inputs/SelectInput/Options/OptionsContainer/index.ts +0 -1
  164. package/src/inputs/SelectInput/Options/SelectInputOptions.css +0 -125
  165. package/src/inputs/SelectInput/Options/SelectInputOptions.less +0 -78
  166. package/src/inputs/SelectInput/Options/SelectInputOptions.tsx +0 -372
  167. package/src/inputs/SelectInput/Options/index.ts +0 -1
  168. package/src/inputs/SelectInput/SelectInput.constants.ts +0 -1
  169. package/src/inputs/SelectInput/SelectInput.helpers.ts +0 -152
  170. package/src/inputs/SelectInput/SelectInput.less +0 -40
  171. package/src/inputs/SelectInput/SelectInput.test.tsx +0 -606
  172. package/src/inputs/SelectInput/SelectInput.tsx +0 -247
  173. package/src/inputs/SelectInput/SelectInput.types.ts +0 -127
  174. package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx +0 -39
  175. package/src/inputs/SelectInput/TriggerButton/index.ts +0 -5
  176. package/src/inputs/SelectInput/index.ts +0 -13
  177. /package/build/inputs/{SelectInput/SelectInput.messages.js → SelectInput.messages.js} +0 -0
  178. /package/build/inputs/{SelectInput/SelectInput.messages.mjs → SelectInput.messages.mjs} +0 -0
  179. /package/build/types/inputs/{SelectInput/SelectInput.messages.d.ts → SelectInput.messages.d.ts} +0 -0
  180. /package/src/inputs/{SelectInput/SelectInput.messages.ts → SelectInput.messages.ts} +0 -0
@@ -1,216 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('@headlessui/react');
4
- var mergeProps = require('merge-props');
5
- var React = require('react');
6
- var useEffectEvent = require('../../common/hooks/useEffectEvent.js');
7
- var useScreenSize = require('../../common/hooks/useScreenSize.js');
8
- var breakpoint = require('../../common/propsValues/breakpoint.js');
9
- var _BottomSheet = require('../_BottomSheet.js');
10
- var _Popover = require('../_Popover.js');
11
- var contexts = require('../contexts.js');
12
- var SelectInput_helpers = require('./SelectInput.helpers.js');
13
- var SelectInputTriggerButton = require('./TriggerButton/SelectInputTriggerButton.js');
14
- var SelectInputOptions = require('./Options/SelectInputOptions.js');
15
- var SelectInputOptionContent = require('./OptionContent/SelectInputOptionContent.js');
16
- var SelectInputDefaultTrigger = require('./DefaultTrigger/SelectInputDefaultTrigger.js');
17
- var jsxRuntime = require('react/jsx-runtime');
18
-
19
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
20
-
21
- var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
22
-
23
- const noop = () => {};
24
- function SelectInput({
25
- id: idProp,
26
- parentId,
27
- name,
28
- multiple,
29
- placeholder,
30
- autocomplete,
31
- items,
32
- defaultValue,
33
- value: controlledValue,
34
- compareValues,
35
- renderValue = String,
36
- renderFooter,
37
- renderTrigger = SelectInputDefaultTrigger.SelectInputDefaultTrigger,
38
- filterable,
39
- filterPlaceholder,
40
- sortFilteredOptions,
41
- disabled,
42
- size = 'md',
43
- className,
44
- UNSAFE_triggerButtonProps,
45
- triggerRef: externalTriggerRef,
46
- onFilterChange = noop,
47
- onChange,
48
- onOpen,
49
- onClose,
50
- onClear
51
- }) {
52
- const inputAttributes = contexts.useInputAttributes({
53
- nonLabelable: true
54
- });
55
- const id = idProp ?? inputAttributes.id;
56
- const [open, setOpen] = React.useState(false);
57
- const initialized = React.useRef(false);
58
- const handleClose = useEffectEvent.useEffectEvent(onClose ?? (() => {}));
59
- const handleOpen = useEffectEvent.useEffectEvent(onOpen ?? (() => {}));
60
- React.useEffect(() => {
61
- if (initialized.current) {
62
- if (open) {
63
- handleOpen?.();
64
- } else {
65
- handleClose?.();
66
- }
67
- } else {
68
- initialized.current = true;
69
- }
70
- }, [handleClose, handleOpen, open]);
71
- const [filterQuery, _setFilterQuery] = React.useState('');
72
- const deferredFilterQuery = React.useDeferredValue(filterQuery);
73
- const setFilterQuery = useEffectEvent.useEffectEvent(query => {
74
- _setFilterQuery(query);
75
- if (query !== filterQuery) {
76
- onFilterChange({
77
- query,
78
- queryNormalized: query ? SelectInput_helpers.searchableString(query) : null
79
- });
80
- }
81
- });
82
- const internalTriggerRef = React.useRef(null);
83
- const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
84
- const OptionsOverlay = screenSm ? _Popover.Popover : _BottomSheet.BottomSheet;
85
- const searchInputRef = React.useRef(null);
86
- const listboxRef = React.useRef(null);
87
- const controllerRef = filterable ? searchInputRef : listboxRef;
88
- /**
89
- * Attempts to resolve the `listbox` label
90
- * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
91
- */
92
- const getListBoxLabelProps = () => {
93
- if (UNSAFE_triggerButtonProps?.['aria-label']) {
94
- return {
95
- listBoxLabel: UNSAFE_triggerButtonProps['aria-label']
96
- };
97
- }
98
- if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
99
- return {
100
- listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby']
101
- };
102
- }
103
- if (inputAttributes['aria-labelledby']) {
104
- return {
105
- listBoxLabelledBy: inputAttributes['aria-labelledby']
106
- };
107
- }
108
- return {};
109
- };
110
- return /*#__PURE__*/jsxRuntime.jsx(react.Listbox, {
111
- name: name,
112
- multiple: multiple,
113
- defaultValue: defaultValue,
114
- value: controlledValue,
115
- by: compareValues,
116
- disabled: disabled,
117
- onChange: value => {
118
- if (!multiple) {
119
- setOpen(false);
120
- }
121
- onChange?.(value);
122
- },
123
- children: ({
124
- disabled: uiDisabled,
125
- value
126
- }) => {
127
- const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
128
- return /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
129
- placement: "bottom-start",
130
- open: open,
131
- renderTrigger: ({
132
- ref,
133
- getInteractionProps
134
- }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButtonPropsContext.Provider, {
135
- // eslint-disable-next-line react/jsx-no-constructed-context-values
136
- value: {
137
- ref: node => {
138
- ref(node);
139
- if (externalTriggerRef) {
140
- // eslint-disable-next-line no-param-reassign
141
- externalTriggerRef.current = node;
142
- } else {
143
- internalTriggerRef.current = node;
144
- }
145
- },
146
- ...inputAttributes,
147
- ...UNSAFE_triggerButtonProps,
148
- id,
149
- ...mergeProps__default.default({
150
- onClick: () => {
151
- setOpen(prev => !prev);
152
- },
153
- onKeyDown: event => {
154
- if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
155
- setOpen(prev => !prev);
156
- }
157
- }
158
- }, getInteractionProps())
159
- },
160
- children: renderTrigger({
161
- content: !placeholderShown ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent.SelectInputOptionContentWithinTriggerContext.Provider, {
162
- value: true,
163
- children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).filter(node => node != null).join(', ') : renderValue(value, true)
164
- }) : placeholder,
165
- placeholderShown,
166
- clear: onClear != null ? () => {
167
- onClear();
168
- (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
169
- preventScroll: true
170
- });
171
- } : undefined,
172
- disabled: uiDisabled,
173
- size,
174
- className
175
- })
176
- }),
177
- initialFocusRef: controllerRef,
178
- size: filterable ? 'lg' : 'md',
179
- padding: "none",
180
- onClose: () => {
181
- setOpen(false);
182
- },
183
- onCloseEnd: () => {
184
- setFilterQuery('');
185
- },
186
- children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions.SelectInputOptions, {
187
- id: id ? `${id}Search` : undefined,
188
- parentId: parentId,
189
- items: items,
190
- compareValues: compareValues,
191
- renderValue: renderValue,
192
- renderFooter: renderFooter,
193
- filterable: filterable,
194
- filterPlaceholder: filterPlaceholder,
195
- sortFilteredOptions: sortFilteredOptions,
196
- searchInputRef: searchInputRef,
197
- listboxRef: listboxRef,
198
- filterQuery: deferredFilterQuery,
199
- autocomplete: autocomplete,
200
- name: name,
201
- onFilterChange: setFilterQuery,
202
- onAutocompleteSelect: matchedValue => {
203
- onChange?.(matchedValue);
204
- if (!multiple) {
205
- setOpen(false);
206
- }
207
- },
208
- ...getListBoxLabelProps()
209
- })
210
- });
211
- }
212
- });
213
- }
214
-
215
- exports.SelectInput = SelectInput;
216
- //# sourceMappingURL=SelectInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInput.js","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import { Listbox as ListboxBase } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useDeferredValue, useEffect, useRef, useState } from 'react';\n\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\n\nimport { BottomSheet } from '../_BottomSheet';\nimport { Popover } from '../_Popover';\nimport { useInputAttributes } from '../contexts';\nimport { searchableString } from './SelectInput.helpers';\nimport { SelectInputTriggerButtonPropsContext } from './TriggerButton';\nimport { SelectInputOptions } from './Options';\nimport { SelectInputOptionContentWithinTriggerContext } from './OptionContent';\nimport { SelectInputDefaultTrigger } from './DefaultTrigger';\nimport type { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = SelectInputDefaultTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [handleClose, handleOpen, open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const setFilterQuery = useEffectEvent((query: string) => {\n _setFilterQuery(query);\n if (query !== filterQuery) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n }\n });\n\n const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? Popover : BottomSheet;\n\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n /**\n * Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' ||\n event.key === 'Enter' ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","SelectInputDefaultTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","setFilterQuery","query","queryNormalized","searchableString","internalTriggerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","Popover","BottomSheet","searchInputRef","listboxRef","controllerRef","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInput.messages.js","sources":["../../../src/inputs/SelectInput/SelectInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n noResultsFound: {\n id: 'neptune.SelectInput.noResultsFound',\n defaultMessage: 'No results found',\n description: 'When a user-initiated search produces no results.',\n },\n});\n"],"names":["defineMessages","noResultsFound","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInput.messages.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n noResultsFound: {\n id: 'neptune.SelectInput.noResultsFound',\n defaultMessage: 'No results found',\n description: 'When a user-initiated search produces no results.',\n },\n});\n"],"names":["defineMessages","noResultsFound","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
@@ -1,210 +0,0 @@
1
- import { Listbox } from '@headlessui/react';
2
- import mergeProps from 'merge-props';
3
- import { useState, useRef, useEffect, useDeferredValue } from 'react';
4
- import { useEffectEvent } from '../../common/hooks/useEffectEvent.mjs';
5
- import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
6
- import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
7
- import { BottomSheet } from '../_BottomSheet.mjs';
8
- import { Popover } from '../_Popover.mjs';
9
- import { useInputAttributes } from '../contexts.mjs';
10
- import { searchableString } from './SelectInput.helpers.mjs';
11
- import { SelectInputTriggerButtonPropsContext } from './TriggerButton/SelectInputTriggerButton.mjs';
12
- import { SelectInputOptions } from './Options/SelectInputOptions.mjs';
13
- import { SelectInputOptionContentWithinTriggerContext } from './OptionContent/SelectInputOptionContent.mjs';
14
- import { SelectInputDefaultTrigger } from './DefaultTrigger/SelectInputDefaultTrigger.mjs';
15
- import { jsx } from 'react/jsx-runtime';
16
-
17
- const noop = () => {};
18
- function SelectInput({
19
- id: idProp,
20
- parentId,
21
- name,
22
- multiple,
23
- placeholder,
24
- autocomplete,
25
- items,
26
- defaultValue,
27
- value: controlledValue,
28
- compareValues,
29
- renderValue = String,
30
- renderFooter,
31
- renderTrigger = SelectInputDefaultTrigger,
32
- filterable,
33
- filterPlaceholder,
34
- sortFilteredOptions,
35
- disabled,
36
- size = 'md',
37
- className,
38
- UNSAFE_triggerButtonProps,
39
- triggerRef: externalTriggerRef,
40
- onFilterChange = noop,
41
- onChange,
42
- onOpen,
43
- onClose,
44
- onClear
45
- }) {
46
- const inputAttributes = useInputAttributes({
47
- nonLabelable: true
48
- });
49
- const id = idProp ?? inputAttributes.id;
50
- const [open, setOpen] = useState(false);
51
- const initialized = useRef(false);
52
- const handleClose = useEffectEvent(onClose ?? (() => {}));
53
- const handleOpen = useEffectEvent(onOpen ?? (() => {}));
54
- useEffect(() => {
55
- if (initialized.current) {
56
- if (open) {
57
- handleOpen?.();
58
- } else {
59
- handleClose?.();
60
- }
61
- } else {
62
- initialized.current = true;
63
- }
64
- }, [handleClose, handleOpen, open]);
65
- const [filterQuery, _setFilterQuery] = useState('');
66
- const deferredFilterQuery = useDeferredValue(filterQuery);
67
- const setFilterQuery = useEffectEvent(query => {
68
- _setFilterQuery(query);
69
- if (query !== filterQuery) {
70
- onFilterChange({
71
- query,
72
- queryNormalized: query ? searchableString(query) : null
73
- });
74
- }
75
- });
76
- const internalTriggerRef = useRef(null);
77
- const screenSm = useScreenSize(Breakpoint.SMALL);
78
- const OptionsOverlay = screenSm ? Popover : BottomSheet;
79
- const searchInputRef = useRef(null);
80
- const listboxRef = useRef(null);
81
- const controllerRef = filterable ? searchInputRef : listboxRef;
82
- /**
83
- * Attempts to resolve the `listbox` label
84
- * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
85
- */
86
- const getListBoxLabelProps = () => {
87
- if (UNSAFE_triggerButtonProps?.['aria-label']) {
88
- return {
89
- listBoxLabel: UNSAFE_triggerButtonProps['aria-label']
90
- };
91
- }
92
- if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
93
- return {
94
- listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby']
95
- };
96
- }
97
- if (inputAttributes['aria-labelledby']) {
98
- return {
99
- listBoxLabelledBy: inputAttributes['aria-labelledby']
100
- };
101
- }
102
- return {};
103
- };
104
- return /*#__PURE__*/jsx(Listbox, {
105
- name: name,
106
- multiple: multiple,
107
- defaultValue: defaultValue,
108
- value: controlledValue,
109
- by: compareValues,
110
- disabled: disabled,
111
- onChange: value => {
112
- if (!multiple) {
113
- setOpen(false);
114
- }
115
- onChange?.(value);
116
- },
117
- children: ({
118
- disabled: uiDisabled,
119
- value
120
- }) => {
121
- const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
122
- return /*#__PURE__*/jsx(OptionsOverlay, {
123
- placement: "bottom-start",
124
- open: open,
125
- renderTrigger: ({
126
- ref,
127
- getInteractionProps
128
- }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
129
- // eslint-disable-next-line react/jsx-no-constructed-context-values
130
- value: {
131
- ref: node => {
132
- ref(node);
133
- if (externalTriggerRef) {
134
- // eslint-disable-next-line no-param-reassign
135
- externalTriggerRef.current = node;
136
- } else {
137
- internalTriggerRef.current = node;
138
- }
139
- },
140
- ...inputAttributes,
141
- ...UNSAFE_triggerButtonProps,
142
- id,
143
- ...mergeProps({
144
- onClick: () => {
145
- setOpen(prev => !prev);
146
- },
147
- onKeyDown: event => {
148
- if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
149
- setOpen(prev => !prev);
150
- }
151
- }
152
- }, getInteractionProps())
153
- },
154
- children: renderTrigger({
155
- content: !placeholderShown ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
156
- value: true,
157
- children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).filter(node => node != null).join(', ') : renderValue(value, true)
158
- }) : placeholder,
159
- placeholderShown,
160
- clear: onClear != null ? () => {
161
- onClear();
162
- (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
163
- preventScroll: true
164
- });
165
- } : undefined,
166
- disabled: uiDisabled,
167
- size,
168
- className
169
- })
170
- }),
171
- initialFocusRef: controllerRef,
172
- size: filterable ? 'lg' : 'md',
173
- padding: "none",
174
- onClose: () => {
175
- setOpen(false);
176
- },
177
- onCloseEnd: () => {
178
- setFilterQuery('');
179
- },
180
- children: /*#__PURE__*/jsx(SelectInputOptions, {
181
- id: id ? `${id}Search` : undefined,
182
- parentId: parentId,
183
- items: items,
184
- compareValues: compareValues,
185
- renderValue: renderValue,
186
- renderFooter: renderFooter,
187
- filterable: filterable,
188
- filterPlaceholder: filterPlaceholder,
189
- sortFilteredOptions: sortFilteredOptions,
190
- searchInputRef: searchInputRef,
191
- listboxRef: listboxRef,
192
- filterQuery: deferredFilterQuery,
193
- autocomplete: autocomplete,
194
- name: name,
195
- onFilterChange: setFilterQuery,
196
- onAutocompleteSelect: matchedValue => {
197
- onChange?.(matchedValue);
198
- if (!multiple) {
199
- setOpen(false);
200
- }
201
- },
202
- ...getListBoxLabelProps()
203
- })
204
- });
205
- }
206
- });
207
- }
208
-
209
- export { SelectInput };
210
- //# sourceMappingURL=SelectInput.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInput.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import { Listbox as ListboxBase } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useDeferredValue, useEffect, useRef, useState } from 'react';\n\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\n\nimport { BottomSheet } from '../_BottomSheet';\nimport { Popover } from '../_Popover';\nimport { useInputAttributes } from '../contexts';\nimport { searchableString } from './SelectInput.helpers';\nimport { SelectInputTriggerButtonPropsContext } from './TriggerButton';\nimport { SelectInputOptions } from './Options';\nimport { SelectInputOptionContentWithinTriggerContext } from './OptionContent';\nimport { SelectInputDefaultTrigger } from './DefaultTrigger';\nimport type { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = SelectInputDefaultTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [handleClose, handleOpen, open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const setFilterQuery = useEffectEvent((query: string) => {\n _setFilterQuery(query);\n if (query !== filterQuery) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n }\n });\n\n const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? Popover : BottomSheet;\n\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n /**\n * Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' ||\n event.key === 'Enter' ||\n event.key === 'ArrowDown' ||\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","SelectInputDefaultTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","setFilterQuery","query","queryNormalized","searchableString","internalTriggerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","Popover","BottomSheet","searchInputRef","listboxRef","controllerRef","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue"],"mappings":"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"}
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var react = require('@headlessui/react');
5
- var mergeProps = require('merge-props');
6
- var PolymorphicWithOverrides = require('../../../common/polymorphicWithOverrides/PolymorphicWithOverrides.js');
7
- var jsxRuntime = require('react/jsx-runtime');
8
-
9
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
-
11
- var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
12
-
13
- const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
14
- function SelectInputTriggerButton({
15
- as = 'button',
16
- ...restProps
17
- }) {
18
- const {
19
- ref,
20
- onClick,
21
- onKeyDown,
22
- ...interactionProps
23
- } = React.useContext(SelectInputTriggerButtonPropsContext);
24
- return /*#__PURE__*/jsxRuntime.jsx(react.ListboxButton, {
25
- ref: ref,
26
- as: PolymorphicWithOverrides.PolymorphicWithOverrides,
27
- role: "combobox",
28
- __overrides: {
29
- as,
30
- ...interactionProps
31
- },
32
- ...mergeProps__default.default({
33
- onClick,
34
- onKeyDown
35
- }, restProps)
36
- });
37
- }
38
-
39
- exports.SelectInputTriggerButton = SelectInputTriggerButton;
40
- exports.SelectInputTriggerButtonPropsContext = SelectInputTriggerButtonPropsContext;
41
- //# sourceMappingURL=SelectInputTriggerButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInputTriggerButton.js","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { useContext, createContext } from 'react';\nimport { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\n\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\n\nexport const SelectInputTriggerButtonPropsContext = createContext<{\n ref?: React.ForwardedRef<HTMLButtonElement | null>;\n id?: string;\n onClick?: (event: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n [key: string]: unknown;\n}>({});\n\ntype SelectInputTriggerButtonElementType = 'button' | React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, ...interactionProps }}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButtonPropsContext","createContext","SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","interactionProps","useContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;;;;;;;MAOaA,oCAAoC,gBAAGC,mBAAa,CAM9D,EAAE;AAQC,SAAUC,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAkB,GAAGC,gBAAU,CACjET,oCAAoC,CACrC;EAED,oBACEU,cAAA,CAACC,mBAAa,EAAA;AACZN,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAES,iDAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEX,EAAE;MAAE,GAAGK;KAAmB;AAAA,IAAA,GACrCO,2BAAU,CAAC;MAAET,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;;"}
@@ -1,34 +0,0 @@
1
- import { createContext, useContext } from 'react';
2
- import { ListboxButton } from '@headlessui/react';
3
- import mergeProps from 'merge-props';
4
- import { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides.mjs';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
8
- function SelectInputTriggerButton({
9
- as = 'button',
10
- ...restProps
11
- }) {
12
- const {
13
- ref,
14
- onClick,
15
- onKeyDown,
16
- ...interactionProps
17
- } = useContext(SelectInputTriggerButtonPropsContext);
18
- return /*#__PURE__*/jsx(ListboxButton, {
19
- ref: ref,
20
- as: PolymorphicWithOverrides,
21
- role: "combobox",
22
- __overrides: {
23
- as,
24
- ...interactionProps
25
- },
26
- ...mergeProps({
27
- onClick,
28
- onKeyDown
29
- }, restProps)
30
- });
31
- }
32
-
33
- export { SelectInputTriggerButton, SelectInputTriggerButtonPropsContext };
34
- //# sourceMappingURL=SelectInputTriggerButton.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectInputTriggerButton.mjs","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { useContext, createContext } from 'react';\nimport { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\n\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\n\nexport const SelectInputTriggerButtonPropsContext = createContext<{\n ref?: React.ForwardedRef<HTMLButtonElement | null>;\n id?: string;\n onClick?: (event: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n [key: string]: unknown;\n}>({});\n\ntype SelectInputTriggerButtonElementType = 'button' | React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, ...interactionProps }}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButtonPropsContext","createContext","SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","interactionProps","useContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;MAOaA,oCAAoC,gBAAGC,aAAa,CAM9D,EAAE;AAQC,SAAUC,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAkB,GAAGC,UAAU,CACjET,oCAAoC,CACrC;EAED,oBACEU,GAAA,CAACC,aAAa,EAAA;AACZN,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAES,wBAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEX,EAAE;MAAE,GAAGK;KAAmB;AAAA,IAAA,GACrCO,UAAU,CAAC;MAAET,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;"}
@@ -1,17 +0,0 @@
1
- .np-select-input-addon-container {
2
- pointer-events: none;
3
- margin-inline-start: 4px;
4
- margin-inline-start: var(--size-4);
5
- display: inline-flex;
6
- align-items: center;
7
- }
8
- .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
9
- margin-inline-start: 4px;
10
- margin-inline-start: var(--size-4);
11
- }
12
- .np-select-input-addon-separator {
13
- height: 24px;
14
- height: var(--size-24);
15
- border-inline-start: 1px solid rgba(0,0,0,0.10196);
16
- border-inline-start: 1px solid var(--color-border-neutral);
17
- }
@@ -1,37 +0,0 @@
1
- .np-select-input-option-content-container {
2
- display: flex;
3
- align-items: center;
4
- -moz-column-gap: 8px;
5
- column-gap: 8px;
6
- -moz-column-gap: var(--size-8);
7
- column-gap: var(--size-8);
8
- color: #37517e;
9
- color: var(--color-content-primary);
10
- }
11
- .np-select-input-option-content-icon {
12
- display: flex;
13
- }
14
- .np-select-input-option-content-icon--not-within-trigger {
15
- align-self: flex-start;
16
- }
17
- .np-select-input-option-content-text {
18
- display: flex;
19
- flex: 1;
20
- flex-direction: column;
21
- overflow: hidden;
22
- }
23
- .np-select-input-option-content-text-secondary {
24
- color: #5d7079;
25
- color: var(--color-content-secondary);
26
- }
27
- .np-select-input-option-content-text-within-trigger {
28
- overflow: hidden;
29
- text-overflow: ellipsis;
30
- white-space: nowrap;
31
- }
32
- .np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
33
- margin-right: 8px;
34
- margin-right: var(--size-8);
35
- margin-left: 8px;
36
- margin-left: var(--size-8);
37
- }