@mirohq/design-system-popover 6.3.49 → 6.3.50-reactdismissablelayer.0

package/dist/main.js

@@ -10,6 +10,7 @@ var designSystemExperiments = require('@mirohq/design-system-experiments');
 var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -245,6 +246,32 @@ const Close = React.forwardRef((props, forwardRef) => {
 
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
 
+const Anchor = React.forwardRef(
+  ({ virtualRef, ...restProps }, forwardRef) => {
+    const anchorRef = React.useRef(null);
+    if (virtualRef != null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RadixPopover__namespace.Anchor,
+        {
+          ...restProps,
+          virtualRef,
+          ref: forwardRef
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadixPopover__namespace.Anchor,
+        {
+          ...restProps,
+          ref: designSystemUtils.mergeRefs([forwardRef, anchorRef])
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { virtualRef: anchorRef })
+    ] });
+  }
+);
+
 const Root = ({
   open,
   onOpen,
@@ -298,7 +325,7 @@ Popover.Trigger = Trigger;
 Popover.Content = Content;
 Popover.Close = Close;
 Popover.Portal = Portal;
-Popover.Anchor = RadixPopover__namespace.Anchor;
+Popover.Anchor = Anchor;
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { floating, animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$popover-background',\n  color: '$text-on-static-dark-subtle',\n  padding: '$200 $300 $200 $200',\n  fontSize: '14px',\n  lineHeight: '20px',\n  variants: {\n    canvas26: {\n      true: { padding: '$200 $400 $200 $200' },\n      false: {},\n    },\n    variant: {\n      light: {\n        ...floating.css({\n          radius: '$popover',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        background: '$white',\n        color: '$black',\n      },\n      dark: {\n        ...floating.css({\n          radius: '$popover',\n          shadow: 'none',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        border: '1px solid $popover-border',\n      },\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$popover-background',\n  stroke: '$popover-border',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$popover-background',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n    const [canvas26] = useCanvas26()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n        canvas26={canvas26}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$icon-on-static-dark-subtle',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["styled","RadixTrigger","jsx","RadixContent","floating","animations","Primitive","RadixArrow","jsxs","createContext","useContext","useCanvas26","RadixClose","focus","IconCross","RadixPortal","useBaseTooltipContext","usePrevious","useEffect","RadixPopover","BaseTooltipProvider"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/partials/anchor.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { floating, animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$popover-background',\n  color: '$text-on-static-dark-subtle',\n  padding: '$200 $300 $200 $200',\n  fontSize: '14px',\n  lineHeight: '20px',\n  variants: {\n    canvas26: {\n      true: { padding: '$200 $400 $200 $200' },\n      false: {},\n    },\n    variant: {\n      light: {\n        ...floating.css({\n          radius: '$popover',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        background: '$white',\n        color: '$black',\n      },\n      dark: {\n        ...floating.css({\n          radius: '$popover',\n          shadow: 'none',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        border: '1px solid $popover-border',\n      },\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$popover-background',\n  stroke: '$popover-border',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$popover-background',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n    const [canvas26] = useCanvas26()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n        canvas26={canvas26}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$icon-on-static-dark-subtle',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nexport type AnchorProps = React.ComponentPropsWithoutRef<\n  typeof RadixPopover.Anchor\n>\n\n/**\n * The anchor component positions the popover against an element other than the\n * trigger.\n *\n * Radix uses the trigger as the anchor until a custom one registers, then\n * re-renders without wrapping the trigger — which unmounts the node the popper\n * captured. Since `@radix-ui/react-popper` 1.3 the popper records an anchor\n * only when a ref attaches, and never when one detaches, so that swap leaves it\n * measuring the discarded trigger and the content collapses into the corner of\n * the viewport. The second, element-less anchor restates the same node through\n * `virtualRef`, which the popper re-reads on every render and so survives the\n * swap.\n */\nexport const Anchor = React.forwardRef<HTMLDivElement, AnchorProps>(\n  ({ virtualRef, ...restProps }, forwardRef) => {\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n\n    // Anchoring to a virtual element already goes through the per-render path,\n    // so it needs no help and renders no element of its own.\n    if (virtualRef != null) {\n      return (\n        <RadixPopover.Anchor\n          {...restProps}\n          virtualRef={virtualRef}\n          ref={forwardRef}\n        />\n      )\n    }\n\n    return (\n      <>\n        <RadixPopover.Anchor\n          {...restProps}\n          ref={mergeRefs([forwardRef, anchorRef])}\n        />\n        <RadixPopover.Anchor virtualRef={anchorRef} />\n      </>\n    )\n  }\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { Anchor } from './partials/anchor'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = Anchor\n"],"names":["styled","RadixTrigger","jsx","RadixContent","floating","animations","Primitive","RadixArrow","jsxs","createContext","useContext","useCanvas26","RadixClose","focus","IconCross","RadixPortal","RadixPopover","Fragment","mergeRefs","useBaseTooltipContext","usePrevious","useEffect","BaseTooltipProvider"],"mappings":"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"}

package/dist/module.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useEffect } from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { Trigger as Trigger$1, Content as Content$1, Arrow as Arrow$1, Close as Close$1, Portal as Portal$1 } from '@radix-ui/react-popover';
@@ -9,6 +9,7 @@ import { useCanvas26 } from '@mirohq/design-system-experiments';
 import { floating, animations, focus } from '@mirohq/design-system-styles';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { IconCross } from '@mirohq/design-system-icons';
+import { mergeRefs } from '@mirohq/design-system-utils';
 
 const StyledTrigger = styled(Trigger$1);
 
@@ -225,6 +226,32 @@ const Close = React.forwardRef((props, forwardRef) => {
 
 const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 
+const Anchor = React.forwardRef(
+  ({ virtualRef, ...restProps }, forwardRef) => {
+    const anchorRef = React.useRef(null);
+    if (virtualRef != null) {
+      return /* @__PURE__ */ jsx(
+        RadixPopover.Anchor,
+        {
+          ...restProps,
+          virtualRef,
+          ref: forwardRef
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        RadixPopover.Anchor,
+        {
+          ...restProps,
+          ref: mergeRefs([forwardRef, anchorRef])
+        }
+      ),
+      /* @__PURE__ */ jsx(RadixPopover.Anchor, { virtualRef: anchorRef })
+    ] });
+  }
+);
+
 const Root = ({
   open,
   onOpen,
@@ -278,7 +305,7 @@ Popover.Trigger = Trigger;
 Popover.Content = Content;
 Popover.Close = Close;
 Popover.Portal = Portal;
-Popover.Anchor = RadixPopover.Anchor;
+Popover.Anchor = Anchor;
 
 var types = /*#__PURE__*/Object.freeze({
   __proto__: null

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { floating, animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$popover-background',\n  color: '$text-on-static-dark-subtle',\n  padding: '$200 $300 $200 $200',\n  fontSize: '14px',\n  lineHeight: '20px',\n  variants: {\n    canvas26: {\n      true: { padding: '$200 $400 $200 $200' },\n      false: {},\n    },\n    variant: {\n      light: {\n        ...floating.css({\n          radius: '$popover',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        background: '$white',\n        color: '$black',\n      },\n      dark: {\n        ...floating.css({\n          radius: '$popover',\n          shadow: 'none',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        border: '1px solid $popover-border',\n      },\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$popover-background',\n  stroke: '$popover-border',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$popover-background',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n    const [canvas26] = useCanvas26()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n        canvas26={canvas26}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$icon-on-static-dark-subtle',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof RadixPopover.Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = RadixPopover.Anchor\n"],"names":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":";;;;;;;;;;;;AAIO,MAAM,aAAA,GAAgB,OAAOA,SAAY,CAAA;;ACOzC,MAAM,OAAA,GAAU,KAAA,CAAM,UAAA,CAG3B,CAAC,KAAA,EAAO,UAAA,qBAAe,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,KAAA,EAAO,GAAA,EAAK,UAAA,EAAY,CAAE,CAAA;;ACT/D,MAAM,aAAA,GAAgB,OAAOC,SAAA,EAAc;AAAA,EAChD,eAAA,EAAiB,qBAAA;AAAA,EACjB,KAAA,EAAO,6BAAA;AAAA,EACP,OAAA,EAAS,qBAAA;AAAA,EACT,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,MAAA;AAAA,EACZ,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAE,OAAA,EAAS,qBAAA,EAAsB;AAAA,MACvC,OAAO;AAAC,KACV;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,GAAG,SAAS,GAAA,CAAI;AAAA,UACd,MAAA,EAAQ,UAAA;AAAA,UACR,WAAW,EAAE,EAAA,EAAI,WAAW,MAAA,EAAQ,GAAA,EAAK,WAAW,OAAA;AAAQ,SAC7D,CAAA;AAAA,QACD,UAAA,EAAY,QAAA;AAAA,QACZ,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,GAAG,SAAS,GAAA,CAAI;AAAA,UACd,MAAA,EAAQ,UAAA;AAAA,UACR,MAAA,EAAQ,MAAA;AAAA,UACR,WAAW,EAAE,EAAA,EAAI,WAAW,MAAA,EAAQ,GAAA,EAAK,WAAW,OAAA;AAAQ,SAC7D,CAAA;AAAA,QACD,MAAA,EAAQ;AAAA;AACV;AACF,GACF;AAAA,EACA,MAAA,EAAQ;AACV,CAAC,CAAA;;AChCM,MAAM,WAAA,GAAc,EAAA;AACpB,MAAM,UAAA,GAAa,CAAA;AAEnB,MAAM,UAAA,GAAa,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK;AAAA,EAC9C,OAAA,EAAS,OAAA;AAAA,EACT,KAAA,EAAO,GAAG,MAAA,CAAA,UAAA,EAAU,IAAA,CAAA;AAAA,EACpB,MAAA,EAAQ,GAAG,MAAA,CAAA,WAAA,EAAW,IAAA,CAAA;AAAA,EACtB,IAAA,EAAM,qBAAA;AAAA,EACN,MAAA,EAAQ;AACV,CAAC,CAAA;;ACJM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,KAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMN,GAAA,CAACC,OAAA,EAAA,EAAW,OAAA,EAAO,IAAA,EACjB,8BAAC,MAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,GAAA,EAAK,YAAa,GAAG,KAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAQ,UAAA,EAC1D,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAG,aAAa,CAAA,GAAI,GAAA;AAAA,UACpB,CAAA,EAAE,GAAA;AAAA,UACF,KAAA,EAAM,GAAA;AAAA,UACN,QAAQ,WAAA,GAAc;AAAA;AAAA,OACxB;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAI,UAAA,GAAa,CAAA;AAAA,UACjB,EAAA,EAAI,cAAc,UAAA,GAAa,CAAA;AAAA,UAC/B,GAAG,UAAA,GAAa;AAAA;AAAA;AAClB,KAAA,EACF,GACF,CAAA,EACF;AAAA;AAEJ,CAAA;;AC9BO,MAAM,WAAA,GAAc,OAAOA,OAAA,EAAY;AAAA,EAC5C,IAAA,EAAM,qBAAA;AAAA,EACN,MAAA,EAAQ,IAAA;AAAA,EACR,QAAA,EAAU,KAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAM;AAAC;AACT;AAEJ,CAAC,CAAA;;ACJD,MAAM,cAAA,GAAiB,aAAA,CAAmC,EAAS,CAAA;AAM5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA;AACF,CAAA,qBACE,GAAA;AAAA,EAAC,cAAA,CAAe,QAAA;AAAA,EAAf;AAAA,IACC,KAAA,EAAO;AAAA,MACL;AAAA,KACF;AAAA,IAEC;AAAA;AACH,CAAA;AAMK,MAAM,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc,CAAA;;ACtBpB,MAAM,KAAA,GAAQ,KAAA,CAAM,UAAA,CAGzB,CAAC,OAAO,UAAA,KAAe;AACvB,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,iBAAA,EAAkB;AACtC,EAAA,uBACE,GAAA,CAAC,eAAa,GAAG,KAAA,EAAO,SAAkB,aAAA,EAAW,IAAA,EAAC,KAAK,UAAA,EAAY,CAAA;AAE3E,CAAC,CAAA;;ACsHM,MAAM,UAAU,KAAA,CAAM,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,KAAA,GAAQ,QAAA;AAAA,IACR,WAAA,GAAc,CAAA;AAAA,IACd,UAAA,GAAa,CAAA;AAAA,IACb,eAAA,GAAkB,IAAA;AAAA,IAClB,gBAAA,GAAmB,CAAA;AAAA,IACnB,IAAA,GAAO,KAAA;AAAA,IACP,QAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,MAAA,GAAS,SAAA;AAAA,IACT,gBAAA,GAAmB,KAAA;AAAA,IACnB,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,iBAAA,EAAkB;AACtC,IAAA,MAAM,CAAC,QAAQ,CAAA,GAAI,WAAA,EAAY;AAE/B,IAAA,MAAM,QAAA,GAAW,KAAA,CAAM,OAAA,CAAQ,MAAM;AACnC,MAAA,QAAQ,MAAA;AAAQ,QACd,KAAK,OAAA;AACH,UAAA,2BAAQ,KAAA,EAAA,EAAM,CAAA;AAAA,QAChB,KAAK,MAAA;AACH,UAAA,2BAAQ,IAAA,EAAA,EAAK,CAAA;AAAA,QACf;AACE,UAAA,OAAO,IAAA;AAAA;AACX,IACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAA,uBACE,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,KAAA;AAAA,QACA,WAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,IAAA;AAAA,QACA,UAAA;AAAA,QACA,GAAA,EAAK,UAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,MAAA;AAAA,QACA,gBAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;;AC/LO,MAAM,WAAA,GAAc,OAAOC,OAAA,EAAY;AAAA,EAC5C,GAAA,EAAK,OAAA;AAAA,EACL,UAAA,EAAY,SAAA;AAAA,EACZ,MAAA,EAAQ,IAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,KAAA,EAAO,6BAAA;AAAA,EACP,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,KAAA;AAAA,EACP,YAAA,EAAc,KAAA;AAAA,EACd,MAAA,EAAQ,SAAA;AAAA,EAER,SAAA,EAAW;AAAA,IACT,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,iBAAA,EAAmB;AAAA,IACjB,GAAG,MAAM,GAAA,CAAI;AAAA,MACX,SAAA,EAAW;AAAA,KACZ;AAAA,GACH;AAAA,EAEA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,iBAAA,EAAmB;AAAA,UACjB,SAAA,EAAW;AAAA;AACb;AACF;AACF;AAEJ,CAAC,CAAA;;AC1BM,MAAM,KAAA,GAAQ,KAAA,CAAM,UAAA,CAGzB,CAAC,OAAO,UAAA,KAAe;AACvB,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,iBAAA,EAAkB;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,UAAA;AAAA,MACL,aAAA,EAAY,YAAA;AAAA,MACZ,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,OAAA,EAAQ;AAAA;AAAA,GAC1B;AAEJ,CAAC,CAAA;;ACbM,MAAM,SAAS,CAAC,KAAA,qBACrB,GAAA,CAACC,QAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;;ACoC1B,MAAM,OAAO,CAAC;AAAA,EACZ,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAqC;AACnC,EAAA,MAAM,EAAE,iBAAA,EAAkB,GAAI,qBAAA,EAAsB;AACpD,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA,KAAa,IAAA,IAAQ,IAAA,KAAS,KAAA,EAAO;AACvC,MAAA,iBAAA,EAAkB;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,iBAAA,EAAmB,IAAA,EAAM,QAAQ,CAAC,CAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA,CAAa,IAAA;AAAA,IAAb;AAAA,MACC,IAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,cAAc,CAAA,KAAA,KAAS;AACrB,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,QACF,CAAA,MAAO;AACL,UAAA,IAAI,SAAS,MAAA,EAAW;AACtB,YAAA,iBAAA,EAAkB;AAAA,UACpB;AACA,UAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MACA,KAAA,EAAO;AAAA;AAAA,GACT;AAEJ,CAAA;AAEO,MAAM,UAAiE,CAAC;AAAA,EAC7E,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,GAAG;AACL,CAAA,qBACE,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EACf,QAAA,kBAAA,GAAA,CAAC,mBAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA;AACF,CAAA,EACF,CAAA,EACF;AAcF,OAAA,CAAQ,OAAA,GAAU,OAAA;AAClB,OAAA,CAAQ,OAAA,GAAU,OAAA;AAClB,OAAA,CAAQ,KAAA,GAAQ,KAAA;AAChB,OAAA,CAAQ,MAAA,GAAS,MAAA;AACjB,OAAA,CAAQ,SAAS,YAAA,CAAa,MAAA;;;;;;;;"}
+{"version":3,"file":"module.js","sources":["../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/content.styled.tsx","../src/partials/line.styled.tsx","../src/partials/line.tsx","../src/partials/arrow.styled.tsx","../src/use-popover-context.tsx","../src/partials/arrow.tsx","../src/partials/content.tsx","../src/partials/close.styled.tsx","../src/partials/close.tsx","../src/partials/portal.tsx","../src/partials/anchor.tsx","../src/popover.tsx"],"sourcesContent":["import { Trigger as RadixTrigger } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(RadixTrigger)\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {}\n\n/**\n * The trigger component is used to render the trigger element for the popover.\n */\nexport const Trigger = React.forwardRef<\n  ElementRef<typeof StyledTrigger>,\n  TriggerProps\n>((props, forwardRef) => <StyledTrigger {...props} ref={forwardRef} />)\n","import { Content as RadixContent } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { floating, animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$popover-background',\n  color: '$text-on-static-dark-subtle',\n  padding: '$200 $300 $200 $200',\n  fontSize: '14px',\n  lineHeight: '20px',\n  variants: {\n    canvas26: {\n      true: { padding: '$200 $400 $200 $200' },\n      false: {},\n    },\n    variant: {\n      light: {\n        ...floating.css({\n          radius: '$popover',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        background: '$white',\n        color: '$black',\n      },\n      dark: {\n        ...floating.css({\n          radius: '$popover',\n          shadow: 'none',\n          animation: { in: animations.fadeIn, out: animations.fadeOut },\n        }),\n        border: '1px solid $popover-border',\n      },\n    },\n  },\n  zIndex: '$popover',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const LINE_HEIGHT = 50\nexport const LINE_WIDTH = 6\n\nexport const StyledLine = styled(Primitive.svg, {\n  display: 'block',\n  width: `${LINE_WIDTH}px`,\n  height: `${LINE_HEIGHT}px`,\n  fill: '$popover-background',\n  stroke: '$popover-border',\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nimport { LINE_HEIGHT, LINE_WIDTH, StyledLine } from './line.styled'\nimport type { StyledLineProps } from './line.styled'\n\nexport interface LineProps extends StyledLineProps {}\n\nexport const Line = React.forwardRef<ElementRef<typeof StyledLine>, LineProps>(\n  (props, forwardRef) => (\n    // We have to use RadixArrow with asChild here instead of styling it,\n    // otherwise it's not possible to pass children, it will use arrow svg.\n    // In this case asChild won't merge the nodes, but will apply some properties to the first child,\n    // so we also need to add an additional span to avoid Stitches error.\n    // In the end we get 2 nodes: Radix's span with positioning, span with radix svg props and our svg with styling\n    <RadixArrow asChild>\n      <span>\n        <StyledLine ref={forwardRef} {...props} aria-hidden viewBox='0 0 6 50'>\n          <rect\n            x={LINE_WIDTH / 2 - 0.5}\n            y='0'\n            width='1'\n            height={LINE_HEIGHT - LINE_WIDTH}\n          />\n          <circle\n            cx={LINE_WIDTH / 2}\n            cy={LINE_HEIGHT - LINE_WIDTH / 2}\n            r={LINE_WIDTH / 2}\n          />\n        </StyledLine>\n      </span>\n    </RadixArrow>\n  )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Arrow as RadixArrow } from '@radix-ui/react-popover'\n\nexport const StyledArrow = styled(RadixArrow, {\n  fill: '$popover-background',\n  height: '$1',\n  paddingX: '2px',\n  width: '$3',\n  variants: {\n    variant: {\n      light: {\n        fill: '$white',\n      },\n      dark: {},\n    },\n  },\n})\n\nexport type StyledArrowProps = StrictComponentProps<typeof StyledArrow>\n","import React, { createContext, useContext } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\n  children: React.ReactNode\n  variant?: Variant\n}\n\ninterface PopoverContextProps {\n  variant?: Variant\n}\n\nconst PopoverContext = createContext<PopoverContextProps>({} as any)\n\n/**\n * The PopoverProvider is used to manage the state of the popover,\n * when it opens or closes, and what triggers it.\n */\nexport const PopoverProvider = ({\n  children,\n  variant,\n}: PopoverValues): React.ReactNode => (\n  <PopoverContext.Provider\n    value={{\n      variant,\n    }}\n  >\n    {children}\n  </PopoverContext.Provider>\n)\n\n/**\n * The usePopoverContext hook is used to access the state of the popover.\n */\nexport const usePopoverContext = (): PopoverContextProps =>\n  useContext(PopoverContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledArrow } from './arrow.styled'\nimport type { StyledArrowProps } from './arrow.styled'\nimport { usePopoverContext } from '../use-popover-context'\n\nexport interface ArrowProps extends StyledArrowProps {\n  /**\n   * The appearance of arrow.\n   */\n  variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n  ElementRef<typeof StyledArrow>,\n  ArrowProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n  return (\n    <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\nimport { StyledContent } from './content.styled'\nimport { Line } from './line'\nimport { Arrow } from './arrow'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledContentProps } from './content.styled'\nimport type {\n  Align,\n  Side,\n  AnchorType,\n  PointerDownOutsideEvent,\n  FocusOutsideEvent,\n} from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with window edges.\n   * @default true\n   */\n  avoidCollisions?: boolean\n\n  /**\n   * The preferred alignment against the trigger. May change when collisions\n   * occur.\n   * @default 'center'\n   */\n  align?: Align\n\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment option.\n   * @default 0\n   */\n  alignOffset?: number\n\n  /**\n   * The distance in pixels from the trigger's edge to the popover's anchor.\n   * Works only with the \"arrow\" or \"none\" anchor.\n   * @default 0\n   */\n  sideOffset?: number\n\n  /**\n   * The preferred side of the trigger to render against when open.\n   * Will be reversed when collisions occur and avoidCollisions is enabled.\n   * @default 'top'\n   */\n  side?: Side\n\n  /**\n   * The distance in pixels from the boundary edges where collision detection\n   * should occur. Accepts a number (same for all sides).\n   * @default 0\n   */\n  collisionPadding?: number\n\n  /**\n   * The type of anchor to render.\n   * @default 'line'\n   */\n  anchor?: AnchorType\n\n  /**\n   * Whether to render in a Portal when open.\n   */\n  portalled?: boolean\n\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The element used as the collision boundary. By default this is the\n   * viewport, though you can provide additional element(s) to be included in\n   * this check.\n   */\n  collisionBoundary?: Element | null\n\n  /**\n   * The sticky behavior on the align axis. \"partial\" will keep the content in\n   * the boundary as long as the trigger is at least partially in the boundary\n   * whilst \"always\" will keep the content in the boundary regardless.\n   * @default 'partial'\n   */\n  sticky?: 'partial' | 'always'\n\n  /**\n   * Whether to hide the content when the trigger becomes fully occluded.\n   * @default false\n   */\n  hideWhenDetached?: boolean\n\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the\n   * component. It can be prevented by calling event.preventDefault.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n\n  /**\n   * Event handler called when focus moves outside the bounds of the component.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n\n  /**\n   * Event handler called when the escape key is down. It can be prevented by\n   * calling event.preventDefault.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n  /**\n   * Event handler called when an interaction (pointer or focus event) happens\n   * outside the bounds of the component. It can be prevented by calling\n   * event.preventDefault.\n   */\n  onInteractOutside?: (\n    event: PointerDownOutsideEvent | FocusOutsideEvent\n  ) => void\n\n  /**\n   * Event handler called when focus moves into the component after opening.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onOpenAutoFocus?: (event: Event) => void\n\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault().\n   */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\n/**\n * The content component is used to render rich content elements for the popover.\n */\nexport const Content = React.forwardRef<\n  ElementRef<typeof StyledContent>,\n  ContentProps\n>(\n  (\n    {\n      align = 'center',\n      alignOffset = 0,\n      sideOffset = 0,\n      avoidCollisions = true,\n      collisionPadding = 0,\n      side = 'top',\n      children,\n      anchor = 'line',\n      sticky = 'partial',\n      hideWhenDetached = false,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { variant } = usePopoverContext()\n    const [canvas26] = useCanvas26()\n\n    const anchorEl = React.useMemo(() => {\n      switch (anchor) {\n        case 'arrow':\n          return <Arrow />\n        case 'line':\n          return <Line />\n        default:\n          return null\n      }\n    }, [anchor])\n\n    return (\n      <StyledContent\n        {...restProps}\n        align={align}\n        alignOffset={alignOffset}\n        avoidCollisions={avoidCollisions}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n        ref={forwardRef}\n        role='dialog'\n        aria-modal='true'\n        sticky={sticky}\n        hideWhenDetached={hideWhenDetached}\n        variant={variant}\n        canvas26={canvas26}\n      >\n        {children}\n        {anchorEl}\n      </StyledContent>\n    )\n  }\n)\n","import { Close as RadixClose } from '@radix-ui/react-popover'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const StyledClose = styled(RadixClose, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  height: '$6',\n  width: '$6',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: '$icon-on-static-dark-subtle',\n  position: 'absolute',\n  top: '5px',\n  right: '5px',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&:hover': {\n    backgroundColor: 'rgba(255, 255, 255, 0.12)',\n  },\n  '&:focus-visible': {\n    ...focus.css({\n      boxShadow: '$focus',\n    }),\n  },\n\n  variants: {\n    variant: {\n      light: {\n        color: '$black',\n      },\n      dark: {\n        '&:focus-visible': {\n          boxShadow: '0 0 0 2px #0F0F0F, 0 0 0 4px $colors$focus-keyboard',\n        },\n      },\n    },\n  },\n})\n\nexport type StyledCloseProps = StrictComponentProps<typeof StyledClose>\n","import React from 'react'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport type { ElementRef } from 'react'\n\nimport { StyledClose } from './close.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledCloseProps } from './close.styled'\n\nexport interface CloseProps extends StyledCloseProps {\n  /**\n   * The appearance of close's button.\n   */\n  variant?: StyledCloseProps['variant']\n}\n\nexport const Close = React.forwardRef<\n  ElementRef<typeof StyledClose>,\n  CloseProps\n>((props, forwardRef) => {\n  const { variant } = usePopoverContext()\n\n  return (\n    <StyledClose\n      {...props}\n      ref={forwardRef}\n      data-testid='close-icon'\n      variant={variant}\n    >\n      <IconCross size='small' />\n    </StyledClose>\n  )\n})\n","import React from 'react'\nimport type { PopoverPortalProps } from '@radix-ui/react-popover'\nimport { Portal as RadixPortal } from '@radix-ui/react-popover'\n\nexport interface PortalProps extends PopoverPortalProps {\n  /**\n   *  Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries. If used on this part,\n   * it will be inherited by Popover.Content.\n   */\n  forceMount?: true\n\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: HTMLElement | null\n}\n\nexport const Portal = (props: PortalProps): React.ReactNode => (\n  <RadixPortal {...props} />\n)\n","import React from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nexport type AnchorProps = React.ComponentPropsWithoutRef<\n  typeof RadixPopover.Anchor\n>\n\n/**\n * The anchor component positions the popover against an element other than the\n * trigger.\n *\n * Radix uses the trigger as the anchor until a custom one registers, then\n * re-renders without wrapping the trigger — which unmounts the node the popper\n * captured. Since `@radix-ui/react-popper` 1.3 the popper records an anchor\n * only when a ref attaches, and never when one detaches, so that swap leaves it\n * measuring the discarded trigger and the content collapses into the corner of\n * the viewport. The second, element-less anchor restates the same node through\n * `virtualRef`, which the popper re-reads on every render and so survives the\n * swap.\n */\nexport const Anchor = React.forwardRef<HTMLDivElement, AnchorProps>(\n  ({ virtualRef, ...restProps }, forwardRef) => {\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n\n    // Anchoring to a virtual element already goes through the per-render path,\n    // so it needs no help and renders no element of its own.\n    if (virtualRef != null) {\n      return (\n        <RadixPopover.Anchor\n          {...restProps}\n          virtualRef={virtualRef}\n          ref={forwardRef}\n        />\n      )\n    }\n\n    return (\n      <>\n        <RadixPopover.Anchor\n          {...restProps}\n          ref={mergeRefs([forwardRef, anchorRef])}\n        />\n        <RadixPopover.Anchor virtualRef={anchorRef} />\n      </>\n    )\n  }\n)\n","import React, { useEffect } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport {\n  BaseTooltipProvider,\n  useBaseTooltipContext,\n} from '@mirohq/design-system-base-tooltip'\nimport { usePrevious } from '@mirohq/design-system-use-previous'\n\nimport { Trigger } from './partials/trigger'\nimport { Content } from './partials/content'\nimport { Close } from './partials/close'\nimport { Portal } from './partials/portal'\nimport { Anchor } from './partials/anchor'\nimport { PopoverProvider } from './use-popover-context'\nimport type { Variant } from './types'\n\nexport interface PopoverProps {\n  /**\n   * The current controlled state of the popover.\n   */\n  open?: boolean\n\n  /**\n   * The initial open state of the popover. Use when you don't need to control\n   * its open state.\n   * @default false\n   */\n  defaultOpen?: boolean\n\n  /**\n   * Event handler called when the popover opens.\n   */\n  onOpen?: () => void\n\n  /**\n   * Event handler called when the popover closes.\n   */\n  onClose?: () => void\n\n  /**\n   * Defines whether the interaction with outside elements will be enabled.\n   */\n  interactOutside?: boolean\n\n  /**\n   * Change the popover's appearance.\n   * @default 'dark'\n   */\n  variant?: Variant\n\n  /**\n   * The content.\n   */\n  children: React.ReactNode\n}\n\nconst Root = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}: PopoverProps): React.ReactNode => {\n  const { ignoreNextTooltip } = useBaseTooltipContext()\n  const prevOpen = usePrevious(open)\n\n  useEffect(() => {\n    if (prevOpen === true && open === false) {\n      ignoreNextTooltip()\n    }\n  }, [ignoreNextTooltip, open, prevOpen])\n\n  return (\n    <RadixPopover.Root\n      open={open}\n      {...restProps}\n      onOpenChange={value => {\n        if (value) {\n          onOpen?.()\n        } else {\n          if (open === undefined) {\n            ignoreNextTooltip()\n          }\n          onClose?.()\n        }\n      }}\n      modal={false}\n    />\n  )\n}\n\nexport const Popover: ((props: PopoverProps) => React.ReactNode) & Partials = ({\n  open,\n  defaultOpen = false,\n  onOpen,\n  onClose,\n  variant = 'dark',\n  ...restProps\n}) => (\n  <PopoverProvider variant={variant}>\n    <BaseTooltipProvider>\n      <Root\n        {...restProps}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpen={onOpen}\n        onClose={onClose}\n      />\n    </BaseTooltipProvider>\n  </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Trigger: typeof Trigger\n  Content: typeof Content\n  Close: typeof Close\n  Portal: typeof Portal\n  Anchor: typeof Anchor\n}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\nPopover.Anchor = Anchor\n"],"names":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,9 +1,9 @@
-import * as _radix_ui_react_popover from '@radix-ui/react-popover';
-import { PopoverPortalProps, PopoverAnchorProps } from '@radix-ui/react-popover';
 import * as React from 'react';
 import React__default from 'react';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
+import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import { PopoverPortalProps } from '@radix-ui/react-popover';
 
 /* Utilities */
 /* ========================================================================== */
@@ -199,6 +199,22 @@ interface PortalProps extends PopoverPortalProps {
 }
 declare const Portal: (props: PortalProps) => React__default.ReactNode;
 
+type AnchorProps = React__default.ComponentPropsWithoutRef<typeof _radix_ui_react_popover.Anchor>;
+/**
+ * The anchor component positions the popover against an element other than the
+ * trigger.
+ *
+ * Radix uses the trigger as the anchor until a custom one registers, then
+ * re-renders without wrapping the trigger — which unmounts the node the popper
+ * captured. Since `@radix-ui/react-popper` 1.3 the popper records an anchor
+ * only when a ref attaches, and never when one detaches, so that swap leaves it
+ * measuring the discarded trigger and the content collapses into the corner of
+ * the viewport. The second, element-less anchor restates the same node through
+ * `virtualRef`, which the popper re-reads on every render and so survives the
+ * swap.
+ */
+declare const Anchor: React__default.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverAnchorProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
 interface PopoverProps {
     /**
      * The current controlled state of the popover.
@@ -238,7 +254,7 @@ interface Partials {
     Content: typeof Content;
     Close: typeof Close;
     Portal: typeof Portal;
-    Anchor: typeof _radix_ui_react_popover.Anchor;
+    Anchor: typeof Anchor;
 }
 
 declare const StyledArrow: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>>, "variant"> & TransformProps<{
@@ -255,7 +271,5 @@ interface ArrowProps extends StyledArrowProps {
     variant?: StyledArrowProps['variant'];
 }
 
-type AnchorProps = PopoverAnchorProps;
-
 export { Popover, types as PopoverTypes };
 export type { AnchorProps as PopoverAnchorProps, ArrowProps as PopoverArrowProps, CloseProps as PopoverCloseProps, ContentProps as PopoverContentProps, PortalProps as PopoverPortalProps, PopoverProps, TriggerProps as PopoverTriggerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-popover",
-  "version": "6.3.49",
+  "version": "6.3.50-reactdismissablelayer.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,14 +27,15 @@
     "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-popover": "^1.1.23",
     "@mirohq/design-system-base-tooltip": "^1.2.1",
-    "@mirohq/design-system-icons": "^1.46.2",
     "@mirohq/design-system-experiments": "^1.1.0",
-    "@mirohq/design-system-stitches": "^3.3.33",
-    "@mirohq/design-system-primitive": "^2.2.1",
-    "@mirohq/design-system-styles": "^3.2.33",
-    "@mirohq/design-system-use-previous": "^1.1.1"
+    "@mirohq/design-system-icons": "^1.46.3-reactdismissablelayer.0",
+    "@mirohq/design-system-primitive": "^2.2.2-reactdismissablelayer.0",
+    "@mirohq/design-system-stitches": "^3.3.32",
+    "@mirohq/design-system-styles": "^3.2.32",
+    "@mirohq/design-system-use-previous": "^1.1.1",
+    "@mirohq/design-system-utils": "^1.3.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",