@bitrise/bitkit-v2 0.3.325 → 0.3.327

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.
@@ -1,11 +1,11 @@
1
1
  import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
2
2
  import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
3
3
  import IconWarningYellow from "../../icons/IconWarningYellow.js";
4
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
4
5
  import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
5
6
  import { withSubComponents } from "../../utilities/withSubComponents.js";
6
7
  import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
7
8
  import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
8
- import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
9
9
  import BitkitField from "../BitkitField/BitkitField.js";
10
10
  import { forwardRef, useContext, useState } from "react";
11
11
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1,11 +1,11 @@
1
1
  import IconCalendar from "../../icons/IconCalendar.js";
2
2
  import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
3
3
  import IconWarningYellow from "../../icons/IconWarningYellow.js";
4
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
4
5
  import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
5
6
  import { DatePicker, useDatePickerContext } from "../../atoms/DatePicker/DatePicker.js";
6
7
  import { calendarDateToDate, dateToCalendarDate } from "../BitkitCalendar/Calendar.utils.js";
7
8
  import CalendarContent from "../BitkitCalendar/components/CalendarContent.js";
8
- import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
9
9
  import BitkitField from "../BitkitField/BitkitField.js";
10
10
  import { Box } from "@chakra-ui/react/box";
11
11
  import { useSlotRecipe } from "@chakra-ui/react/styled-system";
@@ -1,18 +1,43 @@
1
1
  import { TooltipRootProps } from '@chakra-ui/react/tooltip';
2
2
  import { BitkitTooltipProps } from '../BitkitTooltip/BitkitTooltip';
3
3
  export interface BitkitDefinitionTooltipProps {
4
+ /** Action button rendered at the end of the tooltip, below the definition. */
4
5
  button?: BitkitTooltipProps['button'];
6
+ /** The term being defined. Rendered as the underlined trigger, so plain text only. */
5
7
  children: string;
8
+ /**
9
+ * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its
10
+ * parent's DOM subtree — a dialog already sets this for you.
11
+ */
12
+ disablePortal?: boolean;
13
+ /** Target for the "Learn more" link. `_blank` also sets `rel="noopener noreferrer"`. */
6
14
  learnMoreTarget?: BitkitTooltipProps['learnMoreTarget'];
15
+ /** Adds a "Learn more" link pointing here, for the fuller explanation. */
7
16
  learnMoreUrl?: BitkitTooltipProps['learnMoreUrl'];
17
+ /**
18
+ * How the definition opens. `click` (default) toggles it and keeps it open — the right choice when
19
+ * it carries a link or a button, which need a stable target. `hover` behaves like a plain tooltip.
20
+ */
8
21
  method?: 'click' | 'hover';
22
+ /** Where the tooltip sits relative to the term (default `top`). It flips if space is short. */
9
23
  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
24
+ /** The definition itself. */
10
25
  text: string;
26
+ /** Type size of the term, to match the surrounding copy. */
11
27
  textSize?: 'lg' | 'md' | 'sm';
28
+ /** Truncate the term with an ellipsis when it doesn't fit (default `true`). */
12
29
  truncate?: boolean;
13
30
  }
31
+ /**
32
+ * An inline glossary term: the word stays in the sentence, underlined, and reveals its definition
33
+ * on demand. Unlike `BitkitTooltip`, the trigger is the content — a `<button>` wrapping the term —
34
+ * so it is reachable by keyboard on its own.
35
+ *
36
+ * Defaults to `method="click"`, which latches the definition open; that is what makes a
37
+ * `learnMoreUrl` or `button` inside it actually clickable.
38
+ */
14
39
  declare const BitkitDefinitionTooltip: {
15
- ({ button, children, learnMoreTarget, learnMoreUrl, method, placement, text, textSize, truncate, }: BitkitDefinitionTooltipProps): import("react").JSX.Element;
40
+ ({ button, children, disablePortal, learnMoreTarget, learnMoreUrl, method, placement, text, textSize, truncate, }: BitkitDefinitionTooltipProps): import("react").JSX.Element;
16
41
  displayName: string;
17
42
  };
18
43
  export default BitkitDefinitionTooltip;
@@ -3,12 +3,21 @@ import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
3
3
  import { useState } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
  //#region lib/components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.tsx
6
- var BitkitDefinitionTooltip = ({ button, children, learnMoreTarget, learnMoreUrl, method = "click", placement = "top", text, textSize, truncate = true }) => {
6
+ /**
7
+ * An inline glossary term: the word stays in the sentence, underlined, and reveals its definition
8
+ * on demand. Unlike `BitkitTooltip`, the trigger is the content — a `<button>` wrapping the term —
9
+ * so it is reachable by keyboard on its own.
10
+ *
11
+ * Defaults to `method="click"`, which latches the definition open; that is what makes a
12
+ * `learnMoreUrl` or `button` inside it actually clickable.
13
+ */
14
+ var BitkitDefinitionTooltip = ({ button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = "click", placement = "top", text, textSize, truncate = true }) => {
7
15
  const style = useRecipe({ key: "definitionTooltip" });
8
16
  const [open, setOpen] = useState(false);
9
17
  return /* @__PURE__ */ jsx(BitkitTooltip, {
10
18
  button,
11
19
  closeOnClick: method === "click" ? false : void 0,
20
+ disablePortal,
12
21
  learnMoreTarget,
13
22
  learnMoreUrl,
14
23
  onOpenChange: method === "click" ? ({ open: nextOpen }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitDefinitionTooltip.js","names":[],"sources":["../../../lib/components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.tsx"],"sourcesContent":["import { chakra, useRecipe } from '@chakra-ui/react/styled-system';\nimport { type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { useState } from 'react';\n\nimport BitkitTooltip, { type BitkitTooltipProps } from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitDefinitionTooltipProps {\n button?: BitkitTooltipProps['button'];\n children: string;\n learnMoreTarget?: BitkitTooltipProps['learnMoreTarget'];\n learnMoreUrl?: BitkitTooltipProps['learnMoreUrl'];\n method?: 'click' | 'hover';\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n text: string;\n textSize?: 'lg' | 'md' | 'sm';\n truncate?: boolean;\n}\n\nconst BitkitDefinitionTooltip = ({\n button,\n children,\n learnMoreTarget,\n learnMoreUrl,\n method = 'click',\n placement = 'top',\n text,\n textSize,\n truncate = true,\n}: BitkitDefinitionTooltipProps) => {\n const style = useRecipe({ key: 'definitionTooltip' });\n const [open, setOpen] = useState(false);\n\n return (\n <BitkitTooltip\n button={button}\n closeOnClick={method === 'click' ? false : undefined}\n learnMoreTarget={learnMoreTarget}\n learnMoreUrl={learnMoreUrl}\n onOpenChange={\n method === 'click'\n ? ({ open: nextOpen }) => {\n if (!nextOpen) setOpen(false);\n }\n : undefined\n }\n open={method === 'click' ? open : undefined}\n openDelay={method === 'click' ? Infinity : undefined}\n placement={placement}\n text={text}\n >\n <chakra.button\n aria-expanded={method === 'click' ? open : undefined}\n css={style({ method, textSize })}\n onClick={method === 'click' ? () => setOpen(!open) : undefined}\n truncate={truncate}\n type=\"button\"\n >\n {children}\n </chakra.button>\n </BitkitTooltip>\n );\n};\n\nBitkitDefinitionTooltip.displayName = 'BitkitDefinitionTooltip';\n\nexport default BitkitDefinitionTooltip;\n"],"mappings":";;;;;AAkBA,IAAM,2BAA2B,EAC/B,QACA,UACA,iBACA,cACA,SAAS,SACT,YAAY,OACZ,MACA,UACA,WAAW,WACuB;CAClC,MAAM,QAAQ,UAAU,EAAE,KAAK,oBAAoB,CAAC;CACpD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACE,oBAAC,eAAD;EACU;EACR,cAAc,WAAW,UAAU,QAAQ,KAAA;EAC1B;EACH;EACd,cACE,WAAW,WACN,EAAE,MAAM,eAAe;GACtB,IAAI,CAAC,UAAU,QAAQ,KAAK;EAC9B,IACA,KAAA;EAEN,MAAM,WAAW,UAAU,OAAO,KAAA;EAClC,WAAW,WAAW,UAAU,WAAW,KAAA;EAChC;EACL;YAEN,oBAAC,OAAO,QAAR;GACE,iBAAe,WAAW,UAAU,OAAO,KAAA;GAC3C,KAAK,MAAM;IAAE;IAAQ;GAAS,CAAC;GAC/B,SAAS,WAAW,gBAAgB,QAAQ,CAAC,IAAI,IAAI,KAAA;GAC3C;GACV,MAAK;GAEJ;EACY,CAAA;CACF,CAAA;AAEnB;AAEA,wBAAwB,cAAc"}
1
+ {"version":3,"file":"BitkitDefinitionTooltip.js","names":[],"sources":["../../../lib/components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.tsx"],"sourcesContent":["import { chakra, useRecipe } from '@chakra-ui/react/styled-system';\nimport { type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { useState } from 'react';\n\nimport BitkitTooltip, { type BitkitTooltipProps } from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitDefinitionTooltipProps {\n /** Action button rendered at the end of the tooltip, below the definition. */\n button?: BitkitTooltipProps['button'];\n /** The term being defined. Rendered as the underlined trigger, so plain text only. */\n children: string;\n /**\n * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n */\n disablePortal?: boolean;\n /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n learnMoreTarget?: BitkitTooltipProps['learnMoreTarget'];\n /** Adds a \"Learn more\" link pointing here, for the fuller explanation. */\n learnMoreUrl?: BitkitTooltipProps['learnMoreUrl'];\n /**\n * How the definition opens. `click` (default) toggles it and keeps it open — the right choice when\n * it carries a link or a button, which need a stable target. `hover` behaves like a plain tooltip.\n */\n method?: 'click' | 'hover';\n /** Where the tooltip sits relative to the term (default `top`). It flips if space is short. */\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n /** The definition itself. */\n text: string;\n /** Type size of the term, to match the surrounding copy. */\n textSize?: 'lg' | 'md' | 'sm';\n /** Truncate the term with an ellipsis when it doesn't fit (default `true`). */\n truncate?: boolean;\n}\n\n/**\n * An inline glossary term: the word stays in the sentence, underlined, and reveals its definition\n * on demand. Unlike `BitkitTooltip`, the trigger is the content — a `<button>` wrapping the term —\n * so it is reachable by keyboard on its own.\n *\n * Defaults to `method=\"click\"`, which latches the definition open; that is what makes a\n * `learnMoreUrl` or `button` inside it actually clickable.\n */\nconst BitkitDefinitionTooltip = ({\n button,\n children,\n disablePortal,\n learnMoreTarget,\n learnMoreUrl,\n method = 'click',\n placement = 'top',\n text,\n textSize,\n truncate = true,\n}: BitkitDefinitionTooltipProps) => {\n const style = useRecipe({ key: 'definitionTooltip' });\n const [open, setOpen] = useState(false);\n\n return (\n <BitkitTooltip\n button={button}\n closeOnClick={method === 'click' ? false : undefined}\n disablePortal={disablePortal}\n learnMoreTarget={learnMoreTarget}\n learnMoreUrl={learnMoreUrl}\n onOpenChange={\n method === 'click'\n ? ({ open: nextOpen }) => {\n if (!nextOpen) setOpen(false);\n }\n : undefined\n }\n open={method === 'click' ? open : undefined}\n openDelay={method === 'click' ? Infinity : undefined}\n placement={placement}\n text={text}\n >\n <chakra.button\n aria-expanded={method === 'click' ? open : undefined}\n css={style({ method, textSize })}\n onClick={method === 'click' ? () => setOpen(!open) : undefined}\n truncate={truncate}\n type=\"button\"\n >\n {children}\n </chakra.button>\n </BitkitTooltip>\n );\n};\n\nBitkitDefinitionTooltip.displayName = 'BitkitDefinitionTooltip';\n\nexport default BitkitDefinitionTooltip;\n"],"mappings":";;;;;;;;;;;;;AA2CA,IAAM,2BAA2B,EAC/B,QACA,UACA,eACA,iBACA,cACA,SAAS,SACT,YAAY,OACZ,MACA,UACA,WAAW,WACuB;CAClC,MAAM,QAAQ,UAAU,EAAE,KAAK,oBAAoB,CAAC;CACpD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACE,oBAAC,eAAD;EACU;EACR,cAAc,WAAW,UAAU,QAAQ,KAAA;EAC5B;EACE;EACH;EACd,cACE,WAAW,WACN,EAAE,MAAM,eAAe;GACtB,IAAI,CAAC,UAAU,QAAQ,KAAK;EAC9B,IACA,KAAA;EAEN,MAAM,WAAW,UAAU,OAAO,KAAA;EAClC,WAAW,WAAW,UAAU,WAAW,KAAA;EAChC;EACL;YAEN,oBAAC,OAAO,QAAR;GACE,iBAAe,WAAW,UAAU,OAAO,KAAA;GAC3C,KAAK,MAAM;IAAE;IAAQ;GAAS,CAAC;GAC/B,SAAS,WAAW,gBAAgB,QAAQ,CAAC,IAAI,IAAI,KAAA;GAC3C;GACV,MAAK;GAEJ;EACY,CAAA;CACF,CAAA;AAEnB;AAEA,wBAAwB,cAAc"}
@@ -1,5 +1,5 @@
1
- import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
2
1
  import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
2
+ import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
3
3
  import DialogBody, { DialogBodyContext, resolveScrollBehavior } from "./DialogBodyContext.js";
4
4
  import { Box } from "@chakra-ui/react/box";
5
5
  import { chakra } from "@chakra-ui/react/styled-system";
@@ -1,13 +1,32 @@
1
1
  import { TooltipRootProps } from '@chakra-ui/react/tooltip';
2
2
  import { ReactNode } from 'react';
3
3
  export type BitkitLabelTooltipProps = {
4
+ /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. */
4
5
  children: ReactNode;
6
+ /** Render the trigger without a tooltip — for labels that only apply in some states. */
5
7
  disabled?: TooltipRootProps['disabled'];
8
+ /**
9
+ * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its
10
+ * parent's DOM subtree — a dialog already sets this for you.
11
+ */
12
+ disablePortal?: boolean;
13
+ /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
6
14
  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
15
+ /** The label. Keep it to a couple of words — this is a name, not an explanation. */
7
16
  text: string;
8
17
  };
18
+ /**
19
+ * Names a control that shows no text of its own, typically an icon button. Small, tight and
20
+ * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
21
+ *
22
+ * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
23
+ * An icon-only control still needs its own `aria-label`.
24
+ *
25
+ * The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.
26
+ * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.
27
+ */
9
28
  declare const BitkitLabelTooltip: {
10
- ({ children, disabled, placement, text }: BitkitLabelTooltipProps): import("react").JSX.Element;
29
+ ({ children, disablePortal, disabled, placement, text, }: BitkitLabelTooltipProps): import("react").JSX.Element;
11
30
  displayName: string;
12
31
  };
13
32
  export default BitkitLabelTooltip;
@@ -1,9 +1,21 @@
1
- import { useRef } from "react";
1
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
2
+ import { useContext, useRef } from "react";
2
3
  import { jsx, jsxs } from "react/jsx-runtime";
3
4
  import { Portal } from "@chakra-ui/react/portal";
4
5
  import { Tooltip } from "@chakra-ui/react/tooltip";
5
6
  //#region lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx
6
- var BitkitLabelTooltip = ({ children, disabled, placement = "top", text }) => {
7
+ /**
8
+ * Names a control that shows no text of its own, typically an icon button. Small, tight and
9
+ * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.
10
+ *
11
+ * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.
12
+ * An icon-only control still needs its own `aria-label`.
13
+ *
14
+ * The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.
15
+ * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.
16
+ */
17
+ var BitkitLabelTooltip = ({ children, disablePortal, disabled, placement = "top", text }) => {
18
+ const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
7
19
  const triggerRef = useRef(null);
8
20
  return /* @__PURE__ */ jsxs(Tooltip.Root, {
9
21
  disabled,
@@ -21,7 +33,10 @@ var BitkitLabelTooltip = ({ children, disabled, placement = "top", text }) => {
21
33
  ref: triggerRef,
22
34
  asChild: true,
23
35
  children
24
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: text }) }) })]
36
+ }), /* @__PURE__ */ jsx(Portal, {
37
+ disabled: disablePortal || disablePortalFromContext,
38
+ children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: text }) })
39
+ })]
25
40
  });
26
41
  };
27
42
  BitkitLabelTooltip.displayName = "BitkitLabelTooltip";
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useRef } from 'react';\n\nexport type BitkitLabelTooltipProps = {\n children: ReactNode;\n disabled?: TooltipRootProps['disabled'];\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n text: string;\n};\n\nconst BitkitLabelTooltip = ({ children, disabled, placement = 'top', text }: BitkitLabelTooltipProps) => {\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, Dialog.CloseTrigger), the outer trigger's id and\n // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n // precedence over the id lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/semibold\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Portal>\n <Tooltip.Positioner>\n <Tooltip.Content>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":";;;;;AAWA,IAAM,sBAAsB,EAAE,UAAU,UAAU,YAAY,OAAO,WAAoC;CAOvG,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;YAJZ,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA,EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}
1
+ {"version":3,"file":"BitkitLabelTooltip.js","names":[],"sources":["../../../lib/components/BitkitLabelTooltip/BitkitLabelTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitLabelTooltipProps = {\n /** The control the tooltip labels. Rendered via `asChild`, so it must accept a ref. */\n children: ReactNode;\n /** Render the trigger without a tooltip — for labels that only apply in some states. */\n disabled?: TooltipRootProps['disabled'];\n /**\n * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n */\n disablePortal?: boolean;\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 label. Keep it to a couple of words — this is a name, not an explanation. */\n text: string;\n};\n\n/**\n * Names a control that shows no text of its own, typically an icon button. Small, tight and\n * semibold, in contrast to `BitkitTooltip`, which explains rather than labels.\n *\n * Note this only *describes* the trigger to sighted users — it does not give it an accessible name.\n * An icon-only control still needs its own `aria-label`.\n *\n * The content renders in a portal so it escapes ancestors that trap stacking or clip overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitLabelTooltip = ({\n children,\n disablePortal,\n disabled,\n placement = 'top',\n text,\n}: BitkitLabelTooltipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\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, Dialog.CloseTrigger), the outer trigger's id and\n // data-scope/data-part overwrite ours on the shared node, so `getTriggerEl()`\n // can't find it and the tooltip loses its anchor. `getAnchorElement` takes\n // precedence over the id lookup, so this is safe in the standalone case too.\n const triggerRef = useRef<HTMLElement>(null);\n\n return (\n <Tooltip.Root\n disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/semibold\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Tooltip.Positioner>\n <Tooltip.Content>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitLabelTooltip.displayName = 'BitkitLabelTooltip';\n\nexport default BitkitLabelTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAM,sBAAsB,EAC1B,UACA,eACA,UACA,YAAY,OACZ,WAC6B;CAC7B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;YAJZ,CAME,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;aACjC,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT,EAAA,UAAkB,KAAsB,CAAA,EACtB,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,mBAAmB,cAAc"}
@@ -1,10 +1,10 @@
1
1
  import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
2
2
  import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
3
3
  import IconWarningYellow from "../../icons/IconWarningYellow.js";
4
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
4
5
  import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
5
6
  import { withSubComponents } from "../../utilities/withSubComponents.js";
6
7
  import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
7
- import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
8
8
  import BitkitField from "../BitkitField/BitkitField.js";
9
9
  import BitkitMultiselectMenu from "../BitkitMultiselectMenu/BitkitMultiselectMenu.js";
10
10
  import BitkitTag from "../BitkitTag/BitkitTag.js";
@@ -1,13 +1,31 @@
1
1
  import { TooltipRootProps } from '@chakra-ui/react/tooltip';
2
2
  import { ReactNode } from 'react';
3
3
  export type BitkitOverflowTooltipProps = {
4
+ /** The truncated element the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref. */
4
5
  children: ReactNode;
6
+ /** Render the trigger without a tooltip — pass `true` when the text isn't actually truncated. */
5
7
  disabled?: TooltipRootProps['disabled'];
8
+ /**
9
+ * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its
10
+ * parent's DOM subtree — a dialog already sets this for you.
11
+ */
12
+ disablePortal?: boolean;
13
+ /** Where the tooltip sits relative to the trigger (default `right`). It flips if space is short. */
6
14
  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
15
+ /** The full, untruncated text. */
7
16
  text: string;
8
17
  };
18
+ /**
19
+ * Reveals text that its container had to truncate. Light, roomy (up to 800px) and plain — it repeats
20
+ * content the user can already partly see, so it carries no icon, link or action.
21
+ *
22
+ * The content renders in a portal, which matters more here than elsewhere: the trigger lives in a
23
+ * clipping container by definition, and an inline tooltip would be cut off by the very `overflow`
24
+ * that truncated the text. Dialogs turn the portal off through `BitkitPortalContext`;
25
+ * `disablePortal` is the manual override.
26
+ */
9
27
  declare const BitkitOverflowTooltip: {
10
- ({ children, disabled, placement, text }: BitkitOverflowTooltipProps): import("react").JSX.Element;
28
+ ({ children, disablePortal, disabled, placement, text, }: BitkitOverflowTooltipProps): import("react").JSX.Element;
11
29
  displayName: string;
12
30
  };
13
31
  export default BitkitOverflowTooltip;
@@ -1,9 +1,21 @@
1
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
1
2
  import { rem } from "../../theme/themeUtils.js";
2
- import { useRef } from "react";
3
+ import { useContext, useRef } from "react";
3
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { Portal } from "@chakra-ui/react/portal";
4
6
  import { Tooltip } from "@chakra-ui/react/tooltip";
5
7
  //#region lib/components/BitkitOverflowTooltip/BitkitOverflowTooltip.tsx
6
- var BitkitOverflowTooltip = ({ children, disabled, placement = "right", text }) => {
8
+ /**
9
+ * Reveals text that its container had to truncate. Light, roomy (up to 800px) and plain — it repeats
10
+ * content the user can already partly see, so it carries no icon, link or action.
11
+ *
12
+ * The content renders in a portal, which matters more here than elsewhere: the trigger lives in a
13
+ * clipping container by definition, and an inline tooltip would be cut off by the very `overflow`
14
+ * that truncated the text. Dialogs turn the portal off through `BitkitPortalContext`;
15
+ * `disablePortal` is the manual override.
16
+ */
17
+ var BitkitOverflowTooltip = ({ children, disablePortal, disabled, placement = "right", text }) => {
18
+ const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
7
19
  const triggerRef = useRef(null);
8
20
  return /* @__PURE__ */ jsxs(Tooltip.Root, {
9
21
  disabled,
@@ -22,10 +34,13 @@ var BitkitOverflowTooltip = ({ children, disabled, placement = "right", text })
22
34
  ref: triggerRef,
23
35
  asChild: true,
24
36
  children
25
- }), /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
26
- css: { maxWidth: rem(800) },
27
- children: text
28
- }) })]
37
+ }), /* @__PURE__ */ jsx(Portal, {
38
+ disabled: disablePortal || disablePortalFromContext,
39
+ children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
40
+ css: { maxWidth: rem(800) },
41
+ children: text
42
+ }) })
43
+ })]
29
44
  });
30
45
  };
31
46
  BitkitOverflowTooltip.displayName = "BitkitOverflowTooltip";
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitOverflowTooltip.js","names":[],"sources":["../../../lib/components/BitkitOverflowTooltip/BitkitOverflowTooltip.tsx"],"sourcesContent":["import { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useRef } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\n\nexport type BitkitOverflowTooltipProps = {\n children: ReactNode;\n disabled?: TooltipRootProps['disabled'];\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n text: string;\n};\n\nconst BitkitOverflowTooltip = ({ children, disabled, placement = 'right', text }: BitkitOverflowTooltipProps) => {\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 disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/regular\"\n variant=\"light\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Tooltip.Positioner>\n <Tooltip.Content css={{ maxWidth: rem(800) }}>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Tooltip.Root>\n );\n};\n\nBitkitOverflowTooltip.displayName = 'BitkitOverflowTooltip';\n\nexport default BitkitOverflowTooltip;\n"],"mappings":";;;;;AAYA,IAAM,yBAAyB,EAAE,UAAU,UAAU,YAAY,SAAS,WAAuC;CAO/G,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EACV,SAAQ;YALV,CAOE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;GAAiB,KAAK,EAAE,UAAU,IAAI,GAAG,EAAE;aAAI;EAAsB,CAAA,EACnD,CAAA,CACR;;AAElB;AAEA,sBAAsB,cAAc"}
1
+ {"version":3,"file":"BitkitOverflowTooltip.js","names":[],"sources":["../../../lib/components/BitkitOverflowTooltip/BitkitOverflowTooltip.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitOverflowTooltipProps = {\n /** The truncated element the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref. */\n children: ReactNode;\n /** Render the trigger without a tooltip — pass `true` when the text isn't actually truncated. */\n disabled?: TooltipRootProps['disabled'];\n /**\n * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n */\n disablePortal?: boolean;\n /** Where the tooltip sits relative to the trigger (default `right`). It flips if space is short. */\n placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n /** The full, untruncated text. */\n text: string;\n};\n\n/**\n * Reveals text that its container had to truncate. Light, roomy (up to 800px) and plain — it repeats\n * content the user can already partly see, so it carries no icon, link or action.\n *\n * The content renders in a portal, which matters more here than elsewhere: the trigger lives in a\n * clipping container by definition, and an inline tooltip would be cut off by the very `overflow`\n * that truncated the text. Dialogs turn the portal off through `BitkitPortalContext`;\n * `disablePortal` is the manual override.\n */\nconst BitkitOverflowTooltip = ({\n children,\n disablePortal,\n disabled,\n placement = 'right',\n text,\n}: BitkitOverflowTooltipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\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 disabled={disabled}\n paddingSize=\"sm\"\n positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n textStyle=\"sm/regular\"\n variant=\"light\"\n >\n <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n {children}\n </Tooltip.Trigger>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Tooltip.Positioner>\n <Tooltip.Content css={{ maxWidth: rem(800) }}>{text}</Tooltip.Content>\n </Tooltip.Positioner>\n </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitOverflowTooltip.displayName = 'BitkitOverflowTooltip';\n\nexport default BitkitOverflowTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAM,yBAAyB,EAC7B,UACA,eACA,UACA,YAAY,SACZ,WACgC;CAChC,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACY;EACV,aAAY;EACZ,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAC5G,WAAU;EACV,SAAQ;YALV,CAOE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD;EACc,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;aACjC,oBAAC,QAAQ,YAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IAAiB,KAAK,EAAE,UAAU,IAAI,GAAG,EAAE;cAAI;GAAsB,CAAA,EACnD,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,sBAAsB,cAAc"}
@@ -1,10 +1,10 @@
1
1
  import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
2
2
  import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
3
3
  import IconWarningYellow from "../../icons/IconWarningYellow.js";
4
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
4
5
  import { withSubComponents } from "../../utilities/withSubComponents.js";
5
6
  import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
6
7
  import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
7
- import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
8
8
  import BitkitField from "../BitkitField/BitkitField.js";
9
9
  import { forwardRef, useContext } from "react";
10
10
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -3,21 +3,59 @@ 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
+ /**
16
+ * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its
17
+ * parent's DOM subtree — a dialog already sets this for you.
18
+ */
19
+ disablePortal?: boolean;
20
+ /** Render the trigger without a tooltip — for hints that only apply in some states. */
9
21
  disabled?: TooltipRootProps['disabled'];
22
+ /**
23
+ * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an
24
+ * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.
25
+ */
10
26
  icon?: BitkitIconComponent;
27
+ /** Target for the "Learn more" link. `_blank` also sets `rel="noopener noreferrer"`. */
11
28
  learnMoreTarget?: HTMLAnchorElement['target'];
29
+ /**
30
+ * Adds a "Learn more" link pointing here. Setting it makes the tooltip interactive, so the
31
+ * pointer can move into the tooltip to reach the link.
32
+ */
12
33
  learnMoreUrl?: string;
34
+ /** Called when the tooltip opens or closes, including from hover and focus. */
13
35
  onOpenChange?: TooltipRootProps['onOpenChange'];
36
+ /** Controlled open state. Leave unset to let hover and focus drive it. */
14
37
  open?: TooltipRootProps['open'];
38
+ /** Delay in ms before an uncontrolled tooltip opens on hover. */
15
39
  openDelay?: TooltipRootProps['openDelay'];
40
+ /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
16
41
  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
42
+ /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */
17
43
  text: string;
18
44
  };
45
+ /**
46
+ * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
47
+ * after it, and `learnMoreUrl`/`button` add a link and an action.
48
+ *
49
+ * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
50
+ * open while the pointer travels into it, so the link and the button can actually be reached.
51
+ *
52
+ * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,
53
+ * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through
54
+ * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is
55
+ * the manual override.
56
+ */
19
57
  declare const BitkitTooltip: {
20
- ({ button, children, closeOnClick, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement, text, }: BitkitTooltipProps): import("react").JSX.Element;
58
+ ({ button, children, closeOnClick, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement, text, }: BitkitTooltipProps): import("react").JSX.Element;
21
59
  displayName: string;
22
60
  };
23
61
  export default BitkitTooltip;
@@ -1,12 +1,27 @@
1
+ import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
1
2
  import { rem } from "../../theme/themeUtils.js";
2
3
  import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
3
4
  import { Box } from "@chakra-ui/react/box";
4
- import { useRef } from "react";
5
+ import { useContext, useRef } from "react";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
+ import { Portal } from "@chakra-ui/react/portal";
6
8
  import { Tooltip } from "@chakra-ui/react/tooltip";
7
9
  import { Link } from "@chakra-ui/react/link";
8
10
  //#region lib/components/BitkitTooltip/BitkitTooltip.tsx
9
- var BitkitTooltip = ({ button, children, closeOnClick, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement = "top", text }) => {
11
+ /**
12
+ * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
13
+ * after it, and `learnMoreUrl`/`button` add a link and an action.
14
+ *
15
+ * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
16
+ * open while the pointer travels into it, so the link and the button can actually be reached.
17
+ *
18
+ * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,
19
+ * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through
20
+ * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is
21
+ * the manual override.
22
+ */
23
+ var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement = "top", text }) => {
24
+ const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
10
25
  const isInteractive = !!learnMoreUrl || !!button;
11
26
  const triggerRef = useRef(null);
12
27
  return /* @__PURE__ */ jsxs(Tooltip.Root, {
@@ -29,37 +44,40 @@ var BitkitTooltip = ({ button, children, closeOnClick, disabled, icon: Icon, lea
29
44
  ref: triggerRef,
30
45
  asChild: true,
31
46
  children
32
- }), /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
33
- maxWidth: rem(320),
34
- css: isInteractive && { minWidth: rem(240) },
35
- children: [
36
- /* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }),
37
- /* @__PURE__ */ jsxs(Box, {
38
- display: "flex",
39
- gap: "8",
40
- children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
41
- flexShrink: "0",
42
- size: "16"
43
- })]
44
- }),
45
- isInteractive && /* @__PURE__ */ jsxs(Box, {
46
- alignItems: "center",
47
- display: "flex",
48
- gap: "16",
49
- marginBlockStart: "16",
50
- children: [learnMoreUrl && /* @__PURE__ */ jsx(Link, {
51
- color: "color/purple/highlight",
52
- href: learnMoreUrl,
53
- rel: learnMoreTarget === "_blank" ? "noopener noreferrer" : void 0,
54
- target: learnMoreTarget,
55
- children: "Learn more"
56
- }), button && /* @__PURE__ */ jsx(BitkitColorButton, {
57
- css: { marginInlineStart: "auto" },
58
- ...button
59
- })]
60
- })
61
- ]
62
- }) })]
47
+ }), /* @__PURE__ */ jsx(Portal, {
48
+ disabled: disablePortal || disablePortalFromContext,
49
+ children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
50
+ maxWidth: rem(320),
51
+ css: isInteractive && { minWidth: rem(240) },
52
+ children: [
53
+ /* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }),
54
+ /* @__PURE__ */ jsxs(Box, {
55
+ display: "flex",
56
+ gap: "8",
57
+ children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
58
+ flexShrink: "0",
59
+ size: "16"
60
+ })]
61
+ }),
62
+ isInteractive && /* @__PURE__ */ jsxs(Box, {
63
+ alignItems: "center",
64
+ display: "flex",
65
+ gap: "16",
66
+ marginBlockStart: "16",
67
+ children: [learnMoreUrl && /* @__PURE__ */ jsx(Link, {
68
+ color: "color/purple/highlight",
69
+ href: learnMoreUrl,
70
+ rel: learnMoreTarget === "_blank" ? "noopener noreferrer" : void 0,
71
+ target: learnMoreTarget,
72
+ children: "Learn more"
73
+ }), button && /* @__PURE__ */ jsx(BitkitColorButton, {
74
+ css: { marginInlineStart: "auto" },
75
+ ...button
76
+ })]
77
+ })
78
+ ]
79
+ }) })
80
+ })]
63
81
  });
64
82
  };
65
83
  BitkitTooltip.displayName = "BitkitTooltip";
@@ -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":";;;;;;;;AAwBA,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"}
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 { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\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 /**\n * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree — a dialog already sets this for you.\n */\n disablePortal?: boolean;\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 *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is\n * the manual override.\n */\nconst BitkitTooltip = ({\n button,\n children,\n closeOnClick,\n disablePortal,\n disabled,\n icon: Icon,\n learnMoreTarget,\n learnMoreUrl,\n onOpenChange,\n open,\n openDelay,\n placement = 'top',\n text,\n}: BitkitTooltipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\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 <Portal disabled={disablePortal || disablePortalFromContext}>\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 </Portal>\n </Tooltip.Root>\n );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAM,iBAAiB,EACrB,QACA,UACA,cACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,WACA,YAAY,OACZ,WACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,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,QAAD;GAAQ,UAAU,iBAAiB;aACjC,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,UAAU,IAAI,GAAG;IAAG,KAAK,iBAAiB,EAAE,UAAU,IAAI,GAAG,EAAE;cAAhF;KACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA;KACf,qBAAC,KAAD;MAAK,SAAQ;MAAO,KAAI;gBAAxB,CACG,MACA,QAAQ,oBAAC,MAAD;OAAM,YAAW;OAAI,MAAK;MAAM,CAAA,CACtC;;KACJ,iBACC,qBAAC,KAAD;MAAK,YAAW;MAAS,SAAQ;MAAO,KAAI;MAAK,kBAAiB;gBAAlE,CACG,gBACC,oBAAC,MAAD;OACE,OAAM;OACN,MAAM;OACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;OAC5D,QAAQ;iBACT;MAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;OAAmB,KAAK,EAAE,mBAAmB,OAAO;OAAG,GAAI;MAAS,CAAA,CAC5E;;IAEQ;MACC,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.325",
4
+ "version": "0.3.327",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",