@mirohq/design-system-popover 4.3.23-dropdown.0 → 4.3.23-dropdown.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js 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":"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"}
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;
@@ -1 +1 @@
1
- {"version":3,"file":"module.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":["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',\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":["RadixTrigger","RadixContent","RadixArrow","RadixClose","RadixPortal"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { DOMAttributes } from 'react';
2
+ import react__default from 'react';
3
3
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
4
4
  import { StrictComponentProps } from '@mirohq/design-system-stitches';
5
5
  import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
@@ -80,7 +80,6 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
80
80
  readonly 'background-danger-prominent-active'?: any;
81
81
  readonly 'background-danger-prominent-hover'?: any;
82
82
  readonly 'background-neutrals'?: any;
83
- readonly 'background-neutrals-body'?: any;
84
83
  readonly 'background-neutrals-container'?: any;
85
84
  readonly 'background-neutrals-controls-disabled'?: any;
86
85
  readonly 'background-neutrals-disabled'?: any;
@@ -88,6 +87,8 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
88
87
  readonly 'background-neutrals-inactive-hover'?: any;
89
88
  readonly 'background-neutrals-inverted'?: any;
90
89
  readonly 'background-neutrals-inverted-subtle'?: any;
90
+ readonly 'background-neutrals-page'?: any;
91
+ readonly 'background-neutrals-page-subtle'?: any;
91
92
  readonly 'background-neutrals-scrolls'?: any;
92
93
  readonly 'background-neutrals-scrolls-hover'?: any;
93
94
  readonly 'background-neutrals-subtle'?: any;
@@ -111,12 +112,11 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
111
112
  readonly 'text-neutrals'?: any;
112
113
  readonly 'text-neutrals-disabled'?: any;
113
114
  readonly 'text-neutrals-inverted'?: any;
114
- readonly 'text-neutrals-link'?: any;
115
- readonly 'text-neutrals-link-active'?: any;
116
- readonly 'text-neutrals-link-hover'?: any;
117
115
  readonly 'text-neutrals-placeholder'?: any;
118
116
  readonly 'text-neutrals-placeholder-only'?: any;
119
117
  readonly 'text-neutrals-subtle'?: any;
118
+ readonly 'text-neutrals-subtle-active'?: any;
119
+ readonly 'text-neutrals-subtle-hover'?: any;
120
120
  readonly 'text-primary'?: any;
121
121
  readonly 'text-primary-active'?: any;
122
122
  readonly 'text-primary-hover'?: any;
@@ -136,7 +136,7 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
136
136
  readonly 'icon-neutrals-inverted'?: any;
137
137
  readonly 'icon-neutrals-search'?: any;
138
138
  readonly 'icon-neutrals-subtle'?: any;
139
- readonly 'icon-neutrals-with-text'?: any;
139
+ readonly 'icon-neutrals-text'?: any;
140
140
  readonly 'icon-primary'?: any;
141
141
  readonly 'icon-primary-active'?: any;
142
142
  readonly 'icon-primary-hover'?: any;
@@ -145,7 +145,10 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
145
145
  readonly 'icon-success'?: any;
146
146
  readonly 'icon-success-inverted'?: any;
147
147
  readonly 'icon-warning'?: any;
148
+ readonly 'icon-warning-prominent'?: any;
148
149
  readonly 'border-danger'?: any;
150
+ readonly 'border-danger-active'?: any;
151
+ readonly 'border-danger-hover'?: any;
149
152
  readonly 'border-focus-inner'?: any;
150
153
  readonly 'border-focus-middle'?: any;
151
154
  readonly 'border-focus-outer'?: any;
@@ -157,6 +160,9 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
157
160
  readonly 'border-neutrals-hover'?: any;
158
161
  readonly 'border-neutrals-inverted'?: any;
159
162
  readonly 'border-neutrals-subtle'?: any;
163
+ readonly 'border-neutrals-text-subtle'?: any;
164
+ readonly 'border-neutrals-text-subtle-active'?: any;
165
+ readonly 'border-neutrals-text-subtle-hover'?: any;
160
166
  readonly 'border-primary'?: any;
161
167
  readonly 'border-primary-active'?: any;
162
168
  readonly 'border-primary-hover'?: any;
@@ -452,15 +458,11 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Pick<Omit<{}, never
452
458
  declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
453
459
 
454
460
  interface TriggerProps extends StyledTriggerProps {
455
- /**
456
- * temporary the same as onClick, later will be added touch events support
457
- */
458
- onPress?: DOMAttributes<HTMLElement>['onClick'];
459
461
  }
460
462
  /**
461
463
  * The trigger component is used to render the trigger element for the popover.
462
464
  */
463
- declare const Trigger: react__default.ForwardRefExoticComponent<Pick<TriggerProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "children" | "form" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onPress"> & react__default.RefAttributes<HTMLButtonElement>>;
465
+ declare const Trigger: react__default.ForwardRefExoticComponent<Pick<TriggerProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "children" | "form" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & react__default.RefAttributes<HTMLButtonElement>>;
464
466
 
465
467
  declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
466
468
  variant?: "dark" | "light" | undefined;
@@ -539,7 +541,6 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
539
541
  readonly 'background-danger-prominent-active'?: any;
540
542
  readonly 'background-danger-prominent-hover'?: any;
541
543
  readonly 'background-neutrals'?: any;
542
- readonly 'background-neutrals-body'?: any;
543
544
  readonly 'background-neutrals-container'?: any;
544
545
  readonly 'background-neutrals-controls-disabled'?: any;
545
546
  readonly 'background-neutrals-disabled'?: any;
@@ -547,6 +548,8 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
547
548
  readonly 'background-neutrals-inactive-hover'?: any;
548
549
  readonly 'background-neutrals-inverted'?: any;
549
550
  readonly 'background-neutrals-inverted-subtle'?: any;
551
+ readonly 'background-neutrals-page'?: any;
552
+ readonly 'background-neutrals-page-subtle'?: any;
550
553
  readonly 'background-neutrals-scrolls'?: any;
551
554
  readonly 'background-neutrals-scrolls-hover'?: any;
552
555
  readonly 'background-neutrals-subtle'?: any;
@@ -570,12 +573,11 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
570
573
  readonly 'text-neutrals'?: any;
571
574
  readonly 'text-neutrals-disabled'?: any;
572
575
  readonly 'text-neutrals-inverted'?: any;
573
- readonly 'text-neutrals-link'?: any;
574
- readonly 'text-neutrals-link-active'?: any;
575
- readonly 'text-neutrals-link-hover'?: any;
576
576
  readonly 'text-neutrals-placeholder'?: any;
577
577
  readonly 'text-neutrals-placeholder-only'?: any;
578
578
  readonly 'text-neutrals-subtle'?: any;
579
+ readonly 'text-neutrals-subtle-active'?: any;
580
+ readonly 'text-neutrals-subtle-hover'?: any;
579
581
  readonly 'text-primary'?: any;
580
582
  readonly 'text-primary-active'?: any;
581
583
  readonly 'text-primary-hover'?: any;
@@ -595,7 +597,7 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
595
597
  readonly 'icon-neutrals-inverted'?: any;
596
598
  readonly 'icon-neutrals-search'?: any;
597
599
  readonly 'icon-neutrals-subtle'?: any;
598
- readonly 'icon-neutrals-with-text'?: any;
600
+ readonly 'icon-neutrals-text'?: any;
599
601
  readonly 'icon-primary'?: any;
600
602
  readonly 'icon-primary-active'?: any;
601
603
  readonly 'icon-primary-hover'?: any;
@@ -604,7 +606,10 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
604
606
  readonly 'icon-success'?: any;
605
607
  readonly 'icon-success-inverted'?: any;
606
608
  readonly 'icon-warning'?: any;
609
+ readonly 'icon-warning-prominent'?: any;
607
610
  readonly 'border-danger'?: any;
611
+ readonly 'border-danger-active'?: any;
612
+ readonly 'border-danger-hover'?: any;
608
613
  readonly 'border-focus-inner'?: any;
609
614
  readonly 'border-focus-middle'?: any;
610
615
  readonly 'border-focus-outer'?: any;
@@ -616,6 +621,9 @@ declare const StyledContent: react.ForwardRefExoticComponent<Pick<Omit<{
616
621
  readonly 'border-neutrals-hover'?: any;
617
622
  readonly 'border-neutrals-inverted'?: any;
618
623
  readonly 'border-neutrals-subtle'?: any;
624
+ readonly 'border-neutrals-text-subtle'?: any;
625
+ readonly 'border-neutrals-text-subtle-active'?: any;
626
+ readonly 'border-neutrals-text-subtle-hover'?: any;
619
627
  readonly 'border-primary'?: any;
620
628
  readonly 'border-primary-active'?: any;
621
629
  readonly 'border-primary-hover'?: any;
@@ -915,7 +923,6 @@ declare type StyledContentProps = StrictComponentProps<typeof StyledContent>;
915
923
  declare type AnchorType = 'line' | 'arrow' | 'none';
916
924
  declare type Side = 'top' | 'right' | 'bottom' | 'left';
917
925
  declare type Align = 'start' | 'center' | 'end';
918
- declare type TriggersOn = 'press' | 'hover';
919
926
  declare type Variant = 'light' | 'dark';
920
927
  declare type PointerDownOutsideEvent = CustomEvent<{
921
928
  originalEvent: PointerEvent;
@@ -927,7 +934,6 @@ declare type FocusOutsideEvent = CustomEvent<{
927
934
  type types_AnchorType = AnchorType;
928
935
  type types_Side = Side;
929
936
  type types_Align = Align;
930
- type types_TriggersOn = TriggersOn;
931
937
  type types_Variant = Variant;
932
938
  type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
933
939
  type types_FocusOutsideEvent = FocusOutsideEvent;
@@ -936,7 +942,6 @@ declare namespace types {
936
942
  types_AnchorType as AnchorType,
937
943
  types_Side as Side,
938
944
  types_Align as Align,
939
- types_TriggersOn as TriggersOn,
940
945
  types_Variant as Variant,
941
946
  types_PointerDownOutsideEvent as PointerDownOutsideEvent,
942
947
  types_FocusOutsideEvent as FocusOutsideEvent,
@@ -1017,11 +1022,21 @@ interface ContentProps extends StyledContentProps {
1017
1022
  * event.preventDefault.
1018
1023
  */
1019
1024
  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
1025
+ /**
1026
+ * Event handler called when focus moves into the component after opening.
1027
+ * It can be prevented by calling event.preventDefault().
1028
+ */
1029
+ onOpenAutoFocus?: (event: Event) => void;
1030
+ /**
1031
+ * Event handler called when focus moves to the trigger after closing.
1032
+ * It can be prevented by calling event.preventDefault().
1033
+ */
1034
+ onCloseAutoFocus?: (event: Event) => void;
1020
1035
  }
1021
1036
  /**
1022
1037
  * The content component is used to render rich content elements for the popover.
1023
1038
  */
1024
- declare const Content: react__default.ForwardRefExoticComponent<Pick<ContentProps, "anchor" | "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "children" | "slot" | "title" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "align" | "sticky" | "variant" | "side" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "hideWhenDetached" | "avoidCollisions" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "forceMount" | "portalled"> & react__default.RefAttributes<HTMLDivElement>>;
1039
+ declare const Content: react__default.ForwardRefExoticComponent<Pick<ContentProps, "anchor" | "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "children" | "slot" | "title" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "align" | "sticky" | "variant" | "side" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "hideWhenDetached" | "avoidCollisions" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onOpenAutoFocus" | "onCloseAutoFocus" | "forceMount" | "portalled"> & react__default.RefAttributes<HTMLDivElement>>;
1025
1040
 
1026
1041
  declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1027
1042
  variant?: "dark" | "light" | undefined;
@@ -1100,7 +1115,6 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1100
1115
  readonly 'background-danger-prominent-active'?: any;
1101
1116
  readonly 'background-danger-prominent-hover'?: any;
1102
1117
  readonly 'background-neutrals'?: any;
1103
- readonly 'background-neutrals-body'?: any;
1104
1118
  readonly 'background-neutrals-container'?: any;
1105
1119
  readonly 'background-neutrals-controls-disabled'?: any;
1106
1120
  readonly 'background-neutrals-disabled'?: any;
@@ -1108,6 +1122,8 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1108
1122
  readonly 'background-neutrals-inactive-hover'?: any;
1109
1123
  readonly 'background-neutrals-inverted'?: any;
1110
1124
  readonly 'background-neutrals-inverted-subtle'?: any;
1125
+ readonly 'background-neutrals-page'?: any;
1126
+ readonly 'background-neutrals-page-subtle'?: any;
1111
1127
  readonly 'background-neutrals-scrolls'?: any;
1112
1128
  readonly 'background-neutrals-scrolls-hover'?: any;
1113
1129
  readonly 'background-neutrals-subtle'?: any;
@@ -1131,12 +1147,11 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1131
1147
  readonly 'text-neutrals'?: any;
1132
1148
  readonly 'text-neutrals-disabled'?: any;
1133
1149
  readonly 'text-neutrals-inverted'?: any;
1134
- readonly 'text-neutrals-link'?: any;
1135
- readonly 'text-neutrals-link-active'?: any;
1136
- readonly 'text-neutrals-link-hover'?: any;
1137
1150
  readonly 'text-neutrals-placeholder'?: any;
1138
1151
  readonly 'text-neutrals-placeholder-only'?: any;
1139
1152
  readonly 'text-neutrals-subtle'?: any;
1153
+ readonly 'text-neutrals-subtle-active'?: any;
1154
+ readonly 'text-neutrals-subtle-hover'?: any;
1140
1155
  readonly 'text-primary'?: any;
1141
1156
  readonly 'text-primary-active'?: any;
1142
1157
  readonly 'text-primary-hover'?: any;
@@ -1156,7 +1171,7 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1156
1171
  readonly 'icon-neutrals-inverted'?: any;
1157
1172
  readonly 'icon-neutrals-search'?: any;
1158
1173
  readonly 'icon-neutrals-subtle'?: any;
1159
- readonly 'icon-neutrals-with-text'?: any;
1174
+ readonly 'icon-neutrals-text'?: any;
1160
1175
  readonly 'icon-primary'?: any;
1161
1176
  readonly 'icon-primary-active'?: any;
1162
1177
  readonly 'icon-primary-hover'?: any;
@@ -1165,7 +1180,10 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1165
1180
  readonly 'icon-success'?: any;
1166
1181
  readonly 'icon-success-inverted'?: any;
1167
1182
  readonly 'icon-warning'?: any;
1183
+ readonly 'icon-warning-prominent'?: any;
1168
1184
  readonly 'border-danger'?: any;
1185
+ readonly 'border-danger-active'?: any;
1186
+ readonly 'border-danger-hover'?: any;
1169
1187
  readonly 'border-focus-inner'?: any;
1170
1188
  readonly 'border-focus-middle'?: any;
1171
1189
  readonly 'border-focus-outer'?: any;
@@ -1177,6 +1195,9 @@ declare const StyledClose: react.ForwardRefExoticComponent<Pick<Omit<{
1177
1195
  readonly 'border-neutrals-hover'?: any;
1178
1196
  readonly 'border-neutrals-inverted'?: any;
1179
1197
  readonly 'border-neutrals-subtle'?: any;
1198
+ readonly 'border-neutrals-text-subtle'?: any;
1199
+ readonly 'border-neutrals-text-subtle-active'?: any;
1200
+ readonly 'border-neutrals-text-subtle-hover'?: any;
1180
1201
  readonly 'border-primary'?: any;
1181
1202
  readonly 'border-primary-active'?: any;
1182
1203
  readonly 'border-primary-hover'?: any;
@@ -1496,6 +1517,10 @@ interface PopoverProps {
1496
1517
  * The current controlled state of the popover.
1497
1518
  */
1498
1519
  open?: boolean;
1520
+ /**
1521
+ * The initial open state of the popover. Use when you don't need to control its open state.
1522
+ */
1523
+ defaultOpen?: boolean;
1499
1524
  /**
1500
1525
  * Event handler called when the popover opens.
1501
1526
  */
@@ -1508,10 +1533,6 @@ interface PopoverProps {
1508
1533
  * Defines whether the interaction with outside elements will be enabled.
1509
1534
  */
1510
1535
  interactOutside?: boolean;
1511
- /**
1512
- * The event that will trigger the popover to open.
1513
- */
1514
- triggersOn?: TriggersOn;
1515
1536
  /**
1516
1537
  * Change the popover's appearance
1517
1538
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-popover",
3
- "version": "4.3.23-dropdown.0",
3
+ "version": "4.3.23-dropdown.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,13 +27,12 @@
27
27
  "react-dom": "^16.14 || ^17 || ^18"
28
28
  },
29
29
  "dependencies": {
30
- "@radix-ui/react-compose-refs": "^1.0.1",
31
30
  "@radix-ui/react-popover": "^1.0.0",
32
31
  "@radix-ui/react-use-size": "^1.0.1",
33
- "@mirohq/design-system-icons": "^0.23.1-dropdown.0",
32
+ "@mirohq/design-system-icons": "^0.23.1-dropdown.2",
34
33
  "@mirohq/design-system-primitive": "^1.1.0",
35
34
  "@mirohq/design-system-stitches": "^2.3.2-dropdown.0",
36
- "@mirohq/design-system-styles": "^1.0.24-dropdown.0"
35
+ "@mirohq/design-system-styles": "^1.0.24-dropdown.1"
37
36
  },
38
37
  "scripts": {
39
38
  "build": "rollup -c ../../../rollup.config.js",