@os-design/core 1.0.183 → 1.0.184

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.
@@ -1,33 +1,37 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
  import { css } from '@emotion/react';
3
3
  import styled from '@emotion/styled';
4
- import { m } from '@os-design/media';
5
- import { transitionStyles } from '@os-design/styles';
6
- import { clr } from '@os-design/theming';
7
- import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useForwardedRef, useForwardedState, useResizeObserver } from '@os-design/utils';
4
+ import { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';
5
+ import { m, useIsMinWidth } from '@os-design/media';
6
+ import { ellipsisStyles, resetButtonStyles, transitionStyles } from '@os-design/styles';
7
+ import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
8
+ import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useFontSize, useForwardedRef, useForwardedState, useResizeObserver, useSize } from '@os-design/utils';
8
9
  import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
10
+ import { FixedSizeList } from 'react-window';
11
+ import Button from '../Button';
9
12
  import { InputContainer } from '../Input';
10
13
  import InputSearch from '../InputSearch';
14
+ import useRWLoadNext from '../List/utils/useRWLoadNext';
11
15
  import Menu from '../Menu';
12
- import SelectList from './SelectList';
13
- import SelectToggle from './SelectToggle';
16
+ import MenuItem from '../MenuItem';
17
+ import Tag from '../Tag';
14
18
  import defaultLocale from './utils/defaultLocale';
15
- const paddingStyles = p => {
19
+ const selectContainerPaddingStyles = p => {
16
20
  const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
17
21
  return css`
18
22
  padding: calc(${paddingVertical}em - 1px) 0;
19
23
  `;
20
24
  };
21
- const openedStyles = p => p.opened && !p.unbordered && css`
25
+ const selectContainerOpenedStyles = p => p.opened && !p.unbordered && css`
22
26
  border-color: ${clr(p.theme.inputFocusColorBorder)};
23
27
  box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
24
28
  `;
25
- const unborderedStyles = p => p.unbordered && css`
29
+ const selectContainerUnborderedStyles = p => p.unbordered && css`
26
30
  border: 0;
27
31
  box-shadow: none !important;
28
32
  ${transitionStyles('background-color')(p)};
29
33
  `;
30
- const unborderedHoverStyles = p => p.unbordered && !p.disabled && css`
34
+ const selectContainerUnborderedHoverStyles = p => p.unbordered && !p.disabled && css`
31
35
  @media (hover: hover) {
32
36
  &:hover,
33
37
  &:focus {
@@ -45,10 +49,10 @@ export const SelectContainer = styled(InputContainer, omitEmotionProps('opened',
45
49
  height: unset;
46
50
  min-height: ${p => p.theme.baseHeight}em;
47
51
 
48
- ${paddingStyles};
49
- ${openedStyles};
50
- ${unborderedStyles};
51
- ${unborderedHoverStyles};
52
+ ${selectContainerPaddingStyles};
53
+ ${selectContainerOpenedStyles};
54
+ ${selectContainerUnborderedStyles};
55
+ ${selectContainerUnborderedHoverStyles};
52
56
  `;
53
57
  const SelectMenu = styled(Menu, omitEmotionProps('width'))`
54
58
  padding-top: 0;
@@ -71,6 +75,116 @@ const InputSearchContainer = styled.div`
71
75
  padding: ${p => p.theme.menuPaddingVertical}em
72
76
  ${p => p.theme.inputPaddingHorizontal}em 0;
73
77
  `;
78
+ export const ToggleContainer = styled.div`
79
+ flex: 1;
80
+ display: flex;
81
+ align-items: center;
82
+ overflow: hidden;
83
+ `;
84
+ const toggleContentNotHasLeftStyles = p => !p.hasLeft && css`
85
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
86
+ `;
87
+ const toggleContentNotHasRightStyles = p => !p.hasRight && !p.unbordered && css`
88
+ padding-right: ${p.theme.inputPaddingHorizontal}em;
89
+ `;
90
+ export const ToggleContent = styled('div', omitEmotionProps('hasLeft', 'hasRight', 'unbordered'))`
91
+ flex: 1;
92
+ ${toggleContentNotHasLeftStyles};
93
+ ${toggleContentNotHasRightStyles};
94
+ ${ellipsisStyles};
95
+ `;
96
+ export const Placeholder = styled.span`
97
+ color: ${p => clr(p.theme.inputColorPlaceholder)};
98
+ ${ellipsisStyles};
99
+ `;
100
+ const titleUnborderedTitleStyles = p => p.unbordered && css`
101
+ font-weight: 500;
102
+ ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
103
+ `;
104
+ const titleDisabledStyles = p => p.disabled && css`
105
+ color: ${clr(p.theme.inputDisabledColorText)};
106
+ `;
107
+ export const Title = styled('span', omitEmotionProps('disabled', 'unbordered'))`
108
+ color: ${p => clr(p.theme.colorText)};
109
+ ${titleUnborderedTitleStyles};
110
+ ${titleDisabledStyles};
111
+ ${ellipsisStyles};
112
+ `;
113
+ const ToggleListItem = styled(Tag, omitEmotionProps('disabled'))`
114
+ // Reset tag styles
115
+ padding-top: 0;
116
+ padding-bottom: 0;
117
+
118
+ height: ${p => p.theme.selectToggleListItemHeight}em;
119
+ ${titleDisabledStyles};
120
+ `;
121
+ const ToggleList = styled.div`
122
+ display: flex;
123
+ flex-wrap: wrap;
124
+ overflow: hidden; // For ellipsis styles
125
+
126
+ margin: 0 ${p => p.theme.selectToggleListItemGap}em
127
+ ${p => -p.theme.selectToggleListItemGap}em 0;
128
+
129
+ & > div {
130
+ margin: 0 ${p => p.theme.selectToggleListItemGap}em
131
+ ${p => p.theme.selectToggleListItemGap}em 0;
132
+ }
133
+ `;
134
+ const DeleteButton = styled.button`
135
+ ${resetButtonStyles};
136
+ cursor: pointer;
137
+ display: inherit;
138
+ font-size: 1em;
139
+ margin-left: 0.2em;
140
+
141
+ background-color: transparent;
142
+ color: ${p => clr(p.theme.selectToggleDeleteButtonColorIcon)};
143
+
144
+ @media (hover: hover) {
145
+ &:hover,
146
+ &:focus {
147
+ color: ${p => clr(p.theme.selectToggleDeleteButtonColorIconHover)};
148
+ }
149
+ }
150
+
151
+ ${transitionStyles('color')};
152
+ `;
153
+ const toggleIconUnborderedStyles = p => p.unbordered && css`
154
+ padding-top: 0.2em;
155
+ font-size: 0.8em;
156
+ ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
157
+ `;
158
+ export const ToggleIconContainer = styled('span', omitEmotionProps('unbordered', 'disabled'))`
159
+ color: ${p => clr(p.theme.selectColorIcon)};
160
+ line-height: 1;
161
+ ${toggleIconUnborderedStyles};
162
+ `;
163
+ export const ClearIcon = styled(CloseCircle)`
164
+ transform: scale(1.2) !important;
165
+ `;
166
+ const Addon = styled('span', omitEmotionProps('hasPadding'))`
167
+ display: flex;
168
+ align-items: center;
169
+ user-select: none;
170
+ color: ${p => clr(p.theme.inputColorPlaceholder)};
171
+
172
+ svg {
173
+ transform: scale(1.2);
174
+ }
175
+ `;
176
+ export const ToggleLeftAddon = styled(Addon)`
177
+ padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
178
+ ${p => p.hasPadding && css`
179
+ padding-left: ${p.theme.inputPaddingHorizontal}em;
180
+ `}
181
+ `;
182
+ export const ToggleRightAddon = styled(Addon)`
183
+ padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
184
+ ${p => p.hasPadding && css`
185
+ padding-right: ${p.theme.inputPaddingHorizontal}em;
186
+ `}
187
+ `;
74
188
 
75
189
  /**
76
190
  * The component that allows to pick a value from predefined options.
@@ -94,7 +208,8 @@ const Select = /*#__PURE__*/forwardRef(({
94
208
  threshold = 10,
95
209
  visibleCount = 6,
96
210
  overscanCount = 10,
97
- maxSelectedItems = 1,
211
+ multiple = false,
212
+ maxSelectedItems = 0,
98
213
  locale = defaultLocale,
99
214
  value,
100
215
  defaultValue,
@@ -110,14 +225,14 @@ const Select = /*#__PURE__*/forwardRef(({
110
225
  const [width, setWidth] = useState(0);
111
226
  const inputSearchContainerRef = useRef(null);
112
227
  const [opened, setOpened] = useState(autoOpen);
228
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
113
229
  const [forwardedValue, setForwardedValue] = useForwardedState({
114
230
  value,
115
231
  defaultValue,
116
232
  onChange
117
233
  });
118
234
  useEffect(() => {
119
- if (!autoFocus) return;
120
- containerRef.current?.focus();
235
+ if (autoFocus) containerRef.current?.focus();
121
236
  }, [autoFocus, containerRef]);
122
237
  const onCloseRef = useRef(onClose);
123
238
  useEffect(() => {
@@ -151,17 +266,190 @@ const Select = /*#__PURE__*/forwardRef(({
151
266
  if (!containerRef.current) return;
152
267
  containerRef.current.setAttribute('aria-haspopup', 'listbox');
153
268
  }, []);
154
- const selectedItems = useMemo(() => (forwardedValue || []).map(v => {
155
- const option = (options || []).find(item => item.value === v);
156
- return {
157
- title: option ? option.title || '' : '',
158
- value: v
159
- };
160
- }), [forwardedValue, options]);
161
269
  const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2, 11)}`, []);
162
270
  const blurHandler = useCallback(e => {
163
271
  if (!opened) onBlur(e);
164
272
  }, [onBlur, opened]);
273
+ const onDelete = useCallback(v => {
274
+ if (!multiple) return;
275
+ setForwardedValue((forwardedValue || []).filter(item => item !== v));
276
+ }, [forwardedValue, multiple, setForwardedValue]);
277
+ const toggleContent = useMemo(() => {
278
+ if (multiple) {
279
+ if (!forwardedValue || forwardedValue.length === 0) {
280
+ return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
281
+ }
282
+ const items = forwardedValue.map(v => {
283
+ const option = (options || []).find(item => item.value === v);
284
+ return {
285
+ title: option ? option.title || '' : '',
286
+ value: v
287
+ };
288
+ });
289
+ return /*#__PURE__*/React.createElement(ToggleList, null, items.map(({
290
+ title,
291
+ value: v
292
+ }) => /*#__PURE__*/React.createElement(ToggleListItem, {
293
+ key: v,
294
+ disabled: disabled,
295
+ right: !disabled ? /*#__PURE__*/React.createElement(DeleteButton, {
296
+ onClick: e => {
297
+ onDelete(v);
298
+ e.stopPropagation();
299
+ },
300
+ onKeyDown: e => e.stopPropagation(),
301
+ "aria-label": `${locale.deleteLabel} ${title}`,
302
+ "aria-hidden": true
303
+ }, /*#__PURE__*/React.createElement(Close, null)) : undefined,
304
+ "aria-hidden": true
305
+ }, title)));
306
+ }
307
+ if (!forwardedValue) {
308
+ return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
309
+ }
310
+ const option = (options || []).find(item => item.value === forwardedValue);
311
+ return /*#__PURE__*/React.createElement(Title, {
312
+ disabled: disabled,
313
+ unbordered: unbordered
314
+ }, option ? option.title : '');
315
+ }, [disabled, forwardedValue, locale.deleteLabel, multiple, onDelete, options, placeholder, unbordered]);
316
+ const toggleShowClearButton = useMemo(() => {
317
+ if (!clearVisible) return false;
318
+ if (multiple) return forwardedValue && forwardedValue.length > 0;
319
+ return !!forwardedValue;
320
+ }, [clearVisible, forwardedValue, multiple]);
321
+ const toggleOnClear = useCallback(() => {
322
+ setForwardedValue(multiple ? [] : null);
323
+ if (!containerRef.current) return;
324
+ containerRef.current.focus();
325
+ }, [containerRef, multiple, setForwardedValue]);
326
+ const toggleRightValue = useMemo(() => {
327
+ if (loading) return /*#__PURE__*/React.createElement(Loading, null);
328
+ if (toggleShowClearButton) {
329
+ return /*#__PURE__*/React.createElement(Button, {
330
+ type: "ghost",
331
+ wide: "never",
332
+ size: "small",
333
+ disabled: disabled,
334
+ onClick: e => {
335
+ toggleOnClear();
336
+ e.stopPropagation();
337
+ },
338
+ onKeyDown: e => {
339
+ if (e.key === 'Enter') toggleOnClear();
340
+ e.stopPropagation();
341
+ },
342
+ "aria-label": locale.clearLabel
343
+ }, /*#__PURE__*/React.createElement(ClearIcon, null));
344
+ }
345
+ return right || /*#__PURE__*/React.createElement(ToggleIconContainer, {
346
+ unbordered: unbordered,
347
+ disabled: disabled
348
+ }, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
349
+ }, [disabled, loading, locale.clearLabel, opened, right, toggleOnClear, toggleShowClearButton, unbordered]);
350
+ const toggleRightHasPaddingValue = useMemo(() => {
351
+ if (loading) return true;
352
+ if (toggleShowClearButton) return false;
353
+ return right ? rightHasPadding : true;
354
+ }, [loading, right, rightHasPadding, toggleShowClearButton]);
355
+ const onSelect = useCallback(v => {
356
+ if (multiple) {
357
+ // Delete the value because it was already selected
358
+ if ((forwardedValue || []).includes(v)) {
359
+ setForwardedValue((forwardedValue || []).filter(item => item !== v));
360
+ return;
361
+ }
362
+
363
+ // Add a new value if the number of selected items is less than max
364
+ if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
365
+ setForwardedValue([...(forwardedValue || []), v]);
366
+ return;
367
+ }
368
+ return;
369
+ }
370
+ setForwardedValue(v);
371
+ }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
372
+ const windowSize = useSize();
373
+ const isMinXs = useIsMinWidth('xs');
374
+ const fontSize = useFontSize(document.body);
375
+ const {
376
+ theme
377
+ } = useTheme();
378
+ const scaleFactor = useMemo(() => {
379
+ const s = size || 'medium';
380
+ return ['small', 'medium', 'large'].includes(s) ? theme.sizes[s] : Number(s.replace(/^([0-9]+(\.[0-9]+)?).*/, '$1')) || 1; // Extract the number
381
+ }, [size, theme.sizes]);
382
+ const paddingBottom = useMemo(() => {
383
+ const paddingEm = isMinXs ? theme.menuPaddingVertical : theme.modalBodyPaddingVertical[0];
384
+ return paddingEm * fontSize * scaleFactor;
385
+ }, [isMinXs, theme.menuPaddingVertical, theme.modalBodyPaddingVertical, fontSize, scaleFactor]);
386
+ const paddingTop = useMemo(() => searchVisible ? 5 * scaleFactor : paddingBottom, [searchVisible, scaleFactor, paddingBottom]);
387
+ const searchInputHeight = useMemo(() => searchVisible ? (theme.baseHeight + theme.menuPaddingVertical) * fontSize * scaleFactor : 0, [searchVisible, theme.baseHeight, theme.menuPaddingVertical, fontSize, scaleFactor]);
388
+ const itemSize = useMemo(() => theme.menuItemHeight * fontSize * scaleFactor, [theme.menuItemHeight, fontSize, scaleFactor]);
389
+ const height = useMemo(() => {
390
+ // Modal
391
+ if (!isMinXs) {
392
+ const maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
393
+ const curHeight = options.length * itemSize + paddingTop + paddingBottom;
394
+ return curHeight < maxHeight ? curHeight : maxHeight;
395
+ }
396
+ // Popover
397
+ const count = options.length < visibleCount ? options.length : visibleCount;
398
+ return count * itemSize + paddingTop + paddingBottom;
399
+ }, [isMinXs, options.length, visibleCount, itemSize, windowSize.height, theme.modalHeaderHeight, fontSize, scaleFactor, searchInputHeight, paddingTop, paddingBottom]);
400
+ const scrollHandler = useRWLoadNext({
401
+ itemCount: options.length,
402
+ threshold,
403
+ itemSize,
404
+ paddingTop,
405
+ height,
406
+ onLoadNext
407
+ });
408
+
409
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
410
+ const InnerElement = useCallback(({
411
+ style,
412
+ ...innerElementRest
413
+ }) => /*#__PURE__*/React.createElement("div", _extends({
414
+ style: {
415
+ ...style,
416
+ height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
417
+ },
418
+ role: "listbox",
419
+ id: listBoxId
420
+ }, innerElementRest)), [listBoxId, paddingBottom, paddingTop]);
421
+ const listItemFn = useCallback(({
422
+ index,
423
+ style
424
+ }) => {
425
+ const {
426
+ title: optionTitle,
427
+ value: optionValue,
428
+ onClick: optionOnClick,
429
+ ...restOption
430
+ } = options[index];
431
+ return /*#__PURE__*/React.createElement(MenuItem, _extends({
432
+ style: {
433
+ ...style,
434
+ top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTop}px`
435
+ },
436
+ selected: multiple && (forwardedValue || []).includes(optionValue || '') || !multiple && forwardedValue === optionValue,
437
+ onClick: e => {
438
+ if (!optionValue) return;
439
+ onSelect(optionValue);
440
+
441
+ // Focus the input.
442
+ // Otherwise, if multiple is false and the user presses enter to select an item,
443
+ // the input will lose focus.
444
+ if (containerRef.current && !multiple) {
445
+ containerRef.current.focus();
446
+ }
447
+ if (optionOnClick) optionOnClick(e);
448
+ },
449
+ role: "option",
450
+ "aria-selected": multiple && (forwardedValue || []).includes(optionValue || '') || !multiple && forwardedValue === optionValue
451
+ }, restOption), optionTitle);
452
+ }, [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]);
165
453
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
166
454
  opened: opened,
167
455
  unbordered: unbordered,
@@ -188,51 +476,46 @@ const Select = /*#__PURE__*/forwardRef(({
188
476
  "aria-owns": listBoxId
189
477
  }, rest, {
190
478
  ref: mergedContainerRef
191
- }), /*#__PURE__*/React.createElement(SelectToggle, {
192
- selectedItems: selectedItems,
193
- onDelete: v => setForwardedValue((forwardedValue || []).filter(item => item !== v)),
194
- onClear: () => {
195
- setForwardedValue([]);
196
- if (!containerRef.current) return;
197
- containerRef.current.focus();
198
- },
199
- opened: opened,
200
- multiple: maxSelectedItems !== 1,
201
- placeholder: placeholder,
202
- left: left,
203
- leftHasPadding: leftHasPadding,
204
- right: right,
205
- rightHasPadding: rightHasPadding,
206
- unbordered: unbordered,
207
- disabled: disabled,
208
- clearVisible: clearVisible,
209
- loading: loading,
210
- locale: locale
211
- })), /*#__PURE__*/React.createElement(SelectMenu, {
479
+ }), /*#__PURE__*/React.createElement(ToggleContainer, null, left && /*#__PURE__*/React.createElement(ThemeOverrider, {
480
+ overrides: t => ({
481
+ buttonPaddingHorizontal: 0.8,
482
+ baseHeight: t.selectToggleListItemHeight / t.sizes.small
483
+ })
484
+ }, /*#__PURE__*/React.createElement(ToggleLeftAddon, {
485
+ hasPadding: leftHasPadding
486
+ }, left)), /*#__PURE__*/React.createElement(ToggleContent, {
487
+ hasLeft: !!left,
488
+ hasRight: !!right,
489
+ unbordered: unbordered
490
+ }, toggleContent), toggleRightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
491
+ overrides: t => ({
492
+ buttonPaddingHorizontal: 0.8,
493
+ baseHeight: t.selectToggleListItemHeight / t.sizes.small
494
+ })
495
+ }, /*#__PURE__*/React.createElement(ToggleRightAddon, {
496
+ hasPadding: toggleRightHasPaddingValue
497
+ }, toggleRightValue)))), /*#__PURE__*/React.createElement(SelectMenu, {
212
498
  trigger: containerRef,
213
499
  visible: opened,
214
500
  onClose: () => setOpened(false),
215
501
  size: size,
216
502
  width: width,
217
- closeOnSelect: maxSelectedItems === 1,
503
+ closeOnSelect: !multiple,
218
504
  modalTitle: placeholder,
219
505
  placement: placement
220
506
  }, searchVisible && /*#__PURE__*/React.createElement(InputSearchContainer, {
221
507
  ref: inputSearchContainerRef
222
- }, /*#__PURE__*/React.createElement(InputSearch, searchProps)), options.length > 0 ? /*#__PURE__*/React.createElement(SelectList, {
223
- searchVisible: searchVisible,
224
- options: options,
225
- visibleCount: visibleCount,
508
+ }, /*#__PURE__*/React.createElement(InputSearch, searchProps)), options.length > 0 ? /*#__PURE__*/React.createElement(FixedSizeList, {
509
+ width: "100%",
510
+ height: height,
511
+ itemSize: itemSize,
512
+ itemCount: options.length,
226
513
  overscanCount: overscanCount,
227
- threshold: threshold,
228
- onLoadNext: onLoadNext,
229
- maxSelectedItems: maxSelectedItems,
230
- containerRef: containerRef,
231
- value: forwardedValue,
232
- onChange: setForwardedValue,
233
- id: listBoxId,
234
- size: size
235
- }) : /*#__PURE__*/React.createElement(NotFound, null, notFoundText)));
514
+ onScroll: ({
515
+ scrollOffset
516
+ }) => scrollHandler(scrollOffset),
517
+ innerElementType: InnerElement
518
+ }, listItemFn) : /*#__PURE__*/React.createElement(NotFound, null, notFoundText)));
236
519
  });
237
520
  Select.displayName = 'Select';
238
521
  export default Select;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["css","styled","m","transitionStyles","clr","omitEmotionProps","useBrowserLayoutEffect","useEvent","useForwardedRef","useForwardedState","useResizeObserver","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","InputContainer","InputSearch","Menu","SelectList","SelectToggle","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","onClose","onBlur","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","resizeHandler","window","requestAnimationFrame","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","blurHandler","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBrowserLayoutEffect,\n useEvent,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Menu from '../Menu';\nimport { PopoverProps } from '../Popover';\nimport SelectList, { OptionProps } from './SelectList';\nimport SelectToggle from './SelectToggle';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: OptionProps[];\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * Adds padding to the left component.\n * It can be useful when passing an icon or text in the left component.\n * @default false\n */\n leftHasPadding?: boolean;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Adds padding to the right component.\n * It can be useful when passing an icon or text in the right component.\n * @default false\n */\n rightHasPadding?: boolean;\n /**\n * The placeholder of the select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the component have a focus.\n * @default false\n */\n autoFocus?: boolean;\n /**\n * Whether the component opens the popup list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The event handler that is called whenever a popup closes.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst paddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst openedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst unborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst unborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${paddingStyles};\n ${openedStyles};\n ${unborderedStyles};\n ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n maxSelectedItems = 1,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n onClose = () => {},\n onBlur = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (!autoFocus) return;\n containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) {\n onCloseRef.current();\n containerRef.current?.focus();\n }\n }, [containerRef, opened]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const selectedItems = useMemo(\n () =>\n (forwardedValue || []).map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n }),\n [forwardedValue, options]\n );\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n const blurHandler = useCallback(\n (e) => {\n if (!opened) onBlur(e);\n },\n [onBlur, opened]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n onBlur={blurHandler}\n role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <SelectToggle\n selectedItems={selectedItems}\n onDelete={(v) =>\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n )\n }\n onClear={() => {\n setForwardedValue([]);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }}\n opened={opened}\n multiple={maxSelectedItems !== 1}\n placeholder={placeholder}\n left={left}\n leftHasPadding={leftHasPadding}\n right={right}\n rightHasPadding={rightHasPadding}\n unbordered={unbordered}\n disabled={disabled}\n clearVisible={clearVisible}\n loading={loading}\n locale={locale}\n />\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={maxSelectedItems === 1}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <SelectList\n searchVisible={searchVisible}\n options={options}\n visibleCount={visibleCount}\n overscanCount={overscanCount}\n threshold={threshold}\n onLoadNext={onLoadNext}\n maxSelectedItems={maxSelectedItems}\n containerRef={containerRef}\n value={forwardedValue}\n onChange={setForwardedValue}\n id={listBoxId}\n size={size}\n />\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["css","styled","Close","CloseCircle","Down","Loading","Up","m","useIsMinWidth","ellipsisStyles","resetButtonStyles","transitionStyles","clr","ThemeOverrider","useTheme","omitEmotionProps","useBrowserLayoutEffect","useEvent","useFontSize","useForwardedRef","useForwardedState","useResizeObserver","useSize","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","FixedSizeList","Button","InputContainer","InputSearch","useRWLoadNext","Menu","MenuItem","Tag","defaultLocale","selectContainerPaddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","selectContainerOpenedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","selectContainerUnborderedStyles","selectContainerUnborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","ToggleContainer","toggleContentNotHasLeftStyles","hasLeft","toggleContentNotHasRightStyles","hasRight","ToggleContent","Placeholder","span","inputColorPlaceholder","titleUnborderedTitleStyles","colorPrimary","titleDisabledStyles","inputDisabledColorText","Title","colorText","ToggleListItem","ToggleList","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","toggleIconUnborderedStyles","ToggleIconContainer","selectColorIcon","ClearIcon","Addon","ToggleLeftAddon","inputAddonPaddingHorizontal","hasPadding","ToggleRightAddon","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","multiple","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","onClose","onBlur","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","resizeHandler","window","requestAnimationFrame","nextWidth","getBoundingClientRect","undefined","setAttribute","listBoxId","Math","random","toString","slice","blurHandler","e","onDelete","v","filter","item","toggleContent","length","items","map","option","find","title","stopPropagation","deleteLabel","toggleShowClearButton","toggleOnClear","toggleRightValue","key","clearLabel","toggleRightHasPaddingValue","onSelect","includes","windowSize","isMinXs","fontSize","document","body","scaleFactor","s","sizes","Number","replace","paddingBottom","paddingEm","modalBodyPaddingVertical","paddingTop","searchInputHeight","itemSize","height","maxHeight","modalHeaderHeight","curHeight","count","scrollHandler","itemCount","InnerElement","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","optionValue","onClick","optionOnClick","restOption","top","preventDefault","t","buttonPaddingHorizontal","small","scrollOffset","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';\nimport { m, useIsMinWidth } from '@os-design/media';\nimport {\n ellipsisStyles,\n resetButtonStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBrowserLayoutEffect,\n useEvent,\n useFontSize,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n useSize,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { FixedSizeList } from 'react-window';\nimport Button from '../Button';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\nimport Menu from '../Menu';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport { PopoverProps } from '../Popover';\nimport Tag from '../Tag';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\nexport interface Option extends MenuItemProps {\n title?: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseSelectProps<T>\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: Option[];\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * Adds padding to the left component.\n * It can be useful when passing an icon or text in the left component.\n * @default false\n */\n leftHasPadding?: boolean;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Adds padding to the right component.\n * It can be useful when passing an icon or text in the right component.\n * @default false\n */\n rightHasPadding?: boolean;\n /**\n * The placeholder of the select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the component have a focus.\n * @default false\n */\n autoFocus?: boolean;\n /**\n * Whether the component opens the popup list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select. Zero means unlimited.\n * Works only when multiple is true.\n * @default 0\n */\n maxSelectedItems?: number;\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\n * @default undefined\n */\n value?: T;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: T;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: T) => void;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The event handler that is called whenever a popup closes.\n * @default undefined\n */\n onClose?: () => void;\n}\ninterface SelectNotMultipleProps extends BaseSelectProps<string | null> {\n /**\n * Is it possible to select multiple values.\n * @default false\n */\n multiple?: false;\n}\ninterface SelectMultipleProps extends BaseSelectProps<string[]> {\n /**\n * Is it possible to select multiple values.\n * @default false\n */\n multiple: true;\n}\nexport type SelectProps = SelectNotMultipleProps | SelectMultipleProps;\n\nconst selectContainerPaddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst selectContainerOpenedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst selectContainerUnborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst selectContainerUnborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${selectContainerPaddingStyles};\n ${selectContainerOpenedStyles};\n ${selectContainerUnborderedStyles};\n ${selectContainerUnborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\nexport const ToggleContainer = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n overflow: hidden;\n`;\n\nconst toggleContentNotHasLeftStyles = (p) =>\n !p.hasLeft &&\n css`\n padding-left: ${p.theme.inputPaddingHorizontal}em;\n `;\n\nconst toggleContentNotHasRightStyles = (p) =>\n !p.hasRight &&\n !p.unbordered &&\n css`\n padding-right: ${p.theme.inputPaddingHorizontal}em;\n `;\n\ninterface ToggleContentProps {\n hasLeft?: boolean;\n hasRight?: boolean;\n unbordered?: boolean;\n}\nexport const ToggleContent = styled(\n 'div',\n omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ToggleContentProps>`\n flex: 1;\n ${toggleContentNotHasLeftStyles};\n ${toggleContentNotHasRightStyles};\n ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n ${ellipsisStyles};\n`;\n\nconst titleUnborderedTitleStyles = (p) =>\n p.unbordered &&\n css`\n font-weight: 500;\n ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n `;\n\nconst titleDisabledStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.inputDisabledColorText)};\n `;\n\ntype TitleProps = Pick<SelectProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n 'span',\n omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n color: ${(p) => clr(p.theme.colorText)};\n ${titleUnborderedTitleStyles};\n ${titleDisabledStyles};\n ${ellipsisStyles};\n`;\n\ntype ToggleListItemProps = Pick<SelectProps, 'disabled'>;\nconst ToggleListItem = styled(\n Tag,\n omitEmotionProps('disabled')\n)<ToggleListItemProps>`\n // Reset tag styles\n padding-top: 0;\n padding-bottom: 0;\n\n height: ${(p) => p.theme.selectToggleListItemHeight}em;\n ${titleDisabledStyles};\n`;\n\nconst ToggleList = styled.div`\n display: flex;\n flex-wrap: wrap;\n overflow: hidden; // For ellipsis styles\n\n margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n & > div {\n margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n ${(p) => p.theme.selectToggleListItemGap}em 0;\n }\n`;\n\nconst DeleteButton = styled.button`\n ${resetButtonStyles};\n cursor: pointer;\n display: inherit;\n font-size: 1em;\n margin-left: 0.2em;\n\n background-color: transparent;\n color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n @media (hover: hover) {\n &:hover,\n &:focus {\n color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n }\n }\n\n ${transitionStyles('color')};\n`;\n\nconst toggleIconUnborderedStyles = (p) =>\n p.unbordered &&\n css`\n padding-top: 0.2em;\n font-size: 0.8em;\n ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n `;\n\ninterface ToggleIconContainerProps {\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const ToggleIconContainer = styled(\n 'span',\n omitEmotionProps('unbordered', 'disabled')\n)<ToggleIconContainerProps>`\n color: ${(p) => clr(p.theme.selectColorIcon)};\n line-height: 1;\n ${toggleIconUnborderedStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n display: flex;\n align-items: center;\n user-select: none;\n color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n svg {\n transform: scale(1.2);\n }\n`;\n\nexport const ToggleLeftAddon = styled(Addon)`\n padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n ${(p) =>\n p.hasPadding &&\n css`\n padding-left: ${p.theme.inputPaddingHorizontal}em;\n `}\n`;\n\nexport const ToggleRightAddon = styled(Addon)`\n padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n ${(p) =>\n p.hasPadding &&\n css`\n padding-right: ${p.theme.inputPaddingHorizontal}em;\n `}\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n multiple = false,\n maxSelectedItems = 0,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n onClose = () => {},\n onBlur = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (autoFocus) containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) {\n onCloseRef.current();\n containerRef.current?.focus();\n }\n }, [containerRef, opened]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n const blurHandler = useCallback(\n (e) => {\n if (!opened) onBlur(e);\n },\n [onBlur, opened]\n );\n\n const onDelete = useCallback(\n (v: string) => {\n if (!multiple) return;\n setForwardedValue((forwardedValue || []).filter((item) => item !== v));\n },\n [forwardedValue, multiple, setForwardedValue]\n );\n\n const toggleContent = useMemo(() => {\n if (multiple) {\n if (!forwardedValue || forwardedValue.length === 0) {\n return <Placeholder>{placeholder}</Placeholder>;\n }\n const items = forwardedValue.map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n });\n return (\n <ToggleList>\n {items.map(({ title, value: v }) => (\n <ToggleListItem\n key={v}\n disabled={disabled}\n right={\n !disabled ? (\n <DeleteButton\n onClick={(e) => {\n onDelete(v);\n e.stopPropagation();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={`${locale.deleteLabel} ${title}`}\n aria-hidden\n >\n <Close />\n </DeleteButton>\n ) : undefined\n }\n aria-hidden\n >\n {title}\n </ToggleListItem>\n ))}\n </ToggleList>\n );\n }\n if (!forwardedValue) {\n return <Placeholder>{placeholder}</Placeholder>;\n }\n const option = (options || []).find(\n (item) => item.value === forwardedValue\n );\n return (\n <Title disabled={disabled} unbordered={unbordered}>\n {option ? option.title : ''}\n </Title>\n );\n }, [\n disabled,\n forwardedValue,\n locale.deleteLabel,\n multiple,\n onDelete,\n options,\n placeholder,\n unbordered,\n ]);\n\n const toggleShowClearButton = useMemo(() => {\n if (!clearVisible) return false;\n if (multiple) return forwardedValue && forwardedValue.length > 0;\n return !!forwardedValue;\n }, [clearVisible, forwardedValue, multiple]);\n\n const toggleOnClear = useCallback(() => {\n setForwardedValue(multiple ? [] : null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }, [containerRef, multiple, setForwardedValue]);\n\n const toggleRightValue = useMemo(() => {\n if (loading) return <Loading />;\n if (toggleShowClearButton) {\n return (\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n toggleOnClear();\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') toggleOnClear();\n e.stopPropagation();\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n );\n }\n return (\n right || (\n <ToggleIconContainer unbordered={unbordered} disabled={disabled}>\n {opened ? <Up /> : <Down />}\n </ToggleIconContainer>\n )\n );\n }, [\n disabled,\n loading,\n locale.clearLabel,\n opened,\n right,\n toggleOnClear,\n toggleShowClearButton,\n unbordered,\n ]);\n\n const toggleRightHasPaddingValue = useMemo(() => {\n if (loading) return true;\n if (toggleShowClearButton) return false;\n return right ? rightHasPadding : true;\n }, [loading, right, rightHasPadding, toggleShowClearButton]);\n\n const onSelect = useCallback(\n (v: string) => {\n if (multiple) {\n // Delete the value because it was already selected\n if ((forwardedValue || []).includes(v)) {\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n );\n return;\n }\n\n // Add a new value if the number of selected items is less than max\n if (\n maxSelectedItems === 0 ||\n (forwardedValue || []).length < maxSelectedItems\n ) {\n setForwardedValue([...(forwardedValue || []), v]);\n return;\n }\n return;\n }\n setForwardedValue(v);\n },\n [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n );\n\n const windowSize = useSize();\n const isMinXs = useIsMinWidth('xs');\n const fontSize = useFontSize(document.body);\n const { theme } = useTheme();\n\n const scaleFactor = useMemo(() => {\n const s = size || 'medium';\n return ['small', 'medium', 'large'].includes(s)\n ? theme.sizes[s]\n : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n }, [size, theme.sizes]);\n\n const paddingBottom = useMemo(() => {\n const paddingEm = isMinXs\n ? theme.menuPaddingVertical\n : theme.modalBodyPaddingVertical[0];\n return paddingEm * fontSize * scaleFactor;\n }, [\n isMinXs,\n theme.menuPaddingVertical,\n theme.modalBodyPaddingVertical,\n fontSize,\n scaleFactor,\n ]);\n\n const paddingTop = useMemo(\n () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n [searchVisible, scaleFactor, paddingBottom]\n );\n\n const searchInputHeight = useMemo(\n () =>\n searchVisible\n ? (theme.baseHeight + theme.menuPaddingVertical) *\n fontSize *\n scaleFactor\n : 0,\n [\n searchVisible,\n theme.baseHeight,\n theme.menuPaddingVertical,\n fontSize,\n scaleFactor,\n ]\n );\n\n const itemSize = useMemo(\n () => theme.menuItemHeight * fontSize * scaleFactor,\n [theme.menuItemHeight, fontSize, scaleFactor]\n );\n\n const height = useMemo(() => {\n // Modal\n if (!isMinXs) {\n const maxHeight =\n windowSize.height -\n theme.modalHeaderHeight * fontSize * scaleFactor -\n searchInputHeight;\n const curHeight =\n options.length * itemSize + paddingTop + paddingBottom;\n return curHeight < maxHeight ? curHeight : maxHeight;\n }\n // Popover\n const count =\n options.length < visibleCount ? options.length : visibleCount;\n return count * itemSize + paddingTop + paddingBottom;\n }, [\n isMinXs,\n options.length,\n visibleCount,\n itemSize,\n windowSize.height,\n theme.modalHeaderHeight,\n fontSize,\n scaleFactor,\n searchInputHeight,\n paddingTop,\n paddingBottom,\n ]);\n\n const scrollHandler = useRWLoadNext({\n itemCount: options.length,\n threshold,\n itemSize,\n paddingTop,\n height,\n onLoadNext,\n });\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const InnerElement = useCallback(\n ({ style, ...innerElementRest }) => (\n <div\n style={{\n ...style,\n height: `${\n parseFloat(style.height) + paddingTop + paddingBottom\n }px`,\n }}\n role='listbox'\n id={listBoxId}\n {...innerElementRest}\n />\n ),\n [listBoxId, paddingBottom, paddingTop]\n );\n\n const listItemFn = useCallback(\n ({ index, style }) => {\n const {\n title: optionTitle,\n value: optionValue,\n onClick: optionOnClick,\n ...restOption\n } = options[index];\n return (\n <MenuItem\n style={{\n ...style,\n top: `${\n parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n }px`,\n }}\n selected={\n (multiple &&\n (forwardedValue || []).includes(optionValue || '')) ||\n (!multiple && forwardedValue === optionValue)\n }\n onClick={(e) => {\n if (!optionValue) return;\n onSelect(optionValue);\n\n // Focus the input.\n // Otherwise, if multiple is false and the user presses enter to select an item,\n // the input will lose focus.\n if (containerRef.current && !multiple) {\n containerRef.current.focus();\n }\n\n if (optionOnClick) optionOnClick(e);\n }}\n role='option'\n aria-selected={\n (multiple &&\n (forwardedValue || []).includes(optionValue || '')) ||\n (!multiple && forwardedValue === optionValue)\n }\n {...restOption}\n >\n {optionTitle}\n </MenuItem>\n );\n },\n [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n onBlur={blurHandler}\n role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <ToggleContainer>\n {left && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <ToggleLeftAddon hasPadding={leftHasPadding}>\n {left}\n </ToggleLeftAddon>\n </ThemeOverrider>\n )}\n\n <ToggleContent\n hasLeft={!!left}\n hasRight={!!right}\n unbordered={unbordered}\n >\n {toggleContent}\n </ToggleContent>\n\n {toggleRightValue && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <ToggleRightAddon hasPadding={toggleRightHasPaddingValue}>\n {toggleRightValue}\n </ToggleRightAddon>\n </ThemeOverrider>\n )}\n </ToggleContainer>\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={!multiple}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <FixedSizeList\n width='100%'\n height={height}\n itemSize={itemSize}\n itemCount={options.length}\n overscanCount={overscanCount}\n onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n innerElementType={InnerElement}\n >\n {listItemFn}\n </FixedSizeList>\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}