@economic/taco 8.1.2-hanger-base-ui.4 → 8.1.3-alpha.0

package/dist/components/Hanger/Arrow.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -19,8 +19,9 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const UnstyledArrow = React__namespace.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React__namespace.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React__namespace.createElement(
     "path",
     {
       className: "fill-current text-blue-500",

package/dist/components/Hanger/Arrow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACKA,iCAAA,cAAAC,QAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7BD,iCAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Arrow.cjs","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["React","PopoverPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,gBAAgBA,iBAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAAA,iCAAA,cAACC,4BAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjGD,iCAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAAA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;;"}

package/dist/components/Hanger/Arrow.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { Popover } from "@base-ui/react/popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 const UnstyledArrow = React.forwardRef(function PopoverArrow(props, ref) {
-  return /* @__PURE__ */ React.createElement(Popover.Arrow, { className: "pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Arrow, { className: "pointer-events-none -mt-px", asChild: true, offset: 2, width: 30, height: 11 }, /* @__PURE__ */ React.createElement("svg", { ...props, ref, viewBox: "0 19 30 11", style: { transform: "rotateZ(180deg)" } }, /* @__PURE__ */ React.createElement(
     "path",
     {
       className: "fill-current text-blue-500",

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

@@ -1 +1 @@
-{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none h-[11px] w-[30px] data-[side=bottom]:top-[-10px] data-[side=left]:right-[-20px] data-[side=right]:left-[-20px] data-[side=top]:bottom-[-10px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\">\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":["PopoverPrimitive"],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAC5H,SACK,sBAAA,cAAAA,QAAiB,OAAjB,EAAuB,WAAU,uPAAA,GAC7B,sBAAA,cAAA,OAAA,EAAK,GAAG,OAAO,KAAU,SAAQ,aAC9B,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Arrow.js","sources":["../../../src/components/Hanger/Arrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nexport const UnstyledArrow = React.forwardRef<SVGSVGElement, React.SVGAttributes<SVGElement>>(function PopoverArrow(props, ref) {\n    return (\n        <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n            <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n                <path\n                    className=\"fill-current text-blue-500\"\n                    d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"></path>\n                <path\n                    className=\"fill-current\"\n                    d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"></path>\n            </svg>\n        </PopoverPrimitive.Arrow>\n    );\n});\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,MAAM,WAA2D,SAAS,aAAa,OAAO,KAAK;AAExH,SAAA,sBAAA,cAAC,iBAAiB,OAAjB,EAAuB,WAAU,8BAA6B,SAAO,MAAC,QAAQ,GAAG,OAAO,IAAI,QAAQ,MACjG,sBAAA,cAAC,OAAK,EAAA,GAAG,OAAO,KAAU,SAAQ,cAAa,OAAO,EAAE,WAAW,kBAAA,EAC/D,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EACN,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,GAAE;AAAA,IAAA;AAAA,EAAA,CACV,CACJ;AAER,CAAC;"}

package/dist/components/Hanger/Hanger.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
-const popover = require("@base-ui/react/popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Arrow = require("./Arrow.cjs");
 const Localization = require("../Provider/Localization.cjs");
@@ -25,69 +25,75 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const HangerContext = React__namespace.createContext({
-  anchorRef: { current: null },
-  onClose: void 0
+  onClose: void 0,
+  props: {},
+  ref: null
 });
-const Anchor = React__namespace.forwardRef(function HangerAnchor(props) {
-  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, props.children);
+const Anchor = React__namespace.forwardRef(function HangerAnchor(props, externalRef) {
+  var _a;
+  const { ref: parentRef, props: parentProps } = React__namespace.useContext(HangerContext);
+  const refCallback = mergeRefs.mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (React__namespace.isValidElement(props.children) && typeof ((_a = props.children) == null ? void 0 : _a.type) === "function") {
+    console.warn(
+      `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`
+    );
+    children = /* @__PURE__ */ React__namespace.createElement("span", null, props.children);
+  }
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
 });
 const Title = React__namespace.forwardRef(function DialogTitle(props, ref) {
   const className = cn("mb-1 text-base font-bold flex w-full", props.className);
   return /* @__PURE__ */ React__namespace.createElement("span", { ...props, className, ref });
 });
 const Content = React__namespace.forwardRef(function HangerContent(props, ref) {
-  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;
+  const { placement: side, hideWhenDetached = false, container } = props;
   const context = React__namespace.useContext(HangerContext);
   const { texts } = Localization.useLocalization();
   const className = cn(
     "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
-  return /* @__PURE__ */ React__namespace.createElement(popover.Popover.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
-    popover.Popover.Positioner,
+  const handleInteractOutside = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, { container }, /* @__PURE__ */ React__namespace.createElement(
+    PopoverPrimitive__namespace.Content,
     {
-      anchor: context.anchorRef,
-      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
+      className,
+      "data-taco": "hanger",
+      onInteractOutside: handleInteractOutside,
       side,
-      sideOffset: 11
+      sideOffset: 1,
+      ref,
+      hideWhenDetached
     },
-    /* @__PURE__ */ React__namespace.createElement(popover.Popover.Popup, { ...popoverContentProps, className, "data-taco": "hanger", ref }, props.children, /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }), /* @__PURE__ */ React__namespace.createElement(
-      popover.Popover.Close,
+    props.children,
+    /* @__PURE__ */ React__namespace.createElement(Arrow.UnstyledArrow, { className: "text-blue-500" }),
+    /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Close, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+      IconButton.IconButton,
       {
-        render: /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
-          {
-            appearance: "primary",
-            "aria-label": texts.hanger.close,
-            className: "absolute right-0 top-0 mx-2 mt-2 text-white",
-            icon: "close",
-            onClick: context.onClose
-          }
-        )
+        appearance: "primary",
+        "aria-label": texts.hanger.close,
+        className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+        icon: "close",
+        onClick: context.onClose
       }
     ))
   ));
 });
 const Hanger = React__namespace.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const anchorRef = React__namespace.useRef(null);
-  const combinedRef = mergeRefs.mergeRefs([anchorRef, ref]);
-  const context = React__namespace.useMemo(() => ({ anchorRef, onClose }), [onClose]);
+  const context = React__namespace.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
   const [open, setOpen] = React__namespace.useState(false);
   React__namespace.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  const handleOpenChange = (nextOpen, eventDetails) => {
-    if (!nextOpen && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) {
-      eventDetails.cancel();
-      return;
-    }
-    setOpen(nextOpen);
-  };
-  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement("span", { ...otherProps, ref: combinedRef }, /* @__PURE__ */ React__namespace.createElement(popover.Popover.Root, { open, onOpenChange: handleOpenChange }, anchor, children)));
+  return /* @__PURE__ */ React__namespace.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Root, { key: String(open), defaultOpen: open }, anchor && /* @__PURE__ */ React__namespace.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;

package/dist/components/Hanger/Hanger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;\n// Passthrough — the surrounding Hanger root owns the single DOM wrapper that serves as the anchor.\n// `Hanger.Anchor` remains in the JSX API for backward compatibility and to signal intent.\nconst Anchor = React.forwardRef<HTMLElement, HangerAnchorProps>(function HangerAnchor(props) {\n    return <>{props.children}</>;\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <IconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","useLocalization","PopoverPrimitive","UnstyledArrow","IconButton","Hanger","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgBA,iBAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAUD,MAAM,SAASA,iBAAM,WAA2C,SAAS,aAAa,OAAO;AAClF,SAAAA,iCAAA,cAAAA,iBAAA,UAAA,MAAG,MAAM,QAAS;AAC7B,CAAC;AAGM,MAAM,QAAQA,iBAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQA,iCAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAUA,iBAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAUA,iBAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACKD,iCAAA,cAAAE,QAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAAF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,mDACXA,QAAiB,QAAA,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACPF,iCAAA,cAACG,MAAc,eAAA,EAAA,WAAU,iBAAgB,GACzCH,iCAAA;AAAA,MAACE,QAAAA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACIF,iCAAA;AAAA,UAACI,WAAA;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAASJ,iBAAM,WAAyC,SAASK,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAYL,iBAAM,OAAoB,IAAI;AAChD,QAAM,cAAcM,UAAA,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAUN,iBAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAIA,iBAAM,SAAS,KAAK;AAC5CA,mBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAAA,iCAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAAA,iCAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtBA,iCAAA,cAAAE,QAAAA,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;;;"}
+{"version":3,"file":"Hanger.cjs","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    props: Record<string, any>;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    onClose: undefined,\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        // oxlint-disable-next-line no-console\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...parentProps} {...props} ref={refCallback} asChild>\n            {children}\n        </PopoverPrimitive.Anchor>\n    );\n});\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Content\n                className={className}\n                data-taco=\"hanger\"\n                onInteractOutside={handleInteractOutside}\n                side={side}\n                sideOffset={1}\n                ref={ref}\n                hideWhenDetached={hideWhenDetached}>\n                {props.children}\n                <UnstyledArrow className=\"text-blue-500\" />\n                <PopoverPrimitive.Close asChild>\n                    <IconButton\n                        appearance=\"primary\"\n                        aria-label={texts.hanger.close}\n                        className=\"absolute right-0 top-0 ml-2 mr-2 mt-2 text-white\"\n                        icon=\"close\"\n                        onClick={context.onClose}\n                    />\n                </PopoverPrimitive.Close>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["React","mergeRefs","PopoverPrimitive","useLocalization","UnstyledArrow","IconButton","Hanger"],"mappings":"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"}

package/dist/components/Hanger/Hanger.d.ts

@@ -4,7 +4,7 @@ export type HangerTexts = {
     /** Aria-label for the close icon button of hanger */
     close: string;
 };
-export type HangerAnchorProps = React.HTMLAttributes<HTMLElement>;
+export type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;
 export type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 export declare const Title: React.ForwardRefExoticComponent<HangerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/Hanger/Hanger.js

@@ -1,74 +1,79 @@
 import * as React from "react";
 import cn from "clsx";
-import { Popover } from "@base-ui/react/popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconButton } from "../IconButton/IconButton.js";
 import { UnstyledArrow } from "./Arrow.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { mergeRefs } from "../../utils/mergeRefs.js";
 /* empty css           */
 const HangerContext = React.createContext({
-  anchorRef: { current: null },
-  onClose: void 0
+  onClose: void 0,
+  props: {},
+  ref: null
 });
-const Anchor = React.forwardRef(function HangerAnchor(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+const Anchor = React.forwardRef(function HangerAnchor(props, externalRef) {
+  var _a;
+  const { ref: parentRef, props: parentProps } = React.useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if (React.isValidElement(props.children) && typeof ((_a = props.children) == null ? void 0 : _a.type) === "function") {
+    console.warn(
+      `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`
+    );
+    children = /* @__PURE__ */ React.createElement("span", null, props.children);
+  }
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Anchor, { ...parentProps, ...props, ref: refCallback, asChild: true }, children);
 });
 const Title = React.forwardRef(function DialogTitle(props, ref) {
   const className = cn("mb-1 text-base font-bold flex w-full", props.className);
   return /* @__PURE__ */ React.createElement("span", { ...props, className, ref });
 });
 const Content = React.forwardRef(function HangerContent(props, ref) {
-  const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;
+  const { placement: side, hideWhenDetached = false, container } = props;
   const context = React.useContext(HangerContext);
   const { texts } = useLocalization();
   const className = cn(
     "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
-  return /* @__PURE__ */ React.createElement(Popover.Portal, { container }, /* @__PURE__ */ React.createElement(
-    Popover.Positioner,
+  const handleInteractOutside = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React.createElement(
+    PopoverPrimitive.Content,
     {
-      anchor: context.anchorRef,
-      className: hideWhenDetached ? "data-[anchor-hidden]:hidden" : void 0,
+      className,
+      "data-taco": "hanger",
+      onInteractOutside: handleInteractOutside,
       side,
-      sideOffset: 11
+      sideOffset: 1,
+      ref,
+      hideWhenDetached
     },
-    /* @__PURE__ */ React.createElement(Popover.Popup, { ...popoverContentProps, className, "data-taco": "hanger", ref }, props.children, /* @__PURE__ */ React.createElement(UnstyledArrow, { className: "text-blue-500" }), /* @__PURE__ */ React.createElement(
-      Popover.Close,
+    props.children,
+    /* @__PURE__ */ React.createElement(UnstyledArrow, { className: "text-blue-500" }),
+    /* @__PURE__ */ React.createElement(PopoverPrimitive.Close, { asChild: true }, /* @__PURE__ */ React.createElement(
+      IconButton,
       {
-        render: /* @__PURE__ */ React.createElement(
-          IconButton,
-          {
-            appearance: "primary",
-            "aria-label": texts.hanger.close,
-            className: "absolute right-0 top-0 mx-2 mt-2 text-white",
-            icon: "close",
-            onClick: context.onClose
-          }
-        )
+        appearance: "primary",
+        "aria-label": texts.hanger.close,
+        className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
+        icon: "close",
+        onClick: context.onClose
       }
     ))
   ));
 });
 const Hanger = React.forwardRef(function Hanger2(props, ref) {
   const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;
-  const anchorRef = React.useRef(null);
-  const combinedRef = mergeRefs([anchorRef, ref]);
-  const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);
+  const context = React.useMemo(() => ({ onClose, props: otherProps, ref }), [onClose, otherProps]);
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
   }, []);
-  const handleOpenChange = (nextOpen, eventDetails) => {
-    if (!nextOpen && (eventDetails.reason === "outside-press" || eventDetails.reason === "focus-out")) {
-      eventDetails.cancel();
-      return;
-    }
-    setOpen(nextOpen);
-  };
-  return /* @__PURE__ */ React.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React.createElement("span", { ...otherProps, ref: combinedRef }, /* @__PURE__ */ React.createElement(Popover.Root, { open, onOpenChange: handleOpenChange }, anchor, children)));
+  return /* @__PURE__ */ React.createElement(HangerContext.Provider, { value: context }, /* @__PURE__ */ React.createElement(PopoverPrimitive.Root, { key: String(open), defaultOpen: open }, anchor && /* @__PURE__ */ React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
+{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,YAAY,CACrB;AAAA,EACI,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,GACA,QACY;;AACN,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAC5B,QAAA,gBAAgBC,sBAAiB,IAAI;AACrC,QAAA,kBAAkBC,0BAA+B,GAAG;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAIC,iBAAM,SAAS,KAAK;AACtC,QAAA,KAAKA,iBAAM,QAAQ,MAAM,YAAY,UAAUC,cAAQ,CAAA,IAAI,CAAC,QAAQ,CAAC;AACrE,QAAA,WAAWD,iBAAM,OAAyB,IAAI;AAC9C,QAAA,WAAW,GAAG,EAAE;AAEtB,QAAM,CAAC,WAAW,YAAY,IAAIA,iBAAM,SAA8C,KAAK;AAE3FA,mBAAM,UAAU,MAAM;AAClB,iBAAa,KAAK;AAAA,EAAA,GACnB,CAAC,IAAI,CAAC;AAETA,mBAAM,UAAU,MAAM;;AAClB,QAAI,UAAU,QAAW;AACrB,UAAI,iBAAiB,UAAaE,KAAY,YAAA,eAAe,YAAY,GAAG;AACrDC,gCAAA,SAAS,SAAS,YAAY;AAAA,MAAA,WAC1C,eAAe,QAAW;AACdA,gCAAA,SAAS,SAAS,UAAU;AAAA,MAAA,WACxC,KAAK,SAAS,GAAG;AACxBA,aAAA,mBAAmB,SAAS,UAASC,MAAA,KAAK,CAAC,MAAN,gBAAAA,IAAS,KAAK;AAAA,MAAA;AAAA,IACvD,WACO,CAAC,eAAe,CAACF,KAAY,YAAA,eAAe,KAAK,GAAG;AAC3D,UAAI,eAAe,QAAW;AACPC,gCAAA,SAAS,SAAS,UAAU;AAAA,MAAA,WACxC,KAAK,SAAS,GAAG;AACxBA,aAAA,mBAAmB,SAAS,UAAS,UAAK,CAAC,MAAN,mBAAS,KAAK;AAAA,MAAA;AAAA,IACvD;AAAA,EAER,GAAG,EAAE;AAGC,QAAA,sBAAsB,CAAC,UAAwD;AACjF,QAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;AACtD,YAAM,eAAe;AACrB,cAAQ,IAAI;AAAA,IAAA;AAAA,EAEpB;AAEM,QAAA,uBAAuB,CAAC,UAAkD;AAC5E,YAAQ,MAAM,KAAK;AAAA,MACf,KAAK,UAAU;AACX,cAAM,eAAe;AACrB,YAAI,cAAc,QAAW;AACNA,kCAAA,gBAAgB,SAAS,SAAS;AAAA,QAAA;AAGzD,gBAAQ,KAAK;AACb;AAAA,MAAA;AAAA,MAGJ,KAAK;AAAA,MACL,KAAK,SAAS;AACN,YAAA,MAAM,QAAQ,OAAO;AACrB,gBAAM,eAAe;AAAA,QAAA;AAEzB,gBAAQ,KAAK;AACb;AAAA,MAAA;AAAA,IAGJ;AAGJ,QAAI,WAAW,WAAW;AACtB,iBAAW,UAAU,KAAK;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,qBAAqB,CAAC,UAAiD;AACzE,UAAM,eAAe;AACrB,QAAI,CAAC,aAAa;AACd,cAAQ,KAAK;AACb,UAAI,QAAQ;AACD,eAAAE,MAAAA,kBAAkB,MAAM,CAAsD;AAAA,MAAA;AAAA,IACzF;AAAA,EAER;AAEA,MAAI,OAA6B;AACjC,MAAI,OAAO;AAEX,MAAI,UAAU,QAAW;AACrB,QAAI,aAAa;AACb,YAAM,kBAAiB,+BAAO,WAAW,MAAM,SAAQ,CAAC;AAEpD,UAAA,eAAe,WAAW,cAAc,OAAO,UAAQ,CAAC,KAAK,QAAQ,EAAE,QAAQ;AAC/E,eAAO,MAAM,OAAO;AAAA,MAAA,OACjB;AACH,iBAAOH,sBAAY,eAAe,eAAe,CAAC,CAAC,MAA5CA,mBAA+C,SAAQ;AAC9D,eAAO,eAAe,SAAS,IAAI,eAAe,SAAS,IAAI;AAAA,MAAA;AAAA,IACnE,OACG;AACG,YAAA,OAAOA,KAAAA,YAAY,eAAe,KAAK;AAE7C,UAAI,MAAM;AACN,eAAO,KAAK,OACRF,iCAAA,cAAAA,iBAAA,UAAA,MACKA,iBAAM,aAAa,KAAK,MAAM;AAAA,UAC3B,WAAW,GAAG,KAAK,KAAK,MAAM,WAAW,aAAa;AAAA,QACzD,CAAA,GACA,KAAK,IACV,IAEA,KAAK;AAAA,MAAA;AAAA,IAEb;AAAA,EACJ;AAGE,QAAA,oBAAoB,CAAC,UAAqD;;AAC5E,UAAM,QAAQ;AAEd,QAAI,UAAU;AACV,YAAM,OAAOE,KAAAA,YAAY,eAAe,MAAM,OAAO,KAAK;AACzD,YAAc,SAASI,KAAA,aAAa,IAAI;AAEzC,YAAM,YAAUF,MAAA,6BAAM,SAAN,gBAAAA,IAAY,MAAM,SAAQ,CAAC;AAEvC,UAAA,QAAQ,SAAS,GAAG;AAEpB,gBAAQ,IAAI;AAER,YAAA;AAEH,cAAc,OAAO,UAAU,QAAQ,IAAI,CAAK,MAAA;AAC7C,qBAAW,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;AACzC,iBAAAE,KAAA,aAAa,cAAc,KAAK,CAAAC,OAAKA,GAAE,SAAS,QAAQ,CAAC;AAAA,QAAA,CACnE;AAAA,MAAA;AAGL,eAAS,KAAK;AAAA,IAAA;AAAA,EAEtB;AAEM,QAAA,oBAAoB,CAAC,UAA+C;AACtE,QAAI,UAAU;AACV,YAAM,eAAe;AAAA,IAAA;AAAA,EAE7B;AAGM,QAAA,oBAAoB,CAAC,UAA+C;;AACtE,QAAI,UAAU;AACV,YAAMC,SAAQ,MAAM,cAAc,cAAc,cAAc;AAE9D,UAAIA,QAAO;AACA,eAAAJ,MAAA,OAAA,aAAA,MAAA,gBAAAA,IAAgB,sBAAhB,wBAAAA,KAAoCI;AAAAA,MAAK;AAAA,IACpD;AAAA,EAER;AAEA,QAAM,SAA8B;AAAA,IAChC,iBAAiB;AAAA,IACjB,cAAc,YAAY,GAAG,SAAS,IAAI,IAAI,KAAK;AAAA,IACnD,mBAAmB,iBAAiB,GAAG,cAAc,IAAI,QAAQ,KAAK;AAAA,IACtE,iBAAiB,WAAW,SAAS;AAAA,IACrC;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW,CAAC,YAAY,CAAC,WAAW,sBAAsB;AAAA,IAC1D;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAgC;AAAA,IAClC,GAAG;AAAA,IACH,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU,CAAS,UAAA;AACfL,WAAAA,mBAAmB,SAAS,SAAS,MAAM,OAAO,KAAK;AAAA,IAC3D;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,EACJ;AAEA,QAAMM,UAA4B;AAAA,IAC9B,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO,OAAO,SAAS,EAAE;AAAA,EAC7B;AAEO,SAAA;AAAA,IACH;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,SAAS;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;;"}

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

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

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

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

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

@@ -99,7 +99,7 @@ const DisplayRow = React.memo(
       attributes["data-row-selected"] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : void 0;
     }
     let expandedRow;
-    if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {
+    if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {
       attributes["data-row-expanded"] = true;
       expandedRow = (_c = (_b = (_a = tableMeta.rowExpansion).rowExpansionRenderer) == null ? void 0 : _b.call(_a, row.original)) == null ? void 0 : _c();
     }

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 React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\nimport { useResizeObserver } from '../../../../../../hooks/useResizeObserver';\nimport { mergeRefs } from '../../../../../../utils/mergeRefs';\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 = 'wcag-blue 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        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\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            measureRow(rowHeight + expansionHeight);\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> }) => JSX.Element;\n"],"names":["DisplayRow","_a","isElementInteractive","row","_b","_c","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 React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\nimport { useResizeObserver } from '../../../../../../hooks/useResizeObserver';\nimport { mergeRefs } from '../../../../../../utils/mergeRefs';\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 = 'wcag-blue 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            measureRow(rowHeight + expansionHeight);\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> }) => JSX.Element;\n"],"names":["DisplayRow","_a","isElementInteractive","row","_b","_c","useDropTarget","useResizeObserver","mergeRefs","Cell"],"mappings":"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"}

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

@@ -97,7 +97,7 @@ const DisplayRow = React__default.memo(
       attributes["data-row-selected"] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : void 0;
     }
     let expandedRow;
-    if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {
+    if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded() && !row.getIsGrouped()) {
       attributes["data-row-expanded"] = true;
       expandedRow = (_c = (_b = (_a = tableMeta.rowExpansion).rowExpansionRenderer) == null ? void 0 : _b.call(_a, row.original)) == null ? void 0 : _c();
     }

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 React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\nimport { useResizeObserver } from '../../../../../../hooks/useResizeObserver';\nimport { mergeRefs } from '../../../../../../utils/mergeRefs';\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 = 'wcag-blue 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        let expandedRow;\n\n        if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\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            measureRow(rowHeight + expansionHeight);\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> }) => JSX.Element;\n"],"names":["React","DisplayRow","_a","row","_b","_c"],"mappings":"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"}
+{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\nimport { useResizeObserver } from '../../../../../../hooks/useResizeObserver';\nimport { mergeRefs } from '../../../../../../utils/mergeRefs';\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 = 'wcag-blue 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            measureRow(rowHeight + expansionHeight);\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> }) => JSX.Element;\n"],"names":["React","DisplayRow","_a","row","_b","_c"],"mappings":"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"}

package/dist/primitives/Table/Core/features/useTableRenderer.cjs

@@ -114,7 +114,7 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
         return /* @__PURE__ */ React.createElement(SkeletonRow.SkeletonRow, { key: skeletonKey, index: virtualRow.index, table });
       }
       const measureRow = (rowHeight) => {
-        virtualiser.resizeItem(virtualRow, rowHeight);
+        virtualiser.resizeItem(virtualRow.index, rowHeight);
       };
       return /* @__PURE__ */ React.createElement(
         Row.Row,

package/dist/primitives/Table/Core/features/useTableRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRenderer.cjs","sources":["../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    Range,\n} from '@tanstack/react-virtual';\nimport sortBy from 'lodash/sortBy';\nimport without from 'lodash/without';\n\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\nimport { SkeletonRow } from '../components/Row/BuiltIns/SkeletonRow';\n\n// scroll padding end is designed to always show half of the next row\nfunction getScrollPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    let offset = 2;\n\n    if (tableMeta.footer.isEnabled) {\n        offset += 1;\n    }\n\n    if (table.getHeaderGroups().length > 1) {\n        offset += table.getHeaderGroups().length - 1;\n    }\n\n    let height = ROW_HEIGHT_ESTIMATES.medium * offset;\n\n    const bottomRows = table.getBottomRows();\n\n    if (bottomRows.length) {\n        // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)\n        height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;\n    }\n\n    return height;\n}\n\n// scroll padding end is designed to always show half of the next row\nfunction getPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const bottomRows = table.getBottomRows() ?? [];\n    return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length;\n}\n\n// A higher number ensure less scroll jumping for dynamic row heights, but too high can reduce performance. 8 worked well\nconst OVERSCAN_ROW_COUNT = 8;\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    length: number,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n    const rows = table.getCenterRows() ?? [];\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n\n    const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;\n\n    const virtualiser = useVirtualizer({\n        count,\n        estimateSize: () => {\n            return tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;\n        },\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? count : OVERSCAN_ROW_COUNT,\n        rangeExtractor,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: getScrollPaddingEndOffset(table),\n        paddingEnd: getPaddingEndOffset(table),\n    });\n\n    const expandedState = table.getState().expanded;\n    const previousExpandedStateRef = React.useRef(false);\n\n    React.useEffect(() => {\n        // only remeasure when transitioning between expand all and not expand all\n        const isEmpty = JSON.stringify(expandedState) === '{}';\n\n        if (expandedState === true || (isEmpty && previousExpandedStateRef.current === true)) {\n            previousExpandedStateRef.current = expandedState === true;\n            virtualiser.measure();\n        }\n    }, [expandedState]);\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === count - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, count]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;\n\n    const startValue = isTableRowGrouped\n        ? (virtualItems[paddingStartIndex]?.start ?? 0) - (virtualItems[paddingStartIndex]?.size ?? 0)\n        : virtualItems[paddingStartIndex]?.start;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    // bottom rows aren't virtualised (they're sticky) but we need to set the height\n    if (count || table.getBottomRows().length) {\n        style = {\n            height: totalSize,\n            paddingBottom: Number.isNaN(paddingBottom) ? 0 : paddingBottom,\n            paddingTop: Number.isNaN(paddingTop) ? 0 : paddingTop,\n        };\n    }\n\n    // only render non sticky rows\n    if (count) {\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            let row: ReactTableRow<TType> | undefined;\n\n            if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {\n                const currentPageIndex =\n                    (Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize) /\n                    tableMeta.server.pageSize;\n                const pagePosition = tableMeta.server.pages?.indexOf(currentPageIndex) ?? -1;\n\n                if (pagePosition > -1) {\n                    // \"flatten\" row indexes down into the dataloader2 dataset size\n                    // for example, with a page size of 100...\n                    // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)\n                    const fakeIndex = pagePosition * tableMeta.server.pageSize + (virtualRow.index % tableMeta.server.pageSize);\n                    row = rows[fakeIndex];\n                }\n            } else {\n                row = rows[virtualRow.index];\n            }\n\n            if (!row?.original) {\n                // Prefix skeleton keys to prevent collision with real data row keys\n                const skeletonKey = `skeleton-${virtualRow.index}`;\n                return <SkeletonRow key={skeletonKey} index={virtualRow.index} table={table} />;\n            }\n\n            const measureRow = (rowHeight: number) => {\n                virtualiser.resizeItem(virtualRow, rowHeight);\n            };\n\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        (range: Range) => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            return activeRowGroupIndex === undefined\n                ? defaultRangeExtractor(range)\n                : sortBy([activeRowGroupIndex, ...without(defaultRangeExtractor(range), activeRowGroupIndex)], a => a);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["ROW_HEIGHT_ESTIMATES","rows","useVirtualizer","_a","SkeletonRow","Row","defaultRangeExtractor"],"mappings":";;;;;;;;;AAkBA,SAAS,0BAA2C,OAA0B;AACpE,QAAA,YAAY,MAAM,QAAQ;AAChC,MAAI,SAAS;AAET,MAAA,UAAU,OAAO,WAAW;AAClB,cAAA;AAAA,EAAA;AAGd,MAAI,MAAM,kBAAkB,SAAS,GAAG;AAC1B,cAAA,MAAM,gBAAgB,EAAE,SAAS;AAAA,EAAA;AAG3C,MAAA,SAASA,0BAAqB,SAAS;AAErC,QAAA,aAAa,MAAM,cAAc;AAEvC,MAAI,WAAW,QAAQ;AAEnB,cAAUA,0BAAqB,UAAU,UAAU,MAAM,IAAI,MAAM,WAAW;AAAA,EAAA;AAG3E,SAAA;AACX;AAGA,SAAS,oBAAqC,OAA0B;AACpE,QAAM,aAAa,MAAM,cAAc,KAAK,CAAC;AACtC,SAAAA,0BAAqB,SAAS,IAAI,WAAW;AACxD;AAGA,MAAM,qBAAqB;AAEpB,SAAS,iBACZ,WACA,OACA,UACA,QACA,uBACF;;AACQ,QAAA,YAAY,MAAM,QAAQ;AAChC,QAAM,oBAAoB,CAAC,GAAC,WAAM,WAAW,aAAjB,mBAA2B;AACvD,QAAMC,SAAO,MAAM,cAAc,KAAK,CAAC;AAGjC,QAAA,iBAAiB,0BAAiC,KAAK;AAG7D,QAAM,qBAAqBD,KAAAA,qBAAqB;AAE1C,QAAA,QAAQ,UAAU,OAAO,aAAa,UAAU,OAAO,2BAA2B,SAASC,OAAK;AAEtG,QAAM,cAAcC,aAAAA,eAAe;AAAA,IAC/B;AAAA,IACA,cAAc,MAAM;AACT,aAAA,UAAU,UAAU,SAASF,KAAA,qBAAqB,UAAU,UAAU,MAAM,IAAIA,KAAAA,qBAAqB;AAAA,IAChH;AAAA,IACA,kBAAkB,MAAM,SAAS;AAAA,IACjC,UAAU,UAAU,SAAS,aAAa,QAAQ;AAAA,IAClD;AAAA;AAAA,IAEA;AAAA,IACA,kBAAkB,0BAA0B,KAAK;AAAA,IACjD,YAAY,oBAAoB,KAAK;AAAA,EAAA,CACxC;AAEK,QAAA,gBAAgB,MAAM,SAAA,EAAW;AACjC,QAAA,2BAA2B,MAAM,OAAO,KAAK;AAEnD,QAAM,UAAU,MAAM;AAElB,UAAM,UAAU,KAAK,UAAU,aAAa,MAAM;AAElD,QAAI,kBAAkB,QAAS,WAAW,yBAAyB,YAAY,MAAO;AAClF,+BAAyB,UAAU,kBAAkB;AACrD,kBAAY,QAAQ;AAAA,IAAA;AAAA,EACxB,GACD,CAAC,aAAa,CAAC;AAEZ,QAAA,YAAY,YAAY,aAAa;AACrC,QAAA,eAAe,YAAY,gBAAgB;AAEjD,QAAM,gBAAgB,MAAM;AAAA,IACxB,CAAC,OAAe,UAAuC,EAAE,OAAO,QAAQ,UAAU,eAAe;AAC7F,YAAM,YAAyC,EAAE,GAAG,SAAS,UAAU,OAAO;AAE9E,UAAI,SAAS,SAAS;AAClB,YAAI,UAAU,GAAG;AACD,sBAAA,eAAe,GAAG,SAAS;AAAA,QAAA,WAChC,UAAU,QAAQ,GAAG;AAEnB,mBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,QAAA,OAC3C;AACS,sBAAA,cAAc,OAAO,OAAO;AAAA,QAAA;AAAA,MAC5C;AAAA,IAER;AAAA,IACA,CAAC,aAAa,QAAQ,SAAS,SAAS,WAAW,KAAK;AAAA,EAC5D;AAGA,QAAM,oBAAoB,qBAAqB,QAAQ,IAAI,IAAI;AAE/D,QAAM,aAAa,uBACZ,kBAAa,iBAAiB,MAA9B,mBAAiC,UAAS,QAAM,kBAAa,iBAAiB,MAA9B,mBAAiC,SAAQ,MAC1F,kBAAa,iBAAiB,MAA9B,mBAAiC;AAGvC,QAAM,CAAC,YAAY,aAAa,IAC5B,aAAa,SAAS,IAChB,CAAC,KAAK,IAAI,GAAG,cAAc,CAAC,GAAG,KAAK,IAAI,GAAG,eAAa,kBAAa,aAAa,SAAS,CAAC,MAApC,mBAAuC,QAAO,EAAE,CAAC,IACzG,CAAC,GAAG,CAAC;AAGf,QAAM,UAAU,MAAM;AAClB,QAAI,uBAAuB;AACvB,oBAAc,uBAAuB,EAAE,OAAO,UAAU,UAAU,QAAQ;AAAA,IAAA;AAAA,EAElF,GAAG,EAAE;AAGL,MAAI,QAAuB,CAAC;AAC5B,MAAI,UAAyC;AAG7C,MAAI,SAAS,MAAM,cAAc,EAAE,QAAQ;AAC/B,YAAA;AAAA,MACJ,QAAQ;AAAA,MACR,eAAe,OAAO,MAAM,aAAa,IAAI,IAAI;AAAA,MACjD,YAAY,OAAO,MAAM,UAAU,IAAI,IAAI;AAAA,IAC/C;AAAA,EAAA;AAIJ,MAAI,OAAO;AACG,cAAA,aAAa,IAAI,CAAc,eAAA;;AAErC,UAAI,CAAC,YAAY;AACN,eAAA;AAAA,MAAA;AAGP,UAAA;AAEJ,UAAI,UAAU,OAAO,aAAa,UAAU,OAAO,0BAA0B;AACzE,cAAM,mBACD,KAAK,MAAM,WAAW,QAAQ,UAAU,OAAO,QAAQ,IAAI,UAAU,OAAO,WAC7E,UAAU,OAAO;AACrB,cAAM,iBAAeG,MAAA,UAAU,OAAO,UAAjB,gBAAAA,IAAwB,QAAQ,sBAAqB;AAE1E,YAAI,eAAe,IAAI;AAIb,gBAAA,YAAY,eAAe,UAAU,OAAO,WAAY,WAAW,QAAQ,UAAU,OAAO;AAClG,gBAAMF,OAAK,SAAS;AAAA,QAAA;AAAA,MACxB,OACG;AACG,cAAAA,OAAK,WAAW,KAAK;AAAA,MAAA;AAG3B,UAAA,EAAC,2BAAK,WAAU;AAEV,cAAA,cAAc,YAAY,WAAW,KAAK;AAChD,mDAAQG,YAAY,aAAA,EAAA,KAAK,aAAa,OAAO,WAAW,OAAO,OAAc;AAAA,MAAA;AAG3E,YAAA,aAAa,CAAC,cAAsB;AAC1B,oBAAA,WAAW,YAAY,SAAS;AAAA,MAChD;AAGI,aAAA,sBAAA;AAAA,QAACC,IAAA;AAAA,QAAA;AAAA,UACG,KAAK,IAAI;AAAA,UACT;AAAA,UACA,OAAO,WAAW;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU,UAAU;AAAA,UACpB,cAAc,UAAU;AAAA,QAAA;AAAA,MAC5B;AAAA,IAAA,CAEP;AAAA,EAAA;AAGE,SAAA;AAAA,IACH,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACJ;AACJ;AAGA,SAAS,0BAA2C,OAA0B;AACpE,QAAAJ,QAAO,MAAM,YAAA,EAAc;AACjC,QAAM,iBAAiB,CAAC,CAAC,MAAM,WAAW,SAAS;AAE7C,QAAA,kBAAkB,MAAM,QAAQ,MAAM;AACxC,UAAM,UAAoB,CAAC;AAE3B,QAAI,gBAAgB;AACX,MAAAA,MAAA,QAAQ,CAAC,KAAK,UAAU;AACrB,YAAA,IAAI,gBAAgB;AACpB,kBAAQ,KAAK,KAAK;AAAA,QAAA;AAAA,MACtB,CACH;AAAA,IAAA;AAGE,WAAA;AAAA,EAAA,GACR,CAACA,KAAI,CAAC;AAGT,QAAM,iBAAiB,MAAM;AAAA,IACzB,CAAC,UAAiB;AACd,YAAM,sBACF,CAAC,GAAG,eAAe,EAAE,QAAQ,EAAE,KAAK,CAAA,UAAS,MAAM,cAAc,KAAK,KAAK,gBAAgB,CAAC;AAEhG,aAAO,wBAAwB,SACzBK,aAAAA,sBAAsB,KAAK,IAC3B,OAAO,CAAC,qBAAqB,GAAG,QAAQA,aAAAA,sBAAsB,KAAK,GAAG,mBAAmB,CAAC,GAAG,OAAK,CAAC;AAAA,IAC7G;AAAA,IACA,CAAC,eAAe;AAAA,EACpB;AAEA,SAAO,iBAAiB,iBAAiB;AAC7C;;"}
+{"version":3,"file":"useTableRenderer.cjs","sources":["../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    Range,\n} from '@tanstack/react-virtual';\nimport sortBy from 'lodash/sortBy';\nimport without from 'lodash/without';\n\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\nimport { SkeletonRow } from '../components/Row/BuiltIns/SkeletonRow';\n\n// scroll padding end is designed to always show half of the next row\nfunction getScrollPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    let offset = 2;\n\n    if (tableMeta.footer.isEnabled) {\n        offset += 1;\n    }\n\n    if (table.getHeaderGroups().length > 1) {\n        offset += table.getHeaderGroups().length - 1;\n    }\n\n    let height = ROW_HEIGHT_ESTIMATES.medium * offset;\n\n    const bottomRows = table.getBottomRows();\n\n    if (bottomRows.length) {\n        // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)\n        height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;\n    }\n\n    return height;\n}\n\n// scroll padding end is designed to always show half of the next row\nfunction getPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const bottomRows = table.getBottomRows() ?? [];\n    return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length;\n}\n\n// A higher number ensure less scroll jumping for dynamic row heights, but too high can reduce performance. 8 worked well\nconst OVERSCAN_ROW_COUNT = 8;\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    length: number,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n    const rows = table.getCenterRows() ?? [];\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n\n    const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;\n\n    const virtualiser = useVirtualizer({\n        count,\n        estimateSize: () => {\n            return tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;\n        },\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? count : OVERSCAN_ROW_COUNT,\n        rangeExtractor,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: getScrollPaddingEndOffset(table),\n        paddingEnd: getPaddingEndOffset(table),\n    });\n\n    const expandedState = table.getState().expanded;\n    const previousExpandedStateRef = React.useRef(false);\n\n    React.useEffect(() => {\n        // only remeasure when transitioning between expand all and not expand all\n        const isEmpty = JSON.stringify(expandedState) === '{}';\n\n        if (expandedState === true || (isEmpty && previousExpandedStateRef.current === true)) {\n            previousExpandedStateRef.current = expandedState === true;\n            virtualiser.measure();\n        }\n    }, [expandedState]);\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === count - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, count]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;\n\n    const startValue = isTableRowGrouped\n        ? (virtualItems[paddingStartIndex]?.start ?? 0) - (virtualItems[paddingStartIndex]?.size ?? 0)\n        : virtualItems[paddingStartIndex]?.start;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    // bottom rows aren't virtualised (they're sticky) but we need to set the height\n    if (count || table.getBottomRows().length) {\n        style = {\n            height: totalSize,\n            paddingBottom: Number.isNaN(paddingBottom) ? 0 : paddingBottom,\n            paddingTop: Number.isNaN(paddingTop) ? 0 : paddingTop,\n        };\n    }\n\n    // only render non sticky rows\n    if (count) {\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            let row: ReactTableRow<TType> | undefined;\n\n            if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {\n                const currentPageIndex =\n                    (Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize) /\n                    tableMeta.server.pageSize;\n                const pagePosition = tableMeta.server.pages?.indexOf(currentPageIndex) ?? -1;\n\n                if (pagePosition > -1) {\n                    // \"flatten\" row indexes down into the dataloader2 dataset size\n                    // for example, with a page size of 100...\n                    // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)\n                    const fakeIndex = pagePosition * tableMeta.server.pageSize + (virtualRow.index % tableMeta.server.pageSize);\n                    row = rows[fakeIndex];\n                }\n            } else {\n                row = rows[virtualRow.index];\n            }\n\n            if (!row?.original) {\n                // Prefix skeleton keys to prevent collision with real data row keys\n                const skeletonKey = `skeleton-${virtualRow.index}`;\n                return <SkeletonRow key={skeletonKey} index={virtualRow.index} table={table} />;\n            }\n\n            const measureRow = (rowHeight: number) => {\n                virtualiser.resizeItem(virtualRow.index, rowHeight);\n            };\n\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        (range: Range) => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            return activeRowGroupIndex === undefined\n                ? defaultRangeExtractor(range)\n                : sortBy([activeRowGroupIndex, ...without(defaultRangeExtractor(range), activeRowGroupIndex)], a => a);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["ROW_HEIGHT_ESTIMATES","rows","useVirtualizer","_a","SkeletonRow","Row","defaultRangeExtractor"],"mappings":"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"}

package/dist/primitives/Table/Core/features/useTableRenderer.js

@@ -112,7 +112,7 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
         return /* @__PURE__ */ React__default.createElement(SkeletonRow, { key: skeletonKey, index: virtualRow.index, table });
       }
       const measureRow = (rowHeight) => {
-        virtualiser.resizeItem(virtualRow, rowHeight);
+        virtualiser.resizeItem(virtualRow.index, rowHeight);
       };
       return /* @__PURE__ */ React__default.createElement(
         Row,

package/dist/primitives/Table/Core/features/useTableRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRenderer.js","sources":["../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    Range,\n} from '@tanstack/react-virtual';\nimport sortBy from 'lodash/sortBy';\nimport without from 'lodash/without';\n\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\nimport { SkeletonRow } from '../components/Row/BuiltIns/SkeletonRow';\n\n// scroll padding end is designed to always show half of the next row\nfunction getScrollPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    let offset = 2;\n\n    if (tableMeta.footer.isEnabled) {\n        offset += 1;\n    }\n\n    if (table.getHeaderGroups().length > 1) {\n        offset += table.getHeaderGroups().length - 1;\n    }\n\n    let height = ROW_HEIGHT_ESTIMATES.medium * offset;\n\n    const bottomRows = table.getBottomRows();\n\n    if (bottomRows.length) {\n        // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)\n        height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;\n    }\n\n    return height;\n}\n\n// scroll padding end is designed to always show half of the next row\nfunction getPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const bottomRows = table.getBottomRows() ?? [];\n    return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length;\n}\n\n// A higher number ensure less scroll jumping for dynamic row heights, but too high can reduce performance. 8 worked well\nconst OVERSCAN_ROW_COUNT = 8;\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    length: number,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n    const rows = table.getCenterRows() ?? [];\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n\n    const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;\n\n    const virtualiser = useVirtualizer({\n        count,\n        estimateSize: () => {\n            return tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;\n        },\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? count : OVERSCAN_ROW_COUNT,\n        rangeExtractor,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: getScrollPaddingEndOffset(table),\n        paddingEnd: getPaddingEndOffset(table),\n    });\n\n    const expandedState = table.getState().expanded;\n    const previousExpandedStateRef = React.useRef(false);\n\n    React.useEffect(() => {\n        // only remeasure when transitioning between expand all and not expand all\n        const isEmpty = JSON.stringify(expandedState) === '{}';\n\n        if (expandedState === true || (isEmpty && previousExpandedStateRef.current === true)) {\n            previousExpandedStateRef.current = expandedState === true;\n            virtualiser.measure();\n        }\n    }, [expandedState]);\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === count - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, count]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;\n\n    const startValue = isTableRowGrouped\n        ? (virtualItems[paddingStartIndex]?.start ?? 0) - (virtualItems[paddingStartIndex]?.size ?? 0)\n        : virtualItems[paddingStartIndex]?.start;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    // bottom rows aren't virtualised (they're sticky) but we need to set the height\n    if (count || table.getBottomRows().length) {\n        style = {\n            height: totalSize,\n            paddingBottom: Number.isNaN(paddingBottom) ? 0 : paddingBottom,\n            paddingTop: Number.isNaN(paddingTop) ? 0 : paddingTop,\n        };\n    }\n\n    // only render non sticky rows\n    if (count) {\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            let row: ReactTableRow<TType> | undefined;\n\n            if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {\n                const currentPageIndex =\n                    (Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize) /\n                    tableMeta.server.pageSize;\n                const pagePosition = tableMeta.server.pages?.indexOf(currentPageIndex) ?? -1;\n\n                if (pagePosition > -1) {\n                    // \"flatten\" row indexes down into the dataloader2 dataset size\n                    // for example, with a page size of 100...\n                    // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)\n                    const fakeIndex = pagePosition * tableMeta.server.pageSize + (virtualRow.index % tableMeta.server.pageSize);\n                    row = rows[fakeIndex];\n                }\n            } else {\n                row = rows[virtualRow.index];\n            }\n\n            if (!row?.original) {\n                // Prefix skeleton keys to prevent collision with real data row keys\n                const skeletonKey = `skeleton-${virtualRow.index}`;\n                return <SkeletonRow key={skeletonKey} index={virtualRow.index} table={table} />;\n            }\n\n            const measureRow = (rowHeight: number) => {\n                virtualiser.resizeItem(virtualRow, rowHeight);\n            };\n\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        (range: Range) => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            return activeRowGroupIndex === undefined\n                ? defaultRangeExtractor(range)\n                : sortBy([activeRowGroupIndex, ...without(defaultRangeExtractor(range), activeRowGroupIndex)], a => a);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["React","_a"],"mappings":"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"}
+{"version":3,"file":"useTableRenderer.js","sources":["../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    Range,\n} from '@tanstack/react-virtual';\nimport sortBy from 'lodash/sortBy';\nimport without from 'lodash/without';\n\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\nimport { SkeletonRow } from '../components/Row/BuiltIns/SkeletonRow';\n\n// scroll padding end is designed to always show half of the next row\nfunction getScrollPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    let offset = 2;\n\n    if (tableMeta.footer.isEnabled) {\n        offset += 1;\n    }\n\n    if (table.getHeaderGroups().length > 1) {\n        offset += table.getHeaderGroups().length - 1;\n    }\n\n    let height = ROW_HEIGHT_ESTIMATES.medium * offset;\n\n    const bottomRows = table.getBottomRows();\n\n    if (bottomRows.length) {\n        // 1.4 offsets for half rows and also accounts for increased row heights (which is likely in pinned rows)\n        height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;\n    }\n\n    return height;\n}\n\n// scroll padding end is designed to always show half of the next row\nfunction getPaddingEndOffset<TType = unknown>(table: ReactTable<TType>) {\n    const bottomRows = table.getBottomRows() ?? [];\n    return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length;\n}\n\n// A higher number ensure less scroll jumping for dynamic row heights, but too high can reduce performance. 8 worked well\nconst OVERSCAN_ROW_COUNT = 8;\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    length: number,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n    const rows = table.getCenterRows() ?? [];\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n\n    const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;\n\n    const virtualiser = useVirtualizer({\n        count,\n        estimateSize: () => {\n            return tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;\n        },\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? count : OVERSCAN_ROW_COUNT,\n        rangeExtractor,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: getScrollPaddingEndOffset(table),\n        paddingEnd: getPaddingEndOffset(table),\n    });\n\n    const expandedState = table.getState().expanded;\n    const previousExpandedStateRef = React.useRef(false);\n\n    React.useEffect(() => {\n        // only remeasure when transitioning between expand all and not expand all\n        const isEmpty = JSON.stringify(expandedState) === '{}';\n\n        if (expandedState === true || (isEmpty && previousExpandedStateRef.current === true)) {\n            previousExpandedStateRef.current = expandedState === true;\n            virtualiser.measure();\n        }\n    }, [expandedState]);\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === count - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, count]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && count > 1 ? 1 : 0;\n\n    const startValue = isTableRowGrouped\n        ? (virtualItems[paddingStartIndex]?.start ?? 0) - (virtualItems[paddingStartIndex]?.size ?? 0)\n        : virtualItems[paddingStartIndex]?.start;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    // bottom rows aren't virtualised (they're sticky) but we need to set the height\n    if (count || table.getBottomRows().length) {\n        style = {\n            height: totalSize,\n            paddingBottom: Number.isNaN(paddingBottom) ? 0 : paddingBottom,\n            paddingTop: Number.isNaN(paddingTop) ? 0 : paddingTop,\n        };\n    }\n\n    // only render non sticky rows\n    if (count) {\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            let row: ReactTableRow<TType> | undefined;\n\n            if (tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2) {\n                const currentPageIndex =\n                    (Math.floor(virtualRow.index / tableMeta.server.pageSize) * tableMeta.server.pageSize) /\n                    tableMeta.server.pageSize;\n                const pagePosition = tableMeta.server.pages?.indexOf(currentPageIndex) ?? -1;\n\n                if (pagePosition > -1) {\n                    // \"flatten\" row indexes down into the dataloader2 dataset size\n                    // for example, with a page size of 100...\n                    // row index 14267 is actually one of index 67, 167, 267 etc within the dataset (depending on number of pages stored)\n                    const fakeIndex = pagePosition * tableMeta.server.pageSize + (virtualRow.index % tableMeta.server.pageSize);\n                    row = rows[fakeIndex];\n                }\n            } else {\n                row = rows[virtualRow.index];\n            }\n\n            if (!row?.original) {\n                // Prefix skeleton keys to prevent collision with real data row keys\n                const skeletonKey = `skeleton-${virtualRow.index}`;\n                return <SkeletonRow key={skeletonKey} index={virtualRow.index} table={table} />;\n            }\n\n            const measureRow = (rowHeight: number) => {\n                virtualiser.resizeItem(virtualRow.index, rowHeight);\n            };\n\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        (range: Range) => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            return activeRowGroupIndex === undefined\n                ? defaultRangeExtractor(range)\n                : sortBy([activeRowGroupIndex, ...without(defaultRangeExtractor(range), activeRowGroupIndex)], a => a);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["React","_a"],"mappings":";;;;;;;AAkBA,SAAS,0BAA2C,OAA0B;AACpE,QAAA,YAAY,MAAM,QAAQ;AAChC,MAAI,SAAS;AAET,MAAA,UAAU,OAAO,WAAW;AAClB,cAAA;AAAA,EAAA;AAGd,MAAI,MAAM,kBAAkB,SAAS,GAAG;AAC1B,cAAA,MAAM,gBAAgB,EAAE,SAAS;AAAA,EAAA;AAG3C,MAAA,SAAS,qBAAqB,SAAS;AAErC,QAAA,aAAa,MAAM,cAAc;AAEvC,MAAI,WAAW,QAAQ;AAEnB,cAAU,qBAAqB,UAAU,UAAU,MAAM,IAAI,MAAM,WAAW;AAAA,EAAA;AAG3E,SAAA;AACX;AAGA,SAAS,oBAAqC,OAA0B;AACpE,QAAM,aAAa,MAAM,cAAc,KAAK,CAAC;AACtC,SAAA,qBAAqB,SAAS,IAAI,WAAW;AACxD;AAGA,MAAM,qBAAqB;AAEpB,SAAS,iBACZ,WACA,OACA,UACA,QACA,uBACF;;AACQ,QAAA,YAAY,MAAM,QAAQ;AAChC,QAAM,oBAAoB,CAAC,GAAC,WAAM,WAAW,aAAjB,mBAA2B;AACvD,QAAM,OAAO,MAAM,cAAc,KAAK,CAAC;AAGjC,QAAA,iBAAiB,0BAAiC,KAAK;AAG7D,QAAM,qBAAqB,qBAAqB;AAE1C,QAAA,QAAQ,UAAU,OAAO,aAAa,UAAU,OAAO,2BAA2B,SAAS,KAAK;AAEtG,QAAM,cAAc,eAAe;AAAA,IAC/B;AAAA,IACA,cAAc,MAAM;AACT,aAAA,UAAU,UAAU,SAAS,qBAAqB,UAAU,UAAU,MAAM,IAAI,qBAAqB;AAAA,IAChH;AAAA,IACA,kBAAkB,MAAM,SAAS;AAAA,IACjC,UAAU,UAAU,SAAS,aAAa,QAAQ;AAAA,IAClD;AAAA;AAAA,IAEA;AAAA,IACA,kBAAkB,0BAA0B,KAAK;AAAA,IACjD,YAAY,oBAAoB,KAAK;AAAA,EAAA,CACxC;AAEK,QAAA,gBAAgB,MAAM,SAAA,EAAW;AACjC,QAAA,2BAA2BA,eAAM,OAAO,KAAK;AAEnDA,iBAAM,UAAU,MAAM;AAElB,UAAM,UAAU,KAAK,UAAU,aAAa,MAAM;AAElD,QAAI,kBAAkB,QAAS,WAAW,yBAAyB,YAAY,MAAO;AAClF,+BAAyB,UAAU,kBAAkB;AACrD,kBAAY,QAAQ;AAAA,IAAA;AAAA,EACxB,GACD,CAAC,aAAa,CAAC;AAEZ,QAAA,YAAY,YAAY,aAAa;AACrC,QAAA,eAAe,YAAY,gBAAgB;AAEjD,QAAM,gBAAgBA,eAAM;AAAA,IACxB,CAAC,OAAe,UAAuC,EAAE,OAAO,QAAQ,UAAU,eAAe;AAC7F,YAAM,YAAyC,EAAE,GAAG,SAAS,UAAU,OAAO;AAE9E,UAAI,SAAS,SAAS;AAClB,YAAI,UAAU,GAAG;AACD,sBAAA,eAAe,GAAG,SAAS;AAAA,QAAA,WAChC,UAAU,QAAQ,GAAG;AAEnB,mBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,QAAA,OAC3C;AACS,sBAAA,cAAc,OAAO,OAAO;AAAA,QAAA;AAAA,MAC5C;AAAA,IAER;AAAA,IACA,CAAC,aAAa,QAAQ,SAAS,SAAS,WAAW,KAAK;AAAA,EAC5D;AAGA,QAAM,oBAAoB,qBAAqB,QAAQ,IAAI,IAAI;AAE/D,QAAM,aAAa,uBACZ,kBAAa,iBAAiB,MAA9B,mBAAiC,UAAS,QAAM,kBAAa,iBAAiB,MAA9B,mBAAiC,SAAQ,MAC1F,kBAAa,iBAAiB,MAA9B,mBAAiC;AAGvC,QAAM,CAAC,YAAY,aAAa,IAC5B,aAAa,SAAS,IAChB,CAAC,KAAK,IAAI,GAAG,cAAc,CAAC,GAAG,KAAK,IAAI,GAAG,eAAa,kBAAa,aAAa,SAAS,CAAC,MAApC,mBAAuC,QAAO,EAAE,CAAC,IACzG,CAAC,GAAG,CAAC;AAGfA,iBAAM,UAAU,MAAM;AAClB,QAAI,uBAAuB;AACvB,oBAAc,uBAAuB,EAAE,OAAO,UAAU,UAAU,QAAQ;AAAA,IAAA;AAAA,EAElF,GAAG,EAAE;AAGL,MAAI,QAAuB,CAAC;AAC5B,MAAI,UAAyC;AAG7C,MAAI,SAAS,MAAM,cAAc,EAAE,QAAQ;AAC/B,YAAA;AAAA,MACJ,QAAQ;AAAA,MACR,eAAe,OAAO,MAAM,aAAa,IAAI,IAAI;AAAA,MACjD,YAAY,OAAO,MAAM,UAAU,IAAI,IAAI;AAAA,IAC/C;AAAA,EAAA;AAIJ,MAAI,OAAO;AACG,cAAA,aAAa,IAAI,CAAc,eAAA;;AAErC,UAAI,CAAC,YAAY;AACN,eAAA;AAAA,MAAA;AAGP,UAAA;AAEJ,UAAI,UAAU,OAAO,aAAa,UAAU,OAAO,0BAA0B;AACzE,cAAM,mBACD,KAAK,MAAM,WAAW,QAAQ,UAAU,OAAO,QAAQ,IAAI,UAAU,OAAO,WAC7E,UAAU,OAAO;AACrB,cAAM,iBAAeC,MAAA,UAAU,OAAO,UAAjB,gBAAAA,IAAwB,QAAQ,sBAAqB;AAE1E,YAAI,eAAe,IAAI;AAIb,gBAAA,YAAY,eAAe,UAAU,OAAO,WAAY,WAAW,QAAQ,UAAU,OAAO;AAClG,gBAAM,KAAK,SAAS;AAAA,QAAA;AAAA,MACxB,OACG;AACG,cAAA,KAAK,WAAW,KAAK;AAAA,MAAA;AAG3B,UAAA,EAAC,2BAAK,WAAU;AAEV,cAAA,cAAc,YAAY,WAAW,KAAK;AAChD,4DAAQ,aAAY,EAAA,KAAK,aAAa,OAAO,WAAW,OAAO,OAAc;AAAA,MAAA;AAG3E,YAAA,aAAa,CAAC,cAAsB;AAC1B,oBAAA,WAAW,WAAW,OAAO,SAAS;AAAA,MACtD;AAGI,aAAAD,+BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK,IAAI;AAAA,UACT;AAAA,UACA,OAAO,WAAW;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU,UAAU;AAAA,UACpB,cAAc,UAAU;AAAA,QAAA;AAAA,MAC5B;AAAA,IAAA,CAEP;AAAA,EAAA;AAGE,SAAA;AAAA,IACH,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACJ;AACJ;AAGA,SAAS,0BAA2C,OAA0B;AACpE,QAAA,OAAO,MAAM,YAAA,EAAc;AACjC,QAAM,iBAAiB,CAAC,CAAC,MAAM,WAAW,SAAS;AAE7C,QAAA,kBAAkBA,eAAM,QAAQ,MAAM;AACxC,UAAM,UAAoB,CAAC;AAE3B,QAAI,gBAAgB;AACX,WAAA,QAAQ,CAAC,KAAK,UAAU;AACrB,YAAA,IAAI,gBAAgB;AACpB,kBAAQ,KAAK,KAAK;AAAA,QAAA;AAAA,MACtB,CACH;AAAA,IAAA;AAGE,WAAA;AAAA,EAAA,GACR,CAAC,IAAI,CAAC;AAGT,QAAM,iBAAiBA,eAAM;AAAA,IACzB,CAAC,UAAiB;AACd,YAAM,sBACF,CAAC,GAAG,eAAe,EAAE,QAAQ,EAAE,KAAK,CAAA,UAAS,MAAM,cAAc,KAAK,KAAK,gBAAgB,CAAC;AAEhG,aAAO,wBAAwB,SACzB,sBAAsB,KAAK,IAC3B,OAAO,CAAC,qBAAqB,GAAG,QAAQ,sBAAsB,KAAK,GAAG,mBAAmB,CAAC,GAAG,OAAK,CAAC;AAAA,IAC7G;AAAA,IACA,CAAC,eAAe;AAAA,EACpB;AAEA,SAAO,iBAAiB,iBAAiB;AAC7C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "8.1.2-hanger-base-ui.4",
+    "version": "8.1.3-alpha.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -43,12 +43,13 @@
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.2",
-        "@economic/taco-tokens": "^2.2.4",
+        "@economic/taco-tokens": "^2.2.5-alpha.0",
+        "@radix-ui/react-popover": "1.0.2",
         "@radix-ui/react-scroll-area": "1.2.10",
         "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
         "@tanstack/react-table": "^8.21.3",
-        "@tanstack/react-virtual": "3.0.1",
+        "@tanstack/react-virtual": "3.13.23",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "framer-motion": "12.38.0",
@@ -70,13 +71,13 @@
         "tailwindcss": ">=3.4.19"
     },
     "devDependencies": {
-        "@oxlint/plugins": "^1.67.0",
+        "@oxlint/plugins": "^1.69.0",
         "@svgr/cli": "^5.5.0",
         "@testing-library/jest-dom": "6.9.1",
         "@testing-library/react": "16.3.2",
         "@testing-library/user-event": "14.6.1",
         "@types/lodash": "^4.17.24",
-        "@types/node": "^22.19.19",
+        "@types/node": "^22.19.21",
         "@types/react": "18.3.31",
         "@types/react-dom": "18.3.7",
         "@types/react-table": "^7.7.20",
@@ -86,7 +87,7 @@
         "jsdom": "^26.1.0",
         "resize-observer-polyfill": "^1.5.1",
         "rimraf": "^3.0.2",
-        "stylelint": "^17.12.0",
+        "stylelint": "^17.13.0",
         "svgo": "^1.3.2",
         "tailwindcss": "^3.4.19",
         "typescript": "^5.9.3",
@@ -96,7 +97,7 @@
         "vitest": "^3.2.6"
     },
     "optionalDependencies": {
-        "@rollup/rollup-linux-x64-gnu": "^4.60.4"
+        "@rollup/rollup-linux-x64-gnu": "^4.62.0"
     },
-    "gitHead": "6a489b2d226b2d2bd8ab2ce067e3ef12db6427ac"
+    "gitHead": "e2b2169e5fbc9a76f671e2eac5b6532a2e68336a"
 }