@economic/taco 2.8.0 → 2.8.1

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js

@@ -30,12 +30,6 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
   const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
-  const handleKeydown = event => {
-    const isInsideEditingCell = !!event.target.closest('[role="cell"]');
-    if (!isInsideEditingCell && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
-      event.stopPropagation();
-    }
-  };
   return /*#__PURE__*/createElement("span", {
     className: className,
     "data-taco": "combobox",
@@ -45,8 +39,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     ref: internalRef
   }, /*#__PURE__*/createElement("div", Object.assign({}, combobox, {
     className: "inline w-full",
-    ref: ref,
-    onKeyDown: handleKeydown
+    ref: ref
   }), /*#__PURE__*/createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
     button: props.inline ? /*#__PURE__*/createElement(IconButton

package/dist/esm/packages/taco/src/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    const handleKeydown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        const isInsideEditingCell = !!(event.target as Element).closest('[role=\"cell\"]');\n\n        if (!isInsideEditingCell && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    {/* Attaching keydown on div instead of Input because adding keydown handler on Input stops modal\n                    from opening when arrow keys are pressed. */}\n                    <div {...combobox} className=\"inline w-full\" ref={ref} onKeyDown={handleKeydown}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","handleKeydown","event","isInsideEditingCell","target","closest","key","stopPropagation","PopoverPrimitive","asChild","onKeyDown","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","_input$ref$current2","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACmB,MAAM,gBACRpB,cAACyB;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBvB,SAAS,EAAC,uEAAuE;MACjFwB,IAAI,EAAEhB,OAAO,CAACiB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLlB,OAAO,CAACmB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAArB,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,GACF7B,MAAM,gBACNL,cAACyB,UAAU;oBACKV,KAAK,CAACP,QAAQ,CAAC2B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEnC,KAAK,CAACoC,QAAQ,IAAIpC,KAAK,CAACmC,QAAQ;MAC1C/B,MAAM,EAAEA,MAAM;MACdiC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAA/B,KAAK,CAACR,GAAG,CAAC8B,OAAO,cAAAS,mBAAA,uBAAjBA,mBAAA,CAAmBR,KAAK,EAAE;OAC7B;MACD/B,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfgC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEpB,KAAK,CAACP,QAAQ,CAAC2B;MAC1B,GACFO;KAEV,CACA,CACgB,eAC1B1C,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEL,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDK,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5Cd,QAAQ,EAAEvB,OAAO,CAACiB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table/hooks/useTableKeyboardNavigation.js

@@ -16,9 +16,9 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
     }
   });
   const onKeyDown = event => {
-    var _document$activeEleme;
+    var _document$activeEleme, _document$activeEleme2;
     const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
-    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body) {
+    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body && ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.getAttribute('role')) !== 'dialog') {
       return;
     }
     // abort key handling if other elements inside table are focused and we don't use global keyboard navigation

package/dist/esm/packages/taco/src/components/Table/hooks/useTableKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableKeyboardNavigation.js","sources":["../../../../../../../../src/components/Table/hooks/useTableKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { getNextIndexFromKey } from '../../../utils/hooks/useListKeyboardNavigation';\nimport { sanitizeRowProps } from '../util';\nimport { TableProps } from '../types';\n\nexport const useTableKeyboardNavigation = <T extends {}>(\n    props: TableProps<T>,\n    rows: any[],\n    rowProps: any,\n    ref: React.RefObject<HTMLDivElement>\n): [\n    number | undefined,\n    (index: number) => void,\n    (event: React.KeyboardEvent<HTMLElement>) => void,\n    (event: React.FocusEvent<HTMLElement>) => void\n] => {\n    const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;\n\n    const [activeIndex, setActiveIndex] = useControllableState<number | undefined>({\n        prop: props.activeIndex,\n        defaultProp:\n            props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,\n        onChange: index => {\n            if (index !== undefined) {\n                props.onChangeActiveIndex?.(index);\n            }\n        },\n    });\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n        const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;\n\n        if (\n            useGlobalKeyboardNavigation &&\n            document.activeElement !== ref.current &&\n            document.activeElement?.getAttribute('type') !== 'search' &&\n            document.activeElement !== document.body\n        ) {\n            return;\n        }\n        // abort key handling if other elements inside table are focused and we don't use global keyboard navigation\n        if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {\n            return;\n        }\n\n        if (activeIndex !== undefined) {\n            const currentRow = rows[activeIndex];\n\n            if (currentRow) {\n                const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);\n\n                if (rowProps.onRowClick && event.key === 'Enter') {\n                    event.preventDefault();\n                    rowProps.onRowClick(sanitizedRow);\n                    return;\n                }\n\n                if (currentRow.toggleRowSelected && event.key === ' ') {\n                    event.preventDefault();\n                    currentRow.toggleRowSelected();\n                    return;\n                }\n\n                if (currentRow.toggleRowExpanded) {\n                    if (currentRow.isExpanded && event.key === 'ArrowLeft') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    }\n                }\n\n                // inline editing\n                if (currentRow.toggleRowEditing) {\n                    if (currentRow.canEdit && !currentRow.isEditing) {\n                        if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {\n                            event.preventDefault();\n\n                            if (!currentRow.isExpanded) {\n                                currentRow.toggleRowExpanded();\n                            }\n\n                            rowProps.onRowCreate(sanitizedRow, event);\n                            return;\n                        }\n\n                        if (event.key === 'e') {\n                            event.preventDefault();\n                            currentRow.toggleRowEditing();\n                            return;\n                        }\n                    }\n                }\n\n                if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowEdit(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowCopy(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowDelete(sanitizedRow, event);\n                    return;\n                }\n            }\n        }\n\n        const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);\n\n        if (nextIndex !== undefined) {\n            event.preventDefault();\n            setActiveIndex(nextIndex);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        if (!useGlobalKeyboardNavigation) {\n            onKeyDown(event.nativeEvent);\n        }\n    };\n\n    React.useEffect(() => {\n        if (useGlobalKeyboardNavigation) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n\n        return () => {\n            if (useGlobalKeyboardNavigation) {\n                window.removeEventListener('keydown', onKeyDown);\n            }\n        };\n    }, [onKeyDown]);\n\n    const handleFocus = (): void => {\n        if (activeIndex === undefined && rows.length) {\n            setActiveIndex(0);\n        }\n    };\n\n    return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];\n};\n"],"names":["useTableKeyboardNavigation","props","rows","rowProps","ref","useGlobalKeyboardNavigation","dangerouslyHijackGlobalKeyboardNavigation","activeIndex","setActiveIndex","useControllableState","prop","defaultProp","defaultActiveIndex","undefined","onChange","index","_props$onChangeActive","onChangeActiveIndex","call","onKeyDown","event","isModifierKeyPressed","metaKey","ctrlKey","altKey","shiftKey","document","activeElement","current","_document$activeEleme","getAttribute","body","currentRow","sanitizedRow","sanitizeRowProps","rowExpansionRenderer","onRowClick","key","preventDefault","toggleRowSelected","toggleRowExpanded","isExpanded","toggleRowEditing","canEdit","isEditing","onRowCreate","onRowEdit","onRowCopy","onRowDelete","nextIndex","getNextIndexFromKey","length","handleKeyDown","nativeEvent","React","useEffect","window","addEventListener","removeEventListener","handleFocus"],"mappings":"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"}
+{"version":3,"file":"useTableKeyboardNavigation.js","sources":["../../../../../../../../src/components/Table/hooks/useTableKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { getNextIndexFromKey } from '../../../utils/hooks/useListKeyboardNavigation';\nimport { sanitizeRowProps } from '../util';\nimport { TableProps } from '../types';\n\nexport const useTableKeyboardNavigation = <T extends {}>(\n    props: TableProps<T>,\n    rows: any[],\n    rowProps: any,\n    ref: React.RefObject<HTMLDivElement>\n): [\n    number | undefined,\n    (index: number) => void,\n    (event: React.KeyboardEvent<HTMLElement>) => void,\n    (event: React.FocusEvent<HTMLElement>) => void\n] => {\n    const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;\n\n    const [activeIndex, setActiveIndex] = useControllableState<number | undefined>({\n        prop: props.activeIndex,\n        defaultProp:\n            props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,\n        onChange: index => {\n            if (index !== undefined) {\n                props.onChangeActiveIndex?.(index);\n            }\n        },\n    });\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n        const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;\n\n        if (\n            useGlobalKeyboardNavigation &&\n            document.activeElement !== ref.current &&\n            document.activeElement?.getAttribute('type') !== 'search' &&\n            document.activeElement !== document.body &&\n            document.activeElement?.getAttribute('role') !== 'dialog'\n        ) {\n            return;\n        }\n        // abort key handling if other elements inside table are focused and we don't use global keyboard navigation\n        if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {\n            return;\n        }\n\n        if (activeIndex !== undefined) {\n            const currentRow = rows[activeIndex];\n\n            if (currentRow) {\n                const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);\n\n                if (rowProps.onRowClick && event.key === 'Enter') {\n                    event.preventDefault();\n                    rowProps.onRowClick(sanitizedRow);\n                    return;\n                }\n\n                if (currentRow.toggleRowSelected && event.key === ' ') {\n                    event.preventDefault();\n                    currentRow.toggleRowSelected();\n                    return;\n                }\n\n                if (currentRow.toggleRowExpanded) {\n                    if (currentRow.isExpanded && event.key === 'ArrowLeft') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    }\n                }\n\n                // inline editing\n                if (currentRow.toggleRowEditing) {\n                    if (currentRow.canEdit && !currentRow.isEditing) {\n                        if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {\n                            event.preventDefault();\n\n                            if (!currentRow.isExpanded) {\n                                currentRow.toggleRowExpanded();\n                            }\n\n                            rowProps.onRowCreate(sanitizedRow, event);\n                            return;\n                        }\n\n                        if (event.key === 'e') {\n                            event.preventDefault();\n                            currentRow.toggleRowEditing();\n                            return;\n                        }\n                    }\n                }\n\n                if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowEdit(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowCopy(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowDelete(sanitizedRow, event);\n                    return;\n                }\n            }\n        }\n\n        const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);\n\n        if (nextIndex !== undefined) {\n            event.preventDefault();\n            setActiveIndex(nextIndex);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        if (!useGlobalKeyboardNavigation) {\n            onKeyDown(event.nativeEvent);\n        }\n    };\n\n    React.useEffect(() => {\n        if (useGlobalKeyboardNavigation) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n\n        return () => {\n            if (useGlobalKeyboardNavigation) {\n                window.removeEventListener('keydown', onKeyDown);\n            }\n        };\n    }, [onKeyDown]);\n\n    const handleFocus = (): void => {\n        if (activeIndex === undefined && rows.length) {\n            setActiveIndex(0);\n        }\n    };\n\n    return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];\n};\n"],"names":["useTableKeyboardNavigation","props","rows","rowProps","ref","useGlobalKeyboardNavigation","dangerouslyHijackGlobalKeyboardNavigation","activeIndex","setActiveIndex","useControllableState","prop","defaultProp","defaultActiveIndex","undefined","onChange","index","_props$onChangeActive","onChangeActiveIndex","call","onKeyDown","event","isModifierKeyPressed","metaKey","ctrlKey","altKey","shiftKey","document","activeElement","current","_document$activeEleme","getAttribute","body","_document$activeEleme2","currentRow","sanitizedRow","sanitizeRowProps","rowExpansionRenderer","onRowClick","key","preventDefault","toggleRowSelected","toggleRowExpanded","isExpanded","toggleRowEditing","canEdit","isEditing","onRowCreate","onRowEdit","onRowCopy","onRowDelete","nextIndex","getNextIndexFromKey","length","handleKeyDown","nativeEvent","React","useEffect","window","addEventListener","removeEventListener","handleFocus"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/Table3.js

@@ -45,9 +45,12 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
-      const dialog = document.querySelector('[role="dialog"]');
-      // Don't trigger global shortcuts on the table if it is outside of the dialog
-      if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      const target = event.target;
+      const dialog = target.closest('[role="dialog"]');
+      const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
+      // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
+      // outside the dialog
+      if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
         return;
       }
       tableMeta.hoverState.handleKeyDown(event);

package/dist/esm/packages/taco/src/components/Table3/Table3.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props);\n    useTableRefInstanceSetup(table, internalRef);\n\n    React.useEffect(() => {\n        if (props.autoFocus) {\n            internalRef.current?.focus();\n        }\n    }, []);\n\n    const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const dialog = document.querySelector('[role=\"dialog\"]');\n\n                // Don't trigger global shortcuts on the table if it is outside of the dialog\n                if (dialog && !dialog?.contains(internalRef.current)) {\n                    return;\n                }\n\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n                tableMeta.rowClick.handleKeyDown(event, table);\n                tableMeta.rowSelection.handleKeyDown(event, table);\n                tableMeta.editing.handleKeyDown(event);\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n        // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n        // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n        // scrollToIndex function.\n        [scrollToIndex, internalRef.current]\n    );\n\n    const handleBlur = (event: React.FocusEvent) => {\n        tableMeta.editing.handleBlur(event);\n    };\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    const { style: cssGridStyle } = useCssGrid<TType>(table);\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                scrollToIndex={scrollToIndex}\n            />\n            <div\n                className={className}\n                id={props.id}\n                data-font-size={tableMeta.fontSize.size}\n                data-editing={tableMeta.editing.isEditing}\n                data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n                data-pause-hover={tableMeta?.hoverState.isPaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map(header => (\n                                    <React.Fragment key={header.id}>\n                                        {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n                                    </React.Fragment>\n                                ))}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {table.getFooterGroups().map(footerGroup => (\n                                    <div className=\"contents\" key={footerGroup.id} role=\"row\">\n                                        {footerGroup.headers.map(footer => (\n                                            <React.Fragment key={footer.id}>\n                                                {flexRender(footer.column.columnDef.footer, footer.getContext())}\n                                            </React.Fragment>\n                                        ))}\n                                    </div>\n                                ))}\n                                {length ? (\n                                    <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n                                ) : null}\n                            </div>\n                        ) : null}\n                    </>\n                ) : (\n                    <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n                )}\n            </div>\n        </>\n    );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n    useTable3DataFetcher,\n    useTable3DataOptions,\n    useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsHandler,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3FontSize,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","dialog","document","querySelector","contains","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props);\n    useTableRefInstanceSetup(table, internalRef);\n\n    React.useEffect(() => {\n        if (props.autoFocus) {\n            internalRef.current?.focus();\n        }\n    }, []);\n\n    const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (eventOriginatedFromCombobox || (dialog && !dialog?.contains(internalRef.current))) {\n                    return;\n                }\n\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n                tableMeta.rowClick.handleKeyDown(event, table);\n                tableMeta.rowSelection.handleKeyDown(event, table);\n                tableMeta.editing.handleKeyDown(event);\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n        // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n        // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n        // scrollToIndex function.\n        [scrollToIndex, internalRef.current]\n    );\n\n    const handleBlur = (event: React.FocusEvent) => {\n        tableMeta.editing.handleBlur(event);\n    };\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    const { style: cssGridStyle } = useCssGrid<TType>(table);\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                scrollToIndex={scrollToIndex}\n            />\n            <div\n                className={className}\n                id={props.id}\n                data-font-size={tableMeta.fontSize.size}\n                data-editing={tableMeta.editing.isEditing}\n                data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n                data-pause-hover={tableMeta?.hoverState.isPaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map(header => (\n                                    <React.Fragment key={header.id}>\n                                        {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n                                    </React.Fragment>\n                                ))}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {table.getFooterGroups().map(footerGroup => (\n                                    <div className=\"contents\" key={footerGroup.id} role=\"row\">\n                                        {footerGroup.headers.map(footer => (\n                                            <React.Fragment key={footer.id}>\n                                                {flexRender(footer.column.columnDef.footer, footer.getContext())}\n                                            </React.Fragment>\n                                        ))}\n                                    </div>\n                                ))}\n                                {length ? (\n                                    <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n                                ) : null}\n                            </div>\n                        ) : null}\n                    </>\n                ) : (\n                    <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n                )}\n            </div>\n        </>\n    );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n    useTable3DataFetcher,\n    useTable3DataOptions,\n    useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsHandler,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3FontSize,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","target","dialog","closest","eventOriginatedFromCombobox","contains","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","document","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}

package/dist/taco.cjs.development.js

@@ -5688,12 +5688,6 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
-  const handleKeydown = event => {
-    const isInsideEditingCell = !!event.target.closest('[role="cell"]');
-    if (!isInsideEditingCell && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
-      event.stopPropagation();
-    }
-  };
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "combobox",
@@ -5703,8 +5697,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     ref: internalRef
   }, /*#__PURE__*/React.createElement("div", Object.assign({}, combobox, {
     className: "inline w-full",
-    ref: ref,
-    onKeyDown: handleKeydown
+    ref: ref
   }), /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
     button: props.inline ? /*#__PURE__*/React.createElement(IconButton
@@ -11288,9 +11281,9 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
     }
   });
   const onKeyDown = event => {
-    var _document$activeEleme;
+    var _document$activeEleme, _document$activeEleme2;
     const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
-    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body) {
+    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body && ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.getAttribute('role')) !== 'dialog') {
       return;
     }
     // abort key handling if other elements inside table are focused and we don't use global keyboard navigation
@@ -20850,9 +20843,12 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
-      const dialog = document.querySelector('[role="dialog"]');
-      // Don't trigger global shortcuts on the table if it is outside of the dialog
-      if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      const target = event.target;
+      const dialog = target.closest('[role="dialog"]');
+      const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
+      // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
+      // outside the dialog
+      if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
         return;
       }
       tableMeta.hoverState.handleKeyDown(event);