@economic/taco 1.11.0 → 1.11.2

package/dist/components/Table/util/sortTypes.d.ts

@@ -1,4 +1,4 @@
 import { SortTypes, TableRow } from '../types';
 declare type SortHandler<T> = (rowA: TableRow<T>, rowB: TableRow<T>, columnId: string) => 0 | 1 | -1;
-export declare const sortTypes: Record<SortTypes, SortHandler<any>>;
+export declare const sortTypes: (locale: string) => Record<SortTypes, SortHandler<any>>;
 export {};

package/dist/esm/components/Combobox/Combobox.js

@@ -71,6 +71,7 @@ const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     }) : undefined
   })))), /*#__PURE__*/createElement(Content, {
     align: "start",
+    className: "z-10",
     onOpenAutoFocus: event => {
       event.preventDefault();
     },

package/dist/esm/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        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.Content\n                    align=\"start\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}>\n                    <ScrollableList\n                        {...list}\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgCC,MAAhC;IAAwCC,KAAxC;IAA+C,GAAGC;MAAeN,KAAvE;EACA,MAAM;IAAEO,QAAF;IAAYC,MAAZ;IAAoBC,KAApB;IAA2BC,OAA3B;IAAoCC;MAASC,WAAW,CAACN,UAAD,EAAaL,GAAb,CAA9D;EACA,MAAMY,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;EACA,MAAM;IAAEe;MAAUC,eAAe,EAAjC;EACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBhB,iBALgB,CAApB;EAQA,oBACIJ,aAAA,OAAA;IAAMG,SAAS,EAAEA;iBAAqB;IAAWG,KAAK,EAAEA;GAAxD,eACIN,aAAA,CAACqB,IAAD,oBAA2BV,QAA3B,eACIX,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,eACId,aAAA,MAAA,oBAASQ;IAAUL,SAAS,EAAC;IAAgBD,GAAG,EAAEA;IAAlD,eACIF,aAAA,CAACuB,KAAD,oBACQb;IACJc,YAAY,EAAC;IACbf,MAAM,EACFR,KAAK,CAACmB,MAAN,gBACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXvB,SAAS,EAAC;MACVwB,IAAI,EAAEhB,OAAO,CAACiB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLlB,OAAO,CAACmB,YAAR,CAAqB,IAArB;QACA,sBAAApB,KAAK,CAACR,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,gBACNL,aAAA,CAACyB,UAAD;oBACgBV,KAAK,CAACP,QAAN,CAAe0B;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAGC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA7B,KAAK,CAACR,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEO,MAAM,CAACP;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAEnB,KAAK,CAACP,QAAN,CAAe0B;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,eAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJI,UAAU,EAAE;GALhB,eAMI3C,aAAA,CAAC4C,cAAD,oBACQhC;IACJT,SAAS,EAAEgB,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAEtB,OAAO,CAACiB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CANJ,CAtCJ,CADJ,CADJ;AAwDH,CAtEuB;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.inline ? (\n                                    <IconButton\n                                        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.Content\n                    align=\"start\"\n                    className=\"z-10\"\n                    onOpenAutoFocus={event => {\n                        event.preventDefault();\n                    }}\n                    sideOffset={4}>\n                    <ScrollableList\n                        {...list}\n                        className={cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]')}\n                        style={{ minWidth: selectDimensions?.width }}\n                        tabIndex={popover.open ? 0 : -1}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","IconButton","appearance","icon","open","onClick","onOpenChange","current","focus","tabIndex","tooltip","disabled","readOnly","onFocus","event","preventDefault","undefined","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgCC,MAAhC;IAAwCC,KAAxC;IAA+C,GAAGC;MAAeN,KAAvE;EACA,MAAM;IAAEO,QAAF;IAAYC,MAAZ;IAAoBC,KAApB;IAA2BC,OAA3B;IAAoCC;MAASC,WAAW,CAACN,UAAD,EAAaL,GAAb,CAA9D;EACA,MAAMY,WAAW,GAAGd,MAAA,CAA6B,IAA7B,CAApB;EACA,MAAM;IAAEe;MAAUC,eAAe,EAAjC;EACA,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAD,CAAtD;EACA,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBADgB,EAEhB;IACI,uBAAuBlB,KAAK,CAACmB;GAHjB,EAKhBhB,iBALgB,CAApB;EAQA,oBACIJ,aAAA,OAAA;IAAMG,SAAS,EAAEA;iBAAqB;IAAWG,KAAK,EAAEA;GAAxD,eACIN,aAAA,CAACqB,IAAD,oBAA2BV,QAA3B,eACIX,aAAA,CAACqB,MAAD;IAAyBC,OAAO;IAACpB,GAAG,EAAEY;GAAtC,eACId,aAAA,MAAA,oBAASQ;IAAUL,SAAS,EAAC;IAAgBD,GAAG,EAAEA;IAAlD,eACIF,aAAA,CAACuB,KAAD,oBACQb;IACJc,YAAY,EAAC;IACbf,MAAM,EACFR,KAAK,CAACmB,MAAN,gBACIpB,aAAA,CAACyB,UAAD;MACIC,UAAU,EAAC;MACXvB,SAAS,EAAC;MACVwB,IAAI,EAAEhB,OAAO,CAACiB,IAAR,GAAe,YAAf,GAA8B;MACpCC,OAAO,EAAE;;;QACLlB,OAAO,CAACmB,YAAR,CAAqB,IAArB;QACA,sBAAApB,KAAK,CAACR,GAAN,CAAU6B,OAAV,0EAAmBC,KAAnB;;MAEJC,QAAQ,EAAE,CAAC;KARf,CADJ,GAWI5B,MAAM,gBACNL,aAAA,CAACyB,UAAD;oBACgBV,KAAK,CAACP,QAAN,CAAe0B;MAC3BP,IAAI,EAAC;MACLQ,QAAQ,EAAElC,KAAK,CAACmC,QAAN,IAAkBnC,KAAK,CAACkC;MAClC9B,MAAM,EAAEA;MACRgC,OAAO,EAAGC,KAAD;;;;QAELA,KAAK,CAACC,cAAN;QACA,uBAAA7B,KAAK,CAACR,GAAN,CAAU6B,OAAV,4EAAmBC,KAAnB;;MAEJ9B,GAAG,EAAEO,MAAM,CAACP;MACZ+B,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAEnB,KAAK,CAACP,QAAN,CAAe0B;KAZ5B,CADM,GAeNM;IA9BZ,CADJ,CADJ,CADJ,eAsCIxC,aAAA,CAACqB,OAAD;IACIoB,KAAK,EAAC;IACNtC,SAAS,EAAC;IACVuC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAN;;IAEJI,UAAU,EAAE;GANhB,eAOI3C,aAAA,CAAC4C,cAAD,oBACQhC;IACJT,SAAS,EAAEgB,EAAE,CAAC,uEAAD;IACbb,KAAK,EAAE;MAAEuC,QAAQ,EAAE5B,gBAAF,aAAEA,gBAAF,uBAAEA,gBAAgB,CAAE6B;;IACrCb,QAAQ,EAAEtB,OAAO,CAACiB,IAAR,GAAe,CAAf,GAAmB,CAAC;IAJlC,CAPJ,CAtCJ,CADJ,CADJ;AAyDH,CAvEuB;;;;"}

package/dist/esm/components/Select/Select.js

@@ -71,6 +71,7 @@ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
     name: popover.open ? 'chevron-up' : 'chevron-down'
   }))), /*#__PURE__*/createElement(Content, {
     align: "start",
+    className: "z-10",
     sideOffset: 4
   }, props.multiselect ? /*#__PURE__*/createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/createElement(Listbox, Object.assign({}, commonListboxProps))), /*#__PURE__*/createElement("input", Object.assign({}, input, {
     className: "hidden",

package/dist/esm/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps: ListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        invalid: undefined,\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps: ListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        invalid: undefined,\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" className=\"z-10\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}

package/dist/esm/components/Table/hooks/useTable.js

@@ -120,7 +120,8 @@ const useTable = (props, ref) => {
   }
 
   const {
-    texts
+    texts,
+    locale
   } = useLocalization();
   const {
     columns,
@@ -157,7 +158,7 @@ const useTable = (props, ref) => {
     autoResetSelectedRows: false,
     autoResetSortBy: false,
     autoResetPage: false,
-    sortTypes: React__default.useMemo(() => sortTypes, []),
+    sortTypes: React__default.useMemo(() => sortTypes(locale), []),
     useControlledState: currentState => {
       return React__default.useMemo(() => ({ ...currentState,
         selectedRowIds: selectedRows || []

package/dist/esm/components/Table/hooks/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../../../../src/components/Table/hooks/useTable.tsx"],"sourcesContent":["import React from 'react';\nimport { useTable as useReactTable, useExpanded, useSortBy, usePagination, useRowState } from 'react-table';\nimport { getColumnsFromChildren, getInternalSortRules } from '../util';\nimport { sortTypes } from '../util/sortTypes';\nimport { useRowEditing } from './plugins/useRowEditing';\nimport { useRowActions } from './plugins/useRowActions';\nimport { useRowSelect } from './plugins/useRowSelect';\nimport {\n    InternalTable,\n    InternalTableRow,\n    PaginationHandler,\n    RowActiveHandler,\n    SortHandler,\n    TableProps,\n    TableRef,\n} from '../types';\nimport { useTableKeyboardNavigation } from './useTableKeyboardNavigation';\nimport { useLocalization } from '../../Provider/Provider';\nimport { useRowDraggable } from './plugins/useRowDraggable';\nimport { sanitizeRowProps } from '../util';\n\nconst useTableRowActive = (\n    activeIndex: number | undefined,\n    rows: InternalTableRow[],\n    rowExpansionRenderer: TableProps<any>['rowExpansionRenderer'],\n    handleonRowActive: RowActiveHandler<any> | undefined\n) => {\n    React.useEffect(() => {\n        if (activeIndex !== undefined && rows.length && handleonRowActive) {\n            const focusedRow = rows[activeIndex];\n            if (focusedRow) {\n                const sanitizedFocusedRow = sanitizeRowProps(focusedRow, rowExpansionRenderer);\n                handleonRowActive(sanitizedFocusedRow);\n            }\n        }\n    }, [activeIndex, rows]);\n};\n\nconst useTableInstance = (instance: any, ref: React.RefObject<TableRef>): object => {\n    const sanitizedInstance = React.useMemo(\n        () => ({\n            toggleAllRowsExpanded: instance.toggleAllRowsExpanded,\n            toggleHideAllColumns: instance.toggleHideAllColumns,\n            toggleHideColumn: instance.toggleHideColumn,\n            toggleEditing: instance.toggleEditing,\n            toggleRowEditing: instance.toggleRowEditing,\n            resetRowEditing: instance.resetRowEditing,\n            toggleRowExpanded: instance.toggleRowExpanded,\n            toggleSortBy: instance.toggleSortBy,\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            ref.current.instance = sanitizedInstance;\n        }\n    }, [ref]);\n\n    return sanitizedInstance;\n};\n\nconst useTablePaginationListener = (disablePagination: boolean, onPaginate: PaginationHandler | undefined, state: any): void => {\n    React.useEffect(() => {\n        if (!disablePagination && onPaginate) {\n            onPaginate(state.pageIndex, state.pageSize);\n        }\n    }, [state.pageIndex, state.pageSize]);\n};\n\nconst useTableSortingListener = (\n    data: any[],\n    sortedRows: any[],\n    onSort: SortHandler<any> | undefined,\n    manualSorting: boolean,\n    state: any\n): void => {\n    React.useEffect(() => {\n        if (onSort) {\n            const sortRules = state.sortBy.map((rule: any) => ({ accessor: rule.id, desc: rule.desc }));\n\n            if (manualSorting) {\n                onSort(sortRules);\n            } else {\n                let sortedData;\n\n                if (sortRules.length && sortedRows?.length) {\n                    sortedData = sortedRows.map((row: any) => row.original);\n                }\n\n                onSort(sortRules, sortedData || data);\n            }\n        }\n    }, [onSort && JSON.stringify(state.sortBy), manualSorting]);\n};\n\nconst DEFAULT_PAGE_SIZE = 10;\n\nexport const useTable = <T extends {}>(\n    props: TableProps<T> & { windowed?: boolean },\n    ref: React.RefObject<TableRef>\n): InternalTable => {\n    const {\n        children,\n        data,\n        dangerouslyHijackGlobalKeyboardNavigation: _,\n        onRowClick,\n        onRowDrag,\n        onSelectedRows,\n        rowClassName,\n        rowExpansionRenderer,\n        rowHeight,\n        selectedRows,\n\n        // sorting\n        disableSorting,\n        manualSorting,\n        onSort,\n        sortRules,\n\n        //index\n        activeIndex: _1,\n        defaultActiveIndex: _2,\n        onChangeActiveIndex: _3,\n\n        // pagination\n        disablePagination = true,\n        length,\n        onPaginate,\n        pageSize = DEFAULT_PAGE_SIZE,\n        pageIndex = 0,\n\n        // row editing\n        inlineEditingUniqueId = undefined,\n        onRowCreate,\n\n        // actions\n        actions,\n        onRowEdit,\n        onRowCopy,\n        onRowDelete,\n        onRowActive,\n\n        windowed = false,\n\n        ...otherProps\n    } = props;\n\n    if ((onSelectedRows && !selectedRows) || (!onSelectedRows && selectedRows)) {\n        throw new Error(\n            'Selected rows in a Table component are fully controlled - you must pass both the `onSelectedRows` and `selectedRows` props when using row selection'\n        );\n    }\n\n    const { texts } = useLocalization();\n    const { columns, sortRules: defaultSortRules } = React.useMemo(\n        () => getColumnsFromChildren(children, rowExpansionRenderer),\n        [children, rowExpansionRenderer]\n    );\n\n    const manualPagination = !disablePagination && !!onPaginate && !!length;\n\n    const {\n        headerGroups,\n        rows,\n        sortedRows,\n        prepareRow: prepareBaseRow,\n        state,\n        // pagination\n        page,\n        gotoPage,\n        setPageSize,\n        ...instance\n    }: any = useReactTable(\n        {\n            columns,\n            data,\n            initialState: {\n                // eslint-disable-next-line\n                // @ts-ignore: not sure how to type this correctly right now\n                sortBy: getInternalSortRules(sortRules) || defaultSortRules,\n                pageSize: !disablePagination ? pageSize : undefined,\n                pageIndex: !disablePagination ? pageIndex : undefined,\n            },\n            manualPagination,\n            pageCount: manualPagination && length ? Math.ceil(length / pageSize) : -1,\n            manualSortBy: manualSorting,\n            disableSortBy: disableSorting,\n            // most of these resets preventions are needed for editing mode\n            autoResetExpanded: false,\n            autoResetSelectedRows: false,\n            autoResetSortBy: false,\n            autoResetPage: false,\n            sortTypes: React.useMemo(() => sortTypes, []),\n            useControlledState: currentState => {\n                return React.useMemo(\n                    () => ({\n                        ...currentState,\n                        selectedRowIds: selectedRows || [],\n                    }),\n                    [currentState, selectedRows]\n                );\n            },\n        },\n        useRowState,\n        useSortBy,\n        useExpanded,\n        usePagination,\n        useRowSelect(onSelectedRows),\n        useRowDraggable(onRowDrag),\n        useRowEditing(inlineEditingUniqueId),\n        useRowActions(\n            inlineEditingUniqueId,\n            { onRowCreate, onRowEdit, onRowCopy, onRowDelete },\n            actions,\n            rowExpansionRenderer,\n            texts,\n            windowed\n        )\n    );\n\n    useTablePaginationListener(disablePagination, onPaginate, state);\n    useTableSortingListener(data, sortedRows, onSort, !!manualSorting, state);\n\n    const sanitizedInstance = useTableInstance(instance, ref);\n\n    const visibleRows = !disablePagination && !manualPagination ? page : rows;\n\n    const [activeIndex, setActiveIndex, handleKeyDown, handleFocus] = useTableKeyboardNavigation<T>(\n        props,\n        visibleRows,\n        { onRowClick, onRowCreate, onRowEdit, onRowCopy, onRowDelete, rowExpansionRenderer },\n        ref\n    );\n\n    useTableRowActive(activeIndex, rows, rowExpansionRenderer, onRowActive);\n\n    const prepareRow = React.useCallback(\n        (row: any, index: number) => {\n            prepareBaseRow(row);\n            row.setActive = () => setActiveIndex(index);\n        },\n        [prepareBaseRow, setActiveIndex]\n    );\n\n    return {\n        rowProps: {\n            activeIndex,\n            setActiveIndex,\n            onRowClick,\n            rowClassName,\n            rowExpansionRenderer,\n            rowHeight,\n            inlineEditingUniqueId,\n        },\n        tableProps: {\n            ...otherProps,\n            headerGroups,\n            onFocus: handleFocus,\n            onKeyDown: handleKeyDown,\n            tabIndex: otherProps.tabIndex ?? 0,\n        },\n        state,\n        pagination: !disablePagination\n            ? {\n                  length: manualPagination && length ? length : data.length,\n                  pageIndex: state.pageIndex,\n                  pageSize: state.pageSize,\n                  setPageIndex: gotoPage,\n                  setPageSize: setPageSize,\n              }\n            : null,\n        rows: visibleRows,\n        prepareRow,\n        instance: sanitizedInstance,\n    };\n};\n"],"names":["useTableRowActive","activeIndex","rows","rowExpansionRenderer","handleonRowActive","React","useEffect","undefined","length","focusedRow","sanitizedFocusedRow","sanitizeRowProps","useTableInstance","instance","ref","sanitizedInstance","useMemo","toggleAllRowsExpanded","toggleHideAllColumns","toggleHideColumn","toggleEditing","toggleRowEditing","resetRowEditing","toggleRowExpanded","toggleSortBy","current","useTablePaginationListener","disablePagination","onPaginate","state","pageIndex","pageSize","useTableSortingListener","data","sortedRows","onSort","manualSorting","sortRules","sortBy","map","rule","accessor","id","desc","sortedData","row","original","JSON","stringify","DEFAULT_PAGE_SIZE","useTable","props","children","dangerouslyHijackGlobalKeyboardNavigation","_","onRowClick","onRowDrag","onSelectedRows","rowClassName","rowHeight","selectedRows","disableSorting","_1","defaultActiveIndex","_2","onChangeActiveIndex","_3","inlineEditingUniqueId","onRowCreate","actions","onRowEdit","onRowCopy","onRowDelete","onRowActive","windowed","otherProps","Error","texts","useLocalization","columns","defaultSortRules","getColumnsFromChildren","manualPagination","headerGroups","prepareRow","prepareBaseRow","page","gotoPage","setPageSize","useReactTable","initialState","getInternalSortRules","pageCount","Math","ceil","manualSortBy","disableSortBy","autoResetExpanded","autoResetSelectedRows","autoResetSortBy","autoResetPage","sortTypes","useControlledState","currentState","selectedRowIds","useRowState","useSortBy","useExpanded","usePagination","useRowSelect","useRowDraggable","useRowEditing","useRowActions","visibleRows","setActiveIndex","handleKeyDown","handleFocus","useTableKeyboardNavigation","useCallback","index","setActive","rowProps","tableProps","onFocus","onKeyDown","tabIndex","pagination","setPageIndex"],"mappings":"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"}
+{"version":3,"file":"useTable.js","sources":["../../../../../src/components/Table/hooks/useTable.tsx"],"sourcesContent":["import React from 'react';\nimport { useTable as useReactTable, useExpanded, useSortBy, usePagination, useRowState } from 'react-table';\nimport { getColumnsFromChildren, getInternalSortRules } from '../util';\nimport { sortTypes } from '../util/sortTypes';\nimport { useRowEditing } from './plugins/useRowEditing';\nimport { useRowActions } from './plugins/useRowActions';\nimport { useRowSelect } from './plugins/useRowSelect';\nimport {\n    InternalTable,\n    InternalTableRow,\n    PaginationHandler,\n    RowActiveHandler,\n    SortHandler,\n    TableProps,\n    TableRef,\n} from '../types';\nimport { useTableKeyboardNavigation } from './useTableKeyboardNavigation';\nimport { useLocalization } from '../../Provider/Provider';\nimport { useRowDraggable } from './plugins/useRowDraggable';\nimport { sanitizeRowProps } from '../util';\n\nconst useTableRowActive = (\n    activeIndex: number | undefined,\n    rows: InternalTableRow[],\n    rowExpansionRenderer: TableProps<any>['rowExpansionRenderer'],\n    handleonRowActive: RowActiveHandler<any> | undefined\n) => {\n    React.useEffect(() => {\n        if (activeIndex !== undefined && rows.length && handleonRowActive) {\n            const focusedRow = rows[activeIndex];\n            if (focusedRow) {\n                const sanitizedFocusedRow = sanitizeRowProps(focusedRow, rowExpansionRenderer);\n                handleonRowActive(sanitizedFocusedRow);\n            }\n        }\n    }, [activeIndex, rows]);\n};\n\nconst useTableInstance = (instance: any, ref: React.RefObject<TableRef>): object => {\n    const sanitizedInstance = React.useMemo(\n        () => ({\n            toggleAllRowsExpanded: instance.toggleAllRowsExpanded,\n            toggleHideAllColumns: instance.toggleHideAllColumns,\n            toggleHideColumn: instance.toggleHideColumn,\n            toggleEditing: instance.toggleEditing,\n            toggleRowEditing: instance.toggleRowEditing,\n            resetRowEditing: instance.resetRowEditing,\n            toggleRowExpanded: instance.toggleRowExpanded,\n            toggleSortBy: instance.toggleSortBy,\n        }),\n        []\n    );\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            ref.current.instance = sanitizedInstance;\n        }\n    }, [ref]);\n\n    return sanitizedInstance;\n};\n\nconst useTablePaginationListener = (disablePagination: boolean, onPaginate: PaginationHandler | undefined, state: any): void => {\n    React.useEffect(() => {\n        if (!disablePagination && onPaginate) {\n            onPaginate(state.pageIndex, state.pageSize);\n        }\n    }, [state.pageIndex, state.pageSize]);\n};\n\nconst useTableSortingListener = (\n    data: any[],\n    sortedRows: any[],\n    onSort: SortHandler<any> | undefined,\n    manualSorting: boolean,\n    state: any\n): void => {\n    React.useEffect(() => {\n        if (onSort) {\n            const sortRules = state.sortBy.map((rule: any) => ({ accessor: rule.id, desc: rule.desc }));\n\n            if (manualSorting) {\n                onSort(sortRules);\n            } else {\n                let sortedData;\n\n                if (sortRules.length && sortedRows?.length) {\n                    sortedData = sortedRows.map((row: any) => row.original);\n                }\n\n                onSort(sortRules, sortedData || data);\n            }\n        }\n    }, [onSort && JSON.stringify(state.sortBy), manualSorting]);\n};\n\nconst DEFAULT_PAGE_SIZE = 10;\n\nexport const useTable = <T extends {}>(\n    props: TableProps<T> & { windowed?: boolean },\n    ref: React.RefObject<TableRef>\n): InternalTable => {\n    const {\n        children,\n        data,\n        dangerouslyHijackGlobalKeyboardNavigation: _,\n        onRowClick,\n        onRowDrag,\n        onSelectedRows,\n        rowClassName,\n        rowExpansionRenderer,\n        rowHeight,\n        selectedRows,\n\n        // sorting\n        disableSorting,\n        manualSorting,\n        onSort,\n        sortRules,\n\n        //index\n        activeIndex: _1,\n        defaultActiveIndex: _2,\n        onChangeActiveIndex: _3,\n\n        // pagination\n        disablePagination = true,\n        length,\n        onPaginate,\n        pageSize = DEFAULT_PAGE_SIZE,\n        pageIndex = 0,\n\n        // row editing\n        inlineEditingUniqueId = undefined,\n        onRowCreate,\n\n        // actions\n        actions,\n        onRowEdit,\n        onRowCopy,\n        onRowDelete,\n        onRowActive,\n\n        windowed = false,\n\n        ...otherProps\n    } = props;\n\n    if ((onSelectedRows && !selectedRows) || (!onSelectedRows && selectedRows)) {\n        throw new Error(\n            'Selected rows in a Table component are fully controlled - you must pass both the `onSelectedRows` and `selectedRows` props when using row selection'\n        );\n    }\n\n    const { texts, locale } = useLocalization();\n    const { columns, sortRules: defaultSortRules } = React.useMemo(\n        () => getColumnsFromChildren(children, rowExpansionRenderer),\n        [children, rowExpansionRenderer]\n    );\n\n    const manualPagination = !disablePagination && !!onPaginate && !!length;\n\n    const {\n        headerGroups,\n        rows,\n        sortedRows,\n        prepareRow: prepareBaseRow,\n        state,\n        // pagination\n        page,\n        gotoPage,\n        setPageSize,\n        ...instance\n    }: any = useReactTable(\n        {\n            columns,\n            data,\n            initialState: {\n                // eslint-disable-next-line\n                // @ts-ignore: not sure how to type this correctly right now\n                sortBy: getInternalSortRules(sortRules) || defaultSortRules,\n                pageSize: !disablePagination ? pageSize : undefined,\n                pageIndex: !disablePagination ? pageIndex : undefined,\n            },\n            manualPagination,\n            pageCount: manualPagination && length ? Math.ceil(length / pageSize) : -1,\n            manualSortBy: manualSorting,\n            disableSortBy: disableSorting,\n            // most of these resets preventions are needed for editing mode\n            autoResetExpanded: false,\n            autoResetSelectedRows: false,\n            autoResetSortBy: false,\n            autoResetPage: false,\n            sortTypes: React.useMemo(() => sortTypes(locale), []),\n            useControlledState: currentState => {\n                return React.useMemo(\n                    () => ({\n                        ...currentState,\n                        selectedRowIds: selectedRows || [],\n                    }),\n                    [currentState, selectedRows]\n                );\n            },\n        },\n        useRowState,\n        useSortBy,\n        useExpanded,\n        usePagination,\n        useRowSelect(onSelectedRows),\n        useRowDraggable(onRowDrag),\n        useRowEditing(inlineEditingUniqueId),\n        useRowActions(\n            inlineEditingUniqueId,\n            { onRowCreate, onRowEdit, onRowCopy, onRowDelete },\n            actions,\n            rowExpansionRenderer,\n            texts,\n            windowed\n        )\n    );\n\n    useTablePaginationListener(disablePagination, onPaginate, state);\n    useTableSortingListener(data, sortedRows, onSort, !!manualSorting, state);\n\n    const sanitizedInstance = useTableInstance(instance, ref);\n\n    const visibleRows = !disablePagination && !manualPagination ? page : rows;\n\n    const [activeIndex, setActiveIndex, handleKeyDown, handleFocus] = useTableKeyboardNavigation<T>(\n        props,\n        visibleRows,\n        { onRowClick, onRowCreate, onRowEdit, onRowCopy, onRowDelete, rowExpansionRenderer },\n        ref\n    );\n\n    useTableRowActive(activeIndex, rows, rowExpansionRenderer, onRowActive);\n\n    const prepareRow = React.useCallback(\n        (row: any, index: number) => {\n            prepareBaseRow(row);\n            row.setActive = () => setActiveIndex(index);\n        },\n        [prepareBaseRow, setActiveIndex]\n    );\n\n    return {\n        rowProps: {\n            activeIndex,\n            setActiveIndex,\n            onRowClick,\n            rowClassName,\n            rowExpansionRenderer,\n            rowHeight,\n            inlineEditingUniqueId,\n        },\n        tableProps: {\n            ...otherProps,\n            headerGroups,\n            onFocus: handleFocus,\n            onKeyDown: handleKeyDown,\n            tabIndex: otherProps.tabIndex ?? 0,\n        },\n        state,\n        pagination: !disablePagination\n            ? {\n                  length: manualPagination && length ? length : data.length,\n                  pageIndex: state.pageIndex,\n                  pageSize: state.pageSize,\n                  setPageIndex: gotoPage,\n                  setPageSize: setPageSize,\n              }\n            : null,\n        rows: visibleRows,\n        prepareRow,\n        instance: sanitizedInstance,\n    };\n};\n"],"names":["useTableRowActive","activeIndex","rows","rowExpansionRenderer","handleonRowActive","React","useEffect","undefined","length","focusedRow","sanitizedFocusedRow","sanitizeRowProps","useTableInstance","instance","ref","sanitizedInstance","useMemo","toggleAllRowsExpanded","toggleHideAllColumns","toggleHideColumn","toggleEditing","toggleRowEditing","resetRowEditing","toggleRowExpanded","toggleSortBy","current","useTablePaginationListener","disablePagination","onPaginate","state","pageIndex","pageSize","useTableSortingListener","data","sortedRows","onSort","manualSorting","sortRules","sortBy","map","rule","accessor","id","desc","sortedData","row","original","JSON","stringify","DEFAULT_PAGE_SIZE","useTable","props","children","dangerouslyHijackGlobalKeyboardNavigation","_","onRowClick","onRowDrag","onSelectedRows","rowClassName","rowHeight","selectedRows","disableSorting","_1","defaultActiveIndex","_2","onChangeActiveIndex","_3","inlineEditingUniqueId","onRowCreate","actions","onRowEdit","onRowCopy","onRowDelete","onRowActive","windowed","otherProps","Error","texts","locale","useLocalization","columns","defaultSortRules","getColumnsFromChildren","manualPagination","headerGroups","prepareRow","prepareBaseRow","page","gotoPage","setPageSize","useReactTable","initialState","getInternalSortRules","pageCount","Math","ceil","manualSortBy","disableSortBy","autoResetExpanded","autoResetSelectedRows","autoResetSortBy","autoResetPage","sortTypes","useControlledState","currentState","selectedRowIds","useRowState","useSortBy","useExpanded","usePagination","useRowSelect","useRowDraggable","useRowEditing","useRowActions","visibleRows","setActiveIndex","handleKeyDown","handleFocus","useTableKeyboardNavigation","useCallback","index","setActive","rowProps","tableProps","onFocus","onKeyDown","tabIndex","pagination","setPageIndex"],"mappings":"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"}

package/dist/esm/components/Table/util/sortTypes.js

@@ -50,32 +50,53 @@ const compareBasic = (a, b) => {
   return a === b ? 0 : a > b ? 1 : -1;
 };
 
-const sortTypes = {
-  datetime: (rowA, rowB, columnId) => {
-    const a = getTime(rowA.values[columnId]);
-    const b = getTime(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  string: (rowA, rowB, columnId) => {
-    const a = getString(rowA.values[columnId]);
-    const b = getString(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  number: (rowA, rowB, columnId) => {
-    const a = getNumber(rowA.values[columnId]);
-    const b = getNumber(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  boolean: (rowA, rowB, columnId) => {
-    const a = !!rowA.values[columnId];
-    const b = !!rowB.values[columnId];
-    return compareBasic(a, b);
-  },
-  auto: (rowA, rowB, columnId) => {
-    const a = guess(rowA.values[columnId]);
-    const b = guess(rowB.values[columnId]);
-    return compareBasic(a, b);
+const stringsLocaleCompare = (a, b, locale) => {
+  // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1
+  const compareResult = a.localeCompare(b, locale);
+  return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;
+};
+
+const compareBasicStrings = (a, b, locale) => {
+  if (a && b) {
+    return stringsLocaleCompare(a, b, locale);
   }
+
+  return compareBasic(a, b);
+};
+
+const sortTypes = locale => {
+  return {
+    datetime: (rowA, rowB, columnId) => {
+      const a = getTime(rowA.values[columnId]);
+      const b = getTime(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    string: (rowA, rowB, columnId) => {
+      const a = getString(rowA.values[columnId]);
+      const b = getString(rowB.values[columnId]);
+      return compareBasicStrings(a, b, locale);
+    },
+    number: (rowA, rowB, columnId) => {
+      const a = getNumber(rowA.values[columnId]);
+      const b = getNumber(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    boolean: (rowA, rowB, columnId) => {
+      const a = !!rowA.values[columnId];
+      const b = !!rowB.values[columnId];
+      return compareBasic(a, b);
+    },
+    auto: (rowA, rowB, columnId) => {
+      const a = guess(rowA.values[columnId]);
+      const b = guess(rowB.values[columnId]);
+
+      if (typeof a === 'string' && typeof b === 'string') {
+        return compareBasicStrings(a, b, locale);
+      } else {
+        return compareBasic(a, b);
+      }
+    }
+  };
 };
 
 export { sortTypes };

package/dist/esm/components/Table/util/sortTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortTypes.js","sources":["../../../../../src/components/Table/util/sortTypes.ts"],"sourcesContent":["import { SortTypes, TableRow } from '../types';\n\nconst getTime = (value: any): number | undefined => {\n    const parsedValue: Date = typeof value === 'string' ? new Date(value) : value;\n    return parsedValue?.getTime ? parsedValue.getTime() : undefined;\n};\n\nconst getNumber = (amount = '', decimalSeparator = ','): number | undefined => {\n    if (typeof amount === 'number') {\n        return amount;\n    }\n\n    if (amount === null || !amount.length) {\n        return undefined;\n    }\n\n    let value;\n\n    if (decimalSeparator === ',') {\n        // replace digit seperator then replace decimal separator\n        value = Number(amount.replace(/\\./g, '').replace(',', '.'));\n    } else {\n        // replace digit seperator\n        value = Number(amount.replace(/,/g, ''));\n    }\n\n    return Number.isNaN(value) ? undefined : value;\n};\n\nconst getString = (value: any): string | undefined => {\n    if (value) {\n        return String(value).toLowerCase();\n    }\n\n    return undefined;\n};\n\nconst guess = (value: any): any => {\n    if (typeof value === 'boolean') {\n        return !!value;\n    }\n\n    return isNaN(value) ? getString(value) : Number(value);\n};\n\nconst compareBasic = (a: any, b: any) => {\n    // places undefined values first in ascending order instead of descending\n    if (a !== undefined && b === undefined) {\n        return 1;\n    }\n\n    return a === b ? 0 : a > b ? 1 : -1;\n};\n\ntype SortHandler<T> = (rowA: TableRow<T>, rowB: TableRow<T>, columnId: string) => 0 | 1 | -1;\n\nexport const sortTypes: Record<SortTypes, SortHandler<any>> = {\n    datetime: (rowA, rowB, columnId) => {\n        const a = getTime(rowA.values[columnId]);\n        const b = getTime(rowB.values[columnId]);\n        return compareBasic(a, b);\n    },\n    string: (rowA, rowB, columnId) => {\n        const a = getString(rowA.values[columnId]);\n        const b = getString(rowB.values[columnId]);\n        return compareBasic(a, b);\n    },\n    number: (rowA, rowB, columnId) => {\n        const a = getNumber(rowA.values[columnId]);\n        const b = getNumber(rowB.values[columnId]);\n        return compareBasic(a, b);\n    },\n    boolean: (rowA, rowB, columnId) => {\n        const a = !!rowA.values[columnId];\n        const b = !!rowB.values[columnId];\n        return compareBasic(a, b);\n    },\n    auto: (rowA, rowB, columnId) => {\n        const a = guess(rowA.values[columnId]);\n        const b = guess(rowB.values[columnId]);\n        return compareBasic(a, b);\n    },\n};\n"],"names":["getTime","value","parsedValue","Date","undefined","getNumber","amount","decimalSeparator","length","Number","replace","isNaN","getString","String","toLowerCase","guess","compareBasic","a","b","sortTypes","datetime","rowA","rowB","columnId","values","string","number","boolean","auto"],"mappings":"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"}
+{"version":3,"file":"sortTypes.js","sources":["../../../../../src/components/Table/util/sortTypes.ts"],"sourcesContent":["import { SortTypes, TableRow } from '../types';\n\nconst getTime = (value: any): number | undefined => {\n    const parsedValue: Date = typeof value === 'string' ? new Date(value) : value;\n    return parsedValue?.getTime ? parsedValue.getTime() : undefined;\n};\n\nconst getNumber = (amount = '', decimalSeparator = ','): number | undefined => {\n    if (typeof amount === 'number') {\n        return amount;\n    }\n\n    if (amount === null || !amount.length) {\n        return undefined;\n    }\n\n    let value;\n\n    if (decimalSeparator === ',') {\n        // replace digit seperator then replace decimal separator\n        value = Number(amount.replace(/\\./g, '').replace(',', '.'));\n    } else {\n        // replace digit seperator\n        value = Number(amount.replace(/,/g, ''));\n    }\n\n    return Number.isNaN(value) ? undefined : value;\n};\n\nconst getString = (value: any): string | undefined => {\n    if (value) {\n        return String(value).toLowerCase();\n    }\n\n    return undefined;\n};\n\nconst guess = (value: any): any => {\n    if (typeof value === 'boolean') {\n        return !!value;\n    }\n\n    return isNaN(value) ? getString(value) : Number(value);\n};\n\nconst compareBasic = (a: any, b: any) => {\n    // places undefined values first in ascending order instead of descending\n    if (a !== undefined && b === undefined) {\n        return 1;\n    }\n\n    return a === b ? 0 : a > b ? 1 : -1;\n};\n\nconst stringsLocaleCompare = (a: string, b: string, locale: string): 0 | 1 | -1 => {\n    // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1\n    const compareResult = a.localeCompare(b, locale);\n    return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;\n};\n\nconst compareBasicStrings = (a: string | undefined, b: string | undefined, locale: string): 0 | 1 | -1 => {\n    if (a && b) {\n        return stringsLocaleCompare(a, b, locale);\n    }\n\n    return compareBasic(a, b);\n};\n\ntype SortHandler<T> = (rowA: TableRow<T>, rowB: TableRow<T>, columnId: string) => 0 | 1 | -1;\n\nexport const sortTypes = (locale: string): Record<SortTypes, SortHandler<any>> => {\n    return {\n        datetime: (rowA, rowB, columnId) => {\n            const a = getTime(rowA.values[columnId]);\n            const b = getTime(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        string: (rowA, rowB, columnId) => {\n            const a = getString(rowA.values[columnId]);\n            const b = getString(rowB.values[columnId]);\n            return compareBasicStrings(a, b, locale);\n        },\n        number: (rowA, rowB, columnId) => {\n            const a = getNumber(rowA.values[columnId]);\n            const b = getNumber(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        boolean: (rowA, rowB, columnId) => {\n            const a = !!rowA.values[columnId];\n            const b = !!rowB.values[columnId];\n            return compareBasic(a, b);\n        },\n        auto: (rowA, rowB, columnId) => {\n            const a = guess(rowA.values[columnId]);\n            const b = guess(rowB.values[columnId]);\n            if (typeof a === 'string' && typeof b === 'string') {\n                return compareBasicStrings(a, b, locale);\n            } else {\n                return compareBasic(a, b);\n            }\n        },\n    };\n};\n"],"names":["getTime","value","parsedValue","Date","undefined","getNumber","amount","decimalSeparator","length","Number","replace","isNaN","getString","String","toLowerCase","guess","compareBasic","a","b","stringsLocaleCompare","locale","compareResult","localeCompare","compareBasicStrings","sortTypes","datetime","rowA","rowB","columnId","values","string","number","boolean","auto"],"mappings":"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"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
-import { Root, Trigger, Content, Arrow } from '@radix-ui/react-tooltip';
+import cn from 'classnames';
+import { Root, Trigger, Portal, Content, Arrow } from '@radix-ui/react-tooltip';
 
 const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
   const {
@@ -8,13 +9,15 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     placement,
     ...otherProps
   } = props;
+  const className = cn('z-[999]', otherProps.className);
   return /*#__PURE__*/createElement(Root, {
     delayDuration: 50
   }, /*#__PURE__*/createElement(Trigger, {
     asChild: true,
     ref: ref
-  }, children), /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
+  }, children), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
     asChild: true,
+    className: className,
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/createElement("div", {
@@ -25,7 +28,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     }
   }, /*#__PURE__*/createElement(Arrow, {
     className: "fill-purple stroke-purple -mt-px"
-  }), title)));
+  }), title))));
 });
 
 export { Tooltip };

package/dist/esm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, ...otherProps } = props;\n\n    return (\n        <TooltipPrimitive.Root delayDuration={50}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\n                <div\n                    className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n                    data-taco=\"tooltip\"\n                    style={{\n                        transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                    }}>\n                    <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple -mt-px\" />\n                    {title}\n                </div>\n            </TooltipPrimitive.Content>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","TooltipPrimitive","delayDuration","asChild","side","sideOffset","className","style","transformOrigin"],"mappings":";;;MAeaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EAEA,oBACID,aAAA,CAACO,IAAD;IAAuBC,aAAa,EAAE;GAAtC,eACIR,aAAA,CAACO,OAAD;IAA0BE,OAAO;IAACP,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,eAIIJ,aAAA,CAACO,OAAD,oBAA8BD;IAAYG,OAAO;IAACC,IAAI,EAAEL;IAAWM,UAAU,EAAE;IAA/E,eACIX,aAAA,MAAA;IACIY,SAAS,EAAC;iBACA;IACVC,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,eAMId,aAAA,CAACO,KAAD;IAAwBK,SAAS,EAAC;GAAlC,CANJ,EAOKT,KAPL,CADJ,CAJJ,CADJ;AAkBH,CArBsB;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport cn from 'classnames';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, ...otherProps } = props;\n    const className = cn('z-[999]', otherProps.className);\n\n    return (\n        <TooltipPrimitive.Root delayDuration={50}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Content {...otherProps} asChild className={className} side={placement} sideOffset={3}>\n                    <div\n                        className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n                        data-taco=\"tooltip\"\n                        style={{\n                            transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                        }}>\n                        <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple -mt-px\" />\n                        {title}\n                    </div>\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","className","cn","TooltipPrimitive","delayDuration","asChild","side","sideOffset","style","transformOrigin"],"mappings":";;;;MAgBaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EACA,MAAMM,SAAS,GAAGC,EAAE,CAAC,SAAD,EAAYF,UAAU,CAACC,SAAvB,CAApB;EAEA,oBACIP,aAAA,CAACS,IAAD;IAAuBC,aAAa,EAAE;GAAtC,eACIV,aAAA,CAACS,OAAD;IAA0BE,OAAO;IAACT,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,eAIIJ,aAAA,CAACS,MAAD,MAAA,eACIT,aAAA,CAACS,OAAD,oBAA8BH;IAAYK,OAAO;IAACJ,SAAS,EAAEA;IAAWK,IAAI,EAAEP;IAAWQ,UAAU,EAAE;IAArG,eACIb,aAAA,MAAA;IACIO,SAAS,EAAC;iBACA;IACVO,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,eAMIf,aAAA,CAACS,KAAD;IAAwBF,SAAS,EAAC;GAAlC,CANJ,EAOKJ,KAPL,CADJ,CADJ,CAJJ,CADJ;AAoBH,CAxBsB;;;;"}

package/dist/taco.cjs.development.js

@@ -3443,13 +3443,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     placement,
     ...otherProps
   } = props;
+  const className = cn('z-[999]', otherProps.className);
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Root, {
     delayDuration: 50
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Trigger, {
     asChild: true,
     ref: ref
-  }, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
+  }, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
     asChild: true,
+    className: className,
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/React.createElement("div", {
@@ -3460,7 +3462,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     }
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
     className: "fill-purple stroke-purple -mt-px"
-  }), title)));
+  }), title))));
 });
 
 const getButtonClasses = () => {
@@ -5186,6 +5188,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     }) : undefined
   })))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
     align: "start",
+    className: "z-10",
     onOpenAutoFocus: event => {
       event.preventDefault();
     },
@@ -7385,6 +7388,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
     name: popover.open ? 'chevron-up' : 'chevron-down'
   }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
     align: "start",
+    className: "z-10",
     sideOffset: 4
   }, props.multiselect ? /*#__PURE__*/React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : /*#__PURE__*/React.createElement(Listbox, Object.assign({}, commonListboxProps))), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
     className: "hidden",
@@ -7731,32 +7735,53 @@ const compareBasic = (a, b) => {
   return a === b ? 0 : a > b ? 1 : -1;
 };
 
-const sortTypes = {
-  datetime: (rowA, rowB, columnId) => {
-    const a = getTime(rowA.values[columnId]);
-    const b = getTime(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  string: (rowA, rowB, columnId) => {
-    const a = getString(rowA.values[columnId]);
-    const b = getString(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  number: (rowA, rowB, columnId) => {
-    const a = getNumber(rowA.values[columnId]);
-    const b = getNumber(rowB.values[columnId]);
-    return compareBasic(a, b);
-  },
-  boolean: (rowA, rowB, columnId) => {
-    const a = !!rowA.values[columnId];
-    const b = !!rowB.values[columnId];
-    return compareBasic(a, b);
-  },
-  auto: (rowA, rowB, columnId) => {
-    const a = guess(rowA.values[columnId]);
-    const b = guess(rowB.values[columnId]);
-    return compareBasic(a, b);
+const stringsLocaleCompare = (a, b, locale) => {
+  // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1
+  const compareResult = a.localeCompare(b, locale);
+  return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;
+};
+
+const compareBasicStrings = (a, b, locale) => {
+  if (a && b) {
+    return stringsLocaleCompare(a, b, locale);
   }
+
+  return compareBasic(a, b);
+};
+
+const sortTypes = locale => {
+  return {
+    datetime: (rowA, rowB, columnId) => {
+      const a = getTime(rowA.values[columnId]);
+      const b = getTime(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    string: (rowA, rowB, columnId) => {
+      const a = getString(rowA.values[columnId]);
+      const b = getString(rowB.values[columnId]);
+      return compareBasicStrings(a, b, locale);
+    },
+    number: (rowA, rowB, columnId) => {
+      const a = getNumber(rowA.values[columnId]);
+      const b = getNumber(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    boolean: (rowA, rowB, columnId) => {
+      const a = !!rowA.values[columnId];
+      const b = !!rowB.values[columnId];
+      return compareBasic(a, b);
+    },
+    auto: (rowA, rowB, columnId) => {
+      const a = guess(rowA.values[columnId]);
+      const b = guess(rowB.values[columnId]);
+
+      if (typeof a === 'string' && typeof b === 'string') {
+        return compareBasicStrings(a, b, locale);
+      } else {
+        return compareBasic(a, b);
+      }
+    }
+  };
 };
 
 const pluginName = 'useRowEditing';
@@ -8551,7 +8576,8 @@ const useTable = (props, ref) => {
   }
 
   const {
-    texts
+    texts,
+    locale
   } = useLocalization();
   const {
     columns,
@@ -8588,7 +8614,7 @@ const useTable = (props, ref) => {
     autoResetSelectedRows: false,
     autoResetSortBy: false,
     autoResetPage: false,
-    sortTypes: React__default.useMemo(() => sortTypes, []),
+    sortTypes: React__default.useMemo(() => sortTypes(locale), []),
     useControlledState: currentState => {
       return React__default.useMemo(() => ({ ...currentState,
         selectedRowIds: selectedRows || []