@economic/taco 9.0.0 → 10.0.0-hanger-base-ui-migration.0

package/dist/components/Hanger/Hanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}\n                hideWhenDetached={hideWhenDetached}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <LegacyIconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["Hanger"],"mappings":";;;;;;;;AAiBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,SAAS;AAAA,EACT,OAAO,CAAC;AAAA,EACR,KAAK;AACT,CAAC;AAQD,MAAM,SAAS,MAAM,WAAW,SAAS,aAAa,OAA0B,aAAwC;;AAC9G,QAAA,EAAE,KAAK,WAAW,OAAO,gBAAgB,MAAM,WAAW,aAAa;AAC7E,QAAM,cAAc,UAAU,CAAC,WAAW,WAAW,CAAC;AAEtD,MAAI,WAAW,MAAM;AAEjB,MAAA,MAAM,eAAe,MAAM,QAAQ,KAAK,SAAO,WAAM,aAAN,mBAAgB,UAAS,YAAY;AAE5E,YAAA;AAAA,MACJ,kHAAkH,MAAM,SAAS,KAAK,IAAI,8CAA8C,MAAM,SAAS,KAAK,IAAI;AAAA,IACpN;AACW,eAAA,sBAAA,cAAC,QAAM,MAAA,MAAM,QAAS;AAAA,EAAA;AAGrC,SACK,sBAAA,cAAA,iBAAiB,QAAjB,EAAyB,GAAG,aAAc,GAAG,OAAO,KAAK,aAAa,SAAO,KAAA,GACzE,QACL;AAER,CAAC;AAGM,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQ,sBAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,cAAc;AAC3D,QAAA,UAAU,MAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AACM,QAAA,wBAAwB,CAAC,UAA6B;AACxD,UAAM,eAAe;AAAA,EACzB;AAEA,SACK,sBAAA,cAAA,iBAAiB,QAAjB,EAAwB,UACrB,GAAA,sBAAA;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACG;AAAA,MACA,aAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,IACC,MAAM;AAAA,IACP,sBAAA,cAAC,eAAc,EAAA,WAAU,gBAAgB,CAAA;AAAA,IACxC,sBAAA,cAAA,iBAAiB,OAAjB,EAAuB,SAAO,KAC3B,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,cAAY,MAAM,OAAO;AAAA,QACzB,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,QAAQ;AAAA,MAAA;AAAA,IAEzB,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAqC,SAASA,QAAO,OAAO,KAAK;AACnF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,SAAS,OAAO,YAAY,IAAI,IAAI,CAAC,SAAS,UAAU,CAAC;AAGhG,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGD,SAAA,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAA,sBAAA,cAAC,iBAAiB,MAAjB,EAAsB,KAAK,OAAO,IAAI,GAAG,aAAa,KAClD,GAAA,8CAAW,QAAQ,MAAA,MAAO,GAC1B,QACL,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}
+{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;\n// The surrounding Hanger root owns the single DOM wrapper that serves as the positioning anchor.\n// `Hanger.Anchor` is a passthrough that clones its child to forward the consumer's ref onto it,\n// preserving the legacy ref API without adding extra DOM (which would break OverflowGroup).\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props, ref) {\n    if (!React.isValidElement(props.children)) {\n        return <>{props.children}</>;\n    }\n    const child = props.children as React.ReactElement & { ref?: React.Ref<HTMLElement> };\n    return React.cloneElement(child, {\n        ref: child.ref ? mergeRefs([ref, child.ref]) : ref,\n    });\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":"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"}

package/dist/components/Pagination/PageNumbers.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const Button = require("../LegacyComponents/Button/Button.cjs");
+const Inline = require("../Inline/Inline.cjs");
 const Localization = require("../Provider/Localization.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -42,7 +43,7 @@ const createPageRange = (pageCount, pageNumber) => {
 const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }) => {
   const range = createPageRange(pageCount, currentPageIndex + 1);
   const { texts } = Localization.useLocalization();
-  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, range.map((pageNumber) => /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(Inline.Inline, { spacing: 8 }, range.map((pageNumber) => /* @__PURE__ */ React__namespace.createElement(
     Button.LegacyButton,
     {
       appearance: pageNumber === currentPageIndex + 1 ? "primary" : "default",

package/dist/components/Pagination/PageNumbers.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageNumbers.cjs","sources":["../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n    currentPageIndex: number;\n    onClick: (pageIndex: number) => void;\n    pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n    let lowerLimit = Math.min(pageNumber, pageCount);\n    let upperLimit = Math.min(pageNumber, pageCount);\n\n    for (let b = 1; b < 5 && b < pageCount; ) {\n        if (lowerLimit > 1) {\n            lowerLimit--;\n            b++;\n        }\n        if (b < 5 && upperLimit < pageCount) {\n            upperLimit++;\n            b++;\n        }\n    }\n\n    const range: number[] = [];\n\n    for (let i = lowerLimit; i <= upperLimit; i++) {\n        range.push(i);\n    }\n\n    return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n    const range = createPageRange(pageCount, currentPageIndex + 1);\n    const { texts } = useLocalization();\n\n    return (\n        <>\n            {range.map((pageNumber: number) => (\n                <LegacyButton\n                    appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n                    aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n                    key={pageNumber}\n                    onClick={() => handleClick(pageNumber - 1)}\n                    aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n                    tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n                    {pageNumber}\n                </LegacyButton>\n            ))}\n        </>\n    );\n};\n"],"names":["useLocalization","React","LegacyButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,CAAC,WAAmB,eAAiC;AACzE,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAC/C,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAE/C,WAAS,IAAI,GAAG,IAAI,KAAK,IAAI,aAAa;AACtC,QAAI,aAAa,GAAG;AAChB;AACA;AAAA,IAAA;AAEA,QAAA,IAAI,KAAK,aAAa,WAAW;AACjC;AACA;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,QAAkB,CAAC;AAEzB,WAAS,IAAI,YAAY,KAAK,YAAY,KAAK;AAC3C,UAAM,KAAK,CAAC;AAAA,EAAA;AAGT,SAAA;AACX;AAEa,MAAA,cAAc,CAAC,EAAE,mBAAmB,GAAG,SAAS,aAAa,gBAA8C;AACpH,QAAM,QAAQ,gBAAgB,WAAW,mBAAmB,CAAC;AACvD,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAElC,SAESC,iCAAA,cAAAA,iBAAA,UAAA,MAAA,MAAM,IAAI,CAAC,eACRA,iCAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG,YAAY,eAAe,mBAAmB,IAAI,YAAY;AAAA,MAC9D,gBAAc,eAAe,mBAAmB,IAAI,SAAS;AAAA,MAC7D,KAAK;AAAA,MACL,SAAS,MAAM,YAAY,aAAa,CAAC;AAAA,MACzC,cAAY,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MAC5E,SAAS,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,IAAA;AAAA,IACxE;AAAA,EAAA,CAER,CACL;AAER;;"}
+{"version":3,"file":"PageNumbers.cjs","sources":["../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { Inline } from '../Inline/Inline';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n    currentPageIndex: number;\n    onClick: (pageIndex: number) => void;\n    pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n    let lowerLimit = Math.min(pageNumber, pageCount);\n    let upperLimit = Math.min(pageNumber, pageCount);\n\n    for (let b = 1; b < 5 && b < pageCount; ) {\n        if (lowerLimit > 1) {\n            lowerLimit--;\n            b++;\n        }\n        if (b < 5 && upperLimit < pageCount) {\n            upperLimit++;\n            b++;\n        }\n    }\n\n    const range: number[] = [];\n\n    for (let i = lowerLimit; i <= upperLimit; i++) {\n        range.push(i);\n    }\n\n    return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n    const range = createPageRange(pageCount, currentPageIndex + 1);\n    const { texts } = useLocalization();\n\n    return (\n        <Inline spacing={8}>\n            {range.map((pageNumber: number) => (\n                <LegacyButton\n                    appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n                    aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n                    key={pageNumber}\n                    onClick={() => handleClick(pageNumber - 1)}\n                    aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n                    tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n                    {pageNumber}\n                </LegacyButton>\n            ))}\n        </Inline>\n    );\n};\n"],"names":["useLocalization","Inline","React","LegacyButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,CAAC,WAAmB,eAAiC;AACzE,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAC/C,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAE/C,WAAS,IAAI,GAAG,IAAI,KAAK,IAAI,aAAa;AACtC,QAAI,aAAa,GAAG;AAChB;AACA;AAAA,IAAA;AAEA,QAAA,IAAI,KAAK,aAAa,WAAW;AACjC;AACA;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,QAAkB,CAAC;AAEzB,WAAS,IAAI,YAAY,KAAK,YAAY,KAAK;AAC3C,UAAM,KAAK,CAAC;AAAA,EAAA;AAGT,SAAA;AACX;AAEa,MAAA,cAAc,CAAC,EAAE,mBAAmB,GAAG,SAAS,aAAa,gBAA8C;AACpH,QAAM,QAAQ,gBAAgB,WAAW,mBAAmB,CAAC;AACvD,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAElC,wDACKC,OAAO,QAAA,EAAA,SAAS,KACZ,MAAM,IAAI,CAAC,eACRC,iCAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG,YAAY,eAAe,mBAAmB,IAAI,YAAY;AAAA,MAC9D,gBAAc,eAAe,mBAAmB,IAAI,SAAS;AAAA,MAC7D,KAAK;AAAA,MACL,SAAS,MAAM,YAAY,aAAa,CAAC;AAAA,MACzC,cAAY,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MAC5E,SAAS,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,IAAA;AAAA,IACxE;AAAA,EAAA,CAER,CACL;AAER;;"}

package/dist/components/Pagination/PageNumbers.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LegacyButton } from "../LegacyComponents/Button/Button.js";
+import { Inline } from "../Inline/Inline.js";
 import { useLocalization } from "../Provider/Localization.js";
 const createPageRange = (pageCount, pageNumber) => {
   let lowerLimit = Math.min(pageNumber, pageCount);
@@ -23,7 +24,7 @@ const createPageRange = (pageCount, pageNumber) => {
 const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }) => {
   const range = createPageRange(pageCount, currentPageIndex + 1);
   const { texts } = useLocalization();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, range.map((pageNumber) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Inline, { spacing: 8 }, range.map((pageNumber) => /* @__PURE__ */ React.createElement(
     LegacyButton,
     {
       appearance: pageNumber === currentPageIndex + 1 ? "primary" : "default",

package/dist/components/Pagination/PageNumbers.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNumbers.js","sources":["../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n    currentPageIndex: number;\n    onClick: (pageIndex: number) => void;\n    pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n    let lowerLimit = Math.min(pageNumber, pageCount);\n    let upperLimit = Math.min(pageNumber, pageCount);\n\n    for (let b = 1; b < 5 && b < pageCount; ) {\n        if (lowerLimit > 1) {\n            lowerLimit--;\n            b++;\n        }\n        if (b < 5 && upperLimit < pageCount) {\n            upperLimit++;\n            b++;\n        }\n    }\n\n    const range: number[] = [];\n\n    for (let i = lowerLimit; i <= upperLimit; i++) {\n        range.push(i);\n    }\n\n    return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n    const range = createPageRange(pageCount, currentPageIndex + 1);\n    const { texts } = useLocalization();\n\n    return (\n        <>\n            {range.map((pageNumber: number) => (\n                <LegacyButton\n                    appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n                    aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n                    key={pageNumber}\n                    onClick={() => handleClick(pageNumber - 1)}\n                    aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n                    tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n                    {pageNumber}\n                </LegacyButton>\n            ))}\n        </>\n    );\n};\n"],"names":[],"mappings":";;;AAUA,MAAM,kBAAkB,CAAC,WAAmB,eAAiC;AACzE,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAC/C,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAE/C,WAAS,IAAI,GAAG,IAAI,KAAK,IAAI,aAAa;AACtC,QAAI,aAAa,GAAG;AAChB;AACA;AAAA,IAAA;AAEA,QAAA,IAAI,KAAK,aAAa,WAAW;AACjC;AACA;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,QAAkB,CAAC;AAEzB,WAAS,IAAI,YAAY,KAAK,YAAY,KAAK;AAC3C,UAAM,KAAK,CAAC;AAAA,EAAA;AAGT,SAAA;AACX;AAEa,MAAA,cAAc,CAAC,EAAE,mBAAmB,GAAG,SAAS,aAAa,gBAA8C;AACpH,QAAM,QAAQ,gBAAgB,WAAW,mBAAmB,CAAC;AACvD,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,SAES,sBAAA,cAAA,MAAA,UAAA,MAAA,MAAM,IAAI,CAAC,eACR,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAY,eAAe,mBAAmB,IAAI,YAAY;AAAA,MAC9D,gBAAc,eAAe,mBAAmB,IAAI,SAAS;AAAA,MAC7D,KAAK;AAAA,MACL,SAAS,MAAM,YAAY,aAAa,CAAC;AAAA,MACzC,cAAY,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MAC5E,SAAS,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,IAAA;AAAA,IACxE;AAAA,EAAA,CAER,CACL;AAER;"}
+{"version":3,"file":"PageNumbers.js","sources":["../../../src/components/Pagination/PageNumbers.tsx"],"sourcesContent":["import * as React from 'react';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { Inline } from '../Inline/Inline';\nimport { useLocalization } from '../Provider/Localization';\n\ntype PageNumberProps = {\n    currentPageIndex: number;\n    onClick: (pageIndex: number) => void;\n    pageCount: number;\n};\n\nconst createPageRange = (pageCount: number, pageNumber: number): number[] => {\n    let lowerLimit = Math.min(pageNumber, pageCount);\n    let upperLimit = Math.min(pageNumber, pageCount);\n\n    for (let b = 1; b < 5 && b < pageCount; ) {\n        if (lowerLimit > 1) {\n            lowerLimit--;\n            b++;\n        }\n        if (b < 5 && upperLimit < pageCount) {\n            upperLimit++;\n            b++;\n        }\n    }\n\n    const range: number[] = [];\n\n    for (let i = lowerLimit; i <= upperLimit; i++) {\n        range.push(i);\n    }\n\n    return range;\n};\n\nexport const PageNumbers = ({ currentPageIndex = 0, onClick: handleClick, pageCount }: PageNumberProps): JSX.Element => {\n    const range = createPageRange(pageCount, currentPageIndex + 1);\n    const { texts } = useLocalization();\n\n    return (\n        <Inline spacing={8}>\n            {range.map((pageNumber: number) => (\n                <LegacyButton\n                    appearance={pageNumber === currentPageIndex + 1 ? 'primary' : 'default'}\n                    aria-current={pageNumber === currentPageIndex + 1 ? 'page' : undefined}\n                    key={pageNumber}\n                    onClick={() => handleClick(pageNumber - 1)}\n                    aria-label={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}\n                    tooltip={texts.pagination.actions.pageX.replace('[X]', String(pageNumber))}>\n                    {pageNumber}\n                </LegacyButton>\n            ))}\n        </Inline>\n    );\n};\n"],"names":[],"mappings":";;;;AAWA,MAAM,kBAAkB,CAAC,WAAmB,eAAiC;AACzE,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAC/C,MAAI,aAAa,KAAK,IAAI,YAAY,SAAS;AAE/C,WAAS,IAAI,GAAG,IAAI,KAAK,IAAI,aAAa;AACtC,QAAI,aAAa,GAAG;AAChB;AACA;AAAA,IAAA;AAEA,QAAA,IAAI,KAAK,aAAa,WAAW;AACjC;AACA;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,QAAkB,CAAC;AAEzB,WAAS,IAAI,YAAY,KAAK,YAAY,KAAK;AAC3C,UAAM,KAAK,CAAC;AAAA,EAAA;AAGT,SAAA;AACX;AAEa,MAAA,cAAc,CAAC,EAAE,mBAAmB,GAAG,SAAS,aAAa,gBAA8C;AACpH,QAAM,QAAQ,gBAAgB,WAAW,mBAAmB,CAAC;AACvD,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,6CACK,QAAO,EAAA,SAAS,KACZ,MAAM,IAAI,CAAC,eACR,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAY,eAAe,mBAAmB,IAAI,YAAY;AAAA,MAC9D,gBAAc,eAAe,mBAAmB,IAAI,SAAS;AAAA,MAC7D,KAAK;AAAA,MACL,SAAS,MAAM,YAAY,aAAa,CAAC;AAAA,MACzC,cAAY,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,MAC5E,SAAS,MAAM,WAAW,QAAQ,MAAM,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,IAAA;AAAA,IACxE;AAAA,EAAA,CAER,CACL;AAER;"}

package/dist/components/Pagination/Pagination.cjs

@@ -5,7 +5,7 @@ const cn = require("clsx");
 const PageNumbers = require("./PageNumbers.cjs");
 const Localization = require("../Provider/Localization.cjs");
 const Select2 = require("../Select2/Select2.cjs");
-const Group = require("../Group/Group.cjs");
+const Inline = require("../Inline/Inline.cjs");
 const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const usePaginationShortcuts = require("./usePaginationShortcuts.cjs");
 function _interopNamespaceDefault(e) {
@@ -69,7 +69,7 @@ const Pagination = React__namespace.forwardRef(function Pagination2(props, ref)
       value: pageSize
     },
     pageSizes.map((size) => /* @__PURE__ */ React__namespace.createElement(Select2.Select2.Option, { key: size, value: size }, String(size)))
-  )), showPageControls && /* @__PURE__ */ React__namespace.createElement(Group.Group, { as: "nav", "aria-label": texts.pagination.label }, /* @__PURE__ */ React__namespace.createElement(
+  )), showPageControls && /* @__PURE__ */ React__namespace.createElement("nav", { "aria-label": texts.pagination.label }, /* @__PURE__ */ React__namespace.createElement(Inline.Inline, { spacing: 8 }, /* @__PURE__ */ React__namespace.createElement(
     IconButton.LegacyIconButton,
     {
       appearance: "default",
@@ -109,7 +109,7 @@ const Pagination = React__namespace.forwardRef(function Pagination2(props, ref)
       "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
       tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
     }
-  )));
+  ))));
 });
 exports.Pagination = Pagination;
 //# sourceMappingURL=Pagination.cjs.map

package/dist/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4 inline-flex items-center\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select2\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        onChange={value => {\n                            setPageIndex(0);\n                            setPageSize(Number(value));\n                        }}\n                        value={pageSize}>\n                        {pageSizes.map(size => (\n                            <Select2.Option key={size} value={size}>\n                                {String(size)}\n                            </Select2.Option>\n                        ))}\n                    </Select2>\n                </span>\n            )}\n            {showPageControls && (\n                <Group as=\"nav\" aria-label={texts.pagination.label}>\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-start\"\n                        onClick={() => setPageIndex(0)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                    />\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-left\"\n                        onClick={() => setPageIndex(pageIndex - 1)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                    />\n                    {showPageNumbers && pageCount > 0 && (\n                        <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                    )}\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-right\"\n                        onClick={() => setPageIndex(pageIndex + 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                    />\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-end\"\n                        onClick={() => setPageIndex(pageCount - 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                    />\n                </Group>\n            )}\n        </div>\n    );\n});\n"],"names":["React","Pagination","useLocalization","usePaginationShortcuts","Select2","Group","LegacyIconButton","PageNumbers"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Inline } from '../Inline/Inline';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4 inline-flex items-center\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select2\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        onChange={value => {\n                            setPageIndex(0);\n                            setPageSize(Number(value));\n                        }}\n                        value={pageSize}>\n                        {pageSizes.map(size => (\n                            <Select2.Option key={size} value={size}>\n                                {String(size)}\n                            </Select2.Option>\n                        ))}\n                    </Select2>\n                </span>\n            )}\n            {showPageControls && (\n                <nav aria-label={texts.pagination.label}>\n                    <Inline spacing={8}>\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canPreviousPage}\n                            icon=\"arrow-start\"\n                            onClick={() => setPageIndex(0)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.firstPageWithShortcut\n                                    : texts.pagination.actions.firstPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.firstPageWithShortcut\n                                    : texts.pagination.actions.firstPage\n                            }\n                        />\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canPreviousPage}\n                            icon=\"arrow-left\"\n                            onClick={() => setPageIndex(pageIndex - 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.previousPageWithShortcut\n                                    : texts.pagination.actions.previousPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.previousPageWithShortcut\n                                    : texts.pagination.actions.previousPage\n                            }\n                        />\n                        {showPageNumbers && pageCount > 0 && (\n                            <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                        )}\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canNextPage}\n                            icon=\"arrow-right\"\n                            onClick={() => setPageIndex(pageIndex + 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.nextPageWithShortcut\n                                    : texts.pagination.actions.nextPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.nextPageWithShortcut\n                                    : texts.pagination.actions.nextPage\n                            }\n                        />\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canNextPage}\n                            icon=\"arrow-end\"\n                            onClick={() => setPageIndex(pageCount - 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.lastPageWithShortcut\n                                    : texts.pagination.actions.lastPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.lastPageWithShortcut\n                                    : texts.pagination.actions.lastPage\n                            }\n                        />\n                    </Inline>\n                </nav>\n            )}\n        </div>\n    );\n});\n"],"names":["React","Pagination","useLocalization","usePaginationShortcuts","Select2","Inline","LegacyIconButton","PageNumbers"],"mappings":"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"}

package/dist/components/Pagination/Pagination.js

@@ -3,7 +3,7 @@ import cn from "clsx";
 import { PageNumbers } from "./PageNumbers.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { Select2 } from "../Select2/Select2.js";
-import { Group } from "../Group/Group.js";
+import { Inline } from "../Inline/Inline.js";
 import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { usePaginationShortcuts } from "./usePaginationShortcuts.js";
 const getShowingLabel = (length, pageIndex, pageSize, texts) => {
@@ -50,7 +50,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
       value: pageSize
     },
     pageSizes.map((size) => /* @__PURE__ */ React.createElement(Select2.Option, { key: size, value: size }, String(size)))
-  )), showPageControls && /* @__PURE__ */ React.createElement(Group, { as: "nav", "aria-label": texts.pagination.label }, /* @__PURE__ */ React.createElement(
+  )), showPageControls && /* @__PURE__ */ React.createElement("nav", { "aria-label": texts.pagination.label }, /* @__PURE__ */ React.createElement(Inline, { spacing: 8 }, /* @__PURE__ */ React.createElement(
     LegacyIconButton,
     {
       appearance: "default",
@@ -90,7 +90,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
       "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
       tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
     }
-  )));
+  ))));
 });
 export {
   Pagination

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4 inline-flex items-center\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select2\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        onChange={value => {\n                            setPageIndex(0);\n                            setPageSize(Number(value));\n                        }}\n                        value={pageSize}>\n                        {pageSizes.map(size => (\n                            <Select2.Option key={size} value={size}>\n                                {String(size)}\n                            </Select2.Option>\n                        ))}\n                    </Select2>\n                </span>\n            )}\n            {showPageControls && (\n                <Group as=\"nav\" aria-label={texts.pagination.label}>\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-start\"\n                        onClick={() => setPageIndex(0)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                    />\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-left\"\n                        onClick={() => setPageIndex(pageIndex - 1)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                    />\n                    {showPageNumbers && pageCount > 0 && (\n                        <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                    )}\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-right\"\n                        onClick={() => setPageIndex(pageIndex + 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                    />\n                    <LegacyIconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-end\"\n                        onClick={() => setPageIndex(pageCount - 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                    />\n                </Group>\n            )}\n        </div>\n    );\n});\n"],"names":["Pagination"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Inline } from '../Inline/Inline';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4 inline-flex items-center\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select2\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        onChange={value => {\n                            setPageIndex(0);\n                            setPageSize(Number(value));\n                        }}\n                        value={pageSize}>\n                        {pageSizes.map(size => (\n                            <Select2.Option key={size} value={size}>\n                                {String(size)}\n                            </Select2.Option>\n                        ))}\n                    </Select2>\n                </span>\n            )}\n            {showPageControls && (\n                <nav aria-label={texts.pagination.label}>\n                    <Inline spacing={8}>\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canPreviousPage}\n                            icon=\"arrow-start\"\n                            onClick={() => setPageIndex(0)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.firstPageWithShortcut\n                                    : texts.pagination.actions.firstPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.firstPageWithShortcut\n                                    : texts.pagination.actions.firstPage\n                            }\n                        />\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canPreviousPage}\n                            icon=\"arrow-left\"\n                            onClick={() => setPageIndex(pageIndex - 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.previousPageWithShortcut\n                                    : texts.pagination.actions.previousPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.previousPageWithShortcut\n                                    : texts.pagination.actions.previousPage\n                            }\n                        />\n                        {showPageNumbers && pageCount > 0 && (\n                            <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                        )}\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canNextPage}\n                            icon=\"arrow-right\"\n                            onClick={() => setPageIndex(pageIndex + 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.nextPageWithShortcut\n                                    : texts.pagination.actions.nextPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.nextPageWithShortcut\n                                    : texts.pagination.actions.nextPage\n                            }\n                        />\n                        <LegacyIconButton\n                            appearance=\"default\"\n                            disabled={!canNextPage}\n                            icon=\"arrow-end\"\n                            onClick={() => setPageIndex(pageCount - 1)}\n                            aria-label={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.lastPageWithShortcut\n                                    : texts.pagination.actions.lastPage\n                            }\n                            tooltip={\n                                showShortcutTexts\n                                    ? texts.pagination.actions.lastPageWithShortcut\n                                    : texts.pagination.actions.lastPage\n                            }\n                        />\n                    </Inline>\n                </nav>\n            )}\n        </div>\n    );\n});\n"],"names":["Pagination"],"mappings":";;;;;;;;AAmGA,MAAM,kBAAkB,CAAC,QAAgB,WAAmB,UAAkB,UAAqC;AACzG,QAAA,eAAe,YAAY,WAAW;AACtC,QAAA,gBAAgB,YAAY,KAAK;AAEhC,SAAA,MAAM,WAAW,mBACnB,QAAQ,OAAO,WAAW,IAAI,MAAM,OAAO,YAAY,CAAC,EACxD,QAAQ,OAAO,OAAO,eAAe,SAAS,SAAS,YAAY,CAAC,EACpE,QAAQ,WAAW,OAAO,MAAM,CAAC;AAC1C;AAEO,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW,OAAwB,KAAgC;AAC7G,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,CAAC,IAAI,IAAI,IAAI,KAAK,GAAG;AAAA,IACjC;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,4CAA4C;AAAA,IAC5C,GAAG;AAAA,EAAA,IACH;AACE,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,eAAe,KAAK,KAAK,SAAS,QAAQ,IAAI;AACpD,QAAM,oBAAoB;AAEH,yBAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,QAAM,YAAY,KAAK,KAAK,SAAS,QAAQ;AAC7C,QAAM,kBAAkB,YAAY;AAC9B,QAAA,cAAc,YAAY,YAAY;AAE5C,QAAM,YAAY,GAAG,qDAAqD,MAAM,SAAS;AAEzF,6CACK,OAAK,EAAA,GAAG,YAAY,WAAsB,aAAU,cAAa,IAC7D,GAAA,gBACI,sBAAA,cAAA,QAAA,EAAK,WAAU,gCACX,GAAA,gBAAgB,QAAQ,WAAW,UAAU,KAAK,GACnD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,WAAW;AAAA,MAC7B,WAAU;AAAA,MACV,UAAU,CAAS,UAAA;AACf,qBAAa,CAAC;AACF,oBAAA,OAAO,KAAK,CAAC;AAAA,MAC7B;AAAA,MACA,OAAO;AAAA,IAAA;AAAA,IACN,UAAU,IAAI,CACX,SAAA,sBAAA,cAAC,QAAQ,QAAR,EAAe,KAAK,MAAM,OAAO,KAAA,GAC7B,OAAO,IAAI,CAChB,CACH;AAAA,EAAA,CAET,GAEH,oBACG,sBAAA,cAAC,OAAI,EAAA,cAAY,MAAM,WAAW,MAC9B,GAAA,sBAAA,cAAC,QAAO,EAAA,SAAS,EACb,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,SAAS,MAAM,aAAa,CAAC;AAAA,MAC7B,cACI,oBACM,MAAM,WAAW,QAAQ,wBACzB,MAAM,WAAW,QAAQ;AAAA,MAEnC,SACI,oBACM,MAAM,WAAW,QAAQ,wBACzB,MAAM,WAAW,QAAQ;AAAA,IAAA;AAAA,EAGvC,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,SAAS,MAAM,aAAa,YAAY,CAAC;AAAA,MACzC,cACI,oBACM,MAAM,WAAW,QAAQ,2BACzB,MAAM,WAAW,QAAQ;AAAA,MAEnC,SACI,oBACM,MAAM,WAAW,QAAQ,2BACzB,MAAM,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGtC,mBAAmB,YAAY,KAC5B,sBAAA,cAAC,aAAY,EAAA,WAAsB,kBAAkB,WAAW,SAAS,aAAA,CAAc,GAE3F,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,SAAS,MAAM,aAAa,YAAY,CAAC;AAAA,MACzC,cACI,oBACM,MAAM,WAAW,QAAQ,uBACzB,MAAM,WAAW,QAAQ;AAAA,MAEnC,SACI,oBACM,MAAM,WAAW,QAAQ,uBACzB,MAAM,WAAW,QAAQ;AAAA,IAAA;AAAA,EAGvC,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,SAAS,MAAM,aAAa,YAAY,CAAC;AAAA,MACzC,cACI,oBACM,MAAM,WAAW,QAAQ,uBACzB,MAAM,WAAW,QAAQ;AAAA,MAEnC,SACI,oBACM,MAAM,WAAW,QAAQ,uBACzB,MAAM,WAAW,QAAQ;AAAA,IAAA;AAAA,EAG3C,CAAA,CACJ,CAER;AAER,CAAC;"}

package/dist/components/Select/useSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
+{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

package/dist/components/Select/useSelect.d.ts

@@ -1,7 +1,7 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { SelectProps } from './Select';
 import { ListboxProps } from '../Listbox/Listbox';
 import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 type InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 type InternalListboxProps = ListboxProps & {
     ref: React.ForwardedRef<HTMLInputElement>;
@@ -13,7 +13,7 @@ type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
     button: InternalButtonProps;
     listbox: InternalListboxProps;
     input: InternalInputProps;
-    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;
+    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;
     text: string | JSX.Element;
     more?: number;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}

package/dist/components/Select2/components/Edit.cjs

@@ -8,7 +8,7 @@ const Popover = require("../../Popover/Popover.cjs");
 const Icon = require("../../Icon/Icon.cjs");
 const Context = require("./Context.cjs");
 const Field = require("../../Field/Field.cjs");
-const Group = require("../../Group/Group.cjs");
+const Inline = require("../../Inline/Inline.cjs");
 const Localization = require("../../Provider/Localization.cjs");
 const tailwind = require("../../../utils/tailwind.cjs");
 const reactAriaComponents = require("react-aria-components");
@@ -112,7 +112,7 @@ const EditPopover = (props) => {
         onChangeColor: setColor,
         onKeyDown: preventKeyDownPropagation
       }
-    )) : null, /* @__PURE__ */ React.createElement(Group.Group, null, /* @__PURE__ */ React.createElement(Button.LegacyButton, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React.createElement(
+    )) : null, /* @__PURE__ */ React.createElement(Inline.Inline, { spacing: 4, noWrap: true }, /* @__PURE__ */ React.createElement(Button.LegacyButton, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React.createElement(
       Button.LegacyButton,
       {
         appearance: "primary",

package/dist/components/Select2/components/Edit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Edit.cjs","sources":["../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Group } from '../../Group/Group';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\nimport { RadioGroup as RadioGroupPrimitive, Radio as RadioPrimitive } from 'react-aria-components';\n\nexport type EditPopoverProps = PopoverProps & {\n    color?: Color;\n    text: string;\n    value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n    const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n    const ref = React.useRef<HTMLInputElement>(null);\n    const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n    const { texts } = useLocalization();\n    const [name, setName] = React.useState(initialName);\n    const [color, setColor] = React.useState(initialColor);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setName(event.target.value);\n        setValidationError(undefined);\n    };\n\n    const handleInputKeyDown = (close: () => void) => async (event: React.KeyboardEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n\n        if (event.key === 'Escape') {\n            close();\n        } else if (event.key === 'Enter') {\n            const fn = handleSave(close);\n            await fn(event);\n        }\n    };\n\n    const handleDelete = (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        close();\n\n        if (onDelete) {\n            await onDelete(value);\n        }\n    };\n\n    const handleSave =\n        (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n            if (onEdit && (name !== initialName || color !== initialColor)) {\n                try {\n                    await onEdit(value, name, color);\n                    close();\n                } catch (error) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setValidationError(error as Error);\n                    ref.current?.focus();\n                }\n            } else {\n                close();\n            }\n        };\n\n    const handleCloseAutoFocus = () => {\n        setName(initialName);\n        setColor(initialColor);\n        setValidationError(undefined);\n\n        if (searchRef?.current) {\n            searchRef.current?.focus();\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const preventKeyDownPropagation = (event: React.KeyboardEvent) => {\n        // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.\n        if (event.key === 'Escape' || event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            return;\n        }\n        event.stopPropagation();\n    };\n\n    const popoverContentKeyDown = (event: React.KeyboardEvent) => {\n        // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,\n        // to avoid 'Tab' key execution on Option component and closing the dropdown.\n        if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} modal={false}>\n            <Popover.Content\n                finalFocus={handleCloseAutoFocus}\n                onClick={event => event.stopPropagation()}\n                onKeyDown={popoverContentKeyDown}\n                placement=\"right\"\n                tabIndex={-1}\n                className=\"focus:!shadow-none\">\n                {({ close }) => (\n                    <>\n                        <div className=\"flex w-32 flex-col space-y-2\" data-taco=\"edit-popover\">\n                            {onEdit ? (\n                                <>\n                                    <Field\n                                        className={cn('!min-h-fit', { '!pb-0': !validationError })}\n                                        invalid={!!validationError}\n                                        message={validationError?.message}>\n                                        <Input\n                                            invalid={!!validationError}\n                                            onChange={handleInputChange}\n                                            onKeyDown={handleInputKeyDown(close)}\n                                            ref={ref}\n                                            value={name}\n                                        />\n                                    </Field>\n                                    {initialColor ? (\n                                        <>\n                                            <h5>Colours</h5>\n                                            <Colours\n                                                color={color}\n                                                onChangeColor={setColor}\n                                                onKeyDown={preventKeyDownPropagation}\n                                            />\n                                        </>\n                                    ) : null}\n                                    <Group>\n                                        <LegacyButton onClick={close}>{texts.select2.cancel}</LegacyButton>\n                                        <LegacyButton\n                                            appearance=\"primary\"\n                                            onClick={handleSave(close) as (event: React.MouseEvent<HTMLButtonElement>) => void}>\n                                            {texts.select2.save}\n                                        </LegacyButton>\n                                    </Group>\n                                </>\n                            ) : null}\n                            {onEdit && onDelete ? <hr /> : null}\n                            {onDelete ? (\n                                <button\n                                    className=\"flex items-center justify-start gap-1 hover:text-gray-700\"\n                                    onClick={handleDelete(close)}\n                                    onKeyDown={preventKeyDownPropagation}>\n                                    <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n                                </button>\n                            ) : null}\n                        </div>\n                    </>\n                )}\n            </Popover.Content>\n        </Popover>\n    );\n};\n\ntype Props = {\n    color: string | undefined;\n    onChangeColor: React.Dispatch<React.SetStateAction<Color | undefined>>;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n};\n\nconst Colours = (props: Props) => {\n    const { color, onChangeColor, onKeyDown } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <RadioGroupPrimitive\n            aria-label={texts.select2.chooseColor}\n            className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n            onChange={(value: string) => onChangeColor(value as Color)}\n            value={color}>\n            {AVAILABLE_COLORS.map((availableColor: Color) => (\n                <RadioPrimitive\n                    key={availableColor}\n                    aria-label={color}\n                    onKeyDown={onKeyDown}\n                    value={availableColor}\n                    data-taco={`${availableColor}-radio`}>\n                    {state => (\n                        <div\n                            className={cn(\n                                'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n                                getSubtleColorShadeClasses(availableColor as Color),\n                                state.isFocusVisible && 'ring-2 ring-blue-500'\n                            )}>\n                            {state.isSelected && <Icon name=\"tick\" className=\"!h-5 !w-5\" />}\n                        </div>\n                    )}\n                </RadioPrimitive>\n            ))}\n        </RadioGroupPrimitive>\n    );\n};\n"],"names":["useSelect2Context","useLocalization","Popover","Field","Input","Group","LegacyButton","Icon","RadioGroupPrimitive","AVAILABLE_COLORS","RadioPrimitive","getSubtleColorShadeClasses"],"mappings":"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"}
+{"version":3,"file":"Edit.cjs","sources":["../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Inline } from '../../Inline/Inline';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\nimport { RadioGroup as RadioGroupPrimitive, Radio as RadioPrimitive } from 'react-aria-components';\n\nexport type EditPopoverProps = PopoverProps & {\n    color?: Color;\n    text: string;\n    value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n    const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n    const ref = React.useRef<HTMLInputElement>(null);\n    const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n    const { texts } = useLocalization();\n    const [name, setName] = React.useState(initialName);\n    const [color, setColor] = React.useState(initialColor);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setName(event.target.value);\n        setValidationError(undefined);\n    };\n\n    const handleInputKeyDown = (close: () => void) => async (event: React.KeyboardEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n\n        if (event.key === 'Escape') {\n            close();\n        } else if (event.key === 'Enter') {\n            const fn = handleSave(close);\n            await fn(event);\n        }\n    };\n\n    const handleDelete = (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        close();\n\n        if (onDelete) {\n            await onDelete(value);\n        }\n    };\n\n    const handleSave =\n        (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n            if (onEdit && (name !== initialName || color !== initialColor)) {\n                try {\n                    await onEdit(value, name, color);\n                    close();\n                } catch (error) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setValidationError(error as Error);\n                    ref.current?.focus();\n                }\n            } else {\n                close();\n            }\n        };\n\n    const handleCloseAutoFocus = () => {\n        setName(initialName);\n        setColor(initialColor);\n        setValidationError(undefined);\n\n        if (searchRef?.current) {\n            searchRef.current?.focus();\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const preventKeyDownPropagation = (event: React.KeyboardEvent) => {\n        // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.\n        if (event.key === 'Escape' || event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            return;\n        }\n        event.stopPropagation();\n    };\n\n    const popoverContentKeyDown = (event: React.KeyboardEvent) => {\n        // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,\n        // to avoid 'Tab' key execution on Option component and closing the dropdown.\n        if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} modal={false}>\n            <Popover.Content\n                finalFocus={handleCloseAutoFocus}\n                onClick={event => event.stopPropagation()}\n                onKeyDown={popoverContentKeyDown}\n                placement=\"right\"\n                tabIndex={-1}\n                className=\"focus:!shadow-none\">\n                {({ close }) => (\n                    <>\n                        <div className=\"flex w-32 flex-col space-y-2\" data-taco=\"edit-popover\">\n                            {onEdit ? (\n                                <>\n                                    <Field\n                                        className={cn('!min-h-fit', { '!pb-0': !validationError })}\n                                        invalid={!!validationError}\n                                        message={validationError?.message}>\n                                        <Input\n                                            invalid={!!validationError}\n                                            onChange={handleInputChange}\n                                            onKeyDown={handleInputKeyDown(close)}\n                                            ref={ref}\n                                            value={name}\n                                        />\n                                    </Field>\n                                    {initialColor ? (\n                                        <>\n                                            <h5>Colours</h5>\n                                            <Colours\n                                                color={color}\n                                                onChangeColor={setColor}\n                                                onKeyDown={preventKeyDownPropagation}\n                                            />\n                                        </>\n                                    ) : null}\n                                    <Inline spacing={4} noWrap>\n                                        <LegacyButton onClick={close}>{texts.select2.cancel}</LegacyButton>\n                                        <LegacyButton\n                                            appearance=\"primary\"\n                                            onClick={handleSave(close) as (event: React.MouseEvent<HTMLButtonElement>) => void}>\n                                            {texts.select2.save}\n                                        </LegacyButton>\n                                    </Inline>\n                                </>\n                            ) : null}\n                            {onEdit && onDelete ? <hr /> : null}\n                            {onDelete ? (\n                                <button\n                                    className=\"flex items-center justify-start gap-1 hover:text-gray-700\"\n                                    onClick={handleDelete(close)}\n                                    onKeyDown={preventKeyDownPropagation}>\n                                    <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n                                </button>\n                            ) : null}\n                        </div>\n                    </>\n                )}\n            </Popover.Content>\n        </Popover>\n    );\n};\n\ntype Props = {\n    color: string | undefined;\n    onChangeColor: React.Dispatch<React.SetStateAction<Color | undefined>>;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n};\n\nconst Colours = (props: Props) => {\n    const { color, onChangeColor, onKeyDown } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <RadioGroupPrimitive\n            aria-label={texts.select2.chooseColor}\n            className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n            onChange={(value: string) => onChangeColor(value as Color)}\n            value={color}>\n            {AVAILABLE_COLORS.map((availableColor: Color) => (\n                <RadioPrimitive\n                    key={availableColor}\n                    aria-label={color}\n                    onKeyDown={onKeyDown}\n                    value={availableColor}\n                    data-taco={`${availableColor}-radio`}>\n                    {state => (\n                        <div\n                            className={cn(\n                                'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n                                getSubtleColorShadeClasses(availableColor as Color),\n                                state.isFocusVisible && 'ring-2 ring-blue-500'\n                            )}>\n                            {state.isSelected && <Icon name=\"tick\" className=\"!h-5 !w-5\" />}\n                        </div>\n                    )}\n                </RadioPrimitive>\n            ))}\n        </RadioGroupPrimitive>\n    );\n};\n"],"names":["useSelect2Context","useLocalization","Popover","Field","Input","Inline","LegacyButton","Icon","RadioGroupPrimitive","AVAILABLE_COLORS","RadioPrimitive","getSubtleColorShadeClasses"],"mappings":"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"}

package/dist/components/Select2/components/Edit.js

@@ -6,7 +6,7 @@ import { Popover } from "../../Popover/Popover.js";
 import { Icon } from "../../Icon/Icon.js";
 import { useSelect2Context } from "./Context.js";
 import { Field } from "../../Field/Field.js";
-import { Group } from "../../Group/Group.js";
+import { Inline } from "../../Inline/Inline.js";
 import { useLocalization } from "../../Provider/Localization.js";
 import { AVAILABLE_COLORS, getSubtleColorShadeClasses } from "../../../utils/tailwind.js";
 import { RadioGroup, Radio } from "react-aria-components";
@@ -110,7 +110,7 @@ const EditPopover = (props) => {
         onChangeColor: setColor,
         onKeyDown: preventKeyDownPropagation
       }
-    )) : null, /* @__PURE__ */ React__default.createElement(Group, null, /* @__PURE__ */ React__default.createElement(LegacyButton, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React__default.createElement(
+    )) : null, /* @__PURE__ */ React__default.createElement(Inline, { spacing: 4, noWrap: true }, /* @__PURE__ */ React__default.createElement(LegacyButton, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React__default.createElement(
       LegacyButton,
       {
         appearance: "primary",