@mirohq/design-system-tooltip 3.3.18-combobox.0 → 3.3.18

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
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
+ var designSystemUseId = require('@mirohq/design-system-use-id');
7
8
  var reactTooltip = require('@radix-ui/react-tooltip');
8
9
  var designSystemStitches = require('@mirohq/design-system-stitches');
9
- var designSystemStyles = require('@mirohq/design-system-styles');
10
10
  var designSystemBaseHotkey = require('@mirohq/design-system-base-hotkey');
11
11
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
12
12
 
@@ -29,17 +29,6 @@ const StyledContent = designSystemStitches.styled(reactTooltip.Content, {
29
29
  lineHeight: "20px",
30
30
  fontFamily: "inherit",
31
31
  padding: "$150",
32
- "@media (prefers-reduced-motion: no-preference)": {
33
- animationDuration: "220ms",
34
- animationTimingFunction: "ease",
35
- willChange: "opacity",
36
- '&[data-state="delayed-open"]': {
37
- animationName: designSystemStyles.animations.fadeIn
38
- },
39
- '&[data-state="closed"]': {
40
- animationName: designSystemStyles.animations.fadeOut
41
- }
42
- },
43
32
  zIndex: "$tooltip"
44
33
  });
45
34
 
@@ -79,15 +68,18 @@ Content.displayName = "Tooltip.Content";
79
68
 
80
69
  const StyledTrigger = designSystemStitches.styled(reactTooltip.Trigger);
81
70
 
82
- const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
83
- StyledTrigger,
84
- {
85
- ...restProps,
86
- onClick: onPress != null ? onPress : onClick,
87
- "data-tooltip-trigger": "",
88
- ref: forwardRef
89
- }
90
- ));
71
+ const Trigger = React__default["default"].forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
72
+ const { id } = React.useContext(TooltipTriggerContext);
73
+ return /* @__PURE__ */ jsxRuntime.jsx(
74
+ StyledTrigger,
75
+ {
76
+ ...restProps,
77
+ onClick: onPress != null ? onPress : onClick,
78
+ "data-tooltip-trigger": id,
79
+ ref: forwardRef
80
+ }
81
+ );
82
+ });
91
83
  Trigger.displayName = "Tooltip.Trigger";
92
84
 
93
85
  const ProviderContext = React.createContext({});
@@ -111,6 +103,7 @@ let skipDelayTimer;
111
103
  let shouldSkipDelay = false;
112
104
  const DEFAULT_SKIP_DELAY_DURATION = 500;
113
105
  const DEFAULT_DELAY_DURATION = 200;
106
+ const TooltipTriggerContext = React.createContext({});
114
107
  const Tooltip = ({
115
108
  defaultOpen = false,
116
109
  open,
@@ -126,12 +119,14 @@ const Tooltip = ({
126
119
  const context = useTooltipContext();
127
120
  const isMounted = React.useRef(false);
128
121
  const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
122
+ const triggerId = designSystemUseId.useId();
129
123
  const [openState, setOpenState] = React.useState(defaultOpen);
130
124
  const setDelayedOpen = React.useCallback(
131
125
  (newOpenState) => {
132
126
  var _a2;
133
127
  clearTimeout(delayTimer);
134
128
  clearTimeout(skipDelayTimer);
129
+ const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
135
130
  if (!newOpenState) {
136
131
  skipDelayTimer = setTimeout(() => {
137
132
  shouldSkipDelay = false;
@@ -140,12 +135,12 @@ const Tooltip = ({
140
135
  onClose == null ? void 0 : onClose();
141
136
  return;
142
137
  }
143
- if (shouldSkipDelay || document.querySelector("[data-tooltip-trigger]:focus") != null) {
138
+ if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
144
139
  setOpenState(newOpenState);
145
140
  return;
146
141
  }
147
142
  delayTimer = setTimeout(() => {
148
- if (document.querySelector("[data-tooltip-trigger]:hover") == null && process.env.NODE_ENV !== "test") {
143
+ if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
149
144
  return;
150
145
  }
151
146
  shouldSkipDelay = _skipDelayDuration !== 0;
@@ -155,7 +150,14 @@ const Tooltip = ({
155
150
  }
156
151
  }, (_a2 = delayDuration != null ? delayDuration : context.delayDuration) != null ? _a2 : DEFAULT_DELAY_DURATION);
157
152
  },
158
- [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
153
+ [
154
+ delayDuration,
155
+ context.delayDuration,
156
+ _skipDelayDuration,
157
+ onClose,
158
+ onOpen,
159
+ triggerId
160
+ ]
159
161
  );
160
162
  const handleOpenChange = React.useCallback(
161
163
  (newState) => {
@@ -183,7 +185,7 @@ const Tooltip = ({
183
185
  isMounted.current = false;
184
186
  };
185
187
  }, []);
186
- return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
188
+ return /* @__PURE__ */ jsxRuntime.jsx(reactTooltip.Provider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTriggerContext.Provider, { value: { id: triggerId }, children: /* @__PURE__ */ jsxRuntime.jsx(
187
189
  reactTooltip.Root,
188
190
  {
189
191
  disableHoverableContent,
@@ -192,7 +194,7 @@ const Tooltip = ({
192
194
  onOpenChange: handleOpenChange,
193
195
  children
194
196
  }
195
- ) });
197
+ ) }) });
196
198
  };
197
199
  Tooltip.Trigger = Trigger;
198
200
  Tooltip.Content = Content;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n Content as RadixContent,\n Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n fill: '$black',\n height: '5px',\n transform: 'translateY(-1px)',\n width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n backgroundColor: '$black',\n borderRadius: '$50',\n color: '$white',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n fontFamily: 'inherit',\n padding: '$150',\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '220ms',\n animationTimingFunction: 'ease',\n willChange: 'opacity',\n '&[data-state=\"delayed-open\"]': {\n animationName: animations.fadeIn,\n },\n '&[data-state=\"closed\"]': {\n animationName: animations.fadeOut,\n },\n },\n zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n * @default 'center'\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger.\n * @default 5\n */\n sideOffset?: number\n\n /** The preferred side of the trigger to render against when open.\n * Will be reversed when collisions occur and avoidCollisions is enabled.\n * @default 'top'\n */\n side?: Side\n\n /**\n * When true, overrides the side and align preferences to prevent collisions\n * with window edges.\n * @default true\n */\n avoidCollisions?: boolean\n\n /**\n * The distance in pixels from window edges where collision detection should\n * occur.\n * @default 0\n */\n collisionPadding?: number\n\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. It inherits from Tooltip.Portal.\n */\n forceMount?: true\n\n /**\n * The element used as the collision boundary. By default this is the\n * viewport, though you can provide additional element(s) to be included in\n * this check.\n */\n collisionBoundary?: Element | null\n\n /**\n * The sticky behavior on the align axis. \"partial\" will keep the content in\n * the boundary as long as the trigger is at least partially in the boundary\n * whilst \"always\" will keep the content in the boundary regardless.\n * @default 'partial'\n */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\n * @default true (false in test environment)\n */\n hideWhenDetached?: boolean\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 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\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 children,\n side = 'top',\n sideOffset = 5,\n sticky = 'partial',\n hideWhenDetached = process.env.NODE_ENV !== 'test',\n ...restProps\n },\n forwardRef\n ) => (\n <StyledContent\n {...restProps}\n ref={forwardRef}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n hideWhenDetached={hideWhenDetached}\n side={side}\n sideOffset={sideOffset}\n sticky={sticky}\n >\n {children}\n <StyledArrowIcon />\n </StyledContent>\n )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\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\nexport const Trigger = React.forwardRef<\n ElementRef<typeof StyledTrigger>,\n TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n <StyledTrigger\n {...restProps}\n onClick={onPress ?? onClick}\n data-tooltip-trigger=''\n ref={forwardRef}\n />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n /**\n * The duration from when the mouse enters a tooltip trigger until\n * the tooltip opens.\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * When set to `0`, when hovering between triggers there wont be delay duration.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * The content\n */\n children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n children,\n ...restProps\n}) => (\n <ProviderContext.Provider value={restProps}>\n {children}\n </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. If used on this part, it will be\n * inherited by Tooltip.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 type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n /**\n * The content.\n */\n children: string\n}\n\nexport const Hotkey = React.forwardRef<\n ElementRef<typeof StyledHotkey>,\n HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledHotkey {...restProps} ref={forwardRef}>\n <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n </StyledHotkey>\n))\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n Provider as RadixProvider,\n Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n /**\n * The open state of the tooltip when it is initially rendered. Use when you\n * do not need to control its open state.\n */\n defaultOpen?: boolean\n\n /**\n * The current state of the tooltip.\n */\n open?: boolean\n\n /**\n * Event handler called when the tooltip opens.\n */\n onOpen?: () => void\n\n /**\n * Event handler called when the tooltip closes.\n */\n onClose?: () => void\n\n /**\n * Overrides the duration given to the `Provider` to customize the open delay\n * for a specific tooltip.\n * @default 200\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * Clears the delayDuration and skipDelayDuration timeouts when the component\n * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n * @default false\n */\n clearDelaysOnUnmount?: boolean\n\n /**\n * Closes the tooltip as soon as the pointer leaves the trigger making it\n * impossible to hover the content.\n */\n disableHoverableContent?: boolean\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n defaultOpen = false,\n open,\n onOpen,\n onClose,\n skipDelayDuration,\n delayDuration,\n disableHoverableContent,\n clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n children,\n}) => {\n const context = useTooltipContext()\n const isMounted = useRef(false)\n const _skipDelayDuration =\n skipDelayDuration ??\n context.skipDelayDuration ??\n DEFAULT_SKIP_DELAY_DURATION\n\n const [openState, setOpenState] = useState(defaultOpen)\n const setDelayedOpen = useCallback(\n (newOpenState: boolean) => {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n\n if (!newOpenState) {\n skipDelayTimer = setTimeout(() => {\n shouldSkipDelay = false\n }, _skipDelayDuration)\n setOpenState(false)\n onClose?.()\n return\n }\n\n if (\n shouldSkipDelay ||\n document.querySelector('[data-tooltip-trigger]:focus') != null\n ) {\n setOpenState(newOpenState)\n return\n }\n\n delayTimer = setTimeout(() => {\n // ignore it if the the user quickly hover the trigger and leave before the timeout\n // (unfortunately JSDOM seems not to support :hover selector)\n if (\n document.querySelector('[data-tooltip-trigger]:hover') == null &&\n process.env.NODE_ENV !== 'test'\n ) {\n return\n }\n\n /* when skipDelayDuration is 0 no skip delay should happen. */\n shouldSkipDelay = _skipDelayDuration !== 0\n\n if (isMounted.current) {\n setOpenState(true)\n onOpen?.()\n }\n }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n },\n [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]\n )\n\n const handleOpenChange = useCallback(\n (newState: boolean) => {\n if (open == null) {\n setDelayedOpen(newState)\n return\n }\n\n newState ? onOpen?.() : onClose?.()\n },\n [open, onOpen, onClose, setDelayedOpen]\n )\n\n useEffect(\n () => () => {\n if (clearDelaysOnUnmount) {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n shouldSkipDelay = false\n }\n },\n [clearDelaysOnUnmount]\n )\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n }\n }, [])\n\n return (\n <RadixProvider delayDuration={0} skipDelayDuration={0}>\n <RadixTooltip\n disableHoverableContent={disableHoverableContent}\n open={open ?? openState}\n delayDuration={0} // we control it manually\n onOpenChange={handleOpenChange}\n >\n {children}\n </RadixTooltip>\n </RadixProvider>\n )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Trigger: typeof Trigger\n Content: typeof Content\n Provider: typeof Provider\n Portal: typeof Portal\n Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["styled","RadixArrow","RadixContent","animations","React","jsxs","Trigger","jsx","createContext","useContext","RadixPortal","Primitive","BaseHotkey","useRef","useState","useCallback","_a","useEffect","RadixProvider","RadixTooltip"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n Content as RadixContent,\n Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n fill: '$black',\n height: '5px',\n transform: 'translateY(-1px)',\n width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n backgroundColor: '$black',\n borderRadius: '$50',\n color: '$white',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n fontFamily: 'inherit',\n padding: '$150',\n zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n * @default 'center'\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger.\n * @default 5\n */\n sideOffset?: number\n\n /** The preferred side of the trigger to render against when open.\n * Will be reversed when collisions occur and avoidCollisions is enabled.\n * @default 'top'\n */\n side?: Side\n\n /**\n * When true, overrides the side and align preferences to prevent collisions\n * with window edges.\n * @default true\n */\n avoidCollisions?: boolean\n\n /**\n * The distance in pixels from window edges where collision detection should\n * occur.\n * @default 0\n */\n collisionPadding?: number\n\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. It inherits from Tooltip.Portal.\n */\n forceMount?: true\n\n /**\n * The element used as the collision boundary. By default this is the\n * viewport, though you can provide additional element(s) to be included in\n * this check.\n */\n collisionBoundary?: Element | null\n\n /**\n * The sticky behavior on the align axis. \"partial\" will keep the content in\n * the boundary as long as the trigger is at least partially in the boundary\n * whilst \"always\" will keep the content in the boundary regardless.\n * @default 'partial'\n */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\n * @default true (false in test environment)\n */\n hideWhenDetached?: boolean\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 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\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 children,\n side = 'top',\n sideOffset = 5,\n sticky = 'partial',\n hideWhenDetached = process.env.NODE_ENV !== 'test',\n ...restProps\n },\n forwardRef\n ) => (\n <StyledContent\n {...restProps}\n ref={forwardRef}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n hideWhenDetached={hideWhenDetached}\n side={side}\n sideOffset={sideOffset}\n sticky={sticky}\n >\n {children}\n <StyledArrowIcon />\n </StyledContent>\n )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React, { useContext } from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\nimport { TooltipTriggerContext } from '../tooltip'\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\nexport const Trigger = React.forwardRef<\n ElementRef<typeof StyledTrigger>,\n TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => {\n const { id } = useContext(TooltipTriggerContext)\n return (\n <StyledTrigger\n {...restProps}\n onClick={onPress ?? onClick}\n data-tooltip-trigger={id}\n ref={forwardRef}\n />\n )\n})\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n /**\n * The duration from when the mouse enters a tooltip trigger until\n * the tooltip opens.\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * When set to `0`, when hovering between triggers there wont be delay duration.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * The content\n */\n children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n children,\n ...restProps\n}) => (\n <ProviderContext.Provider value={restProps}>\n {children}\n </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. If used on this part, it will be\n * inherited by Tooltip.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 type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n /**\n * The content.\n */\n children: string\n}\n\nexport const Hotkey = React.forwardRef<\n ElementRef<typeof StyledHotkey>,\n HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledHotkey {...restProps} ref={forwardRef}>\n <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n </StyledHotkey>\n))\n","import React, {\n useState,\n useCallback,\n useEffect,\n useRef,\n createContext,\n} from 'react'\nimport { useId } from '@mirohq/design-system-use-id'\nimport {\n Provider as RadixProvider,\n Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n /**\n * The open state of the tooltip when it is initially rendered. Use when you\n * do not need to control its open state.\n */\n defaultOpen?: boolean\n\n /**\n * The current state of the tooltip.\n */\n open?: boolean\n\n /**\n * Event handler called when the tooltip opens.\n */\n onOpen?: () => void\n\n /**\n * Event handler called when the tooltip closes.\n */\n onClose?: () => void\n\n /**\n * Overrides the duration given to the `Provider` to customize the open delay\n * for a specific tooltip.\n * @default 200\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * Clears the delayDuration and skipDelayDuration timeouts when the component\n * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n * @default false\n */\n clearDelaysOnUnmount?: boolean\n\n /**\n * Closes the tooltip as soon as the pointer leaves the trigger making it\n * impossible to hover the content.\n */\n disableHoverableContent?: boolean\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const TooltipTriggerContext = createContext<{ id?: string }>({})\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n defaultOpen = false,\n open,\n onOpen,\n onClose,\n skipDelayDuration,\n delayDuration,\n disableHoverableContent,\n clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n children,\n}) => {\n const context = useTooltipContext()\n const isMounted = useRef(false)\n const _skipDelayDuration =\n skipDelayDuration ??\n context.skipDelayDuration ??\n DEFAULT_SKIP_DELAY_DURATION\n\n const triggerId = useId()\n\n const [openState, setOpenState] = useState(defaultOpen)\n const setDelayedOpen = useCallback(\n (newOpenState: boolean) => {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n\n const triggerSelector = `[data-tooltip-trigger=\"${triggerId}\"]`\n\n if (!newOpenState) {\n skipDelayTimer = setTimeout(() => {\n shouldSkipDelay = false\n }, _skipDelayDuration)\n setOpenState(false)\n onClose?.()\n return\n }\n\n if (\n shouldSkipDelay ||\n document.querySelector(`${triggerSelector}:focus`) != null\n ) {\n setOpenState(newOpenState)\n return\n }\n\n delayTimer = setTimeout(() => {\n // ignore it if the the user quickly hover the trigger and leave before the timeout\n // (unfortunately JSDOM seems not to support :hover selector)\n if (\n document.querySelector(`${triggerSelector}:hover`) == null &&\n process.env.NODE_ENV !== 'test'\n ) {\n return\n }\n\n /* when skipDelayDuration is 0 no skip delay should happen. */\n shouldSkipDelay = _skipDelayDuration !== 0\n\n if (isMounted.current) {\n setOpenState(true)\n onOpen?.()\n }\n }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n },\n [\n delayDuration,\n context.delayDuration,\n _skipDelayDuration,\n onClose,\n onOpen,\n triggerId,\n ]\n )\n\n const handleOpenChange = useCallback(\n (newState: boolean) => {\n if (open == null) {\n setDelayedOpen(newState)\n return\n }\n\n newState ? onOpen?.() : onClose?.()\n },\n [open, onOpen, onClose, setDelayedOpen]\n )\n\n useEffect(\n () => () => {\n if (clearDelaysOnUnmount) {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n shouldSkipDelay = false\n }\n },\n [clearDelaysOnUnmount]\n )\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n }\n }, [])\n\n return (\n <RadixProvider delayDuration={0} skipDelayDuration={0}>\n <TooltipTriggerContext.Provider value={{ id: triggerId }}>\n <RadixTooltip\n disableHoverableContent={disableHoverableContent}\n open={open ?? openState}\n delayDuration={0} // we control it manually\n onOpenChange={handleOpenChange}\n >\n {children}\n </RadixTooltip>\n </TooltipTriggerContext.Provider>\n </RadixProvider>\n )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Trigger: typeof Trigger\n Content: typeof Content\n Provider: typeof Provider\n Portal: typeof Portal\n Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["styled","RadixArrow","RadixContent","React","jsxs","Trigger","useContext","jsx","createContext","RadixPortal","Primitive","BaseHotkey","useRef","useId","useState","useCallback","_a","useEffect","RadixProvider","RadixTooltip"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import React, { createContext, useContext, useRef, useState, useCallback, useEffect } from 'react';
2
+ import React, { useContext, createContext, useRef, useState, useCallback, useEffect } from 'react';
3
+ import { useId } from '@mirohq/design-system-use-id';
3
4
  import { Arrow, Content as Content$1, Trigger as Trigger$1, Portal as Portal$1, Provider as Provider$1, Root } from '@radix-ui/react-tooltip';
4
5
  import { styled } from '@mirohq/design-system-stitches';
5
- import { animations } from '@mirohq/design-system-styles';
6
6
  import { Hotkey as Hotkey$1 } from '@mirohq/design-system-base-hotkey';
7
7
  import { Primitive } from '@mirohq/design-system-primitive';
8
8
 
@@ -21,17 +21,6 @@ const StyledContent = styled(Content$1, {
21
21
  lineHeight: "20px",
22
22
  fontFamily: "inherit",
23
23
  padding: "$150",
24
- "@media (prefers-reduced-motion: no-preference)": {
25
- animationDuration: "220ms",
26
- animationTimingFunction: "ease",
27
- willChange: "opacity",
28
- '&[data-state="delayed-open"]': {
29
- animationName: animations.fadeIn
30
- },
31
- '&[data-state="closed"]': {
32
- animationName: animations.fadeOut
33
- }
34
- },
35
24
  zIndex: "$tooltip"
36
25
  });
37
26
 
@@ -71,15 +60,18 @@ Content.displayName = "Tooltip.Content";
71
60
 
72
61
  const StyledTrigger = styled(Trigger$1);
73
62
 
74
- const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
75
- StyledTrigger,
76
- {
77
- ...restProps,
78
- onClick: onPress != null ? onPress : onClick,
79
- "data-tooltip-trigger": "",
80
- ref: forwardRef
81
- }
82
- ));
63
+ const Trigger = React.forwardRef(({ onPress, onClick, ...restProps }, forwardRef) => {
64
+ const { id } = useContext(TooltipTriggerContext);
65
+ return /* @__PURE__ */ jsx(
66
+ StyledTrigger,
67
+ {
68
+ ...restProps,
69
+ onClick: onPress != null ? onPress : onClick,
70
+ "data-tooltip-trigger": id,
71
+ ref: forwardRef
72
+ }
73
+ );
74
+ });
83
75
  Trigger.displayName = "Tooltip.Trigger";
84
76
 
85
77
  const ProviderContext = createContext({});
@@ -103,6 +95,7 @@ let skipDelayTimer;
103
95
  let shouldSkipDelay = false;
104
96
  const DEFAULT_SKIP_DELAY_DURATION = 500;
105
97
  const DEFAULT_DELAY_DURATION = 200;
98
+ const TooltipTriggerContext = createContext({});
106
99
  const Tooltip = ({
107
100
  defaultOpen = false,
108
101
  open,
@@ -118,12 +111,14 @@ const Tooltip = ({
118
111
  const context = useTooltipContext();
119
112
  const isMounted = useRef(false);
120
113
  const _skipDelayDuration = (_a = skipDelayDuration != null ? skipDelayDuration : context.skipDelayDuration) != null ? _a : DEFAULT_SKIP_DELAY_DURATION;
114
+ const triggerId = useId();
121
115
  const [openState, setOpenState] = useState(defaultOpen);
122
116
  const setDelayedOpen = useCallback(
123
117
  (newOpenState) => {
124
118
  var _a2;
125
119
  clearTimeout(delayTimer);
126
120
  clearTimeout(skipDelayTimer);
121
+ const triggerSelector = '[data-tooltip-trigger="'.concat(triggerId, '"]');
127
122
  if (!newOpenState) {
128
123
  skipDelayTimer = setTimeout(() => {
129
124
  shouldSkipDelay = false;
@@ -132,12 +127,12 @@ const Tooltip = ({
132
127
  onClose == null ? void 0 : onClose();
133
128
  return;
134
129
  }
135
- if (shouldSkipDelay || document.querySelector("[data-tooltip-trigger]:focus") != null) {
130
+ if (shouldSkipDelay || document.querySelector("".concat(triggerSelector, ":focus")) != null) {
136
131
  setOpenState(newOpenState);
137
132
  return;
138
133
  }
139
134
  delayTimer = setTimeout(() => {
140
- if (document.querySelector("[data-tooltip-trigger]:hover") == null && process.env.NODE_ENV !== "test") {
135
+ if (document.querySelector("".concat(triggerSelector, ":hover")) == null && process.env.NODE_ENV !== "test") {
141
136
  return;
142
137
  }
143
138
  shouldSkipDelay = _skipDelayDuration !== 0;
@@ -147,7 +142,14 @@ const Tooltip = ({
147
142
  }
148
143
  }, (_a2 = delayDuration != null ? delayDuration : context.delayDuration) != null ? _a2 : DEFAULT_DELAY_DURATION);
149
144
  },
150
- [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]
145
+ [
146
+ delayDuration,
147
+ context.delayDuration,
148
+ _skipDelayDuration,
149
+ onClose,
150
+ onOpen,
151
+ triggerId
152
+ ]
151
153
  );
152
154
  const handleOpenChange = useCallback(
153
155
  (newState) => {
@@ -175,7 +177,7 @@ const Tooltip = ({
175
177
  isMounted.current = false;
176
178
  };
177
179
  }, []);
178
- return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(
180
+ return /* @__PURE__ */ jsx(Provider$1, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ jsx(TooltipTriggerContext.Provider, { value: { id: triggerId }, children: /* @__PURE__ */ jsx(
179
181
  Root,
180
182
  {
181
183
  disableHoverableContent,
@@ -184,7 +186,7 @@ const Tooltip = ({
184
186
  onOpenChange: handleOpenChange,
185
187
  children
186
188
  }
187
- ) });
189
+ ) }) });
188
190
  };
189
191
  Tooltip.Trigger = Trigger;
190
192
  Tooltip.Content = Content;
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n Content as RadixContent,\n Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n fill: '$black',\n height: '5px',\n transform: 'translateY(-1px)',\n width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n backgroundColor: '$black',\n borderRadius: '$50',\n color: '$white',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n fontFamily: 'inherit',\n padding: '$150',\n '@media (prefers-reduced-motion: no-preference)': {\n animationDuration: '220ms',\n animationTimingFunction: 'ease',\n willChange: 'opacity',\n '&[data-state=\"delayed-open\"]': {\n animationName: animations.fadeIn,\n },\n '&[data-state=\"closed\"]': {\n animationName: animations.fadeOut,\n },\n },\n zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n * @default 'center'\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger.\n * @default 5\n */\n sideOffset?: number\n\n /** The preferred side of the trigger to render against when open.\n * Will be reversed when collisions occur and avoidCollisions is enabled.\n * @default 'top'\n */\n side?: Side\n\n /**\n * When true, overrides the side and align preferences to prevent collisions\n * with window edges.\n * @default true\n */\n avoidCollisions?: boolean\n\n /**\n * The distance in pixels from window edges where collision detection should\n * occur.\n * @default 0\n */\n collisionPadding?: number\n\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. It inherits from Tooltip.Portal.\n */\n forceMount?: true\n\n /**\n * The element used as the collision boundary. By default this is the\n * viewport, though you can provide additional element(s) to be included in\n * this check.\n */\n collisionBoundary?: Element | null\n\n /**\n * The sticky behavior on the align axis. \"partial\" will keep the content in\n * the boundary as long as the trigger is at least partially in the boundary\n * whilst \"always\" will keep the content in the boundary regardless.\n * @default 'partial'\n */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\n * @default true (false in test environment)\n */\n hideWhenDetached?: boolean\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 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\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 children,\n side = 'top',\n sideOffset = 5,\n sticky = 'partial',\n hideWhenDetached = process.env.NODE_ENV !== 'test',\n ...restProps\n },\n forwardRef\n ) => (\n <StyledContent\n {...restProps}\n ref={forwardRef}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n hideWhenDetached={hideWhenDetached}\n side={side}\n sideOffset={sideOffset}\n sticky={sticky}\n >\n {children}\n <StyledArrowIcon />\n </StyledContent>\n )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\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\nexport const Trigger = React.forwardRef<\n ElementRef<typeof StyledTrigger>,\n TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => (\n <StyledTrigger\n {...restProps}\n onClick={onPress ?? onClick}\n data-tooltip-trigger=''\n ref={forwardRef}\n />\n))\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n /**\n * The duration from when the mouse enters a tooltip trigger until\n * the tooltip opens.\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * When set to `0`, when hovering between triggers there wont be delay duration.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * The content\n */\n children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n children,\n ...restProps\n}) => (\n <ProviderContext.Provider value={restProps}>\n {children}\n </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. If used on this part, it will be\n * inherited by Tooltip.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 type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n /**\n * The content.\n */\n children: string\n}\n\nexport const Hotkey = React.forwardRef<\n ElementRef<typeof StyledHotkey>,\n HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledHotkey {...restProps} ref={forwardRef}>\n <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n </StyledHotkey>\n))\n","import React, { useState, useCallback, useEffect, useRef } from 'react'\nimport {\n Provider as RadixProvider,\n Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n /**\n * The open state of the tooltip when it is initially rendered. Use when you\n * do not need to control its open state.\n */\n defaultOpen?: boolean\n\n /**\n * The current state of the tooltip.\n */\n open?: boolean\n\n /**\n * Event handler called when the tooltip opens.\n */\n onOpen?: () => void\n\n /**\n * Event handler called when the tooltip closes.\n */\n onClose?: () => void\n\n /**\n * Overrides the duration given to the `Provider` to customize the open delay\n * for a specific tooltip.\n * @default 200\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * Clears the delayDuration and skipDelayDuration timeouts when the component\n * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n * @default false\n */\n clearDelaysOnUnmount?: boolean\n\n /**\n * Closes the tooltip as soon as the pointer leaves the trigger making it\n * impossible to hover the content.\n */\n disableHoverableContent?: boolean\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n defaultOpen = false,\n open,\n onOpen,\n onClose,\n skipDelayDuration,\n delayDuration,\n disableHoverableContent,\n clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n children,\n}) => {\n const context = useTooltipContext()\n const isMounted = useRef(false)\n const _skipDelayDuration =\n skipDelayDuration ??\n context.skipDelayDuration ??\n DEFAULT_SKIP_DELAY_DURATION\n\n const [openState, setOpenState] = useState(defaultOpen)\n const setDelayedOpen = useCallback(\n (newOpenState: boolean) => {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n\n if (!newOpenState) {\n skipDelayTimer = setTimeout(() => {\n shouldSkipDelay = false\n }, _skipDelayDuration)\n setOpenState(false)\n onClose?.()\n return\n }\n\n if (\n shouldSkipDelay ||\n document.querySelector('[data-tooltip-trigger]:focus') != null\n ) {\n setOpenState(newOpenState)\n return\n }\n\n delayTimer = setTimeout(() => {\n // ignore it if the the user quickly hover the trigger and leave before the timeout\n // (unfortunately JSDOM seems not to support :hover selector)\n if (\n document.querySelector('[data-tooltip-trigger]:hover') == null &&\n process.env.NODE_ENV !== 'test'\n ) {\n return\n }\n\n /* when skipDelayDuration is 0 no skip delay should happen. */\n shouldSkipDelay = _skipDelayDuration !== 0\n\n if (isMounted.current) {\n setOpenState(true)\n onOpen?.()\n }\n }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n },\n [delayDuration, context.delayDuration, _skipDelayDuration, onClose, onOpen]\n )\n\n const handleOpenChange = useCallback(\n (newState: boolean) => {\n if (open == null) {\n setDelayedOpen(newState)\n return\n }\n\n newState ? onOpen?.() : onClose?.()\n },\n [open, onOpen, onClose, setDelayedOpen]\n )\n\n useEffect(\n () => () => {\n if (clearDelaysOnUnmount) {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n shouldSkipDelay = false\n }\n },\n [clearDelaysOnUnmount]\n )\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n }\n }, [])\n\n return (\n <RadixProvider delayDuration={0} skipDelayDuration={0}>\n <RadixTooltip\n disableHoverableContent={disableHoverableContent}\n open={open ?? openState}\n delayDuration={0} // we control it manually\n onOpenChange={handleOpenChange}\n >\n {children}\n </RadixTooltip>\n </RadixProvider>\n )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Trigger: typeof Trigger\n Content: typeof Content\n Provider: typeof Provider\n Portal: typeof Portal\n Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["RadixArrow","RadixContent","Trigger","RadixPortal","BaseHotkey","_a","RadixProvider","RadixTooltip"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/partials/content.styled.tsx","../src/partials/content.tsx","../src/partials/trigger.styled.tsx","../src/partials/trigger.tsx","../src/partials/provider.tsx","../src/partials/portal.tsx","../src/partials/hotkey.styled.tsx","../src/partials/hotkey.tsx","../src/tooltip.tsx"],"sourcesContent":["import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport {\n Content as RadixContent,\n Arrow as RadixArrow,\n} from '@radix-ui/react-tooltip'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledArrowIcon = styled(RadixArrow, {\n fill: '$black',\n height: '5px',\n transform: 'translateY(-1px)',\n width: '15px',\n})\n\nexport const StyledContent = styled(RadixContent, {\n backgroundColor: '$black',\n borderRadius: '$50',\n color: '$white',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n fontFamily: 'inherit',\n padding: '$150',\n zIndex: '$tooltip',\n})\n\nexport type StyledContentProps = StrictComponentProps<typeof StyledContent>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledContent, StyledArrowIcon } from './content.styled'\nimport type { StyledContentProps } from './content.styled'\nimport type { PointerDownOutsideEvent, Side, Align } from '../types'\n\nexport interface ContentProps extends StyledContentProps {\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n * @default 'center'\n */\n align?: Align\n\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n * @default 0\n */\n alignOffset?: number\n\n /**\n * The distance in pixels from the trigger.\n * @default 5\n */\n sideOffset?: number\n\n /** The preferred side of the trigger to render against when open.\n * Will be reversed when collisions occur and avoidCollisions is enabled.\n * @default 'top'\n */\n side?: Side\n\n /**\n * When true, overrides the side and align preferences to prevent collisions\n * with window edges.\n * @default true\n */\n avoidCollisions?: boolean\n\n /**\n * The distance in pixels from window edges where collision detection should\n * occur.\n * @default 0\n */\n collisionPadding?: number\n\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. It inherits from Tooltip.Portal.\n */\n forceMount?: true\n\n /**\n * The element used as the collision boundary. By default this is the\n * viewport, though you can provide additional element(s) to be included in\n * this check.\n */\n collisionBoundary?: Element | null\n\n /**\n * The sticky behavior on the align axis. \"partial\" will keep the content in\n * the boundary as long as the trigger is at least partially in the boundary\n * whilst \"always\" will keep the content in the boundary regardless.\n * @default 'partial'\n */\n sticky?: 'partial' | 'always'\n\n /**\n * Whether to hide the content when the trigger becomes fully occluded.\n * @default true (false in test environment)\n */\n hideWhenDetached?: boolean\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 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\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 children,\n side = 'top',\n sideOffset = 5,\n sticky = 'partial',\n hideWhenDetached = process.env.NODE_ENV !== 'test',\n ...restProps\n },\n forwardRef\n ) => (\n <StyledContent\n {...restProps}\n ref={forwardRef}\n align={align}\n alignOffset={alignOffset}\n avoidCollisions={avoidCollisions}\n collisionPadding={collisionPadding}\n hideWhenDetached={hideWhenDetached}\n side={side}\n sideOffset={sideOffset}\n sticky={sticky}\n >\n {children}\n <StyledArrowIcon />\n </StyledContent>\n )\n)\n\nContent.displayName = 'Tooltip.Content'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Trigger } from '@radix-ui/react-tooltip'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrigger = styled(Trigger)\n\nexport type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>\n","import React, { useContext } from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport { StyledTrigger } from './trigger.styled'\nimport type { StyledTriggerProps } from './trigger.styled'\nimport { TooltipTriggerContext } from '../tooltip'\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\nexport const Trigger = React.forwardRef<\n ElementRef<typeof StyledTrigger>,\n TriggerProps\n>(({ onPress, onClick, ...restProps }, forwardRef) => {\n const { id } = useContext(TooltipTriggerContext)\n return (\n <StyledTrigger\n {...restProps}\n onClick={onPress ?? onClick}\n data-tooltip-trigger={id}\n ref={forwardRef}\n />\n )\n})\n\nTrigger.displayName = 'Tooltip.Trigger'\n","import React, { createContext, useContext } from 'react'\n\nexport interface ProviderProps {\n /**\n * The duration from when the mouse enters a tooltip trigger until\n * the tooltip opens.\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * When set to `0`, when hovering between triggers there wont be delay duration.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * The content\n */\n children?: React.ReactNode\n}\n\nexport const ProviderContext = createContext<ProviderProps>({} as any)\n\nexport const Provider: React.FC<ProviderProps> = ({\n children,\n ...restProps\n}) => (\n <ProviderContext.Provider value={restProps}>\n {children}\n </ProviderContext.Provider>\n)\n\nProvider.displayName = 'Tooltip.Provider'\n\nexport const useTooltipContext = (): ProviderProps =>\n useContext(ProviderContext)\n","import React from 'react'\nimport type { TooltipPortalProps } from '@radix-ui/react-tooltip'\nimport { Portal as RadixPortal } from '@radix-ui/react-tooltip'\n\nexport interface PortalProps extends TooltipPortalProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries. If used on this part, it will be\n * inherited by Tooltip.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 type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledHotkey = styled(Primitive.span, {\n marginLeft: '$100',\n})\n\nexport type StyledHotkeyProps = StrictComponentProps<typeof StyledHotkey>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Hotkey as BaseHotkey } from '@mirohq/design-system-base-hotkey'\n\nimport type { StyledHotkeyProps } from './hotkey.styled'\nimport { StyledHotkey } from './hotkey.styled'\n\nexport interface HotkeyProps extends StyledHotkeyProps {\n /**\n * The content.\n */\n children: string\n}\n\nexport const Hotkey = React.forwardRef<\n ElementRef<typeof StyledHotkey>,\n HotkeyProps\n>(({ children, ...restProps }, forwardRef) => (\n <StyledHotkey {...restProps} ref={forwardRef}>\n <BaseHotkey variant='inverted'>{children}</BaseHotkey>\n </StyledHotkey>\n))\n","import React, {\n useState,\n useCallback,\n useEffect,\n useRef,\n createContext,\n} from 'react'\nimport { useId } from '@mirohq/design-system-use-id'\nimport {\n Provider as RadixProvider,\n Root as RadixTooltip,\n} from '@radix-ui/react-tooltip'\n\nimport { Content } from './partials/content'\nimport { Trigger } from './partials/trigger'\nimport { Provider, useTooltipContext } from './partials/provider'\nimport { Portal } from './partials/portal'\nimport { Hotkey } from './partials/hotkey'\n\nexport interface TooltipProps {\n /**\n * The open state of the tooltip when it is initially rendered. Use when you\n * do not need to control its open state.\n */\n defaultOpen?: boolean\n\n /**\n * The current state of the tooltip.\n */\n open?: boolean\n\n /**\n * Event handler called when the tooltip opens.\n */\n onOpen?: () => void\n\n /**\n * Event handler called when the tooltip closes.\n */\n onClose?: () => void\n\n /**\n * Overrides the duration given to the `Provider` to customize the open delay\n * for a specific tooltip.\n * @default 200\n */\n delayDuration?: number\n\n /**\n * How much time a user has to enter another trigger without incurring\n * a delay again.\n * @default 500\n */\n skipDelayDuration?: number\n\n /**\n * Clears the delayDuration and skipDelayDuration timeouts when the component\n * is unmounted. This flag is `true` by default when using NODE_ENV=test.\n * @default false\n */\n clearDelaysOnUnmount?: boolean\n\n /**\n * Closes the tooltip as soon as the pointer leaves the trigger making it\n * impossible to hover the content.\n */\n disableHoverableContent?: boolean\n\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\nlet skipDelayTimer: ReturnType<typeof setTimeout> | undefined\nlet shouldSkipDelay = false\n\nexport const DEFAULT_SKIP_DELAY_DURATION = 500\nexport const DEFAULT_DELAY_DURATION = 200\n\nexport const TooltipTriggerContext = createContext<{ id?: string }>({})\n\nexport const Tooltip: React.FC<TooltipProps> & Partials = ({\n defaultOpen = false,\n open,\n onOpen,\n onClose,\n skipDelayDuration,\n delayDuration,\n disableHoverableContent,\n clearDelaysOnUnmount = process.env.NODE_ENV === 'test',\n children,\n}) => {\n const context = useTooltipContext()\n const isMounted = useRef(false)\n const _skipDelayDuration =\n skipDelayDuration ??\n context.skipDelayDuration ??\n DEFAULT_SKIP_DELAY_DURATION\n\n const triggerId = useId()\n\n const [openState, setOpenState] = useState(defaultOpen)\n const setDelayedOpen = useCallback(\n (newOpenState: boolean) => {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n\n const triggerSelector = `[data-tooltip-trigger=\"${triggerId}\"]`\n\n if (!newOpenState) {\n skipDelayTimer = setTimeout(() => {\n shouldSkipDelay = false\n }, _skipDelayDuration)\n setOpenState(false)\n onClose?.()\n return\n }\n\n if (\n shouldSkipDelay ||\n document.querySelector(`${triggerSelector}:focus`) != null\n ) {\n setOpenState(newOpenState)\n return\n }\n\n delayTimer = setTimeout(() => {\n // ignore it if the the user quickly hover the trigger and leave before the timeout\n // (unfortunately JSDOM seems not to support :hover selector)\n if (\n document.querySelector(`${triggerSelector}:hover`) == null &&\n process.env.NODE_ENV !== 'test'\n ) {\n return\n }\n\n /* when skipDelayDuration is 0 no skip delay should happen. */\n shouldSkipDelay = _skipDelayDuration !== 0\n\n if (isMounted.current) {\n setOpenState(true)\n onOpen?.()\n }\n }, delayDuration ?? context.delayDuration ?? DEFAULT_DELAY_DURATION)\n },\n [\n delayDuration,\n context.delayDuration,\n _skipDelayDuration,\n onClose,\n onOpen,\n triggerId,\n ]\n )\n\n const handleOpenChange = useCallback(\n (newState: boolean) => {\n if (open == null) {\n setDelayedOpen(newState)\n return\n }\n\n newState ? onOpen?.() : onClose?.()\n },\n [open, onOpen, onClose, setDelayedOpen]\n )\n\n useEffect(\n () => () => {\n if (clearDelaysOnUnmount) {\n clearTimeout(delayTimer)\n clearTimeout(skipDelayTimer)\n shouldSkipDelay = false\n }\n },\n [clearDelaysOnUnmount]\n )\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n }\n }, [])\n\n return (\n <RadixProvider delayDuration={0} skipDelayDuration={0}>\n <TooltipTriggerContext.Provider value={{ id: triggerId }}>\n <RadixTooltip\n disableHoverableContent={disableHoverableContent}\n open={open ?? openState}\n delayDuration={0} // we control it manually\n onOpenChange={handleOpenChange}\n >\n {children}\n </RadixTooltip>\n </TooltipTriggerContext.Provider>\n </RadixProvider>\n )\n}\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Trigger: typeof Trigger\n Content: typeof Content\n Provider: typeof Provider\n Portal: typeof Portal\n Hotkey: typeof Hotkey\n}\n\nTooltip.Trigger = Trigger\nTooltip.Content = Content\nTooltip.Provider = Provider\nTooltip.Portal = Portal\nTooltip.Hotkey = Hotkey\n"],"names":["RadixArrow","RadixContent","Trigger","RadixPortal","BaseHotkey","_a","RadixProvider","RadixTooltip"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-tooltip",
3
- "version": "3.3.18-combobox.0",
3
+ "version": "3.3.18",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -29,11 +29,11 @@
29
29
  "dependencies": {
30
30
  "@radix-ui/react-tooltip": "^1.0.3",
31
31
  "@mirohq/design-system-base-hotkey": "^0.1.11",
32
- "@mirohq/design-system-primitive": "^1.1.2",
32
+ "@mirohq/design-system-use-id": "^0.1.2",
33
33
  "@mirohq/design-system-stitches": "^2.6.10",
34
- "@mirohq/design-system-styles": "^1.2.10-combobox.0",
35
34
  "@mirohq/design-system-utils": "^0.15.4",
36
- "@mirohq/design-tokens": "^5.1.0"
35
+ "@mirohq/design-tokens": "^5.1.0",
36
+ "@mirohq/design-system-primitive": "^1.1.2"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "rollup -c ../../../rollup.config.js",