@atlaskit/spotlight/dist/es2019/controllers/context.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/* context.tsx generated by @compiled/babel-plugin v3.0.2 */
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { createContext, useId, useRef, useState } from 'react';

// eslint-disable-next-line @repo/internal/react/consistent-types-definitions

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export const SpotlightContext = /*#__PURE__*/createContext({
  card: {
    ref: null,
    setRef: () => undefined,
    placement: 'bottom-end',
    setPlacement: () => undefined,
    motion: undefined,
    setMotion: () => undefined
  },
  heading: {
    id: '',
    setId: () => undefined
  },
  popoverContent: {
    ref: undefined,
    setRef: () => undefined,
    positionArea: undefined,
    setPositionArea: () => undefined,
    update: () => new Promise(() => null),
    setUpdate: () => new Promise(() => null),
    dismiss: {
      current: () => undefined
    },
    setDismiss: () => undefined
  },
  target: {
    ref: {
      current: null
    },
    setRef: () => undefined
  },
  primaryAction: {
    action: {
      current: () => undefined
    },
    setAction: () => undefined
  },
  secondaryAction: {
    action: {
      current: () => undefined
    },
    setAction: () => undefined
  }
});

/**
 * Props accepted by `SpotlightContextProvider`.
 */
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions

// eslint-disable-next-line @repo/internal/react/require-jsdoc
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export const SpotlightContextProvider = ({
  children,
  targetRef
}) => {
  const id = useId();
  const defaultTargetRef = useRef(null);
  const [motion, setMotion] = useState();
  const [placement, setPlacement] = useState('bottom-end');
  const [headingId, setHeadingId] = useState(`${id}-heading`);
  const [update, setUpdate] = useState(() => async () => undefined);
  const [popoverRef, setPopoverRef] = useState();
  const [positionArea, setPositionArea] = useState();
  const [cardRef, setCardRef] = useState(null);
  const [internalTargetRef, setInternalTargetRef] = useState(defaultTargetRef);
  // `targetRef` (the prop) takes precedence when provided. Its identity is
  // allowed to change over time; downstream consumers that depend on
  // `target.ref` identity (e.g. `useAnchoredPopover`'s effect deps) will
  // re-run accordingly.
  const effectiveTargetRef = targetRef !== null && targetRef !== void 0 ? targetRef : internalTargetRef;
  const dismissRef = useRef(() => undefined);
  const setDismiss = dismissFn => {
    dismissRef.current = dismissFn;
  };
  const secondaryActionRef = useRef(() => undefined);
  const setSecondaryAction = actionFn => {
    secondaryActionRef.current = actionFn;
  };
  const primaryActionRef = useRef(() => undefined);
  const setPrimaryAction = actionFn => {
    primaryActionRef.current = actionFn;
  };
  return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
    value: {
      card: {
        ref: cardRef,
        setRef: setCardRef,
        placement,
        setPlacement,
        motion,
        setMotion
      },
      heading: {
        id: headingId,
        setId: setHeadingId
      },
      popoverContent: {
        ref: popoverRef,
        setRef: setPopoverRef,
        positionArea,
        setPositionArea,
        update,
        setUpdate,
        dismiss: dismissRef,
        setDismiss
      },
      target: {
        ref: effectiveTargetRef,
        setRef: setInternalTargetRef
      },
      primaryAction: {
        action: primaryActionRef,
        setAction: setPrimaryAction
      },
      secondaryAction: {
        action: secondaryActionRef,
        setAction: setSecondaryAction
      }
    }
  }, children);
};