@economic/taco 1.1.4 → 1.1.5-alpha.102
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/README.md +82 -82
- package/dist/components/Icon/components/LogOut.d.ts +3 -0
- package/dist/components/Icon/components/Menu.d.ts +3 -0
- package/dist/components/Icon/components/Numbers.d.ts +3 -0
- package/dist/components/Icon/components/Profile.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Tour/Tour.d.ts +2 -0
- package/dist/esm/components/Banner/util.js +1 -1
- package/dist/esm/components/Banner/util.js.map +1 -1
- package/dist/esm/components/Button/util.js +18 -23
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Card/Card.js +3 -0
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +1 -0
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/useCombobox.js +67 -87
- package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/components/Datepicker/useDatepicker.js +27 -34
- package/dist/esm/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Context.js +4 -4
- package/dist/esm/components/Dialog/Context.js.map +1 -1
- package/dist/esm/components/Dialog/components/Content.js +39 -44
- package/dist/esm/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/components/Dialog/components/Drawer.js +3 -3
- package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
- package/dist/esm/components/Dialog/components/Extra.js +2 -2
- package/dist/esm/components/Dialog/components/Extra.js.map +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js +3 -3
- package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +1 -1
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Icon/components/LogOut.js +20 -0
- package/dist/esm/components/Icon/components/LogOut.js.map +1 -0
- package/dist/esm/components/Icon/components/Menu.js +18 -0
- package/dist/esm/components/Icon/components/Menu.js.map +1 -0
- package/dist/esm/components/Icon/components/Numbers.js +18 -0
- package/dist/esm/components/Icon/components/Numbers.js.map +1 -0
- package/dist/esm/components/Icon/components/Profile.js +20 -0
- package/dist/esm/components/Icon/components/Profile.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +12 -4
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/Input/util.js +2 -2
- package/dist/esm/components/Input/util.js.map +1 -1
- package/dist/esm/components/Listbox/ScrollableList.js +64 -83
- package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +51 -60
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useMultiListbox.js +64 -91
- package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useTypeahead.js +10 -9
- package/dist/esm/components/Listbox/useTypeahead.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +48 -85
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Menu/Context.js +2 -2
- package/dist/esm/components/Menu/Context.js.map +1 -1
- package/dist/esm/components/Menu/components/Checkbox.js +9 -10
- package/dist/esm/components/Menu/components/Checkbox.js.map +1 -1
- package/dist/esm/components/Menu/components/Content.js +9 -11
- package/dist/esm/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/components/Menu/components/Header.js +3 -3
- package/dist/esm/components/Menu/components/Header.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +30 -31
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/components/Menu/components/Link.js +10 -11
- package/dist/esm/components/Menu/components/Link.js.map +1 -1
- package/dist/esm/components/Menu/components/RadioGroup.js +17 -19
- package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Menu/components/Separator.js +1 -1
- package/dist/esm/components/Menu/components/Separator.js.map +1 -1
- package/dist/esm/components/Menu/components/Trigger.js +4 -4
- package/dist/esm/components/Menu/components/Trigger.js.map +1 -1
- package/dist/esm/components/Pagination/PageNumbers.js +23 -28
- package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
- package/dist/esm/components/Pagination/usePagination.js +7 -21
- package/dist/esm/components/Pagination/usePagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePaginationShortcuts.js +9 -9
- package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +1 -1
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Popover/Primitives.js +7 -8
- package/dist/esm/components/Popover/Primitives.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +4 -1
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +63 -81
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/esm/components/Table/components/BaseTable.js +23 -30
- package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
- package/dist/esm/components/Table/components/PaginatedTable.js +3 -7
- package/dist/esm/components/Table/components/PaginatedTable.js.map +1 -1
- package/dist/esm/components/Table/components/Table.js +18 -25
- package/dist/esm/components/Table/components/Table.js.map +1 -1
- package/dist/esm/components/Table/components/WindowedTable.js +89 -109
- package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js +122 -146
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js +57 -61
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js +39 -36
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +79 -89
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/components/Table/hooks/useRowCreation.js +29 -64
- package/dist/esm/components/Table/hooks/useRowCreation.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTable.js +119 -141
- package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +13 -16
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
- package/dist/esm/components/Table/util/renderColumn.js +10 -10
- package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
- package/dist/esm/components/Table/util/renderRow.js +37 -46
- package/dist/esm/components/Table/util/renderRow.js.map +1 -1
- package/dist/esm/components/Table/util/rowIndexPath.js +14 -16
- package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
- package/dist/esm/components/Table/util/sortTypes.js +23 -31
- package/dist/esm/components/Table/util/sortTypes.js.map +1 -1
- package/dist/esm/components/Table/util.js +29 -41
- package/dist/esm/components/Table/util.js.map +1 -1
- package/dist/esm/components/Toast/Toast.js +21 -22
- package/dist/esm/components/Toast/Toast.js.map +1 -1
- package/dist/esm/components/Toast/util.js +2 -2
- package/dist/esm/components/Toast/util.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +3 -1
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/index.css +661 -661
- package/dist/esm/index.js +4 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/primitives/Button.js +9 -13
- package/dist/esm/primitives/Button.js.map +1 -1
- package/dist/esm/utils/date.js.map +1 -1
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js.map +1 -1
- package/dist/esm/utils/hooks/useDraggable.js +16 -17
- package/dist/esm/utils/hooks/useDraggable.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
- package/dist/esm/utils/hooks/useListScrollTo.js.map +1 -1
- package/dist/esm/utils/hooks/useOnClickOutside.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/esm/utils/hooks/useTimer.js +9 -17
- package/dist/esm/utils/hooks/useTimer.js.map +1 -1
- package/dist/esm/utils/input.js +7 -11
- package/dist/esm/utils/input.js.map +1 -1
- package/dist/esm/utils/mergeRefs.js +1 -1
- package/dist/esm/utils/mergeRefs.js.map +1 -1
- package/dist/esm/utils/taillwind.js +2 -2
- package/dist/esm/utils/taillwind.js.map +1 -1
- package/dist/index.css +661 -661
- package/dist/index.d.ts +4 -1
- package/dist/taco.cjs.development.js +1566 -1823
- 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/dist/utils/mergeRefs.d.ts +1 -1
- package/package.json +6 -7
- package/plugins/tailwindcss-aria-attributes.js +73 -73
- package/tailwind.config.js +9 -0
- package/types.json +2612 -7006
@@ -14,8 +14,8 @@ import '../Spinner/Spinner.js';
|
|
14
14
|
import '../Toast/Toaster.js';
|
15
15
|
import { useLocalization } from '../Provider/Provider.js';
|
16
16
|
import '../Calendar/Calendar.js';
|
17
|
-
import '../Card/Card.js';
|
18
17
|
import '../Checkbox/Checkbox.js';
|
18
|
+
import '../../utils/hooks/useProxiedRef.js';
|
19
19
|
import { Input } from '../Input/Input.js';
|
20
20
|
import keycode from 'keycode';
|
21
21
|
import '../../utils/hooks/useListKeyboardNavigation.js';
|
@@ -23,6 +23,7 @@ import '../../utils/hooks/useListScrollTo.js';
|
|
23
23
|
import '../../utils/hooks/useBoundingClientRectListener.js';
|
24
24
|
import '../Combobox/Combobox.js';
|
25
25
|
import '../../utils/date.js';
|
26
|
+
import '../../utils/mergeRefs.js';
|
26
27
|
import '../Popover/Popover.js';
|
27
28
|
import '../Datepicker/Datepicker.js';
|
28
29
|
import '../Dialog/Dialog.js';
|
@@ -35,6 +36,7 @@ import '../Listbox/Listbox.js';
|
|
35
36
|
import '../RadioGroup/RadioGroup.js';
|
36
37
|
import '../Menu/Menu.js';
|
37
38
|
import '../Treeview/Treeview.js';
|
39
|
+
import '../../utils/hooks/useDropTarget.js';
|
38
40
|
import '../Navigation/Navigation.js';
|
39
41
|
import '../Select/Select.js';
|
40
42
|
import '../Pagination/usePagination.js';
|
@@ -50,6 +52,7 @@ import '../Textarea/Textarea.js';
|
|
50
52
|
import '../Switch/Switch.js';
|
51
53
|
import '../Tour/Tour.js';
|
52
54
|
import '../../utils/hooks/useOnClickOutside.js';
|
55
|
+
import '../Card/Card.js';
|
53
56
|
|
54
57
|
var _excluded = ["onSearch"];
|
55
58
|
var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n /**\n * aria-label text for input\n */\n inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\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 */\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n if (!props.disabled) {\n onSearch?.(props.value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n if (isEnterKeyPressed) {\n handleClick();\n }\n\n props.onKeyDown?.(event);\n };\n\n return (\n <Input\n aria-label={texts.searchInput.inputLabel}\n {...props}\n button={\n <IconButton\n icon=\"search\"\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n disabled={props.disabled}\n onClick={handleClick}\n />\n }\n onKeyDown={handleKeyDown}\n ref={ref}\n type=\"search\"\n />\n );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":"
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n /**\n * aria-label text for input\n */\n inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\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 */\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n { onSearch, ...props }: SearchInputProps,\n ref: React.Ref<HTMLInputElement>\n) {\n const { texts } = useLocalization();\n\n const handleClick = (): void => {\n if (!props.disabled) {\n onSearch?.(props.value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n if (isEnterKeyPressed) {\n handleClick();\n }\n\n props.onKeyDown?.(event);\n };\n\n return (\n <Input\n aria-label={texts.searchInput.inputLabel}\n {...props}\n button={\n <IconButton\n icon=\"search\"\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n disabled={props.disabled}\n onClick={handleClick}\n />\n }\n onKeyDown={handleKeyDown}\n ref={ref}\n type=\"search\"\n />\n );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;EAGf,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc;IAChB,IAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;MACjBL,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;;GAFR;;EAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;;;IAClB,IAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;IAEA,IAAIF,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAH,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaO,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACe,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFlB,aAAA,CAACmB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVd,QAAQ,EAAEJ,KAAK,CAACI;MAChBe,OAAO,EAAEhB;KAJb;IAOJQ,SAAS,EAAEL;IACXR,GAAG,EAAEA;IACLsB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { useState, useMemo, useRef, useEffect, createElement, Fragment, cloneElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { v4 } from 'uuid';
|
@@ -8,47 +7,37 @@ import keycode from 'keycode';
|
|
8
7
|
import { createCustomEvent } from '../../utils/input.js';
|
9
8
|
import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
|
10
9
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
return nativeId || "select_" + v4();
|
40
|
-
}, [nativeId]);
|
41
|
-
var inputRef = useRef(null);
|
42
|
-
var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
|
43
|
-
|
44
|
-
var _React$useState2 = useState(value),
|
45
|
-
lastValue = _React$useState2[0],
|
46
|
-
setLastValue = _React$useState2[1];
|
47
|
-
|
48
|
-
useEffect(function () {
|
10
|
+
const useSelect = ({
|
11
|
+
'aria-label': ariaLabel,
|
12
|
+
'aria-labelledby': ariaLabelledBy,
|
13
|
+
data = [],
|
14
|
+
defaultValue,
|
15
|
+
disabled,
|
16
|
+
emptyValue,
|
17
|
+
id: nativeId,
|
18
|
+
multiselect,
|
19
|
+
onBlur,
|
20
|
+
onClick,
|
21
|
+
onChange,
|
22
|
+
readOnly,
|
23
|
+
value,
|
24
|
+
...otherProps
|
25
|
+
}, ref) => {
|
26
|
+
const {
|
27
|
+
texts
|
28
|
+
} = useLocalization();
|
29
|
+
const flattenedData = useFlattenedData(data);
|
30
|
+
const listboxInputRef = useProxiedRef(ref);
|
31
|
+
const [open, setOpen] = useState(false);
|
32
|
+
const id = useMemo(() => nativeId || `select_${v4()}`, [nativeId]);
|
33
|
+
const inputRef = useRef(null);
|
34
|
+
const buttonId = `${id}-button`; // support 'escape' resetting to the value that was set when the listbox opened
|
35
|
+
|
36
|
+
const [lastValue, setLastValue] = useState(value);
|
37
|
+
useEffect(() => {
|
49
38
|
setLastValue(value);
|
50
39
|
}, [open]);
|
51
|
-
useEffect(
|
40
|
+
useEffect(() => {
|
52
41
|
if (value === undefined) {
|
53
42
|
if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
|
54
43
|
setInputValueByRef(inputRef.current, defaultValue);
|
@@ -70,14 +59,14 @@ var useSelect = function useSelect(_ref, ref) {
|
|
70
59
|
}
|
71
60
|
}, []); // event handlers
|
72
61
|
|
73
|
-
|
62
|
+
const handleButtonKeyDown = event => {
|
74
63
|
if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
|
75
64
|
event.preventDefault();
|
76
65
|
setOpen(true);
|
77
66
|
}
|
78
67
|
};
|
79
68
|
|
80
|
-
|
69
|
+
const handleListboxKeyDown = event => {
|
81
70
|
switch (event.keyCode) {
|
82
71
|
case keycode('escape'):
|
83
72
|
{
|
@@ -108,7 +97,7 @@ var useSelect = function useSelect(_ref, ref) {
|
|
108
97
|
}
|
109
98
|
};
|
110
99
|
|
111
|
-
|
100
|
+
const handleListboxClick = event => {
|
112
101
|
event.preventDefault();
|
113
102
|
|
114
103
|
if (!multiselect) {
|
@@ -120,16 +109,14 @@ var useSelect = function useSelect(_ref, ref) {
|
|
120
109
|
}
|
121
110
|
};
|
122
111
|
|
123
|
-
|
124
|
-
|
112
|
+
let text = '';
|
113
|
+
let more = 0;
|
125
114
|
|
126
115
|
if (value !== undefined) {
|
127
116
|
if (multiselect) {
|
128
|
-
|
117
|
+
const selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
|
129
118
|
|
130
|
-
if (selectedValues.length === flattenedData.filter(
|
131
|
-
return !item.disabled;
|
132
|
-
}).length) {
|
119
|
+
if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {
|
133
120
|
text = texts.select.allOptionsSelected;
|
134
121
|
} else {
|
135
122
|
var _findByValue$text, _findByValue;
|
@@ -138,7 +125,7 @@ var useSelect = function useSelect(_ref, ref) {
|
|
138
125
|
more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
|
139
126
|
}
|
140
127
|
} else {
|
141
|
-
|
128
|
+
const item = findByValue(flattenedData, value);
|
142
129
|
|
143
130
|
if (item) {
|
144
131
|
text = item.icon ? createElement(Fragment, null, cloneElement(item.icon, {
|
@@ -148,27 +135,24 @@ var useSelect = function useSelect(_ref, ref) {
|
|
148
135
|
}
|
149
136
|
}
|
150
137
|
|
151
|
-
|
138
|
+
const handleInputChange = event => {
|
152
139
|
event.persist();
|
153
140
|
|
154
141
|
if (onChange) {
|
155
142
|
var _item$path$split, _item$path;
|
156
143
|
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
var 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 : [];
|
144
|
+
const item = findByValue(flattenedData, event.target.value);
|
145
|
+
event.detail = sanitizeItem(item);
|
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 : [];
|
161
147
|
|
162
148
|
if (indexes.length > 1) {
|
163
149
|
// we don't want to map the current item
|
164
150
|
indexes.pop(); // we need to rebuild the path as we map
|
165
151
|
|
166
|
-
|
167
|
-
event.detail.parents = indexes.map(
|
152
|
+
let lastPath;
|
153
|
+
event.detail.parents = indexes.map(i => {
|
168
154
|
lastPath = lastPath ? [lastPath, i].join('.') : i;
|
169
|
-
return sanitizeItem(flattenedData.find(
|
170
|
-
return i.path === lastPath;
|
171
|
-
}));
|
155
|
+
return sanitizeItem(flattenedData.find(i => i.path === lastPath));
|
172
156
|
});
|
173
157
|
}
|
174
158
|
|
@@ -176,44 +160,42 @@ var useSelect = function useSelect(_ref, ref) {
|
|
176
160
|
}
|
177
161
|
};
|
178
162
|
|
179
|
-
|
163
|
+
const button = {
|
180
164
|
'aria-haspopup': 'listbox',
|
181
|
-
'aria-label': ariaLabel ? ariaLabel
|
182
|
-
'aria-labelledby': ariaLabelledBy ? ariaLabelledBy
|
165
|
+
'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,
|
166
|
+
'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,
|
183
167
|
disabled: disabled || readOnly,
|
184
168
|
id: buttonId,
|
185
169
|
onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
|
186
170
|
type: 'button'
|
187
171
|
};
|
188
|
-
|
189
|
-
var listbox = _extends({}, otherProps, {
|
172
|
+
const listbox = { ...otherProps,
|
190
173
|
'aria-label': ariaLabel,
|
191
174
|
'aria-labelledby': ariaLabelledBy,
|
192
|
-
data
|
193
|
-
disabled
|
194
|
-
emptyValue
|
195
|
-
onBlur
|
175
|
+
data,
|
176
|
+
disabled,
|
177
|
+
emptyValue,
|
178
|
+
onBlur,
|
196
179
|
onClick: handleListboxClick,
|
197
|
-
onChange:
|
180
|
+
onChange: event => {
|
198
181
|
setInputValueByRef(inputRef.current, event.target.value);
|
199
182
|
},
|
200
183
|
onKeyDown: handleListboxKeyDown,
|
201
184
|
ref: listboxInputRef,
|
202
|
-
value
|
203
|
-
}
|
204
|
-
|
205
|
-
var input = {
|
185
|
+
value
|
186
|
+
};
|
187
|
+
const input = {
|
206
188
|
onChange: handleInputChange,
|
207
189
|
ref: inputRef,
|
208
190
|
value: String(value !== null && value !== void 0 ? value : '')
|
209
191
|
};
|
210
192
|
return {
|
211
|
-
button
|
212
|
-
listbox
|
213
|
-
input
|
193
|
+
button,
|
194
|
+
listbox,
|
195
|
+
input,
|
214
196
|
popover: {
|
215
|
-
open
|
216
|
-
onOpenChange:
|
197
|
+
open,
|
198
|
+
onOpenChange: open => {
|
217
199
|
if (!open && onBlur) {
|
218
200
|
onBlur(createCustomEvent('blur'));
|
219
201
|
}
|
@@ -221,8 +203,8 @@ var useSelect = function useSelect(_ref, ref) {
|
|
221
203
|
setOpen(open);
|
222
204
|
}
|
223
205
|
},
|
224
|
-
text
|
225
|
-
more
|
206
|
+
text,
|
207
|
+
more
|
226
208
|
};
|
227
209
|
};
|
228
210
|
|
@@ -1 +1 @@
|
|
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 (!multiselect && !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: disabled || readOnly,\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","ref","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","nativeId","id","multiselect","onBlur","onChange","readOnly","value","otherProps","useLocalization","texts","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","React","open","setOpen","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","onClick","input","String","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 (!multiselect && !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: disabled || readOnly,\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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"}
|
@@ -1,29 +1,26 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
|
5
4
|
import { Column } from '../util/renderColumn.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
React__default.useEffect(function () {
|
6
|
+
const DefaultEmptyState = () => null;
|
7
|
+
const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props, ref) {
|
8
|
+
const tableRef = useProxiedRef(ref);
|
9
|
+
const {
|
10
|
+
autoFocus,
|
11
|
+
children,
|
12
|
+
disableSorting: _,
|
13
|
+
headerGroups,
|
14
|
+
headerRef,
|
15
|
+
bodyRef,
|
16
|
+
...otherProps
|
17
|
+
} = props;
|
18
|
+
React__default.useEffect(() => {
|
22
19
|
if (autoFocus && tableRef.current) {
|
23
20
|
tableRef.current.focus();
|
24
21
|
}
|
25
22
|
}, []);
|
26
|
-
|
23
|
+
const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);
|
27
24
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
28
25
|
role: "table",
|
29
26
|
className: className,
|
@@ -32,19 +29,15 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
|
|
32
29
|
role: "rowgroup",
|
33
30
|
className: "yt-table__head",
|
34
31
|
ref: headerRef
|
35
|
-
}, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
cell: cell
|
45
|
-
});
|
46
|
-
}));
|
47
|
-
})), React__default.createElement("div", {
|
32
|
+
}, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => React__default.createElement("div", {
|
33
|
+
key: index,
|
34
|
+
role: "row",
|
35
|
+
className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
|
36
|
+
}, headerGroup.headers.map((cell, index) => React__default.createElement(Column, {
|
37
|
+
key: index,
|
38
|
+
index: index,
|
39
|
+
cell: cell
|
40
|
+
}))))), React__default.createElement("div", {
|
48
41
|
role: "rowgroup",
|
49
42
|
className: "yt-table__body",
|
50
43
|
ref: bodyRef
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useProxiedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\"\n >\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":"
|
1
|
+
{"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useProxiedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\"\n >\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;EACtC,MAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;EACA,MAAM;IAAEG,SAAF;IAAaC,QAAb;IAAuBC,cAAc,EAAEC,CAAvC;IAA0CC,YAA1C;IAAwDC,SAAxD;IAAmEC,OAAnE;IAA4E,GAAGC;MAAeX,KAApG;EAEAF,cAAK,CAACc,SAAN,CAAgB;IACZ,IAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;MAC/BX,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;EAMA,MAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;EAEA,OACIjB,4BAAA,MAAA,oBAASa;IAAYM,IAAI,EAAC;IAAQF,SAAS,EAAEA;IAAWd,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;IACIuB,GAAG,EAAED;IACLH,IAAI,EAAC;IACLF,SAAS,EAAC;GAHd,EAKKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;IAAQH,GAAG,EAAED;IAAOA,KAAK,EAAEA;IAAOG,IAAI,EAAEA;GAAxC,CADH,CALL,CADH,CADL,CADJ,EAeIzB,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAES;GAArD,EACKL,QADL,CAfJ,CADJ;AAqBH,CAjCwB;;;;"}
|
@@ -1,20 +1,16 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { Table } from './Table.js';
|
3
3
|
|
4
|
-
|
4
|
+
const PaginatedTable = /*#__PURE__*/React__default.forwardRef(function PaginatedTable(props, ref) {
|
5
5
|
return React__default.createElement(Table, Object.assign({}, props, {
|
6
6
|
disablePagination: false,
|
7
7
|
ref: ref
|
8
8
|
}));
|
9
9
|
});
|
10
10
|
|
11
|
-
PaginatedTable.Column =
|
12
|
-
return null;
|
13
|
-
};
|
11
|
+
PaginatedTable.Column = () => null;
|
14
12
|
|
15
|
-
PaginatedTable.Group =
|
16
|
-
return null;
|
17
|
-
};
|
13
|
+
PaginatedTable.Group = () => null;
|
18
14
|
|
19
15
|
export { PaginatedTable };
|
20
16
|
//# sourceMappingURL=PaginatedTable.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PaginatedTable.js","sources":["../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\nimport { Table } from './Table';\n\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\n return <Table {...props} disablePagination={false} ref={ref} />;\n}) as ForwardedGenericTableWithStatics;\n\nPaginatedTable.Column = () => null;\nPaginatedTable.Group = () => null;\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;
|
1
|
+
{"version":3,"file":"PaginatedTable.js","sources":["../../../../../src/components/Table/components/PaginatedTable.tsx"],"sourcesContent":["import React from 'react';\nimport { ForwardedGenericTableWithStatics, TableProps, TableRef } from '../types';\nimport { Table } from './Table';\n\nexport const PaginatedTable = React.forwardRef(function PaginatedTable<T>(props: TableProps<T>, ref: React.Ref<TableRef>) {\n return <Table {...props} disablePagination={false} ref={ref} />;\n}) as ForwardedGenericTableWithStatics;\n\nPaginatedTable.Column = () => null;\nPaginatedTable.Group = () => null;\n"],"names":["PaginatedTable","React","forwardRef","props","ref","Table","disablePagination","Column","Group"],"mappings":";;;MAIaA,cAAc,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,cAAT,CAA2BG,KAA3B,EAAiDC,GAAjD;EAC3C,OAAOH,4BAAA,CAACI,KAAD,oBAAWF;IAAOG,iBAAiB,EAAE;IAAOF,GAAG,EAAEA;IAAjD,CAAP;AACH,CAF6B;;AAI9BJ,cAAc,CAACO,MAAf,GAAwB,MAAM,IAA9B;;AACAP,cAAc,CAACQ,KAAf,GAAuB,MAAM,IAA7B;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
|
4
3
|
import { Pagination } from '../../Pagination/Pagination.js';
|
@@ -6,23 +5,21 @@ import { useTable } from '../hooks/useTable.js';
|
|
6
5
|
import { Row } from '../util/renderRow.js';
|
7
6
|
import { BaseTable, DefaultEmptyState } from './BaseTable.js';
|
8
7
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
var paginationElement;
|
8
|
+
const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
|
9
|
+
const {
|
10
|
+
emptyStateRenderer = DefaultEmptyState,
|
11
|
+
...otherProps
|
12
|
+
} = props;
|
13
|
+
const tableRef = useProxiedRef(ref);
|
14
|
+
const {
|
15
|
+
rowProps,
|
16
|
+
tableProps,
|
17
|
+
rows,
|
18
|
+
prepareRow,
|
19
|
+
pagination,
|
20
|
+
instance
|
21
|
+
} = useTable(otherProps, tableRef);
|
22
|
+
let paginationElement;
|
26
23
|
|
27
24
|
if (pagination) {
|
28
25
|
paginationElement = React__default.createElement(Pagination, {
|
@@ -39,7 +36,7 @@ var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
|
|
39
36
|
|
40
37
|
return React__default.createElement(React__default.Fragment, null, paginationElement, React__default.createElement(BaseTable, Object.assign({}, tableProps, {
|
41
38
|
ref: tableRef
|
42
|
-
}), rows.length ? rows.map(
|
39
|
+
}), rows.length ? rows.map((row, index) => {
|
43
40
|
prepareRow(row, index);
|
44
41
|
return React__default.createElement(Row, Object.assign({}, rowProps, {
|
45
42
|
key: index,
|
@@ -51,13 +48,9 @@ var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
|
|
51
48
|
}) : emptyStateRenderer()), paginationElement);
|
52
49
|
});
|
53
50
|
|
54
|
-
Table.Column =
|
55
|
-
return null;
|
56
|
-
};
|
51
|
+
Table.Column = () => null;
|
57
52
|
|
58
|
-
Table.Group =
|
59
|
-
return null;
|
60
|
-
};
|
53
|
+
Table.Group = () => null;
|
61
54
|
|
62
55
|
export { Table };
|
63
56
|
//# sourceMappingURL=Table.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n let paginationElement;\n\n if (pagination) {\n paginationElement = (\n <Pagination\n className=\"my-4 w-full\"\n length={pagination.length}\n pageIndex={pagination.pageIndex}\n pageSize={pagination.pageSize}\n setPageIndex={pagination.setPageIndex}\n setPageSize={pagination.setPageSize}\n showPageControls={pagination.length > pagination.pageSize}\n dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n />\n );\n }\n\n return (\n <>\n {paginationElement}\n <BaseTable {...tableProps} ref={tableRef}>\n {rows.length\n ? rows.map((row: InternalTableRow, index: number) => {\n prepareRow(row, index);\n return (\n <Row\n {...rowProps}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n />\n );\n })\n : emptyStateRenderer()}\n </BaseTable>\n {paginationElement}\n </>\n );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n let paginationElement;\n\n if (pagination) {\n paginationElement = (\n <Pagination\n className=\"my-4 w-full\"\n length={pagination.length}\n pageIndex={pagination.pageIndex}\n pageSize={pagination.pageSize}\n setPageIndex={pagination.setPageIndex}\n setPageSize={pagination.setPageSize}\n showPageControls={pagination.length > pagination.pageSize}\n dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n />\n );\n }\n\n return (\n <>\n {paginationElement}\n <BaseTable {...tableProps} ref={tableRef}>\n {rows.length\n ? rows.map((row: InternalTableRow, index: number) => {\n prepareRow(row, index);\n return (\n <Row\n {...rowProps}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n />\n );\n })\n : emptyStateRenderer()}\n </BaseTable>\n {paginationElement}\n </>\n );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","rowProps","tableProps","rows","prepareRow","pagination","instance","useTable","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;MASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;EAIlC,MAAM;IAAEC,kBAAkB,GAAGC,iBAAvB;IAA0C,GAAGC;MAAeJ,KAAlE;EACA,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;EACA,MAAM;IAAEM,QAAF;IAAYC,UAAZ;IAAwBC,IAAxB;IAA8BC,UAA9B;IAA0CC,UAA1C;IAAsDC;MAAaC,QAAQ,CAACT,UAAD,EAAaC,QAAb,CAAjF;EAEA,IAAIS,iBAAJ;;EAEA,IAAIH,UAAJ,EAAgB;IACZG,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;MACIC,SAAS,EAAC;MACVC,MAAM,EAAEN,UAAU,CAACM;MACnBC,SAAS,EAAEP,UAAU,CAACO;MACtBC,QAAQ,EAAER,UAAU,CAACQ;MACrBC,YAAY,EAAET,UAAU,CAACS;MACzBC,WAAW,EAAEV,UAAU,CAACU;MACxBC,gBAAgB,EAAEX,UAAU,CAACM,MAAX,GAAoBN,UAAU,CAACQ;MACjDI,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;;;EAcJ,OACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAehB;IAAYP,GAAG,EAAEI;IAAhC,EACKI,IAAI,CAACQ,MAAL,GACKR,IAAI,CAACgB,GAAL,CAAS,CAACC,GAAD,EAAwBC,KAAxB;IACLjB,UAAU,CAACgB,GAAD,EAAMC,KAAN,CAAV;IACA,OACI7B,4BAAA,CAAC8B,GAAD,oBACQrB;MACJsB,GAAG,EAAEF;MACLA,KAAK,EAAEA;MACPD,GAAG,EAAEA;MACLd,QAAQ,EAAEA;MACVkB,YAAY,EAAEtB,UAAU,CAACsB;MAN7B,CADJ;GAFJ,CADL,GAcK5B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACkC,MAAN,GAAe,MAAM,IAArB;;AACAlC,KAAK,CAACmC,KAAN,GAAc,MAAM,IAApB;;;;"}
|