@economic/taco 1.12.0 → 1.12.2

package/dist/esm/components/Popover/Popover.js

@@ -8,10 +8,14 @@ const PopoverContext = /*#__PURE__*/createContext({
   props: {},
   ref: null
 });
-const Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
+const Trigger = /*#__PURE__*/forwardRef(function PopoverAnchor(props, externalRef) {
   var _props$children;
 
-  const context = useContext(PopoverContext);
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useContext(PopoverContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
   let children = props.children;
 
   if ( /*#__PURE__*/isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
@@ -19,9 +23,9 @@ const Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
     children = /*#__PURE__*/createElement("span", null, props.children);
   }
 
-  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, context.props, props, {
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, parentProps, props, {
     children: children,
-    ref: mergeRefs([context.ref, ref]),
+    ref: refCallback,
     asChild: true
   }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(PopoverContext);\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n    );\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('hide'));\n    };\n\n    return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('bg-white focus:border-blue-light', props.className);\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <PopoverPrimitive.Close asChild>\n                <RenderPropWrapper>{props.children}</RenderPropWrapper>\n            </PopoverPrimitive.Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <UnstyledContent className={className} placement={props.placement} ref={ref}>\n            {output}\n            <UnstyledArrow className=\"text-white\" />\n        </UnstyledContent>\n    );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n    (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n        <PopoverPrimitive.Close {...props} ref={ref} asChild />\n    )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{\n    /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n    Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n    Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\n    const { children, trigger, ...otherProps } = props;\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    return (\n        <PopoverContext.Provider value={context}>\n            <PopoverPrimitive.Root>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </PopoverPrimitive.Root>\n        </PopoverContext.Provider>\n    );\n}) as ForwardedPopoverWithStatics;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverTrigger","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","Provider","value"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLElement>;\nconst Trigger = React.forwardRef(function PopoverAnchor(props: PopoverTriggerProps, externalRef: React.Ref<HTMLElement>) {\n    const { ref: parentRef, props: parentProps } = React.useContext(PopoverContext);\n    const refCallback = mergeRefs([parentRef, externalRef]);\n\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return <PopoverPrimitive.Trigger {...parentProps} {...props} children={children} ref={refCallback} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('hide'));\n    };\n\n    return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n    /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('bg-white focus:border-blue-light', props.className);\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <PopoverPrimitive.Close asChild>\n                <RenderPropWrapper>{props.children}</RenderPropWrapper>\n            </PopoverPrimitive.Close>\n        );\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <UnstyledContent className={className} placement={props.placement} ref={ref}>\n            {output}\n            <UnstyledArrow className=\"text-white\" />\n        </UnstyledContent>\n    );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n    (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n        <PopoverPrimitive.Close {...props} ref={ref} asChild />\n    )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{\n    /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n    Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n    Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(function Popover(props, ref) {\n    const { children, trigger, ...otherProps } = props;\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    return (\n        <PopoverContext.Provider value={context}>\n            <PopoverPrimitive.Root>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </PopoverPrimitive.Root>\n        </PopoverContext.Provider>\n    );\n}) as ForwardedPopoverWithStatics;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverAnchor","externalRef","parentRef","parentProps","refCallback","mergeRefs","children","type","console","warn","name","PopoverPrimitive","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","context","Provider","value"],"mappings":";;;;;;AASA,MAAMA,cAAc,gBAAGC,aAAA,CAAyC;EAC5DC,KAAK,EAAE,EADqD;EAE5DC,GAAG,EAAE;AAFuD,CAAzC,CAAvB;AAMA,MAAMC,OAAO,gBAAGH,UAAA,CAAiB,SAASI,aAAT,CAAuBH,KAAvB,EAAmDI,WAAnD;;;EAC7B,MAAM;IAAEH,GAAG,EAAEI,SAAP;IAAkBL,KAAK,EAAEM;MAAgBP,UAAA,CAAiBD,cAAjB,CAA/C;EACA,MAAMS,WAAW,GAAGC,SAAS,CAAC,CAACH,SAAD,EAAYD,WAAZ,CAAD,CAA7B;EAEA,IAAIK,QAAQ,GAAGT,KAAK,CAACS,QAArB;;EAEA,kBAAIV,cAAA,CAAqBC,KAAK,CAACS,QAA3B,KAAwC,2BAAOT,KAAK,CAACS,QAAb,oDAAO,gBAAgBC,IAAvB,MAAgC,UAA5E,EAAwF;IACpFC,OAAO,CAACC,IAAR,qHACwHZ,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoBG,kDAAkDb,KAAK,CAACS,QAAN,CAAeC,IAAf,CAAoBG,sFADlN;IAGAJ,QAAQ,gBAAGV,aAAA,OAAA,MAAA,EAAOC,KAAK,CAACS,QAAb,CAAX;;;EAGJ,oBAAOV,aAAA,CAACe,SAAD,oBAA8BR,aAAiBN;IAAOS,QAAQ,EAAEA;IAAUR,GAAG,EAAEM;IAAaQ,OAAO;IAAnG,CAAP;AACH,CAde,CAAhB;AAgBA,MAAMC,iBAAiB,gBAAGjB,UAAA,CAAiB,SAASiB,iBAAT,CAA2B;EAAEP,QAAF;EAAYQ;AAAZ,CAA3B,EAAuDhB,GAAvD;EACvC,MAAMiB,KAAK,GAAG;IACVD,OAAO,CAAC,IAAIE,WAAJ,CAAgB,MAAhB,CAAD,CAAP;GADJ;;EAIA,OAAOV,QAAQ,CAAC;IAAES,KAAF;IAASjB;GAAV,CAAf;AACH,CANyB,CAA1B;AAcA,MAAMmB,OAAO,gBAAGrB,UAAA,CAAiB,SAASsB,cAAT,CAAwBrB,KAAxB,EAAoDC,GAApD;EAC7B,MAAMqB,SAAS,GAAGC,EAAE,CAAC,kCAAD,EAAqCvB,KAAK,CAACsB,SAA3C,CAApB;EAEA,IAAIE,MAAJ;;EAEA,IAAI,OAAOxB,KAAK,CAACS,QAAb,KAA0B,UAA9B,EAA0C;IACtCe,MAAM,gBACFzB,aAAA,CAACe,OAAD;MAAwBC,OAAO;KAA/B,eACIhB,aAAA,CAACiB,iBAAD,MAAA,EAAoBhB,KAAK,CAACS,QAA1B,CADJ,CADJ;GADJ,MAMO;IACHe,MAAM,GAAGxB,KAAK,CAACS,QAAf;;;EAGJ,oBACIV,aAAA,CAAC0B,eAAD;IAAiBH,SAAS,EAAEA;IAAWI,SAAS,EAAE1B,KAAK,CAAC0B;IAAWzB,GAAG,EAAEA;GAAxE,EACKuB,MADL,eAEIzB,aAAA,CAAC4B,aAAD;IAAeL,SAAS,EAAC;GAAzB,CAFJ,CADJ;AAMH,CArBe,CAAhB;AAwBA,MAAMM,KAAK,gBAAG7B,UAAA,CACV,CAACC,KAAD,EAA2BC,GAA3B,kBACIF,aAAA,CAACe,OAAD,oBAA4Bd;EAAOC,GAAG,EAAEA;EAAKc,OAAO;EAApD,CAFM,CAAd;MAgBac,OAAO,gBAAG9B,UAAA,CAA4C,SAAS8B,OAAT,CAAiB7B,KAAjB,EAAwBC,GAAxB;EAC/D,MAAM;IAAEQ,QAAF;IAAYqB,OAAZ;IAAqB,GAAGC;MAAe/B,KAA7C;EACA,MAAMgC,OAAO,GAAGjC,OAAA,CAAc,OAAO;IAAEC,KAAK,EAAE+B,UAAT;IAAqB9B;GAA5B,CAAd,EAAkD,CAAC8B,UAAD,CAAlD,CAAhB;EAEA,oBACIhC,aAAA,CAACD,cAAc,CAACmC,QAAhB;IAAyBC,KAAK,EAAEF;GAAhC,eACIjC,aAAA,CAACe,IAAD,MAAA,EACKgB,OAAO,iBAAI/B,aAAA,CAACG,OAAD,MAAA,EAAU4B,OAAV,CADhB,EAEKrB,QAFL,CADJ,CADJ;AAQH,CAZsB;AAavBoB,OAAO,CAAC3B,OAAR,GAAkBA,OAAlB;AACA2B,OAAO,CAACT,OAAR,GAAkBA,OAAlB;AACAS,OAAO,CAACD,KAAR,GAAgBA,KAAhB;;;;"}

package/dist/esm/index.css

@@ -136,7 +136,7 @@
     input[type='search']::-webkit-search-cancel-button,
     input[type='search']::-webkit-search-results-button,
     input[type='search']::-webkit-search-results-decoration {
-        @apply cursor-pointer;
+        @apply block cursor-pointer;
     }
 
     table.yt-table {

package/dist/esm/index.js

@@ -8,7 +8,7 @@ export { Accordion } from './components/Accordion/Accordion.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
 export { Badge } from './components/Badge/Badge.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { IconButton } from './components/IconButton/IconButton.js';
+export { Base, IconButton } from './components/IconButton/IconButton.js';
 export { Banner } from './components/Banner/Banner.js';
 export { Button } from './components/Button/Button.js';
 export { Spinner } from './components/Spinner/Spinner.js';

package/dist/index.css

@@ -136,7 +136,7 @@
     input[type='search']::-webkit-search-cancel-button,
     input[type='search']::-webkit-search-results-button,
     input[type='search']::-webkit-search-results-decoration {
-        @apply cursor-pointer;
+        @apply block cursor-pointer;
     }
 
     table.yt-table {

package/dist/taco.cjs.development.js

@@ -62,10 +62,14 @@ function mergeRefs(refs) {
   };
 }
 
-const Trigger = /*#__PURE__*/React.forwardRef(function AlertDialogTrigger(props, ref) {
-  const dialog = useCurrentAlertDialog();
-  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Trigger, Object.assign({}, props, {
-    ref: mergeRefs([dialog.ref, ref]),
+const Trigger = /*#__PURE__*/React.forwardRef(function AlertDialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentAlertDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Trigger, Object.assign({}, parentProps, props, {
+    ref: refCallback,
     asChild: true
   }));
 });
@@ -198,9 +202,9 @@ const AlertDialog = /*#__PURE__*/React.forwardRef(function AlertDialog(props, re
     ...otherProps
   } = props;
   const context = React.useMemo(() => ({
-    ref,
     draggable,
     props: otherProps,
+    ref,
     size,
     trigger
   }), [draggable, open, otherProps]);
@@ -3666,28 +3670,40 @@ const getAppearanceClasses = (value, icon = false) => {
       return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;
   }
 };
-const createButton = (props, className, ref) => {
+const createButtonWithTooltip = (props, className, ref) => {
   const {
-    dialog,
-    hanger,
-    menu,
-    popover,
     tooltip,
-    ...otherProps
+    ...buttonProps
   } = props;
-  let button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, otherProps, {
+  const button = /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
     className: className,
     ref: ref
   }));
 
+  if (tooltip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
+const createButtonWithOverlays = (props, buttonBase) => {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover
+  } = props;
+  let button = buttonBase;
+
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button
     });
   } else if (typeof menu === 'function') {
     button = menu({
-      trigger: button,
-      appearance: otherProps.appearance
+      trigger: button
     });
   } else if (typeof popover === 'function') {
     button = popover({
@@ -3701,16 +3717,10 @@ const createButton = (props, className, ref) => {
     });
   }
 
-  if (tooltip) {
-    button = /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: tooltip
-    }, button);
-  }
-
   return button;
 };
 
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
+const Base = /*#__PURE__*/React.forwardRef(function IconButtonBase(props, ref) {
   const {
     icon,
     rounded = false,
@@ -3727,7 +3737,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref)
     return null;
   }
 
-  return createButton({ ...otherProps,
+  return createButtonWithTooltip({ ...otherProps,
     children: /*#__PURE__*/React.createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
@@ -3735,6 +3745,24 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref)
     'data-taco': 'icon-button'
   }, className, ref);
 });
+const IconButton = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover,
+    ...buttonProps
+  } = props;
+  const button = /*#__PURE__*/React.createElement(Base, Object.assign({}, buttonProps, {
+    ref: ref
+  }));
+  return createButtonWithOverlays({
+    dialog,
+    hanger,
+    menu,
+    popover
+  }, button);
+});
 
 const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   const {
@@ -3755,7 +3783,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   const {
     fluid,
     ...otherProps
@@ -3765,9 +3793,21 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
-  let children = otherProps.children; // add a chevron icon to menu buttons
+  return createButtonWithTooltip({ ...otherProps,
+    'data-taco': 'button'
+  }, className, ref);
+});
+const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  const {
+    dialog,
+    hanger,
+    menu,
+    popover,
+    ...buttonProps
+  } = props;
+  let children = buttonProps.children; // add a chevron icon to menu buttons
 
-  if (typeof otherProps.menu === 'function') {
+  if (typeof menu === 'function') {
     children = Array.isArray(children) ? [...children, /*#__PURE__*/React.createElement(Icon, {
       key: "chevron-down",
       name: "chevron-down"
@@ -3777,10 +3817,16 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
     })];
   }
 
-  return createButton({ ...otherProps,
-    children,
-    'data-taco': 'button'
-  }, className, ref);
+  const button = /*#__PURE__*/React.createElement(Base$1, Object.assign({}, buttonProps, {
+    children: children,
+    ref: ref
+  }));
+  return createButtonWithOverlays({
+    dialog,
+    hanger,
+    menu,
+    popover
+  }, button);
 });
 
 function useTimer(duration = 0, callback) {
@@ -5555,10 +5601,14 @@ const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
+const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, externalRef) {
   var _props$children;
 
-  const context = React.useContext(PopoverContext);
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = React.useContext(PopoverContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
   let children = props.children;
 
   if ( /*#__PURE__*/React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
@@ -5566,9 +5616,9 @@ const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, r
     children = /*#__PURE__*/React.createElement("span", null, props.children);
   }
 
-  return /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, Object.assign({}, parentProps, props, {
     children: children,
-    ref: mergeRefs([context.ref, ref]),
+    ref: refCallback,
     asChild: true
   }));
 });
@@ -5709,10 +5759,14 @@ const useCurrentDialog = () => {
   return React.useContext(DialogContext);
 };
 
-const Trigger$3 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, ref) {
-  const dialog = useCurrentDialog();
-  return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, Object.assign({}, dialog.props, props, {
-    ref: mergeRefs([dialog.ref, ref]),
+const Trigger$3 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, externalRef) {
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = useCurrentDialog();
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, Object.assign({}, parentProps, props, {
+    ref: refCallback,
     asChild: true
   }));
 });
@@ -6016,13 +6070,18 @@ const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
 });
 
 const HangerContext = /*#__PURE__*/React.createContext({
+  onClose: undefined,
   props: {},
   ref: null
 });
-const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
+const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, externalRef) {
   var _props$children;
 
-  const context = React.useContext(HangerContext);
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = React.useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
   let children = props.children;
 
   if ( /*#__PURE__*/React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
@@ -6030,9 +6089,9 @@ const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     children = /*#__PURE__*/React.createElement("span", null, props.children);
   }
 
-  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({}, parentProps, props, {
     children: children,
-    ref: mergeRefs([context.ref, ref]),
+    ref: refCallback,
     asChild: true
   }));
 });
@@ -6069,7 +6128,7 @@ const Content$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
     "aria-label": texts.hanger.close,
     className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
     icon: "close",
-    onClick: context.props.onClose
+    onClick: context.onClose
   })));
 });
 const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
@@ -6077,12 +6136,14 @@ const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
     anchor,
     children,
     defaultOpen = true,
+    onClose,
     ...otherProps
   } = props;
   const context = React.useMemo(() => ({
+    onClose,
     props: otherProps,
     ref
-  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+  }), [onClose, otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
 
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
@@ -9691,6 +9752,7 @@ exports.AlertDialog = AlertDialog;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Banner = Banner;
+exports.Base = Base;
 exports.Button = Button$1;
 exports.Calendar = Calendar$1;
 exports.Card = Card;