@economic/taco 2.45.0-alpha.20 → 2.45.0-alpha.26

package/dist/components/Banner/util.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { State } from '../../types';
 export declare const getBannerIcon: (type: State) => JSX.Element | null;

package/dist/components/Combobox/Combobox.d.ts

@@ -28,7 +28,7 @@ declare type ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'o
      * Suggestions will be calculated based on the input value.
      * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`
      */
-    onChange?: (value: ComboboxValue | undefined) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /** Handler called when the user enters a query **/
     onSearch?: (query: string) => void | Promise<void>;
     /** Value of the input in combobox */

package/dist/components/Pagination/PageNumbers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type PageNumberProps = {
     currentPageIndex: number;
     onClick: (pageIndex: number) => void;

package/dist/components/Table3/components/Columns/Cell/EditingDisplayCell.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';
 export declare const EditingDisplayCell: <TType = unknown>(props: TableCellRendererProps<TType>) => JSX.Element;

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

@@ -2,7 +2,7 @@ import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
 
 const Backdrop = /*#__PURE__*/forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute z-10', props.className);
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute', props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "backdrop",

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

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../../../../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute z-10',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;MAKaA,QAAQ,gBAAGC,UAAgB,CAAgC,SAASD,QAAQA,CAACE,KAAK,EAAEC,GAAG;EAChG,MAAMC,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjIH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOH,uCAASC,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACD,GAAG,EAAEA;KAAO;AAClF,CAAC;;;;"}
+{"version":3,"file":"Backdrop.js","sources":["../../../../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"backdrop\" ref={ref} />;\n});\n"],"names":["Backdrop","React","props","ref","className","cn"],"mappings":";;;MAKaA,QAAQ,gBAAGC,UAAgB,CAAgC,SAASD,QAAQA,CAACE,KAAK,EAAEC,GAAG;EAChG,MAAMC,SAAS,GAAGC,EAAE,CAChB,4HAA4H,EAC5HH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOH,uCAASC,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACD,GAAG,EAAEA;KAAO;AAClF,CAAC;;;;"}

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 'clsx';\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?: (value: ComboboxValue | undefined) => void;\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.readOnly ? undefined : 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","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","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,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,iBACrCpB,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,iBACNL,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,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;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\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.readOnly ? undefined : 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","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","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,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,iBACrCpB,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,iBACNL,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,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;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

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

@@ -5,7 +5,7 @@ import { v4 } from 'uuid';
 import debounce from 'lodash-es/debounce';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
-import { useFlattenedData, filterData, getIndexFromValue, findByValue, sanitizeItem } from '../Listbox/util.js';
+import { useFlattenedData, filterData, getIndexFromValue, setInputValueByRef, findByValue, sanitizeItem, getOptionParents } from '../Listbox/util.js';
 
 const debouncer = /*#__PURE__*/debounce(f => f(), 200);
 const convertToInputValue = value => String(value !== null && value !== void 0 ? value : '');
@@ -41,7 +41,7 @@ const useCombobox = ({
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        handleChange(option.value);
+        setInputValueByRef(inputRef.current, option.value, 'focusout');
       }
     }
   };
@@ -63,7 +63,7 @@ const useCombobox = ({
     if (defaultValue && !value) {
       setInputValueByIndex(getIndexFromValue(data, defaultValue));
     }
-  }, [defaultValue]);
+  }, [data]);
   // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
   useEffect(() => {
     if (value !== undefined && value !== inputValue) {
@@ -98,27 +98,22 @@ const useCombobox = ({
       setCurrentIndex(undefined);
     }
   }, [open]);
-  const handleChange = nextValue => {
-    //const event = createCustomEvent('change');
-    if (onChange && nextValue !== String(value)) {
-      const item = findByValue(flattenedData, nextValue);
-      const sanitizedItem = sanitizeItem(item);
-      onChange(sanitizedItem === null || sanitizedItem === void 0 ? void 0 : sanitizedItem.value);
-    }
-  };
   // event handlers
   const handleInputBlur = event => {
+    event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
     }
-    // listbox is open
-    if (currentIndex !== undefined) {
-      setCurrentValue(currentIndex);
-    } else if (inputValue !== value) {
-      handleChange(inputValue);
-    } else if (inputValue === '') {
-      handleChange(undefined);
+    const allowClearing = event.isTrusted && event.target.value === '';
+    if (onChange && (allowClearing || !event.isTrusted && event.target.value !== String(value))) {
+      const item = findByValue(flattenedData, event.target.value);
+      event.detail = sanitizeItem(item);
+      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
+      if (parents !== null && parents.length > 0) {
+        event.detail.parents = parents;
+      }
+      onChange(event);
     }
     if (props.onBlur) {
       props.onBlur(event);
@@ -132,10 +127,12 @@ const useCombobox = ({
       setOpen(true);
     }
     if (onClick) {
+      event.persist();
       onClick(event);
     }
   };
   const handleInputKeyDown = event => {
+    event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -151,6 +148,7 @@ const useCombobox = ({
           }
         case 'Tab':
           {
+            setCurrentValue(currentIndex);
             setOpen(false);
             return;
           }
@@ -203,6 +201,7 @@ const useCombobox = ({
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
+      event.persist();
       onKeyDown(event);
     }
   };

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

@@ -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 { getIndexFromValue, findByValue, useFlattenedData, sanitizeItem, filterData } 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';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\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\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                handleChange(option.value);\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    }, [defaultValue]);\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    const handleChange = (nextValue: ScrollableListItemValue | undefined) => {\n        //const event = createCustomEvent('change');\n\n        if (onChange && nextValue !== String(value)) {\n            const item = findByValue(flattenedData, nextValue);\n            const sanitizedItem = sanitizeItem(item);\n\n            onChange(sanitizedItem?.value);\n        }\n    };\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        // listbox is open\n        if (currentIndex !== undefined) {\n            setCurrentValue(currentIndex);\n        } else if (inputValue !== value) {\n            handleChange(inputValue);\n        } else if (inputValue === '') {\n            handleChange(undefined);\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            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\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                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\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 && !isElementInsideTable3OrReport(event.currentTarget)) {\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 (\n                    (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                    !isElementInsideTable3OrReport(event.currentTarget)\n                ) {\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            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","handleChange","setCurrentValue","isCurrentValue","length","nextValue","item","findByValue","sanitizedItem","sanitizeItem","handleInputBlur","event","current","relatedTarget","preventDefault","onBlur","handleInputChange","target","handleInputClick","handleInputKeyDown","ctrlKey","metaKey","key","isElementInsideTable3OrReport","currentTarget","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
+{"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';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\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        const allowClearing = event.isTrusted && event.target.value === '';\n\n        if (onChange && (allowClearing || (!event.isTrusted && 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                    setCurrentValue(currentIndex);\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\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 && !isElementInsideTable3OrReport(event.currentTarget)) {\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 (\n                    (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                    !isElementInsideTable3OrReport(event.currentTarget)\n                ) {\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","allowClearing","isTrusted","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","ctrlKey","metaKey","key","isElementInsideTable3OrReport","currentTarget","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

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

@@ -21,7 +21,14 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
+  const rowsById = table3.instance.getCoreRowModel().rowsById;
+  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {
+    if (table3.meta.server._experimentalDataLoader2) {
+      // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.
+      return true;
+    }
+    return rowsById[row.rowId];
+  }).length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
   const isScrolled = isTableScrolled(table3.ref);
   let createWorkflow;

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 { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\nimport { isTableScrolled } from './util/editing';\n\nconst Column: React.FC<Table3ColumnProps<unknown>> & {\n    <TType = unknown>(_: Table3ColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;\n    const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n    const isScrolled = isTableScrolled(table3.ref);\n\n    let createWorkflow;\n\n    if (hasCreateWorkflow) {\n        createWorkflow = (\n            <CreateNewRow\n                buttonRef={table3.meta.editing.createRowButtonRef}\n                isScrolled={isScrolled}\n                table={table3.instance}\n                tableMeta={table3.meta}\n            />\n        );\n    }\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType>\n                {...gridAttributes}\n                data-taco=\"table3\"\n                footerRows={hasCreateWorkflow && isScrolled ? createWorkflow : undefined}\n                table={table3}>\n                {hasCreateWorkflow ? (\n                    <>\n                        <TemporaryRow\n                            createRowButtonRef={table3.meta.editing.createRowButtonRef}\n                            isScrolled={isScrolled}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                        {!isScrolled ? createWorkflow : null}\n                    </>\n                ) : null}\n            </Table.Grid>\n        </Table>\n    );\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 <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => React.JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3Texts,\n    Table3FeatureProps,\n    Table3CommonProps,\n    Table3WithoutEditingWithClientProps,\n    Table3WithoutEditingWithServerProps,\n    Table3WithEditingProps,\n    Table3WithEditingWithClientProps,\n    Table3WithEditingWithServerProps,\n    Table3EditingChangeHandler,\n    Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","displayName","Group","_","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasAlertErrors","getErrorsShownInAlert","length","hasCreateWorkflow","isEnabled","onEditingCreate","isScrolled","isTableScrolled","createWorkflow","React","CreateNewRow","buttonRef","createRowButtonRef","table","instance","tableMeta","Table","Toolbar","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","footerRows","TemporaryRow","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\nimport { isTableScrolled } from './util/editing';\n\nconst Column: React.FC<Table3ColumnProps<unknown>> & {\n    <TType = unknown>(_: Table3ColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const rowsById = table3.instance.getCoreRowModel().rowsById;\n    const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {\n        if (table3.meta.server._experimentalDataLoader2) {\n            // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.\n            return true;\n        }\n\n        return rowsById[row.rowId];\n    }).length;\n\n    const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n    const isScrolled = isTableScrolled(table3.ref);\n\n    let createWorkflow;\n\n    if (hasCreateWorkflow) {\n        createWorkflow = (\n            <CreateNewRow\n                buttonRef={table3.meta.editing.createRowButtonRef}\n                isScrolled={isScrolled}\n                table={table3.instance}\n                tableMeta={table3.meta}\n            />\n        );\n    }\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType>\n                {...gridAttributes}\n                data-taco=\"table3\"\n                footerRows={hasCreateWorkflow && isScrolled ? createWorkflow : undefined}\n                table={table3}>\n                {hasCreateWorkflow ? (\n                    <>\n                        <TemporaryRow\n                            createRowButtonRef={table3.meta.editing.createRowButtonRef}\n                            isScrolled={isScrolled}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                        {!isScrolled ? createWorkflow : null}\n                    </>\n                ) : null}\n            </Table.Grid>\n        </Table>\n    );\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 <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => React.JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3Texts,\n    Table3FeatureProps,\n    Table3CommonProps,\n    Table3WithoutEditingWithClientProps,\n    Table3WithoutEditingWithServerProps,\n    Table3WithEditingProps,\n    Table3WithEditingWithClientProps,\n    Table3WithEditingWithServerProps,\n    Table3EditingChangeHandler,\n    Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","displayName","Group","_","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","rowsById","instance","getCoreRowModel","hasAlertErrors","getErrorsShownInAlert","filter","row","server","_experimentalDataLoader2","rowId","length","hasCreateWorkflow","isEnabled","onEditingCreate","isScrolled","isTableScrolled","createWorkflow","React","CreateNewRow","buttonRef","createRowButtonRef","table","tableMeta","Table","Toolbar","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","footerRows","TemporaryRow","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}

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

@@ -52,21 +52,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  /*
-  const rows = table.getRowModel().rows;
-   // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-      const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-       pendingChanges.forEach(pendingChange => {
-          try {
-              table.getRow(pendingChange.rowId);
-          } catch {
-              // TODO: this has the potential to remove changes for "unloaded" rows in server loading
-              //tableMeta.editing.discardChanges(pendingChange.rowId, table);
-          }
-      });
-  }, [rows.length]);
-  */
+  React__default.useEffect(() => {
+    if (tableMeta.editing.isEnabled) {
+      tableMeta.rowActions.registerHandler('cleanup', rowId => {
+        tableMeta.editing.discardChanges(rowId, table);
+      });
+    }
+  }, []);
   // shortcuts
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
     event.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    useLazyEffect(() => {\n        return () => {\n            if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {\n                tableMeta.editing.saveChanges(table, table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]?.id);\n            }\n        };\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n                const isTableOrIsInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                // users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (!isTableOrIsInsideTable) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    /*\n    const rows = table.getRowModel().rows;\n\n    // make sure pending changes are removed for rows that no longer exist\n    useLazyEffect(() => {\n        const pendingChanges = tableMeta.editing.getErrorsShownInAlert();\n\n        pendingChanges.forEach(pendingChange => {\n            try {\n                table.getRow(pendingChange.rowId);\n            } catch {\n                // TODO: this has the potential to remove changes for \"unloaded\" rows in server loading\n                //tableMeta.editing.discardChanges(pendingChange.rowId, table);\n            }\n        });\n    }, [rows.length]);\n    */\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useTableEditingListener","table","tableRef","scrollToIndex","tableMeta","options","meta","localization","useLocalization","useLazyEffect","editing","isEditing","rowActive","rowActiveIndex","undefined","_table$getRowModel$ro","saveChanges","getRowModel","rows","id","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","hasSavedChanges","hasSaved","resetHighlightedColumnIndexes","getState","globalFilter","onClickOutside","element","target","isTableOrIsInsideTable","tagName","getAttribute","document","body","contains","isElementInsideOrTriggeredFromContainer","current","useGlobalKeyDown","isEnabled","shortcut","preventDefault","toggleEditing","key","shift"],"mappings":"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"}
+{"version":3,"file":"useTableEditingListener.js","sources":["../../../../../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    useLazyEffect(() => {\n        return () => {\n            if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== undefined) {\n                tableMeta.editing.saveChanges(table, table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]?.id);\n            }\n        };\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n                const isTableOrIsInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                // users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (!isTableOrIsInsideTable) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    React.useEffect(() => {\n        if (tableMeta.editing.isEnabled) {\n            tableMeta.rowActions.registerHandler('cleanup', (rowId: string) => {\n                tableMeta.editing.discardChanges(rowId, table);\n            });\n        }\n    }, []);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useTableEditingListener","table","tableRef","scrollToIndex","tableMeta","options","meta","localization","useLocalization","useLazyEffect","editing","isEditing","rowActive","rowActiveIndex","undefined","_table$getRowModel$ro","saveChanges","getRowModel","rows","id","hasChanges","React","useEffect","showUnsavedChangesWarning","event","returnValue","window","addEventListener","removeEventListener","hasSavedChanges","hasSaved","resetHighlightedColumnIndexes","getState","globalFilter","onClickOutside","element","target","isTableOrIsInsideTable","tagName","getAttribute","document","body","contains","isElementInsideOrTriggeredFromContainer","current","isEnabled","rowActions","registerHandler","rowId","discardChanges","useGlobalKeyDown","shortcut","preventDefault","toggleEditing","key","shift"],"mappings":"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"}

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

@@ -26,7 +26,7 @@ function useTable3(props, ref) {
     data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
     // Display EditingActionMenu instead of row actions while editing
-    rowActions: editing.isEditing ? [(_, rowId, table) => {
+    rowActions: editing.isEditing ? [(_, rowId, __, table) => {
       const tableMeta = table.options.meta;
       return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
         hasChanges: editing.hasChanges(rowId),

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

@@ -1 +1 @@
-{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator\n    );\n    const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing ? true : props.enableRowActions,\n        // Display EditingActionMenu instead of row actions while editing\n        rowActions: editing.isEditing\n            ? ([\n                  (_: TType, rowId: string, table: ReactTable<TType>) => {\n                      const tableMeta = table.options.meta as ReactTableMeta<TType>;\n                      return (\n                          <EditingActionsMenu\n                              hasChanges={editing.hasChanges(rowId)}\n                              hasErrors={editing.hasRowErrors(rowId)}\n                              onDiscard={() => {\n                                  editing.discardChanges(rowId, table);\n\n                                  if (editing.temporaryRows.length) {\n                                      requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                  }\n                              }}\n                              onEditingSave={async () => {\n                                  await editing.saveChanges(table, rowId);\n                              }}\n                              isLastRow={!creationEnabled && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1}\n                          />\n                      );\n                  },\n              ] as TableRowActionRenderer<TType>[])\n            : props.rowActions,\n    };\n    const meta = { editing };\n\n    const options: useTableRenderOptions = {\n        virtualiserPaddingEndOffset:\n            props.enableEditing && props.onEditingCreate ? (editing.hasTemporaryRowErrors() ? 1.4 : 1) : 0,\n    };\n\n    const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n                table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n            if (props.onEditingCreate) {\n                (table.ref.current as Table3Ref).instance.createRow = (row: unknown) =>\n                    table.meta.editing.createRow(table.instance, row as Partial<TType>);\n            }\n        }\n    }, [table.ref.current]);\n\n    return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","onEditingCreate","onEditingDiscard","rowIdentityAccessor","validator","creationEnabled","isEnabled","data","React","useMemo","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","table","tableMeta","options","meta","EditingActionsMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","discardChanges","requestAnimationFrame","_editing$createRowBut","createRowButtonRef","current","focus","saveChanges","then","e","Promise","reject","isLastRow","rowActive","rowActiveIndex","virtualiserPaddingEndOffset","hasTemporaryRowErrors","useTable","useTableEditingListener","instance","renderer","scrollToIndex","useEffect","toggleEditing","enabled","createRow"],"mappings":"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"}
+{"version":3,"file":"useTable3.js","sources":["../../../../../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import React from 'react';\nimport { RowData, Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport { useTableEditing } from './features/useTableEditing';\nimport { Table3Props, Table3Ref } from './types';\nimport { TableRowActionRenderer } from '../../primitives/Table/types';\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { EditingActionsMenu } from './components/Columns/Internal/EditingActionsMenu';\nimport { Row } from './components/Row/Row';\nimport { useTableRenderOptions } from '../../primitives/Table/Core/types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator\n    );\n    const creationEnabled = editing.isEnabled && !!props.onEditingCreate;\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing ? true : props.enableRowActions,\n        // Display EditingActionMenu instead of row actions while editing\n        rowActions: editing.isEditing\n            ? ([\n                  (_, rowId: string, __, table: ReactTable<TType>) => {\n                      const tableMeta = table.options.meta as ReactTableMeta<TType>;\n                      return (\n                          <EditingActionsMenu\n                              hasChanges={editing.hasChanges(rowId)}\n                              hasErrors={editing.hasRowErrors(rowId)}\n                              onDiscard={() => {\n                                  editing.discardChanges(rowId, table);\n\n                                  if (editing.temporaryRows.length) {\n                                      requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                  }\n                              }}\n                              onEditingSave={async () => {\n                                  await editing.saveChanges(table, rowId);\n                              }}\n                              isLastRow={!creationEnabled && tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1}\n                          />\n                      );\n                  },\n              ] as TableRowActionRenderer<TType>[])\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    const options: useTableRenderOptions = {\n        virtualiserPaddingEndOffset:\n            props.enableEditing && props.onEditingCreate ? (editing.hasTemporaryRowErrors() ? 1.4 : 1) : 0,\n    };\n\n    const table = useTable<TType, Table3Meta>(extendedProps, ref, RENDERERS, meta, options);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            (table.ref.current as Table3Ref).instance.toggleEditing = (enabled: boolean | undefined) =>\n                table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n            if (props.onEditingCreate) {\n                (table.ref.current as Table3Ref).instance.createRow = (row: unknown) =>\n                    table.meta.editing.createRow(table.instance, row as Partial<TType>);\n            }\n        }\n    }, [table.ref.current]);\n\n    return table;\n}\n"],"names":["RENDERERS","row","Row","cell","Cell","useTable3","props","ref","editing","useTableEditing","enableEditing","onEditingSave","onEditingChange","onEditingCreate","onEditingDiscard","rowIdentityAccessor","validator","creationEnabled","isEnabled","data","React","useMemo","temporaryRows","length","_props$data","concat","JSON","stringify","extendedProps","enableRowActions","isEditing","rowActions","_","rowId","__","table","tableMeta","options","meta","EditingActionsMenu","hasChanges","hasErrors","hasRowErrors","onDiscard","discardChanges","requestAnimationFrame","_editing$createRowBut","createRowButtonRef","current","focus","saveChanges","then","e","Promise","reject","isLastRow","rowActive","rowActiveIndex","virtualiserPaddingEndOffset","hasTemporaryRowErrors","useTable","useTableEditingListener","instance","renderer","scrollToIndex","useEffect","toggleEditing","enabled","createRow"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js

@@ -18,8 +18,9 @@ function Actions(props) {
   const {
     texts
   } = useLocalization();
+  const tableMeta = table.options.meta;
   // we don't want to document passing table, so it isn't on the type
-  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
+  const visibleActions = actions.map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n    actions: TableRowActionRenderer<TType>[];\n    actionsLength: number;\n    data: any;\n    isActiveRow: boolean;\n    rowId: string;\n    table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n    const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n    const { texts } = useLocalization();\n    // we don't want to document passing table, so it isn't on the type\n    const visibleActions = (actions as ((row: TType, internalRowId: string, table: ReactTable<TType>) => JSX.Element | null)[])\n        .map(action => action(data, rowId, table))\n        .filter(action => !!action) as JSX.Element[];\n\n    const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n    const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n    const className = cn(\n        'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n    );\n\n    return (\n        <span className={className}>\n            {actionsOnRow.map((button, index) => {\n                const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                return React.cloneElement(button, {\n                    appearance: 'transparent',\n                    key: index,\n                    tabIndex: isActiveRow ? 0 : -1,\n                    tooltip: button.props.shortcut ? (\n                        <>\n                            {tooltip}\n                            <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                        </>\n                    ) : (\n                        tooltip\n                    ),\n                });\n            })}\n            {actionsInMenu.length ? (\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table.columns.actions.tooltip}\n                    icon=\"more\"\n                    tabIndex={isActiveRow ? 0 : -1}\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {actionsInMenu.map((action, i) => (\n                                    <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                        {action.props['aria-label']}\n                                    </Menu.Item>\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </span>\n    );\n}\n\nfunction Header() {\n    return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { row, table } = context;\n    const { hideRowActions, isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const actions = tableMeta.rowActions.rowActions;\n    const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n    const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n    const isRowGrouped = row.getIsGrouped();\n\n    if (\n        !hideRowActions &&\n        !isRowGrouped &&\n        actions?.length &&\n        (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))\n    ) {\n        return (\n            <Actions<TType>\n                actions={actions}\n                actionsLength={actionsLength}\n                data={row.original}\n                isActiveRow={isActiveRow}\n                rowId={row.id}\n                table={table}\n            />\n        );\n    }\n\n    return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    meta: {\n        align: 'right',\n        className: cn(\n            'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n            'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n            'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n            'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n        ),\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n    },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","table","texts","useLocalization","visibleActions","map","action","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","hideRowActions","isHovered","rowIndex","useContext","RowContext","tableMeta","options","meta","rowActions","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","isRowGrouped","getIsGrouped","original","id","renderer","header","align","enableSearch"],"mappings":"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"}
+{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { TableRowActionRenderer } from '../../../../types';\n\nexport type ActionsProps<TType = unknown> = {\n    actions: TableRowActionRenderer<TType>[];\n    actionsLength: number;\n    data: any;\n    isActiveRow: boolean;\n    rowId: string;\n    table: ReactTable<TType>;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n    const { actions, actionsLength, data, isActiveRow, rowId, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    // we don't want to document passing table, so it isn't on the type\n    const visibleActions = (\n        actions as ((\n            row: TType,\n            internalRowId: string,\n            cleanup: (rowId: string) => void,\n            table: ReactTable<TType>\n        ) => JSX.Element | null)[]\n    )\n        .map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table))\n        .filter(action => !!action) as JSX.Element[];\n\n    const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n    const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n    const className = cn(\n        'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n    );\n\n    return (\n        <span className={className}>\n            {actionsOnRow.map((button, index) => {\n                const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                return React.cloneElement(button, {\n                    appearance: 'transparent',\n                    key: index,\n                    tabIndex: isActiveRow ? 0 : -1,\n                    tooltip: button.props.shortcut ? (\n                        <>\n                            {tooltip}\n                            <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                        </>\n                    ) : (\n                        tooltip\n                    ),\n                });\n            })}\n            {actionsInMenu.length ? (\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table.columns.actions.tooltip}\n                    icon=\"more\"\n                    tabIndex={isActiveRow ? 0 : -1}\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {actionsInMenu.map((action, i) => (\n                                    <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                        {action.props['aria-label']}\n                                    </Menu.Item>\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </span>\n    );\n}\n\nfunction Header() {\n    return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { row, table } = context;\n    const { hideRowActions, isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const actions = tableMeta.rowActions.rowActions;\n    const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n    const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\n    const isRowGrouped = row.getIsGrouped();\n\n    if (\n        !hideRowActions &&\n        !isRowGrouped &&\n        actions?.length &&\n        (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))\n    ) {\n        return (\n            <Actions<TType>\n                actions={actions}\n                actionsLength={actionsLength}\n                data={row.original}\n                isActiveRow={isActiveRow}\n                rowId={row.id}\n                table={table}\n            />\n        );\n    }\n\n    return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    meta: {\n        align: 'right',\n        className: cn(\n            'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n            'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n            'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n            'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n        ),\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n    },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","table","texts","useLocalization","tableMeta","options","meta","visibleActions","map","action","rowActions","handlers","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","hideRowActions","isHovered","rowIndex","useContext","RowContext","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","isRowGrouped","getIsGrouped","original","id","renderer","header","align","enableSearch"],"mappings":";;;;;;;;SAmBgBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,IAAI;IAAEC,WAAW;IAAEC,KAAK;IAAEC;GAAO,GAAGN,KAAK;EACzE,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;;EAG7D,MAAMC,cAAc,GAChBX,OAMH,CACIY,GAAG,CAACC,MAAM,IAAIA,MAAM,CAACX,IAAI,EAAEE,KAAK,EAAEI,SAAS,CAACM,UAAU,CAACC,QAAQ,CAAC,SAAS,CAAC,EAAEV,KAAK,CAAC,CAAC,CACnFW,MAAM,CAACH,MAAM,IAAI,CAAC,CAACA,MAAM,CAAkB;EAEhD,MAAMI,YAAY,GAAGN,cAAc,CAACO,MAAM,KAAKjB,aAAa,GAAGU,cAAc,GAAGA,cAAc,CAACQ,KAAK,CAAC,CAAC,EAAElB,aAAa,GAAG,CAAC,CAAC;EAC1H,MAAMmB,aAAa,GAAGT,cAAc,CAACQ,KAAK,CAACR,cAAc,CAACO,MAAM,KAAKjB,aAAa,GAAGA,aAAa,GAAGA,aAAa,GAAG,CAAC,CAAC;EAEvH,MAAMoB,SAAS,GAAGC,EAAE,CAChB,6GAA6G,CAChH;EAED,oBACIC;IAAMF,SAAS,EAAEA;KACZJ,YAAY,CAACL,GAAG,CAAC,CAACY,MAAM,EAAEC,KAAK;;IAC5B,MAAMC,OAAO,GAAGC,MAAM,EAAAC,IAAA,IAAAC,qBAAA,GAACL,MAAM,CAACzB,KAAK,CAAC2B,OAAO,cAAAG,qBAAA,cAAAA,qBAAA,GAAIL,MAAM,CAACzB,KAAK,CAAC,YAAY,CAAC,cAAA6B,IAAA,cAAAA,IAAA,GAAI,EAAE,CAAC;IAEhF,oBAAOL,cAAK,CAACO,YAAY,CAACN,MAAM,EAAE;MAC9BO,UAAU,EAAE,aAAa;MACzBC,GAAG,EAAEP,KAAK;MACVQ,QAAQ,EAAE9B,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;MAC9BuB,OAAO,EAAEF,MAAM,CAACzB,KAAK,CAACmC,QAAQ,iBAC1BX,4DACKG,OAAO,eACRH,6BAACY,QAAQ;QAACd,SAAS,EAAC,MAAM;QAACe,IAAI,EAAEZ,MAAM,CAACzB,KAAK,CAACmC;QAAY,CAC3D,IAEHR;KAEP,CAAC;GACL,CAAC,EACDN,aAAa,CAACF,MAAM,iBACjBK,6BAACc,UAAU;IACPN,UAAU,EAAC,aAAa;kBACZzB,KAAK,CAACD,KAAK,CAACiC,OAAO,CAACtC,OAAO,CAAC0B,OAAO;IAC/Ca,IAAI,EAAC,MAAM;IACXN,QAAQ,EAAE9B,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9BqC,IAAI,EAAEC,SAAS,kBACXlB,6BAACmB,IAAI,oBAAKD,SAAS,gBACflB,6BAACmB,IAAI,CAACC,OAAO,QACRvB,aAAa,CAACR,GAAG,CAAC,CAACC,MAAM,EAAE+B,CAAC,mBACzBrB,6BAACmB,IAAI,CAACG,IAAI;MAACb,GAAG,EAAEY;OAAO/B,MAAM,CAACd,KAAK;MAAEmC,QAAQ,EAAErB,MAAM,CAACd,KAAK,CAACmC;QACvDrB,MAAM,CAACd,KAAK,CAAC,YAAY,CAAC,CACnB,CACf,CAAC,CACS,CACZ;IAEb,IACF,IAAI,CACL;AAEf;AAEA,SAAS+C,MAAMA;EACX,OAAO,IAAI;AACf;AAEA,MAAMC,IAAI,gBAAGxB,cAAK,CAACyB,IAAI,CAAC,SAASC,UAAUA,CAAkBC,OAA8C;EACvG,MAAM;IAAEC,GAAG;IAAE9C;GAAO,GAAG6C,OAAO;EAC9B,MAAM;IAAEE,cAAc;IAAEC,SAAS;IAAEC;GAAU,GAAG/B,cAAK,CAACgC,UAAU,CAACC,UAAU,CAAC;EAC5E,MAAMhD,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAE7D,MAAMV,OAAO,GAAGQ,SAAS,CAACM,UAAU,CAACA,UAAU;EAC/C,MAAMb,aAAa,GAAGO,SAAS,CAACM,UAAU,CAAC2C,gBAAgB;EAE3D,MAAMtD,WAAW,GAAGK,SAAS,CAACkD,SAAS,CAACC,cAAc,KAAKL,QAAQ;EACnE,MAAMM,gBAAgB,GAAG,CAAC,CAACvD,KAAK,CAACwD,QAAQ,EAAE,CAACC,gBAAgB,CAACF,gBAAgB;EAC7E,MAAMG,kBAAkB,GAAGvD,SAAS,CAACkD,SAAS,CAACK,kBAAkB;EACjE,MAAMC,YAAY,GAAGb,GAAG,CAACc,YAAY,EAAE;EAEvC,IACI,CAACb,cAAc,IACf,CAACY,YAAY,IACbhE,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEkB,MAAM,KACdf,WAAW,IAAKkD,SAAS,IAAI,CAACU,kBAAkB,IAAI,CAACH,gBAAiB,CAAC,EAC1E;IACE,oBACIrC,6BAACzB,OAAO;MACJE,OAAO,EAAEA,OAAO;MAChBC,aAAa,EAAEA,aAAa;MAC5BC,IAAI,EAAEiD,GAAG,CAACe,QAAQ;MAClB/D,WAAW,EAAEA,WAAW;MACxBC,KAAK,EAAE+C,GAAG,CAACgB,EAAE;MACb9D,KAAK,EAAEA;MACT;;EAIV,OAAO,IAAI;AACf,CAAC,CAAqF;MAEzE+D,QAAQ,GAAkC;EACnDC,MAAM,EAAEvB,MAAM;EACdsB,QAAQ,EAAErB,IAAI;EACdrC,IAAI,EAAE;IACF4D,KAAK,EAAE,OAAO;IACdjD,SAAS,eAAEC,EAAE,CACT,2GAA2G,EAC3G,2EAA2E,EAC3E,sDAAsD,EACtD,6DAA6D,CAChE;;IAEDiD,YAAY,EAAE,KAAK;IACnBF,MAAM,EAAE;;;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterComparator.js

@@ -57,6 +57,10 @@ function getComparatorText(comparator, texts, column) {
       return texts.table.filters.comparators.hasAllOf;
     case TableFilterComparator.HasNoneOf:
       return texts.table.filters.comparators.hasNoneOf;
+    case TableFilterComparator.IsOneOf:
+      return texts.table.filters.comparators.isOneOf;
+    case TableFilterComparator.IsNoneOf:
+      return texts.table.filters.comparators.isNoneOf;
     default:
       return '';
   }