@mirohq/design-system-popover 5.2.0-new-focus-keyboard.0 → 6.0.0-pdl-removing-ffs.0

package/dist/main.js

@@ -212,7 +212,9 @@ const StyledClose = designSystemStitches.styled(RadixPopover.Close, {
     backgroundColor: "rgba(255, 255, 255, 0.12)"
   },
   "&:focus-visible": {
-    boxShadow: "$focus-keyboard"
+    ...designSystemStyles.focus.css({
+      boxShadow: "$focus"
+    })
   },
   variants: {
     variant: {

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 { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\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: '$black',\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: '$black',\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'\nimport type { PropsWithChildren } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\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}: PropsWithChildren<PopoverValues>): any => (\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'\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\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      >\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'\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: '$white',\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    boxShadow: '$focus-keyboard',\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: React.FC<PortalProps> = props => <RadixPortal {...props} />\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: React.FC<PopoverProps> = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}) => {\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: React.FC<PopoverProps> & 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","React","jsx","RadixContent","animations","Primitive","RadixArrow","jsxs","createContext","useContext","RadixClose","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/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 { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\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: '$black',\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: '$black',\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'\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\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      >\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: '$white',\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","React","jsx","RadixContent","animations","Primitive","RadixArrow","jsxs","createContext","useContext","RadixClose","focus","IconCross","RadixPortal","useBaseTooltipContext","usePrevious","useEffect","RadixPopover","BaseTooltipProvider"],"mappings":"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"}

package/dist/module.js

@@ -5,7 +5,7 @@ import { Trigger as Trigger$1, Content as Content$1, Arrow as Arrow$1, Close as
 import { BaseTooltipProvider, useBaseTooltipContext } from '@mirohq/design-system-base-tooltip';
 import { usePrevious } from '@mirohq/design-system-use-previous';
 import { styled } from '@mirohq/design-system-stitches';
-import { animations } from '@mirohq/design-system-styles';
+import { animations, focus } from '@mirohq/design-system-styles';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { IconCross } from '@mirohq/design-system-icons';
 
@@ -186,7 +186,9 @@ const StyledClose = styled(Close$1, {
     backgroundColor: "rgba(255, 255, 255, 0.12)"
   },
   "&:focus-visible": {
-    boxShadow: "$focus-keyboard"
+    ...focus.css({
+      boxShadow: "$focus"
+    })
   },
   variants: {
     variant: {

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 { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\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: '$black',\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: '$black',\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'\nimport type { PropsWithChildren } from 'react'\n\nimport type { Variant } from './types'\n\ninterface PopoverValues {\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}: PropsWithChildren<PopoverValues>): any => (\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'\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\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      >\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'\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: '$white',\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    boxShadow: '$focus-keyboard',\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: React.FC<PortalProps> = props => <RadixPortal {...props} />\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: React.FC<PopoverProps> = ({\n  open,\n  onOpen,\n  onClose,\n  ...restProps\n}) => {\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: React.FC<PopoverProps> & 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":"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"}
+{"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 { animations } from '@mirohq/design-system-styles'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledContent = styled(RadixContent, {\n  backgroundColor: '$black',\n  borderRadius: '$50',\n  color: '$white',\n  padding: '$200 $300 $200 $200',\n  boxShadow: '0 $1 $4 rgba(9, 9, 9, 0.4)',\n  fontSize: '14px',\n  lineHeight: '20px',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animationDuration: '220ms',\n    animationTimingFunction: 'ease',\n    willChange: 'opacity',\n    '&[data-state=\"open\"]': {\n      animationName: animations.fadeIn,\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animations.fadeOut,\n    },\n  },\n  variants: {\n    variant: {\n      light: {\n        background: '$white',\n        boxShadow: '$50',\n        color: '$black',\n      },\n      dark: {},\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: '$black',\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: '$black',\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'\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\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      >\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: '$white',\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":"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"}

package/dist/types.d.ts

@@ -7,7 +7,7 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
 
 declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
-declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
+type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
 
 interface TriggerProps extends StyledTriggerProps {
 }
@@ -21,16 +21,16 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
-declare type StyledContentProps = StrictComponentProps<typeof StyledContent>;
+type StyledContentProps = StrictComponentProps<typeof StyledContent>;
 
-declare type AnchorType = 'line' | 'arrow' | 'none';
-declare type Side = 'top' | 'right' | 'bottom' | 'left';
-declare type Align = 'start' | 'center' | 'end';
-declare type Variant = 'light' | 'dark';
-declare type PointerDownOutsideEvent = CustomEvent<{
+type AnchorType = 'line' | 'arrow' | 'none';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Align = 'start' | 'center' | 'end';
+type Variant = 'light' | 'dark';
+type PointerDownOutsideEvent = CustomEvent<{
     originalEvent: PointerEvent;
 }>;
-declare type FocusOutsideEvent = CustomEvent<{
+type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;
 
@@ -161,7 +161,7 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
-declare type StyledCloseProps = StrictComponentProps<typeof StyledClose>;
+type StyledCloseProps = StrictComponentProps<typeof StyledClose>;
 
 interface CloseProps extends StyledCloseProps {
     /**
@@ -183,7 +183,7 @@ interface PortalProps extends PopoverPortalProps {
      */
     container?: HTMLElement | null;
 }
-declare const Portal: react__default.FC<PortalProps>;
+declare const Portal: (props: PortalProps) => react__default.ReactNode;
 
 interface PopoverProps {
     /**
@@ -218,7 +218,7 @@ interface PopoverProps {
      */
     children: react__default.ReactNode;
 }
-declare const Popover: react__default.FC<PopoverProps> & Partials;
+declare const Popover: ((props: PopoverProps) => react__default.ReactNode) & Partials;
 interface Partials {
     Trigger: typeof Trigger;
     Content: typeof Content;
@@ -232,7 +232,7 @@ declare const StyledArrow: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<SVGSVGElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>, {
     variant?: "dark" | "light" | undefined;
 }, {}>;
-declare type StyledArrowProps = StrictComponentProps<typeof StyledArrow>;
+type StyledArrowProps = StrictComponentProps<typeof StyledArrow>;
 
 interface ArrowProps extends StyledArrowProps {
     /**
@@ -241,6 +241,6 @@ interface ArrowProps extends StyledArrowProps {
     variant?: StyledArrowProps['variant'];
 }
 
-declare type AnchorProps = PopoverAnchorProps;
+type AnchorProps = PopoverAnchorProps;
 
 export { Popover, AnchorProps as PopoverAnchorProps, ArrowProps as PopoverArrowProps, CloseProps as PopoverCloseProps, ContentProps as PopoverContentProps, PortalProps as PopoverPortalProps, PopoverProps, TriggerProps as PopoverTriggerProps, types as PopoverTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-popover",
-  "version": "5.2.0-new-focus-keyboard.0",
+  "version": "6.0.0-pdl-removing-ffs.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
-    "@mirohq/design-system-base-tooltip": "^0.1.0",
-    "@mirohq/design-system-icons": "^0.62.2-new-focus-keyboard.0",
-    "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.0",
-    "@mirohq/design-system-use-previous": "^0.1.0",
-    "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.0"
+    "@mirohq/design-system-base-tooltip": "^1.0.0-pdl-removing-ffs.0",
+    "@mirohq/design-system-icons": "^1.0.0-pdl-removing-ffs.0",
+    "@mirohq/design-system-primitive": "^2.0.0-pdl-removing-ffs.0",
+    "@mirohq/design-system-stitches": "^3.0.0-pdl-removing-ffs.0",
+    "@mirohq/design-system-styles": "^2.0.0-pdl-removing-ffs.0",
+    "@mirohq/design-system-use-previous": "^1.0.0-pdl-removing-ffs.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",