@economic/taco 11.0.0 → 11.0.1-react-v19.0

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\nimport { UnstyledArrow } from './Primitives';\nimport { getPopoverStyleClassnames } from './util';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement>; anchorRef: React.RefObject<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n    anchorRef: { current: null },\n    props: {},\n    ref: null,\n});\n\nexport type PopoverAnchorProps = React.HTMLAttributes<HTMLElement> & {\n    children: React.ReactElement;\n};\nconst Anchor = React.forwardRef(function PopoverAnchor(props: PopoverAnchorProps, forwardedRef: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(PopoverContext);\n\n    const ref = mergeRefs([context.anchorRef, forwardedRef]);\n\n    const { children, ...restProps } = props;\n\n    return <PopoverPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLElement> & {\n    children: React.ReactElement;\n    /**\n     * Whether the trigger renders a native `<button>` element.\n     * Set to `false` if the trigger child is not a button (e.g. `<input>`, `<div>`, '<span>', etc.).\n     * @default true\n     */\n    nativeButton?: boolean;\n};\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, externalRef: React.Ref<HTMLElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(PopoverContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let { children, nativeButton, ...restProps } = props;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Popover.Trigger 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.Trigger\n            {...parentProps}\n            {...restProps}\n            nativeButton={nativeButton}\n            ref={refCallback}\n            render={children}\n        />\n    );\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('hide'));\n    };\n\n    return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\n\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    container?: HTMLElement | null;\n    finalFocus?: PopoverPrimitive.Popup.Props['finalFocus'];\n    initialFocus?: PopoverPrimitive.Popup.Props['initialFocus'];\n    /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, container, ...popoverContentProps } = props;\n\n    const context = React.useContext(PopoverContext);\n\n    const className = cn(getPopoverStyleClassnames(), props.className);\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = <PopoverPrimitive.Close render={<RenderPropWrapper>{props.children}</RenderPropWrapper>} />;\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner side={side} sideOffset={8} anchor={context.anchorRef}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"popover\" ref={ref}>\n                    <UnstyledArrow />\n                    {output}\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\nconst Close = React.forwardRef((props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => {\n    const { children, ...restProps } = props;\n    return <PopoverPrimitive.Close {...restProps} ref={ref} render={children} />;\n});\n\nexport type PopoverProps = React.PropsWithChildren<{\n    anchor?: JSX.Element;\n    modal?: boolean | 'trap-focus';\n    /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Set whether the popover is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Control the open state of the popover from outside the component  */\n    open?: boolean;\n    /** Called when the popover opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<PopoverAnchorProps>;\n    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n    Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n    Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(function Popover(props, ref) {\n    const { anchor, children, defaultOpen, modal = 'trap-focus', open, onChange, trigger, ...otherProps } = props;\n\n    const anchorRef = React.useRef(null);\n\n    const handleOpenChange = (open: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <PopoverContext.Provider value={{ anchorRef, props: otherProps, ref }}>\n            <PopoverPrimitive.Root defaultOpen={defaultOpen} modal={modal} open={open} onOpenChange={handleOpenChange}>\n                {anchor ? <Anchor>{anchor}</Anchor> : null}\n                {trigger && !anchor ? <Trigger>{trigger}</Trigger> : null}\n                {children}\n            </PopoverPrimitive.Root>\n        </PopoverContext.Provider>\n    );\n}) as ForwardedPopoverWithStatics;\nPopover.Anchor = Anchor;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverPrimitive","RenderPropWrapper","Popover","open"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\nimport { UnstyledArrow } from './Primitives';\nimport { getPopoverStyleClassnames } from './util';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement>; anchorRef: React.RefObject<HTMLElement | null> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n    anchorRef: { current: null },\n    props: {},\n    ref: null,\n});\n\nexport type PopoverAnchorProps = React.HTMLAttributes<HTMLElement> & {\n    children: React.ReactElement;\n};\nconst Anchor = React.forwardRef(function PopoverAnchor(props: PopoverAnchorProps, forwardedRef: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(PopoverContext);\n\n    const ref = mergeRefs([context.anchorRef, forwardedRef]);\n\n    const { children, ...restProps } = props;\n\n    return <PopoverPrimitive.Trigger {...restProps} ref={ref} render={children} />;\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLElement> & {\n    children: React.ReactElement;\n    /**\n     * Whether the trigger renders a native `<button>` element.\n     * Set to `false` if the trigger child is not a button (e.g. `<input>`, `<div>`, '<span>', etc.).\n     * @default true\n     */\n    nativeButton?: boolean;\n};\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, externalRef: React.Ref<HTMLElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(PopoverContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let { children, nativeButton, ...restProps } = props;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Popover.Trigger 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.Trigger\n            {...parentProps}\n            {...restProps}\n            nativeButton={nativeButton}\n            ref={refCallback}\n            render={children}\n        />\n    );\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('hide'));\n    };\n\n    return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\n\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    container?: HTMLElement | null;\n    finalFocus?: PopoverPrimitive.Popup.Props['finalFocus'];\n    initialFocus?: PopoverPrimitive.Popup.Props['initialFocus'];\n    /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, container, ...popoverContentProps } = props;\n\n    const context = React.useContext(PopoverContext);\n\n    const className = cn(getPopoverStyleClassnames(), props.className);\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = <PopoverPrimitive.Close render={<RenderPropWrapper>{props.children}</RenderPropWrapper>} />;\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner side={side} sideOffset={8} anchor={context.anchorRef}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"popover\" ref={ref}>\n                    <UnstyledArrow />\n                    {output}\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.ReactElement;\n};\nconst Close = React.forwardRef((props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): React.JSX.Element => {\n    const { children, ...restProps } = props;\n    return <PopoverPrimitive.Close {...restProps} ref={ref} render={children} />;\n});\n\nexport type PopoverProps = React.PropsWithChildren<{\n    anchor?: React.JSX.Element;\n    modal?: boolean | 'trap-focus';\n    /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n    /** Set whether the popover is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Control the open state of the popover from outside the component  */\n    open?: boolean;\n    /** Called when the popover opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<PopoverAnchorProps>;\n    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n    Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n    Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(function Popover(props, ref) {\n    const { anchor, children, defaultOpen, modal = 'trap-focus', open, onChange, trigger, ...otherProps } = props;\n\n    const anchorRef = React.useRef(null);\n\n    const handleOpenChange = (open: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            }\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <PopoverContext.Provider value={{ anchorRef, props: otherProps, ref }}>\n            <PopoverPrimitive.Root defaultOpen={defaultOpen} modal={modal} open={open} onOpenChange={handleOpenChange}>\n                {anchor ? <Anchor>{anchor}</Anchor> : null}\n                {trigger && !anchor ? <Trigger>{trigger}</Trigger> : null}\n                {children}\n            </PopoverPrimitive.Root>\n        </PopoverContext.Provider>\n    );\n}) as ForwardedPopoverWithStatics;\nPopover.Anchor = Anchor;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverPrimitive","RenderPropWrapper","Popover","open"],"mappings":"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"}

package/dist/components/Progress/Progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.cjs","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /**\n     * Indicates how long (in milliseconds) a progress bar will take to progress through.\n     * By default, progress bar has no duration\n     */\n    duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\n    let style;\n\n    if (duration) {\n        style = {\n            animationDuration: `${duration}ms`,\n        };\n    }\n\n    const className = cn('block h-1 w-full overflow-hidden rounded bg-gray-100', props.className);\n\n    const progressClassName = cn('yt-progress__bar block h-1', {\n        \"before:content-[' '] w-full before:block before:h-1 before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:bg-gray-300\":\n            !duration,\n        ['w-0 animate-[progress_linear] bg-gray-300']: duration,\n    });\n\n    return (\n        <span {...props} data-taco=\"progress\" className={className}>\n            <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n        </span>\n    );\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,WAAW,CAAC,EAAE,WAAW,QAAW,GAAG,YAAwC;AACxF,MAAI;AAEJ,MAAI,UAAU;AACV,YAAQ;AAAA,MACJ,mBAAmB,GAAG,QAAQ;AAAA,IAAA;AAAA,EAEtC;AAEA,QAAM,YAAY,GAAG,wDAAwD,MAAM,SAAS;AAE5F,QAAM,oBAAoB,GAAG,8BAA8B;AAAA,IACvD,wJACI,CAAC;AAAA,IACL,CAAC,2CAA2C,GAAG;AAAA,EAAA,CAClD;AAED,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,OAAO,aAAU,YAAW,UAAA,GAClC,sBAAA,cAAC,QAAA,EAAK,WAAW,mBAAmB,aAAU,gBAAe,OAAc,CAC/E;AAER;;"}
+{"version":3,"file":"Progress.cjs","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /**\n     * Indicates how long (in milliseconds) a progress bar will take to progress through.\n     * By default, progress bar has no duration\n     */\n    duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): React.JSX.Element => {\n    let style;\n\n    if (duration) {\n        style = {\n            animationDuration: `${duration}ms`,\n        };\n    }\n\n    const className = cn('block h-1 w-full overflow-hidden rounded bg-gray-100', props.className);\n\n    const progressClassName = cn('yt-progress__bar block h-1', {\n        \"before:content-[' '] w-full before:block before:h-1 before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:bg-gray-300\":\n            !duration,\n        ['w-0 animate-[progress_linear] bg-gray-300']: duration,\n    });\n\n    return (\n        <span {...props} data-taco=\"progress\" className={className}>\n            <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n        </span>\n    );\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,WAAW,CAAC,EAAE,WAAW,QAAW,GAAG,YAA8C;AAC9F,MAAI;AAEJ,MAAI,UAAU;AACV,YAAQ;AAAA,MACJ,mBAAmB,GAAG,QAAQ;AAAA,IAAA;AAAA,EAEtC;AAEA,QAAM,YAAY,GAAG,wDAAwD,MAAM,SAAS;AAE5F,QAAM,oBAAoB,GAAG,8BAA8B;AAAA,IACvD,wJACI,CAAC;AAAA,IACL,CAAC,2CAA2C,GAAG;AAAA,EAAA,CAClD;AAED,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,OAAO,aAAU,YAAW,UAAA,GAClC,sBAAA,cAAC,QAAA,EAAK,WAAW,mBAAmB,aAAU,gBAAe,OAAc,CAC/E;AAER;;"}

package/dist/components/Progress/Progress.d.ts

@@ -6,4 +6,4 @@ export type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {
      */
     duration?: number;
 };
-export declare const Progress: ({ duration, ...props }: ProgressProps) => JSX.Element;
+export declare const Progress: ({ duration, ...props }: ProgressProps) => React.JSX.Element;

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /**\n     * Indicates how long (in milliseconds) a progress bar will take to progress through.\n     * By default, progress bar has no duration\n     */\n    duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\n    let style;\n\n    if (duration) {\n        style = {\n            animationDuration: `${duration}ms`,\n        };\n    }\n\n    const className = cn('block h-1 w-full overflow-hidden rounded bg-gray-100', props.className);\n\n    const progressClassName = cn('yt-progress__bar block h-1', {\n        \"before:content-[' '] w-full before:block before:h-1 before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:bg-gray-300\":\n            !duration,\n        ['w-0 animate-[progress_linear] bg-gray-300']: duration,\n    });\n\n    return (\n        <span {...props} data-taco=\"progress\" className={className}>\n            <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;AAaO,MAAM,WAAW,CAAC,EAAE,WAAW,QAAW,GAAG,YAAwC;AACxF,MAAI;AAEJ,MAAI,UAAU;AACV,YAAQ;AAAA,MACJ,mBAAmB,GAAG,QAAQ;AAAA,IAAA;AAAA,EAEtC;AAEA,QAAM,YAAY,GAAG,wDAAwD,MAAM,SAAS;AAE5F,QAAM,oBAAoB,GAAG,8BAA8B;AAAA,IACvD,wJACI,CAAC;AAAA,IACL,CAAC,2CAA2C,GAAG;AAAA,EAAA,CAClD;AAED,SACIA,+BAAA,cAAC,QAAA,EAAM,GAAG,OAAO,aAAU,YAAW,UAAA,GAClCA,+BAAA,cAAC,QAAA,EAAK,WAAW,mBAAmB,aAAU,gBAAe,OAAc,CAC/E;AAER;"}
+{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /**\n     * Indicates how long (in milliseconds) a progress bar will take to progress through.\n     * By default, progress bar has no duration\n     */\n    duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): React.JSX.Element => {\n    let style;\n\n    if (duration) {\n        style = {\n            animationDuration: `${duration}ms`,\n        };\n    }\n\n    const className = cn('block h-1 w-full overflow-hidden rounded bg-gray-100', props.className);\n\n    const progressClassName = cn('yt-progress__bar block h-1', {\n        \"before:content-[' '] w-full before:block before:h-1 before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:bg-gray-300\":\n            !duration,\n        ['w-0 animate-[progress_linear] bg-gray-300']: duration,\n    });\n\n    return (\n        <span {...props} data-taco=\"progress\" className={className}>\n            <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;AAaO,MAAM,WAAW,CAAC,EAAE,WAAW,QAAW,GAAG,YAA8C;AAC9F,MAAI;AAEJ,MAAI,UAAU;AACV,YAAQ;AAAA,MACJ,mBAAmB,GAAG,QAAQ;AAAA,IAAA;AAAA,EAEtC;AAEA,QAAM,YAAY,GAAG,wDAAwD,MAAM,SAAS;AAE5F,QAAM,oBAAoB,GAAG,8BAA8B;AAAA,IACvD,wJACI,CAAC;AAAA,IACL,CAAC,2CAA2C,GAAG;AAAA,EAAA,CAClD;AAED,SACIA,+BAAA,cAAC,QAAA,EAAM,GAAG,OAAO,aAAU,YAAW,UAAA,GAClCA,+BAAA,cAAC,QAAA,EAAK,WAAW,mBAAmB,aAAU,gBAAe,OAAc,CAC/E;AAER;"}

package/dist/components/Provider/Provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.cjs","sources":["../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import { Tooltip } from '@base-ui/react/tooltip';\nimport * as React from 'react';\n\nimport { ToastProvider } from '../Toast/Toaster';\n\nimport type { Localization } from './Localization';\nimport { LocalizationProvider } from './Localization';\n\nexport type TacoSettings = {\n    uniqueUserIdentifier: string;\n};\n\nexport const TacoContext = React.createContext<TacoSettings>({\n    uniqueUserIdentifier: '',\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    settings: TacoSettings;\n};\n\nexport const Provider = (props: ProviderProps): JSX.Element => {\n    const { children, localization, settings } = props;\n\n    const context = React.useMemo(() => settings, [JSON.stringify(settings)]);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":["React","LocalizationProvider","Tooltip","ToastProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,cAAcA,iBAAM,cAA4B;AAAA,EACzD,sBAAsB;AAC1B,CAAC;AAUM,MAAM,WAAW,CAAC,UAAsC;AAC3D,QAAM,EAAE,UAAU,cAAc,SAAA,IAAa;AAE7C,QAAM,UAAUA,iBAAM,QAAQ,MAAM,UAAU,CAAC,KAAK,UAAU,QAAQ,CAAC,CAAC;AAExE,wDACKC,aAAAA,sBAAA,EAAqB,aAAA,kDACjB,YAAY,UAAZ,EAAqB,OAAO,WACzBD,iCAAA,cAACE,gBAAQ,UAAR,MACGF,iCAAA,cAACG,6BAAe,QAAS,CAC7B,CACJ,CACJ;AAER;;;"}
+{"version":3,"file":"Provider.cjs","sources":["../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import { Tooltip } from '@base-ui/react/tooltip';\nimport * as React from 'react';\n\nimport { ToastProvider } from '../Toast/Toaster';\n\nimport type { Localization } from './Localization';\nimport { LocalizationProvider } from './Localization';\n\nexport type TacoSettings = {\n    uniqueUserIdentifier: string;\n};\n\nexport const TacoContext = React.createContext<TacoSettings>({\n    uniqueUserIdentifier: '',\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    settings: TacoSettings;\n};\n\nexport const Provider = (props: ProviderProps): React.JSX.Element => {\n    const { children, localization, settings } = props;\n\n    const context = React.useMemo(() => settings, [JSON.stringify(settings)]);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":["React","LocalizationProvider","Tooltip","ToastProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,cAAcA,iBAAM,cAA4B;AAAA,EACzD,sBAAsB;AAC1B,CAAC;AAUM,MAAM,WAAW,CAAC,UAA4C;AACjE,QAAM,EAAE,UAAU,cAAc,SAAA,IAAa;AAE7C,QAAM,UAAUA,iBAAM,QAAQ,MAAM,UAAU,CAAC,KAAK,UAAU,QAAQ,CAAC,CAAC;AAExE,wDACKC,aAAAA,sBAAA,EAAqB,aAAA,kDACjB,YAAY,UAAZ,EAAqB,OAAO,WACzBD,iCAAA,cAACE,gBAAQ,UAAR,MACGF,iCAAA,cAACG,6BAAe,QAAS,CAC7B,CACJ,CACJ;AAER;;;"}

package/dist/components/Provider/Provider.d.ts

@@ -11,4 +11,4 @@ export type ProviderProps = {
     localization?: Localization;
     settings: TacoSettings;
 };
-export declare const Provider: (props: ProviderProps) => JSX.Element;
+export declare const Provider: (props: ProviderProps) => React.JSX.Element;

package/dist/components/Provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sources":["../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import { Tooltip } from '@base-ui/react/tooltip';\nimport * as React from 'react';\n\nimport { ToastProvider } from '../Toast/Toaster';\n\nimport type { Localization } from './Localization';\nimport { LocalizationProvider } from './Localization';\n\nexport type TacoSettings = {\n    uniqueUserIdentifier: string;\n};\n\nexport const TacoContext = React.createContext<TacoSettings>({\n    uniqueUserIdentifier: '',\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    settings: TacoSettings;\n};\n\nexport const Provider = (props: ProviderProps): JSX.Element => {\n    const { children, localization, settings } = props;\n\n    const context = React.useMemo(() => settings, [JSON.stringify(settings)]);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,cAAc,MAAM,cAA4B;AAAA,EACzD,sBAAsB;AAC1B,CAAC;AAUM,MAAM,WAAW,CAAC,UAAsC;AAC3D,QAAM,EAAE,UAAU,cAAc,SAAA,IAAa;AAE7C,QAAM,UAAU,MAAM,QAAQ,MAAM,UAAU,CAAC,KAAK,UAAU,QAAQ,CAAC,CAAC;AAExE,6CACK,sBAAA,EAAqB,aAAA,uCACjB,YAAY,UAAZ,EAAqB,OAAO,WACzB,sBAAA,cAAC,QAAQ,UAAR,MACG,sBAAA,cAAC,qBAAe,QAAS,CAC7B,CACJ,CACJ;AAER;"}
+{"version":3,"file":"Provider.js","sources":["../../../src/components/Provider/Provider.tsx"],"sourcesContent":["import { Tooltip } from '@base-ui/react/tooltip';\nimport * as React from 'react';\n\nimport { ToastProvider } from '../Toast/Toaster';\n\nimport type { Localization } from './Localization';\nimport { LocalizationProvider } from './Localization';\n\nexport type TacoSettings = {\n    uniqueUserIdentifier: string;\n};\n\nexport const TacoContext = React.createContext<TacoSettings>({\n    uniqueUserIdentifier: '',\n});\n\nexport type ProviderProps = {\n    /** Content would be your application */\n    children?: any;\n    /** Define localized texts and formatted data in your application */\n    localization?: Localization;\n    settings: TacoSettings;\n};\n\nexport const Provider = (props: ProviderProps): React.JSX.Element => {\n    const { children, localization, settings } = props;\n\n    const context = React.useMemo(() => settings, [JSON.stringify(settings)]);\n\n    return (\n        <LocalizationProvider localization={localization}>\n            <TacoContext.Provider value={context}>\n                <Tooltip.Provider>\n                    <ToastProvider>{children}</ToastProvider>\n                </Tooltip.Provider>\n            </TacoContext.Provider>\n        </LocalizationProvider>\n    );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,cAAc,MAAM,cAA4B;AAAA,EACzD,sBAAsB;AAC1B,CAAC;AAUM,MAAM,WAAW,CAAC,UAA4C;AACjE,QAAM,EAAE,UAAU,cAAc,SAAA,IAAa;AAE7C,QAAM,UAAU,MAAM,QAAQ,MAAM,UAAU,CAAC,KAAK,UAAU,QAAQ,CAAC,CAAC;AAExE,6CACK,sBAAA,EAAqB,aAAA,uCACjB,YAAY,UAAZ,EAAqB,OAAO,WACzB,sBAAA,cAAC,QAAQ,UAAR,MACG,sBAAA,cAAC,qBAAe,QAAS,CAC7B,CACJ,CACJ;AAER;"}

package/dist/components/RadioGroup/RadioGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.cjs","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { Either } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nimport { getRadioItemByValue, stringifyValue } from './util';\n\nimport './RadioGroup.css';\n\n// item\nexport type RadioGroupItemValue = string | number | boolean | null;\nexport type RadioGroupItemProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = Omit<\n    React.LabelHTMLAttributes<HTMLLabelElement>,\n    'onChange'\n> & {\n    /** Value of the radio button */\n    value: TValue;\n    /** Disable this radio button */\n    disabled?: boolean;\n    children?: React.ReactNode;\n};\n\ntype RadioGroupContextValue = {\n    name: string;\n    selectedValue: string | undefined;\n    tabbableValue: string | undefined;\n    disabled: boolean;\n    readOnly: boolean;\n    invalid: boolean;\n    required: boolean;\n    onItemChange: (itemValue: string) => void;\n    onItemKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLInputElement>) {\n    const { value, children, disabled, className, ...otherProps } = props;\n    const context = React.useContext(RadioGroupContext);\n\n    if (context === null) {\n        return null;\n    }\n\n    const stringValue = stringifyValue(value);\n    const itemDisabled = context.disabled || Boolean(disabled);\n    const checked = context.selectedValue === stringValue;\n    const tabIndex = context.tabbableValue === stringValue ? 0 : -1;\n\n    return (\n        <label\n            {...otherProps}\n            className={className}\n            data-taco=\"radio-group-item\"\n            data-selected={checked || undefined}\n            data-disabled={itemDisabled || undefined}\n            data-readonly={context.readOnly || undefined}\n            data-invalid={context.invalid || undefined}>\n            <VisuallyHidden>\n                <input\n                    ref={ref}\n                    type=\"radio\"\n                    name={context.name}\n                    value={stringValue}\n                    checked={checked}\n                    disabled={itemDisabled}\n                    required={context.required}\n                    tabIndex={tabIndex}\n                    aria-invalid={context.invalid || undefined}\n                    onChange={() => context.onItemChange(stringValue)}\n                    onClick={event => {\n                        if (context.readOnly || itemDisabled) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onKeyDown={context.onItemKeyDown}\n                />\n            </VisuallyHidden>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /** Disable the whole group */\n    disabled?: boolean;\n    /** Mark the group as invalid */\n    invalid?: boolean;\n    /** Mark the group as required */\n    required?: boolean;\n    /** Prevent changing the selected value */\n    readOnly?: boolean;\n    /** Layout orientation of the group */\n    orientation?: 'horizontal' | 'vertical';\n    /** Name used for the underlying radio inputs (form submission) */\n    name?: string;\n    children: React.ReactNode;\n};\n\nexport type RadioGroupProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = RadioGroupBaseProps &\n    Either<\n        // controlled\n        {\n            /** Handler called when the value changes */\n            onChange: (value: TValue) => void;\n            /** The current value (controlled) */\n            value?: TValue;\n        },\n        // uncontrolled\n        {\n            /** The default value (uncontrolled) */\n            defaultValue?: TValue;\n        }\n    >;\n\nexport const RadioGroup = React.forwardRef(function RadioGroup<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue>,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const {\n        children,\n        className,\n        orientation = 'vertical',\n        disabled = false,\n        invalid = false,\n        required = false,\n        readOnly = false,\n        name: nameProp,\n        value: valueProp,\n        defaultValue,\n        onChange,\n        ...otherProps\n    } = props;\n\n    const name = useId(nameProp);\n    const groupRef = useMergedRef<HTMLDivElement>(ref);\n\n    const { values, enabledValues } = React.useMemo(() => {\n        const values: TValue[] = [];\n        const enabledValues: string[] = [];\n\n        React.Children.forEach(children, child => {\n            if (!React.isValidElement(child)) {\n                return;\n            }\n\n            const value = child.props.value;\n            values.push(value);\n\n            if (!disabled && !child.props.disabled) {\n                enabledValues.push(stringifyValue(value));\n            }\n        });\n\n        return { values, enabledValues };\n    }, [children, disabled]);\n\n    // values are stringified internally (radio inputs are string-based) and mapped back to their typed value on change\n    const [selectedValue, setSelectedValue] = useControlled<string | undefined>({\n        value: valueProp === undefined ? undefined : stringifyValue(valueProp),\n        defaultValue: defaultValue === undefined ? undefined : stringifyValue(defaultValue),\n        onChange: onChange && (nextValue => onChange(getRadioItemByValue(values, nextValue as string))),\n    });\n\n    // roving tabindex: the checked item is the tab stop; if nothing is selected the first enabled item is;\n    // if the selected item is disabled the group has no tab stop (matches previous behaviour)\n    const selectedExists = selectedValue !== undefined && values.some(value => stringifyValue(value) === selectedValue);\n    let tabbableValue: string | undefined;\n\n    if (selectedExists) {\n        tabbableValue = enabledValues.includes(selectedValue as string) ? selectedValue : undefined;\n    } else {\n        tabbableValue = enabledValues[0];\n    }\n\n    const handleItemChange = (itemValue: string) => {\n        if (disabled || readOnly || itemValue === selectedValue) {\n            return;\n        }\n\n        setSelectedValue(itemValue);\n    };\n\n    const handleItemKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        const isNext = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n        const isPrevious = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n        if (!isNext && !isPrevious) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const currentIndex = enabledValues.indexOf(event.currentTarget.value);\n\n        if (disabled || readOnly || currentIndex === -1) {\n            return;\n        }\n\n        const delta = isNext ? 1 : -1;\n        const nextValue = enabledValues[(currentIndex + delta + enabledValues.length) % enabledValues.length];\n\n        setSelectedValue(nextValue);\n        Array.from(groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? [])\n            .find(input => input.value === nextValue)\n            ?.focus();\n    };\n\n    const context: RadioGroupContextValue = {\n        name,\n        selectedValue,\n        tabbableValue,\n        disabled,\n        readOnly,\n        invalid,\n        required,\n        onItemChange: handleItemChange,\n        onItemKeyDown: handleItemKeyDown,\n    };\n\n    return (\n        <div\n            {...otherProps}\n            ref={groupRef}\n            role=\"radiogroup\"\n            aria-orientation={orientation}\n            aria-disabled={disabled || undefined}\n            aria-invalid={invalid || undefined}\n            aria-required={required || undefined}\n            aria-readonly={readOnly || undefined}\n            data-taco=\"radio-group\"\n            data-disabled={disabled ? 'true' : undefined}\n            data-invalid={invalid ? 'true' : undefined}\n            data-readonly={readOnly ? 'true' : undefined}\n            data-required={required ? 'true' : undefined}\n            className={cn(\n                'flex items-start',\n                {\n                    'flex-wrap gap-x-4': orientation === 'horizontal',\n                    'flex-col gap-y-2': orientation === 'vertical',\n                },\n                className\n            )}>\n            <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>\n        </div>\n    );\n    // forwardRef erases the generic; re-apply it via a cast so `<RadioGroup<T>>` types value/onChange as T.\n    // `unknown` is needed because the `Either` union in the props prevents a direct overlap with the exotic type.\n}) as unknown as (<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue> & React.RefAttributes<HTMLDivElement>\n) => React.ReactElement) & {\n    Item: typeof RadioGroupItem;\n};\n\nRadioGroup.Item = RadioGroupItem;\n"],"names":["React","RadioGroupItem","stringifyValue","VisuallyHidden","RadioGroup","useId","useMergedRef","values","enabledValues","useControlled","getRadioItemByValue"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.cjs","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { Either } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nimport { getRadioItemByValue, stringifyValue } from './util';\n\nimport './RadioGroup.css';\n\n// item\nexport type RadioGroupItemValue = string | number | boolean | null;\nexport type RadioGroupItemProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = Omit<\n    React.LabelHTMLAttributes<HTMLLabelElement>,\n    'onChange'\n> & {\n    /** Value of the radio button */\n    value: TValue;\n    /** Disable this radio button */\n    disabled?: boolean;\n    children?: React.ReactNode;\n};\n\ntype RadioGroupContextValue = {\n    name: string;\n    selectedValue: string | undefined;\n    tabbableValue: string | undefined;\n    disabled: boolean;\n    readOnly: boolean;\n    invalid: boolean;\n    required: boolean;\n    onItemChange: (itemValue: string) => void;\n    onItemKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLInputElement>) {\n    const { value, children, disabled, className, ...otherProps } = props;\n    const context = React.useContext(RadioGroupContext);\n\n    if (context === null) {\n        return null;\n    }\n\n    const stringValue = stringifyValue(value);\n    const itemDisabled = context.disabled || Boolean(disabled);\n    const checked = context.selectedValue === stringValue;\n    const tabIndex = context.tabbableValue === stringValue ? 0 : -1;\n\n    return (\n        <label\n            {...otherProps}\n            className={className}\n            data-taco=\"radio-group-item\"\n            data-selected={checked || undefined}\n            data-disabled={itemDisabled || undefined}\n            data-readonly={context.readOnly || undefined}\n            data-invalid={context.invalid || undefined}>\n            <VisuallyHidden>\n                <input\n                    ref={ref}\n                    type=\"radio\"\n                    name={context.name}\n                    value={stringValue}\n                    checked={checked}\n                    disabled={itemDisabled}\n                    required={context.required}\n                    tabIndex={tabIndex}\n                    aria-invalid={context.invalid || undefined}\n                    onChange={() => context.onItemChange(stringValue)}\n                    onClick={event => {\n                        if (context.readOnly || itemDisabled) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onKeyDown={context.onItemKeyDown}\n                />\n            </VisuallyHidden>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /** Disable the whole group */\n    disabled?: boolean;\n    /** Mark the group as invalid */\n    invalid?: boolean;\n    /** Mark the group as required */\n    required?: boolean;\n    /** Prevent changing the selected value */\n    readOnly?: boolean;\n    /** Layout orientation of the group */\n    orientation?: 'horizontal' | 'vertical';\n    /** Name used for the underlying radio inputs (form submission) */\n    name?: string;\n    children: React.ReactNode;\n};\n\nexport type RadioGroupProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = RadioGroupBaseProps &\n    Either<\n        // controlled\n        {\n            /** Handler called when the value changes */\n            onChange: (value: TValue) => void;\n            /** The current value (controlled) */\n            value?: TValue;\n        },\n        // uncontrolled\n        {\n            /** The default value (uncontrolled) */\n            defaultValue?: TValue;\n        }\n    >;\n\nexport const RadioGroup = React.forwardRef(function RadioGroup<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue>,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const {\n        children,\n        className,\n        orientation = 'vertical',\n        disabled = false,\n        invalid = false,\n        required = false,\n        readOnly = false,\n        name: nameProp,\n        value: valueProp,\n        defaultValue,\n        onChange,\n        ...otherProps\n    } = props;\n\n    const name = useId(nameProp);\n    const groupRef = useMergedRef<HTMLDivElement>(ref);\n\n    const { values, enabledValues } = React.useMemo(() => {\n        const values: TValue[] = [];\n        const enabledValues: string[] = [];\n\n        React.Children.forEach(children, child => {\n            if (!React.isValidElement<RadioGroupItemProps<TValue>>(child)) {\n                return;\n            }\n\n            const value = child.props.value;\n            values.push(value);\n\n            if (!disabled && !child.props.disabled) {\n                enabledValues.push(stringifyValue(value));\n            }\n        });\n\n        return { values, enabledValues };\n    }, [children, disabled]);\n\n    // values are stringified internally (radio inputs are string-based) and mapped back to their typed value on change\n    const [selectedValue, setSelectedValue] = useControlled<string | undefined>({\n        value: valueProp === undefined ? undefined : stringifyValue(valueProp),\n        defaultValue: defaultValue === undefined ? undefined : stringifyValue(defaultValue),\n        onChange: onChange && (nextValue => onChange(getRadioItemByValue(values, nextValue as string))),\n    });\n\n    // roving tabindex: the checked item is the tab stop; if nothing is selected the first enabled item is;\n    // if the selected item is disabled the group has no tab stop (matches previous behaviour)\n    const selectedExists = selectedValue !== undefined && values.some(value => stringifyValue(value) === selectedValue);\n    let tabbableValue: string | undefined;\n\n    if (selectedExists) {\n        tabbableValue = enabledValues.includes(selectedValue as string) ? selectedValue : undefined;\n    } else {\n        tabbableValue = enabledValues[0];\n    }\n\n    const handleItemChange = (itemValue: string) => {\n        if (disabled || readOnly || itemValue === selectedValue) {\n            return;\n        }\n\n        setSelectedValue(itemValue);\n    };\n\n    const handleItemKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        const isNext = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n        const isPrevious = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n        if (!isNext && !isPrevious) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const currentIndex = enabledValues.indexOf(event.currentTarget.value);\n\n        if (disabled || readOnly || currentIndex === -1) {\n            return;\n        }\n\n        const delta = isNext ? 1 : -1;\n        const nextValue = enabledValues[(currentIndex + delta + enabledValues.length) % enabledValues.length];\n\n        setSelectedValue(nextValue);\n        Array.from(groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? [])\n            .find(input => input.value === nextValue)\n            ?.focus();\n    };\n\n    const context: RadioGroupContextValue = {\n        name,\n        selectedValue,\n        tabbableValue,\n        disabled,\n        readOnly,\n        invalid,\n        required,\n        onItemChange: handleItemChange,\n        onItemKeyDown: handleItemKeyDown,\n    };\n\n    return (\n        <div\n            {...otherProps}\n            ref={groupRef}\n            role=\"radiogroup\"\n            aria-orientation={orientation}\n            aria-disabled={disabled || undefined}\n            aria-invalid={invalid || undefined}\n            aria-required={required || undefined}\n            aria-readonly={readOnly || undefined}\n            data-taco=\"radio-group\"\n            data-disabled={disabled ? 'true' : undefined}\n            data-invalid={invalid ? 'true' : undefined}\n            data-readonly={readOnly ? 'true' : undefined}\n            data-required={required ? 'true' : undefined}\n            className={cn(\n                'flex items-start',\n                {\n                    'flex-wrap gap-x-4': orientation === 'horizontal',\n                    'flex-col gap-y-2': orientation === 'vertical',\n                },\n                className\n            )}>\n            <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>\n        </div>\n    );\n    // forwardRef erases the generic; re-apply it via a cast so `<RadioGroup<T>>` types value/onChange as T.\n    // `unknown` is needed because the `Either` union in the props prevents a direct overlap with the exotic type.\n}) as unknown as (<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue> & React.RefAttributes<HTMLDivElement>\n) => React.ReactElement) & {\n    Item: typeof RadioGroupItem;\n};\n\nRadioGroup.Item = RadioGroupItem;\n"],"names":["React","RadioGroupItem","stringifyValue","VisuallyHidden","RadioGroup","useId","useMergedRef","values","enabledValues","useControlled","getRadioItemByValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,oBAAoBA,iBAAM,cAA6C,IAAI;AAEjF,MAAM,iBAAiBA,iBAAM,WAAW,SAASC,gBAAe,OAA4B,KAAkC;AAC1H,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,eAAe;AAChE,QAAM,UAAUD,iBAAM,WAAW,iBAAiB;AAElD,MAAI,YAAY,MAAM;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,cAAcE,KAAAA,eAAe,KAAK;AACxC,QAAM,eAAe,QAAQ,YAAY,QAAQ,QAAQ;AACzD,QAAM,UAAU,QAAQ,kBAAkB;AAC1C,QAAM,WAAW,QAAQ,kBAAkB,cAAc,IAAI;AAE7D,SACIF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,iBAAe,WAAW;AAAA,MAC1B,iBAAe,gBAAgB;AAAA,MAC/B,iBAAe,QAAQ,YAAY;AAAA,MACnC,gBAAc,QAAQ,WAAW;AAAA,IAAA;AAAA,mDAChCG,eAAAA,gBAAA,MACGH,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,MAAM,QAAQ;AAAA,QACd,OAAO;AAAA,QACP;AAAA,QACA,UAAU;AAAA,QACV,UAAU,QAAQ;AAAA,QAClB;AAAA,QACA,gBAAc,QAAQ,WAAW;AAAA,QACjC,UAAU,MAAM,QAAQ,aAAa,WAAW;AAAA,QAChD,SAAS,CAAA,UAAS;AACd,cAAI,QAAQ,YAAY,cAAc;AAClC,kBAAM,eAAA;AAAA,UACV;AAAA,QACJ;AAAA,QACA,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA,CAE3B;AAAA,IACC;AAAA,EAAA;AAGb,CAAC;AAkCM,MAAM,aAAaA,iBAAM,WAAW,SAASI,YAChD,OACA,KACF;AACE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,OAAOC,MAAAA,MAAM,QAAQ;AAC3B,QAAM,WAAWC,aAAAA,aAA6B,GAAG;AAEjD,QAAM,EAAE,QAAQ,cAAA,IAAkBN,iBAAM,QAAQ,MAAM;AAClD,UAAMO,UAAmB,CAAA;AACzB,UAAMC,iBAA0B,CAAA;AAEhCR,qBAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACtC,UAAI,CAACA,iBAAM,eAA4C,KAAK,GAAG;AAC3D;AAAA,MACJ;AAEA,YAAM,QAAQ,MAAM,MAAM;AAC1BO,cAAO,KAAK,KAAK;AAEjB,UAAI,CAAC,YAAY,CAAC,MAAM,MAAM,UAAU;AACpCC,uBAAc,KAAKN,oBAAe,KAAK,CAAC;AAAA,MAC5C;AAAA,IACJ,CAAC;AAED,WAAO,EAAE,QAAAK,SAAQ,eAAAC,eAAAA;AAAAA,EACrB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAGvB,QAAM,CAAC,eAAe,gBAAgB,IAAIC,4BAAkC;AAAA,IACxE,OAAO,cAAc,SAAY,SAAYP,KAAAA,eAAe,SAAS;AAAA,IACrE,cAAc,iBAAiB,SAAY,SAAYA,KAAAA,eAAe,YAAY;AAAA,IAClF,UAAU,aAAa,CAAA,cAAa,SAASQ,yBAAoB,QAAQ,SAAmB,CAAC;AAAA,EAAA,CAChG;AAID,QAAM,iBAAiB,kBAAkB,UAAa,OAAO,KAAK,CAAA,UAASR,KAAAA,eAAe,KAAK,MAAM,aAAa;AAClH,MAAI;AAEJ,MAAI,gBAAgB;AAChB,oBAAgB,cAAc,SAAS,aAAuB,IAAI,gBAAgB;AAAA,EACtF,OAAO;AACH,oBAAgB,cAAc,CAAC;AAAA,EACnC;AAEA,QAAM,mBAAmB,CAAC,cAAsB;AAC5C,QAAI,YAAY,YAAY,cAAc,eAAe;AACrD;AAAA,IACJ;AAEA,qBAAiB,SAAS;AAAA,EAC9B;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AACxE,UAAM,SAAS,MAAM,QAAQ,eAAe,MAAM,QAAQ;AAC1D,UAAM,aAAa,MAAM,QAAQ,aAAa,MAAM,QAAQ;AAE5D,QAAI,CAAC,UAAU,CAAC,YAAY;AACxB;AAAA,IACJ;AAEA,UAAM,eAAA;AAEN,UAAM,eAAe,cAAc,QAAQ,MAAM,cAAc,KAAK;AAEpE,QAAI,YAAY,YAAY,iBAAiB,IAAI;AAC7C;AAAA,IACJ;AAEA,UAAM,QAAQ,SAAS,IAAI;AAC3B,UAAM,YAAY,eAAe,eAAe,QAAQ,cAAc,UAAU,cAAc,MAAM;AAEpG,qBAAiB,SAAS;AAC1B,UAAM,KAAK,SAAS,SAAS,iBAAmC,qBAAqB,KAAK,CAAA,CAAE,EACvF,KAAK,CAAA,UAAS,MAAM,UAAU,SAAS,GACtC,MAAA;AAAA,EACV;AAEA,QAAM,UAAkC;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,EAAA;AAGnB,SACIF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,iBAAe,YAAY;AAAA,MAC3B,gBAAc,WAAW;AAAA,MACzB,iBAAe,YAAY;AAAA,MAC3B,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,iBAAe,WAAW,SAAS;AAAA,MACnC,gBAAc,UAAU,SAAS;AAAA,MACjC,iBAAe,WAAW,SAAS;AAAA,MACnC,iBAAe,WAAW,SAAS;AAAA,MACnC,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,qBAAqB,gBAAgB;AAAA,UACrC,oBAAoB,gBAAgB;AAAA,QAAA;AAAA,QAExC;AAAA,MAAA;AAAA,IACJ;AAAA,mDACC,kBAAkB,UAAlB,EAA2B,OAAO,WAAU,QAAS;AAAA,EAAA;AAKlE,CAAC;AAMD,WAAW,OAAO;;"}

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { Either } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nimport { getRadioItemByValue, stringifyValue } from './util';\n\nimport './RadioGroup.css';\n\n// item\nexport type RadioGroupItemValue = string | number | boolean | null;\nexport type RadioGroupItemProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = Omit<\n    React.LabelHTMLAttributes<HTMLLabelElement>,\n    'onChange'\n> & {\n    /** Value of the radio button */\n    value: TValue;\n    /** Disable this radio button */\n    disabled?: boolean;\n    children?: React.ReactNode;\n};\n\ntype RadioGroupContextValue = {\n    name: string;\n    selectedValue: string | undefined;\n    tabbableValue: string | undefined;\n    disabled: boolean;\n    readOnly: boolean;\n    invalid: boolean;\n    required: boolean;\n    onItemChange: (itemValue: string) => void;\n    onItemKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLInputElement>) {\n    const { value, children, disabled, className, ...otherProps } = props;\n    const context = React.useContext(RadioGroupContext);\n\n    if (context === null) {\n        return null;\n    }\n\n    const stringValue = stringifyValue(value);\n    const itemDisabled = context.disabled || Boolean(disabled);\n    const checked = context.selectedValue === stringValue;\n    const tabIndex = context.tabbableValue === stringValue ? 0 : -1;\n\n    return (\n        <label\n            {...otherProps}\n            className={className}\n            data-taco=\"radio-group-item\"\n            data-selected={checked || undefined}\n            data-disabled={itemDisabled || undefined}\n            data-readonly={context.readOnly || undefined}\n            data-invalid={context.invalid || undefined}>\n            <VisuallyHidden>\n                <input\n                    ref={ref}\n                    type=\"radio\"\n                    name={context.name}\n                    value={stringValue}\n                    checked={checked}\n                    disabled={itemDisabled}\n                    required={context.required}\n                    tabIndex={tabIndex}\n                    aria-invalid={context.invalid || undefined}\n                    onChange={() => context.onItemChange(stringValue)}\n                    onClick={event => {\n                        if (context.readOnly || itemDisabled) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onKeyDown={context.onItemKeyDown}\n                />\n            </VisuallyHidden>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /** Disable the whole group */\n    disabled?: boolean;\n    /** Mark the group as invalid */\n    invalid?: boolean;\n    /** Mark the group as required */\n    required?: boolean;\n    /** Prevent changing the selected value */\n    readOnly?: boolean;\n    /** Layout orientation of the group */\n    orientation?: 'horizontal' | 'vertical';\n    /** Name used for the underlying radio inputs (form submission) */\n    name?: string;\n    children: React.ReactNode;\n};\n\nexport type RadioGroupProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = RadioGroupBaseProps &\n    Either<\n        // controlled\n        {\n            /** Handler called when the value changes */\n            onChange: (value: TValue) => void;\n            /** The current value (controlled) */\n            value?: TValue;\n        },\n        // uncontrolled\n        {\n            /** The default value (uncontrolled) */\n            defaultValue?: TValue;\n        }\n    >;\n\nexport const RadioGroup = React.forwardRef(function RadioGroup<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue>,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const {\n        children,\n        className,\n        orientation = 'vertical',\n        disabled = false,\n        invalid = false,\n        required = false,\n        readOnly = false,\n        name: nameProp,\n        value: valueProp,\n        defaultValue,\n        onChange,\n        ...otherProps\n    } = props;\n\n    const name = useId(nameProp);\n    const groupRef = useMergedRef<HTMLDivElement>(ref);\n\n    const { values, enabledValues } = React.useMemo(() => {\n        const values: TValue[] = [];\n        const enabledValues: string[] = [];\n\n        React.Children.forEach(children, child => {\n            if (!React.isValidElement(child)) {\n                return;\n            }\n\n            const value = child.props.value;\n            values.push(value);\n\n            if (!disabled && !child.props.disabled) {\n                enabledValues.push(stringifyValue(value));\n            }\n        });\n\n        return { values, enabledValues };\n    }, [children, disabled]);\n\n    // values are stringified internally (radio inputs are string-based) and mapped back to their typed value on change\n    const [selectedValue, setSelectedValue] = useControlled<string | undefined>({\n        value: valueProp === undefined ? undefined : stringifyValue(valueProp),\n        defaultValue: defaultValue === undefined ? undefined : stringifyValue(defaultValue),\n        onChange: onChange && (nextValue => onChange(getRadioItemByValue(values, nextValue as string))),\n    });\n\n    // roving tabindex: the checked item is the tab stop; if nothing is selected the first enabled item is;\n    // if the selected item is disabled the group has no tab stop (matches previous behaviour)\n    const selectedExists = selectedValue !== undefined && values.some(value => stringifyValue(value) === selectedValue);\n    let tabbableValue: string | undefined;\n\n    if (selectedExists) {\n        tabbableValue = enabledValues.includes(selectedValue as string) ? selectedValue : undefined;\n    } else {\n        tabbableValue = enabledValues[0];\n    }\n\n    const handleItemChange = (itemValue: string) => {\n        if (disabled || readOnly || itemValue === selectedValue) {\n            return;\n        }\n\n        setSelectedValue(itemValue);\n    };\n\n    const handleItemKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        const isNext = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n        const isPrevious = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n        if (!isNext && !isPrevious) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const currentIndex = enabledValues.indexOf(event.currentTarget.value);\n\n        if (disabled || readOnly || currentIndex === -1) {\n            return;\n        }\n\n        const delta = isNext ? 1 : -1;\n        const nextValue = enabledValues[(currentIndex + delta + enabledValues.length) % enabledValues.length];\n\n        setSelectedValue(nextValue);\n        Array.from(groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? [])\n            .find(input => input.value === nextValue)\n            ?.focus();\n    };\n\n    const context: RadioGroupContextValue = {\n        name,\n        selectedValue,\n        tabbableValue,\n        disabled,\n        readOnly,\n        invalid,\n        required,\n        onItemChange: handleItemChange,\n        onItemKeyDown: handleItemKeyDown,\n    };\n\n    return (\n        <div\n            {...otherProps}\n            ref={groupRef}\n            role=\"radiogroup\"\n            aria-orientation={orientation}\n            aria-disabled={disabled || undefined}\n            aria-invalid={invalid || undefined}\n            aria-required={required || undefined}\n            aria-readonly={readOnly || undefined}\n            data-taco=\"radio-group\"\n            data-disabled={disabled ? 'true' : undefined}\n            data-invalid={invalid ? 'true' : undefined}\n            data-readonly={readOnly ? 'true' : undefined}\n            data-required={required ? 'true' : undefined}\n            className={cn(\n                'flex items-start',\n                {\n                    'flex-wrap gap-x-4': orientation === 'horizontal',\n                    'flex-col gap-y-2': orientation === 'vertical',\n                },\n                className\n            )}>\n            <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>\n        </div>\n    );\n    // forwardRef erases the generic; re-apply it via a cast so `<RadioGroup<T>>` types value/onChange as T.\n    // `unknown` is needed because the `Either` union in the props prevents a direct overlap with the exotic type.\n}) as unknown as (<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue> & React.RefAttributes<HTMLDivElement>\n) => React.ReactElement) & {\n    Item: typeof RadioGroupItem;\n};\n\nRadioGroup.Item = RadioGroupItem;\n"],"names":["RadioGroupItem","RadioGroup","values","enabledValues"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { Either } from '../../types';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nimport { getRadioItemByValue, stringifyValue } from './util';\n\nimport './RadioGroup.css';\n\n// item\nexport type RadioGroupItemValue = string | number | boolean | null;\nexport type RadioGroupItemProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = Omit<\n    React.LabelHTMLAttributes<HTMLLabelElement>,\n    'onChange'\n> & {\n    /** Value of the radio button */\n    value: TValue;\n    /** Disable this radio button */\n    disabled?: boolean;\n    children?: React.ReactNode;\n};\n\ntype RadioGroupContextValue = {\n    name: string;\n    selectedValue: string | undefined;\n    tabbableValue: string | undefined;\n    disabled: boolean;\n    readOnly: boolean;\n    invalid: boolean;\n    required: boolean;\n    onItemChange: (itemValue: string) => void;\n    onItemKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n};\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLInputElement>) {\n    const { value, children, disabled, className, ...otherProps } = props;\n    const context = React.useContext(RadioGroupContext);\n\n    if (context === null) {\n        return null;\n    }\n\n    const stringValue = stringifyValue(value);\n    const itemDisabled = context.disabled || Boolean(disabled);\n    const checked = context.selectedValue === stringValue;\n    const tabIndex = context.tabbableValue === stringValue ? 0 : -1;\n\n    return (\n        <label\n            {...otherProps}\n            className={className}\n            data-taco=\"radio-group-item\"\n            data-selected={checked || undefined}\n            data-disabled={itemDisabled || undefined}\n            data-readonly={context.readOnly || undefined}\n            data-invalid={context.invalid || undefined}>\n            <VisuallyHidden>\n                <input\n                    ref={ref}\n                    type=\"radio\"\n                    name={context.name}\n                    value={stringValue}\n                    checked={checked}\n                    disabled={itemDisabled}\n                    required={context.required}\n                    tabIndex={tabIndex}\n                    aria-invalid={context.invalid || undefined}\n                    onChange={() => context.onItemChange(stringValue)}\n                    onClick={event => {\n                        if (context.readOnly || itemDisabled) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onKeyDown={context.onItemKeyDown}\n                />\n            </VisuallyHidden>\n            {children}\n        </label>\n    );\n});\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {\n    /** Disable the whole group */\n    disabled?: boolean;\n    /** Mark the group as invalid */\n    invalid?: boolean;\n    /** Mark the group as required */\n    required?: boolean;\n    /** Prevent changing the selected value */\n    readOnly?: boolean;\n    /** Layout orientation of the group */\n    orientation?: 'horizontal' | 'vertical';\n    /** Name used for the underlying radio inputs (form submission) */\n    name?: string;\n    children: React.ReactNode;\n};\n\nexport type RadioGroupProps<TValue extends RadioGroupItemValue = RadioGroupItemValue> = RadioGroupBaseProps &\n    Either<\n        // controlled\n        {\n            /** Handler called when the value changes */\n            onChange: (value: TValue) => void;\n            /** The current value (controlled) */\n            value?: TValue;\n        },\n        // uncontrolled\n        {\n            /** The default value (uncontrolled) */\n            defaultValue?: TValue;\n        }\n    >;\n\nexport const RadioGroup = React.forwardRef(function RadioGroup<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue>,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const {\n        children,\n        className,\n        orientation = 'vertical',\n        disabled = false,\n        invalid = false,\n        required = false,\n        readOnly = false,\n        name: nameProp,\n        value: valueProp,\n        defaultValue,\n        onChange,\n        ...otherProps\n    } = props;\n\n    const name = useId(nameProp);\n    const groupRef = useMergedRef<HTMLDivElement>(ref);\n\n    const { values, enabledValues } = React.useMemo(() => {\n        const values: TValue[] = [];\n        const enabledValues: string[] = [];\n\n        React.Children.forEach(children, child => {\n            if (!React.isValidElement<RadioGroupItemProps<TValue>>(child)) {\n                return;\n            }\n\n            const value = child.props.value;\n            values.push(value);\n\n            if (!disabled && !child.props.disabled) {\n                enabledValues.push(stringifyValue(value));\n            }\n        });\n\n        return { values, enabledValues };\n    }, [children, disabled]);\n\n    // values are stringified internally (radio inputs are string-based) and mapped back to their typed value on change\n    const [selectedValue, setSelectedValue] = useControlled<string | undefined>({\n        value: valueProp === undefined ? undefined : stringifyValue(valueProp),\n        defaultValue: defaultValue === undefined ? undefined : stringifyValue(defaultValue),\n        onChange: onChange && (nextValue => onChange(getRadioItemByValue(values, nextValue as string))),\n    });\n\n    // roving tabindex: the checked item is the tab stop; if nothing is selected the first enabled item is;\n    // if the selected item is disabled the group has no tab stop (matches previous behaviour)\n    const selectedExists = selectedValue !== undefined && values.some(value => stringifyValue(value) === selectedValue);\n    let tabbableValue: string | undefined;\n\n    if (selectedExists) {\n        tabbableValue = enabledValues.includes(selectedValue as string) ? selectedValue : undefined;\n    } else {\n        tabbableValue = enabledValues[0];\n    }\n\n    const handleItemChange = (itemValue: string) => {\n        if (disabled || readOnly || itemValue === selectedValue) {\n            return;\n        }\n\n        setSelectedValue(itemValue);\n    };\n\n    const handleItemKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        const isNext = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n        const isPrevious = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n\n        if (!isNext && !isPrevious) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const currentIndex = enabledValues.indexOf(event.currentTarget.value);\n\n        if (disabled || readOnly || currentIndex === -1) {\n            return;\n        }\n\n        const delta = isNext ? 1 : -1;\n        const nextValue = enabledValues[(currentIndex + delta + enabledValues.length) % enabledValues.length];\n\n        setSelectedValue(nextValue);\n        Array.from(groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? [])\n            .find(input => input.value === nextValue)\n            ?.focus();\n    };\n\n    const context: RadioGroupContextValue = {\n        name,\n        selectedValue,\n        tabbableValue,\n        disabled,\n        readOnly,\n        invalid,\n        required,\n        onItemChange: handleItemChange,\n        onItemKeyDown: handleItemKeyDown,\n    };\n\n    return (\n        <div\n            {...otherProps}\n            ref={groupRef}\n            role=\"radiogroup\"\n            aria-orientation={orientation}\n            aria-disabled={disabled || undefined}\n            aria-invalid={invalid || undefined}\n            aria-required={required || undefined}\n            aria-readonly={readOnly || undefined}\n            data-taco=\"radio-group\"\n            data-disabled={disabled ? 'true' : undefined}\n            data-invalid={invalid ? 'true' : undefined}\n            data-readonly={readOnly ? 'true' : undefined}\n            data-required={required ? 'true' : undefined}\n            className={cn(\n                'flex items-start',\n                {\n                    'flex-wrap gap-x-4': orientation === 'horizontal',\n                    'flex-col gap-y-2': orientation === 'vertical',\n                },\n                className\n            )}>\n            <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>\n        </div>\n    );\n    // forwardRef erases the generic; re-apply it via a cast so `<RadioGroup<T>>` types value/onChange as T.\n    // `unknown` is needed because the `Either` union in the props prevents a direct overlap with the exotic type.\n}) as unknown as (<TValue extends RadioGroupItemValue = RadioGroupItemValue>(\n    props: RadioGroupProps<TValue> & React.RefAttributes<HTMLDivElement>\n) => React.ReactElement) & {\n    Item: typeof RadioGroupItem;\n};\n\nRadioGroup.Item = RadioGroupItem;\n"],"names":["RadioGroupItem","RadioGroup","values","enabledValues"],"mappings":";;;;;;;;AAsCA,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAEjF,MAAM,iBAAiB,MAAM,WAAW,SAASA,gBAAe,OAA4B,KAAkC;AAC1H,QAAM,EAAE,OAAO,UAAU,UAAU,WAAW,GAAG,eAAe;AAChE,QAAM,UAAU,MAAM,WAAW,iBAAiB;AAElD,MAAI,YAAY,MAAM;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,eAAe,QAAQ,YAAY,QAAQ,QAAQ;AACzD,QAAM,UAAU,QAAQ,kBAAkB;AAC1C,QAAM,WAAW,QAAQ,kBAAkB,cAAc,IAAI;AAE7D,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,iBAAe,WAAW;AAAA,MAC1B,iBAAe,gBAAgB;AAAA,MAC/B,iBAAe,QAAQ,YAAY;AAAA,MACnC,gBAAc,QAAQ,WAAW;AAAA,IAAA;AAAA,wCAChC,gBAAA,MACG,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,MAAK;AAAA,QACL,MAAM,QAAQ;AAAA,QACd,OAAO;AAAA,QACP;AAAA,QACA,UAAU;AAAA,QACV,UAAU,QAAQ;AAAA,QAClB;AAAA,QACA,gBAAc,QAAQ,WAAW;AAAA,QACjC,UAAU,MAAM,QAAQ,aAAa,WAAW;AAAA,QAChD,SAAS,CAAA,UAAS;AACd,cAAI,QAAQ,YAAY,cAAc;AAClC,kBAAM,eAAA;AAAA,UACV;AAAA,QACJ;AAAA,QACA,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA,CAE3B;AAAA,IACC;AAAA,EAAA;AAGb,CAAC;AAkCM,MAAM,aAAa,MAAM,WAAW,SAASC,YAChD,OACA,KACF;AACE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,WAAW,aAA6B,GAAG;AAEjD,QAAM,EAAE,QAAQ,cAAA,IAAkB,MAAM,QAAQ,MAAM;AAClD,UAAMC,UAAmB,CAAA;AACzB,UAAMC,iBAA0B,CAAA;AAEhC,UAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACtC,UAAI,CAAC,MAAM,eAA4C,KAAK,GAAG;AAC3D;AAAA,MACJ;AAEA,YAAM,QAAQ,MAAM,MAAM;AAC1BD,cAAO,KAAK,KAAK;AAEjB,UAAI,CAAC,YAAY,CAAC,MAAM,MAAM,UAAU;AACpCC,uBAAc,KAAK,eAAe,KAAK,CAAC;AAAA,MAC5C;AAAA,IACJ,CAAC;AAED,WAAO,EAAE,QAAAD,SAAQ,eAAAC,eAAAA;AAAAA,EACrB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAGvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,cAAkC;AAAA,IACxE,OAAO,cAAc,SAAY,SAAY,eAAe,SAAS;AAAA,IACrE,cAAc,iBAAiB,SAAY,SAAY,eAAe,YAAY;AAAA,IAClF,UAAU,aAAa,CAAA,cAAa,SAAS,oBAAoB,QAAQ,SAAmB,CAAC;AAAA,EAAA,CAChG;AAID,QAAM,iBAAiB,kBAAkB,UAAa,OAAO,KAAK,CAAA,UAAS,eAAe,KAAK,MAAM,aAAa;AAClH,MAAI;AAEJ,MAAI,gBAAgB;AAChB,oBAAgB,cAAc,SAAS,aAAuB,IAAI,gBAAgB;AAAA,EACtF,OAAO;AACH,oBAAgB,cAAc,CAAC;AAAA,EACnC;AAEA,QAAM,mBAAmB,CAAC,cAAsB;AAC5C,QAAI,YAAY,YAAY,cAAc,eAAe;AACrD;AAAA,IACJ;AAEA,qBAAiB,SAAS;AAAA,EAC9B;AAEA,QAAM,oBAAoB,CAAC,UAAiD;AACxE,UAAM,SAAS,MAAM,QAAQ,eAAe,MAAM,QAAQ;AAC1D,UAAM,aAAa,MAAM,QAAQ,aAAa,MAAM,QAAQ;AAE5D,QAAI,CAAC,UAAU,CAAC,YAAY;AACxB;AAAA,IACJ;AAEA,UAAM,eAAA;AAEN,UAAM,eAAe,cAAc,QAAQ,MAAM,cAAc,KAAK;AAEpE,QAAI,YAAY,YAAY,iBAAiB,IAAI;AAC7C;AAAA,IACJ;AAEA,UAAM,QAAQ,SAAS,IAAI;AAC3B,UAAM,YAAY,eAAe,eAAe,QAAQ,cAAc,UAAU,cAAc,MAAM;AAEpG,qBAAiB,SAAS;AAC1B,UAAM,KAAK,SAAS,SAAS,iBAAmC,qBAAqB,KAAK,CAAA,CAAE,EACvF,KAAK,CAAA,UAAS,MAAM,UAAU,SAAS,GACtC,MAAA;AAAA,EACV;AAEA,QAAM,UAAkC;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,EAAA;AAGnB,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,iBAAe,YAAY;AAAA,MAC3B,gBAAc,WAAW;AAAA,MACzB,iBAAe,YAAY;AAAA,MAC3B,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,iBAAe,WAAW,SAAS;AAAA,MACnC,gBAAc,UAAU,SAAS;AAAA,MACjC,iBAAe,WAAW,SAAS;AAAA,MACnC,iBAAe,WAAW,SAAS;AAAA,MACnC,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,qBAAqB,gBAAgB;AAAA,UACrC,oBAAoB,gBAAgB;AAAA,QAAA;AAAA,QAExC;AAAA,MAAA;AAAA,IACJ;AAAA,wCACC,kBAAkB,UAAlB,EAA2B,OAAO,WAAU,QAAS;AAAA,EAAA;AAKlE,CAAC;AAMD,WAAW,OAAO;"}

package/dist/components/Report/Report.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Report.cjs","sources":["../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { fixedForwardRef } from '../../types';\n\nimport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\nimport { useReport } from './useReport';\n\nconst Column: React.FC<ReportColumnProps<unknown>> & {\n    <TType = unknown>(_: ReportColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["fixedForwardRef","BaseReport","useReport","Table","Report"],"mappings":";;;;;;AAQA,MAAM,SAEF,MAAM;AAEV,OAAO,cAAc;AAErB,SAAS,MAAM,GAAqB;AAChC,SAAO;AACX;AAEA,MAAM,aAAaA,MAAAA,gBAAgB,SAASC,YAA4B,OAA2B,KAA2B;AAC1H,QAAM,SAASC,UAAAA,UAAiB,OAAO,GAAG;AAE1C,6CACKC,MAAAA,OAAA,MACG,sBAAA,cAACA,MAAAA,MAAM,SAAN,EAAqB,OAAO,OAAA,CAAQ,GACrC,sBAAA,cAACA,MAAAA,MAAM,MAAN,EAAkB,aAAU,gBAAe,OAAO,QAAQ,CAC/D;AAER,CAAC;AAEM,MAAM,SAASH,MAAAA,gBAAgB,SAASI,QAAwB,OAA2B,KAA2B;AACzH,QAAM,sBAAsB,OAAO,MAAM,QAAQ;AAGjD,QAAM,MAAM,MAAM,QAAQ,MAAM,OAAO,cAAc,mBAAmB,GAAG,CAAC,mBAAmB,CAAC;AAChG,SAAO,sBAAA,cAAC,YAAA,EAAmB,GAAG,OAAO,KAAU,KAAU;AAC7D,CAAC;AAID,OAAO,SAAS;AAChB,OAAO,QAAQ;;"}
+{"version":3,"file":"Report.cjs","sources":["../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { fixedForwardRef } from '../../types';\n\nimport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\nimport { useReport } from './useReport';\n\nconst Column: React.FC<ReportColumnProps<unknown>> & {\n    <TType = unknown>(_: ReportColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => React.JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["fixedForwardRef","BaseReport","useReport","Table","Report"],"mappings":";;;;;;AAQA,MAAM,SAEF,MAAM;AAEV,OAAO,cAAc;AAErB,SAAS,MAAM,GAAqB;AAChC,SAAO;AACX;AAEA,MAAM,aAAaA,MAAAA,gBAAgB,SAASC,YAA4B,OAA2B,KAA2B;AAC1H,QAAM,SAASC,UAAAA,UAAiB,OAAO,GAAG;AAE1C,6CACKC,MAAAA,OAAA,MACG,sBAAA,cAACA,MAAAA,MAAM,SAAN,EAAqB,OAAO,OAAA,CAAQ,GACrC,sBAAA,cAACA,MAAAA,MAAM,MAAN,EAAkB,aAAU,gBAAe,OAAO,QAAQ,CAC/D;AAER,CAAC;AAEM,MAAM,SAASH,MAAAA,gBAAgB,SAASI,QAAwB,OAA2B,KAA2B;AACzH,QAAM,sBAAsB,OAAO,MAAM,QAAQ;AAGjD,QAAM,MAAM,MAAM,QAAQ,MAAM,OAAO,cAAc,mBAAmB,GAAG,CAAC,mBAAmB,CAAC;AAChG,SAAO,sBAAA,cAAC,YAAA,EAAmB,GAAG,OAAO,KAAU,KAAU;AAC7D,CAAC;AAID,OAAO,SAAS;AAChB,OAAO,QAAQ;;"}

package/dist/components/Report/Report.d.ts

@@ -4,7 +4,7 @@ declare const Column: React.FC<ReportColumnProps<unknown>> & {
     <TType = unknown>(_: ReportColumnProps<TType>): null;
 };
 declare function Group(_: ReportGroupProps): null;
-export declare const Report: (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {
+export declare const Report: (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => React.JSX.Element) & {
     Column: typeof Column;
     Group: typeof Group;
 };

package/dist/components/Report/Report.js.map

@@ -1 +1 @@
-{"version":3,"file":"Report.js","sources":["../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { fixedForwardRef } from '../../types';\n\nimport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\nimport { useReport } from './useReport';\n\nconst Column: React.FC<ReportColumnProps<unknown>> & {\n    <TType = unknown>(_: ReportColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["BaseReport","React","Report"],"mappings":";;;;AAQA,MAAM,SAEF,MAAM;AAEV,OAAO,cAAc;AAErB,SAAS,MAAM,GAAqB;AAChC,SAAO;AACX;AAEA,MAAM,aAAa,gBAAgB,SAASA,YAA4B,OAA2B,KAA2B;AAC1H,QAAM,SAAS,UAAiB,OAAO,GAAG;AAE1C,sDACK,OAAA,MACGC,+BAAA,cAAC,MAAM,SAAN,EAAqB,OAAO,OAAA,CAAQ,GACrCA,+BAAA,cAAC,MAAM,MAAN,EAAkB,aAAU,gBAAe,OAAO,QAAQ,CAC/D;AAER,CAAC;AAEM,MAAM,SAAS,gBAAgB,SAASC,QAAwB,OAA2B,KAA2B;AACzH,QAAM,sBAAsB,OAAO,MAAM,QAAQ;AAGjD,QAAM,MAAMD,eAAM,QAAQ,MAAM,OAAO,cAAc,mBAAmB,GAAG,CAAC,mBAAmB,CAAC;AAChG,SAAOA,+BAAA,cAAC,YAAA,EAAmB,GAAG,OAAO,KAAU,KAAU;AAC7D,CAAC;AAID,OAAO,SAAS;AAChB,OAAO,QAAQ;"}
+{"version":3,"file":"Report.js","sources":["../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { fixedForwardRef } from '../../types';\n\nimport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\nimport { useReport } from './useReport';\n\nconst Column: React.FC<ReportColumnProps<unknown>> & {\n    <TType = unknown>(_: ReportColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => React.JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["BaseReport","React","Report"],"mappings":";;;;AAQA,MAAM,SAEF,MAAM;AAEV,OAAO,cAAc;AAErB,SAAS,MAAM,GAAqB;AAChC,SAAO;AACX;AAEA,MAAM,aAAa,gBAAgB,SAASA,YAA4B,OAA2B,KAA2B;AAC1H,QAAM,SAAS,UAAiB,OAAO,GAAG;AAE1C,sDACK,OAAA,MACGC,+BAAA,cAAC,MAAM,SAAN,EAAqB,OAAO,OAAA,CAAQ,GACrCA,+BAAA,cAAC,MAAM,MAAN,EAAkB,aAAU,gBAAe,OAAO,QAAQ,CAC/D;AAER,CAAC;AAEM,MAAM,SAAS,gBAAgB,SAASC,QAAwB,OAA2B,KAA2B;AACzH,QAAM,sBAAsB,OAAO,MAAM,QAAQ;AAGjD,QAAM,MAAMD,eAAM,QAAQ,MAAM,OAAO,cAAc,mBAAmB,GAAG,CAAC,mBAAmB,CAAC;AAChG,SAAOA,+BAAA,cAAC,YAAA,EAAmB,GAAG,OAAO,KAAU,KAAU;AAC7D,CAAC;AAID,OAAO,SAAS;AAChB,OAAO,QAAQ;"}

package/dist/components/SearchInput2/SearchInput2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>;\n\ntype BasicSearchInput2Props = {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <LegacyIconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!bg-blue-100 text-blue-900': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","LegacyIconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}
+{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: React.JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>;\n\ntype BasicSearchInput2Props = {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <LegacyIconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!bg-blue-100 text-blue-900': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","LegacyIconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}

package/dist/components/SearchInput2/SearchInput2.d.ts

@@ -4,7 +4,7 @@ type CommonSearchInput2Props = {
     loading?: boolean;
     onChange: (value: string) => void;
     onClear?: () => void;
-    settingsContent?: JSX.Element;
+    settingsContent?: React.JSX.Element;
     shortcut?: string | KeyDownHandlerOptions;
     value?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>;

package/dist/components/SearchInput2/SearchInput2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>;\n\ntype BasicSearchInput2Props = {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <LegacyIconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!bg-blue-100 text-blue-900': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}
+{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport type { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Icon } from '../Icon/Icon';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CommonSearchInput2Props = {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: React.JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>;\n\ntype BasicSearchInput2Props = {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n} & CommonSearchInput2Props;\n\ntype ComplexSearchInput2Props = {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n} & CommonSearchInput2Props;\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <LegacyIconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black-subtle pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <LegacyIconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black-subtle [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!bg-blue-100 text-blue-900': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'absolute left-0 right-0 top-full -mt-0.5 hidden flex-col gap-y-4 rounded-b border border-t-0 border-gray-300 bg-white p-3 !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))] shadow focus-within:flex group-focus-within:flex'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\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, '-mt-px mr-1'),\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","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
+{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { createCustomEvent } from '../../utils/input';\nimport type { ListboxProps } from '../Listbox/Listbox';\nimport type { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { useLocalization } from '../Provider/Localization';\n\nimport type { SelectProps } from './Select';\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 = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'popover'> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | React.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 | React.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, '-mt-px mr-1'),\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","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

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

@@ -9,12 +9,12 @@ type InternalListboxProps = ListboxProps & {
 type InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref: React.ForwardedRef<HTMLInputElement>;
 };
-type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
+type useSelect = Omit<React.HtmlHTMLAttributes<HTMLDivElement>, 'popover'> & {
     button: InternalButtonProps;
     listbox: InternalListboxProps;
     input: InternalInputProps;
     popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;
-    text: string | JSX.Element;
+    text: string | React.JSX.Element;
     more?: number;
 };
 export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onBlur, onClick: _1, onChange, readOnly, tabIndex, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;