@economic/taco 2.29.0 → 2.29.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/index.css +1 -1
- package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +19 -5
- package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js +5 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/util/rows.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/util/rows.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/primitives/Table/Core/util/rows.d.ts +1 -1
- package/dist/taco.cjs.development.js +24 -9
- 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
package/dist/esm/index.css
CHANGED
@@ -992,7 +992,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'
|
|
992
992
|
}
|
993
993
|
|
994
994
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
|
995
|
-
@apply !-mr-[19px] !h-10 !w-10;
|
995
|
+
@apply z-10 !-mr-[19px] !h-10 !w-10;
|
996
996
|
}
|
997
997
|
|
998
998
|
table[data-taco^='table'][data-table-font-size='large']
|
@@ -131,7 +131,9 @@ const useCombobox = ({
|
|
131
131
|
}
|
132
132
|
};
|
133
133
|
const handleInputKeyDown = event => {
|
134
|
+
var _inputRef$current;
|
134
135
|
event.persist();
|
136
|
+
const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
|
135
137
|
if (!event.ctrlKey && !event.metaKey) {
|
136
138
|
switch (event.key) {
|
137
139
|
case 'Backspace':
|
@@ -146,20 +148,32 @@ const useCombobox = ({
|
|
146
148
|
return;
|
147
149
|
}
|
148
150
|
case 'Tab':
|
151
|
+
{
|
152
|
+
setCurrentValue(currentIndex);
|
153
|
+
setOpen(false);
|
154
|
+
return;
|
155
|
+
}
|
149
156
|
case 'Enter':
|
150
157
|
{
|
151
|
-
if (
|
158
|
+
if (insideTheTable) {
|
152
159
|
event.preventDefault();
|
160
|
+
if (inline && !open) {
|
161
|
+
setOpen(true);
|
162
|
+
} else if (buttonRef.current && !open) {
|
163
|
+
buttonRef.current.click();
|
164
|
+
}
|
165
|
+
}
|
166
|
+
if (open) {
|
167
|
+
setCurrentValue(currentIndex);
|
168
|
+
setOpen(false);
|
153
169
|
}
|
154
|
-
setCurrentValue(currentIndex);
|
155
|
-
setOpen(false);
|
156
170
|
return;
|
157
171
|
}
|
158
172
|
case 'ArrowDown':
|
159
173
|
if (open) {
|
160
174
|
event.preventDefault();
|
161
175
|
} else {
|
162
|
-
if (!inline && buttonRef.current) {
|
176
|
+
if (!inline && buttonRef.current && !insideTheTable) {
|
163
177
|
buttonRef.current.click();
|
164
178
|
}
|
165
179
|
}
|
@@ -179,7 +193,7 @@ const useCombobox = ({
|
|
179
193
|
listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
|
180
194
|
}
|
181
195
|
if (inline && !open) {
|
182
|
-
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
196
|
+
if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
|
183
197
|
event.preventDefault();
|
184
198
|
const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
|
185
199
|
setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n ...props\n }: Omit<ComboboxProps, 'dialog'>,\n ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => uuid(), []);\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n const flattenedData = useFlattenedData(unfilteredData);\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n );\n\n const setInputValueByIndex = (index: number | undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value, 'focusout');\n }\n }\n };\n\n const setCurrentValue = (index: number | undefined) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n // if the selected option is not already selected, trigger blur event\n if (option.value !== value) {\n setInputValueByIndex(index);\n } else {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n React.useEffect(() => {\n if (value !== undefined && value !== inputValue) {\n setInputValue(convertToInputValue(value));\n }\n }, [value]);\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string before checking the equality\n if (onChange && event.target.value !== String(value)) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline || (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n\n setCurrentValue(currentIndex);\n setOpen(false);\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else {\n if (!inline && buttonRef.current) {\n buttonRef.current.click();\n }\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (inline && !open) {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n setOpen(true);\n }\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...props,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","ctrlKey","metaKey","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":";;;;;;;;AAkBA,MAAMA,SAAS,gBAAGC,QAAQ,CAACC,CAAC,IAAIA,CAAC,EAAE,EAAE,GAAG,CAAC;AAEzC,MAAMC,mBAAmB,GAAIC,KAA0C,IAAKC,MAAM,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;MAUlFE,WAAW,GAAGA,CACvB;EACI,YAAY,EAAEC,SAAS;EACvB,iBAAiB,EAAEC,cAAc;EACjCC,IAAI,EAAEC,cAAc,GAAG,EAAE;EACzBC,YAAY;EACZC,QAAQ;EACRC,EAAE,EAAEC,QAAQ;EACZC,MAAM;EACNC,OAAO,EAAEC,EAAE;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRlB,KAAK;EACL,GAAGmB;CACyB,EAChCC,GAAgC;EAEhC,MAAMC,QAAQ,GAAGC,YAAY,CAAmBF,GAAG,CAAC;EACpD,MAAMG,SAAS,GAAGC,MAAY,CAAoB,IAAI,CAAC;EACvD,MAAMC,OAAO,GAAGD,MAAY,CAAmB,IAAI,CAAC;EACpD,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGH,QAAc,CAAC,KAAK,CAAC;EAC7C,MAAMI,MAAM,GAAGJ,OAAa,CAAC,MAAMK,EAAI,EAAE,EAAE,EAAE,CAAC;EAC9C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGP,QAAc,CAASzB,mBAAmB,CAACC,KAAK,CAAC,CAAC;EACtF,MAAMgC,gBAAgB,GAAG,CAACf,QAAQ,KAAK,CAACN,MAAM,IAAKA,MAAM,IAAImB,UAAU,KAAK/B,mBAAmB,CAACC,KAAK,CAAE,CAAC;EACxG,MAAMiC,aAAa,GAAGC,gBAAgB,CAAC5B,cAAc,CAAC;EACtD,MAAMD,IAAI,GAAGmB,OAAa,CACtB,MAAOQ,gBAAgB,GAAGG,UAAU,CAACF,aAAa,EAAEH,UAAU,CAAC,GAAGG,aAAc,EAChF,CAACD,gBAAgB,EAAEF,UAAU,EAAEG,aAAa,CAAC,CAChD;;EAED,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGb,QAAc,CAClDM,UAAU,KAAKQ,SAAS,GAAGC,iBAAiB,CAAClC,IAAI,EAAEyB,UAAU,CAAC,GAAGQ,SAAS,CAC7E;EAED,MAAME,oBAAoB,GAAIC,KAAyB;IACnD,IAAIA,KAAK,KAAKH,SAAS,EAAE;MACrB,MAAMI,MAAM,GAAGrC,IAAI,CAACoC,KAAK,CAAC;MAE1B,IAAIC,MAAM,IAAI,CAACA,MAAM,CAAClC,QAAQ,EAAE;QAC5BmC,kBAAkB,CAACtB,QAAQ,CAACuB,OAAO,EAAEF,MAAM,CAAC1C,KAAK,EAAE,UAAU,CAAC;;;GAGzE;EAED,MAAM6C,eAAe,GAAIJ,KAAyB;IAC9C,IAAIA,KAAK,KAAKH,SAAS,EAAE;MACrB;;IAGJ,MAAMI,MAAM,GAAGrC,IAAI,CAACoC,KAAK,CAAC;;IAG1B,IAAIC,MAAM,CAAC1C,KAAK,KAAKA,KAAK,EAAE;MACxBwC,oBAAoB,CAACC,KAAK,CAAC;KAC9B,MAAM;;MAEHV,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;;GAEhD;;EAGDwB,SAAe,CAAC;IACZ,IAAIjB,YAAY,IAAI,CAACP,KAAK,EAAE;MACxBwC,oBAAoB,CAACD,iBAAiB,CAAClC,IAAI,EAAEE,YAAY,CAAC,CAAC;;GAElE,EAAE,CAACF,IAAI,CAAC,CAAC;;EAGVmB,SAAe,CAAC;IACZ,IAAIxB,KAAK,KAAKsC,SAAS,IAAItC,KAAK,KAAK8B,UAAU,EAAE;MAC7CC,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;;GAEhD,EAAE,CAACA,KAAK,CAAC,CAAC;EAEXwB,SAAe,CAAC;IACZ,IAAIP,QAAQ,EAAE;MACVrB,SAAS,CAAC;QACNqB,QAAQ,CAACa,UAAU,CAAC;OACvB,CAAC;;GAET,EAAE,CAACA,UAAU,CAAC,CAAC;;EAGhBN,SAAe,CAAC;;;IAGZ,MAAMsB,cAAc,GAAG9C,KAAK,KAAKsC,SAAS,IAAItC,KAAK,KAAK,IAAI,IAAI8B,UAAU,KAAK7B,MAAM,CAACD,KAAK,CAAC;IAE5F,IAAI8B,UAAU,IAAIzB,IAAI,CAAC0C,MAAM,IAAI,CAACD,cAAc,EAAE;MAC9CT,eAAe,CAAC,CAAC,CAAC;MAElB,IAAI,CAACX,IAAI,EAAE;QACPC,OAAO,CAAC,IAAI,CAAC;;KAEpB,MAAM;MACHA,OAAO,CAAC,KAAK,CAAC;;GAErB,EAAE,CAACG,UAAU,EAAEzB,IAAI,CAAC,CAAC;EAEtBmB,SAAe,CAAC;IACZ,IAAIE,IAAI,EAAE;MACNW,eAAe,CAACE,iBAAiB,CAAClC,IAAI,EAAEyB,UAAU,CAAC,IAAI,CAAC,CAAC;KAC5D,MAAM;MACHO,eAAe,CAACC,SAAS,CAAC;;GAEjC,EAAE,CAACZ,IAAI,CAAC,CAAC;;EAGV,MAAMsB,eAAe,GAAIC,KAAyC;IAC9DA,KAAK,CAACC,OAAO,EAAE;IAEf,IAAIzB,OAAO,CAACmB,OAAO,IAAIK,KAAK,CAACE,aAAa,KAAK1B,OAAO,CAACmB,OAAO,EAAE;MAC5DK,KAAK,CAACG,cAAc,EAAE;MACtB;;;IAIJ,IAAItC,QAAQ,IAAImC,KAAK,CAACI,MAAM,CAACrD,KAAK,KAAKC,MAAM,CAACD,KAAK,CAAC,EAAE;MAClD,MAAMsD,IAAI,GAAGC,WAAW,CAACtB,aAAa,EAAEgB,KAAK,CAACI,MAAM,CAACrD,KAAK,CAAC;MAC1DiD,KAAa,CAACO,MAAM,GAAGC,YAAY,CAACH,IAAI,CAAC;MAE1C,MAAMI,OAAO,GAAGC,gBAAgB,CAAC1B,aAAa,EAAEqB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEM,IAAI,CAAC;MAE3D,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,CAACX,MAAM,GAAG,CAAC,EAAE;QACvCE,KAAa,CAACO,MAAM,CAACE,OAAO,GAAGA,OAAO;;MAG3C5C,QAAQ,CAACmC,KAAK,CAAC;;IAGnB,IAAI9B,KAAK,CAAC0C,MAAM,EAAE;MACd1C,KAAK,CAAC0C,MAAM,CAACZ,KAAK,CAAC;;GAE1B;EAED,MAAMa,iBAAiB,GAAIb,KAA0C;IACjElB,aAAa,CAACkB,KAAK,CAACI,MAAM,CAACrD,KAAK,CAAC;GACpC;EAED,MAAM+D,gBAAgB,GAAId,KAAyC;IAC/D,IAAItC,MAAM,IAAK,CAACe,IAAI,IAAII,UAAU,IAAIzB,IAAI,CAAC0C,MAAO,EAAE;MAChDpB,OAAO,CAAC,IAAI,CAAC;;IAGjB,IAAIZ,OAAO,EAAE;MACTkC,KAAK,CAACC,OAAO,EAAE;MACfnC,OAAO,CAACkC,KAAK,CAAC;;GAErB;EAED,MAAMe,kBAAkB,GAAIf,KAA4C;IACpEA,KAAK,CAACC,OAAO,EAAE;IAEf,IAAI,CAACD,KAAK,CAACgB,OAAO,IAAI,CAAChB,KAAK,CAACiB,OAAO,EAAE;MAClC,QAAQjB,KAAK,CAACkB,GAAG;QACb,KAAK,WAAW;UAAE;YACd;;QAGJ,KAAK,QAAQ;UAAE;YACXlB,KAAK,CAACG,cAAc,EAAE;YACtBrB,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;YACzC2B,OAAO,CAAC,KAAK,CAAC;YACd;;QAGJ,KAAK,KAAK;QACV,KAAK,OAAO;UAAE;YACV,IAAIsB,KAAK,CAACkB,GAAG,KAAK,KAAK,EAAE;cACrBlB,KAAK,CAACG,cAAc,EAAE;;YAG1BP,eAAe,CAACT,YAAY,CAAC;YAC7BT,OAAO,CAAC,KAAK,CAAC;YACd;;QAGJ,KAAK,WAAW;UACZ,IAAID,IAAI,EAAE;YACNuB,KAAK,CAACG,cAAc,EAAE;WACzB,MAAM;YACH,IAAI,CAACzC,MAAM,IAAIY,SAAS,CAACqB,OAAO,EAAE;cAC9BrB,SAAS,CAACqB,OAAO,CAACwB,KAAK,EAAE;;;UAGjC;QAEJ,KAAK,SAAS;QACd,KAAK,MAAM;QACX,KAAK,KAAK;UAAE;YACR,IAAI1C,IAAI,EAAE;cACNuB,KAAK,CAACG,cAAc,EAAE;;YAE1B;;;;MAOR,IAAI3B,OAAO,CAACmB,OAAO,EAAE;QACjBnB,OAAO,CAACmB,OAAO,CAACyB,aAAa,CAACC,yBAAyB,CAACrB,KAAK,CAAC,CAAC;;MAGnE,IAAItC,MAAM,IAAI,CAACe,IAAI,EAAE;QACjB,IAAIuB,KAAK,CAACkB,GAAG,KAAK,SAAS,IAAIlB,KAAK,CAACkB,GAAG,KAAK,WAAW,EAAE;UACtDlB,KAAK,CAACG,cAAc,EAAE;UACtB,MAAMmB,YAAY,GAAGtB,KAAK,CAACkB,GAAG,KAAK,SAAS,GAAG9D,IAAI,CAAC0C,MAAM,GAAG,CAAC,GAAG,CAAC;UAClEV,eAAe,CAACD,YAAY,KAAKE,SAAS,GAAGF,YAAY,GAAGmC,YAAY,CAAC;UACzE5C,OAAO,CAAC,IAAI,CAAC;;;;IAKzB,IAAI,CAACsB,KAAK,CAACuB,kBAAkB,EAAE,IAAIxD,SAAS,EAAE;MAC1CiC,KAAK,CAACC,OAAO,EAAE;MACflC,SAAS,CAACiC,KAAK,CAAC;;GAEvB;EAED,MAAMwB,mBAAmB,GAAIhC,KAAa;IACtCJ,eAAe,CAACI,KAAK,CAAC;GACzB;EAED,MAAMiC,kBAAkB,GAAGA,CAACzB,KAAsC,EAAER,KAAa;IAC7EQ,KAAK,CAACG,cAAc,EAAE;IACtBP,eAAe,CAACJ,KAAK,CAAC;IACtBd,OAAO,CAAC,KAAK,CAAC;GACjB;EAED,MAAMgD,QAAQ,GAAG;IACb,eAAe,EAAEjD,IAAI;IACrB,WAAW,EAAEE,MAAM;IACnB,eAAe,EAAE,SAAkB;IACnCgD,IAAI,EAAE;GACT;EAED,MAAMC,KAAK,GAAG;IACV,GAAG1D,KAAK;IACR,eAAe,EAAES,MAAM;;;IAGvB,mBAAmB,EAAE,MAAe;;IAEpC,uBAAuB,EACnBQ,YAAY,KAAKE,SAAS,IAAIjC,IAAI,CAAC+B,YAAY,CAAC,GAAG0C,KAAK,CAAClD,MAAM,EAAE3B,MAAM,CAACI,IAAI,CAAC+B,YAAY,CAAC,CAACpC,KAAK,CAAC,CAAC,GAAGsC,SAAS;IAClH,iBAAiB,EAAElC,cAAc;IACjCI,QAAQ;IACRqD,MAAM,EAAE,CAACrD,QAAQ,IAAI,CAACU,QAAQ,GAAG8B,eAAe,GAAGV,SAAS;IAC5DxB,QAAQ,EAAE,CAACN,QAAQ,IAAI,CAACU,QAAQ,GAAG4C,iBAAiB,GAAGxB,SAAS;IAChEvB,OAAO,EAAE,CAACP,QAAQ,IAAI,CAACU,QAAQ,GAAG6C,gBAAgB,GAAGzB,SAAS;IAC9DtB,SAAS,EAAE,CAACR,QAAQ,IAAI,CAACU,QAAQ,GAAG8C,kBAAkB,GAAG1B,SAAS;IAClEpB,QAAQ;IACRE,GAAG,EAAEC,QAAQ;IACb0D,IAAI,EAAE,MAAM;IACZ/E,KAAK,EAAE8B,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI;GACxB;EAED,MAAMkD,IAAI,GAA+B;IACrC,iBAAiB,EAAE5E,cAAc;IACjCC,IAAI;IACJG,QAAQ;IACRC,EAAE,EAAEmB,MAAM;IACVd,QAAQ,EAAE2D,mBAAmB;IAC7B1D,OAAO,EAAE2D,kBAAkB;IAC3BtD,GAAG,EAAEK,OAAO;IACZwD,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,CAAC,CAAC;IACZlF,KAAK,EAAEoC;GACV;EAED,MAAM+C,MAAM,GAAG;IACX/D,GAAG,EAAEG;GACR;EAED,OAAO;IACHoD,QAAQ;IACRE,KAAK;IACLG,IAAI;IACJG,MAAM;IACNC,OAAO,EAAE;MACL1D,IAAI;MACJ2D,YAAY,EAAE1D;;GAGrB;AACL;;;;"}
|
1
|
+
{"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n setInputValueByRef,\n getIndexFromValue,\n findByValue,\n useFlattenedData,\n sanitizeItem,\n getOptionParents,\n filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n combobox: React.HTMLAttributes<HTMLSpanElement>;\n input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n list: ScrollableListPropsWithRef;\n button: { ref: any };\n popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data: unfilteredData = [],\n defaultValue,\n disabled,\n id: nativeId,\n inline,\n loading: __,\n onChange,\n onClick,\n onKeyDown,\n onSearch,\n readOnly,\n value,\n ...props\n }: Omit<ComboboxProps, 'dialog'>,\n ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n const inputRef = useMergedRef<HTMLInputElement>(ref);\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const listRef = React.useRef<HTMLUListElement>(null);\n const [open, setOpen] = React.useState(false);\n const listId = React.useMemo(() => uuid(), []);\n const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n const flattenedData = useFlattenedData(unfilteredData);\n const data = React.useMemo(\n () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n [shouldFilterData, inputValue, flattenedData]\n );\n // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n );\n\n const setInputValueByIndex = (index: number | undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value, 'focusout');\n }\n }\n };\n\n const setCurrentValue = (index: number | undefined) => {\n if (index === undefined) {\n return;\n }\n\n const option = data[index];\n\n // if the selected option is not already selected, trigger blur event\n if (option.value !== value) {\n setInputValueByIndex(index);\n } else {\n // if the selected option is already selected, refill input with its value\n setInputValue(convertToInputValue(value));\n }\n };\n\n // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n React.useEffect(() => {\n if (defaultValue && !value) {\n setInputValueByIndex(getIndexFromValue(data, defaultValue));\n }\n }, [data]);\n\n // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n React.useEffect(() => {\n if (value !== undefined && value !== inputValue) {\n setInputValue(convertToInputValue(value));\n }\n }, [value]);\n\n React.useEffect(() => {\n if (onSearch) {\n debouncer(() => {\n onSearch(inputValue);\n });\n }\n }, [inputValue]);\n\n // show listbox based on input value\n React.useEffect(() => {\n // don't show the popover if the internal (input) value already is the current value\n // this prevents the popover showing after selecting a value or pressing escape\n const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n if (inputValue && data.length && !isCurrentValue) {\n setCurrentIndex(0);\n\n if (!open) {\n setOpen(true);\n }\n } else {\n setOpen(false);\n }\n }, [inputValue, data]);\n\n React.useEffect(() => {\n if (open) {\n setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n } else {\n setCurrentIndex(undefined);\n }\n }, [open]);\n\n // event handlers\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (listRef.current && event.relatedTarget === listRef.current) {\n event.preventDefault();\n return;\n }\n\n // event.target.value is always a string so it is important to cast value to a string before checking the equality\n if (onChange && event.target.value !== String(value)) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const parents = getOptionParents(flattenedData, item?.path);\n\n if (parents !== null && parents.length > 0) {\n (event as any).detail.parents = parents;\n }\n\n onChange(event);\n }\n\n if (props.onBlur) {\n props.onBlur(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setInputValue(event.target.value);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n if (inline || (!open && inputValue && data.length)) {\n setOpen(true);\n }\n\n if (onClick) {\n event.persist();\n onClick(event);\n }\n };\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n event.persist();\n const insideTheTable = !!inputRef.current?.closest('table, [role=\"rowgroup\"]');\n\n if (!event.ctrlKey && !event.metaKey) {\n switch (event.key) {\n case 'Backspace': {\n return;\n }\n\n case 'Escape': {\n event.preventDefault();\n setInputValue(convertToInputValue(value));\n setOpen(false);\n return;\n }\n\n case 'Tab': {\n setCurrentValue(currentIndex);\n setOpen(false);\n return;\n }\n\n case 'Enter': {\n if (insideTheTable) {\n event.preventDefault();\n if (inline && !open) {\n setOpen(true);\n } else if (buttonRef.current && !open) {\n buttonRef.current.click();\n }\n }\n\n if (open) {\n setCurrentValue(currentIndex);\n setOpen(false);\n }\n\n return;\n }\n\n case 'ArrowDown':\n if (open) {\n event.preventDefault();\n } else {\n if (!inline && buttonRef.current && !insideTheTable) {\n buttonRef.current.click();\n }\n }\n break;\n\n case 'ArrowUp':\n case 'Home':\n case 'End': {\n if (open) {\n event.preventDefault();\n }\n break;\n }\n\n default:\n }\n\n // we aren't focused on the list, so manually forward the keydown event to it\n if (listRef.current) {\n listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n }\n\n if (inline && !open) {\n if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {\n event.preventDefault();\n const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n setOpen(true);\n }\n }\n }\n\n if (!event.isDefaultPrevented() && onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setCurrentIndex(index);\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n event.preventDefault();\n setCurrentValue(index);\n setOpen(false);\n };\n\n const combobox = {\n 'aria-expanded': open,\n 'aria-owns': listId,\n 'aria-haspopup': 'listbox' as const,\n role: 'combobox',\n };\n\n const input = {\n ...props,\n 'aria-controls': listId,\n // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n // are related to the string that is present in the textbox\n 'aria-autocomplete': 'list' as const,\n // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n 'aria-activedescendant':\n currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n 'aria-labelledby': ariaLabelledBy,\n disabled,\n onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n onChange: !disabled && !readOnly ? handleInputChange : undefined,\n onClick: !disabled && !readOnly ? handleInputClick : undefined,\n onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n readOnly,\n ref: inputRef,\n type: 'text',\n value: inputValue ?? '',\n };\n\n const list: ScrollableListPropsWithRef = {\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n id: listId,\n onChange: handleListboxChange,\n onClick: handleListboxClick,\n ref: listRef,\n scrollOnFocus: false,\n tabIndex: -1,\n value: currentIndex,\n };\n\n const button = {\n ref: buttonRef,\n };\n\n return {\n combobox,\n input,\n list,\n button,\n popover: {\n open,\n onOpenChange: setOpen,\n //visible: !data.length ? false : open,\n },\n };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","insideTheTable","_inputRef$current","closest","ctrlKey","metaKey","key","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":";;;;;;;;AAkBA,MAAMA,SAAS,gBAAGC,QAAQ,CAACC,CAAC,IAAIA,CAAC,EAAE,EAAE,GAAG,CAAC;AAEzC,MAAMC,mBAAmB,GAAIC,KAA0C,IAAKC,MAAM,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;MAUlFE,WAAW,GAAGA,CACvB;EACI,YAAY,EAAEC,SAAS;EACvB,iBAAiB,EAAEC,cAAc;EACjCC,IAAI,EAAEC,cAAc,GAAG,EAAE;EACzBC,YAAY;EACZC,QAAQ;EACRC,EAAE,EAAEC,QAAQ;EACZC,MAAM;EACNC,OAAO,EAAEC,EAAE;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRlB,KAAK;EACL,GAAGmB;CACyB,EAChCC,GAAgC;EAEhC,MAAMC,QAAQ,GAAGC,YAAY,CAAmBF,GAAG,CAAC;EACpD,MAAMG,SAAS,GAAGC,MAAY,CAAoB,IAAI,CAAC;EACvD,MAAMC,OAAO,GAAGD,MAAY,CAAmB,IAAI,CAAC;EACpD,MAAM,CAACE,IAAI,EAAEC,OAAO,CAAC,GAAGH,QAAc,CAAC,KAAK,CAAC;EAC7C,MAAMI,MAAM,GAAGJ,OAAa,CAAC,MAAMK,EAAI,EAAE,EAAE,EAAE,CAAC;EAC9C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGP,QAAc,CAASzB,mBAAmB,CAACC,KAAK,CAAC,CAAC;EACtF,MAAMgC,gBAAgB,GAAG,CAACf,QAAQ,KAAK,CAACN,MAAM,IAAKA,MAAM,IAAImB,UAAU,KAAK/B,mBAAmB,CAACC,KAAK,CAAE,CAAC;EACxG,MAAMiC,aAAa,GAAGC,gBAAgB,CAAC5B,cAAc,CAAC;EACtD,MAAMD,IAAI,GAAGmB,OAAa,CACtB,MAAOQ,gBAAgB,GAAGG,UAAU,CAACF,aAAa,EAAEH,UAAU,CAAC,GAAGG,aAAc,EAChF,CAACD,gBAAgB,EAAEF,UAAU,EAAEG,aAAa,CAAC,CAChD;;EAED,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGb,QAAc,CAClDM,UAAU,KAAKQ,SAAS,GAAGC,iBAAiB,CAAClC,IAAI,EAAEyB,UAAU,CAAC,GAAGQ,SAAS,CAC7E;EAED,MAAME,oBAAoB,GAAIC,KAAyB;IACnD,IAAIA,KAAK,KAAKH,SAAS,EAAE;MACrB,MAAMI,MAAM,GAAGrC,IAAI,CAACoC,KAAK,CAAC;MAE1B,IAAIC,MAAM,IAAI,CAACA,MAAM,CAAClC,QAAQ,EAAE;QAC5BmC,kBAAkB,CAACtB,QAAQ,CAACuB,OAAO,EAAEF,MAAM,CAAC1C,KAAK,EAAE,UAAU,CAAC;;;GAGzE;EAED,MAAM6C,eAAe,GAAIJ,KAAyB;IAC9C,IAAIA,KAAK,KAAKH,SAAS,EAAE;MACrB;;IAGJ,MAAMI,MAAM,GAAGrC,IAAI,CAACoC,KAAK,CAAC;;IAG1B,IAAIC,MAAM,CAAC1C,KAAK,KAAKA,KAAK,EAAE;MACxBwC,oBAAoB,CAACC,KAAK,CAAC;KAC9B,MAAM;;MAEHV,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;;GAEhD;;EAGDwB,SAAe,CAAC;IACZ,IAAIjB,YAAY,IAAI,CAACP,KAAK,EAAE;MACxBwC,oBAAoB,CAACD,iBAAiB,CAAClC,IAAI,EAAEE,YAAY,CAAC,CAAC;;GAElE,EAAE,CAACF,IAAI,CAAC,CAAC;;EAGVmB,SAAe,CAAC;IACZ,IAAIxB,KAAK,KAAKsC,SAAS,IAAItC,KAAK,KAAK8B,UAAU,EAAE;MAC7CC,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;;GAEhD,EAAE,CAACA,KAAK,CAAC,CAAC;EAEXwB,SAAe,CAAC;IACZ,IAAIP,QAAQ,EAAE;MACVrB,SAAS,CAAC;QACNqB,QAAQ,CAACa,UAAU,CAAC;OACvB,CAAC;;GAET,EAAE,CAACA,UAAU,CAAC,CAAC;;EAGhBN,SAAe,CAAC;;;IAGZ,MAAMsB,cAAc,GAAG9C,KAAK,KAAKsC,SAAS,IAAItC,KAAK,KAAK,IAAI,IAAI8B,UAAU,KAAK7B,MAAM,CAACD,KAAK,CAAC;IAE5F,IAAI8B,UAAU,IAAIzB,IAAI,CAAC0C,MAAM,IAAI,CAACD,cAAc,EAAE;MAC9CT,eAAe,CAAC,CAAC,CAAC;MAElB,IAAI,CAACX,IAAI,EAAE;QACPC,OAAO,CAAC,IAAI,CAAC;;KAEpB,MAAM;MACHA,OAAO,CAAC,KAAK,CAAC;;GAErB,EAAE,CAACG,UAAU,EAAEzB,IAAI,CAAC,CAAC;EAEtBmB,SAAe,CAAC;IACZ,IAAIE,IAAI,EAAE;MACNW,eAAe,CAACE,iBAAiB,CAAClC,IAAI,EAAEyB,UAAU,CAAC,IAAI,CAAC,CAAC;KAC5D,MAAM;MACHO,eAAe,CAACC,SAAS,CAAC;;GAEjC,EAAE,CAACZ,IAAI,CAAC,CAAC;;EAGV,MAAMsB,eAAe,GAAIC,KAAyC;IAC9DA,KAAK,CAACC,OAAO,EAAE;IAEf,IAAIzB,OAAO,CAACmB,OAAO,IAAIK,KAAK,CAACE,aAAa,KAAK1B,OAAO,CAACmB,OAAO,EAAE;MAC5DK,KAAK,CAACG,cAAc,EAAE;MACtB;;;IAIJ,IAAItC,QAAQ,IAAImC,KAAK,CAACI,MAAM,CAACrD,KAAK,KAAKC,MAAM,CAACD,KAAK,CAAC,EAAE;MAClD,MAAMsD,IAAI,GAAGC,WAAW,CAACtB,aAAa,EAAEgB,KAAK,CAACI,MAAM,CAACrD,KAAK,CAAC;MAC1DiD,KAAa,CAACO,MAAM,GAAGC,YAAY,CAACH,IAAI,CAAC;MAE1C,MAAMI,OAAO,GAAGC,gBAAgB,CAAC1B,aAAa,EAAEqB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEM,IAAI,CAAC;MAE3D,IAAIF,OAAO,KAAK,IAAI,IAAIA,OAAO,CAACX,MAAM,GAAG,CAAC,EAAE;QACvCE,KAAa,CAACO,MAAM,CAACE,OAAO,GAAGA,OAAO;;MAG3C5C,QAAQ,CAACmC,KAAK,CAAC;;IAGnB,IAAI9B,KAAK,CAAC0C,MAAM,EAAE;MACd1C,KAAK,CAAC0C,MAAM,CAACZ,KAAK,CAAC;;GAE1B;EAED,MAAMa,iBAAiB,GAAIb,KAA0C;IACjElB,aAAa,CAACkB,KAAK,CAACI,MAAM,CAACrD,KAAK,CAAC;GACpC;EAED,MAAM+D,gBAAgB,GAAId,KAAyC;IAC/D,IAAItC,MAAM,IAAK,CAACe,IAAI,IAAII,UAAU,IAAIzB,IAAI,CAAC0C,MAAO,EAAE;MAChDpB,OAAO,CAAC,IAAI,CAAC;;IAGjB,IAAIZ,OAAO,EAAE;MACTkC,KAAK,CAACC,OAAO,EAAE;MACfnC,OAAO,CAACkC,KAAK,CAAC;;GAErB;EAED,MAAMe,kBAAkB,GAAIf,KAA4C;;IACpEA,KAAK,CAACC,OAAO,EAAE;IACf,MAAMe,cAAc,GAAG,CAAC,GAAAC,iBAAA,GAAC7C,QAAQ,CAACuB,OAAO,cAAAsB,iBAAA,eAAhBA,iBAAA,CAAkBC,OAAO,CAAC,0BAA0B,CAAC;IAE9E,IAAI,CAAClB,KAAK,CAACmB,OAAO,IAAI,CAACnB,KAAK,CAACoB,OAAO,EAAE;MAClC,QAAQpB,KAAK,CAACqB,GAAG;QACb,KAAK,WAAW;UAAE;YACd;;QAGJ,KAAK,QAAQ;UAAE;YACXrB,KAAK,CAACG,cAAc,EAAE;YACtBrB,aAAa,CAAChC,mBAAmB,CAACC,KAAK,CAAC,CAAC;YACzC2B,OAAO,CAAC,KAAK,CAAC;YACd;;QAGJ,KAAK,KAAK;UAAE;YACRkB,eAAe,CAACT,YAAY,CAAC;YAC7BT,OAAO,CAAC,KAAK,CAAC;YACd;;QAGJ,KAAK,OAAO;UAAE;YACV,IAAIsC,cAAc,EAAE;cAChBhB,KAAK,CAACG,cAAc,EAAE;cACtB,IAAIzC,MAAM,IAAI,CAACe,IAAI,EAAE;gBACjBC,OAAO,CAAC,IAAI,CAAC;eAChB,MAAM,IAAIJ,SAAS,CAACqB,OAAO,IAAI,CAAClB,IAAI,EAAE;gBACnCH,SAAS,CAACqB,OAAO,CAAC2B,KAAK,EAAE;;;YAIjC,IAAI7C,IAAI,EAAE;cACNmB,eAAe,CAACT,YAAY,CAAC;cAC7BT,OAAO,CAAC,KAAK,CAAC;;YAGlB;;QAGJ,KAAK,WAAW;UACZ,IAAID,IAAI,EAAE;YACNuB,KAAK,CAACG,cAAc,EAAE;WACzB,MAAM;YACH,IAAI,CAACzC,MAAM,IAAIY,SAAS,CAACqB,OAAO,IAAI,CAACqB,cAAc,EAAE;cACjD1C,SAAS,CAACqB,OAAO,CAAC2B,KAAK,EAAE;;;UAGjC;QAEJ,KAAK,SAAS;QACd,KAAK,MAAM;QACX,KAAK,KAAK;UAAE;YACR,IAAI7C,IAAI,EAAE;cACNuB,KAAK,CAACG,cAAc,EAAE;;YAE1B;;;;MAOR,IAAI3B,OAAO,CAACmB,OAAO,EAAE;QACjBnB,OAAO,CAACmB,OAAO,CAAC4B,aAAa,CAACC,yBAAyB,CAACxB,KAAK,CAAC,CAAC;;MAGnE,IAAItC,MAAM,IAAI,CAACe,IAAI,EAAE;QACjB,IAAI,CAACuB,KAAK,CAACqB,GAAG,KAAK,SAAS,IAAIrB,KAAK,CAACqB,GAAG,KAAK,WAAW,KAAK,CAACL,cAAc,EAAE;UAC3EhB,KAAK,CAACG,cAAc,EAAE;UACtB,MAAMsB,YAAY,GAAGzB,KAAK,CAACqB,GAAG,KAAK,SAAS,GAAGjE,IAAI,CAAC0C,MAAM,GAAG,CAAC,GAAG,CAAC;UAClEV,eAAe,CAACD,YAAY,KAAKE,SAAS,GAAGF,YAAY,GAAGsC,YAAY,CAAC;UACzE/C,OAAO,CAAC,IAAI,CAAC;;;;IAKzB,IAAI,CAACsB,KAAK,CAAC0B,kBAAkB,EAAE,IAAI3D,SAAS,EAAE;MAC1CiC,KAAK,CAACC,OAAO,EAAE;MACflC,SAAS,CAACiC,KAAK,CAAC;;GAEvB;EAED,MAAM2B,mBAAmB,GAAInC,KAAa;IACtCJ,eAAe,CAACI,KAAK,CAAC;GACzB;EAED,MAAMoC,kBAAkB,GAAGA,CAAC5B,KAAsC,EAAER,KAAa;IAC7EQ,KAAK,CAACG,cAAc,EAAE;IACtBP,eAAe,CAACJ,KAAK,CAAC;IACtBd,OAAO,CAAC,KAAK,CAAC;GACjB;EAED,MAAMmD,QAAQ,GAAG;IACb,eAAe,EAAEpD,IAAI;IACrB,WAAW,EAAEE,MAAM;IACnB,eAAe,EAAE,SAAkB;IACnCmD,IAAI,EAAE;GACT;EAED,MAAMC,KAAK,GAAG;IACV,GAAG7D,KAAK;IACR,eAAe,EAAES,MAAM;;;IAGvB,mBAAmB,EAAE,MAAe;;IAEpC,uBAAuB,EACnBQ,YAAY,KAAKE,SAAS,IAAIjC,IAAI,CAAC+B,YAAY,CAAC,GAAG6C,KAAK,CAACrD,MAAM,EAAE3B,MAAM,CAACI,IAAI,CAAC+B,YAAY,CAAC,CAACpC,KAAK,CAAC,CAAC,GAAGsC,SAAS;IAClH,iBAAiB,EAAElC,cAAc;IACjCI,QAAQ;IACRqD,MAAM,EAAE,CAACrD,QAAQ,IAAI,CAACU,QAAQ,GAAG8B,eAAe,GAAGV,SAAS;IAC5DxB,QAAQ,EAAE,CAACN,QAAQ,IAAI,CAACU,QAAQ,GAAG4C,iBAAiB,GAAGxB,SAAS;IAChEvB,OAAO,EAAE,CAACP,QAAQ,IAAI,CAACU,QAAQ,GAAG6C,gBAAgB,GAAGzB,SAAS;IAC9DtB,SAAS,EAAE,CAACR,QAAQ,IAAI,CAACU,QAAQ,GAAG8C,kBAAkB,GAAG1B,SAAS;IAClEpB,QAAQ;IACRE,GAAG,EAAEC,QAAQ;IACb6D,IAAI,EAAE,MAAM;IACZlF,KAAK,EAAE8B,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI;GACxB;EAED,MAAMqD,IAAI,GAA+B;IACrC,iBAAiB,EAAE/E,cAAc;IACjCC,IAAI;IACJG,QAAQ;IACRC,EAAE,EAAEmB,MAAM;IACVd,QAAQ,EAAE8D,mBAAmB;IAC7B7D,OAAO,EAAE8D,kBAAkB;IAC3BzD,GAAG,EAAEK,OAAO;IACZ2D,aAAa,EAAE,KAAK;IACpBC,QAAQ,EAAE,CAAC,CAAC;IACZrF,KAAK,EAAEoC;GACV;EAED,MAAMkD,MAAM,GAAG;IACXlE,GAAG,EAAEG;GACR;EAED,OAAO;IACHuD,QAAQ;IACRE,KAAK;IACLG,IAAI;IACJG,MAAM;IACNC,OAAO,EAAE;MACL7D,IAAI;MACJ8D,YAAY,EAAE7D;;GAGrB;AACL;;;;"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
|
3
|
-
import {
|
3
|
+
import { HEADER_FOOTER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES } from '../util/rows.js';
|
4
4
|
import { Row } from '../components/Row/Row.js';
|
5
5
|
|
6
6
|
const TABLE_SCROLL_PADDING_BOTTOM = 36;
|
@@ -9,8 +9,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
9
9
|
var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
|
10
10
|
const tableMeta = table.options.meta;
|
11
11
|
const rows = table.getRowModel().rows;
|
12
|
-
const HEADER_OFFSET_TOTAL =
|
12
|
+
const HEADER_OFFSET_TOTAL = HEADER_FOOTER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
|
13
13
|
const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
|
14
|
+
const FOOTER_OFFSET_TOTAL = tableMeta.footer.isEnabled ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : 0;
|
14
15
|
// expanded rows
|
15
16
|
const {
|
16
17
|
createRowMeasurer,
|
@@ -24,7 +25,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
24
25
|
getScrollElement: () => tableRef.current,
|
25
26
|
overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
|
26
27
|
rangeExtractor,
|
27
|
-
scrollPaddingStart: isTableGrouped ?
|
28
|
+
scrollPaddingStart: isTableGrouped ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : undefined,
|
28
29
|
scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
|
29
30
|
paddingEnd: TABLE_PADDING_BOTTOM
|
30
31
|
});
|
@@ -77,7 +78,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
77
78
|
let content = null;
|
78
79
|
if (rows.length) {
|
79
80
|
style = {
|
80
|
-
height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL}px`,
|
81
|
+
height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL + FOOTER_OFFSET_TOTAL}px`,
|
81
82
|
paddingBottom,
|
82
83
|
paddingTop
|
83
84
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { HEADER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nconst TABLE_SCROLL_PADDING_BOTTOM = 36;\nconst TABLE_PADDING_BOTTOM = 0;\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;\n const isTableGrouped = !!table.getState().grouping?.length;\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n scrollPaddingStart: isTableGrouped ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,\n scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,\n paddingEnd: TABLE_PADDING_BOTTOM,\n });\n\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index >= virtualItems.length - 1) {\n // scrolling to the last row isn't easy when rows have dynamic height\n // because you don't know all the heights until they render...\n // so when you skip to the last you don't know if \"the end\" is actually the end\n virtualiser.scrollToIndex(index, notSmooth);\n\n // https://github.com/TanStack/virtual/issues/216\n setTimeout(() => {\n virtualiser.scrollToIndex(index, notSmooth);\n\n setTimeout(() => {\n virtualiser.scrollToIndex(index, notSmooth);\n }, 150);\n }, 150);\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableGrouped && rows.length > 1 ? 1 : 0;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n Math.max(\n 0,\n virtualItems[paddingStartIndex]?.start -\n virtualiser.options.scrollMargin -\n virtualItems[paddingStartIndex]?.size ?? 0\n ),\n Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1]?.end ?? 0),\n ]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL}px`,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["TABLE_SCROLL_PADDING_BOTTOM","TABLE_PADDING_BOTTOM","useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","HEADER_OFFSET_TOTAL","HEADER_ROW_HEIGHT_ESTIMATE","getHeaderGroups","length","isTableGrouped","_table$getState$group","getState","grouping","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollPaddingStart","scrollPaddingEnd","paddingEnd","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","setTimeout","paddingStartIndex","paddingTop","paddingBottom","Math","max","_ref","_virtualItems$padding","start","scrollMargin","_virtualItems$padding2","size","_ref2","getTotalSize","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","ROW_HEIGHT_ESTIMATES","medium","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { HEADER_FOOTER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nconst TABLE_SCROLL_PADDING_BOTTOM = 36;\nconst TABLE_PADDING_BOTTOM = 0;\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const HEADER_OFFSET_TOTAL = HEADER_FOOTER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;\n const isTableGrouped = !!table.getState().grouping?.length;\n const FOOTER_OFFSET_TOTAL = tableMeta.footer.isEnabled ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : 0;\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n scrollPaddingStart: isTableGrouped ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : undefined,\n scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,\n paddingEnd: TABLE_PADDING_BOTTOM,\n });\n\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index >= virtualItems.length - 1) {\n // scrolling to the last row isn't easy when rows have dynamic height\n // because you don't know all the heights until they render...\n // so when you skip to the last you don't know if \"the end\" is actually the end\n virtualiser.scrollToIndex(index, notSmooth);\n\n // https://github.com/TanStack/virtual/issues/216\n setTimeout(() => {\n virtualiser.scrollToIndex(index, notSmooth);\n\n setTimeout(() => {\n virtualiser.scrollToIndex(index, notSmooth);\n }, 150);\n }, 150);\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableGrouped && rows.length > 1 ? 1 : 0;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n Math.max(\n 0,\n virtualItems[paddingStartIndex]?.start -\n virtualiser.options.scrollMargin -\n virtualItems[paddingStartIndex]?.size ?? 0\n ),\n Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1]?.end ?? 0),\n ]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL + FOOTER_OFFSET_TOTAL}px`,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["TABLE_SCROLL_PADDING_BOTTOM","TABLE_PADDING_BOTTOM","useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","HEADER_OFFSET_TOTAL","HEADER_FOOTER_ROW_HEIGHT_ESTIMATE","getHeaderGroups","length","isTableGrouped","_table$getState$group","getState","grouping","FOOTER_OFFSET_TOTAL","footer","isEnabled","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollPaddingStart","scrollPaddingEnd","paddingEnd","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","setTimeout","paddingStartIndex","paddingTop","paddingBottom","Math","max","_ref","_virtualItems$padding","start","scrollMargin","_virtualItems$padding2","size","_ref2","getTotalSize","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","ROW_HEIGHT_ESTIMATES","medium","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
@@ -4,7 +4,7 @@ const ROW_HEIGHT_ESTIMATES = {
|
|
4
4
|
tall: 49,
|
5
5
|
'extra-tall': 57
|
6
6
|
};
|
7
|
-
const
|
7
|
+
const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
|
8
8
|
|
9
|
-
export {
|
9
|
+
export { HEADER_FOOTER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES };
|
10
10
|
//# sourceMappingURL=rows.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"rows.js","sources":["../../../../../../../../../src/primitives/Table/Core/util/rows.ts"],"sourcesContent":["export const ROW_HEIGHT_ESTIMATES = {\n short: 33,\n medium: 41,\n tall: 49,\n 'extra-tall': 57,\n};\n\nexport const
|
1
|
+
{"version":3,"file":"rows.js","sources":["../../../../../../../../../src/primitives/Table/Core/util/rows.ts"],"sourcesContent":["export const ROW_HEIGHT_ESTIMATES = {\n short: 33,\n medium: 41,\n tall: 49,\n 'extra-tall': 57,\n};\n\nexport const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border\n"],"names":["ROW_HEIGHT_ESTIMATES","short","medium","tall","HEADER_FOOTER_ROW_HEIGHT_ESTIMATE"],"mappings":"MAAaA,oBAAoB,GAAG;EAChCC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACR,YAAY,EAAE;;MAGLC,iCAAiC,GAAGJ,oBAAoB,CAACE,MAAM,GAAG,EAAE;;;;"}
|
package/dist/index.css
CHANGED
@@ -992,7 +992,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'
|
|
992
992
|
}
|
993
993
|
|
994
994
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
|
995
|
-
@apply !-mr-[19px] !h-10 !w-10;
|
995
|
+
@apply z-10 !-mr-[19px] !h-10 !w-10;
|
996
996
|
}
|
997
997
|
|
998
998
|
table[data-taco^='table'][data-table-font-size='large']
|
@@ -5823,7 +5823,9 @@ const useCombobox = ({
|
|
5823
5823
|
}
|
5824
5824
|
};
|
5825
5825
|
const handleInputKeyDown = event => {
|
5826
|
+
var _inputRef$current;
|
5826
5827
|
event.persist();
|
5828
|
+
const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
|
5827
5829
|
if (!event.ctrlKey && !event.metaKey) {
|
5828
5830
|
switch (event.key) {
|
5829
5831
|
case 'Backspace':
|
@@ -5838,20 +5840,32 @@ const useCombobox = ({
|
|
5838
5840
|
return;
|
5839
5841
|
}
|
5840
5842
|
case 'Tab':
|
5843
|
+
{
|
5844
|
+
setCurrentValue(currentIndex);
|
5845
|
+
setOpen(false);
|
5846
|
+
return;
|
5847
|
+
}
|
5841
5848
|
case 'Enter':
|
5842
5849
|
{
|
5843
|
-
if (
|
5850
|
+
if (insideTheTable) {
|
5844
5851
|
event.preventDefault();
|
5852
|
+
if (inline && !open) {
|
5853
|
+
setOpen(true);
|
5854
|
+
} else if (buttonRef.current && !open) {
|
5855
|
+
buttonRef.current.click();
|
5856
|
+
}
|
5857
|
+
}
|
5858
|
+
if (open) {
|
5859
|
+
setCurrentValue(currentIndex);
|
5860
|
+
setOpen(false);
|
5845
5861
|
}
|
5846
|
-
setCurrentValue(currentIndex);
|
5847
|
-
setOpen(false);
|
5848
5862
|
return;
|
5849
5863
|
}
|
5850
5864
|
case 'ArrowDown':
|
5851
5865
|
if (open) {
|
5852
5866
|
event.preventDefault();
|
5853
5867
|
} else {
|
5854
|
-
if (!inline && buttonRef.current) {
|
5868
|
+
if (!inline && buttonRef.current && !insideTheTable) {
|
5855
5869
|
buttonRef.current.click();
|
5856
5870
|
}
|
5857
5871
|
}
|
@@ -5871,7 +5885,7 @@ const useCombobox = ({
|
|
5871
5885
|
listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
|
5872
5886
|
}
|
5873
5887
|
if (inline && !open) {
|
5874
|
-
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
5888
|
+
if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
|
5875
5889
|
event.preventDefault();
|
5876
5890
|
const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
|
5877
5891
|
setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
|
@@ -11485,7 +11499,7 @@ const ROW_HEIGHT_ESTIMATES = {
|
|
11485
11499
|
tall: 49,
|
11486
11500
|
'extra-tall': 57
|
11487
11501
|
};
|
11488
|
-
const
|
11502
|
+
const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
|
11489
11503
|
|
11490
11504
|
function SkeletonRow(props) {
|
11491
11505
|
const {
|
@@ -11581,8 +11595,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
11581
11595
|
var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
|
11582
11596
|
const tableMeta = table.options.meta;
|
11583
11597
|
const rows = table.getRowModel().rows;
|
11584
|
-
const HEADER_OFFSET_TOTAL =
|
11598
|
+
const HEADER_OFFSET_TOTAL = HEADER_FOOTER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
|
11585
11599
|
const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
|
11600
|
+
const FOOTER_OFFSET_TOTAL = tableMeta.footer.isEnabled ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : 0;
|
11586
11601
|
// expanded rows
|
11587
11602
|
const {
|
11588
11603
|
createRowMeasurer,
|
@@ -11596,7 +11611,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
11596
11611
|
getScrollElement: () => tableRef.current,
|
11597
11612
|
overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
|
11598
11613
|
rangeExtractor,
|
11599
|
-
scrollPaddingStart: isTableGrouped ?
|
11614
|
+
scrollPaddingStart: isTableGrouped ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : undefined,
|
11600
11615
|
scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
|
11601
11616
|
paddingEnd: TABLE_PADDING_BOTTOM
|
11602
11617
|
});
|
@@ -11649,7 +11664,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
11649
11664
|
let content = null;
|
11650
11665
|
if (rows.length) {
|
11651
11666
|
style = {
|
11652
|
-
height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL}px`,
|
11667
|
+
height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL + FOOTER_OFFSET_TOTAL}px`,
|
11653
11668
|
paddingBottom,
|
11654
11669
|
paddingTop
|
11655
11670
|
};
|