@bitrise/bitkit-v2 0.3.463 → 0.3.464
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.
|
@@ -33,6 +33,7 @@ var BitkitToggletip = ({ button, children, defaultOpen, disablePortal, disabled,
|
|
|
33
33
|
if (disabled) return /* @__PURE__ */ jsx(Fragment$1, { children });
|
|
34
34
|
return /* @__PURE__ */ jsxs(Root, {
|
|
35
35
|
defaultOpen,
|
|
36
|
+
lazyMount: true,
|
|
36
37
|
onOpenChange,
|
|
37
38
|
open,
|
|
38
39
|
positioning: {
|
|
@@ -42,6 +43,7 @@ var BitkitToggletip = ({ button, children, defaultOpen, disablePortal, disabled,
|
|
|
42
43
|
crossAxis: 0
|
|
43
44
|
}
|
|
44
45
|
},
|
|
46
|
+
unmountOnExit: true,
|
|
45
47
|
children: [wrapTrigger || !isValidElement(children) ? /* @__PURE__ */ jsx(Trigger, {
|
|
46
48
|
"aria-label": triggerAriaLabel,
|
|
47
49
|
css: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToggletip.js","names":[],"sources":["../../../lib/components/BitkitToggletip/BitkitToggletip.tsx"],"sourcesContent":["import { Popover as ArkPopover, type PopoverRootProps } from '@ark-ui/react/popover';\nimport { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport {\n type PopoverArrowProps,\n type PopoverArrowTipProps,\n type PopoverContentProps,\n type PopoverPositionerProps,\n type PopoverTitleProps,\n type PopoverTriggerProps,\n} from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { createSlotRecipeContext } from '@chakra-ui/react/styled-system';\nimport { isValidElement, type ReactNode, useContext } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\n// Chakra's own Popover is Ark's popover under the `popover` recipe; this is the same composition\n// under `toggletip`, so the bubble can share the tooltip's surface instead of the popover's card.\nconst { withRootProvider, withContext } = createSlotRecipeContext({ key: 'toggletip' });\nconst Root = withRootProvider<PopoverRootProps>(ArkPopover.Root);\nconst Trigger = withContext<HTMLButtonElement, PopoverTriggerProps>(ArkPopover.Trigger, 'trigger', {\n forwardAsChild: true,\n});\nconst Positioner = withContext<HTMLDivElement, PopoverPositionerProps>(ArkPopover.Positioner, 'positioner', {\n forwardAsChild: true,\n});\nconst Content = withContext<HTMLDivElement, PopoverContentProps>(ArkPopover.Content, 'content', {\n forwardAsChild: true,\n});\n// The text is the popover's title, which is what names its dialog for assistive technology.\nconst Title = withContext<HTMLDivElement, PopoverTitleProps>(ArkPopover.Title, 'title', { forwardAsChild: true });\nconst Arrow = withContext<HTMLDivElement, PopoverArrowProps>(ArkPopover.Arrow, 'arrow', { forwardAsChild: true });\nconst ArrowTip = withContext<HTMLDivElement, PopoverArrowTipProps>(ArkPopover.ArrowTip, 'arrowTip', {\n forwardAsChild: true,\n});\n\nexport type BitkitToggletipProps = {\n /** Action button at the end of the toggletip. Defaults to the `white` colour variant, the one that reads on its dark background. */\n button?: BitkitColorButtonProps;\n /**\n * The trigger the toggletip opens from. Rendered via `asChild`, so it must be a focusable control\n * that accepts a ref — unless `wrapTrigger` puts a button in between.\n */\n children: ReactNode;\n /** Open on first render, for an uncontrolled toggletip. */\n defaultOpen?: PopoverRootProps['defaultOpen'];\n /**\n * Render the toggletip 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 toggletip — for hints that only apply in some states. */\n disabled?: boolean;\n /** Icon after the text — `IconArrowNortheast` when the trigger opens something in a new tab, for instance. */\n icon?: BitkitIconComponent;\n /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n learnMoreTarget?: HTMLAnchorElement['target'];\n /** Adds a \"Learn more\" link pointing here, for the fuller explanation. */\n learnMoreUrl?: string;\n /** Called when the toggletip opens or closes. */\n onOpenChange?: PopoverRootProps['onOpenChange'];\n /** Controls the open state. */\n open?: PopoverRootProps['open'];\n /** Where the toggletip sits relative to the trigger (default `top`). It flips if space is short. */\n placement?: NonNullable<PopoverRootProps['positioning']>['placement'];\n /** The toggletip's text. */\n text: string;\n /** Accessible name of the `wrapTrigger` button, for a trigger with no text of its own, like an icon. */\n triggerAriaLabel?: string;\n /**\n * Put the trigger inside a button instead of rendering on it — for a trigger that is not a control\n * itself, like a badge or an icon. The button takes the click, the tap and the keyboard.\n */\n wrapTrigger?: boolean;\n};\n\n/**\n * A tooltip's bubble that opens on click, tap or Enter and stays open, so what it carries — a \"Learn\n * more\" link, an action button — can be reached by pointer, touch and keyboard alike. It is a\n * popover, not a tooltip: a tooltip closes as soon as focus leaves its trigger and ignores touch, so\n * anything clickable inside one can't be reached.\n *\n * Reach for `BitkitTooltip` when the hint is text only; this component when it links or acts.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking or clips overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitToggletip = ({\n button,\n children,\n defaultOpen,\n disablePortal,\n disabled,\n icon: Icon,\n learnMoreTarget,\n learnMoreUrl,\n onOpenChange,\n open,\n placement = 'top',\n text,\n triggerAriaLabel,\n wrapTrigger,\n}: BitkitToggletipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const hasActions = !!learnMoreUrl || !!button;\n\n if (disabled) {\n return <>{children}</>;\n }\n\n return (\n <Root\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n open={open}\n positioning={{ placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n >\n {wrapTrigger || !isValidElement(children) ? (\n <Trigger\n aria-label={triggerAriaLabel}\n css={{\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 0,\n color: 'inherit',\n display: 'inline-flex',\n font: 'inherit',\n padding: 0,\n // The button owns the tab stop, but the focus ring belongs on the trigger inside it: an\n // outline follows the border-radius of the element it is drawn on, and the button has\n // none — so leaving it here squares off a pill or a round trigger.\n _focusVisible: {\n outline: 'none',\n '& > *': {\n outlineColor: 'var(--focus-ring-color)',\n outlineOffset: 'var(--focus-ring-offset, 2px)',\n outlineStyle: 'var(--focus-ring-style, solid)',\n outlineWidth: 'var(--focus-ring-width, 2px)',\n },\n },\n }}\n >\n {children}\n </Trigger>\n ) : (\n <Trigger asChild>{children}</Trigger>\n )}\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Positioner>\n <Content>\n <Arrow>\n <ArrowTip />\n </Arrow>\n <Box display=\"flex\" gap=\"8\">\n <Title>{text}</Title>\n {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n </Box>\n {hasActions && (\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 colorVariant=\"white\" marginInlineStart=\"auto\" {...button} />}\n </Box>\n )}\n </Content>\n </Positioner>\n </Portal>\n </Root>\n );\n};\n\nBitkitToggletip.displayName = 'BitkitToggletip';\n\nexport default BitkitToggletip;\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,EAAE,kBAAkB,gBAAgB,wBAAwB,EAAE,KAAK,YAAY,CAAC;AACtF,IAAM,OAAO,iBAAmC,QAAW,IAAI;AAC/D,IAAM,UAAU,YAAoD,QAAW,SAAS,WAAW,EACjG,gBAAgB,KAClB,CAAC;AACD,IAAM,aAAa,YAAoD,QAAW,YAAY,cAAc,EAC1G,gBAAgB,KAClB,CAAC;AACD,IAAM,UAAU,YAAiD,QAAW,SAAS,WAAW,EAC9F,gBAAgB,KAClB,CAAC;AAED,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,WAAW,YAAkD,QAAW,UAAU,YAAY,EAClG,gBAAgB,KAClB,CAAC;;;;;;;;;;;;AAqDD,IAAM,mBAAmB,EACvB,QACA,UACA,aACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,YAAY,OACZ,MACA,kBACA,kBAC0B;CAC1B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAEvC,IAAI,UACF,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,
|
|
1
|
+
{"version":3,"file":"BitkitToggletip.js","names":[],"sources":["../../../lib/components/BitkitToggletip/BitkitToggletip.tsx"],"sourcesContent":["import { Popover as ArkPopover, type PopoverRootProps } from '@ark-ui/react/popover';\nimport { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport {\n type PopoverArrowProps,\n type PopoverArrowTipProps,\n type PopoverContentProps,\n type PopoverPositionerProps,\n type PopoverTitleProps,\n type PopoverTriggerProps,\n} from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { createSlotRecipeContext } from '@chakra-ui/react/styled-system';\nimport { isValidElement, type ReactNode, useContext } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\n// Chakra's own Popover is Ark's popover under the `popover` recipe; this is the same composition\n// under `toggletip`, so the bubble can share the tooltip's surface instead of the popover's card.\nconst { withRootProvider, withContext } = createSlotRecipeContext({ key: 'toggletip' });\nconst Root = withRootProvider<PopoverRootProps>(ArkPopover.Root);\nconst Trigger = withContext<HTMLButtonElement, PopoverTriggerProps>(ArkPopover.Trigger, 'trigger', {\n forwardAsChild: true,\n});\nconst Positioner = withContext<HTMLDivElement, PopoverPositionerProps>(ArkPopover.Positioner, 'positioner', {\n forwardAsChild: true,\n});\nconst Content = withContext<HTMLDivElement, PopoverContentProps>(ArkPopover.Content, 'content', {\n forwardAsChild: true,\n});\n// The text is the popover's title, which is what names its dialog for assistive technology.\nconst Title = withContext<HTMLDivElement, PopoverTitleProps>(ArkPopover.Title, 'title', { forwardAsChild: true });\nconst Arrow = withContext<HTMLDivElement, PopoverArrowProps>(ArkPopover.Arrow, 'arrow', { forwardAsChild: true });\nconst ArrowTip = withContext<HTMLDivElement, PopoverArrowTipProps>(ArkPopover.ArrowTip, 'arrowTip', {\n forwardAsChild: true,\n});\n\nexport type BitkitToggletipProps = {\n /** Action button at the end of the toggletip. Defaults to the `white` colour variant, the one that reads on its dark background. */\n button?: BitkitColorButtonProps;\n /**\n * The trigger the toggletip opens from. Rendered via `asChild`, so it must be a focusable control\n * that accepts a ref — unless `wrapTrigger` puts a button in between.\n */\n children: ReactNode;\n /** Open on first render, for an uncontrolled toggletip. */\n defaultOpen?: PopoverRootProps['defaultOpen'];\n /**\n * Render the toggletip 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 toggletip — for hints that only apply in some states. */\n disabled?: boolean;\n /** Icon after the text — `IconArrowNortheast` when the trigger opens something in a new tab, for instance. */\n icon?: BitkitIconComponent;\n /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n learnMoreTarget?: HTMLAnchorElement['target'];\n /** Adds a \"Learn more\" link pointing here, for the fuller explanation. */\n learnMoreUrl?: string;\n /** Called when the toggletip opens or closes. */\n onOpenChange?: PopoverRootProps['onOpenChange'];\n /** Controls the open state. */\n open?: PopoverRootProps['open'];\n /** Where the toggletip sits relative to the trigger (default `top`). It flips if space is short. */\n placement?: NonNullable<PopoverRootProps['positioning']>['placement'];\n /** The toggletip's text. */\n text: string;\n /** Accessible name of the `wrapTrigger` button, for a trigger with no text of its own, like an icon. */\n triggerAriaLabel?: string;\n /**\n * Put the trigger inside a button instead of rendering on it — for a trigger that is not a control\n * itself, like a badge or an icon. The button takes the click, the tap and the keyboard.\n */\n wrapTrigger?: boolean;\n};\n\n/**\n * A tooltip's bubble that opens on click, tap or Enter and stays open, so what it carries — a \"Learn\n * more\" link, an action button — can be reached by pointer, touch and keyboard alike. It is a\n * popover, not a tooltip: a tooltip closes as soon as focus leaves its trigger and ignores touch, so\n * anything clickable inside one can't be reached.\n *\n * Reach for `BitkitTooltip` when the hint is text only; this component when it links or acts.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking or clips overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitToggletip = ({\n button,\n children,\n defaultOpen,\n disablePortal,\n disabled,\n icon: Icon,\n learnMoreTarget,\n learnMoreUrl,\n onOpenChange,\n open,\n placement = 'top',\n text,\n triggerAriaLabel,\n wrapTrigger,\n}: BitkitToggletipProps) => {\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const hasActions = !!learnMoreUrl || !!button;\n\n if (disabled) {\n return <>{children}</>;\n }\n\n return (\n // Mounted only while open, like Chakra's tooltip: a list of closed toggletips keeps no content in the DOM.\n <Root\n defaultOpen={defaultOpen}\n lazyMount\n onOpenChange={onOpenChange}\n open={open}\n positioning={{ placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n unmountOnExit\n >\n {wrapTrigger || !isValidElement(children) ? (\n <Trigger\n aria-label={triggerAriaLabel}\n css={{\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 0,\n color: 'inherit',\n display: 'inline-flex',\n font: 'inherit',\n padding: 0,\n // The button owns the tab stop, but the focus ring belongs on the trigger inside it: an\n // outline follows the border-radius of the element it is drawn on, and the button has\n // none — so leaving it here squares off a pill or a round trigger.\n _focusVisible: {\n outline: 'none',\n '& > *': {\n outlineColor: 'var(--focus-ring-color)',\n outlineOffset: 'var(--focus-ring-offset, 2px)',\n outlineStyle: 'var(--focus-ring-style, solid)',\n outlineWidth: 'var(--focus-ring-width, 2px)',\n },\n },\n }}\n >\n {children}\n </Trigger>\n ) : (\n <Trigger asChild>{children}</Trigger>\n )}\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Positioner>\n <Content>\n <Arrow>\n <ArrowTip />\n </Arrow>\n <Box display=\"flex\" gap=\"8\">\n <Title>{text}</Title>\n {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n </Box>\n {hasActions && (\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 colorVariant=\"white\" marginInlineStart=\"auto\" {...button} />}\n </Box>\n )}\n </Content>\n </Positioner>\n </Portal>\n </Root>\n );\n};\n\nBitkitToggletip.displayName = 'BitkitToggletip';\n\nexport default BitkitToggletip;\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,EAAE,kBAAkB,gBAAgB,wBAAwB,EAAE,KAAK,YAAY,CAAC;AACtF,IAAM,OAAO,iBAAmC,QAAW,IAAI;AAC/D,IAAM,UAAU,YAAoD,QAAW,SAAS,WAAW,EACjG,gBAAgB,KAClB,CAAC;AACD,IAAM,aAAa,YAAoD,QAAW,YAAY,cAAc,EAC1G,gBAAgB,KAClB,CAAC;AACD,IAAM,UAAU,YAAiD,QAAW,SAAS,WAAW,EAC9F,gBAAgB,KAClB,CAAC;AAED,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,WAAW,YAAkD,QAAW,UAAU,YAAY,EAClG,gBAAgB,KAClB,CAAC;;;;;;;;;;;;AAqDD,IAAM,mBAAmB,EACvB,QACA,UACA,aACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,YAAY,OACZ,MACA,kBACA,kBAC0B;CAC1B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAEvC,IAAI,UACF,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,OAEE,qBAAC,MAAD;EACe;EACb,WAAA;EACc;EACR;EACN,aAAa;GAAE;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAChE,eAAA;EANF,UAAA,CAQG,eAAe,CAAC,eAAe,QAAQ,IACtC,oBAAC,SAAD;GACE,cAAY;GACZ,KAAK;IACH,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,QAAQ;IACR,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IAIT,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF;GACF;GAEC;EACM,CAAA,IAET,oBAAC,SAAD;GAAS,SAAA;GAAS;EAAkB,CAAA,GAEtC,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,SAAD,EAAA,UAAA;IACE,oBAAC,OAAD,EAAA,UACE,oBAAC,UAAD,CAAW,CAAA,EACN,CAAA;IACP,qBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAxB,UAAA,CACE,oBAAC,OAAD,EAAA,UAAQ,KAAY,CAAA,GACnB,QAAQ,oBAAC,MAAD;MAAM,YAAW;MAAI,MAAK;KAAM,CAAA,CACtC;;IACJ,cACC,qBAAC,KAAD;KAAK,YAAW;KAAS,SAAQ;KAAO,KAAI;KAAK,kBAAiB;KAAlE,UAAA,CACG,gBACC,oBAAC,MAAD;MACE,OAAM;MACN,MAAM;MACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;MAC5D,QAAQ;MACT,UAAA;KAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;MAAmB,cAAa;MAAQ,mBAAkB;MAAO,GAAI;KAAS,CAAA,CACtF;;GAEA,EAAA,CAAA,EACC,CAAA;EACN,CAAA,CACJ;;AAEV;AAEA,gBAAgB,cAAc"}
|