@economic/taco 14.0.0-tanstack-virtual-update.0 → 14.0.0

package/dist/components/Menu/components/Content.cjs

@@ -4,6 +4,7 @@ const menu = require("@base-ui/react/menu");
 const cn = require("clsx");
 const React = require("react");
 const useMergedRef = require("../../../hooks/useMergedRef.cjs");
+const flattenChildren = require("../../../utils/flattenChildren.cjs");
 const keyboard = require("../../../utils/keyboard.cjs");
 const Context = require("../Context.cjs");
 function _interopNamespaceDefault(e) {
@@ -34,7 +35,7 @@ const Content = React__namespace.forwardRef(function MenuContent(props, ref) {
   const childrenRefs = React__namespace.useRef([]);
   const childrenWithRefs = React__namespace.Children.toArray(props.children).filter((child) => !!child).map((child, index) => {
     childrenRefs.current[index] = React__namespace.createRef();
-    return React__namespace.cloneElement(child, { ref: childrenRefs.current[index] });
+    return flattenChildren.isFragment(child) ? child : React__namespace.cloneElement(child, { ref: childrenRefs.current[index] });
   });
   React__namespace.useEffect(() => {
     const shortcuts = [];

package/dist/components/Menu/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { Align, Placement } from '@/types';\nimport { createShortcutKeyDownHandler } from '@/utils/keyboard';\n\nimport { useCurrentMenu } from '../Context';\n\nimport type { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children: _1, placement: side, ...otherProps } = props;\n    const className = cn(\n        'block rounded border border-transparent bg-white p-1 text-black outline-none yt-shadow',\n        props.className\n    );\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement | null>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n\n                        const dialog = document.querySelector('[role=\"dialog\"]');\n\n                        // Don't trigger the shortcut if it is outside of the dialog\n                        if (dialog && !dialog?.contains(internalRef.current)) {\n                            return;\n                        }\n\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        // Use capture phase to intercept events before Base UI menu items can stop propagation\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler, { capture: true }));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler, { capture: true }));\n        };\n    }, []);\n\n    return (\n        <MenuPrimitive.Portal>\n            <MenuPrimitive.Positioner align={align} side={side} sideOffset={3}>\n                <MenuPrimitive.Popup\n                    {...otherProps}\n                    className={className}\n                    data-taco=\"menu\"\n                    style={{ minWidth: menu?.minWidth }}\n                    ref={internalRef}>\n                    {childrenWithRefs}\n                </MenuPrimitive.Popup>\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n});\n"],"names":["React","useMergedRef","menu","useCurrentMenu","createShortcutKeyDownHandler","MenuPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,UAAUA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAgC;AAClH,QAAM,cAAcC,aAAAA,aAAkB,GAAG;AACzC,QAAMC,SAAOC,QAAAA,eAAA;AACb,QAAM,EAAE,QAAQ,SAAS,UAAU,IAAI,WAAW,MAAM,GAAG,WAAA,IAAe;AAC1E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,eAAeH,iBAAM,OAAiD,EAAE;AAC9E,QAAM,mBAAoBA,iBAAM,SAAS,QAAQ,MAAM,QAAQ,EAC1D,OAAO,CAAA,UAAS,CAAC,CAAC,KAAK,EACvB,IAAI,CAAC,OAAO,UAAU;AACnB,iBAAa,QAAQ,KAAK,IAAIA,iBAAM,UAAA;AACpC,WAAOA,iBAAM,aAAa,OAAO,EAAE,KAAK,aAAa,QAAQ,KAAK,GAAG;AAAA,EACzE,CAAC;AAGLA,mBAAM,UAAU,MAAM;AAClB,UAAM,YAAgD,CAAA;AACtD,qBAAiB,QAAQ,CAAC,OAAO,UAAU;AACvC,UAAI,MAAM,MAAM,UAAU;AACtB,kBAAU;AAAA,UACNI,SAAAA,6BAA6B,MAAM,MAAM,UAAU,CAAA,UAAS;AACxD,kBAAM,eAAA;AAEN,kBAAM,SAAS,SAAS,cAAc,iBAAiB;AAGvD,gBAAI,UAAU,CAAC,QAAQ,SAAS,YAAY,OAAO,GAAG;AAClD;AAAA,YACJ;AAEAF,oBAAM,KAAA;AACN,uBAAW,MAAM,aAAa,QAAQ,KAAK,GAAG,SAAS,MAAA,GAAS,CAAC;AAAA,UACrE,CAAC;AAAA,QAAA;AAAA,MAET;AAAA,IACJ,CAAC;AAGD,cAAU,QAAQ,CAAA,YAAW,SAAS,iBAAiB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAE7F,WAAO,MAAM;AACT,gBAAU,QAAQ,CAAA,YAAW,SAAS,oBAAoB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACpG;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACIF,iCAAA,cAACK,KAAAA,KAAc,QAAd,MACGL,iCAAA,cAACK,KAAAA,KAAc,YAAd,EAAyB,OAAc,MAAY,YAAY,EAAA,GAC5DL,iCAAA;AAAA,IAACK,KAAAA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,OAAO,EAAE,UAAUH,QAAM,SAAA;AAAA,MACzB,KAAK;AAAA,IAAA;AAAA,IACJ;AAAA,EAAA,CAET,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { Align, Placement } from '@/types';\nimport { isFragment } from '@/utils/flattenChildren';\nimport { createShortcutKeyDownHandler } from '@/utils/keyboard';\n\nimport { useCurrentMenu } from '../Context';\n\nimport type { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children: _1, placement: side, ...otherProps } = props;\n    const className = cn(\n        'block rounded border border-transparent bg-white p-1 text-black outline-none yt-shadow',\n        props.className\n    );\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement | null>[]>([]);\n    const childrenWithRefs = (\n        React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: React.Ref<HTMLDivElement> }>[]\n    )\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return isFragment(child) ? child : React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n\n                        const dialog = document.querySelector('[role=\"dialog\"]');\n\n                        // Don't trigger the shortcut if it is outside of the dialog\n                        if (dialog && !dialog?.contains(internalRef.current)) {\n                            return;\n                        }\n\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        // Use capture phase to intercept events before Base UI menu items can stop propagation\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler, { capture: true }));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler, { capture: true }));\n        };\n    }, []);\n\n    return (\n        <MenuPrimitive.Portal>\n            <MenuPrimitive.Positioner align={align} side={side} sideOffset={3}>\n                <MenuPrimitive.Popup\n                    {...otherProps}\n                    className={className}\n                    data-taco=\"menu\"\n                    style={{ minWidth: menu?.minWidth }}\n                    ref={internalRef}>\n                    {childrenWithRefs}\n                </MenuPrimitive.Popup>\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n});\n"],"names":["React","useMergedRef","menu","useCurrentMenu","isFragment","createShortcutKeyDownHandler","MenuPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,UAAUA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAgC;AAClH,QAAM,cAAcC,aAAAA,aAAkB,GAAG;AACzC,QAAMC,SAAOC,QAAAA,eAAA;AACb,QAAM,EAAE,QAAQ,SAAS,UAAU,IAAI,WAAW,MAAM,GAAG,WAAA,IAAe;AAC1E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,eAAeH,iBAAM,OAAiD,EAAE;AAC9E,QAAM,mBACFA,iBAAM,SAAS,QAAQ,MAAM,QAAQ,EAEpC,OAAO,CAAA,UAAS,CAAC,CAAC,KAAK,EACvB,IAAI,CAAC,OAAO,UAAU;AACnB,iBAAa,QAAQ,KAAK,IAAIA,iBAAM,UAAA;AACpC,WAAOI,gBAAAA,WAAW,KAAK,IAAI,QAAQJ,iBAAM,aAAa,OAAO,EAAE,KAAK,aAAa,QAAQ,KAAK,GAAG;AAAA,EACrG,CAAC;AAGLA,mBAAM,UAAU,MAAM;AAClB,UAAM,YAAgD,CAAA;AACtD,qBAAiB,QAAQ,CAAC,OAAO,UAAU;AACvC,UAAI,MAAM,MAAM,UAAU;AACtB,kBAAU;AAAA,UACNK,SAAAA,6BAA6B,MAAM,MAAM,UAAU,CAAA,UAAS;AACxD,kBAAM,eAAA;AAEN,kBAAM,SAAS,SAAS,cAAc,iBAAiB;AAGvD,gBAAI,UAAU,CAAC,QAAQ,SAAS,YAAY,OAAO,GAAG;AAClD;AAAA,YACJ;AAEAH,oBAAM,KAAA;AACN,uBAAW,MAAM,aAAa,QAAQ,KAAK,GAAG,SAAS,MAAA,GAAS,CAAC;AAAA,UACrE,CAAC;AAAA,QAAA;AAAA,MAET;AAAA,IACJ,CAAC;AAGD,cAAU,QAAQ,CAAA,YAAW,SAAS,iBAAiB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAE7F,WAAO,MAAM;AACT,gBAAU,QAAQ,CAAA,YAAW,SAAS,oBAAoB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACpG;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACIF,iCAAA,cAACM,KAAAA,KAAc,QAAd,MACGN,iCAAA,cAACM,KAAAA,KAAc,YAAd,EAAyB,OAAc,MAAY,YAAY,EAAA,GAC5DN,iCAAA;AAAA,IAACM,KAAAA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,OAAO,EAAE,UAAUJ,QAAM,SAAA;AAAA,MACzB,KAAK;AAAA,IAAA;AAAA,IACJ;AAAA,EAAA,CAET,CACJ;AAER,CAAC;;"}

package/dist/components/Menu/components/Content.js

@@ -2,6 +2,7 @@ import { Menu } from "@base-ui/react/menu";
 import cn from "clsx";
 import * as React from "react";
 import { useMergedRef } from "../../../hooks/useMergedRef.js";
+import { isFragment } from "../../../utils/flattenChildren.js";
 import { createShortcutKeyDownHandler } from "../../../utils/keyboard.js";
 import { useCurrentMenu } from "../Context.js";
 const Content = React.forwardRef(function MenuContent(props, ref) {
@@ -15,7 +16,7 @@ const Content = React.forwardRef(function MenuContent(props, ref) {
   const childrenRefs = React.useRef([]);
   const childrenWithRefs = React.Children.toArray(props.children).filter((child) => !!child).map((child, index) => {
     childrenRefs.current[index] = React.createRef();
-    return React.cloneElement(child, { ref: childrenRefs.current[index] });
+    return isFragment(child) ? child : React.cloneElement(child, { ref: childrenRefs.current[index] });
   });
   React.useEffect(() => {
     const shortcuts = [];

package/dist/components/Menu/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { Align, Placement } from '@/types';\nimport { createShortcutKeyDownHandler } from '@/utils/keyboard';\n\nimport { useCurrentMenu } from '../Context';\n\nimport type { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children: _1, placement: side, ...otherProps } = props;\n    const className = cn(\n        'block rounded border border-transparent bg-white p-1 text-black outline-none yt-shadow',\n        props.className\n    );\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement | null>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n\n                        const dialog = document.querySelector('[role=\"dialog\"]');\n\n                        // Don't trigger the shortcut if it is outside of the dialog\n                        if (dialog && !dialog?.contains(internalRef.current)) {\n                            return;\n                        }\n\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        // Use capture phase to intercept events before Base UI menu items can stop propagation\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler, { capture: true }));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler, { capture: true }));\n        };\n    }, []);\n\n    return (\n        <MenuPrimitive.Portal>\n            <MenuPrimitive.Positioner align={align} side={side} sideOffset={3}>\n                <MenuPrimitive.Popup\n                    {...otherProps}\n                    className={className}\n                    data-taco=\"menu\"\n                    style={{ minWidth: menu?.minWidth }}\n                    ref={internalRef}>\n                    {childrenWithRefs}\n                </MenuPrimitive.Popup>\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n});\n"],"names":["MenuPrimitive"],"mappings":";;;;;;AAmBO,MAAM,UAAU,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAgC;AAClH,QAAM,cAAc,aAAkB,GAAG;AACzC,QAAM,OAAO,eAAA;AACb,QAAM,EAAE,QAAQ,SAAS,UAAU,IAAI,WAAW,MAAM,GAAG,WAAA,IAAe;AAC1E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,eAAe,MAAM,OAAiD,EAAE;AAC9E,QAAM,mBAAoB,MAAM,SAAS,QAAQ,MAAM,QAAQ,EAC1D,OAAO,CAAA,UAAS,CAAC,CAAC,KAAK,EACvB,IAAI,CAAC,OAAO,UAAU;AACnB,iBAAa,QAAQ,KAAK,IAAI,MAAM,UAAA;AACpC,WAAO,MAAM,aAAa,OAAO,EAAE,KAAK,aAAa,QAAQ,KAAK,GAAG;AAAA,EACzE,CAAC;AAGL,QAAM,UAAU,MAAM;AAClB,UAAM,YAAgD,CAAA;AACtD,qBAAiB,QAAQ,CAAC,OAAO,UAAU;AACvC,UAAI,MAAM,MAAM,UAAU;AACtB,kBAAU;AAAA,UACN,6BAA6B,MAAM,MAAM,UAAU,CAAA,UAAS;AACxD,kBAAM,eAAA;AAEN,kBAAM,SAAS,SAAS,cAAc,iBAAiB;AAGvD,gBAAI,UAAU,CAAC,QAAQ,SAAS,YAAY,OAAO,GAAG;AAClD;AAAA,YACJ;AAEA,kBAAM,KAAA;AACN,uBAAW,MAAM,aAAa,QAAQ,KAAK,GAAG,SAAS,MAAA,GAAS,CAAC;AAAA,UACrE,CAAC;AAAA,QAAA;AAAA,MAET;AAAA,IACJ,CAAC;AAGD,cAAU,QAAQ,CAAA,YAAW,SAAS,iBAAiB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAE7F,WAAO,MAAM;AACT,gBAAU,QAAQ,CAAA,YAAW,SAAS,oBAAoB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACpG;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACI,sBAAA,cAACA,KAAc,QAAd,MACG,sBAAA,cAACA,KAAc,YAAd,EAAyB,OAAc,MAAY,YAAY,EAAA,GAC5D,sBAAA;AAAA,IAACA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,OAAO,EAAE,UAAU,MAAM,SAAA;AAAA,MACzB,KAAK;AAAA,IAAA;AAAA,IACJ;AAAA,EAAA,CAET,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport type { Align, Placement } from '@/types';\nimport { isFragment } from '@/utils/flattenChildren';\nimport { createShortcutKeyDownHandler } from '@/utils/keyboard';\n\nimport { useCurrentMenu } from '../Context';\n\nimport type { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children: _1, placement: side, ...otherProps } = props;\n    const className = cn(\n        'block rounded border border-transparent bg-white p-1 text-black outline-none yt-shadow',\n        props.className\n    );\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement | null>[]>([]);\n    const childrenWithRefs = (\n        React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: React.Ref<HTMLDivElement> }>[]\n    )\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return isFragment(child) ? child : React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n\n                        const dialog = document.querySelector('[role=\"dialog\"]');\n\n                        // Don't trigger the shortcut if it is outside of the dialog\n                        if (dialog && !dialog?.contains(internalRef.current)) {\n                            return;\n                        }\n\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        // Use capture phase to intercept events before Base UI menu items can stop propagation\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler, { capture: true }));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler, { capture: true }));\n        };\n    }, []);\n\n    return (\n        <MenuPrimitive.Portal>\n            <MenuPrimitive.Positioner align={align} side={side} sideOffset={3}>\n                <MenuPrimitive.Popup\n                    {...otherProps}\n                    className={className}\n                    data-taco=\"menu\"\n                    style={{ minWidth: menu?.minWidth }}\n                    ref={internalRef}>\n                    {childrenWithRefs}\n                </MenuPrimitive.Popup>\n            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n});\n"],"names":["MenuPrimitive"],"mappings":";;;;;;;AAoBO,MAAM,UAAU,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAgC;AAClH,QAAM,cAAc,aAAkB,GAAG;AACzC,QAAM,OAAO,eAAA;AACb,QAAM,EAAE,QAAQ,SAAS,UAAU,IAAI,WAAW,MAAM,GAAG,WAAA,IAAe;AAC1E,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAIV,QAAM,eAAe,MAAM,OAAiD,EAAE;AAC9E,QAAM,mBACF,MAAM,SAAS,QAAQ,MAAM,QAAQ,EAEpC,OAAO,CAAA,UAAS,CAAC,CAAC,KAAK,EACvB,IAAI,CAAC,OAAO,UAAU;AACnB,iBAAa,QAAQ,KAAK,IAAI,MAAM,UAAA;AACpC,WAAO,WAAW,KAAK,IAAI,QAAQ,MAAM,aAAa,OAAO,EAAE,KAAK,aAAa,QAAQ,KAAK,GAAG;AAAA,EACrG,CAAC;AAGL,QAAM,UAAU,MAAM;AAClB,UAAM,YAAgD,CAAA;AACtD,qBAAiB,QAAQ,CAAC,OAAO,UAAU;AACvC,UAAI,MAAM,MAAM,UAAU;AACtB,kBAAU;AAAA,UACN,6BAA6B,MAAM,MAAM,UAAU,CAAA,UAAS;AACxD,kBAAM,eAAA;AAEN,kBAAM,SAAS,SAAS,cAAc,iBAAiB;AAGvD,gBAAI,UAAU,CAAC,QAAQ,SAAS,YAAY,OAAO,GAAG;AAClD;AAAA,YACJ;AAEA,kBAAM,KAAA;AACN,uBAAW,MAAM,aAAa,QAAQ,KAAK,GAAG,SAAS,MAAA,GAAS,CAAC;AAAA,UACrE,CAAC;AAAA,QAAA;AAAA,MAET;AAAA,IACJ,CAAC;AAGD,cAAU,QAAQ,CAAA,YAAW,SAAS,iBAAiB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAE7F,WAAO,MAAM;AACT,gBAAU,QAAQ,CAAA,YAAW,SAAS,oBAAoB,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,IACpG;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACI,sBAAA,cAACA,KAAc,QAAd,MACG,sBAAA,cAACA,KAAc,YAAd,EAAyB,OAAc,MAAY,YAAY,EAAA,GAC5D,sBAAA;AAAA,IAACA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,OAAO,EAAE,UAAU,MAAM,SAAA;AAAA,MACzB,KAAK;AAAA,IAAA;AAAA,IACJ;AAAA,EAAA,CAET,CACJ;AAER,CAAC;"}

package/dist/components/OverflowGroup/OverflowGroup.cjs

@@ -4,6 +4,7 @@ const cn = require("clsx");
 const React = require("react");
 const useIntersectionObserver = require("../../hooks/useIntersectionObserver.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
+const flattenChildren = require("../../utils/flattenChildren.cjs");
 const Localization = require("../Provider/Localization.cjs");
 const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Menu = require("../Menu/Menu.cjs");
@@ -47,7 +48,7 @@ const OverflowGroup = React.forwardRef(function OverflowGroup2(props, ref) {
   const MoreButton = moreButton?.(moreButtonText) ?? /* @__PURE__ */ React.createElement(IconButton.LegacyIconButton, { icon: "more" });
   const className = cn("flex overflow-hidden", props.className);
   return /* @__PURE__ */ React.createElement("div", { ...attributes, className, "data-taco": "overflow-group", ref: internalRef }, children.map(
-    (child, index) => React.cloneElement(child, {
+    (child, index) => flattenChildren.isFragment(child) ? child : React.cloneElement(child, {
       className: cn(child.props.className, {
         visible: intersectedChildIndex === void 0 || index < intersectedChildIndex,
         "pointer-events-none invisible order-[100]": intersectedChildIndex !== void 0 && index >= intersectedChildIndex

package/dist/components/OverflowGroup/OverflowGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowGroup.cjs","sources":["../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyButtonProps, MenuProps } from '@/components';\nimport { LegacyIconButton, Menu, useLocalization } from '@/components';\nimport { useIntersectionObserver } from '@/hooks/useIntersectionObserver';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nconst sanitizeButtonPropsForMenuItem = (button: React.JSX.Element, index: number) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<LegacyButtonProps>;\n    wrapChild?: true | undefined;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, wrapChild, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<LegacyButtonProps>[];\n    const hiddenChildren = intersectedChildIndex === undefined ? [] : children.slice(intersectedChildIndex);\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <LegacyIconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'pointer-events-none invisible order-[100]':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: (menuProps: MenuProps) => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>\n                                  {hiddenChildren.map((child, index) =>\n                                      wrapChild ? (\n                                          <Menu.Item key={index}>{child}</Menu.Item>\n                                      ) : (\n                                          sanitizeButtonPropsForMenuItem(child, index)\n                                      )\n                                  )}\n                              </Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["Menu","OverflowGroup","useMergedRef","useLocalization","useIntersectionObserver","LegacyIconButton"],"mappings":";;;;;;;;;AAQA,MAAM,iCAAiC,CAAC,QAA2B,UAAkB;AACjF,QAAM,OAA2B,OAAO,MAAM,MAAM,OAAO,MAAM;AACjE,QAAM,MAAM,OAAOA,KAAAA,KAAK,OAAOA,KAAAA,KAAK;AAGpC,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACH,OAAO;AAEX,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,KAAK;AAAA,IACL,QAAQ,OAAQ,KAAK,WAAW,MAAM,IAAI,WAAW,UAAW;AAAA,EAAA;AAGpE,MAAI,IAAI;AACJ,WAAO,MAAM,aAAa,QAAQ,EAAE,IAAI,KAAK,GAAG,OAAO;AAAA,EAC3D;AAEA,SAAO,sBAAA,cAAC,KAAA,EAAK,GAAG,MAAA,CAAO;AAC3B;AAOA,MAAM,iBAAiB,KAAK;AAErB,MAAM,gBAAgB,MAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AAC5H,QAAM,EAAE,YAAY,WAAW,GAAG,eAAe;AACjD,QAAM,cAAcC,aAAAA,aAA6B,GAAG;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,cAAc;AACnE,QAAM,oBAAoB,MAAM,YAAY,CAAC,OAAoB,eAAe,IAAI,sBAAA,GAAyB,KAAK,GAAG,CAAA,CAAE;AACvH,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAElB,QAAM,wBAAwBC,wBAAAA,wBAAwB,aAAa,WAAW;AAC9E,QAAM,WAAW,MAAM,SAAS,QAAQ,MAAM,QAAQ;AACtD,QAAM,iBAAiB,0BAA0B,SAAY,CAAA,IAAK,SAAS,MAAM,qBAAqB;AACtG,QAAM,sBAAsB,eAAe;AAC3C,QAAM,iBAAiB,sBAAsB,GAAG,mBAAmB,IAAI,MAAM,OAAO,IAAI,KAAK;AAE7F,QAAM,aAAa,aAAa,cAAc,KAAK,sBAAA,cAACC,6BAAA,EAAiB,MAAK,QAAO;AAEjF,QAAM,YAAY,GAAG,wBAAwB,MAAM,SAAS;AAE5D,SACI,sBAAA,cAAC,SAAK,GAAG,YAAY,WAAsB,aAAU,kBAAiB,KAAK,YAAA,GACtE,SAAS;AAAA,IAAI,CAAC,OAAO,UAClB,MAAM,aAAa,OAAO;AAAA,MACtB,WAAW,GAAG,MAAM,MAAM,WAAW;AAAA,QACjC,SAAS,0BAA0B,UAAa,QAAQ;AAAA,QACxD,6CACI,0BAA0B,UAAa,SAAS;AAAA,MAAA,CACvD;AAAA,IAAA,CACJ;AAAA,EAAA,GAEJ,eAAe,SACV,MAAM,aAAa,YAAY;AAAA,IAC3B,WAAW,GAAG,6BAA6B,WAAW,MAAM,SAAS;AAAA,IACrE,wBAAwB;AAAA,IACxB,MAAM,CAAC,cACH,sBAAA,cAACL,KAAAA,MAAA,EAAM,GAAG,UAAA,GACN,sBAAA,cAACA,KAAAA,KAAK,SAAL,MACI,eAAe;AAAA,MAAI,CAAC,OAAO,UACxB,gDACKA,KAAAA,KAAK,MAAL,EAAU,KAAK,MAAA,GAAQ,KAAM,IAE9B,+BAA+B,OAAO,KAAK;AAAA,IAAA,CAGvD,CACJ;AAAA,IAEJ,KAAK;AAAA,EAAA,CACR,IACD,IACV;AAER,CAAC;;"}
+{"version":3,"file":"OverflowGroup.cjs","sources":["../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyButtonProps, MenuProps } from '@/components';\nimport { LegacyIconButton, Menu, useLocalization } from '@/components';\nimport { useIntersectionObserver } from '@/hooks/useIntersectionObserver';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isFragment } from '@/utils/flattenChildren';\n\nconst sanitizeButtonPropsForMenuItem = (button: React.JSX.Element, index: number) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<LegacyButtonProps>;\n    wrapChild?: true | undefined;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, wrapChild, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<LegacyButtonProps>[];\n    const hiddenChildren = intersectedChildIndex === undefined ? [] : children.slice(intersectedChildIndex);\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <LegacyIconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                isFragment(child)\n                    ? child\n                    : React.cloneElement(child, {\n                          className: cn(child.props.className, {\n                              visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                              'pointer-events-none invisible order-[100]':\n                                  intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                          }),\n                      })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: (menuProps: MenuProps) => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>\n                                  {hiddenChildren.map((child, index) =>\n                                      wrapChild ? (\n                                          <Menu.Item key={index}>{child}</Menu.Item>\n                                      ) : (\n                                          sanitizeButtonPropsForMenuItem(child, index)\n                                      )\n                                  )}\n                              </Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["Menu","OverflowGroup","useMergedRef","useLocalization","useIntersectionObserver","LegacyIconButton","isFragment"],"mappings":";;;;;;;;;;AASA,MAAM,iCAAiC,CAAC,QAA2B,UAAkB;AACjF,QAAM,OAA2B,OAAO,MAAM,MAAM,OAAO,MAAM;AACjE,QAAM,MAAM,OAAOA,KAAAA,KAAK,OAAOA,KAAAA,KAAK;AAGpC,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACH,OAAO;AAEX,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,KAAK;AAAA,IACL,QAAQ,OAAQ,KAAK,WAAW,MAAM,IAAI,WAAW,UAAW;AAAA,EAAA;AAGpE,MAAI,IAAI;AACJ,WAAO,MAAM,aAAa,QAAQ,EAAE,IAAI,KAAK,GAAG,OAAO;AAAA,EAC3D;AAEA,SAAO,sBAAA,cAAC,KAAA,EAAK,GAAG,MAAA,CAAO;AAC3B;AAOA,MAAM,iBAAiB,KAAK;AAErB,MAAM,gBAAgB,MAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AAC5H,QAAM,EAAE,YAAY,WAAW,GAAG,eAAe;AACjD,QAAM,cAAcC,aAAAA,aAA6B,GAAG;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,cAAc;AACnE,QAAM,oBAAoB,MAAM,YAAY,CAAC,OAAoB,eAAe,IAAI,sBAAA,GAAyB,KAAK,GAAG,CAAA,CAAE;AACvH,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAElB,QAAM,wBAAwBC,wBAAAA,wBAAwB,aAAa,WAAW;AAC9E,QAAM,WAAW,MAAM,SAAS,QAAQ,MAAM,QAAQ;AACtD,QAAM,iBAAiB,0BAA0B,SAAY,CAAA,IAAK,SAAS,MAAM,qBAAqB;AACtG,QAAM,sBAAsB,eAAe;AAC3C,QAAM,iBAAiB,sBAAsB,GAAG,mBAAmB,IAAI,MAAM,OAAO,IAAI,KAAK;AAE7F,QAAM,aAAa,aAAa,cAAc,KAAK,sBAAA,cAACC,6BAAA,EAAiB,MAAK,QAAO;AAEjF,QAAM,YAAY,GAAG,wBAAwB,MAAM,SAAS;AAE5D,SACI,sBAAA,cAAC,SAAK,GAAG,YAAY,WAAsB,aAAU,kBAAiB,KAAK,YAAA,GACtE,SAAS;AAAA,IAAI,CAAC,OAAO,UAClBC,2BAAW,KAAK,IACV,QACA,MAAM,aAAa,OAAO;AAAA,MACtB,WAAW,GAAG,MAAM,MAAM,WAAW;AAAA,QACjC,SAAS,0BAA0B,UAAa,QAAQ;AAAA,QACxD,6CACI,0BAA0B,UAAa,SAAS;AAAA,MAAA,CACvD;AAAA,IAAA,CACJ;AAAA,EAAA,GAEV,eAAe,SACV,MAAM,aAAa,YAAY;AAAA,IAC3B,WAAW,GAAG,6BAA6B,WAAW,MAAM,SAAS;AAAA,IACrE,wBAAwB;AAAA,IACxB,MAAM,CAAC,cACH,sBAAA,cAACN,KAAAA,MAAA,EAAM,GAAG,UAAA,GACN,sBAAA,cAACA,KAAAA,KAAK,SAAL,MACI,eAAe;AAAA,MAAI,CAAC,OAAO,UACxB,gDACKA,KAAAA,KAAK,MAAL,EAAU,KAAK,MAAA,GAAQ,KAAM,IAE9B,+BAA+B,OAAO,KAAK;AAAA,IAAA,CAGvD,CACJ;AAAA,IAEJ,KAAK;AAAA,EAAA,CACR,IACD,IACV;AAER,CAAC;;"}

package/dist/components/OverflowGroup/OverflowGroup.js

@@ -2,6 +2,7 @@ import cn from "clsx";
 import React__default from "react";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
+import { isFragment } from "../../utils/flattenChildren.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { Menu } from "../Menu/Menu.js";
@@ -45,7 +46,7 @@ const OverflowGroup = React__default.forwardRef(function OverflowGroup2(props, r
   const MoreButton = moreButton?.(moreButtonText) ?? /* @__PURE__ */ React__default.createElement(LegacyIconButton, { icon: "more" });
   const className = cn("flex overflow-hidden", props.className);
   return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className, "data-taco": "overflow-group", ref: internalRef }, children.map(
-    (child, index) => React__default.cloneElement(child, {
+    (child, index) => isFragment(child) ? child : React__default.cloneElement(child, {
       className: cn(child.props.className, {
         visible: intersectedChildIndex === void 0 || index < intersectedChildIndex,
         "pointer-events-none invisible order-[100]": intersectedChildIndex !== void 0 && index >= intersectedChildIndex

package/dist/components/OverflowGroup/OverflowGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowGroup.js","sources":["../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyButtonProps, MenuProps } from '@/components';\nimport { LegacyIconButton, Menu, useLocalization } from '@/components';\nimport { useIntersectionObserver } from '@/hooks/useIntersectionObserver';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nconst sanitizeButtonPropsForMenuItem = (button: React.JSX.Element, index: number) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<LegacyButtonProps>;\n    wrapChild?: true | undefined;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, wrapChild, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<LegacyButtonProps>[];\n    const hiddenChildren = intersectedChildIndex === undefined ? [] : children.slice(intersectedChildIndex);\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <LegacyIconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'pointer-events-none invisible order-[100]':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: (menuProps: MenuProps) => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>\n                                  {hiddenChildren.map((child, index) =>\n                                      wrapChild ? (\n                                          <Menu.Item key={index}>{child}</Menu.Item>\n                                      ) : (\n                                          sanitizeButtonPropsForMenuItem(child, index)\n                                      )\n                                  )}\n                              </Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["React","OverflowGroup"],"mappings":";;;;;;;AAQA,MAAM,iCAAiC,CAAC,QAA2B,UAAkB;AACjF,QAAM,OAA2B,OAAO,MAAM,MAAM,OAAO,MAAM;AACjE,QAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAGpC,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACH,OAAO;AAEX,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,KAAK;AAAA,IACL,QAAQ,OAAQ,KAAK,WAAW,MAAM,IAAI,WAAW,UAAW;AAAA,EAAA;AAGpE,MAAI,IAAI;AACJ,WAAOA,eAAM,aAAa,QAAQ,EAAE,IAAI,KAAK,GAAG,OAAO;AAAA,EAC3D;AAEA,SAAOA,+BAAA,cAAC,KAAA,EAAK,GAAG,MAAA,CAAO;AAC3B;AAOA,MAAM,iBAAiB,KAAK;AAErB,MAAM,gBAAgBA,eAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AAC5H,QAAM,EAAE,YAAY,WAAW,GAAG,eAAe;AACjD,QAAM,cAAc,aAA6B,GAAG;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAID,eAAM,SAAS,cAAc;AACnE,QAAM,oBAAoBA,eAAM,YAAY,CAAC,OAAoB,eAAe,IAAI,sBAAA,GAAyB,KAAK,GAAG,CAAA,CAAE;AACvH,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,wBAAwB,wBAAwB,aAAa,WAAW;AAC9E,QAAM,WAAWA,eAAM,SAAS,QAAQ,MAAM,QAAQ;AACtD,QAAM,iBAAiB,0BAA0B,SAAY,CAAA,IAAK,SAAS,MAAM,qBAAqB;AACtG,QAAM,sBAAsB,eAAe;AAC3C,QAAM,iBAAiB,sBAAsB,GAAG,mBAAmB,IAAI,MAAM,OAAO,IAAI,KAAK;AAE7F,QAAM,aAAa,aAAa,cAAc,KAAKA,+BAAA,cAAC,kBAAA,EAAiB,MAAK,QAAO;AAEjF,QAAM,YAAY,GAAG,wBAAwB,MAAM,SAAS;AAE5D,SACIA,+BAAA,cAAC,SAAK,GAAG,YAAY,WAAsB,aAAU,kBAAiB,KAAK,YAAA,GACtE,SAAS;AAAA,IAAI,CAAC,OAAO,UAClBA,eAAM,aAAa,OAAO;AAAA,MACtB,WAAW,GAAG,MAAM,MAAM,WAAW;AAAA,QACjC,SAAS,0BAA0B,UAAa,QAAQ;AAAA,QACxD,6CACI,0BAA0B,UAAa,SAAS;AAAA,MAAA,CACvD;AAAA,IAAA,CACJ;AAAA,EAAA,GAEJ,eAAe,SACVA,eAAM,aAAa,YAAY;AAAA,IAC3B,WAAW,GAAG,6BAA6B,WAAW,MAAM,SAAS;AAAA,IACrE,wBAAwB;AAAA,IACxB,MAAM,CAAC,cACHA,+BAAA,cAAC,MAAA,EAAM,GAAG,UAAA,GACNA,+BAAA,cAAC,KAAK,SAAL,MACI,eAAe;AAAA,MAAI,CAAC,OAAO,UACxB,yDACK,KAAK,MAAL,EAAU,KAAK,MAAA,GAAQ,KAAM,IAE9B,+BAA+B,OAAO,KAAK;AAAA,IAAA,CAGvD,CACJ;AAAA,IAEJ,KAAK;AAAA,EAAA,CACR,IACD,IACV;AAER,CAAC;"}
+{"version":3,"file":"OverflowGroup.js","sources":["../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyButtonProps, MenuProps } from '@/components';\nimport { LegacyIconButton, Menu, useLocalization } from '@/components';\nimport { useIntersectionObserver } from '@/hooks/useIntersectionObserver';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { isFragment } from '@/utils/flattenChildren';\n\nconst sanitizeButtonPropsForMenuItem = (button: React.JSX.Element, index: number) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<LegacyButtonProps>;\n    wrapChild?: true | undefined;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, wrapChild, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<LegacyButtonProps>[];\n    const hiddenChildren = intersectedChildIndex === undefined ? [] : children.slice(intersectedChildIndex);\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <LegacyIconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                isFragment(child)\n                    ? child\n                    : React.cloneElement(child, {\n                          className: cn(child.props.className, {\n                              visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                              'pointer-events-none invisible order-[100]':\n                                  intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                          }),\n                      })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: (menuProps: MenuProps) => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>\n                                  {hiddenChildren.map((child, index) =>\n                                      wrapChild ? (\n                                          <Menu.Item key={index}>{child}</Menu.Item>\n                                      ) : (\n                                          sanitizeButtonPropsForMenuItem(child, index)\n                                      )\n                                  )}\n                              </Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["React","OverflowGroup"],"mappings":";;;;;;;;AASA,MAAM,iCAAiC,CAAC,QAA2B,UAAkB;AACjF,QAAM,OAA2B,OAAO,MAAM,MAAM,OAAO,MAAM;AACjE,QAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAGpC,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACH,OAAO;AAEX,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,KAAK;AAAA,IACL,QAAQ,OAAQ,KAAK,WAAW,MAAM,IAAI,WAAW,UAAW;AAAA,EAAA;AAGpE,MAAI,IAAI;AACJ,WAAOA,eAAM,aAAa,QAAQ,EAAE,IAAI,KAAK,GAAG,OAAO;AAAA,EAC3D;AAEA,SAAOA,+BAAA,cAAC,KAAA,EAAK,GAAG,MAAA,CAAO;AAC3B;AAOA,MAAM,iBAAiB,KAAK;AAErB,MAAM,gBAAgBA,eAAM,WAAW,SAASC,eAAc,OAA2B,KAAgC;AAC5H,QAAM,EAAE,YAAY,WAAW,GAAG,eAAe;AACjD,QAAM,cAAc,aAA6B,GAAG;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAID,eAAM,SAAS,cAAc;AACnE,QAAM,oBAAoBA,eAAM,YAAY,CAAC,OAAoB,eAAe,IAAI,sBAAA,GAAyB,KAAK,GAAG,CAAA,CAAE;AACvH,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,wBAAwB,wBAAwB,aAAa,WAAW;AAC9E,QAAM,WAAWA,eAAM,SAAS,QAAQ,MAAM,QAAQ;AACtD,QAAM,iBAAiB,0BAA0B,SAAY,CAAA,IAAK,SAAS,MAAM,qBAAqB;AACtG,QAAM,sBAAsB,eAAe;AAC3C,QAAM,iBAAiB,sBAAsB,GAAG,mBAAmB,IAAI,MAAM,OAAO,IAAI,KAAK;AAE7F,QAAM,aAAa,aAAa,cAAc,KAAKA,+BAAA,cAAC,kBAAA,EAAiB,MAAK,QAAO;AAEjF,QAAM,YAAY,GAAG,wBAAwB,MAAM,SAAS;AAE5D,SACIA,+BAAA,cAAC,SAAK,GAAG,YAAY,WAAsB,aAAU,kBAAiB,KAAK,YAAA,GACtE,SAAS;AAAA,IAAI,CAAC,OAAO,UAClB,WAAW,KAAK,IACV,QACAA,eAAM,aAAa,OAAO;AAAA,MACtB,WAAW,GAAG,MAAM,MAAM,WAAW;AAAA,QACjC,SAAS,0BAA0B,UAAa,QAAQ;AAAA,QACxD,6CACI,0BAA0B,UAAa,SAAS;AAAA,MAAA,CACvD;AAAA,IAAA,CACJ;AAAA,EAAA,GAEV,eAAe,SACVA,eAAM,aAAa,YAAY;AAAA,IAC3B,WAAW,GAAG,6BAA6B,WAAW,MAAM,SAAS;AAAA,IACrE,wBAAwB;AAAA,IACxB,MAAM,CAAC,cACHA,+BAAA,cAAC,MAAA,EAAM,GAAG,UAAA,GACNA,+BAAA,cAAC,KAAK,SAAL,MACI,eAAe;AAAA,MAAI,CAAC,OAAO,UACxB,yDACK,KAAK,MAAL,EAAU,KAAK,MAAA,GAAQ,KAAM,IAE9B,+BAA+B,OAAO,KAAK;AAAA,IAAA,CAGvD,CACJ;AAAA,IAEJ,KAAK;AAAA,EAAA,CACR,IACD,IACV;AAER,CAAC;"}

package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.cjs

@@ -105,9 +105,10 @@ const DisplayRow = React.memo(
     React.useEffect(() => {
       const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;
       const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;
-      requestAnimationFrame(() => {
+      const frameId = requestAnimationFrame(() => {
         measureRow(rowHeight + expansionHeight);
       });
+      return () => cancelAnimationFrame(frameId);
     }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);
     const className = cn("group/row", otherAttributes.className, {
       "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",

package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayRow.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { isElementInteractive } from '@/utils/dom';\nimport { useDropTarget } from '@/utils/hooks/useDropTarget';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { TableRowWithMetaData } from '../../../../types';\nimport type { TableRowRendererProps } from '../../../types';\nimport { Cell } from '../../Columns/Cell/Cell';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> &\n    TableRowRendererProps<TType> & {\n        remeasureDependencies?: React.DependencyList;\n    };\n\nexport const DisplayRow = React.memo(\n    React.forwardRef<HTMLTableRowElement, DisplayRowProps>(function DisplayRow<TType = unknown>(\n        props: DisplayRowProps<TType>,\n        externalRef: React.Ref<HTMLTableRowElement>\n    ) {\n        const {\n            children,\n            cellRenderer: CellRenderer,\n            index,\n            measureRow,\n            row,\n            table,\n            remeasureDependencies = [],\n            ...otherAttributes\n        } = props;\n        const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n        const attributes: any = {\n            ...otherAttributes,\n            'data-row-id': row.id,\n            'data-row-index': index,\n            tabIndex: -1,\n        };\n\n        const handleClick = React.useCallback(\n            (event: React.MouseEvent<HTMLTableRowElement>) => {\n                const clickedElement = event.target as HTMLElement;\n\n                if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n                    return;\n                }\n\n                tableMeta.rowClick.handleClick(event, row.original);\n            },\n            [row.original]\n        );\n        const handlePointerDown = React.useCallback(() => {\n            requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));\n        }, [index]);\n\n        // row active\n        if (tableMeta.rowActive.isEnabled) {\n            attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n            // we use pointerdown because it let's us picks up clicks on components inside the row, e.g. checkboxes\n            attributes.onPointerDown = handlePointerDown;\n        }\n\n        // row click\n        if (tableMeta.rowClick.isEnabled(row.original)) {\n            attributes.onClick = handleClick;\n        }\n\n        // row drag\n        if (tableMeta.rowDrag.isEnabled) {\n            attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n            attributes.draggable = true;\n            const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n            attributes.onDragStart = (event: React.DragEvent): void => {\n                let rows = [row];\n\n                if (row.getCanSelect()) {\n                    rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n                }\n\n                const data = rows.map(row => row.original);\n\n                tableMeta.rowDrag.setDragging?.(\n                    rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n                );\n\n                // set a default data value so that the consumer doesn't have to\n                event.dataTransfer.setData('text', JSON.stringify(data));\n\n                const showPlaceholder = (text: string) => {\n                    const ghost = document.createElement('div');\n                    ghost.id = GHOST_ELEMENT_ID;\n                    ghost.className = 'bg-blue-500 text-white rounded flex w-48 p-4 absolute -ml-[100vw]';\n                    ghost.innerText = text;\n                    document.body.append(ghost);\n                    event.dataTransfer.setDragImage(ghost, 0, 0);\n                };\n\n                const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n                tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n            };\n\n            attributes.onDragEnd = (): void => {\n                document.getElementById(GHOST_ELEMENT_ID)?.remove();\n                tableMeta.rowDrag.setDragging?.({});\n            };\n        }\n\n        // row drop\n        const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n        if (tableMeta.rowDrop.isEnabled) {\n            attributes.onDragEnter = dropTargetProps?.onDragEnter;\n            attributes.onDragLeave = dropTargetProps?.onDragLeave;\n            attributes.onDragOver = dropTargetProps?.onDragOver;\n            attributes.onDrop = dropTargetProps?.onDrop;\n            attributes['data-row-dragged-over'] = isDraggedOver;\n        }\n\n        // row grouping\n        if (table.options.enableGrouping) {\n            attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n        }\n\n        // row selection\n        if (row.getCanSelect()) {\n            attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n        }\n\n        // row expansion\n        // When grouping is enabled, a group header row also reports getIsExpanded() === true\n        // when its children are visible. Skip the renderer in that case — otherwise row.original\n        // (the first child's data) gets rendered as expansion content under the header.\n        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {\n            attributes['data-row-expanded'] = true;\n            expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n        }\n\n        const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n        if (rowMeta?.layout) {\n            attributes['data-row-meta-layout'] = rowMeta.layout;\n        }\n\n        const ref = React.useRef<HTMLTableRowElement>(null);\n        const expansionRef = React.useRef<HTMLTableRowElement>(null);\n        const expandedRowSize = useResizeObserver(expansionRef, !!expandedRow);\n\n        React.useEffect(() => {\n            const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;\n            const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;\n\n            // Deferred a frame — resizeItem can trigger a synchronous flushSync, which React\n            // rejects when called straight from this effect while still committing.\n            requestAnimationFrame(() => {\n                measureRow(rowHeight + expansionHeight);\n            });\n        }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);\n\n        const className = cn('group/row', otherAttributes.className, {\n            'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n            'hover:cursor-pointer': typeof attributes.onClick === 'function',\n        });\n\n        const isGrouped = row.getIsGrouped();\n\n        const mergedRef = mergeRefs([ref, externalRef]);\n\n        return (\n            <>\n                <tr {...attributes} className={className} ref={mergedRef}>\n                    {children}\n                    {row\n                        .getVisibleCells()\n                        // Filter out the row actions cell from rendering in Grouped Row\n                        .filter(cell => !(isGrouped && cell.column.id === '__actions'))\n                        .map((cell, cellIndex) => (\n                            <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n                        ))}\n                </tr>\n                {expandedRow ? (\n                    <tr data-row-parent-id={row.id} ref={expansionRef}>\n                        <td className=\"col-span-full\">{expandedRow}</td>\n                    </tr>\n                ) : null}\n            </>\n        );\n    })\n) as <TType = unknown>(props: DisplayRowProps<TType> & { ref?: React.Ref<HTMLTableRowElement> }) => React.JSX.Element;\n"],"names":["DisplayRow","isElementInteractive","row","useDropTarget","useResizeObserver","mergeRefs","Cell"],"mappings":"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"}
+{"version":3,"file":"DisplayRow.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { isElementInteractive } from '@/utils/dom';\nimport { useDropTarget } from '@/utils/hooks/useDropTarget';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { TableRowWithMetaData } from '../../../../types';\nimport type { TableRowRendererProps } from '../../../types';\nimport { Cell } from '../../Columns/Cell/Cell';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> &\n    TableRowRendererProps<TType> & {\n        remeasureDependencies?: React.DependencyList;\n    };\n\nexport const DisplayRow = React.memo(\n    React.forwardRef<HTMLTableRowElement, DisplayRowProps>(function DisplayRow<TType = unknown>(\n        props: DisplayRowProps<TType>,\n        externalRef: React.Ref<HTMLTableRowElement>\n    ) {\n        const {\n            children,\n            cellRenderer: CellRenderer,\n            index,\n            measureRow,\n            row,\n            table,\n            remeasureDependencies = [],\n            ...otherAttributes\n        } = props;\n        const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n        const attributes: any = {\n            ...otherAttributes,\n            'data-row-id': row.id,\n            'data-row-index': index,\n            tabIndex: -1,\n        };\n\n        const handleClick = React.useCallback(\n            (event: React.MouseEvent<HTMLTableRowElement>) => {\n                const clickedElement = event.target as HTMLElement;\n\n                if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n                    return;\n                }\n\n                tableMeta.rowClick.handleClick(event, row.original);\n            },\n            [row.original]\n        );\n        const handlePointerDown = React.useCallback(() => {\n            requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));\n        }, [index]);\n\n        // row active\n        if (tableMeta.rowActive.isEnabled) {\n            attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n            // we use pointerdown because it let's us picks up clicks on components inside the row, e.g. checkboxes\n            attributes.onPointerDown = handlePointerDown;\n        }\n\n        // row click\n        if (tableMeta.rowClick.isEnabled(row.original)) {\n            attributes.onClick = handleClick;\n        }\n\n        // row drag\n        if (tableMeta.rowDrag.isEnabled) {\n            attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n            attributes.draggable = true;\n            const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n            attributes.onDragStart = (event: React.DragEvent): void => {\n                let rows = [row];\n\n                if (row.getCanSelect()) {\n                    rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n                }\n\n                const data = rows.map(row => row.original);\n\n                tableMeta.rowDrag.setDragging?.(\n                    rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n                );\n\n                // set a default data value so that the consumer doesn't have to\n                event.dataTransfer.setData('text', JSON.stringify(data));\n\n                const showPlaceholder = (text: string) => {\n                    const ghost = document.createElement('div');\n                    ghost.id = GHOST_ELEMENT_ID;\n                    ghost.className = 'bg-blue-500 text-white rounded flex w-48 p-4 absolute -ml-[100vw]';\n                    ghost.innerText = text;\n                    document.body.append(ghost);\n                    event.dataTransfer.setDragImage(ghost, 0, 0);\n                };\n\n                const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n                tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n            };\n\n            attributes.onDragEnd = (): void => {\n                document.getElementById(GHOST_ELEMENT_ID)?.remove();\n                tableMeta.rowDrag.setDragging?.({});\n            };\n        }\n\n        // row drop\n        const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n        if (tableMeta.rowDrop.isEnabled) {\n            attributes.onDragEnter = dropTargetProps?.onDragEnter;\n            attributes.onDragLeave = dropTargetProps?.onDragLeave;\n            attributes.onDragOver = dropTargetProps?.onDragOver;\n            attributes.onDrop = dropTargetProps?.onDrop;\n            attributes['data-row-dragged-over'] = isDraggedOver;\n        }\n\n        // row grouping\n        if (table.options.enableGrouping) {\n            attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n        }\n\n        // row selection\n        if (row.getCanSelect()) {\n            attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n        }\n\n        // row expansion\n        // When grouping is enabled, a group header row also reports getIsExpanded() === true\n        // when its children are visible. Skip the renderer in that case — otherwise row.original\n        // (the first child's data) gets rendered as expansion content under the header.\n        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {\n            attributes['data-row-expanded'] = true;\n            expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n        }\n\n        const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n        if (rowMeta?.layout) {\n            attributes['data-row-meta-layout'] = rowMeta.layout;\n        }\n\n        const ref = React.useRef<HTMLTableRowElement>(null);\n        const expansionRef = React.useRef<HTMLTableRowElement>(null);\n        const expandedRowSize = useResizeObserver(expansionRef, !!expandedRow);\n\n        React.useEffect(() => {\n            const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;\n            const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;\n\n            // Deferred a frame — resizeItem can trigger a synchronous flushSync, which React\n            // rejects when called straight from this effect while still committing. Cancelled\n            // on cleanup so a stale frame can't fire measureRow after this row unmounts or a\n            // dep change (e.g. a new remeasure) supersedes it.\n            const frameId = requestAnimationFrame(() => {\n                measureRow(rowHeight + expansionHeight);\n            });\n\n            return () => cancelAnimationFrame(frameId);\n        }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);\n\n        const className = cn('group/row', otherAttributes.className, {\n            'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n            'hover:cursor-pointer': typeof attributes.onClick === 'function',\n        });\n\n        const isGrouped = row.getIsGrouped();\n\n        const mergedRef = mergeRefs([ref, externalRef]);\n\n        return (\n            <>\n                <tr {...attributes} className={className} ref={mergedRef}>\n                    {children}\n                    {row\n                        .getVisibleCells()\n                        // Filter out the row actions cell from rendering in Grouped Row\n                        .filter(cell => !(isGrouped && cell.column.id === '__actions'))\n                        .map((cell, cellIndex) => (\n                            <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n                        ))}\n                </tr>\n                {expandedRow ? (\n                    <tr data-row-parent-id={row.id} ref={expansionRef}>\n                        <td className=\"col-span-full\">{expandedRow}</td>\n                    </tr>\n                ) : null}\n            </>\n        );\n    })\n) as <TType = unknown>(props: DisplayRowProps<TType> & { ref?: React.Ref<HTMLTableRowElement> }) => React.JSX.Element;\n"],"names":["DisplayRow","isElementInteractive","row","useDropTarget","useResizeObserver","mergeRefs","Cell"],"mappings":"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"}

package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js

@@ -103,9 +103,10 @@ const DisplayRow = React__default.memo(
     React__default.useEffect(() => {
       const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;
       const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;
-      requestAnimationFrame(() => {
+      const frameId = requestAnimationFrame(() => {
         measureRow(rowHeight + expansionHeight);
       });
+      return () => cancelAnimationFrame(frameId);
     }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);
     const className = cn("group/row", otherAttributes.className, {
       "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",

package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { isElementInteractive } from '@/utils/dom';\nimport { useDropTarget } from '@/utils/hooks/useDropTarget';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { TableRowWithMetaData } from '../../../../types';\nimport type { TableRowRendererProps } from '../../../types';\nimport { Cell } from '../../Columns/Cell/Cell';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> &\n    TableRowRendererProps<TType> & {\n        remeasureDependencies?: React.DependencyList;\n    };\n\nexport const DisplayRow = React.memo(\n    React.forwardRef<HTMLTableRowElement, DisplayRowProps>(function DisplayRow<TType = unknown>(\n        props: DisplayRowProps<TType>,\n        externalRef: React.Ref<HTMLTableRowElement>\n    ) {\n        const {\n            children,\n            cellRenderer: CellRenderer,\n            index,\n            measureRow,\n            row,\n            table,\n            remeasureDependencies = [],\n            ...otherAttributes\n        } = props;\n        const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n        const attributes: any = {\n            ...otherAttributes,\n            'data-row-id': row.id,\n            'data-row-index': index,\n            tabIndex: -1,\n        };\n\n        const handleClick = React.useCallback(\n            (event: React.MouseEvent<HTMLTableRowElement>) => {\n                const clickedElement = event.target as HTMLElement;\n\n                if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n                    return;\n                }\n\n                tableMeta.rowClick.handleClick(event, row.original);\n            },\n            [row.original]\n        );\n        const handlePointerDown = React.useCallback(() => {\n            requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));\n        }, [index]);\n\n        // row active\n        if (tableMeta.rowActive.isEnabled) {\n            attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n            // we use pointerdown because it let's us picks up clicks on components inside the row, e.g. checkboxes\n            attributes.onPointerDown = handlePointerDown;\n        }\n\n        // row click\n        if (tableMeta.rowClick.isEnabled(row.original)) {\n            attributes.onClick = handleClick;\n        }\n\n        // row drag\n        if (tableMeta.rowDrag.isEnabled) {\n            attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n            attributes.draggable = true;\n            const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n            attributes.onDragStart = (event: React.DragEvent): void => {\n                let rows = [row];\n\n                if (row.getCanSelect()) {\n                    rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n                }\n\n                const data = rows.map(row => row.original);\n\n                tableMeta.rowDrag.setDragging?.(\n                    rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n                );\n\n                // set a default data value so that the consumer doesn't have to\n                event.dataTransfer.setData('text', JSON.stringify(data));\n\n                const showPlaceholder = (text: string) => {\n                    const ghost = document.createElement('div');\n                    ghost.id = GHOST_ELEMENT_ID;\n                    ghost.className = 'bg-blue-500 text-white rounded flex w-48 p-4 absolute -ml-[100vw]';\n                    ghost.innerText = text;\n                    document.body.append(ghost);\n                    event.dataTransfer.setDragImage(ghost, 0, 0);\n                };\n\n                const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n                tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n            };\n\n            attributes.onDragEnd = (): void => {\n                document.getElementById(GHOST_ELEMENT_ID)?.remove();\n                tableMeta.rowDrag.setDragging?.({});\n            };\n        }\n\n        // row drop\n        const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n        if (tableMeta.rowDrop.isEnabled) {\n            attributes.onDragEnter = dropTargetProps?.onDragEnter;\n            attributes.onDragLeave = dropTargetProps?.onDragLeave;\n            attributes.onDragOver = dropTargetProps?.onDragOver;\n            attributes.onDrop = dropTargetProps?.onDrop;\n            attributes['data-row-dragged-over'] = isDraggedOver;\n        }\n\n        // row grouping\n        if (table.options.enableGrouping) {\n            attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n        }\n\n        // row selection\n        if (row.getCanSelect()) {\n            attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n        }\n\n        // row expansion\n        // When grouping is enabled, a group header row also reports getIsExpanded() === true\n        // when its children are visible. Skip the renderer in that case — otherwise row.original\n        // (the first child's data) gets rendered as expansion content under the header.\n        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {\n            attributes['data-row-expanded'] = true;\n            expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n        }\n\n        const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n        if (rowMeta?.layout) {\n            attributes['data-row-meta-layout'] = rowMeta.layout;\n        }\n\n        const ref = React.useRef<HTMLTableRowElement>(null);\n        const expansionRef = React.useRef<HTMLTableRowElement>(null);\n        const expandedRowSize = useResizeObserver(expansionRef, !!expandedRow);\n\n        React.useEffect(() => {\n            const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;\n            const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;\n\n            // Deferred a frame — resizeItem can trigger a synchronous flushSync, which React\n            // rejects when called straight from this effect while still committing.\n            requestAnimationFrame(() => {\n                measureRow(rowHeight + expansionHeight);\n            });\n        }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);\n\n        const className = cn('group/row', otherAttributes.className, {\n            'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n            'hover:cursor-pointer': typeof attributes.onClick === 'function',\n        });\n\n        const isGrouped = row.getIsGrouped();\n\n        const mergedRef = mergeRefs([ref, externalRef]);\n\n        return (\n            <>\n                <tr {...attributes} className={className} ref={mergedRef}>\n                    {children}\n                    {row\n                        .getVisibleCells()\n                        // Filter out the row actions cell from rendering in Grouped Row\n                        .filter(cell => !(isGrouped && cell.column.id === '__actions'))\n                        .map((cell, cellIndex) => (\n                            <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n                        ))}\n                </tr>\n                {expandedRow ? (\n                    <tr data-row-parent-id={row.id} ref={expansionRef}>\n                        <td className=\"col-span-full\">{expandedRow}</td>\n                    </tr>\n                ) : null}\n            </>\n        );\n    })\n) as <TType = unknown>(props: DisplayRowProps<TType> & { ref?: React.Ref<HTMLTableRowElement> }) => React.JSX.Element;\n"],"names":["React","DisplayRow","row"],"mappings":"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"}
+{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { isElementInteractive } from '@/utils/dom';\nimport { useDropTarget } from '@/utils/hooks/useDropTarget';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport type { TableRowWithMetaData } from '../../../../types';\nimport type { TableRowRendererProps } from '../../../types';\nimport { Cell } from '../../Columns/Cell/Cell';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> &\n    TableRowRendererProps<TType> & {\n        remeasureDependencies?: React.DependencyList;\n    };\n\nexport const DisplayRow = React.memo(\n    React.forwardRef<HTMLTableRowElement, DisplayRowProps>(function DisplayRow<TType = unknown>(\n        props: DisplayRowProps<TType>,\n        externalRef: React.Ref<HTMLTableRowElement>\n    ) {\n        const {\n            children,\n            cellRenderer: CellRenderer,\n            index,\n            measureRow,\n            row,\n            table,\n            remeasureDependencies = [],\n            ...otherAttributes\n        } = props;\n        const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n        const attributes: any = {\n            ...otherAttributes,\n            'data-row-id': row.id,\n            'data-row-index': index,\n            tabIndex: -1,\n        };\n\n        const handleClick = React.useCallback(\n            (event: React.MouseEvent<HTMLTableRowElement>) => {\n                const clickedElement = event.target as HTMLElement;\n\n                if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n                    return;\n                }\n\n                tableMeta.rowClick.handleClick(event, row.original);\n            },\n            [row.original]\n        );\n        const handlePointerDown = React.useCallback(() => {\n            requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));\n        }, [index]);\n\n        // row active\n        if (tableMeta.rowActive.isEnabled) {\n            attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n            // we use pointerdown because it let's us picks up clicks on components inside the row, e.g. checkboxes\n            attributes.onPointerDown = handlePointerDown;\n        }\n\n        // row click\n        if (tableMeta.rowClick.isEnabled(row.original)) {\n            attributes.onClick = handleClick;\n        }\n\n        // row drag\n        if (tableMeta.rowDrag.isEnabled) {\n            attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n            attributes.draggable = true;\n            const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n            attributes.onDragStart = (event: React.DragEvent): void => {\n                let rows = [row];\n\n                if (row.getCanSelect()) {\n                    rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n                }\n\n                const data = rows.map(row => row.original);\n\n                tableMeta.rowDrag.setDragging?.(\n                    rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n                );\n\n                // set a default data value so that the consumer doesn't have to\n                event.dataTransfer.setData('text', JSON.stringify(data));\n\n                const showPlaceholder = (text: string) => {\n                    const ghost = document.createElement('div');\n                    ghost.id = GHOST_ELEMENT_ID;\n                    ghost.className = 'bg-blue-500 text-white rounded flex w-48 p-4 absolute -ml-[100vw]';\n                    ghost.innerText = text;\n                    document.body.append(ghost);\n                    event.dataTransfer.setDragImage(ghost, 0, 0);\n                };\n\n                const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n                tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n            };\n\n            attributes.onDragEnd = (): void => {\n                document.getElementById(GHOST_ELEMENT_ID)?.remove();\n                tableMeta.rowDrag.setDragging?.({});\n            };\n        }\n\n        // row drop\n        const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n        if (tableMeta.rowDrop.isEnabled) {\n            attributes.onDragEnter = dropTargetProps?.onDragEnter;\n            attributes.onDragLeave = dropTargetProps?.onDragLeave;\n            attributes.onDragOver = dropTargetProps?.onDragOver;\n            attributes.onDrop = dropTargetProps?.onDrop;\n            attributes['data-row-dragged-over'] = isDraggedOver;\n        }\n\n        // row grouping\n        if (table.options.enableGrouping) {\n            attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n        }\n\n        // row selection\n        if (row.getCanSelect()) {\n            attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n        }\n\n        // row expansion\n        // When grouping is enabled, a group header row also reports getIsExpanded() === true\n        // when its children are visible. Skip the renderer in that case — otherwise row.original\n        // (the first child's data) gets rendered as expansion content under the header.\n        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {\n            attributes['data-row-expanded'] = true;\n            expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n        }\n\n        const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n        if (rowMeta?.layout) {\n            attributes['data-row-meta-layout'] = rowMeta.layout;\n        }\n\n        const ref = React.useRef<HTMLTableRowElement>(null);\n        const expansionRef = React.useRef<HTMLTableRowElement>(null);\n        const expandedRowSize = useResizeObserver(expansionRef, !!expandedRow);\n\n        React.useEffect(() => {\n            const rowHeight = ref.current?.getBoundingClientRect().height ?? 0;\n            const expansionHeight = expansionRef.current?.getBoundingClientRect().height ?? 0;\n\n            // Deferred a frame — resizeItem can trigger a synchronous flushSync, which React\n            // rejects when called straight from this effect while still committing. Cancelled\n            // on cleanup so a stale frame can't fire measureRow after this row unmounts or a\n            // dep change (e.g. a new remeasure) supersedes it.\n            const frameId = requestAnimationFrame(() => {\n                measureRow(rowHeight + expansionHeight);\n            });\n\n            return () => cancelAnimationFrame(frameId);\n        }, [expansionRef.current, expandedRowSize?.height, ...remeasureDependencies]);\n\n        const className = cn('group/row', otherAttributes.className, {\n            'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n            'hover:cursor-pointer': typeof attributes.onClick === 'function',\n        });\n\n        const isGrouped = row.getIsGrouped();\n\n        const mergedRef = mergeRefs([ref, externalRef]);\n\n        return (\n            <>\n                <tr {...attributes} className={className} ref={mergedRef}>\n                    {children}\n                    {row\n                        .getVisibleCells()\n                        // Filter out the row actions cell from rendering in Grouped Row\n                        .filter(cell => !(isGrouped && cell.column.id === '__actions'))\n                        .map((cell, cellIndex) => (\n                            <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n                        ))}\n                </tr>\n                {expandedRow ? (\n                    <tr data-row-parent-id={row.id} ref={expansionRef}>\n                        <td className=\"col-span-full\">{expandedRow}</td>\n                    </tr>\n                ) : null}\n            </>\n        );\n    })\n) as <TType = unknown>(props: DisplayRowProps<TType> & { ref?: React.Ref<HTMLTableRowElement> }) => React.JSX.Element;\n"],"names":["React","DisplayRow","row"],"mappings":"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"}

package/dist/utils/flattenChildren.cjs

@@ -9,4 +9,5 @@ const flattenChildren = (children, keyPrefix = "") => React.Children.toArray(chi
   return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];
 });
 exports.flattenChildren = flattenChildren;
+exports.isFragment = isFragment;
 //# sourceMappingURL=flattenChildren.cjs.map

package/dist/utils/flattenChildren.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"flattenChildren.cjs","sources":["../../src/utils/flattenChildren.ts"],"sourcesContent":["import React from 'react';\n\n// React 19 types default `ReactElement`'s props to `unknown` when the generic\n// cannot be inferred, so declare the predicate explicitly to keep `props.children` usable.\nfunction isFragment(child: React.ReactNode): child is React.ReactElement<{ children?: React.ReactNode }> {\n    return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport type FlattenedChild = { key: React.Key; child: React.ReactNode };\n\n// React.Children.toArray already drops null/undefined/boolean children, so only fragments need unwrapping.\n// The key comes from toArray (stable when a conditional sibling disappears, unlike an array index) and is\n// prefixed with the fragment's key when recursing, since every toArray call restarts numbering at \".0\".\nexport const flattenChildren = (children: React.ReactNode, keyPrefix = ''): FlattenedChild[] =>\n    React.Children.toArray(children).flatMap((child, index) => {\n        const key = `${keyPrefix}${React.isValidElement(child) ? child.key : `.${index}`}`;\n        return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];\n    });\n"],"names":[],"mappings":";;;AAIA,SAAS,WAAW,OAAqF;AACrG,SAAO,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;AAC/D;AAOO,MAAM,kBAAkB,CAAC,UAA2B,YAAY,OACnE,MAAM,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAO,UAAU;AACvD,QAAM,MAAM,GAAG,SAAS,GAAG,MAAM,eAAe,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,EAAE;AAChF,SAAO,WAAW,KAAK,IAAI,gBAAgB,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,KAAK,OAAO;AAC3F,CAAC;;"}
+{"version":3,"file":"flattenChildren.cjs","sources":["../../src/utils/flattenChildren.ts"],"sourcesContent":["import React from 'react';\n\n// Props are declared explicitly since React 19 defaults them to `unknown`, and the predicate is\n// discriminated on `typeof React.Fragment` so concrete element types aren't a subtype of it (which\n// would collapse the non-fragment branch to `never` at call sites like `isFragment(child) ? ... : child`).\nexport function isFragment<P = { children?: React.ReactNode }>(\n    child: React.ReactNode\n): child is React.ReactElement<P, typeof React.Fragment> {\n    return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport type FlattenedChild = { key: React.Key; child: React.ReactNode };\n\n// React.Children.toArray already drops null/undefined/boolean children, so only fragments need unwrapping.\n// The key comes from toArray (stable when a conditional sibling disappears, unlike an array index) and is\n// prefixed with the fragment's key when recursing, since every toArray call restarts numbering at \".0\".\nexport const flattenChildren = (children: React.ReactNode, keyPrefix = ''): FlattenedChild[] =>\n    React.Children.toArray(children).flatMap((child, index) => {\n        const key = `${keyPrefix}${React.isValidElement(child) ? child.key : `.${index}`}`;\n        return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];\n    });\n"],"names":[],"mappings":";;;AAKO,SAAS,WACZ,OACqD;AACrD,SAAO,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;AAC/D;AAOO,MAAM,kBAAkB,CAAC,UAA2B,YAAY,OACnE,MAAM,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAO,UAAU;AACvD,QAAM,MAAM,GAAG,SAAS,GAAG,MAAM,eAAe,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,EAAE;AAChF,SAAO,WAAW,KAAK,IAAI,gBAAgB,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,KAAK,OAAO;AAC3F,CAAC;;;"}

package/dist/utils/flattenChildren.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+export declare function isFragment<P = {
+    children?: React.ReactNode;
+}>(child: React.ReactNode): child is React.ReactElement<P, typeof React.Fragment>;
 export type FlattenedChild = {
     key: React.Key;
     child: React.ReactNode;

package/dist/utils/flattenChildren.js

@@ -7,6 +7,7 @@ const flattenChildren = (children, keyPrefix = "") => React__default.Children.to
   return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];
 });
 export {
-  flattenChildren
+  flattenChildren,
+  isFragment
 };
 //# sourceMappingURL=flattenChildren.js.map

package/dist/utils/flattenChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"flattenChildren.js","sources":["../../src/utils/flattenChildren.ts"],"sourcesContent":["import React from 'react';\n\n// React 19 types default `ReactElement`'s props to `unknown` when the generic\n// cannot be inferred, so declare the predicate explicitly to keep `props.children` usable.\nfunction isFragment(child: React.ReactNode): child is React.ReactElement<{ children?: React.ReactNode }> {\n    return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport type FlattenedChild = { key: React.Key; child: React.ReactNode };\n\n// React.Children.toArray already drops null/undefined/boolean children, so only fragments need unwrapping.\n// The key comes from toArray (stable when a conditional sibling disappears, unlike an array index) and is\n// prefixed with the fragment's key when recursing, since every toArray call restarts numbering at \".0\".\nexport const flattenChildren = (children: React.ReactNode, keyPrefix = ''): FlattenedChild[] =>\n    React.Children.toArray(children).flatMap((child, index) => {\n        const key = `${keyPrefix}${React.isValidElement(child) ? child.key : `.${index}`}`;\n        return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];\n    });\n"],"names":["React"],"mappings":";AAIA,SAAS,WAAW,OAAqF;AACrG,SAAOA,eAAM,eAAe,KAAK,KAAK,MAAM,SAASA,eAAM;AAC/D;AAOO,MAAM,kBAAkB,CAAC,UAA2B,YAAY,OACnEA,eAAM,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAO,UAAU;AACvD,QAAM,MAAM,GAAG,SAAS,GAAGA,eAAM,eAAe,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,EAAE;AAChF,SAAO,WAAW,KAAK,IAAI,gBAAgB,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,KAAK,OAAO;AAC3F,CAAC;"}
+{"version":3,"file":"flattenChildren.js","sources":["../../src/utils/flattenChildren.ts"],"sourcesContent":["import React from 'react';\n\n// Props are declared explicitly since React 19 defaults them to `unknown`, and the predicate is\n// discriminated on `typeof React.Fragment` so concrete element types aren't a subtype of it (which\n// would collapse the non-fragment branch to `never` at call sites like `isFragment(child) ? ... : child`).\nexport function isFragment<P = { children?: React.ReactNode }>(\n    child: React.ReactNode\n): child is React.ReactElement<P, typeof React.Fragment> {\n    return React.isValidElement(child) && child.type === React.Fragment;\n}\n\nexport type FlattenedChild = { key: React.Key; child: React.ReactNode };\n\n// React.Children.toArray already drops null/undefined/boolean children, so only fragments need unwrapping.\n// The key comes from toArray (stable when a conditional sibling disappears, unlike an array index) and is\n// prefixed with the fragment's key when recursing, since every toArray call restarts numbering at \".0\".\nexport const flattenChildren = (children: React.ReactNode, keyPrefix = ''): FlattenedChild[] =>\n    React.Children.toArray(children).flatMap((child, index) => {\n        const key = `${keyPrefix}${React.isValidElement(child) ? child.key : `.${index}`}`;\n        return isFragment(child) ? flattenChildren(child.props.children, key) : [{ key, child }];\n    });\n"],"names":["React"],"mappings":";AAKO,SAAS,WACZ,OACqD;AACrD,SAAOA,eAAM,eAAe,KAAK,KAAK,MAAM,SAASA,eAAM;AAC/D;AAOO,MAAM,kBAAkB,CAAC,UAA2B,YAAY,OACnEA,eAAM,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAO,UAAU;AACvD,QAAM,MAAM,GAAG,SAAS,GAAGA,eAAM,eAAe,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,EAAE;AAChF,SAAO,WAAW,KAAK,IAAI,gBAAgB,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,KAAK,OAAO;AAC3F,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "14.0.0-tanstack-virtual-update.0",
+    "version": "14.0.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -68,7 +68,7 @@
         "tailwindcss": ">=3.4.19"
     },
     "devDependencies": {
-        "@economic/taco-rules": "1.0.3-tanstack-virtual-update.0",
+        "@economic/taco-rules": "^1.0.3",
         "@oxlint/plugins": "^1.75.0",
         "@svgr/cli": "^8.1.0",
         "@testing-library/jest-dom": "^6.9.1",
@@ -85,7 +85,7 @@
         "resize-observer-polyfill": "^1.5.1",
         "rimraf": "^6.1.3",
         "stylelint": "^17.14.1",
-        "svgo": "^4.0.2",
+        "svgo": "^4.1.0",
         "tailwindcss": "^3.4.19",
         "typescript": "^6.0.3",
         "vite": "^7.3.6",
@@ -97,5 +97,5 @@
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "^4.62.5"
     },
-    "gitHead": "a9015d1f69483fa25abfdbede262cdc8bb5f9b12"
+    "gitHead": "92ddfe6e8522d6f3190f495a3be8a3b5d66ff19e"
 }