@economic/taco 0.0.33-alpha.1 → 0.0.33-alpha.4

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 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n /**\r\n * The text displayed when all options are selected when multiselect mode in on.\r\n */\r\n allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n Omit<ComboboxProps, 'inline'> & {\r\n /**\r\n * Allows to select multiple values.\r\n * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n */\r\n multiselect?: boolean;\r\n };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n /**\r\n * Creates an editable select.\r\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n * even if there is no value in the input.\r\n * After user starts typing, matching data will be displayed.\r\n */\r\n editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n const internalRef = React.useRef<HTMLButtonElement>(null);\r\n const selectDimensions = useBoundingClientRectListener(internalRef);\r\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n 'border-blue': popover.open,\r\n });\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && internalRef.current) {\r\n internalRef.current.focus();\r\n }\r\n }, []);\r\n\r\n const renderMultiSelection = (): React.ReactNode => {\r\n return (\r\n <>\r\n <span className=\"flex-grow truncate text-left\">{text}</span>\r\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n </>\r\n );\r\n };\r\n\r\n const commonListboxProps = {\r\n ...listbox,\r\n className: 'w-auto',\r\n invalid: undefined,\r\n style: { minWidth: selectDimensions?.width },\r\n tabIndex: popover.open ? 0 : -1,\r\n };\r\n\r\n return (\r\n <span className={className} data-taco=\"select\" style={style}>\r\n <PopoverPrimitive.Root {...popover}>\r\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n <span className=\"flex h-8 w-8 items-center justify-center\">\r\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n </span>\r\n </PopoverPrimitive.Trigger>\r\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n </PopoverPrimitive.Content>\r\n <input {...input} className=\"hidden\" type=\"text\" />\r\n </PopoverPrimitive.Root>\r\n </span>\r\n );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n const { editable, ...otherProps } = props;\r\n\r\n if (editable) {\r\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n }\r\n\r\n return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /**\n * Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n */\n multiselect?: boolean;\n };\n\nexport type SelectProps = BaseSelectProps & {\n /**\n * Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n */\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n 'border-blue': popover.open,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Content>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
@@ -4,7 +4,8 @@ import { v4 } from 'uuid';
4
4
  import { useLocalization } from '../Provider/Provider.js';
5
5
  import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
6
6
  import keycode from 'keycode';
7
- import { useFlattenedData, setInputValueByRef, findByValue, sanitizeItem } from '../Listbox/util.js';
7
+ import { createCustomEvent } from '../../utils/input.js';
8
+ import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
8
9
 
9
10
  const useSelect = ({
10
11
  'aria-label': ariaLabel,
@@ -15,20 +16,21 @@ const useSelect = ({
15
16
  emptyValue,
16
17
  id: nativeId,
17
18
  multiselect,
19
+ onBlur,
18
20
  onClick,
19
21
  onChange,
20
22
  readOnly,
21
- value = emptyValue,
23
+ value,
22
24
  ...otherProps
23
25
  }, ref) => {
24
26
  const {
25
27
  texts
26
28
  } = useLocalization();
27
- const searchData = useFlattenedData(data);
28
- const inputRef = useProxiedRef(ref);
29
+ const flattenedData = useFlattenedData(data);
30
+ const listboxInputRef = useProxiedRef(ref);
29
31
  const [open, setOpen] = useState(false);
30
32
  const id = useMemo(() => nativeId || `select_${v4()}`, [nativeId]);
31
- const internalInputRef = useRef(null);
33
+ const inputRef = useRef(null);
32
34
  const buttonId = `${id}-button`; // support 'escape' resetting to the value that was set when the listbox opened
33
35
 
34
36
  const [lastValue, setLastValue] = useState(value);
@@ -36,15 +38,24 @@ const useSelect = ({
36
38
  setLastValue(value);
37
39
  }, [open]);
38
40
  useEffect(() => {
39
- // If emptyValue is defined, then set emptyValue
40
- if (emptyValue !== undefined && value === emptyValue) {
41
- setInputValueByRef(internalInputRef.current, value);
42
- } else if (value !== undefined && data.some(option => option.value === value)) {
43
- setInputValueByRef(internalInputRef.current, value);
44
- } else if (value === undefined && defaultValue !== undefined && data.some(option => option.value === defaultValue)) {
45
- setInputValueByRef(internalInputRef.current, defaultValue);
46
- } else if (value === undefined && data.length && defaultValue === undefined) {
47
- setInputValueByRef(internalInputRef.current, data[0].value);
41
+ if (value === undefined) {
42
+ if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
43
+ setInputValueByRef(inputRef.current, defaultValue);
44
+ } else {
45
+ if (emptyValue !== undefined) {
46
+ setInputValueByRef(inputRef.current, emptyValue);
47
+ } else if (data.length > 0) {
48
+ setInputValueByRef(inputRef.current, data[0].value);
49
+ }
50
+ }
51
+ } else {
52
+ if (!findByValue(flattenedData, value)) {
53
+ if (emptyValue !== undefined) {
54
+ setInputValueByRef(inputRef.current, emptyValue);
55
+ } else if (data.length > 0) {
56
+ setInputValueByRef(inputRef.current, data[0].value);
57
+ }
58
+ }
48
59
  }
49
60
  }, []); // event handlers
50
61
 
@@ -62,7 +73,7 @@ const useSelect = ({
62
73
  event.preventDefault();
63
74
 
64
75
  if (lastValue !== undefined) {
65
- setInputValueByRef(inputRef.current, lastValue);
76
+ setInputValueByRef(listboxInputRef.current, lastValue);
66
77
  }
67
78
 
68
79
  setOpen(false);
@@ -91,6 +102,10 @@ const useSelect = ({
91
102
 
92
103
  if (!multiselect) {
93
104
  setOpen(false);
105
+
106
+ if (onBlur) {
107
+ onBlur(createCustomEvent('blur'));
108
+ }
94
109
  }
95
110
  };
96
111
 
@@ -101,16 +116,16 @@ const useSelect = ({
101
116
  if (multiselect) {
102
117
  const selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
103
118
 
104
- if (selectedValues.length === searchData.filter(item => !item.disabled).length) {
119
+ if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {
105
120
  text = texts.select.allOptionsSelected;
106
121
  } else {
107
122
  var _findByValue$text, _findByValue;
108
123
 
109
- text = (_findByValue$text = (_findByValue = findByValue(searchData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
124
+ text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
110
125
  more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
111
126
  }
112
127
  } else {
113
- const item = findByValue(searchData, value);
128
+ const item = findByValue(flattenedData, value);
114
129
 
115
130
  if (item) {
116
131
  text = item.icon ? createElement(Fragment, null, cloneElement(item.icon, {
@@ -126,7 +141,7 @@ const useSelect = ({
126
141
  if (onChange) {
127
142
  var _item$path$split, _item$path;
128
143
 
129
- const item = findByValue(searchData, event.target.value);
144
+ const item = findByValue(flattenedData, event.target.value);
130
145
  event.detail = sanitizeItem(item);
131
146
  const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
132
147
 
@@ -137,7 +152,7 @@ const useSelect = ({
137
152
  let lastPath;
138
153
  event.detail.parents = indexes.map(i => {
139
154
  lastPath = lastPath ? [lastPath, i].join('.') : i;
140
- return sanitizeItem(searchData.find(i => i.path === lastPath));
155
+ return sanitizeItem(flattenedData.find(i => i.path === lastPath));
141
156
  });
142
157
  }
143
158
 
@@ -160,21 +175,19 @@ const useSelect = ({
160
175
  data,
161
176
  disabled,
162
177
  emptyValue,
178
+ onBlur,
163
179
  onClick: handleListboxClick,
164
180
  onChange: event => {
165
- var _event$target;
166
-
167
- setInputValueByRef(internalInputRef.current, (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
181
+ setInputValueByRef(inputRef.current, event.target.value);
168
182
  },
169
183
  onKeyDown: handleListboxKeyDown,
170
- ref: inputRef,
171
- value,
172
- multiselect
184
+ ref: listboxInputRef,
185
+ value
173
186
  };
174
187
  const input = {
175
188
  onChange: handleInputChange,
176
- ref: internalInputRef,
177
- value: value !== null && value !== void 0 ? value : ''
189
+ ref: inputRef,
190
+ value: String(value !== null && value !== void 0 ? value : '')
178
191
  };
179
192
  return {
180
193
  button,
@@ -182,7 +195,13 @@ const useSelect = ({
182
195
  input,
183
196
  popover: {
184
197
  open,
185
- onOpenChange: setOpen
198
+ onOpenChange: open => {
199
+ if (!open && onBlur) {
200
+ onBlur(createCustomEvent('blur'));
201
+ }
202
+
203
+ setOpen(open);
204
+ }
186
205
  },
187
206
  text,
188
207
  more
@@ -1 +1 @@
1
- {"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { SelectProps } from './Select';\r\nimport { ListboxProps } from '../Listbox/Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\r\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\r\n\r\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\r\n button: React.ButtonHTMLAttributes<HTMLButtonElement>;\r\n listbox: ListboxProps;\r\n input: any;\r\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\r\n text: string | JSX.Element;\r\n more?: number;\r\n};\r\n\r\nexport const useSelect = (\r\n {\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n data = [],\r\n defaultValue,\r\n disabled,\r\n emptyValue,\r\n id: nativeId,\r\n multiselect,\r\n onClick,\r\n onChange,\r\n readOnly,\r\n value = emptyValue,\r\n ...otherProps\r\n }: SelectProps,\r\n ref: React.Ref<HTMLInputElement>\r\n): useSelect => {\r\n const { texts } = useLocalization();\r\n const searchData = useFlattenedData(data);\r\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n const [open, setOpen] = React.useState(false);\r\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\r\n const internalInputRef = React.useRef(null);\r\n const buttonId = `${id}-button`;\r\n // support 'escape' resetting to the value that was set when the listbox opened\r\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\r\n\r\n React.useEffect(() => {\r\n setLastValue(value);\r\n }, [open]);\r\n\r\n React.useEffect(() => {\r\n // If emptyValue is defined, then set emptyValue\r\n if (emptyValue !== undefined && value === emptyValue) {\r\n setInputValueByRef(internalInputRef.current, value);\r\n } else if (value !== undefined && data.some(option => option.value === value)) {\r\n setInputValueByRef(internalInputRef.current, value);\r\n } else if (value === undefined && defaultValue !== undefined && data.some(option => option.value === defaultValue)) {\r\n setInputValueByRef(internalInputRef.current, defaultValue);\r\n } else if (value === undefined && data.length && defaultValue === undefined) {\r\n setInputValueByRef(internalInputRef.current, data[0].value);\r\n }\r\n }, []);\r\n\r\n // event handlers\r\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\r\n if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\r\n event.preventDefault();\r\n setOpen(true);\r\n }\r\n };\r\n\r\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\r\n switch (event.keyCode) {\r\n case keycode('escape'): {\r\n event.preventDefault();\r\n if (lastValue !== undefined) {\r\n setInputValueByRef(inputRef.current, lastValue);\r\n }\r\n\r\n setOpen(false);\r\n break;\r\n }\r\n\r\n case keycode('tab'):\r\n case keycode('enter'): {\r\n if (event.keyCode !== keycode('tab')) {\r\n event.preventDefault();\r\n }\r\n setOpen(false);\r\n break;\r\n }\r\n\r\n default:\r\n }\r\n\r\n if (otherProps.onKeyDown) {\r\n otherProps.onKeyDown(event);\r\n }\r\n };\r\n\r\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\r\n event.preventDefault();\r\n if (!multiselect) {\r\n setOpen(false);\r\n }\r\n };\r\n\r\n let text: string | JSX.Element = '';\r\n let more = 0;\r\n\r\n if (value !== undefined) {\r\n if (multiselect) {\r\n const selectedValues = value?.toString().split(',') || [];\r\n\r\n if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\r\n text = texts.select.allOptionsSelected;\r\n } else {\r\n text = findByValue(searchData, selectedValues[0])?.text ?? '';\r\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\r\n }\r\n } else {\r\n const item = findByValue(searchData, value);\r\n\r\n if (item) {\r\n text = item.icon ? (\r\n <>\r\n {React.cloneElement(item.icon, {\r\n className: cn(item.icon.props.className, 'mr-1 -mt-px'),\r\n })}\r\n {item.text}\r\n </>\r\n ) : (\r\n item.text\r\n );\r\n }\r\n }\r\n }\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n event.persist();\r\n\r\n if (onChange) {\r\n const item = findByValue(searchData, event.target.value);\r\n (event as any).detail = sanitizeItem(item);\r\n\r\n const indexes = item?.path?.split('.') ?? [];\r\n\r\n if (indexes.length > 1) {\r\n // we don't want to map the current item\r\n indexes.pop();\r\n // we need to rebuild the path as we map\r\n let lastPath: string;\r\n\r\n (event as any).detail.parents = indexes.map(i => {\r\n lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n return sanitizeItem(searchData.find(i => i.path === lastPath));\r\n });\r\n }\r\n\r\n onChange(event);\r\n }\r\n };\r\n\r\n const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\r\n 'aria-haspopup': 'listbox' as const,\r\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\r\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\r\n disabled,\r\n id: buttonId,\r\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\r\n type: 'button',\r\n };\r\n\r\n const listbox = {\r\n ...otherProps,\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n data,\r\n disabled,\r\n emptyValue,\r\n onClick: handleListboxClick,\r\n onChange: event => {\r\n setInputValueByRef(internalInputRef.current, event.target?.value);\r\n },\r\n onKeyDown: handleListboxKeyDown,\r\n ref: inputRef,\r\n value,\r\n multiselect,\r\n };\r\n\r\n const input = {\r\n onChange: handleInputChange,\r\n ref: internalInputRef,\r\n value: value ?? '',\r\n };\r\n\r\n return {\r\n button,\r\n listbox,\r\n input,\r\n popover: {\r\n open,\r\n onOpenChange: setOpen,\r\n },\r\n text,\r\n more,\r\n };\r\n};\r\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","searchData","useFlattenedData","inputRef","useProxiedRef","open","setOpen","React","uuid","internalInputRef","buttonId","lastValue","setLastValue","undefined","setInputValueByRef","current","some","option","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","popover","onOpenChange"],"mappings":"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"}
1
+ {"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n text: string | JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick,\n onChange,\n readOnly,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useProxiedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n } else {\n if (!findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.keyCode) {\n case keycode('escape'): {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case keycode('tab'):\n case keycode('enter'): {\n if (event.keyCode !== keycode('tab')) {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n }\n };\n\n let text: string | JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') || [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n disabled,\n id: buttonId,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: open => {\n if (!open && onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n setOpen(open);\n },\n },\n text,\n more,\n };\n};\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}