@bitrise/bitkit-v2 0.3.381 → 0.3.382

package/dist/components/BitkitTour/BitkitTour.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { Tour, useTour } from "@ark-ui/react/tour";
+import { preventBodyScroll } from "@zag-js/remove-scroll";
 //#region lib/components/BitkitTour/BitkitTour.tsx
 /**
 * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options
@@ -123,6 +124,7 @@ var BitkitTour = ({ tour }) => {
 	const step = tour.step;
 	const actions = step?.actions ?? [];
 	const { open } = tour;
+	useEffect(() => open ? preventBodyScroll() : void 0, [open]);
 	const contentId = tour.getContentProps().id;
 	useEffect(() => {
 		if (!open || contentId === void 0) return;

package/dist/components/BitkitTour/BitkitTour.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTour.js","names":[],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n  Tour as ArkTour,\n  type TourStepDetails,\n  useTour,\n  type UseTourProps,\n  type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\ntype BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];\n\n/**\n * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour\n * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.\n */\nexport type BitkitTourSecondaryAction =\n  | {\n      /**\n       * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the\n       * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.\n       */\n      action: NonNullable<BitkitTourStepAction['action']>;\n      href?: never;\n      label: string;\n    }\n  | {\n      action?: never;\n      /** Renders the action as a link out. */\n      href: string;\n      /** Opens the link in a new tab, with the matching `rel`. */\n      isExternal?: boolean;\n      label: string;\n    };\n\n/**\n * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —\n * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises\n * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields\n * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)\n *\n * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook\n * sets it. `target` is required for the same reason — Zag turns a step without one into a centred\n * dialog, which is a presentation this component doesn't have.\n */\nexport type BitkitTourStep = Omit<TourStepDetails, 'type'> & {\n  /**\n   * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about\n   * the badge is fixed here beyond its placement: the element itself comes from the caller.\n   */\n  badge?: ReactNode;\n  /** Rendered between the description and the footer — an image, a video, a table, anything. */\n  content?: ReactNode;\n  secondaryAction?: BitkitTourSecondaryAction;\n  /** The element the step points at. */\n  target: NonNullable<TourStepDetails['target']>;\n};\n\nexport interface BitkitTourOptions extends Omit<UseTourProps, 'closeOnInteractOutside' | 'onStepsChange' | 'steps'> {\n  /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */\n  onStepsChange?: (details: { steps: BitkitTourStep[] }) => void;\n  /**\n   * Drives the tour from a value the caller already has — it starts when this turns true and closes\n   * when it turns false. This is how a tour is opened: it announces something, so it appears once\n   * the user is eligible for it, never in answer to the interaction it would interrupt.\n   */\n  open?: boolean;\n  steps: BitkitTourStep[];\n}\n/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */\nexport type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {\n  addStep: (step: BitkitTourStep) => void;\n  setSteps: (steps: BitkitTourStep[]) => void;\n  /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */\n  step: BitkitTourStep | null;\n  /** Closes the tour, the same way its close button does. */\n  dismiss: () => void;\n  updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;\n};\nexport type BitkitTourProps = {\n  /** The tour instance returned by `useBitkitTour`. */\n  tour: BitkitTourInstance;\n};\n\n/**\n * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options\n * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and\n * returns the api that reports and navigates it: `step`, `stepIndex`, `totalSteps`, `next()`,\n * `prev()`, `setStep()`. Closing on a click outside isn't among them — see below.\n *\n * A one-step tour announces a feature, and behaves the same wherever it's used:\n *\n * - it appears on its own — `open` turns true once the user is eligible, and nothing has to be\n *   clicked to bring it up;\n * - dismissing it closes it, and it doesn't come back;\n * - acting on the control it points at closes it too, reported as a dismissal like any other, so\n *   the target keeps doing whatever it did before;\n * - until one of those two happens, a reload or a new session brings it back — which means the\n *   dismissal is recorded for the user in `onStatusChange`, not kept in page state.\n */\nexport const useBitkitTour = (options: BitkitTourOptions): BitkitTourInstance => {\n  const tour = useTour({\n    // The highlight sits 8 around the target, and the card 12 from the highlight — the 8 the arrow\n    // takes plus the 4 gap the design asks for. Both are measured from the highlight, since Zag\n    // grows the anchor rect by `spotlightOffset` before positioning. `offset.mainAxis` replaces\n    // Zag's own gutter, and Popper adds half the arrow's box on top of it: 6 + 5.65 ≈ the 12.\n    spotlightOffset: { x: 8, y: 8 },\n    // 4 is also Zag's current default, but the design asks for it and a third-party default is not\n    // ours to rely on — the z-index contract already moved under us once between two minors.\n    spotlightRadius: 4,\n    ...options,\n    // Not part of the options, and set after the spread so it can't be turned back on: a tour is a\n    // guided flow with its own ways out — the close button, `Skip tour`, `Done` — and Zag would\n    // otherwise end it on any click outside the card, losing the whole thing to a stray click on\n    // the dimmed page. Escape is a deliberate keystroke rather than a stray click, so it keeps\n    // closing the tour by default — and unlike this one, `closeOnEscape` stays in the options for\n    // callers who want it off.\n    closeOnInteractOutside: false,\n    // Same reason as the cast on `Tour.Root` below: our step type isn't a supertype of Ark's, so a\n    // callback taking ours doesn't match the signature Ark declares. The payload is Ark's.\n    onStepsChange: options.onStepsChange as UseTourProps['onStepsChange'],\n    // Zag's default is `close tour`, and this one is visible rather than screen-reader only: the\n    // close button shows its own aria-label in a tooltip. The rest of Zag's translations\n    // (`nextStep`, `prevStep`, `skip`) stay as they are — those only ever reach assistive tech.\n    translations: { close: 'Close tour', ...options.translations },\n    // `type` last: there is one presentation, so it isn't the caller's to pick.\n    steps: options.steps.map((step) => ({ offset: { mainAxis: 6 }, ...step, type: 'tooltip' as const })),\n  });\n\n  // Zag's api can start a tour but not stop one. Its close trigger's click handler *is* the\n  // machine's dismiss, so this borrows that instead of reaching into the machine. The cast says\n  // what the handler is rather than manufacturing an event for it: `actionMap.dismiss` takes none.\n  const dismiss = useCallback(() => {\n    const closeTriggerClick = tour.getCloseTriggerProps().onClick as (() => void) | undefined;\n\n    closeTriggerClick?.();\n  }, [tour]);\n\n  // A single-step tour points at one control, and operating that control is the same\n  // acknowledgement its close button is — there is no next step to go to, so the tour is done. Zag\n  // leaves the target clickable on purpose (it excludes it from interact-outside), so without this\n  // every caller has to wire the dismissal into the target's own handler, and the ones that forget\n  // show the tour again on the user's next visit. Multi-step tours are left alone: there, clicking\n  // the highlighted control could as easily mean \"go on\" as \"I'm done\", which isn't ours to guess.\n  //\n  // The listener is on the document rather than the target, resolving the target when the click\n  // happens: the target can re-render while the tour is open, and capture runs even when the\n  // caller's own handler stops propagation. `click` rather than `pointerdown` — a right-click or an\n  // abandoned drag isn't acting on it — and it still runs before a link's navigation, so a caller\n  // that records the dismissal gets its request away.\n  // `dismiss` closes over `tour`, which is a new object on every render, so listing it would put the\n  // effects below on every render as well — attaching and detaching the listener for nothing.\n  const dismissRef = useRef(dismiss);\n  dismissRef.current = dismiss;\n\n  const isSingleStep = options.steps.length === 1;\n  useEffect(() => {\n    if (!tour.open || !isSingleStep) {\n      return undefined;\n    }\n\n    const onDocumentClick = (event: MouseEvent) => {\n      const target = tour.step?.target?.();\n\n      if (target && event.target instanceof Node && target.contains(event.target)) {\n        dismissRef.current();\n      }\n    };\n\n    document.addEventListener('click', onDocumentClick, true);\n\n    return () => document.removeEventListener('click', onDocumentClick, true);\n    // `tour` is a new object on every render; the machine's own state is what matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isSingleStep, tour.open, tour.step?.id]);\n\n  const { open } = options;\n  useEffect(() => {\n    if (open === undefined || open === tour.open) {\n      return;\n    }\n\n    if (open) {\n      tour.start();\n    } else {\n      dismissRef.current();\n    }\n    // `tour` is a new object on every render, so the machine's own `open` is the dependency that\n    // matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, tour.open]);\n\n  return { ...tour, dismiss, step: tour.step as BitkitTourStep | null };\n};\n\n// The Ark parts aren't Chakra components, so they're wrapped with the `chakra()` factory to accept\n// `css`. They're deliberately NOT wrapped with `asChild`: each Ark part falls back to the current\n// step's content (title, description, progress text, action label) only when it renders its own\n// children, and `asChild` would replace those children with the wrapper element.\nconst TourBackdrop = chakra(ArkTour.Backdrop);\nconst TourSpotlight = chakra(ArkTour.Spotlight);\nconst TourPositioner = chakra(ArkTour.Positioner);\nconst TourContent = chakra(ArkTour.Content);\nconst TourArrow = chakra(ArkTour.Arrow);\nconst TourArrowTip = chakra(ArkTour.ArrowTip);\nconst TourTitle = chakra(ArkTour.Title);\nconst TourDescription = chakra(ArkTour.Description);\nconst TourControl = chakra(ArkTour.Control);\nconst TourProgressText = chakra(ArkTour.ProgressText);\n\nconst SecondaryAction = ({ secondaryAction }: { secondaryAction: BitkitTourSecondaryAction }) => {\n  const { action, href, label } = secondaryAction;\n\n  if (href !== undefined) {\n    return (\n      <BitkitButton href={href} isExternal={secondaryAction.isExternal} size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    );\n  }\n\n  if (!action) return null;\n\n  return (\n    <ArkTour.ActionTrigger asChild action={{ action, label }} aria-label={label}>\n      <BitkitButton size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    </ArkTour.ActionTrigger>\n  );\n};\n\n/**\n * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out\n * of the dimmed backdrop around that element.\n *\n * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render\n * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one\n * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what\n * turns the card into the single-feature presentation.\n */\nconst BitkitTour = ({ tour }: BitkitTourProps) => {\n  const recipe = useSlotRecipe({ key: 'tour' });\n  const styles = recipe();\n  const step = tour.step;\n  const actions = step?.actions ?? [];\n\n  // Zag traps focus with fixed options, so it lands on the card's first tabbable — the close button,\n  // which means a screen reader opens the tour on `Close tour` instead of on what the step says. The\n  // card is what should take it: Zag gives the content `role=\"alertdialog\"`, `tabIndex: -1` and the\n  // `aria-labelledby`/`aria-describedby` pair exactly so it can be focused and read out. Measured\n  // alternatives that don't work: making the card tabbable (the trap picks a descendant either way)\n  // and a ref (it doesn't survive the `chakra()`-wrapped Ark part). This corrects the trap's choice\n  // instead of trying to beat it — the trap activates asynchronously too, and racing it with a frame\n  // loses whenever the first paint is slow. The listener takes the first focus that lands anywhere\n  // in the card, moves it to the card itself and then steps out of the way, so everything after it\n  // (Tab, the buttons, a click) behaves normally. It arms on open and not per step, so stepping on\n  // keeps the focus on the button that did it, rather than pulling the next keystroke back to the\n  // card. The lookup goes through the machine's own content id, so two mounted tours can't reach\n  // each other's card.\n  //\n  // The tour machine is the one Zag component that can't be told where to put focus: `dialog` takes\n  // an `initialFocusEl` and hands it to the same trap, and even defaults an `alertdialog` to its\n  // close trigger deliberately. Once the tour has that prop too, this effect goes away.\n  const { open } = tour;\n  const contentId = tour.getContentProps().id;\n  useEffect(() => {\n    if (!open || contentId === undefined) {\n      return undefined;\n    }\n\n    const contentEl = document.getElementById(contentId);\n    if (!contentEl) {\n      return undefined;\n    }\n\n    const takeFocus = () => {\n      contentEl.removeEventListener('focusin', takeFocus);\n      contentEl.focus();\n    };\n\n    contentEl.addEventListener('focusin', takeFocus);\n\n    return () => contentEl.removeEventListener('focusin', takeFocus);\n  }, [contentId, open]);\n\n  return (\n    // `unmountOnExit` isn't only tidiness: Ark's backdrop applies `hidden: !tour.step?.backdrop`\n    // after merging the presence props, which overrides the presence's own `hidden` — and since the\n    // step is kept after the tour closes, the dimming would stay on screen for good. Unmounting on\n    // exit takes the node out before that can happen.\n    // The cast is the price of refining `step` and the step-mutating methods on the instance: our\n    // step type isn't a supertype of Ark's, so the methods no longer match its api signature. The\n    // object is Ark's api — only the types are ours.\n    <ArkTour.Root unmountOnExit tour={tour as UseTourReturn}>\n      <Portal>\n        <TourBackdrop css={styles.backdrop} />\n        <TourSpotlight css={styles.spotlight} />\n        <TourPositioner css={styles.positioner}>\n          <TourContent css={styles.content}>\n            {/* `hidden={false}` overrides Zag, which hides the arrow until the card has been\n                positioned — while Popper computes that position from the arrow's `clientHeight`, so\n                a hidden arrow measures 0 and the card lands 6 short of the design's 12, then drops\n                by that 6 as soon as anything recomputes. Nothing shows in the meantime: until it is\n                positioned the card itself sits off-screen at `-100vh`. */}\n            <TourArrow css={styles.arrow} hidden={false}>\n              <TourArrowTip css={styles.arrowTip} />\n            </TourArrow>\n            <Box css={styles.header}>\n              <Box css={styles.titleGroup}>\n                {tour.totalSteps > 1 ? <TourProgressText css={styles.progressText} /> : null}\n                <Box css={styles.titleRow}>\n                  <TourTitle css={styles.title} />\n                  {step?.badge ? <Box css={styles.badge}>{step.badge}</Box> : null}\n                </Box>\n              </Box>\n              <ArkTour.CloseTrigger asChild>\n                <BitkitCloseButton css={styles.closeTrigger} size=\"xs\" />\n              </ArkTour.CloseTrigger>\n            </Box>\n            <TourDescription css={styles.description} />\n            {step?.content ? <Box css={styles.media}>{step.content}</Box> : null}\n            <TourControl css={styles.control}>\n              {step?.secondaryAction ? <SecondaryAction secondaryAction={step.secondaryAction} /> : null}\n              <Box css={styles.actions}>\n                {actions.map((action, index) => (\n                  // Zag labels the trigger from its own translations (`close tour`, `next step`),\n                  // which would override the visible text as the accessible name — and put two\n                  // `Close tour` buttons on a card whose dismiss action reads `Got it`.\n                  <ArkTour.ActionTrigger key={action.label} asChild action={action} aria-label={action.label}>\n                    <BitkitButton size=\"sm\" variant={index === actions.length - 1 ? 'primary' : 'secondary'}>\n                      {action.label}\n                    </BitkitButton>\n                  </ArkTour.ActionTrigger>\n                ))}\n              </Box>\n            </TourControl>\n          </TourContent>\n        </TourPositioner>\n      </Portal>\n    </ArkTour.Root>\n  );\n};\n\nBitkitTour.displayName = 'BitkitTour';\n\nexport default BitkitTour;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTour.js","names":[],"sources":["../../../lib/components/BitkitTour/BitkitTour.tsx"],"sourcesContent":["import {\n  Tour as ArkTour,\n  type TourStepDetails,\n  useTour,\n  type UseTourProps,\n  type UseTourReturn,\n} from '@ark-ui/react/tour';\nimport { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { preventBodyScroll } from '@zag-js/remove-scroll';\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\ntype BitkitTourStepAction = NonNullable<TourStepDetails['actions']>[number];\n\n/**\n * The link-style action in the footer, e.g. `Skip tour` or `Learn more`. It either drives the tour\n * (`action`) or leaves the page (`href`) — the union makes passing both, or neither, a type error.\n */\nexport type BitkitTourSecondaryAction =\n  | {\n      /**\n       * A tour action — `'skip'`, `'dismiss'`, `'next'`, `'prev'`, or a function that receives the\n       * action map (`{ next, prev, dismiss, skip, goto }`) to do something else first.\n       */\n      action: NonNullable<BitkitTourStepAction['action']>;\n      href?: never;\n      label: string;\n    }\n  | {\n      action?: never;\n      /** Renders the action as a link out. */\n      href: string;\n      /** Opens the link in a new tab, with the matching `rel`. */\n      isExternal?: boolean;\n      label: string;\n    };\n\n/**\n * A single step of the tour. On top of Ark's step details it carries the three Bitkit slots —\n * `badge`, `content` and `secondaryAction`. Zag spreads the whole step object when it normalises\n * it, so these reach `tour.step` untouched. (Zag also offers a `meta` bag for this; flat fields\n * read better at the call site, at the cost of a name clash if Zag ever adds one of these.)\n *\n * Ark's step `type` is not part of this: every step is a card anchored to an element, so the hook\n * sets it. `target` is required for the same reason — Zag turns a step without one into a centred\n * dialog, which is a presentation this component doesn't have.\n */\nexport type BitkitTourStep = Omit<TourStepDetails, 'type'> & {\n  /**\n   * Rendered next to the title — a `BitkitBadge` in practice, e.g. `BETA` or `NEW`. Nothing about\n   * the badge is fixed here beyond its placement: the element itself comes from the caller.\n   */\n  badge?: ReactNode;\n  /** Rendered between the description and the footer — an image, a video, a table, anything. */\n  content?: ReactNode;\n  secondaryAction?: BitkitTourSecondaryAction;\n  /** The element the step points at. */\n  target: NonNullable<TourStepDetails['target']>;\n};\n\nexport interface BitkitTourOptions extends Omit<UseTourProps, 'closeOnInteractOutside' | 'onStepsChange' | 'steps'> {\n  /** Refined so the callback reports the Bitkit slots too, like the rest of the api does. */\n  onStepsChange?: (details: { steps: BitkitTourStep[] }) => void;\n  /**\n   * Drives the tour from a value the caller already has — it starts when this turns true and closes\n   * when it turns false. This is how a tour is opened: it announces something, so it appears once\n   * the user is eligible for it, never in answer to the interaction it would interrupt.\n   */\n  open?: boolean;\n  steps: BitkitTourStep[];\n}\n/** The tour api returned by `useBitkitTour` — pass it around to control the tour from anywhere. */\nexport type BitkitTourInstance = Omit<UseTourReturn, 'addStep' | 'setSteps' | 'step' | 'updateStep'> & {\n  addStep: (step: BitkitTourStep) => void;\n  setSteps: (steps: BitkitTourStep[]) => void;\n  /** The current step, with the Bitkit slots (`badge`, `content`, `secondaryAction`) still typed on it. */\n  step: BitkitTourStep | null;\n  /** Closes the tour, the same way its close button does. */\n  dismiss: () => void;\n  updateStep: (id: string, stepOverrides: Partial<BitkitTourStep>) => void;\n};\nexport type BitkitTourProps = {\n  /** The tour instance returned by `useBitkitTour`. */\n  tour: BitkitTourInstance;\n};\n\n/**\n * Creates the tour instance that drives `BitkitTour`. Takes the steps plus the tour-level options\n * (`onStepChange`, `onStatusChange`, `closeOnEscape`, `preventInteraction`, `translations`, …) and\n * returns the api that reports and navigates it: `step`, `stepIndex`, `totalSteps`, `next()`,\n * `prev()`, `setStep()`. Closing on a click outside isn't among them — see below.\n *\n * A one-step tour announces a feature, and behaves the same wherever it's used:\n *\n * - it appears on its own — `open` turns true once the user is eligible, and nothing has to be\n *   clicked to bring it up;\n * - dismissing it closes it, and it doesn't come back;\n * - acting on the control it points at closes it too, reported as a dismissal like any other, so\n *   the target keeps doing whatever it did before;\n * - until one of those two happens, a reload or a new session brings it back — which means the\n *   dismissal is recorded for the user in `onStatusChange`, not kept in page state.\n */\nexport const useBitkitTour = (options: BitkitTourOptions): BitkitTourInstance => {\n  const tour = useTour({\n    // The highlight sits 8 around the target, and the card 12 from the highlight — the 8 the arrow\n    // takes plus the 4 gap the design asks for. Both are measured from the highlight, since Zag\n    // grows the anchor rect by `spotlightOffset` before positioning. `offset.mainAxis` replaces\n    // Zag's own gutter, and Popper adds half the arrow's box on top of it: 6 + 5.65 ≈ the 12.\n    spotlightOffset: { x: 8, y: 8 },\n    // 4 is also Zag's current default, but the design asks for it and a third-party default is not\n    // ours to rely on — the z-index contract already moved under us once between two minors.\n    spotlightRadius: 4,\n    ...options,\n    // Not part of the options, and set after the spread so it can't be turned back on: a tour is a\n    // guided flow with its own ways out — the close button, `Skip tour`, `Done` — and Zag would\n    // otherwise end it on any click outside the card, losing the whole thing to a stray click on\n    // the dimmed page. Escape is a deliberate keystroke rather than a stray click, so it keeps\n    // closing the tour by default — and unlike this one, `closeOnEscape` stays in the options for\n    // callers who want it off.\n    closeOnInteractOutside: false,\n    // Same reason as the cast on `Tour.Root` below: our step type isn't a supertype of Ark's, so a\n    // callback taking ours doesn't match the signature Ark declares. The payload is Ark's.\n    onStepsChange: options.onStepsChange as UseTourProps['onStepsChange'],\n    // Zag's default is `close tour`, and this one is visible rather than screen-reader only: the\n    // close button shows its own aria-label in a tooltip. The rest of Zag's translations\n    // (`nextStep`, `prevStep`, `skip`) stay as they are — those only ever reach assistive tech.\n    translations: { close: 'Close tour', ...options.translations },\n    // `type` last: there is one presentation, so it isn't the caller's to pick.\n    steps: options.steps.map((step) => ({ offset: { mainAxis: 6 }, ...step, type: 'tooltip' as const })),\n  });\n\n  // Zag's api can start a tour but not stop one. Its close trigger's click handler *is* the\n  // machine's dismiss, so this borrows that instead of reaching into the machine. The cast says\n  // what the handler is rather than manufacturing an event for it: `actionMap.dismiss` takes none.\n  const dismiss = useCallback(() => {\n    const closeTriggerClick = tour.getCloseTriggerProps().onClick as (() => void) | undefined;\n\n    closeTriggerClick?.();\n  }, [tour]);\n\n  // A single-step tour points at one control, and operating that control is the same\n  // acknowledgement its close button is — there is no next step to go to, so the tour is done. Zag\n  // leaves the target clickable on purpose (it excludes it from interact-outside), so without this\n  // every caller has to wire the dismissal into the target's own handler, and the ones that forget\n  // show the tour again on the user's next visit. Multi-step tours are left alone: there, clicking\n  // the highlighted control could as easily mean \"go on\" as \"I'm done\", which isn't ours to guess.\n  //\n  // The listener is on the document rather than the target, resolving the target when the click\n  // happens: the target can re-render while the tour is open, and capture runs even when the\n  // caller's own handler stops propagation. `click` rather than `pointerdown` — a right-click or an\n  // abandoned drag isn't acting on it — and it still runs before a link's navigation, so a caller\n  // that records the dismissal gets its request away.\n  // `dismiss` closes over `tour`, which is a new object on every render, so listing it would put the\n  // effects below on every render as well — attaching and detaching the listener for nothing.\n  const dismissRef = useRef(dismiss);\n  dismissRef.current = dismiss;\n\n  const isSingleStep = options.steps.length === 1;\n  useEffect(() => {\n    if (!tour.open || !isSingleStep) {\n      return undefined;\n    }\n\n    const onDocumentClick = (event: MouseEvent) => {\n      const target = tour.step?.target?.();\n\n      if (target && event.target instanceof Node && target.contains(event.target)) {\n        dismissRef.current();\n      }\n    };\n\n    document.addEventListener('click', onDocumentClick, true);\n\n    return () => document.removeEventListener('click', onDocumentClick, true);\n    // `tour` is a new object on every render; the machine's own state is what matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isSingleStep, tour.open, tour.step?.id]);\n\n  const { open } = options;\n  useEffect(() => {\n    if (open === undefined || open === tour.open) {\n      return;\n    }\n\n    if (open) {\n      tour.start();\n    } else {\n      dismissRef.current();\n    }\n    // `tour` is a new object on every render, so the machine's own `open` is the dependency that\n    // matters here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, tour.open]);\n\n  return { ...tour, dismiss, step: tour.step as BitkitTourStep | null };\n};\n\n// The Ark parts aren't Chakra components, so they're wrapped with the `chakra()` factory to accept\n// `css`. They're deliberately NOT wrapped with `asChild`: each Ark part falls back to the current\n// step's content (title, description, progress text, action label) only when it renders its own\n// children, and `asChild` would replace those children with the wrapper element.\nconst TourBackdrop = chakra(ArkTour.Backdrop);\nconst TourSpotlight = chakra(ArkTour.Spotlight);\nconst TourPositioner = chakra(ArkTour.Positioner);\nconst TourContent = chakra(ArkTour.Content);\nconst TourArrow = chakra(ArkTour.Arrow);\nconst TourArrowTip = chakra(ArkTour.ArrowTip);\nconst TourTitle = chakra(ArkTour.Title);\nconst TourDescription = chakra(ArkTour.Description);\nconst TourControl = chakra(ArkTour.Control);\nconst TourProgressText = chakra(ArkTour.ProgressText);\n\nconst SecondaryAction = ({ secondaryAction }: { secondaryAction: BitkitTourSecondaryAction }) => {\n  const { action, href, label } = secondaryAction;\n\n  if (href !== undefined) {\n    return (\n      <BitkitButton href={href} isExternal={secondaryAction.isExternal} size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    );\n  }\n\n  if (!action) return null;\n\n  return (\n    <ArkTour.ActionTrigger asChild action={{ action, label }} aria-label={label}>\n      <BitkitButton size=\"sm\" variant=\"tertiary\">\n        {label}\n      </BitkitButton>\n    </ArkTour.ActionTrigger>\n  );\n};\n\n/**\n * A guided product tour: a step card anchored to an element on the page, with a spotlight cut out\n * of the dimmed backdrop around that element.\n *\n * The steps and the tour behaviour live on the instance — create it with `useBitkitTour` and render\n * `BitkitTour` once, anywhere in the tree. Each step declares its own action buttons; the last one\n * is rendered as the primary button. A single-step tour drops the `1 of n` label, which is what\n * turns the card into the single-feature presentation.\n */\nconst BitkitTour = ({ tour }: BitkitTourProps) => {\n  const recipe = useSlotRecipe({ key: 'tour' });\n  const styles = recipe();\n  const step = tour.step;\n  const actions = step?.actions ?? [];\n\n  // Zag traps focus with fixed options, so it lands on the card's first tabbable — the close button,\n  // which means a screen reader opens the tour on `Close tour` instead of on what the step says. The\n  // card is what should take it: Zag gives the content `role=\"alertdialog\"`, `tabIndex: -1` and the\n  // `aria-labelledby`/`aria-describedby` pair exactly so it can be focused and read out. Measured\n  // alternatives that don't work: making the card tabbable (the trap picks a descendant either way)\n  // and a ref (it doesn't survive the `chakra()`-wrapped Ark part). This corrects the trap's choice\n  // instead of trying to beat it — the trap activates asynchronously too, and racing it with a frame\n  // loses whenever the first paint is slow. The listener takes the first focus that lands anywhere\n  // in the card, moves it to the card itself and then steps out of the way, so everything after it\n  // (Tab, the buttons, a click) behaves normally. It arms on open and not per step, so stepping on\n  // keeps the focus on the button that did it, rather than pulling the next keystroke back to the\n  // card. The lookup goes through the machine's own content id, so two mounted tours can't reach\n  // each other's card.\n  //\n  // The tour machine is the one Zag component that can't be told where to put focus: `dialog` takes\n  // an `initialFocusEl` and hands it to the same trap, and even defaults an `alertdialog` to its\n  // close trigger deliberately. Once the tour has that prop too, this effect goes away.\n  const { open } = tour;\n\n  // The tour machine has no scroll handling of its own — no `preventScroll` prop, no listener —\n  // while Zag's dialog machine locks the body through this same helper. The tour needs it just as\n  // much: everything it paints is positioned in document coordinates from a target it resolves once,\n  // when the step opens, and never looks up again. Let the page scroll and any layout that swaps its\n  // elements around — a sticky header that moves its buttons into a portal is the common one —\n  // leaves the machine anchored to a node that is no longer in the document. A detached node\n  // measures zero, so the card, the spotlight and the backdrop's cut-out all collapse into the\n  // top-left corner of the page. Locking is the honest reading of the presentation anyway: the tour\n  // dims the page and takes focus, exactly like a modal dialog.\n  useEffect(() => (open ? preventBodyScroll() : undefined), [open]);\n\n  const contentId = tour.getContentProps().id;\n  useEffect(() => {\n    if (!open || contentId === undefined) {\n      return undefined;\n    }\n\n    const contentEl = document.getElementById(contentId);\n    if (!contentEl) {\n      return undefined;\n    }\n\n    const takeFocus = () => {\n      contentEl.removeEventListener('focusin', takeFocus);\n      contentEl.focus();\n    };\n\n    contentEl.addEventListener('focusin', takeFocus);\n\n    return () => contentEl.removeEventListener('focusin', takeFocus);\n  }, [contentId, open]);\n\n  return (\n    // `unmountOnExit` isn't only tidiness: Ark's backdrop applies `hidden: !tour.step?.backdrop`\n    // after merging the presence props, which overrides the presence's own `hidden` — and since the\n    // step is kept after the tour closes, the dimming would stay on screen for good. Unmounting on\n    // exit takes the node out before that can happen.\n    // The cast is the price of refining `step` and the step-mutating methods on the instance: our\n    // step type isn't a supertype of Ark's, so the methods no longer match its api signature. The\n    // object is Ark's api — only the types are ours.\n    <ArkTour.Root unmountOnExit tour={tour as UseTourReturn}>\n      <Portal>\n        <TourBackdrop css={styles.backdrop} />\n        <TourSpotlight css={styles.spotlight} />\n        <TourPositioner css={styles.positioner}>\n          <TourContent css={styles.content}>\n            {/* `hidden={false}` overrides Zag, which hides the arrow until the card has been\n                positioned — while Popper computes that position from the arrow's `clientHeight`, so\n                a hidden arrow measures 0 and the card lands 6 short of the design's 12, then drops\n                by that 6 as soon as anything recomputes. Nothing shows in the meantime: until it is\n                positioned the card itself sits off-screen at `-100vh`. */}\n            <TourArrow css={styles.arrow} hidden={false}>\n              <TourArrowTip css={styles.arrowTip} />\n            </TourArrow>\n            <Box css={styles.header}>\n              <Box css={styles.titleGroup}>\n                {tour.totalSteps > 1 ? <TourProgressText css={styles.progressText} /> : null}\n                <Box css={styles.titleRow}>\n                  <TourTitle css={styles.title} />\n                  {step?.badge ? <Box css={styles.badge}>{step.badge}</Box> : null}\n                </Box>\n              </Box>\n              <ArkTour.CloseTrigger asChild>\n                <BitkitCloseButton css={styles.closeTrigger} size=\"xs\" />\n              </ArkTour.CloseTrigger>\n            </Box>\n            <TourDescription css={styles.description} />\n            {step?.content ? <Box css={styles.media}>{step.content}</Box> : null}\n            <TourControl css={styles.control}>\n              {step?.secondaryAction ? <SecondaryAction secondaryAction={step.secondaryAction} /> : null}\n              <Box css={styles.actions}>\n                {actions.map((action, index) => (\n                  // Zag labels the trigger from its own translations (`close tour`, `next step`),\n                  // which would override the visible text as the accessible name — and put two\n                  // `Close tour` buttons on a card whose dismiss action reads `Got it`.\n                  <ArkTour.ActionTrigger key={action.label} asChild action={action} aria-label={action.label}>\n                    <BitkitButton size=\"sm\" variant={index === actions.length - 1 ? 'primary' : 'secondary'}>\n                      {action.label}\n                    </BitkitButton>\n                  </ArkTour.ActionTrigger>\n                ))}\n              </Box>\n            </TourControl>\n          </TourContent>\n        </TourPositioner>\n      </Portal>\n    </ArkTour.Root>\n  );\n};\n\nBitkitTour.displayName = 'BitkitTour';\n\nexport default BitkitTour;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,IAAa,iBAAiB,YAAmD;CAC/E,MAAM,OAAO,QAAQ;EAKnB,iBAAiB;GAAE,GAAG;GAAG,GAAG;EAAE;EAG9B,iBAAiB;EACjB,GAAG;EAOH,wBAAwB;EAGxB,eAAe,QAAQ;EAIvB,cAAc;GAAE,OAAO;GAAc,GAAG,QAAQ;EAAa;EAE7D,OAAO,QAAQ,MAAM,KAAK,UAAU;GAAE,QAAQ,EAAE,UAAU,EAAE;GAAG,GAAG;GAAM,MAAM;EAAmB,EAAE;CACrG,CAAC;CAKD,MAAM,UAAU,kBAAkB;EAChC,MAAM,oBAAoB,KAAK,qBAAqB,CAAC,CAAC;EAEtD,oBAAoB;CACtB,GAAG,CAAC,IAAI,CAAC;CAgBT,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,MAAM,eAAe,QAAQ,MAAM,WAAW;CAC9C,gBAAgB;EACd,IAAI,CAAC,KAAK,QAAQ,CAAC,cACjB;EAGF,MAAM,mBAAmB,UAAsB;GAC7C,MAAM,SAAS,KAAK,MAAM,SAAS;GAEnC,IAAI,UAAU,MAAM,kBAAkB,QAAQ,OAAO,SAAS,MAAM,MAAM,GACxE,WAAW,QAAQ;EAEvB;EAEA,SAAS,iBAAiB,SAAS,iBAAiB,IAAI;EAExD,aAAa,SAAS,oBAAoB,SAAS,iBAAiB,IAAI;CAG1E,GAAG;EAAC;EAAc,KAAK;EAAM,KAAK,MAAM;CAAE,CAAC;CAE3C,MAAM,EAAE,SAAS;CACjB,gBAAgB;EACd,IAAI,SAAS,KAAA,KAAa,SAAS,KAAK,MACtC;EAGF,IAAI,MACF,KAAK,MAAM;OAEX,WAAW,QAAQ;CAKvB,GAAG,CAAC,MAAM,KAAK,IAAI,CAAC;CAEpB,OAAO;EAAE,GAAG;EAAM;EAAS,MAAM,KAAK;CAA8B;AACtE;AAMA,IAAM,eAAe,OAAO,KAAQ,QAAQ;AAC5C,IAAM,gBAAgB,OAAO,KAAQ,SAAS;AAC9C,IAAM,iBAAiB,OAAO,KAAQ,UAAU;AAChD,IAAM,cAAc,OAAO,KAAQ,OAAO;AAC1C,IAAM,YAAY,OAAO,KAAQ,KAAK;AACtC,IAAM,eAAe,OAAO,KAAQ,QAAQ;AAC5C,IAAM,YAAY,OAAO,KAAQ,KAAK;AACtC,IAAM,kBAAkB,OAAO,KAAQ,WAAW;AAClD,IAAM,cAAc,OAAO,KAAQ,OAAO;AAC1C,IAAM,mBAAmB,OAAO,KAAQ,YAAY;AAEpD,IAAM,mBAAmB,EAAE,sBAAsE;CAC/F,MAAM,EAAE,QAAQ,MAAM,UAAU;CAEhC,IAAI,SAAS,KAAA,GACX,OACE,oBAAC,cAAD;EAAoB;EAAM,YAAY,gBAAgB;EAAY,MAAK;EAAK,SAAQ;EACjF,UAAA;CACW,CAAA;CAIlB,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,KAAQ,eAAT;EAAuB,SAAA;EAAQ,QAAQ;GAAE;GAAQ;EAAM;EAAG,cAAY;EACpE,UAAA,oBAAC,cAAD;GAAc,MAAK;GAAK,SAAQ;GAC7B,UAAA;EACW,CAAA;CACO,CAAA;AAE3B;;;;;;;;;;AAWA,IAAM,cAAc,EAAE,WAA4B;CAEhD,MAAM,SADS,cAAc,EAAE,KAAK,OAAO,CAC5B,CAAA,CAAO;CACtB,MAAM,OAAO,KAAK;CAClB,MAAM,UAAU,MAAM,WAAW,CAAC;CAmBlC,MAAM,EAAE,SAAS;CAWjB,gBAAiB,OAAO,kBAAkB,IAAI,KAAA,GAAY,CAAC,IAAI,CAAC;CAEhE,MAAM,YAAY,KAAK,gBAAgB,CAAC,CAAC;CACzC,gBAAgB;EACd,IAAI,CAAC,QAAQ,cAAc,KAAA,GACzB;EAGF,MAAM,YAAY,SAAS,eAAe,SAAS;EACnD,IAAI,CAAC,WACH;EAGF,MAAM,kBAAkB;GACtB,UAAU,oBAAoB,WAAW,SAAS;GAClD,UAAU,MAAM;EAClB;EAEA,UAAU,iBAAiB,WAAW,SAAS;EAE/C,aAAa,UAAU,oBAAoB,WAAW,SAAS;CACjE,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OAQE,oBAAC,KAAQ,MAAT;EAAc,eAAA;EAAoB;EAChC,UAAA,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAc,KAAK,OAAO,SAAW,CAAA;GACrC,oBAAC,eAAD,EAAe,KAAK,OAAO,UAAY,CAAA;GACvC,oBAAC,gBAAD;IAAgB,KAAK,OAAO;IAC1B,UAAA,qBAAC,aAAD;KAAa,KAAK,OAAO;KAAzB,UAAA;MAME,oBAAC,WAAD;OAAW,KAAK,OAAO;OAAO,QAAQ;OACpC,UAAA,oBAAC,cAAD,EAAc,KAAK,OAAO,SAAW,CAAA;MAC5B,CAAA;MACX,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACG,KAAK,aAAa,IAAI,oBAAC,kBAAD,EAAkB,KAAK,OAAO,aAAe,CAAA,IAAI,MACxE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CACE,oBAAC,WAAD,EAAW,KAAK,OAAO,MAAQ,CAAA,GAC9B,MAAM,QAAQ,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA,KAAK;SAAW,CAAA,IAAI,IACzD;QACF,CAAA,CAAA;OACL,CAAA,GAAA,oBAAC,KAAQ,cAAT;QAAsB,SAAA;QACpB,UAAA,oBAAC,mBAAD;SAAmB,KAAK,OAAO;SAAc,MAAK;QAAM,CAAA;OACpC,CAAA,CACnB;;MACL,oBAAC,iBAAD,EAAiB,KAAK,OAAO,YAAc,CAAA;MAC1C,MAAM,UAAU,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAQ,UAAA,KAAK;MAAa,CAAA,IAAI;MAChE,qBAAC,aAAD;OAAa,KAAK,OAAO;OAAzB,UAAA,CACG,MAAM,kBAAkB,oBAAC,iBAAD,EAAiB,iBAAiB,KAAK,gBAAkB,CAAA,IAAI,MACtF,oBAAC,KAAD;QAAK,KAAK,OAAO;QACd,UAAA,QAAQ,KAAK,QAAQ,UAIpB,oBAAC,KAAQ,eAAT;SAA0C,SAAA;SAAgB;SAAQ,cAAY,OAAO;SACnF,UAAA,oBAAC,cAAD;UAAc,MAAK;UAAK,SAAS,UAAU,QAAQ,SAAS,IAAI,YAAY;UACzE,UAAA,OAAO;SACI,CAAA;QACO,GAJK,OAAO,KAIZ,CACxB;OACE,CAAA,CACM;;KACF;;GACC,CAAA;EACV,EAAA,CAAA;CACI,CAAA;AAElB;AAEA,WAAW,cAAc"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.381",
+  "version": "0.3.382",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -98,6 +98,7 @@
     "@ark-ui/react": "5.39.1",
     "@fontsource-variable/figtree": "^5.3.0",
     "@fontsource-variable/source-code-pro": "^5.3.0",
+    "@zag-js/remove-scroll": "1.43.3",
     "es-toolkit": "^1.52.0",
     "react-markdown": "^10.1.0"
   },