@bitrise/bitkit-v2 0.3.325 → 0.3.326
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.
|
@@ -3,19 +3,47 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
4
|
import { BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';
|
|
5
5
|
export type BitkitTooltipProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so
|
|
8
|
+
* the pointer can move into the tooltip without dismissing it.
|
|
9
|
+
*/
|
|
6
10
|
button?: BitkitColorButtonProps;
|
|
11
|
+
/** The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref. */
|
|
7
12
|
children: ReactNode;
|
|
13
|
+
/** Dismiss the tooltip when the trigger is clicked. */
|
|
8
14
|
closeOnClick?: TooltipRootProps['closeOnClick'];
|
|
15
|
+
/** Render the trigger without a tooltip — for hints that only apply in some states. */
|
|
9
16
|
disabled?: TooltipRootProps['disabled'];
|
|
17
|
+
/**
|
|
18
|
+
* Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an
|
|
19
|
+
* `IconArrowNortheast` when the trigger opens something in a new tab, for instance.
|
|
20
|
+
*/
|
|
10
21
|
icon?: BitkitIconComponent;
|
|
22
|
+
/** Target for the "Learn more" link. `_blank` also sets `rel="noopener noreferrer"`. */
|
|
11
23
|
learnMoreTarget?: HTMLAnchorElement['target'];
|
|
24
|
+
/**
|
|
25
|
+
* Adds a "Learn more" link pointing here. Setting it makes the tooltip interactive, so the
|
|
26
|
+
* pointer can move into the tooltip to reach the link.
|
|
27
|
+
*/
|
|
12
28
|
learnMoreUrl?: string;
|
|
29
|
+
/** Called when the tooltip opens or closes, including from hover and focus. */
|
|
13
30
|
onOpenChange?: TooltipRootProps['onOpenChange'];
|
|
31
|
+
/** Controlled open state. Leave unset to let hover and focus drive it. */
|
|
14
32
|
open?: TooltipRootProps['open'];
|
|
33
|
+
/** Delay in ms before an uncontrolled tooltip opens on hover. */
|
|
15
34
|
openDelay?: TooltipRootProps['openDelay'];
|
|
35
|
+
/** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
|
|
16
36
|
placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
|
|
37
|
+
/** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */
|
|
17
38
|
text: string;
|
|
18
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
|
|
42
|
+
* after it, and `learnMoreUrl`/`button` add a link and an action.
|
|
43
|
+
*
|
|
44
|
+
* Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
|
|
45
|
+
* open while the pointer travels into it, so the link and the button can actually be reached.
|
|
46
|
+
*/
|
|
19
47
|
declare const BitkitTooltip: {
|
|
20
48
|
({ button, children, closeOnClick, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement, text, }: BitkitTooltipProps): import("react").JSX.Element;
|
|
21
49
|
displayName: string;
|
|
@@ -6,6 +6,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import { Tooltip } from "@chakra-ui/react/tooltip";
|
|
7
7
|
import { Link } from "@chakra-ui/react/link";
|
|
8
8
|
//#region lib/components/BitkitTooltip/BitkitTooltip.tsx
|
|
9
|
+
/**
|
|
10
|
+
* A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
|
|
11
|
+
* after it, and `learnMoreUrl`/`button` add a link and an action.
|
|
12
|
+
*
|
|
13
|
+
* Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
|
|
14
|
+
* open while the pointer travels into it, so the link and the button can actually be reached.
|
|
15
|
+
*/
|
|
9
16
|
var BitkitTooltip = ({ button, children, closeOnClick, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement = "top", text }) => {
|
|
10
17
|
const isInteractive = !!learnMoreUrl || !!button;
|
|
11
18
|
const triggerRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\nexport type BitkitTooltipProps = {\n button?: BitkitColorButtonProps;\n children: ReactNode;\n closeOnClick?: TooltipRootProps['closeOnClick'];\n disabled?: TooltipRootProps['disabled'];\n icon?: BitkitIconComponent;\n learnMoreTarget?: HTMLAnchorElement['target'];\n learnMoreUrl?: string;\n onOpenChange?: TooltipRootProps['onOpenChange'];\n open?: TooltipRootProps['open'];\n openDelay?: TooltipRootProps['openDelay'];\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n text: string;\n};\n\nconst BitkitTooltip = ({\n button,\n children,\n closeOnClick,\n disabled,\n icon: Icon,\n learnMoreTarget,\n learnMoreUrl,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n text,\n}: BitkitTooltipProps) => {\n const isInteractive = !!learnMoreUrl || !!button;\n\n // Anchor positioning to the trigger node by ref rather than relying on Zag's\n // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n // lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n closeOnClick={closeOnClick}\n disabled={disabled}\n interactive={isInteractive || undefined}\n onOpenChange={onOpenChange}\n open={open}\n openDelay={openDelay}\n paddingSize={isInteractive ? 'lg' : undefined}\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Tooltip.Positioner>\n <Tooltip.Content maxWidth={rem(320)} css={isInteractive && { minWidth: rem(240) }}>\n <Tooltip.Arrow>\n <Tooltip.ArrowTip />\n </Tooltip.Arrow>\n <Box display=\"flex\" gap=\"8\">\n {text}\n {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n </Box>\n {isInteractive && (\n <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n {learnMoreUrl && (\n <Link\n color=\"color/purple/highlight\"\n href={learnMoreUrl}\n rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n target={learnMoreTarget}\n >\n Learn more\n </Link>\n )}\n {button && <BitkitColorButton css={{ marginInlineStart: 'auto' }} {...button} />}\n </Box>\n )}\n </Tooltip.Content>\n </Tooltip.Positioner>\n </Tooltip.Root>\n );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\nexport type BitkitTooltipProps = {\n /**\n * Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so\n * the pointer can move into the tooltip without dismissing it.\n */\n button?: BitkitColorButtonProps;\n /** The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref. */\n children: ReactNode;\n /** Dismiss the tooltip when the trigger is clicked. */\n closeOnClick?: TooltipRootProps['closeOnClick'];\n /** Render the trigger without a tooltip — for hints that only apply in some states. */\n disabled?: TooltipRootProps['disabled'];\n /**\n * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n */\n icon?: BitkitIconComponent;\n /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n learnMoreTarget?: HTMLAnchorElement['target'];\n /**\n * Adds a \"Learn more\" link pointing here. Setting it makes the tooltip interactive, so the\n * pointer can move into the tooltip to reach the link.\n */\n learnMoreUrl?: string;\n /** Called when the tooltip opens or closes, including from hover and focus. */\n onOpenChange?: TooltipRootProps['onOpenChange'];\n /** Controlled open state. Leave unset to let hover and focus drive it. */\n open?: TooltipRootProps['open'];\n /** Delay in ms before an uncontrolled tooltip opens on hover. */\n openDelay?: TooltipRootProps['openDelay'];\n /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */\n text: string;\n};\n\n/**\n * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph\n * after it, and `learnMoreUrl`/`button` add a link and an action.\n *\n * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays\n * open while the pointer travels into it, so the link and the button can actually be reached.\n */\nconst BitkitTooltip = ({\n button,\n children,\n closeOnClick,\n disabled,\n icon: Icon,\n learnMoreTarget,\n learnMoreUrl,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n text,\n}: BitkitTooltipProps) => {\n const isInteractive = !!learnMoreUrl || !!button;\n\n // Anchor positioning to the trigger node by ref rather than relying on Zag's\n // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n // lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n closeOnClick={closeOnClick}\n disabled={disabled}\n interactive={isInteractive || undefined}\n onOpenChange={onOpenChange}\n open={open}\n openDelay={openDelay}\n paddingSize={isInteractive ? 'lg' : undefined}\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Tooltip.Positioner>\n <Tooltip.Content maxWidth={rem(320)} css={isInteractive && { minWidth: rem(240) }}>\n <Tooltip.Arrow>\n <Tooltip.ArrowTip />\n </Tooltip.Arrow>\n <Box display=\"flex\" gap=\"8\">\n {text}\n {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n </Box>\n {isInteractive && (\n <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n {learnMoreUrl && (\n <Link\n color=\"color/purple/highlight\"\n href={learnMoreUrl}\n rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n target={learnMoreTarget}\n >\n Learn more\n </Link>\n )}\n {button && <BitkitColorButton css={{ marginInlineStart: 'auto' }} {...button} />}\n </Box>\n )}\n </Tooltip.Content>\n </Tooltip.Positioner>\n </Tooltip.Root>\n );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,IAAM,iBAAiB,EACrB,QACA,UACA,cACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,WACA,YAAY,OACZ,WACwB;CACxB,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAQ1C,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACV,aAAa,iBAAiB,KAAA;EAChB;EACR;EACK;EACX,aAAa,gBAAgB,OAAO,KAAA;EACpC,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;YAR9G,CAUE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;GAAiB,UAAU,IAAI,GAAG;GAAG,KAAK,iBAAiB,EAAE,UAAU,IAAI,GAAG,EAAE;aAAhF;IACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA;IACf,qBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;eAAxB,CACG,MACA,QAAQ,oBAAC,MAAD;MAAM,YAAW;MAAI,MAAK;KAAM,CAAA,CACtC;;IACJ,iBACC,qBAAC,KAAD;KAAK,YAAW;KAAS,SAAQ;KAAO,KAAI;KAAK,kBAAiB;eAAlE,CACG,gBACC,oBAAC,MAAD;MACE,OAAM;MACN,MAAM;MACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;MAC5D,QAAQ;gBACT;KAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;MAAmB,KAAK,EAAE,mBAAmB,OAAO;MAAG,GAAI;KAAS,CAAA,CAC5E;;GAEQ;KACC,CAAA,CACR;;AAElB;AAEA,cAAc,cAAc"}
|