@economic/taco 0.0.33-alpha.0 → 0.0.33-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +20 -43
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +4 -5
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/taco.cjs.development.js +300 -367
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import '../Icon/components/index.js';
|
4
3
|
import '../Icon/Icon.js';
|
@@ -49,22 +48,22 @@ import '../Switch/Switch.js';
|
|
49
48
|
import '../Tour/Tour.js';
|
50
49
|
import '../../utils/hooks/useOnClickOutside.js';
|
51
50
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
51
|
+
const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
|
52
|
+
onSearch,
|
53
|
+
...props
|
54
|
+
}, ref) {
|
55
|
+
const {
|
56
|
+
texts
|
57
|
+
} = useLocalization();
|
56
58
|
|
57
|
-
|
58
|
-
texts = _useLocalization.texts;
|
59
|
-
|
60
|
-
var handleClick = function handleClick() {
|
59
|
+
const handleClick = () => {
|
61
60
|
if (!props.disabled) {
|
62
61
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
|
63
62
|
}
|
64
63
|
};
|
65
64
|
|
66
|
-
|
67
|
-
|
65
|
+
const handleKeyDown = event => {
|
66
|
+
const isEnterKeyPressed = event.keyCode === keycode('enter');
|
68
67
|
|
69
68
|
if (isEnterKeyPressed) {
|
70
69
|
handleClick();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;AAAEE,EAAAA,QAAF;AAAY,KAAGC;AAAf,CADwC,EAExCC,GAFwC;AAIxC,QAAM;AAAEC,IAAAA;AAAF,MAAYC,eAAe,EAAjC;;AAEA,QAAMC,WAAW,GAAG;AAChB,QAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;AACjBN,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,QAAMC,aAAa,GAAIC,KAAD;AAClB,UAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;AACJe,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEL,KAAK,CAACK;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXN,IAAAA,GAAG,EAAEA;AACLoB,IAAAA,IAAI,EAAC;IAbT,CADJ;AAiBH,CArC0B;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
@@ -10,54 +9,52 @@ import { Combobox } from '../Combobox/Combobox.js';
|
|
10
9
|
import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
|
11
10
|
import { useSelect } from './useSelect.js';
|
12
11
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
var className = cn('inline-flex relative w-full', {
|
12
|
+
const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
13
|
+
const {
|
14
|
+
autoFocus,
|
15
|
+
className: externalClassName,
|
16
|
+
highlighted,
|
17
|
+
style,
|
18
|
+
...otherProps
|
19
|
+
} = props;
|
20
|
+
const {
|
21
|
+
button,
|
22
|
+
listbox,
|
23
|
+
popover,
|
24
|
+
input,
|
25
|
+
text,
|
26
|
+
more = 0
|
27
|
+
} = useSelect(otherProps, ref);
|
28
|
+
const internalRef = useRef(null);
|
29
|
+
const selectDimensions = useBoundingClientRectListener(internalRef);
|
30
|
+
const className = cn('inline-flex relative w-full', {
|
33
31
|
'yt-select--readonly': props.readOnly
|
34
32
|
}, externalClassName);
|
35
|
-
|
33
|
+
const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
|
36
34
|
'border-blue': popover.open
|
37
35
|
});
|
38
|
-
useEffect(
|
36
|
+
useEffect(() => {
|
39
37
|
if (autoFocus && internalRef.current) {
|
40
38
|
internalRef.current.focus();
|
41
39
|
}
|
42
40
|
}, []);
|
43
41
|
|
44
|
-
|
42
|
+
const renderMultiSelection = () => {
|
45
43
|
return createElement(Fragment, null, createElement("span", {
|
46
44
|
className: "flex-grow truncate text-left"
|
47
45
|
}, text), more > 0 && createElement(Badge, {
|
48
46
|
className: "ml-2"
|
49
|
-
},
|
47
|
+
}, `+${more}`));
|
50
48
|
};
|
51
49
|
|
52
|
-
|
50
|
+
const commonListboxProps = { ...listbox,
|
53
51
|
className: 'w-auto',
|
54
52
|
invalid: undefined,
|
55
53
|
style: {
|
56
54
|
minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
|
57
55
|
},
|
58
56
|
tabIndex: popover.open ? 0 : -1
|
59
|
-
}
|
60
|
-
|
57
|
+
};
|
61
58
|
return createElement("span", {
|
62
59
|
className: className,
|
63
60
|
"data-taco": "select",
|
@@ -80,9 +77,11 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
|
|
80
77
|
type: "text"
|
81
78
|
}))));
|
82
79
|
});
|
83
|
-
|
84
|
-
|
85
|
-
|
80
|
+
const Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
|
81
|
+
const {
|
82
|
+
editable,
|
83
|
+
...otherProps
|
84
|
+
} = props;
|
86
85
|
|
87
86
|
if (editable) {
|
88
87
|
return createElement(Combobox, Object.assign({}, otherProps, {
|
@@ -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","externalClassName","
|
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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"}
|
@@ -35,17 +35,16 @@ const useSelect = ({
|
|
35
35
|
useEffect(() => {
|
36
36
|
setLastValue(value);
|
37
37
|
}, [open]);
|
38
|
-
useEffect(() => {
|
39
|
-
if (defaultValue !== undefined && value === undefined) {
|
40
|
-
setInputValueByRef(internalInputRef.current, defaultValue);
|
41
|
-
}
|
42
|
-
}, [defaultValue]);
|
43
38
|
useEffect(() => {
|
44
39
|
// If emptyValue is defined, then set emptyValue
|
45
40
|
if (emptyValue !== undefined && value === emptyValue) {
|
46
41
|
setInputValueByRef(internalInputRef.current, value);
|
47
42
|
} else if (value !== undefined && data.some(option => option.value === value)) {
|
48
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);
|
49
48
|
}
|
50
49
|
}, []); // event handlers
|
51
50
|
|
@@ -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 (defaultValue !== undefined && value === undefined) {\r\n setInputValueByRef(internalInputRef.current, defaultValue);\r\n }\r\n }, [defaultValue]);\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 }\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","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","length","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';\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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"}
|