@atlaskit/onboarding 14.6.2 → 15.0.0

package/spotlight/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/spotlight.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/spotlight.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/spotlight.d.ts"
 }

package/spotlight-card/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/spotlight-card.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/spotlight-card.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/spotlight-card.d.ts"
 }

package/spotlight-manager/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/spotlight-manager.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/spotlight-manager.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/spotlight-manager.d.ts"
 }

package/spotlight-target/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/spotlight-target.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/spotlight-target.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/spotlight-target.d.ts"
 }

package/spotlight-transition/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/spotlight-transition.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/spotlight-transition.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/spotlight-transition.d.ts"
 }

package/target/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/target.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/target.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/target.d.ts"
 }

package/theme/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/theme.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/theme.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/theme.d.ts"
 }

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/use-spotlight/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-spotlight.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-spotlight.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-spotlight.d.ts"
 }

package/dist/types-ts4.5/components/clone.d.ts

@@ -1,54 +0,0 @@
-import React, { type MouseEvent } from 'react';
-interface CloneProps {
-    /**
-     * Whether to display a pulse animation around the spotlighted element.
-     */
-    pulse: boolean;
-    /**
-     * An object containing the information used for positioning clone.
-     */
-    style: Record<string, any>;
-    /**
-     * The name of the SpotlightTarget.
-     */
-    target?: string;
-    /**
-     * The spotlight target node.
-     */
-    targetNode: HTMLElement;
-    /**
-     * The background color of the element being highlighted
-     */
-    targetBgColor?: string;
-    /**
-     * Function to fire when a person clicks on the cloned target.
-     */
-    targetOnClick?: (eventData: {
-        event: MouseEvent<HTMLElement>;
-        target?: string;
-    }) => void;
-    /**
-     * The border radius of the element being highlighted.
-     */
-    targetRadius?: number | string;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * Whether to watch for html content changes on the target
-     */
-    shouldWatch?: boolean;
-}
-/**
- * __Clone__
- *
- * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
- * a pulsing animation.
- *
- * @internal
- */
-declare const Clone: (props: CloneProps) => React.JSX.Element;
-export default Clone;

package/dist/types-ts4.5/components/index.d.ts

@@ -1,10 +0,0 @@
-import Modal from './modal';
-import ModalTransition from './modal-transition';
-import Spotlight from './spotlight';
-import SpotlightCard from './spotlight-card';
-import SpotlightManager from './spotlight-manager';
-import SpotlightTarget from './spotlight-target';
-import SpotlightTransition from './spotlight-transition';
-import useSpotlight from './use-spotlight';
-export { spotlightButtonTheme, modalButtonTheme } from './theme';
-export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, useSpotlight, ModalTransition, };

package/dist/types-ts4.5/components/modal-transition.d.ts

@@ -1,17 +0,0 @@
-/**
- * We re-export this because products may have multiple versions of
- * `@atlaskit/modal-dialog`.
- *
- * If a consumer uses the onboarding `Modal` with the `ModalTransition` from an
- * incompatible version of `@atlaskit/modal-dialog`, then the modal can get
- * stuck in an open state.
- *
- * See https://product-fabric.atlassian.net/browse/DSP-796 for more details
- * and a reproduction.
- *
- */
-import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
-/**
- * @deprecated Use `@atlaskit/spotlight` instead.
- */
-export default ModalTransition;

package/dist/types-ts4.5/components/modal.d.ts

@@ -1,54 +0,0 @@
-import React, { Component, type ElementType, type ReactNode } from 'react';
-import { type ModalFooterProps as FooterComponentProps, type ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
-import { type Actions } from '../types';
-type ModalProps = {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * The elements rendered in the modal.
-     */
-    children: ReactNode;
-    /**
-     * Path to the image.
-     */
-    image?: string;
-    /**
-     * Optional element rendered above the body.
-     */
-    header?: ElementType<HeaderComponentProps>;
-    /**
-     * Optional element rendered below the body.
-     */
-    footer?: ElementType<FooterComponentProps>;
-    /**
-     * Heading text rendered above the body.
-     */
-    heading?: string;
-    /**
-     * Boolean prop to confirm if primary button in the footer should be shown on the right.
-     */
-    experimental_shouldShowPrimaryButtonOnRight?: boolean;
-    /**
-     * This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
-     */
-    testId?: string;
-};
-/**
- * __Benefits modal__
- *
- * A benefits modal explains the benefits of a significant new feature or experience change.
- *
- * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
- * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
- * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
- *
- * @deprecated Use `@atlaskit/modal-dialog` instead.
- */
-export default class BenefitsModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => React.ElementType<HeaderComponentProps> | (() => React.JSX.Element);
-    footerComponent: (props: ModalProps) => React.ElementType<FooterComponentProps> | (() => React.JSX.Element | null);
-    render(): React.JSX.Element;
-}
-export {};

package/dist/types-ts4.5/components/node-resolver-spotlight-inner.d.ts

@@ -1,18 +0,0 @@
-import React, { type ReactElement } from 'react';
-interface NodeResolverSpotlightInnerProps {
-    hasNodeResolver: boolean;
-    innerRef: (element: HTMLElement | null) => void;
-    children: ReactElement;
-}
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-declare const NodeResolverSpotlightInner: ({ hasNodeResolver, children, innerRef, }: NodeResolverSpotlightInnerProps) => React.JSX.Element;
-export default NodeResolverSpotlightInner;

package/dist/types-ts4.5/components/node-resolver-spotlight-target.d.ts

@@ -1,27 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactElement } from 'react';
-interface NodeResolverSpotlightTargetProps {
-    hasNodeResolver: boolean;
-    children: ReactElement;
-    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
-    name: string;
-}
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {string} props.name - The name to reference from Spotlight.
- * @param {ReactElement} props.getTargetRef - Setting up Target Node in Spotlight Manager.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-declare const NodeResolverSpotlightTarget: {
-    ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps): JSX.Element;
-    displayName: string;
-};
-export default NodeResolverSpotlightTarget;

package/dist/types-ts4.5/components/spotlight-card.d.ts

@@ -1,14 +0,0 @@
-import { type SpotlightCardProps } from '../types';
-/**
- * __Spotlight card__
- *
- * A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.
- *
- * - [Examples](https://atlassian.design/components/onboarding/spotlight-card/examples)
- * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
- * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
- *
- * @deprecated Use `@atlaskit/spotlight` instead.
- */
-declare const SpotlightCard: React.ForwardRefExoticComponent<React.PropsWithoutRef<SpotlightCardProps> & React.RefAttributes<HTMLDivElement>>;
-export default SpotlightCard;

package/dist/types-ts4.5/components/spotlight-dialog.d.ts

@@ -1,86 +0,0 @@
-import React, { Component, type ComponentType, type ReactNode } from 'react';
-import { type Actions } from '../types';
-interface SpotlightDialogProps {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * An optional element rendered beside the footer actions.
-     */
-    actionsBeforeElement?: ReactNode;
-    /**
-     * The elements rendered in the modal.
-     */
-    children?: ReactNode;
-    /**
-     * Where the dialog should appear, relative to the contents of the children.
-     */
-    dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
-    /**
-     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
-     */
-    dialogWidth: number;
-    /**
-     * Optional element rendered below the body.
-     */
-    footer?: ComponentType<any>;
-    /**
-     * Optional element rendered above the body.
-     */
-    header?: ComponentType<any>;
-    /**
-     * Heading text rendered above the body.
-     */
-    heading?: string;
-    /**
-     * An optional element rendered to the right of the heading.
-     */
-    headingAfterElement?: ReactNode;
-    /**
-     * Path to the image.
-     */
-    image?: string;
-    /**
-     * The spotlight target node.
-     */
-    targetNode: HTMLElement;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * Refers to an `aria-label` attribute. Sets an accessible name for the spotlight dialog wrapper to announce it to users of assistive technology.
-     * Usage of either this, or the `titleId` prop is strongly recommended to improve accessibility.
-     */
-    label?: string;
-    /**
-     * Refers to a value of an `aria-labelledby` attribute. References an element to define accessible name for the spotlight dialog.
-     * Usage of either this, or the `label` prop is strongly recommended to improve accessibility.
-     */
-    titleId?: string;
-}
-interface State {
-    focusLockDisabled: boolean;
-}
-/**
- * __Spotlight dialog__
- *
- * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
- *
- * - [Examples](https://atlassian.design/components/onboarding/examples)
- * - [Code](https://atlassian.design/components/onboarding/code)
- * - [Usage](https://atlassian.design/components/onboarding/usage)
- */
-declare class SpotlightDialogComponent extends Component<SpotlightDialogProps, State> {
-    state: {
-        focusLockDisabled: boolean;
-    };
-    private focusLockTimeoutId;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export default SpotlightDialogComponent;

package/dist/types-ts4.5/components/spotlight-inner.d.ts

@@ -1,58 +0,0 @@
-import React from 'react';
-import { type ScrollLogicalPosition, type SpotlightProps } from '../types';
-import { type ElementBoundingBox } from '../utils/use-element-box';
-interface SpotlightInnerProps extends SpotlightProps {
-    /**
-     * The spotlight target DOM element.
-     */
-    targetNode: HTMLElement;
-    /**
-     * Called when the component has been mounted.
-     */
-    onOpened: () => any;
-    /**
-     * Called when the component has been unmounted.
-     */
-    onClosed: () => any;
-    /**
-     * Whether to display a pulse animation around the spotlighted element.
-     *
-     * Same as `SpotlightProps` but required instead of optional.
-     */
-    pulse: boolean;
-    /**
-     * The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
-     *
-     * Same as `SpotlightProps` but required instead of optional.
-     */
-    dialogWidth: number;
-    /**
-     * passed to scrollIntoView as the block option, which determines the vertical alignment of the target node in the closest scrollable ancestor.
-     */
-    scrollPositionBlock?: ScrollLogicalPosition;
-}
-interface State {
-    replacementElement: HTMLElement | null;
-}
-/**
- * __Spotlight inner__
- *
- * Renders the spotlight target clone and dialog.
- *
- * @internal
- */
-declare class SpotlightInner extends React.Component<SpotlightInnerProps, State> {
-    static defaultProps: {
-        dialogWidth: number;
-        pulse: boolean;
-    };
-    state: {
-        replacementElement: null;
-    };
-    componentDidUpdate(prevProps: SpotlightInnerProps): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    getTargetNodeStyle: (box: ElementBoundingBox) => {};
-    render(): React.JSX.Element;
-}
-export default SpotlightInner;

package/dist/types-ts4.5/components/spotlight-manager.d.ts

@@ -1,83 +0,0 @@
-import React, { type ElementType, PureComponent, type ReactNode } from 'react';
-import { type MemoizedFn } from 'memoize-one';
-export type TargetRef = (element: HTMLElement | null | undefined) => void;
-export type GetTargetRef = (
-/**
- * The `name` prop passed to the corresponding `SpotlightTarget`
- *
- * This is used as a key into the `targets` map owned by `SpotlightManager`
- * because the `SpotlightManager` stores the target nodes for
- * descendant `SpotlightTarget` instances.
- */
-name: string) => TargetRef;
-declare const TargetConsumer: React.Consumer<GetTargetRef | undefined>;
-declare const SpotlightContext: React.Context<{
-    opened: () => void;
-    closed: () => void;
-    targets: {
-        [key: string]: HTMLElement | undefined;
-    };
-}>;
-declare const SpotlightStateConsumer: React.Consumer<{
-    opened: () => void;
-    closed: () => void;
-    targets: {
-        [key: string]: HTMLElement | undefined;
-    };
-}>;
-export { TargetConsumer };
-export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
-interface SpotlightManagerProps {
-    /**
-     * Boolean prop for toggling blanket transparency.
-     */
-    blanketIsTinted?: boolean;
-    /**
-     * Typically the app, or a section of the app.
-     */
-    children: ReactNode;
-    /**
-     * @deprecated
-     * Component is deprecated and will be removed in the future.
-     */
-    component?: ElementType;
-    /**
-     * Handler function to be called when the blanket is clicked.
-     */
-    onBlanketClicked?: () => void;
-}
-/**
- * __Spotlight manager__
- *
- * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
- *
- * - [Examples](https://atlassian.design/components/onboarding/examples)
- * - [Code](https://atlassian.design/components/onboarding/code)
- * - [Usage](https://atlassian.design/components/onboarding/usage)
- *
- * @deprecated Use `@atlaskit/spotlight` instead.
- */
-export default class SpotlightManager extends PureComponent<SpotlightManagerProps, {
-    spotlightCount: number;
-    targets: {
-        [key: string]: HTMLElement | void;
-    };
-}> {
-    static defaultProps: {
-        blanketIsTinted: boolean;
-    };
-    componentDidMount(): void;
-    state: {
-        spotlightCount: number;
-        targets: {};
-    };
-    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
-    spotlightOpen: () => void;
-    spotlightClose: () => void;
-    getStateProviderValue: MemoizedFn<(this: any, targets: any) => {
-        opened: () => void;
-        closed: () => void;
-        targets: any;
-    }>;
-    render(): React.JSX.Element;
-}

package/dist/types-ts4.5/components/spotlight-target.d.ts

@@ -1,50 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { type TargetRef } from './spotlight-manager';
-type RenderChildrenFunction = (props: {
-    /**
-     * Pass this as the `ref` of the element that should be cloned.
-     *
-     * This is useful if:
-     *
-     * - you don't want a wrapping `<div>`
-     * - a component exposes specific children through ref props
-     *
-     * @example
-     * ```tsx
-     * <SpotlightTarget>
-     *   {({ targetRef }) => (
-     *     <OpaqueComponent
-     *       headingRef={targetRef}
-     *     />
-     *   )}
-     * </SpotlightTarget>
-     * ```
-     */
-    targetRef?: TargetRef;
-}) => ReactNode;
-interface SpotlightTargetProps {
-    /**
-     * A single child.
-     */
-    children: ReactNode | RenderChildrenFunction;
-    /**
-     * The name to reference from Spotlight.
-     */
-    name: string;
-}
-/**
- * __Spotlight target__
- *
- * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
- *
- * - [Examples](https://atlassian.design/components/onboarding/examples)
- * - [Code](https://atlassian.design/components/onboarding/code)
- * - [Usage](https://atlassian.design/components/onboarding/usage)
- *
- * @deprecated Use `@atlaskit/spotlight` instead.
- */
-declare const SpotlightTarget: {
-    ({ children, name }: SpotlightTargetProps): React.JSX.Element;
-    displayName: string;
-};
-export default SpotlightTarget;

package/dist/types-ts4.5/components/spotlight-transition.d.ts

@@ -1,45 +0,0 @@
-import React, { type ReactNode } from 'react';
-interface SpotlightTransitionProps {
-    /**
-     * Children that are conditionally rendered. The transition happens based
-     * on the existence or non-existence of children.
-     */
-    children?: ReactNode;
-}
-interface State {
-    currentChildren: ReactNode;
-}
-interface SpotlightTransitionContextModel {
-    isOpen: boolean;
-    onExited: () => void;
-}
-/**
- * __Spotlight transition__
- *
- * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
- *
- * - [Examples](https://atlassian.design/components/onboarding/examples)
- * - [Code](https://atlassian.design/components/onboarding/code)
- * - [Usage](https://atlassian.design/components/onboarding/usage)
- *
- * @deprecated Use `@atlaskit/spotlight` instead.
- */
-declare class SpotlightTransition extends React.Component<SpotlightTransitionProps, State> {
-    static getDerivedStateFromProps(props: SpotlightTransitionProps, state: State): {
-        currentChildren: React.ReactNode;
-    };
-    state: {
-        currentChildren: undefined;
-    };
-    onExited: () => void;
-    render(): React.JSX.Element;
-}
-/**
- * __Spotlight transition consumer__
- *
- * Used to consume the spotlight transition context through render props.
- *
- * @internal
- */
-export declare const SpotlightTransitionConsumer: React.Consumer<SpotlightTransitionContextModel>;
-export default SpotlightTransition;