npm - @mirohq/design-system-popover - Versions diffs - 5.1.31 → 5.1.32-combobox.0 - Mend

@mirohq/design-system-popover 5.1.31 → 5.1.32-combobox.0

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.

Files changed (5) hide show

package/dist/main.js CHANGED Viewed

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var RadixPopover = require('@radix-ui/react-popover');
 var React = require('react');
 var designSystemStitches = require('@mirohq/design-system-stitches');
+var reactUseSize = require('@radix-ui/react-use-size');
 var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemIcons = require('@mirohq/design-system-icons');
@@ -69,41 +70,86 @@ const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
   zIndex: "$popover"
 });
-const LINE_HEIGHT = 50;
-const LINE_WIDTH = 6;
-const StyledLine = designSystemStitches.styled(designSystemPrimitive.Primitive.svg, {
-  display: "block",
-  width: "".concat(LINE_WIDTH, "px"),
-  height: "".concat(LINE_HEIGHT, "px"),
-  fill: "$black"
+const getAlignXStyle = (side, width) => ({
+  ['[data-side="'.concat(side, '"][data-align="start"] > &')]: {
+    left: "".concat(width * 2, "px")
+  },
+  ['[data-side="'.concat(side, '"][data-align="center"] > &')]: {
+    left: "calc(50% - ".concat(width / 2, "px)")
+  },
+  ['[data-side="'.concat(side, '"][data-align="end"] > &')]: {
+    left: "calc(100% - ".concat(width * 3, "px)")
+  }
+});
+const getAlignYStyle = (side, width, height) => ({
+  ['[data-side="'.concat(side, '"][data-align="start"] > &')]: {
+    bottom: "calc(100% - (".concat(height - width, "px))")
+  },
+  ['[data-side="'.concat(side, '"][data-align="center"] > &')]: {
+    bottom: "calc(50% - ".concat(height / 2, "px)")
+  },
+  ['[data-side="'.concat(side, '"][data-align="end"] > &')]: { bottom: "-".concat(width, "px") }
+});
+const getPlacement = (width, height) => {
+  const halfHeight = height / 2;
+  const halfWidth = width / 2;
+  return {
+    '[data-side="top"] > &': { bottom: "-".concat(height, "px") },
+    ...getAlignXStyle("top", width),
+    '[data-side="bottom"] > &': {
+      bottom: "100%",
+      transform: "rotate(180deg)"
+    },
+    ...getAlignXStyle("bottom", width),
+    '[data-side="right"] > &': {
+      left: "-".concat(halfHeight + halfWidth, "px"),
+      transform: "rotate(90deg)"
+    },
+    ...getAlignYStyle("right", width, height),
+    '[data-side="left"] > &': {
+      left: "calc(100% + ".concat(halfHeight - halfWidth, "px)"),
+      transform: "rotate(270deg)"
+    },
+    ...getAlignYStyle("left", width, height)
+  };
+};
+const StyledLine = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  width: "6px",
+  height: "50px",
+  position: "absolute",
+  rect: {
+    fill: "$black"
+  },
+  "svg #line": {
+    width: "44px",
+    height: "1px",
+    transform: "rotate(90 3.5 0)"
+  },
+  "svg #circle": {
+    width: "6px",
+    height: "6px",
+    rx: "3px",
+    transform: "rotate(90 6 44)"
+  }
 });
 const Line = React__default["default"].forwardRef(
-  (props, forwardRef) => (
-    // We have to use RadixArrow with asChild here instead of styling it,
-    // otherwise it's not possible to pass children, it will use arrow svg.
-    // In this case asChild won't merge the nodes for some reason, so in the end we get 2 nodes:
-    // span with positioning from Radix and svg with styling.
-    /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledLine, { ref: forwardRef, ...props, "aria-hidden": true, viewBox: "0 0 6 50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: LINE_WIDTH / 2 - 0.5,
-          y: "0",
-          width: "1",
-          height: LINE_HEIGHT - LINE_WIDTH
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: LINE_WIDTH / 2,
-          cy: LINE_HEIGHT - LINE_WIDTH / 2,
-          r: LINE_WIDTH / 2
-        }
-      )
-    ] }) })
-  )
+  (props, forwardRef) => {
+    const placement = getPlacement(6, 50);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledLine,
+      {
+        ...props,
+        css: { ...placement },
+        ref: forwardRef,
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 6 50", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { id: "line", x: "3.5", transform: "rotate(90 3.5 0)" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { id: "circle", x: "6", y: "44", transform: "rotate(90 6 44)" })
+        ] })
+      }
+    );
+  }
 );
 const StyledArrow = designSystemStitches.styled(RadixPopover.Arrow, {
@@ -155,17 +201,19 @@ const Content = React__default["default"].forwardRef(
     hideWhenDetached = false,
     ...restProps
   }, forwardRef) => {
+    const [line, setLine] = React__default["default"].useState(null);
+    const lineSize = reactUseSize.useSize(line);
     const { variant } = usePopoverContext();
     const anchorEl = React__default["default"].useMemo(() => {
       switch (anchor) {
         case "arrow":
           return /* @__PURE__ */ jsxRuntime.jsx(Arrow, {});
         case "line":
-          return /* @__PURE__ */ jsxRuntime.jsx(Line, {});
+          return /* @__PURE__ */ jsxRuntime.jsx(Line, { ref: setLine });
         default:
           return null;
       }
-    }, [anchor]);
+    }, [anchor, setLine]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledContent,
       {
@@ -175,7 +223,7 @@ const Content = React__default["default"].forwardRef(
         avoidCollisions,
         collisionPadding,
         side,
-        sideOffset,
+        sideOffset: anchor === "line" ? lineSize == null ? void 0 : lineSize.height : sideOffset,
         ref: forwardRef,
         role: "dialog",
         "aria-modal": "true",

package/dist/main.js.map CHANGED Viewed

	@@ -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 $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 for some reason, so in the end we get 2 nodes:\n // span with positioning from Radix and svg with styling.\n <RadixArrow asChild>\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 </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-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 /\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 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\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> = ({ 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","RadixArrow","jsxs","createContext","useContext","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 $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 { 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 /\n The appearance of arrow.\n /\n variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n ElementRef<typeof StyledArrow>,\n ArrowProps\n>((props, forwardRef) => {\n const { variant } = usePopoverContext()\n return (\n <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { 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 * @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 [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 /\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 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\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> = ({ 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 Viewed

@@ -3,6 +3,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import { Trigger as Trigger$1, Content as Content$1, Arrow as Arrow$1, Close as Close$1, Portal as Portal$1 } from '@radix-ui/react-popover';
 import React, { createContext, useContext } from 'react';
 import { styled } from '@mirohq/design-system-stitches';
+import { useSize } from '@radix-ui/react-use-size';
 import { animations } from '@mirohq/design-system-styles';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { IconCross } from '@mirohq/design-system-icons';
@@ -43,41 +44,86 @@ const StyledContent = styled(Content$1, {
   zIndex: "$popover"
 });
-const LINE_HEIGHT = 50;
-const LINE_WIDTH = 6;
-const StyledLine = styled(Primitive.svg, {
-  display: "block",
-  width: "".concat(LINE_WIDTH, "px"),
-  height: "".concat(LINE_HEIGHT, "px"),
-  fill: "$black"
+const getAlignXStyle = (side, width) => ({
+  ['[data-side="'.concat(side, '"][data-align="start"] > &')]: {
+    left: "".concat(width * 2, "px")
+  },
+  ['[data-side="'.concat(side, '"][data-align="center"] > &')]: {
+    left: "calc(50% - ".concat(width / 2, "px)")
+  },
+  ['[data-side="'.concat(side, '"][data-align="end"] > &')]: {
+    left: "calc(100% - ".concat(width * 3, "px)")
+  }
+});
+const getAlignYStyle = (side, width, height) => ({
+  ['[data-side="'.concat(side, '"][data-align="start"] > &')]: {
+    bottom: "calc(100% - (".concat(height - width, "px))")
+  },
+  ['[data-side="'.concat(side, '"][data-align="center"] > &')]: {
+    bottom: "calc(50% - ".concat(height / 2, "px)")
+  },
+  ['[data-side="'.concat(side, '"][data-align="end"] > &')]: { bottom: "-".concat(width, "px") }
+});
+const getPlacement = (width, height) => {
+  const halfHeight = height / 2;
+  const halfWidth = width / 2;
+  return {
+    '[data-side="top"] > &': { bottom: "-".concat(height, "px") },
+    ...getAlignXStyle("top", width),
+    '[data-side="bottom"] > &': {
+      bottom: "100%",
+      transform: "rotate(180deg)"
+    },
+    ...getAlignXStyle("bottom", width),
+    '[data-side="right"] > &': {
+      left: "-".concat(halfHeight + halfWidth, "px"),
+      transform: "rotate(90deg)"
+    },
+    ...getAlignYStyle("right", width, height),
+    '[data-side="left"] > &': {
+      left: "calc(100% + ".concat(halfHeight - halfWidth, "px)"),
+      transform: "rotate(270deg)"
+    },
+    ...getAlignYStyle("left", width, height)
+  };
+};
+const StyledLine = styled(Primitive.span, {
+  width: "6px",
+  height: "50px",
+  position: "absolute",
+  rect: {
+    fill: "$black"
+  },
+  "svg #line": {
+    width: "44px",
+    height: "1px",
+    transform: "rotate(90 3.5 0)"
+  },
+  "svg #circle": {
+    width: "6px",
+    height: "6px",
+    rx: "3px",
+    transform: "rotate(90 6 44)"
+  }
 });
 const Line = React.forwardRef(
-  (props, forwardRef) => (
-    // We have to use RadixArrow with asChild here instead of styling it,
-    // otherwise it's not possible to pass children, it will use arrow svg.
-    // In this case asChild won't merge the nodes for some reason, so in the end we get 2 nodes:
-    // span with positioning from Radix and svg with styling.
-    /* @__PURE__ */ jsx(Arrow$1, { asChild: true, children: /* @__PURE__ */ jsxs(StyledLine, { ref: forwardRef, ...props, "aria-hidden": true, viewBox: "0 0 6 50", children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: LINE_WIDTH / 2 - 0.5,
-          y: "0",
-          width: "1",
-          height: LINE_HEIGHT - LINE_WIDTH
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: LINE_WIDTH / 2,
-          cy: LINE_HEIGHT - LINE_WIDTH / 2,
-          r: LINE_WIDTH / 2
-        }
-      )
-    ] }) })
-  )
+  (props, forwardRef) => {
+    const placement = getPlacement(6, 50);
+    return /* @__PURE__ */ jsx(
+      StyledLine,
+      {
+        ...props,
+        css: { ...placement },
+        ref: forwardRef,
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 6 50", children: [
+          /* @__PURE__ */ jsx("rect", { id: "line", x: "3.5", transform: "rotate(90 3.5 0)" }),
+          /* @__PURE__ */ jsx("rect", { id: "circle", x: "6", y: "44", transform: "rotate(90 6 44)" })
+        ] })
+      }
+    );
+  }
 );
 const StyledArrow = styled(Arrow$1, {
@@ -129,17 +175,19 @@ const Content = React.forwardRef(
     hideWhenDetached = false,
     ...restProps
   }, forwardRef) => {
+    const [line, setLine] = React.useState(null);
+    const lineSize = useSize(line);
     const { variant } = usePopoverContext();
     const anchorEl = React.useMemo(() => {
       switch (anchor) {
         case "arrow":
           return /* @__PURE__ */ jsx(Arrow, {});
         case "line":
-          return /* @__PURE__ */ jsx(Line, {});
+          return /* @__PURE__ */ jsx(Line, { ref: setLine });
         default:
           return null;
       }
-    }, [anchor]);
+    }, [anchor, setLine]);
     return /* @__PURE__ */ jsxs(
       StyledContent,
       {
@@ -149,7 +197,7 @@ const Content = React.forwardRef(
         avoidCollisions,
         collisionPadding,
         side,
-        sideOffset,
+        sideOffset: anchor === "line" ? lineSize == null ? void 0 : lineSize.height : sideOffset,
         ref: forwardRef,
         role: "dialog",
         "aria-modal": "true",

package/dist/module.js.map CHANGED Viewed

	@@ -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 $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 for some reason, so in the end we get 2 nodes:\n // span with positioning from Radix and svg with styling.\n <RadixArrow asChild>\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 </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-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 /\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 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\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> = ({ 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":"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"}
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 { 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 /\n The appearance of arrow.\n /\n variant?: StyledArrowProps['variant']\n}\n\nexport const Arrow = React.forwardRef<\n ElementRef<typeof StyledArrow>,\n ArrowProps\n>((props, forwardRef) => {\n const { variant } = usePopoverContext()\n return (\n <StyledArrow {...props} variant={variant} aria-hidden ref={forwardRef} />\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { 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 * @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 [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 /\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 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\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> = ({ 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":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-popover",
-  "version": "5.1.31",
+  "version": "5.1.32-combobox.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -28,10 +28,11 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
-    "@mirohq/design-system-icons": "^0.40.0",
+    "@radix-ui/react-use-size": "^1.0.1",
+    "@mirohq/design-system-icons": "^0.40.1-combobox.0",
     "@mirohq/design-system-stitches": "^2.6.4",
-    "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-styles": "^1.2.3"
+    "@mirohq/design-system-styles": "^1.2.4-combobox.0",
+    "@mirohq/design-system-primitive": "^1.1.2"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",