@mirohq/design-system-popover 5.0.34 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +1 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -0
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +42 -2
- package/package.json +5 -5
package/dist/main.js
CHANGED
package/dist/main.js.map
CHANGED
|
@@ -1 +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',\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 { CSSProperties } from '@stitches/react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface AlignStyle {\n [x: string]: CSSProperties\n}\n\nconst getAlignXStyle = (side: Side, width: number): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n left: `${width * 2}px`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n left: `calc(50% - ${width / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: {\n left: `calc(100% - ${width * 3}px)`,\n },\n})\n\nconst getAlignYStyle = (\n side: Side,\n width: number,\n height: number\n): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n bottom: `calc(100% - (${height - width}px))`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n bottom: `calc(50% - ${height / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: { bottom: `-${width}px` },\n})\n\nexport const getPlacement = (width: number, height: number): any => {\n const halfHeight = height / 2\n const halfWidth = width / 2\n\n return {\n '[data-side=\"top\"] > &': { bottom: `-${height}px` },\n ...getAlignXStyle('top', width),\n '[data-side=\"bottom\"] > &': {\n bottom: '100%',\n transform: 'rotate(180deg)',\n },\n ...getAlignXStyle('bottom', width),\n '[data-side=\"right\"] > &': {\n left: `-${halfHeight + halfWidth}px`,\n transform: 'rotate(90deg)',\n },\n ...getAlignYStyle('right', width, height),\n '[data-side=\"left\"] > &': {\n left: `calc(100% + ${halfHeight - halfWidth}px)`,\n transform: 'rotate(270deg)',\n },\n ...getAlignYStyle('left', width, height),\n }\n}\n\nexport const StyledLine = styled(Primitive.span, {\n width: '6px',\n height: '50px',\n position: 'absolute',\n rect: {\n fill: '$black',\n },\n 'svg #line': {\n width: '44px',\n height: '1px',\n transform: 'rotate(90 3.5 0)',\n },\n 'svg #circle': {\n width: '6px',\n height: '6px',\n rx: '3px',\n transform: 'rotate(90 6 44)',\n },\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledLine, getPlacement } 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 const placement = getPlacement(6, 50)\n return (\n <StyledLine\n {...props}\n css={{ ...placement }}\n ref={forwardRef}\n aria-hidden\n >\n <svg viewBox='0 0 6 50'>\n <rect id='line' x='3.5' transform='rotate(90 3.5 0)' />\n <rect id='circle' x='6' y='44' transform='rotate(90 6 44)' />\n </svg>\n </StyledLine>\n )\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\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 { useSize } from '@radix-ui/react-use-size'\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 */\n avoidCollisions?: boolean\n\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment option.\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger's edge to the popover's anchor. Works only with the \"arrow\" or \"none\"\n * anchor.\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 */\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 */\n collisionPadding?: number\n\n /**\n * The type of anchor to render.\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 */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\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 [line, setLine] = React.useState<HTMLElement | null>(null)\n const lineSize = useSize(line)\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 ref={setLine} />\n default:\n return null\n }\n }, [anchor, setLine])\n\n return (\n <StyledContent\n {...restProps}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n side={side}\n sideOffset={anchor === 'line' ? lineSize?.height : 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-controls',\n },\n\n variants: {\n variant: {\n light: {\n color: '$black',\n },\n dark: {\n '&:focus-visible': {\n boxShadow:\n '0 0 0 1px #0F0F0F, 0 0 0 3px #6881FF, 0 0 0 5px #4961f699',\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\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 from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\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 its open state.\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 */\n variant?: Variant\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nconst Root: React.FC<PopoverProps> = ({ onOpen, onClose, ...restProps }) => (\n <RadixPopover.Root\n {...restProps}\n onOpenChange={value => {\n if (value) {\n onOpen?.()\n } else {\n onClose?.()\n }\n }}\n modal={false}\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 <Root\n {...restProps}\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n onClose={onClose}\n />\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}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\n"],"names":["styled","RadixTrigger","React","jsx","RadixContent","animations","Primitive","jsxs","RadixArrow","createContext","useContext","useSize","RadixClose","IconCross","RadixPortal","RadixPopover"],"mappings":"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"}
|
|
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',\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 { CSSProperties } from '@stitches/react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface AlignStyle {\n [x: string]: CSSProperties\n}\n\nconst getAlignXStyle = (side: Side, width: number): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n left: `${width * 2}px`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n left: `calc(50% - ${width / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: {\n left: `calc(100% - ${width * 3}px)`,\n },\n})\n\nconst getAlignYStyle = (\n side: Side,\n width: number,\n height: number\n): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n bottom: `calc(100% - (${height - width}px))`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n bottom: `calc(50% - ${height / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: { bottom: `-${width}px` },\n})\n\nexport const getPlacement = (width: number, height: number): any => {\n const halfHeight = height / 2\n const halfWidth = width / 2\n\n return {\n '[data-side=\"top\"] > &': { bottom: `-${height}px` },\n ...getAlignXStyle('top', width),\n '[data-side=\"bottom\"] > &': {\n bottom: '100%',\n transform: 'rotate(180deg)',\n },\n ...getAlignXStyle('bottom', width),\n '[data-side=\"right\"] > &': {\n left: `-${halfHeight + halfWidth}px`,\n transform: 'rotate(90deg)',\n },\n ...getAlignYStyle('right', width, height),\n '[data-side=\"left\"] > &': {\n left: `calc(100% + ${halfHeight - halfWidth}px)`,\n transform: 'rotate(270deg)',\n },\n ...getAlignYStyle('left', width, height),\n }\n}\n\nexport const StyledLine = styled(Primitive.span, {\n width: '6px',\n height: '50px',\n position: 'absolute',\n rect: {\n fill: '$black',\n },\n 'svg #line': {\n width: '44px',\n height: '1px',\n transform: 'rotate(90 3.5 0)',\n },\n 'svg #circle': {\n width: '6px',\n height: '6px',\n rx: '3px',\n transform: 'rotate(90 6 44)',\n },\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledLine, getPlacement } 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 const placement = getPlacement(6, 50)\n return (\n <StyledLine\n {...props}\n css={{ ...placement }}\n ref={forwardRef}\n aria-hidden\n >\n <svg viewBox='0 0 6 50'>\n <rect id='line' x='3.5' transform='rotate(90 3.5 0)' />\n <rect id='circle' x='6' y='44' transform='rotate(90 6 44)' />\n </svg>\n </StyledLine>\n )\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\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 { useSize } from '@radix-ui/react-use-size'\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 */\n avoidCollisions?: boolean\n\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment option.\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger's edge to the popover's anchor. Works only with the \"arrow\" or \"none\"\n * anchor.\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 */\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 */\n collisionPadding?: number\n\n /**\n * The type of anchor to render.\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 */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\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 [line, setLine] = React.useState<HTMLElement | null>(null)\n const lineSize = useSize(line)\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 ref={setLine} />\n default:\n return null\n }\n }, [anchor, setLine])\n\n return (\n <StyledContent\n {...restProps}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n side={side}\n sideOffset={anchor === 'line' ? lineSize?.height : 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-controls',\n },\n\n variants: {\n variant: {\n light: {\n color: '$black',\n },\n dark: {\n '&:focus-visible': {\n boxShadow:\n '0 0 0 1px #0F0F0F, 0 0 0 3px #6881FF, 0 0 0 5px #4961f699',\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\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 from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\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 its open state.\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 */\n variant?: Variant\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nconst Root: React.FC<PopoverProps> = ({ onOpen, onClose, ...restProps }) => (\n <RadixPopover.Root\n {...restProps}\n onOpenChange={value => {\n if (value) {\n onOpen?.()\n } else {\n onClose?.()\n }\n }}\n modal={false}\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 <Root\n {...restProps}\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n onClose={onClose}\n />\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","jsxs","RadixArrow","createContext","useContext","useSize","RadixClose","IconCross","RadixPortal","RadixPopover"],"mappings":"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"}
|
package/dist/module.js
CHANGED
package/dist/module.js.map
CHANGED
|
@@ -1 +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',\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 { CSSProperties } from '@stitches/react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface AlignStyle {\n [x: string]: CSSProperties\n}\n\nconst getAlignXStyle = (side: Side, width: number): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n left: `${width * 2}px`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n left: `calc(50% - ${width / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: {\n left: `calc(100% - ${width * 3}px)`,\n },\n})\n\nconst getAlignYStyle = (\n side: Side,\n width: number,\n height: number\n): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n bottom: `calc(100% - (${height - width}px))`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n bottom: `calc(50% - ${height / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: { bottom: `-${width}px` },\n})\n\nexport const getPlacement = (width: number, height: number): any => {\n const halfHeight = height / 2\n const halfWidth = width / 2\n\n return {\n '[data-side=\"top\"] > &': { bottom: `-${height}px` },\n ...getAlignXStyle('top', width),\n '[data-side=\"bottom\"] > &': {\n bottom: '100%',\n transform: 'rotate(180deg)',\n },\n ...getAlignXStyle('bottom', width),\n '[data-side=\"right\"] > &': {\n left: `-${halfHeight + halfWidth}px`,\n transform: 'rotate(90deg)',\n },\n ...getAlignYStyle('right', width, height),\n '[data-side=\"left\"] > &': {\n left: `calc(100% + ${halfHeight - halfWidth}px)`,\n transform: 'rotate(270deg)',\n },\n ...getAlignYStyle('left', width, height),\n }\n}\n\nexport const StyledLine = styled(Primitive.span, {\n width: '6px',\n height: '50px',\n position: 'absolute',\n rect: {\n fill: '$black',\n },\n 'svg #line': {\n width: '44px',\n height: '1px',\n transform: 'rotate(90 3.5 0)',\n },\n 'svg #circle': {\n width: '6px',\n height: '6px',\n rx: '3px',\n transform: 'rotate(90 6 44)',\n },\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledLine, getPlacement } 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 const placement = getPlacement(6, 50)\n return (\n <StyledLine\n {...props}\n css={{ ...placement }}\n ref={forwardRef}\n aria-hidden\n >\n <svg viewBox='0 0 6 50'>\n <rect id='line' x='3.5' transform='rotate(90 3.5 0)' />\n <rect id='circle' x='6' y='44' transform='rotate(90 6 44)' />\n </svg>\n </StyledLine>\n )\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\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 { useSize } from '@radix-ui/react-use-size'\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 */\n avoidCollisions?: boolean\n\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment option.\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger's edge to the popover's anchor. Works only with the \"arrow\" or \"none\"\n * anchor.\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 */\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 */\n collisionPadding?: number\n\n /**\n * The type of anchor to render.\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 */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\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 [line, setLine] = React.useState<HTMLElement | null>(null)\n const lineSize = useSize(line)\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 ref={setLine} />\n default:\n return null\n }\n }, [anchor, setLine])\n\n return (\n <StyledContent\n {...restProps}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n side={side}\n sideOffset={anchor === 'line' ? lineSize?.height : 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-controls',\n },\n\n variants: {\n variant: {\n light: {\n color: '$black',\n },\n dark: {\n '&:focus-visible': {\n boxShadow:\n '0 0 0 1px #0F0F0F, 0 0 0 3px #6881FF, 0 0 0 5px #4961f699',\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\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 from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\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 its open state.\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 */\n variant?: Variant\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nconst Root: React.FC<PopoverProps> = ({ onOpen, onClose, ...restProps }) => (\n <RadixPopover.Root\n {...restProps}\n onOpenChange={value => {\n if (value) {\n onOpen?.()\n } else {\n onClose?.()\n }\n }}\n modal={false}\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 <Root\n {...restProps}\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n onClose={onClose}\n />\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}\n\nPopover.Trigger = Trigger\nPopover.Content = Content\nPopover.Close = Close\nPopover.Portal = Portal\n"],"names":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":";;;;;;;;;;AAIa,MAAA,aAAA,GAAgB,OAAOA,SAAY,CAAA;;ACOzC,MAAM,OAAU,GAAA,KAAA,CAAM,UAG3B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,aAAA,EAAA,EAAe,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACTzD,MAAA,aAAA,GAAgB,OAAOC,SAAc,EAAA;AAAA,EAChD,eAAiB,EAAA,QAAA;AAAA,EACjB,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA,QAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,SAAW,EAAA,4BAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EACZ,gDAAkD,EAAA;AAAA,IAChD,iBAAmB,EAAA,OAAA;AAAA,IACnB,uBAAyB,EAAA,MAAA;AAAA,IACzB,UAAY,EAAA,SAAA;AAAA,IACZ,sBAAwB,EAAA;AAAA,MACtB,eAAe,UAAW,CAAA,MAAA;AAAA,KAC5B;AAAA,IACA,wBAA0B,EAAA;AAAA,MACxB,eAAe,UAAW,CAAA,OAAA;AAAA,KAC5B;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,SAAW,EAAA,KAAA;AAAA,QACX,KAAO,EAAA,QAAA;AAAA,OACT;AAAA,MACA,MAAM,EAAC;AAAA,KACT;AAAA,GACF;AAAA,EACA,MAAQ,EAAA,UAAA;AACV,CAAC,CAAA;;ACxBD,MAAM,cAAA,GAAiB,CAAC,IAAA,EAAY,KAA+B,MAAA;AAAA,EACjE,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,4BAAA,CAA4B,GAAG;AAAA,IACjD,IAAA,EAAM,EAAG,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,IAAA,CAAA;AAAA,GACpB;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,6BAAA,CAA6B,GAAG;AAAA,IAClD,IAAA,EAAM,aAAc,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,KAAA,CAAA;AAAA,GAC/B;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,0BAAA,CAA0B,GAAG;AAAA,IAC/C,IAAA,EAAM,cAAe,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,KAAA,CAAA;AAAA,GAChC;AACF,CAAA,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA,CACrB,IACA,EAAA,KAAA,EACA,MACgB,MAAA;AAAA,EAChB,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,4BAAA,CAA4B,GAAG;AAAA,IACjD,MAAA,EAAQ,eAAgB,CAAA,MAAA,CAAA,MAAA,GAAS,KAAK,EAAA,MAAA,CAAA;AAAA,GACxC;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,6BAAA,CAA6B,GAAG;AAAA,IAClD,MAAA,EAAQ,aAAc,CAAA,MAAA,CAAA,MAAA,GAAS,CAAC,EAAA,KAAA,CAAA;AAAA,GAClC;AAAA,EACA,CAAC,eAAe,MAAI,CAAA,IAAA,EAAA,0BAAA,CAA0B,GAAG,EAAE,MAAA,EAAQ,GAAI,CAAA,MAAA,CAAA,KAAA,EAAK,IAAK,CAAA,EAAA;AAC3E,CAAA,CAAA,CAAA;AAEa,MAAA,YAAA,GAAe,CAAC,KAAA,EAAe,MAAwB,KAAA;AAClE,EAAA,MAAM,aAAa,MAAS,GAAA,CAAA,CAAA;AAC5B,EAAA,MAAM,YAAY,KAAQ,GAAA,CAAA,CAAA;AAE1B,EAAO,OAAA;AAAA,IACL,uBAAyB,EAAA,EAAE,MAAQ,EAAA,GAAA,CAAI,eAAM,IAAK,CAAA,EAAA;AAAA,IAClD,GAAG,cAAe,CAAA,KAAA,EAAO,KAAK,CAAA;AAAA,IAC9B,0BAA4B,EAAA;AAAA,MAC1B,MAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,gBAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAe,CAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IACjC,yBAA2B,EAAA;AAAA,MACzB,IAAA,EAAM,GAAI,CAAA,MAAA,CAAA,UAAA,GAAa,SAAS,EAAA,IAAA,CAAA;AAAA,MAChC,SAAW,EAAA,eAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAA,CAAe,OAAS,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,IACxC,wBAA0B,EAAA;AAAA,MACxB,IAAA,EAAM,cAAe,CAAA,MAAA,CAAA,UAAA,GAAa,SAAS,EAAA,KAAA,CAAA;AAAA,MAC3C,SAAW,EAAA,gBAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAA,CAAe,MAAQ,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACzC,CAAA;AACF,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,UAAA;AAAA,EACV,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,GACR;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,KAAA;AAAA,IACR,SAAW,EAAA,kBAAA;AAAA,GACb;AAAA,EACA,aAAe,EAAA;AAAA,IACb,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,KAAA;AAAA,IACR,EAAI,EAAA,KAAA;AAAA,IACJ,SAAW,EAAA,iBAAA;AAAA,GACb;AACF,CAAC,CAAA;;ACxEM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,KAAA;AACrB,IAAM,MAAA,SAAA,GAAY,YAAa,CAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AACpC,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA,EAAK,EAAE,GAAG,SAAU,EAAA;AAAA,QACpB,GAAK,EAAA,UAAA;AAAA,QACL,aAAW,EAAA,IAAA;AAAA,QAEX,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,OAAA,EAAQ,UACX,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAK,EAAG,EAAA,MAAA,EAAO,CAAE,EAAA,KAAA,EAAM,WAAU,kBAAmB,EAAA,CAAA;AAAA,0BACrD,GAAA,CAAC,UAAK,EAAG,EAAA,QAAA,EAAS,GAAE,GAAI,EAAA,CAAA,EAAE,IAAK,EAAA,SAAA,EAAU,iBAAkB,EAAA,CAAA;AAAA,SAC7D,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA;;ACrBa,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,IAAM,EAAA,QAAA;AAAA,EACN,MAAQ,EAAA,IAAA;AAAA,EACR,QAAU,EAAA,KAAA;AAAA,EACV,KAAO,EAAA,IAAA;AAAA,EACP,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,QAAA;AAAA,OACR;AAAA,MACA,MAAM,EAAC;AAAA,KACT;AAAA,GACF;AACF,CAAC,CAAA;;ACJD,MAAM,cAAA,GAAiB,aAAmC,CAAA,EAAS,CAAA,CAAA;AAM5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,OAAA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,cAAe,CAAA,QAAA;AAAA,EAAf;AAAA,IACC,KAAO,EAAA;AAAA,MACL,OAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAMW,MAAA,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc,CAAA;;AC3BpB,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AACtC,EACE,uBAAA,GAAA,CAAC,eAAa,GAAG,KAAA,EAAO,SAAkB,aAAW,EAAA,IAAA,EAAC,KAAK,UAAY,EAAA,CAAA,CAAA;AAE3E,CAAC,CAAA;;ACiHM,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,KAAQ,GAAA,QAAA;AAAA,IACR,WAAc,GAAA,CAAA;AAAA,IACd,UAAa,GAAA,CAAA;AAAA,IACb,eAAkB,GAAA,IAAA;AAAA,IAClB,gBAAmB,GAAA,CAAA;AAAA,IACnB,IAAO,GAAA,KAAA;AAAA,IACP,QAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,MAAS,GAAA,SAAA;AAAA,IACT,gBAAmB,GAAA,KAAA;AAAA,IACnB,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAA6B,IAAI,CAAA,CAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,QAAQ,IAAI,CAAA,CAAA;AAC7B,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,OAAA,CAAQ,MAAM;AACnC,MAAA,QAAQ,MAAQ;AAAA,QACd,KAAK,OAAA;AACH,UAAA,2BAAQ,KAAM,EAAA,EAAA,CAAA,CAAA;AAAA,QAChB,KAAK,MAAA;AACH,UAAO,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,GAAA,EAAK,OAAS,EAAA,CAAA,CAAA;AAAA,QAC7B;AACE,UAAO,OAAA,IAAA,CAAA;AAAA,OACX;AAAA,KACC,EAAA,CAAC,MAAQ,EAAA,OAAO,CAAC,CAAA,CAAA;AAEpB,IACE,uBAAA,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,UAAY,EAAA,MAAA,KAAW,MAAS,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,MAAS,GAAA,UAAA;AAAA,QACnD,GAAK,EAAA,UAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,YAAW,EAAA,MAAA;AAAA,QACX,MAAA;AAAA,QACA,gBAAA;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,QAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF,CAAA;;ACtLa,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,GAAK,EAAA,OAAA;AAAA,EACL,UAAY,EAAA,SAAA;AAAA,EACZ,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,IAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,QAAA;AAAA,EAChB,KAAO,EAAA,QAAA;AAAA,EACP,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EACL,KAAO,EAAA,KAAA;AAAA,EACP,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,2BAAA;AAAA,GACnB;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,SAAW,EAAA,iBAAA;AAAA,GACb;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,QAAA;AAAA,OACT;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,iBAAmB,EAAA;AAAA,UACjB,SACE,EAAA,2DAAA;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC7BM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,aAAY,EAAA,YAAA;AAAA,MACZ,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,KAAA;AAAA,GAC1B,CAAA;AAEJ,CAAC,CAAA;;ACRM,MAAM,MAAgC,GAAA,CAAA,KAAA,qBAAU,GAAA,CAAAC,QAAA,EAAA,EAAa,GAAG,KAAO,EAAA,CAAA;;AC6B9E,MAAM,OAA+B,CAAC,EAAE,QAAQ,OAAS,EAAA,GAAG,WAC1D,qBAAA,GAAA;AAAA,EAAC,YAAa,CAAA,IAAA;AAAA,EAAb;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,cAAc,CAAS,KAAA,KAAA;AACrB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA,CAAA;AAAA,OACK,MAAA;AACL,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,KAAO,EAAA,KAAA;AAAA,GAAA;AACT,CAAA,CAAA;AAGK,MAAM,UAA6C,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,SAAA;AACL,CACE,qBAAA,GAAA,CAAC,mBAAgB,OACf,EAAA,QAAA,kBAAA,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,GAAA;AACF,CACF,EAAA,EAAA;AAaF,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,OAAA,CAAQ,MAAS,GAAA,MAAA;;;;;;;;"}
|
|
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',\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 { CSSProperties } from '@stitches/react'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\ntype Side = 'top' | 'right' | 'bottom' | 'left'\n\ninterface AlignStyle {\n [x: string]: CSSProperties\n}\n\nconst getAlignXStyle = (side: Side, width: number): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n left: `${width * 2}px`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n left: `calc(50% - ${width / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: {\n left: `calc(100% - ${width * 3}px)`,\n },\n})\n\nconst getAlignYStyle = (\n side: Side,\n width: number,\n height: number\n): AlignStyle => ({\n [`[data-side=\"${side}\"][data-align=\"start\"] > &`]: {\n bottom: `calc(100% - (${height - width}px))`,\n },\n [`[data-side=\"${side}\"][data-align=\"center\"] > &`]: {\n bottom: `calc(50% - ${height / 2}px)`,\n },\n [`[data-side=\"${side}\"][data-align=\"end\"] > &`]: { bottom: `-${width}px` },\n})\n\nexport const getPlacement = (width: number, height: number): any => {\n const halfHeight = height / 2\n const halfWidth = width / 2\n\n return {\n '[data-side=\"top\"] > &': { bottom: `-${height}px` },\n ...getAlignXStyle('top', width),\n '[data-side=\"bottom\"] > &': {\n bottom: '100%',\n transform: 'rotate(180deg)',\n },\n ...getAlignXStyle('bottom', width),\n '[data-side=\"right\"] > &': {\n left: `-${halfHeight + halfWidth}px`,\n transform: 'rotate(90deg)',\n },\n ...getAlignYStyle('right', width, height),\n '[data-side=\"left\"] > &': {\n left: `calc(100% + ${halfHeight - halfWidth}px)`,\n transform: 'rotate(270deg)',\n },\n ...getAlignYStyle('left', width, height),\n }\n}\n\nexport const StyledLine = styled(Primitive.span, {\n width: '6px',\n height: '50px',\n position: 'absolute',\n rect: {\n fill: '$black',\n },\n 'svg #line': {\n width: '44px',\n height: '1px',\n transform: 'rotate(90 3.5 0)',\n },\n 'svg #circle': {\n width: '6px',\n height: '6px',\n rx: '3px',\n transform: 'rotate(90 6 44)',\n },\n})\n\nexport type StyledLineProps = StrictComponentProps<typeof StyledLine>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledLine, getPlacement } 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 const placement = getPlacement(6, 50)\n return (\n <StyledLine\n {...props}\n css={{ ...placement }}\n ref={forwardRef}\n aria-hidden\n >\n <svg viewBox='0 0 6 50'>\n <rect id='line' x='3.5' transform='rotate(90 3.5 0)' />\n <rect id='circle' x='6' y='44' transform='rotate(90 6 44)' />\n </svg>\n </StyledLine>\n )\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\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 { useSize } from '@radix-ui/react-use-size'\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 */\n avoidCollisions?: boolean\n\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment option.\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger's edge to the popover's anchor. Works only with the \"arrow\" or \"none\"\n * anchor.\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 */\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 */\n collisionPadding?: number\n\n /**\n * The type of anchor to render.\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 */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\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 [line, setLine] = React.useState<HTMLElement | null>(null)\n const lineSize = useSize(line)\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 ref={setLine} />\n default:\n return null\n }\n }, [anchor, setLine])\n\n return (\n <StyledContent\n {...restProps}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n side={side}\n sideOffset={anchor === 'line' ? lineSize?.height : 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-controls',\n },\n\n variants: {\n variant: {\n light: {\n color: '$black',\n },\n dark: {\n '&:focus-visible': {\n boxShadow:\n '0 0 0 1px #0F0F0F, 0 0 0 3px #6881FF, 0 0 0 5px #4961f699',\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\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 from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\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 its open state.\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 */\n variant?: Variant\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nconst Root: React.FC<PopoverProps> = ({ onOpen, onClose, ...restProps }) => (\n <RadixPopover.Root\n {...restProps}\n onOpenChange={value => {\n if (value) {\n onOpen?.()\n } else {\n onClose?.()\n }\n }}\n modal={false}\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 <Root\n {...restProps}\n open={open}\n defaultOpen={defaultOpen}\n onOpen={onOpen}\n onClose={onClose}\n />\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":";;;;;;;;;;AAIa,MAAA,aAAA,GAAgB,OAAOA,SAAY,CAAA;;ACOzC,MAAM,OAAU,GAAA,KAAA,CAAM,UAG3B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,aAAA,EAAA,EAAe,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACTzD,MAAA,aAAA,GAAgB,OAAOC,SAAc,EAAA;AAAA,EAChD,eAAiB,EAAA,QAAA;AAAA,EACjB,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA,QAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,SAAW,EAAA,4BAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AAAA,EACZ,gDAAkD,EAAA;AAAA,IAChD,iBAAmB,EAAA,OAAA;AAAA,IACnB,uBAAyB,EAAA,MAAA;AAAA,IACzB,UAAY,EAAA,SAAA;AAAA,IACZ,sBAAwB,EAAA;AAAA,MACtB,eAAe,UAAW,CAAA,MAAA;AAAA,KAC5B;AAAA,IACA,wBAA0B,EAAA;AAAA,MACxB,eAAe,UAAW,CAAA,OAAA;AAAA,KAC5B;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,QAAA;AAAA,QACZ,SAAW,EAAA,KAAA;AAAA,QACX,KAAO,EAAA,QAAA;AAAA,OACT;AAAA,MACA,MAAM,EAAC;AAAA,KACT;AAAA,GACF;AAAA,EACA,MAAQ,EAAA,UAAA;AACV,CAAC,CAAA;;ACxBD,MAAM,cAAA,GAAiB,CAAC,IAAA,EAAY,KAA+B,MAAA;AAAA,EACjE,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,4BAAA,CAA4B,GAAG;AAAA,IACjD,IAAA,EAAM,EAAG,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,IAAA,CAAA;AAAA,GACpB;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,6BAAA,CAA6B,GAAG;AAAA,IAClD,IAAA,EAAM,aAAc,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,KAAA,CAAA;AAAA,GAC/B;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,0BAAA,CAA0B,GAAG;AAAA,IAC/C,IAAA,EAAM,cAAe,CAAA,MAAA,CAAA,KAAA,GAAQ,CAAC,EAAA,KAAA,CAAA;AAAA,GAChC;AACF,CAAA,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA,CACrB,IACA,EAAA,KAAA,EACA,MACgB,MAAA;AAAA,EAChB,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,4BAAA,CAA4B,GAAG;AAAA,IACjD,MAAA,EAAQ,eAAgB,CAAA,MAAA,CAAA,MAAA,GAAS,KAAK,EAAA,MAAA,CAAA;AAAA,GACxC;AAAA,EACA,CAAC,cAAA,CAAe,MAAI,CAAA,IAAA,EAAA,6BAAA,CAA6B,GAAG;AAAA,IAClD,MAAA,EAAQ,aAAc,CAAA,MAAA,CAAA,MAAA,GAAS,CAAC,EAAA,KAAA,CAAA;AAAA,GAClC;AAAA,EACA,CAAC,eAAe,MAAI,CAAA,IAAA,EAAA,0BAAA,CAA0B,GAAG,EAAE,MAAA,EAAQ,GAAI,CAAA,MAAA,CAAA,KAAA,EAAK,IAAK,CAAA,EAAA;AAC3E,CAAA,CAAA,CAAA;AAEa,MAAA,YAAA,GAAe,CAAC,KAAA,EAAe,MAAwB,KAAA;AAClE,EAAA,MAAM,aAAa,MAAS,GAAA,CAAA,CAAA;AAC5B,EAAA,MAAM,YAAY,KAAQ,GAAA,CAAA,CAAA;AAE1B,EAAO,OAAA;AAAA,IACL,uBAAyB,EAAA,EAAE,MAAQ,EAAA,GAAA,CAAI,eAAM,IAAK,CAAA,EAAA;AAAA,IAClD,GAAG,cAAe,CAAA,KAAA,EAAO,KAAK,CAAA;AAAA,IAC9B,0BAA4B,EAAA;AAAA,MAC1B,MAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,gBAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAe,CAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IACjC,yBAA2B,EAAA;AAAA,MACzB,IAAA,EAAM,GAAI,CAAA,MAAA,CAAA,UAAA,GAAa,SAAS,EAAA,IAAA,CAAA;AAAA,MAChC,SAAW,EAAA,eAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAA,CAAe,OAAS,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,IACxC,wBAA0B,EAAA;AAAA,MACxB,IAAA,EAAM,cAAe,CAAA,MAAA,CAAA,UAAA,GAAa,SAAS,EAAA,KAAA,CAAA;AAAA,MAC3C,SAAW,EAAA,gBAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAA,CAAe,MAAQ,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACzC,CAAA;AACF,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,QAAU,EAAA,UAAA;AAAA,EACV,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,GACR;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,KAAA;AAAA,IACR,SAAW,EAAA,kBAAA;AAAA,GACb;AAAA,EACA,aAAe,EAAA;AAAA,IACb,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,KAAA;AAAA,IACR,EAAI,EAAA,KAAA;AAAA,IACJ,SAAW,EAAA,iBAAA;AAAA,GACb;AACF,CAAC,CAAA;;ACxEM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,KAAA;AACrB,IAAM,MAAA,SAAA,GAAY,YAAa,CAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AACpC,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA,EAAK,EAAE,GAAG,SAAU,EAAA;AAAA,QACpB,GAAK,EAAA,UAAA;AAAA,QACL,aAAW,EAAA,IAAA;AAAA,QAEX,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,OAAA,EAAQ,UACX,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAK,EAAG,EAAA,MAAA,EAAO,CAAE,EAAA,KAAA,EAAM,WAAU,kBAAmB,EAAA,CAAA;AAAA,0BACrD,GAAA,CAAC,UAAK,EAAG,EAAA,QAAA,EAAS,GAAE,GAAI,EAAA,CAAA,EAAE,IAAK,EAAA,SAAA,EAAU,iBAAkB,EAAA,CAAA;AAAA,SAC7D,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA;;ACrBa,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,IAAM,EAAA,QAAA;AAAA,EACN,MAAQ,EAAA,IAAA;AAAA,EACR,QAAU,EAAA,KAAA;AAAA,EACV,KAAO,EAAA,IAAA;AAAA,EACP,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,QAAA;AAAA,OACR;AAAA,MACA,MAAM,EAAC;AAAA,KACT;AAAA,GACF;AACF,CAAC,CAAA;;ACJD,MAAM,cAAA,GAAiB,aAAmC,CAAA,EAAS,CAAA,CAAA;AAM5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,OAAA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,cAAe,CAAA,QAAA;AAAA,EAAf;AAAA,IACC,KAAO,EAAA;AAAA,MACL,OAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAMW,MAAA,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc,CAAA;;AC3BpB,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AACtC,EACE,uBAAA,GAAA,CAAC,eAAa,GAAG,KAAA,EAAO,SAAkB,aAAW,EAAA,IAAA,EAAC,KAAK,UAAY,EAAA,CAAA,CAAA;AAE3E,CAAC,CAAA;;ACiHM,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,KAAQ,GAAA,QAAA;AAAA,IACR,WAAc,GAAA,CAAA;AAAA,IACd,UAAa,GAAA,CAAA;AAAA,IACb,eAAkB,GAAA,IAAA;AAAA,IAClB,gBAAmB,GAAA,CAAA;AAAA,IACnB,IAAO,GAAA,KAAA;AAAA,IACP,QAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,MAAS,GAAA,SAAA;AAAA,IACT,gBAAmB,GAAA,KAAA;AAAA,IACnB,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAA6B,IAAI,CAAA,CAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,QAAQ,IAAI,CAAA,CAAA;AAC7B,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,OAAA,CAAQ,MAAM;AACnC,MAAA,QAAQ,MAAQ;AAAA,QACd,KAAK,OAAA;AACH,UAAA,2BAAQ,KAAM,EAAA,EAAA,CAAA,CAAA;AAAA,QAChB,KAAK,MAAA;AACH,UAAO,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,GAAA,EAAK,OAAS,EAAA,CAAA,CAAA;AAAA,QAC7B;AACE,UAAO,OAAA,IAAA,CAAA;AAAA,OACX;AAAA,KACC,EAAA,CAAC,MAAQ,EAAA,OAAO,CAAC,CAAA,CAAA;AAEpB,IACE,uBAAA,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,UAAY,EAAA,MAAA,KAAW,MAAS,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,MAAS,GAAA,UAAA;AAAA,QACnD,GAAK,EAAA,UAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,YAAW,EAAA,MAAA;AAAA,QACX,MAAA;AAAA,QACA,gBAAA;AAAA,QACA,OAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,QAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF,CAAA;;ACtLa,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,GAAK,EAAA,OAAA;AAAA,EACL,UAAY,EAAA,SAAA;AAAA,EACZ,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,IAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,QAAA;AAAA,EAChB,KAAO,EAAA,QAAA;AAAA,EACP,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EACL,KAAO,EAAA,KAAA;AAAA,EACP,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,2BAAA;AAAA,GACnB;AAAA,EACA,iBAAmB,EAAA;AAAA,IACjB,SAAW,EAAA,iBAAA;AAAA,GACb;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,QAAA;AAAA,OACT;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,iBAAmB,EAAA;AAAA,UACjB,SACE,EAAA,2DAAA;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC7BM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,aAAY,EAAA,YAAA;AAAA,MACZ,OAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA;AAAA,KAAA;AAAA,GAC1B,CAAA;AAEJ,CAAC,CAAA;;ACRM,MAAM,MAAgC,GAAA,CAAA,KAAA,qBAAU,GAAA,CAAAC,QAAA,EAAA,EAAa,GAAG,KAAO,EAAA,CAAA;;AC6B9E,MAAM,OAA+B,CAAC,EAAE,QAAQ,OAAS,EAAA,GAAG,WAC1D,qBAAA,GAAA;AAAA,EAAC,YAAa,CAAA,IAAA;AAAA,EAAb;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,cAAc,CAAS,KAAA,KAAA;AACrB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA,CAAA;AAAA,OACK,MAAA;AACL,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,KAAO,EAAA,KAAA;AAAA,GAAA;AACT,CAAA,CAAA;AAGK,MAAM,UAA6C,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,SAAA;AACL,CACE,qBAAA,GAAA,CAAC,mBAAgB,OACf,EAAA,QAAA,kBAAA,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,GAAA;AACF,CACF,EAAA,EAAA;AAcF,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,OAAA,CAAQ,MAAS,GAAA,MAAA,CAAA;AACjB,OAAA,CAAQ,SAAS,YAAa,CAAA,MAAA;;;;;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default from 'react';
|
|
3
|
+
import * as _radix_ui_react_popover from '@radix-ui/react-popover';
|
|
4
|
+
import { PopoverPortalProps } from '@radix-ui/react-popover';
|
|
3
5
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
6
|
import { StrictComponentProps } from '@mirohq/design-system-stitches';
|
|
5
7
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
6
|
-
import * as _radix_ui_react_popover from '@radix-ui/react-popover';
|
|
7
|
-
import { PopoverPortalProps } from '@radix-ui/react-popover';
|
|
8
8
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
9
9
|
|
|
10
10
|
declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "css"> & _stitches_react_types_styled_component.TransformProps<{}, {}> & {
|
|
@@ -117,6 +117,9 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
117
117
|
"background-primary-subtle-pressed-hover"?: any;
|
|
118
118
|
"background-primary-subtle-selected"?: any;
|
|
119
119
|
"background-success"?: any;
|
|
120
|
+
"background-success-prominent"?: any;
|
|
121
|
+
"background-success-prominent-active"?: any;
|
|
122
|
+
"background-success-prominent-hover"?: any;
|
|
120
123
|
"background-warning-prominent"?: any;
|
|
121
124
|
"background-warning-subtle"?: any;
|
|
122
125
|
"border-danger"?: any;
|
|
@@ -145,6 +148,8 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
145
148
|
"border-primary-hover"?: any;
|
|
146
149
|
"border-primary-inverted"?: any;
|
|
147
150
|
"border-success"?: any;
|
|
151
|
+
"border-success-active"?: any;
|
|
152
|
+
"border-success-hover"?: any;
|
|
148
153
|
"border-warning"?: any;
|
|
149
154
|
"icon-danger"?: any;
|
|
150
155
|
"icon-danger-active"?: any;
|
|
@@ -164,9 +169,12 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
164
169
|
"icon-primary-inverted"?: any;
|
|
165
170
|
"icon-primary-selected"?: any;
|
|
166
171
|
"icon-success"?: any;
|
|
172
|
+
"icon-success-active"?: any;
|
|
173
|
+
"icon-success-hover"?: any;
|
|
167
174
|
"icon-success-inverted"?: any;
|
|
168
175
|
"icon-warning"?: any;
|
|
169
176
|
"icon-warning-prominent"?: any;
|
|
177
|
+
"icon-warning-subtle"?: any;
|
|
170
178
|
"text-danger"?: any;
|
|
171
179
|
"text-danger-active"?: any;
|
|
172
180
|
"text-danger-hover"?: any;
|
|
@@ -188,7 +196,11 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
188
196
|
"text-primary-inverted-subtle"?: any;
|
|
189
197
|
"text-primary-selected"?: any;
|
|
190
198
|
"text-success"?: any;
|
|
199
|
+
"text-success-active"?: any;
|
|
200
|
+
"text-success-hover"?: any;
|
|
201
|
+
"text-success-inverted"?: any;
|
|
191
202
|
"text-warning"?: any;
|
|
203
|
+
"text-warning-subtle"?: any;
|
|
192
204
|
};
|
|
193
205
|
'font-sizes': {
|
|
194
206
|
readonly 150: "0.75rem";
|
|
@@ -231,6 +243,7 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<{}, never
|
|
|
231
243
|
};
|
|
232
244
|
space: {
|
|
233
245
|
readonly 0: "0px";
|
|
246
|
+
readonly 25: "2px";
|
|
234
247
|
readonly 50: "4px";
|
|
235
248
|
readonly 100: "8px";
|
|
236
249
|
readonly 150: "12px";
|
|
@@ -604,6 +617,9 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
604
617
|
"background-primary-subtle-pressed-hover"?: any;
|
|
605
618
|
"background-primary-subtle-selected"?: any;
|
|
606
619
|
"background-success"?: any;
|
|
620
|
+
"background-success-prominent"?: any;
|
|
621
|
+
"background-success-prominent-active"?: any;
|
|
622
|
+
"background-success-prominent-hover"?: any;
|
|
607
623
|
"background-warning-prominent"?: any;
|
|
608
624
|
"background-warning-subtle"?: any;
|
|
609
625
|
"border-danger"?: any;
|
|
@@ -632,6 +648,8 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
632
648
|
"border-primary-hover"?: any;
|
|
633
649
|
"border-primary-inverted"?: any;
|
|
634
650
|
"border-success"?: any;
|
|
651
|
+
"border-success-active"?: any;
|
|
652
|
+
"border-success-hover"?: any;
|
|
635
653
|
"border-warning"?: any;
|
|
636
654
|
"icon-danger"?: any;
|
|
637
655
|
"icon-danger-active"?: any;
|
|
@@ -651,9 +669,12 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
651
669
|
"icon-primary-inverted"?: any;
|
|
652
670
|
"icon-primary-selected"?: any;
|
|
653
671
|
"icon-success"?: any;
|
|
672
|
+
"icon-success-active"?: any;
|
|
673
|
+
"icon-success-hover"?: any;
|
|
654
674
|
"icon-success-inverted"?: any;
|
|
655
675
|
"icon-warning"?: any;
|
|
656
676
|
"icon-warning-prominent"?: any;
|
|
677
|
+
"icon-warning-subtle"?: any;
|
|
657
678
|
"text-danger"?: any;
|
|
658
679
|
"text-danger-active"?: any;
|
|
659
680
|
"text-danger-hover"?: any;
|
|
@@ -675,7 +696,11 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
675
696
|
"text-primary-inverted-subtle"?: any;
|
|
676
697
|
"text-primary-selected"?: any;
|
|
677
698
|
"text-success"?: any;
|
|
699
|
+
"text-success-active"?: any;
|
|
700
|
+
"text-success-hover"?: any;
|
|
701
|
+
"text-success-inverted"?: any;
|
|
678
702
|
"text-warning"?: any;
|
|
703
|
+
"text-warning-subtle"?: any;
|
|
679
704
|
};
|
|
680
705
|
'font-sizes': {
|
|
681
706
|
readonly 150: "0.75rem";
|
|
@@ -718,6 +743,7 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
718
743
|
};
|
|
719
744
|
space: {
|
|
720
745
|
readonly 0: "0px";
|
|
746
|
+
readonly 25: "2px";
|
|
721
747
|
readonly 50: "4px";
|
|
722
748
|
readonly 100: "8px";
|
|
723
749
|
readonly 150: "12px";
|
|
@@ -1209,6 +1235,9 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
1209
1235
|
"background-primary-subtle-pressed-hover"?: any;
|
|
1210
1236
|
"background-primary-subtle-selected"?: any;
|
|
1211
1237
|
"background-success"?: any;
|
|
1238
|
+
"background-success-prominent"?: any;
|
|
1239
|
+
"background-success-prominent-active"?: any;
|
|
1240
|
+
"background-success-prominent-hover"?: any;
|
|
1212
1241
|
"background-warning-prominent"?: any;
|
|
1213
1242
|
"background-warning-subtle"?: any;
|
|
1214
1243
|
"border-danger"?: any;
|
|
@@ -1237,6 +1266,8 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
1237
1266
|
"border-primary-hover"?: any;
|
|
1238
1267
|
"border-primary-inverted"?: any;
|
|
1239
1268
|
"border-success"?: any;
|
|
1269
|
+
"border-success-active"?: any;
|
|
1270
|
+
"border-success-hover"?: any;
|
|
1240
1271
|
"border-warning"?: any;
|
|
1241
1272
|
"icon-danger"?: any;
|
|
1242
1273
|
"icon-danger-active"?: any;
|
|
@@ -1256,9 +1287,12 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
1256
1287
|
"icon-primary-inverted"?: any;
|
|
1257
1288
|
"icon-primary-selected"?: any;
|
|
1258
1289
|
"icon-success"?: any;
|
|
1290
|
+
"icon-success-active"?: any;
|
|
1291
|
+
"icon-success-hover"?: any;
|
|
1259
1292
|
"icon-success-inverted"?: any;
|
|
1260
1293
|
"icon-warning"?: any;
|
|
1261
1294
|
"icon-warning-prominent"?: any;
|
|
1295
|
+
"icon-warning-subtle"?: any;
|
|
1262
1296
|
"text-danger"?: any;
|
|
1263
1297
|
"text-danger-active"?: any;
|
|
1264
1298
|
"text-danger-hover"?: any;
|
|
@@ -1280,7 +1314,11 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
1280
1314
|
"text-primary-inverted-subtle"?: any;
|
|
1281
1315
|
"text-primary-selected"?: any;
|
|
1282
1316
|
"text-success"?: any;
|
|
1317
|
+
"text-success-active"?: any;
|
|
1318
|
+
"text-success-hover"?: any;
|
|
1319
|
+
"text-success-inverted"?: any;
|
|
1283
1320
|
"text-warning"?: any;
|
|
1321
|
+
"text-warning-subtle"?: any;
|
|
1284
1322
|
};
|
|
1285
1323
|
'font-sizes': {
|
|
1286
1324
|
readonly 150: "0.75rem";
|
|
@@ -1323,6 +1361,7 @@ declare const StyledClose: react.ForwardRefExoticComponent<Omit<Omit<{
|
|
|
1323
1361
|
};
|
|
1324
1362
|
space: {
|
|
1325
1363
|
readonly 0: "0px";
|
|
1364
|
+
readonly 25: "2px";
|
|
1326
1365
|
readonly 50: "4px";
|
|
1327
1366
|
readonly 100: "8px";
|
|
1328
1367
|
readonly 150: "12px";
|
|
@@ -1631,6 +1670,7 @@ interface Partials {
|
|
|
1631
1670
|
Content: typeof Content;
|
|
1632
1671
|
Close: typeof Close;
|
|
1633
1672
|
Portal: typeof Portal;
|
|
1673
|
+
Anchor: typeof _radix_ui_react_popover.Anchor;
|
|
1634
1674
|
}
|
|
1635
1675
|
|
|
1636
1676
|
export { Popover, ContentProps as PopoverContentProps, PortalProps as PopoverPortalProps, PopoverProps, TriggerProps as PopoverTriggerProps, types as PopoverTypes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-popover",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-popover": "^1.0.0",
|
|
31
31
|
"@radix-ui/react-use-size": "^1.0.1",
|
|
32
|
-
"@mirohq/design-system-icons": "^0.30.
|
|
33
|
-
"@mirohq/design-system-
|
|
34
|
-
"@mirohq/design-system-
|
|
35
|
-
"@mirohq/design-system-
|
|
32
|
+
"@mirohq/design-system-icons": "^0.30.7",
|
|
33
|
+
"@mirohq/design-system-primitive": "^1.1.1",
|
|
34
|
+
"@mirohq/design-system-stitches": "^2.3.14",
|
|
35
|
+
"@mirohq/design-system-styles": "^1.1.11"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "rollup -c ../../../rollup.config.js",
|