@atlaskit/onboarding 10.8.2 → 10.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/onboarding
 
+## 10.8.3
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
 ## 10.8.2
 
 ### Patch Changes

package/dist/cjs/components/spotlight-card.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));

package/dist/cjs/components/spotlight-dialog.js

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.8.2";
+var packageVersion = "10.8.3";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/dialog.js

@@ -35,10 +35,13 @@ var actionItemStyles = (0, _react.css)({
 var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("img", (0, _extends2.default)({
-    css: imageStyles,
-    alt: alt
-  }, props));
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react.jsx)("img", (0, _extends2.default)({
+      css: imageStyles,
+      alt: alt
+    }, props))
+  );
 };
 
 /**

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.8.2",
+	"version": "10.8.3",
 	"sideEffects": false
 }

package/dist/es2019/components/spotlight-card.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.8.2";
+const packageVersion = "10.8.3";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/dialog.js

@@ -27,7 +27,9 @@ const actionItemStyles = css({
 export const DialogImage = ({
   alt,
   ...props
-}) => jsx("img", _extends({
+}) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx("img", _extends({
   css: imageStyles,
   alt: alt
 }, props));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.8.2",
+	"version": "10.8.3",
 	"sideEffects": false
 }

package/dist/esm/components/spotlight-card.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text", "key"];
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';

package/dist/esm/components/spotlight-dialog.js

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.8.2";
+var packageVersion = "10.8.3";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/dialog.js

@@ -29,10 +29,13 @@ var actionItemStyles = css({
 export var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("img", _extends({
-    css: imageStyles,
-    alt: alt
-  }, props));
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx("img", _extends({
+      css: imageStyles,
+      alt: alt
+    }, props))
+  );
 };
 
 /**

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.8.2",
+	"version": "10.8.3",
 	"sideEffects": false
 }

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ComponentType, ReactNode, Ref } from 'react';
+import { ComponentType, ReactNode, Ref } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
 /**
@@ -77,5 +77,5 @@ interface SpotlightCardProps {
  * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
  * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
  */
-declare const SpotlightCard: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const SpotlightCard: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SpotlightCard;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface SpotlightTargetProps {
     /**
      * A single child
@@ -18,5 +18,5 @@ interface SpotlightTargetProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
+declare const SpotlightTarget: ({ children, name }: SpotlightTargetProps) => JSX.Element;
 export default SpotlightTarget;

package/dist/types/components/spotlight.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, MouseEvent, ReactNode } from 'react';
+import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { Actions } from '../types';
 export interface SpotlightProps {
     /**
@@ -92,5 +92,5 @@ export interface SpotlightProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const Spotlight: React.FC<SpotlightProps>;
+declare const Spotlight: ({ dialogWidth, pulse, testId, targetNode, target, ...rest }: SpotlightProps) => JSX.Element;
 export default Spotlight;

package/dist/types/styled/blanket.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
@@ -14,5 +16,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: React.FC<BlanketProps>;
+declare const Blanket: (props: BlanketProps) => jsx.JSX.Element;
 export default Blanket;

package/dist/types/styled/dialog.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 /**
  * __Dialog image__
  *
@@ -7,7 +8,7 @@ import { ReactNode } from 'react';
  *
  * @internal
  */
-export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>>;
+export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
 /**
  * __Dialog action item container__
  *
@@ -15,9 +16,9 @@ export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElem
  *
  * @internal
  */
-export declare const DialogActionItemContainer: React.FC<{
+export declare const DialogActionItemContainer: ({ children, }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Dialog action item__
  *
@@ -25,6 +26,6 @@ export declare const DialogActionItemContainer: React.FC<{
  *
  * @internal
  */
-export declare const DialogActionItem: React.FC<{
+export declare const DialogActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;

package/dist/types/styled/modal.d.ts

@@ -1,44 +1,48 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type ModalImageProps = {
+    alt: string;
+    src?: string;
+};
+type ModalActionContainerProps = {
+    shouldReverseButtonOrder: boolean;
+    children: ReactNode;
+};
 /**
  * __Modal body__
  *
  * @internal
  */
-export declare const ModalBody: React.FC<{
+export declare const ModalBody: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Modal heading__
  *
  * @internal
  */
-export declare const ModalHeading: React.FC<{
-    children: string;
-}>;
+export declare const ModalHeading: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
 /**
  * __Modal image__
  *
  * @internal
  */
-export declare const ModalImage: React.FC<{
-    alt: string;
-    src?: string;
-}>;
+export declare const ModalImage: ({ alt, src }: ModalImageProps) => jsx.JSX.Element;
 /**
  * __Modal action container__
  *
  * @internal
  */
-export declare const ModalActionContainer: React.FC<{
-    shouldReverseButtonOrder: boolean;
-    children: ReactNode;
-}>;
+export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => jsx.JSX.Element;
 /**
  * __Modal action item__
  *
  * @internal
  */
-export declare const ModalActionItem: React.FC<{
+export declare const ModalActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
+export {};

package/dist/types/styled/target.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
@@ -19,7 +20,7 @@ export declare const pulseKeyframesName: string;
  *
  * @internal
  */
-export declare const TargetInner: React.FC<TargetProps>;
+export declare const TargetInner: ({ children, pulse, ...props }: TargetProps) => jsx.JSX.Element;
 /**
  * __Target overlay__
  *
@@ -28,7 +29,7 @@ export declare const TargetInner: React.FC<TargetProps>;
  *
  * @internal
  */
-export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const TargetOverlay: (props: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
 /**
  * __Spotlight pulse__
  *
@@ -38,5 +39,5 @@ export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-export declare const Pulse: React.FC<TargetProps>;
+export declare const Pulse: ({ children, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ComponentType, ReactNode, Ref } from 'react';
+import { ComponentType, ReactNode, Ref } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
 /**
@@ -77,5 +77,5 @@ interface SpotlightCardProps {
  * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
  * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
  */
-declare const SpotlightCard: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const SpotlightCard: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SpotlightCard;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface SpotlightTargetProps {
     /**
      * A single child
@@ -18,5 +18,5 @@ interface SpotlightTargetProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
+declare const SpotlightTarget: ({ children, name }: SpotlightTargetProps) => JSX.Element;
 export default SpotlightTarget;

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, MouseEvent, ReactNode } from 'react';
+import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { Actions } from '../types';
 export interface SpotlightProps {
     /**
@@ -92,5 +92,5 @@ export interface SpotlightProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const Spotlight: React.FC<SpotlightProps>;
+declare const Spotlight: ({ dialogWidth, pulse, testId, targetNode, target, ...rest }: SpotlightProps) => JSX.Element;
 export default Spotlight;

package/dist/types-ts4.5/styled/blanket.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
@@ -14,5 +16,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: React.FC<BlanketProps>;
+declare const Blanket: (props: BlanketProps) => jsx.JSX.Element;
 export default Blanket;

package/dist/types-ts4.5/styled/dialog.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 /**
  * __Dialog image__
  *
@@ -7,7 +8,7 @@ import { ReactNode } from 'react';
  *
  * @internal
  */
-export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>>;
+export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
 /**
  * __Dialog action item container__
  *
@@ -15,9 +16,9 @@ export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElem
  *
  * @internal
  */
-export declare const DialogActionItemContainer: React.FC<{
+export declare const DialogActionItemContainer: ({ children, }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Dialog action item__
  *
@@ -25,6 +26,6 @@ export declare const DialogActionItemContainer: React.FC<{
  *
  * @internal
  */
-export declare const DialogActionItem: React.FC<{
+export declare const DialogActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;

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

@@ -1,44 +1,48 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type ModalImageProps = {
+    alt: string;
+    src?: string;
+};
+type ModalActionContainerProps = {
+    shouldReverseButtonOrder: boolean;
+    children: ReactNode;
+};
 /**
  * __Modal body__
  *
  * @internal
  */
-export declare const ModalBody: React.FC<{
+export declare const ModalBody: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Modal heading__
  *
  * @internal
  */
-export declare const ModalHeading: React.FC<{
-    children: string;
-}>;
+export declare const ModalHeading: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
 /**
  * __Modal image__
  *
  * @internal
  */
-export declare const ModalImage: React.FC<{
-    alt: string;
-    src?: string;
-}>;
+export declare const ModalImage: ({ alt, src }: ModalImageProps) => jsx.JSX.Element;
 /**
  * __Modal action container__
  *
  * @internal
  */
-export declare const ModalActionContainer: React.FC<{
-    shouldReverseButtonOrder: boolean;
-    children: ReactNode;
-}>;
+export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => jsx.JSX.Element;
 /**
  * __Modal action item__
  *
  * @internal
  */
-export declare const ModalActionItem: React.FC<{
+export declare const ModalActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/styled/target.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
@@ -19,7 +20,7 @@ export declare const pulseKeyframesName: string;
  *
  * @internal
  */
-export declare const TargetInner: React.FC<TargetProps>;
+export declare const TargetInner: ({ children, pulse, ...props }: TargetProps) => jsx.JSX.Element;
 /**
  * __Target overlay__
  *
@@ -28,7 +29,7 @@ export declare const TargetInner: React.FC<TargetProps>;
  *
  * @internal
  */
-export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const TargetOverlay: (props: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
 /**
  * __Spotlight pulse__
  *
@@ -38,5 +39,5 @@ export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-export declare const Pulse: React.FC<TargetProps>;
+export declare const Pulse: ({ children, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.8.2",
+  "version": "10.8.3",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -62,7 +62,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/progress-indicator": "^9.5.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",