@mirohq/design-system-popover 4.3.22 → 4.3.23-dropdown.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.
Files changed (6) hide show
  1. package/dist/main.js +37 -154
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +38 -155
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +68 -47
  6. package/package.json +4 -9
package/dist/main.js CHANGED
@@ -8,7 +8,6 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
8
8
  var reactUseSize = require('@radix-ui/react-use-size');
9
9
  var designSystemStyles = require('@mirohq/design-system-styles');
10
10
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
11
- var reactComposeRefs = require('@radix-ui/react-compose-refs');
12
11
  var designSystemIcons = require('@mirohq/design-system-icons');
13
12
 
14
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,114 +35,10 @@ var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
36
35
 
37
36
  const StyledTrigger = designSystemStitches.styled(RadixPopover.Trigger);
38
37
 
39
- const ON_LEAVE_DURATION = 220;
40
- const ON_ENTER_DURATION = 200;
41
- const PopoverContext = React.createContext({});
42
- const PopoverProvider = ({
43
- open,
44
- onOpen,
45
- onClose,
46
- children,
47
- triggersOn,
48
- variant
49
- }) => {
50
- const [openState, setOpenState] = React.useState(open);
51
- const [pressed, setPressed] = React.useState(false);
52
- const [hoveredOut, setHoveredOut] = React.useState(false);
53
- const [hoveredIn, setHoveredIn] = React.useState(false);
54
- const [hoveredInFirstTime, setHoveredInFirstTime] = React.useState(false);
55
- const leaveTimer = React.useRef();
56
- const enterTimer = React.useRef();
57
- const closeBtnRef = React__default["default"].useRef(null);
58
- const handleLeave = () => {
59
- if (triggersOn === "press") {
60
- return;
61
- }
62
- clearTimeout(leaveTimer.current);
63
- clearTimeout(enterTimer.current);
64
- leaveTimer.current = setTimeout(() => {
65
- setOpenState(false);
66
- setHoveredOut(true);
67
- setHoveredIn(false);
68
- handleOnOpenCloseChange(false);
69
- }, ON_LEAVE_DURATION);
70
- };
71
- const handleEnter = () => {
72
- if (triggersOn === "press") {
73
- return;
74
- }
75
- if (!pressed) {
76
- clearTimeout(leaveTimer.current);
77
- clearTimeout(enterTimer.current);
78
- enterTimer.current = setTimeout(() => {
79
- setHoveredIn(true);
80
- setOpenState(true);
81
- handleOnOpenCloseChange(true);
82
- }, ON_ENTER_DURATION);
83
- }
84
- };
85
- const handleOpenChange = (newOpen) => {
86
- if (pressed && triggersOn === "hover") {
87
- return setPressed(false);
88
- }
89
- if (newOpen !== openState) {
90
- setOpenState(newOpen);
91
- handleOnOpenCloseChange(newOpen);
92
- clearTimeout(enterTimer.current);
93
- if (!newOpen && leaveTimer.current !== void 0) {
94
- clearTimeout(leaveTimer.current);
95
- leaveTimer.current = void 0;
96
- }
97
- }
98
- };
99
- const handleOnOpenCloseChange = (newOpen) => {
100
- if (!hoveredInFirstTime && newOpen) {
101
- setHoveredInFirstTime(true);
102
- onOpen == null ? void 0 : onOpen();
103
- }
104
- if (!newOpen) {
105
- if (triggersOn === "hover" && hoveredInFirstTime) {
106
- setHoveredInFirstTime(false);
107
- }
108
- onClose == null ? void 0 : onClose();
109
- }
110
- };
111
- return /* @__PURE__ */ React__default["default"].createElement(PopoverContext.Provider, {
112
- value: {
113
- openState,
114
- hoveredIn,
115
- hoveredOut,
116
- pressed,
117
- setOpenState,
118
- setHoveredOut,
119
- setPressed,
120
- handleEnter,
121
- handleLeave,
122
- handleOpenChange,
123
- closeBtnRef,
124
- variant
125
- }
126
- }, children);
127
- };
128
- const usePopoverContext = () => React.useContext(PopoverContext);
129
-
130
- const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
131
- const { handleEnter, handleLeave, setPressed } = usePopoverContext();
132
- return /* @__PURE__ */ React__default["default"].createElement(StyledTrigger, {
133
- ...restProps,
134
- onClick: (e) => {
135
- var _a;
136
- (_a = onPress != null ? onPress : onClick) == null ? void 0 : _a(e);
137
- if (e.pointerType === "keyboard") {
138
- return;
139
- }
140
- setPressed(true);
141
- },
142
- onMouseEnter: handleEnter,
143
- onMouseLeave: handleLeave,
144
- ref: forwardRef
145
- });
146
- });
38
+ const Trigger = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledTrigger, {
39
+ ...props,
40
+ ref: forwardRef
41
+ }));
147
42
 
148
43
  const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
149
44
  backgroundColor: "$black",
@@ -278,6 +173,17 @@ const StyledArrow = designSystemStitches.styled(RadixPopover.Arrow, {
278
173
  }
279
174
  });
280
175
 
176
+ const PopoverContext = React.createContext({});
177
+ const PopoverProvider = ({
178
+ children,
179
+ variant
180
+ }) => /* @__PURE__ */ React__default["default"].createElement(PopoverContext.Provider, {
181
+ value: {
182
+ variant
183
+ }
184
+ }, children);
185
+ const usePopoverContext = () => React.useContext(PopoverContext);
186
+
281
187
  const Arrow = React__default["default"].forwardRef((props, forwardRef) => {
282
188
  const { variant } = usePopoverContext();
283
189
  return /* @__PURE__ */ React__default["default"].createElement(StyledArrow, {
@@ -303,15 +209,7 @@ const Content = React__default["default"].forwardRef(
303
209
  }, forwardRef) => {
304
210
  const [line, setLine] = React__default["default"].useState(null);
305
211
  const lineSize = reactUseSize.useSize(line);
306
- const {
307
- handleLeave,
308
- handleEnter,
309
- hoveredIn,
310
- hoveredOut,
311
- setHoveredOut,
312
- closeBtnRef,
313
- variant
314
- } = usePopoverContext();
212
+ const { variant } = usePopoverContext();
315
213
  const anchorEl = React__default["default"].useMemo(() => {
316
214
  switch (anchor) {
317
215
  case "arrow":
@@ -333,27 +231,11 @@ const Content = React__default["default"].forwardRef(
333
231
  side,
334
232
  sideOffset: anchor === "line" ? lineSize == null ? void 0 : lineSize.height : 0,
335
233
  ref: forwardRef,
336
- onMouseEnter: handleEnter,
337
- onMouseLeave: handleLeave,
338
234
  role: "dialog",
339
235
  "aria-modal": "true",
340
236
  sticky,
341
237
  hideWhenDetached,
342
- variant,
343
- onCloseAutoFocus: (e) => {
344
- if (hoveredOut) {
345
- e.preventDefault();
346
- setHoveredOut(false);
347
- }
348
- },
349
- onOpenAutoFocus: (e) => {
350
- var _a;
351
- e.preventDefault();
352
- if (hoveredIn) {
353
- return;
354
- }
355
- (_a = closeBtnRef == null ? void 0 : closeBtnRef.current) == null ? void 0 : _a.focus();
356
- }
238
+ variant
357
239
  }, children, anchorEl);
358
240
  }
359
241
  );
@@ -393,11 +275,10 @@ const StyledClose = designSystemStitches.styled(RadixPopover.Close, {
393
275
  });
394
276
 
395
277
  const Close = React__default["default"].forwardRef((props, forwardRef) => {
396
- const { closeBtnRef, variant } = usePopoverContext();
397
- const composedTriggerRef = reactComposeRefs.useComposedRefs(forwardRef, closeBtnRef);
278
+ const { variant } = usePopoverContext();
398
279
  return /* @__PURE__ */ React__default["default"].createElement(StyledClose, {
399
280
  ...props,
400
- ref: composedTriggerRef,
281
+ ref: forwardRef,
401
282
  "data-testid": "close-icon",
402
283
  variant
403
284
  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCross, {
@@ -409,30 +290,32 @@ const Portal = (props) => /* @__PURE__ */ React__default["default"].createElemen
409
290
  ...props
410
291
  });
411
292
 
412
- const Root = ({ onOpen, onClose, ...restProps }) => {
413
- const { openState, handleOpenChange } = usePopoverContext();
414
- return /* @__PURE__ */ React__default["default"].createElement(RadixPopover__namespace.Root, {
415
- ...restProps,
416
- open: openState,
417
- onOpenChange: (newOpen) => handleOpenChange(newOpen),
418
- modal: false
419
- });
420
- };
293
+ const Root = ({ onOpen, onClose, ...restProps }) => /* @__PURE__ */ React__default["default"].createElement(RadixPopover__namespace.Root, {
294
+ ...restProps,
295
+ onOpenChange: (value) => {
296
+ if (value) {
297
+ onOpen == null ? void 0 : onOpen();
298
+ } else {
299
+ onClose == null ? void 0 : onClose();
300
+ }
301
+ },
302
+ modal: false
303
+ });
421
304
  const Popover = ({
422
- open = false,
305
+ open,
306
+ defaultOpen = false,
423
307
  onOpen,
424
308
  onClose,
425
- triggersOn = "press",
426
309
  variant = "dark",
427
310
  ...restProps
428
311
  }) => /* @__PURE__ */ React__default["default"].createElement(PopoverProvider, {
429
- open,
430
- onOpen,
431
- onClose,
432
- triggersOn,
433
312
  variant
434
313
  }, /* @__PURE__ */ React__default["default"].createElement(Root, {
435
- ...restProps
314
+ ...restProps,
315
+ open,
316
+ defaultOpen,
317
+ onOpen,
318
+ onClose
436
319
  }));
437
320
  Popover.Trigger = Trigger;
438
321
  Popover.Content = Content;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/partials/trigger.styled.tsx","../src/use-popover-context.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/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, { createContext, useState, useRef, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { Variant, TriggersOn } from './types'\n\ninterface PopoverValues {\n open: boolean\n onOpen?: () => void\n onClose?: () => void\n triggersOn: TriggersOn\n variant?: Variant\n}\n\ninterface PopoverContextProps {\n openState: boolean\n pressed: boolean\n hoveredOut: boolean\n hoveredIn: boolean\n setOpenState: (open: boolean) => void\n setPressed: (pressed: boolean) => void\n handleEnter: () => void\n handleLeave: () => void\n handleOpenChange: (open: boolean) => void\n setHoveredOut: (hoveredOut: boolean) => void\n closeBtnRef: React.RefObject<HTMLButtonElement>\n variant?: Variant\n}\n\nconst ON_LEAVE_DURATION = 220\nconst ON_ENTER_DURATION = 200\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 open,\n onOpen,\n onClose,\n children,\n triggersOn,\n variant,\n}: PropsWithChildren<PopoverValues>): any => {\n const [openState, setOpenState] = useState(open)\n const [pressed, setPressed] = useState(false)\n const [hoveredOut, setHoveredOut] = useState(false)\n const [hoveredIn, setHoveredIn] = useState(false)\n const [hoveredInFirstTime, setHoveredInFirstTime] = useState(false)\n\n const leaveTimer = useRef<ReturnType<typeof setTimeout>>()\n const enterTimer = useRef<ReturnType<typeof setTimeout>>()\n const closeBtnRef = React.useRef<HTMLButtonElement>(null)\n\n const handleLeave = (): void => {\n if (triggersOn === 'press') {\n return\n }\n\n clearTimeout(leaveTimer.current)\n clearTimeout(enterTimer.current)\n\n leaveTimer.current = setTimeout(() => {\n setOpenState(false)\n setHoveredOut(true)\n setHoveredIn(false)\n handleOnOpenCloseChange(false)\n }, ON_LEAVE_DURATION)\n }\n\n const handleEnter = (): void => {\n if (triggersOn === 'press') {\n return\n }\n\n if (!pressed) {\n clearTimeout(leaveTimer.current)\n clearTimeout(enterTimer.current)\n\n enterTimer.current = setTimeout(() => {\n setHoveredIn(true)\n setOpenState(true)\n handleOnOpenCloseChange(true)\n }, ON_ENTER_DURATION)\n }\n }\n\n const handleOpenChange = (newOpen: boolean): void => {\n if (pressed && triggersOn === 'hover') {\n return setPressed(false)\n }\n\n if (newOpen !== openState) {\n setOpenState(newOpen)\n handleOnOpenCloseChange(newOpen)\n\n clearTimeout(enterTimer.current)\n\n if (!newOpen && leaveTimer.current !== undefined) {\n clearTimeout(leaveTimer.current)\n leaveTimer.current = undefined\n }\n }\n }\n\n const handleOnOpenCloseChange = (newOpen: boolean): void => {\n if (!hoveredInFirstTime && newOpen) {\n setHoveredInFirstTime(true)\n onOpen?.()\n }\n\n if (!newOpen) {\n if (triggersOn === 'hover' && hoveredInFirstTime) {\n setHoveredInFirstTime(false)\n }\n onClose?.()\n }\n }\n\n return (\n <PopoverContext.Provider\n value={{\n openState,\n hoveredIn,\n hoveredOut,\n pressed,\n setOpenState,\n setHoveredOut,\n setPressed,\n handleEnter,\n handleLeave,\n handleOpenChange,\n closeBtnRef,\n variant,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\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, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport { usePopoverContext } from '../use-popover-context'\nimport type { StyledTriggerProps } from './trigger.styled'\n\nexport interface TriggerProps extends StyledTriggerProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n}\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>(({ onPress, onClick, ...restProps }, forwardRef) => {\n const { handleEnter, handleLeave, setPressed } = usePopoverContext()\n\n return (\n <StyledTrigger\n {...restProps}\n onClick={e => {\n ;(onPress ?? onClick)?.(e)\n\n // @ts-expect-error\n if (e.pointerType === 'keyboard') {\n return\n }\n\n setPressed(true)\n }}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n ref={forwardRef}\n />\n )\n})\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: 'rgba(66, 98, 255, 1)',\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 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 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/**\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 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 {\n handleLeave,\n handleEnter,\n hoveredIn,\n hoveredOut,\n setHoveredOut,\n closeBtnRef,\n variant,\n } = 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 : 0}\n ref={forwardRef}\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n role='dialog'\n aria-modal='true'\n sticky={sticky}\n hideWhenDetached={hideWhenDetached}\n variant={variant}\n onCloseAutoFocus={(e: Event) => {\n if (hoveredOut) {\n e.preventDefault()\n setHoveredOut(false)\n }\n }}\n onOpenAutoFocus={(e: Event) => {\n e.preventDefault()\n\n if (hoveredIn) {\n return\n }\n closeBtnRef?.current?.focus()\n }}\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 { useComposedRefs } from '@radix-ui/react-compose-refs'\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 { closeBtnRef, variant } = usePopoverContext()\n const composedTriggerRef = useComposedRefs(forwardRef, closeBtnRef)\n\n return (\n <StyledClose\n {...props}\n ref={composedTriggerRef}\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, usePopoverContext } from './use-popover-context'\nimport type { Variant, TriggersOn } from './types'\n\nexport interface PopoverProps {\n /**\n * The current controlled state of the popover.\n */\n open?: 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 * The event that will trigger the popover to open.\n */\n triggersOn?: TriggersOn\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 const { openState, handleOpenChange } = usePopoverContext()\n return (\n <RadixPopover.Root\n {...restProps}\n open={openState}\n onOpenChange={newOpen => handleOpenChange(newOpen)}\n modal={false}\n />\n )\n}\n\nexport const Popover: React.FC<PopoverProps> & Partials = ({\n open = false,\n onOpen,\n onClose,\n triggersOn = 'press',\n variant = 'dark',\n ...restProps\n}) => (\n <PopoverProvider\n open={open}\n onOpen={onOpen}\n onClose={onClose}\n triggersOn={triggersOn}\n variant={variant}\n >\n <Root {...restProps} />\n </PopoverProvider>\n)\n\n// Partials\n// -----------------------------------------------------------------------------\ninterface 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","createContext","useState","useRef","React","useContext","RadixContent","animations","Primitive","RadixArrow","useSize","RadixClose","useComposedRefs","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: 'rgba(66, 98, 255, 1)',\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 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 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 : 0}\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// -----------------------------------------------------------------------------\ninterface 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","RadixContent","animations","Primitive","RadixArrow","createContext","useContext","useSize","RadixClose","IconCross","RadixPortal","RadixPopover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,aAAA,GAAgBA,4BAAOC,oBAAY,CAAA;;ACOzC,MAAM,UAAUC,yBAAM,CAAA,UAAA,CAG3B,CAAC,KAAA,EAAO,+BAAgBA,yBAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,EAAe,GAAG,KAAA;AAAA,EAAO,GAAK,EAAA,UAAA;AAAA,CAAY,CAAE,CAAA;;ACTzD,MAAA,aAAA,GAAgBF,4BAAOG,oBAAc,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,eAAeC,6BAAW,CAAA,MAAA;AAAA,KAC5B;AAAA,IACA,wBAA0B,EAAA;AAAA,MACxB,eAAeA,6BAAW,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,eAAe,IAAmC,CAAA,0BAAA,CAAA,GAAA;AAAA,IACjD,IAAA,EAAM,GAAG,KAAQ,GAAA,CAAA,CAAA,EAAA,CAAA;AAAA,GACnB;AAAA,EACA,CAAC,eAAe,IAAoC,CAAA,2BAAA,CAAA,GAAA;AAAA,IAClD,IAAA,EAAM,cAAc,KAAQ,GAAA,CAAA,CAAA,GAAA,CAAA;AAAA,GAC9B;AAAA,EACA,CAAC,eAAe,IAAiC,CAAA,wBAAA,CAAA,GAAA;AAAA,IAC/C,IAAA,EAAM,eAAe,KAAQ,GAAA,CAAA,CAAA,GAAA,CAAA;AAAA,GAC/B;AACF,CAAA,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA,CACrB,IACA,EAAA,KAAA,EACA,MACgB,MAAA;AAAA,EAChB,CAAC,eAAe,IAAmC,CAAA,0BAAA,CAAA,GAAA;AAAA,IACjD,MAAA,EAAQ,gBAAgB,MAAS,GAAA,KAAA,CAAA,IAAA,CAAA;AAAA,GACnC;AAAA,EACA,CAAC,eAAe,IAAoC,CAAA,2BAAA,CAAA,GAAA;AAAA,IAClD,MAAA,EAAQ,cAAc,MAAS,GAAA,CAAA,CAAA,GAAA,CAAA;AAAA,GACjC;AAAA,EACA,CAAC,CAAe,YAAA,EAAA,IAAA,CAAA,wBAAA,CAAA,GAAiC,EAAE,MAAA,EAAQ,IAAI,KAAU,CAAA,EAAA,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,CAAA,CAAA,EAAI,MAAW,CAAA,EAAA,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,IAAI,UAAa,GAAA,SAAA,CAAA,EAAA,CAAA;AAAA,MACvB,SAAW,EAAA,eAAA;AAAA,KACb;AAAA,IACA,GAAG,cAAA,CAAe,OAAS,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,IACxC,wBAA0B,EAAA;AAAA,MACxB,IAAA,EAAM,eAAe,UAAa,GAAA,SAAA,CAAA,GAAA,CAAA;AAAA,MAClC,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,GAAaJ,2BAAO,CAAAK,+BAAA,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,sBAAA;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,OAAOH,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,KAAA;AACrB,IAAM,MAAA,SAAA,GAAY,YAAa,CAAA,CAAA,EAAG,EAAE,CAAA,CAAA;AACpC,IAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,EAAE,GAAG,SAAU,EAAA;AAAA,MACpB,GAAK,EAAA,UAAA;AAAA,MACL,aAAW,EAAA,IAAA;AAAA,KAAA,kBAEVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,OAAQ,EAAA,UAAA;AAAA,KAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MAAK,EAAG,EAAA,MAAA;AAAA,MAAO,CAAE,EAAA,KAAA;AAAA,MAAM,SAAU,EAAA,kBAAA;AAAA,KAAmB,mBACpDA,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MAAK,EAAG,EAAA,QAAA;AAAA,MAAS,CAAE,EAAA,GAAA;AAAA,MAAI,CAAE,EAAA,IAAA;AAAA,MAAK,SAAU,EAAA,iBAAA;AAAA,KAAkB,CAC7D,CACF,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;;ACrBa,MAAA,WAAA,GAAcF,4BAAOM,kBAAY,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,GAAiBC,mBAAmC,CAAA,EAAS,CAAA,CAAA;AAM5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,OAAA;AACF,CACE,qBAAAL,yBAAA,CAAA,aAAA,CAAC,eAAe,QAAf,EAAA;AAAA,EACC,KAAO,EAAA;AAAA,IACL,OAAA;AAAA,GACF;AAAA,CAAA,EAEC,QACH,CAAA,CAAA;AAMW,MAAA,iBAAA,GAAoB,MAC/BM,gBAAA,CAAW,cAAc,CAAA;;AC3BpB,MAAM,KAAQ,GAAAN,yBAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AACtC,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAa,GAAG,KAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,aAAW,EAAA,IAAA;AAAA,IAAC,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA,CAAA;AAE3E,CAAC,CAAA;;AC2GM,MAAM,UAAUA,yBAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,KAAQ,GAAA,QAAA;AAAA,IACR,WAAc,GAAA,CAAA;AAAA,IACd,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,IAChB,GAAA,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,yBAAA,CAAM,SAA6B,IAAI,CAAA,CAAA;AAC/D,IAAM,MAAA,QAAA,GAAWO,qBAAQ,IAAI,CAAA,CAAA;AAC7B,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,IAAM,MAAA,QAAA,GAAWP,yBAAM,CAAA,OAAA,CAAQ,MAAM;AACnC,MAAA,QAAQ,MAAQ;AAAA,QACd,KAAK,OAAA;AACH,UAAA,+DAAQ,KAAM,EAAA,IAAA,CAAA,CAAA;AAAA,QAChB,KAAK,MAAA;AACH,UAAA,uBAAQA,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,YAAK,GAAK,EAAA,OAAA;AAAA,WAAS,CAAA,CAAA;AAAA,QAC7B;AACE,UAAO,OAAA,IAAA,CAAA;AAAA,OACX;AAAA,KACC,EAAA,CAAC,MAAQ,EAAA,OAAO,CAAC,CAAA,CAAA;AAEpB,IAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAY,EAAA,MAAA,KAAW,MAAS,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,MAAS,GAAA,CAAA;AAAA,MACnD,GAAK,EAAA,UAAA;AAAA,MACL,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,MAAA;AAAA,MACX,MAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,KAAA,EAEC,UACA,QACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;;AC/Ka,MAAA,WAAA,GAAcF,4BAAOU,kBAAY,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,GAAAR,yBAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,UAAA;AAAA,IACL,aAAY,EAAA,YAAA;AAAA,IACZ,OAAA;AAAA,GAAA,kBAECA,yBAAA,CAAA,aAAA,CAAAS,2BAAA,EAAA;AAAA,IAAU,IAAK,EAAA,OAAA;AAAA,GAAQ,CAC1B,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACRY,MAAA,MAAA,GAAgC,2BAAUT,yBAAA,CAAA,aAAA,CAAAU,mBAAA,EAAA;AAAA,EAAa,GAAG,KAAA;AAAA,CAAO,CAAA;;AC6B9E,MAAM,IAAA,GAA+B,CAAC,EAAE,MAAA,EAAQ,YAAY,SAAU,EAAA,qBACnEV,yBAAA,CAAA,aAAA,CAAAW,uBAAA,CAAa,IAAb,EAAA;AAAA,EACE,GAAG,SAAA;AAAA,EACJ,cAAc,CAAS,KAAA,KAAA;AACrB,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA,CAAA;AAAA,KACK,MAAA;AACL,MAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,KACF;AAAA,GACF;AAAA,EACA,KAAO,EAAA,KAAA;AAAA,CACT,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,EACP,GAAA,SAAA;AACL,CAAA,qBACGX,yBAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,EAAgB,OAAA;AAAA,CAAA,kBACdA,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,EACE,GAAG,SAAA;AAAA,EACJ,IAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,CACF,CACF,EAAA;AAYF,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;;;;;;;;;"}
package/dist/module.js CHANGED
@@ -1,123 +1,18 @@
1
- import React, { createContext, useContext, useState, useRef } from 'react';
1
+ import React, { createContext, useContext } from 'react';
2
2
  import * as RadixPopover from '@radix-ui/react-popover';
3
3
  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';
4
4
  import { styled } from '@mirohq/design-system-stitches';
5
5
  import { useSize } from '@radix-ui/react-use-size';
6
6
  import { animations } from '@mirohq/design-system-styles';
7
7
  import { Primitive } from '@mirohq/design-system-primitive';
8
- import { useComposedRefs } from '@radix-ui/react-compose-refs';
9
8
  import { IconCross } from '@mirohq/design-system-icons';
10
9
 
11
10
  const StyledTrigger = styled(Trigger$1);
12
11
 
13
- const ON_LEAVE_DURATION = 220;
14
- const ON_ENTER_DURATION = 200;
15
- const PopoverContext = createContext({});
16
- const PopoverProvider = ({
17
- open,
18
- onOpen,
19
- onClose,
20
- children,
21
- triggersOn,
22
- variant
23
- }) => {
24
- const [openState, setOpenState] = useState(open);
25
- const [pressed, setPressed] = useState(false);
26
- const [hoveredOut, setHoveredOut] = useState(false);
27
- const [hoveredIn, setHoveredIn] = useState(false);
28
- const [hoveredInFirstTime, setHoveredInFirstTime] = useState(false);
29
- const leaveTimer = useRef();
30
- const enterTimer = useRef();
31
- const closeBtnRef = React.useRef(null);
32
- const handleLeave = () => {
33
- if (triggersOn === "press") {
34
- return;
35
- }
36
- clearTimeout(leaveTimer.current);
37
- clearTimeout(enterTimer.current);
38
- leaveTimer.current = setTimeout(() => {
39
- setOpenState(false);
40
- setHoveredOut(true);
41
- setHoveredIn(false);
42
- handleOnOpenCloseChange(false);
43
- }, ON_LEAVE_DURATION);
44
- };
45
- const handleEnter = () => {
46
- if (triggersOn === "press") {
47
- return;
48
- }
49
- if (!pressed) {
50
- clearTimeout(leaveTimer.current);
51
- clearTimeout(enterTimer.current);
52
- enterTimer.current = setTimeout(() => {
53
- setHoveredIn(true);
54
- setOpenState(true);
55
- handleOnOpenCloseChange(true);
56
- }, ON_ENTER_DURATION);
57
- }
58
- };
59
- const handleOpenChange = (newOpen) => {
60
- if (pressed && triggersOn === "hover") {
61
- return setPressed(false);
62
- }
63
- if (newOpen !== openState) {
64
- setOpenState(newOpen);
65
- handleOnOpenCloseChange(newOpen);
66
- clearTimeout(enterTimer.current);
67
- if (!newOpen && leaveTimer.current !== void 0) {
68
- clearTimeout(leaveTimer.current);
69
- leaveTimer.current = void 0;
70
- }
71
- }
72
- };
73
- const handleOnOpenCloseChange = (newOpen) => {
74
- if (!hoveredInFirstTime && newOpen) {
75
- setHoveredInFirstTime(true);
76
- onOpen == null ? void 0 : onOpen();
77
- }
78
- if (!newOpen) {
79
- if (triggersOn === "hover" && hoveredInFirstTime) {
80
- setHoveredInFirstTime(false);
81
- }
82
- onClose == null ? void 0 : onClose();
83
- }
84
- };
85
- return /* @__PURE__ */ React.createElement(PopoverContext.Provider, {
86
- value: {
87
- openState,
88
- hoveredIn,
89
- hoveredOut,
90
- pressed,
91
- setOpenState,
92
- setHoveredOut,
93
- setPressed,
94
- handleEnter,
95
- handleLeave,
96
- handleOpenChange,
97
- closeBtnRef,
98
- variant
99
- }
100
- }, children);
101
- };
102
- const usePopoverContext = () => useContext(PopoverContext);
103
-
104
- const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
105
- const { handleEnter, handleLeave, setPressed } = usePopoverContext();
106
- return /* @__PURE__ */ React.createElement(StyledTrigger, {
107
- ...restProps,
108
- onClick: (e) => {
109
- var _a;
110
- (_a = onPress != null ? onPress : onClick) == null ? void 0 : _a(e);
111
- if (e.pointerType === "keyboard") {
112
- return;
113
- }
114
- setPressed(true);
115
- },
116
- onMouseEnter: handleEnter,
117
- onMouseLeave: handleLeave,
118
- ref: forwardRef
119
- });
120
- });
12
+ const Trigger = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.createElement(StyledTrigger, {
13
+ ...props,
14
+ ref: forwardRef
15
+ }));
121
16
 
122
17
  const StyledContent = styled(Content$1, {
123
18
  backgroundColor: "$black",
@@ -252,6 +147,17 @@ const StyledArrow = styled(Arrow$1, {
252
147
  }
253
148
  });
254
149
 
150
+ const PopoverContext = createContext({});
151
+ const PopoverProvider = ({
152
+ children,
153
+ variant
154
+ }) => /* @__PURE__ */ React.createElement(PopoverContext.Provider, {
155
+ value: {
156
+ variant
157
+ }
158
+ }, children);
159
+ const usePopoverContext = () => useContext(PopoverContext);
160
+
255
161
  const Arrow = React.forwardRef((props, forwardRef) => {
256
162
  const { variant } = usePopoverContext();
257
163
  return /* @__PURE__ */ React.createElement(StyledArrow, {
@@ -277,15 +183,7 @@ const Content = React.forwardRef(
277
183
  }, forwardRef) => {
278
184
  const [line, setLine] = React.useState(null);
279
185
  const lineSize = useSize(line);
280
- const {
281
- handleLeave,
282
- handleEnter,
283
- hoveredIn,
284
- hoveredOut,
285
- setHoveredOut,
286
- closeBtnRef,
287
- variant
288
- } = usePopoverContext();
186
+ const { variant } = usePopoverContext();
289
187
  const anchorEl = React.useMemo(() => {
290
188
  switch (anchor) {
291
189
  case "arrow":
@@ -307,27 +205,11 @@ const Content = React.forwardRef(
307
205
  side,
308
206
  sideOffset: anchor === "line" ? lineSize == null ? void 0 : lineSize.height : 0,
309
207
  ref: forwardRef,
310
- onMouseEnter: handleEnter,
311
- onMouseLeave: handleLeave,
312
208
  role: "dialog",
313
209
  "aria-modal": "true",
314
210
  sticky,
315
211
  hideWhenDetached,
316
- variant,
317
- onCloseAutoFocus: (e) => {
318
- if (hoveredOut) {
319
- e.preventDefault();
320
- setHoveredOut(false);
321
- }
322
- },
323
- onOpenAutoFocus: (e) => {
324
- var _a;
325
- e.preventDefault();
326
- if (hoveredIn) {
327
- return;
328
- }
329
- (_a = closeBtnRef == null ? void 0 : closeBtnRef.current) == null ? void 0 : _a.focus();
330
- }
212
+ variant
331
213
  }, children, anchorEl);
332
214
  }
333
215
  );
@@ -367,11 +249,10 @@ const StyledClose = styled(Close$1, {
367
249
  });
368
250
 
369
251
  const Close = React.forwardRef((props, forwardRef) => {
370
- const { closeBtnRef, variant } = usePopoverContext();
371
- const composedTriggerRef = useComposedRefs(forwardRef, closeBtnRef);
252
+ const { variant } = usePopoverContext();
372
253
  return /* @__PURE__ */ React.createElement(StyledClose, {
373
254
  ...props,
374
- ref: composedTriggerRef,
255
+ ref: forwardRef,
375
256
  "data-testid": "close-icon",
376
257
  variant
377
258
  }, /* @__PURE__ */ React.createElement(IconCross, {
@@ -383,30 +264,32 @@ const Portal = (props) => /* @__PURE__ */ React.createElement(Portal$1, {
383
264
  ...props
384
265
  });
385
266
 
386
- const Root = ({ onOpen, onClose, ...restProps }) => {
387
- const { openState, handleOpenChange } = usePopoverContext();
388
- return /* @__PURE__ */ React.createElement(RadixPopover.Root, {
389
- ...restProps,
390
- open: openState,
391
- onOpenChange: (newOpen) => handleOpenChange(newOpen),
392
- modal: false
393
- });
394
- };
267
+ const Root = ({ onOpen, onClose, ...restProps }) => /* @__PURE__ */ React.createElement(RadixPopover.Root, {
268
+ ...restProps,
269
+ onOpenChange: (value) => {
270
+ if (value) {
271
+ onOpen == null ? void 0 : onOpen();
272
+ } else {
273
+ onClose == null ? void 0 : onClose();
274
+ }
275
+ },
276
+ modal: false
277
+ });
395
278
  const Popover = ({
396
- open = false,
279
+ open,
280
+ defaultOpen = false,
397
281
  onOpen,
398
282
  onClose,
399
- triggersOn = "press",
400
283
  variant = "dark",
401
284
  ...restProps
402
285
  }) => /* @__PURE__ */ React.createElement(PopoverProvider, {
403
- open,
404
- onOpen,
405
- onClose,
406
- triggersOn,
407
286
  variant
408
287
  }, /* @__PURE__ */ React.createElement(Root, {
409
- ...restProps
288
+ ...restProps,
289
+ open,
290
+ defaultOpen,
291
+ onOpen,
292
+ onClose
410
293
  }));
411
294
  Popover.Trigger = Trigger;
412
295
  Popover.Content = Content;