@atlaskit/onboarding 12.1.9 → 12.2.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/onboarding
 
+## 12.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.0
+
+### Minor Changes
+
+- [#176005](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176005)
+  [`a7f4659856234`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a7f4659856234) -
+  Adds optional render prop API to `SpotlightTarget` component. You can now use a function as the
+  children of `SpotlightTarget` and explicitly connect the `targetRef` to your component. This
+  provides fine-grained control over which element is cloned and avoids the need for a wrapping div
+  element.
+
+### Patch Changes
+
+- [#176005](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176005)
+  [`3f689d259d12e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f689d259d12e) -
+  GA layering into spotlight
+
 ## 12.1.9
 
 ### Patch Changes

package/dist/cjs/components/node-resolver-spotlight-target.js

@@ -24,27 +24,28 @@ var spanStyles = (0, _react2.css)({
  * @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.targetRef - Setting up Target Node in Spotlight Manager.
+ * @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.
  */
 var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
   var hasNodeResolver = _ref.hasNodeResolver,
     children = _ref.children,
-    targetRef = _ref.targetRef,
+    getTargetRef = _ref.getTargetRef,
     name = _ref.name;
   var divRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
+    var targetRef = getTargetRef(name);
     if (!hasNodeResolver) {
       var _divRef$current;
-      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+      targetRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
     }
     return function () {
-      !hasNodeResolver && targetRef(name)(undefined);
+      !hasNodeResolver && targetRef(undefined);
     };
-  }, [hasNodeResolver, name, targetRef]);
+  }, [hasNodeResolver, name, getTargetRef]);
   if (hasNodeResolver) {
     return (0, _react2.jsx)(_reactNodeResolver.default, {
-      innerRef: targetRef(name)
+      innerRef: getTargetRef(name)
     }, children);
   }
   return (0, _react2.jsx)("span", {

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

@@ -156,7 +156,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           onExited: onExited
         }, function (animationStyles) {
           return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-            isDisabled: (0, _platformFeatureFlags.fg)('platform_design_system_team_spotlight_layering') ? false : true
+            isDisabled: false
           }, /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,

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

@@ -66,7 +66,7 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
       spotlightCount: 0,
       targets: {}
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", function (name) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTargetRef", function (name) {
       return function (element) {
         _this.setState(function (state) {
           return {
@@ -119,7 +119,7 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
       return /*#__PURE__*/_react.default.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/_react.default.createElement(TargetProvider, {
-        value: this.targetRef
+        value: this.getTargetRef
       }, /*#__PURE__*/_react.default.createElement(Container, {
         component: Tag || _react.default.Fragment
       }, /*#__PURE__*/_react.default.createElement(_animation.Fade, {

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

@@ -21,11 +21,16 @@ var _spotlightManager = require("./spotlight-manager");
 var SpotlightTarget = function SpotlightTarget(_ref) {
   var children = _ref.children,
     name = _ref.name;
-  return /*#__PURE__*/_react.default.createElement(_spotlightManager.TargetConsumer, null, function (targetRef) {
-    return targetRef ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightTarget.default, {
+  return /*#__PURE__*/_react.default.createElement(_spotlightManager.TargetConsumer, null, function (getTargetRef) {
+    if (typeof children === 'function') {
+      return children({
+        targetRef: getTargetRef === null || getTargetRef === void 0 ? void 0 : getTargetRef(name)
+      });
+    }
+    return getTargetRef ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightTarget.default, {
       name: name,
       hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_onboarding_noderesolve'),
-      targetRef: targetRef
+      getTargetRef: getTargetRef
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)) : children;
   });
 };

package/dist/es2019/components/node-resolver-spotlight-target.js

@@ -16,28 +16,29 @@ const spanStyles = css({
  * @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.targetRef - Setting up Target Node in Spotlight Manager.
+ * @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.
  */
 const NodeResolverSpotlightTarget = ({
   hasNodeResolver,
   children,
-  targetRef,
+  getTargetRef,
   name
 }) => {
   const divRef = useRef(null);
   useEffect(() => {
+    const targetRef = getTargetRef(name);
     if (!hasNodeResolver) {
       var _divRef$current;
-      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+      targetRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
     }
     return () => {
-      !hasNodeResolver && targetRef(name)(undefined);
+      !hasNodeResolver && targetRef(undefined);
     };
-  }, [hasNodeResolver, name, targetRef]);
+  }, [hasNodeResolver, name, getTargetRef]);
   if (hasNodeResolver) {
     return jsx(NodeResolver, {
-      innerRef: targetRef(name)
+      innerRef: getTargetRef(name)
     }, children);
   }
   return jsx("span", {

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

@@ -121,7 +121,7 @@ class SpotlightInner extends React.Component {
       hasEntered: isOpen,
       onExited: onExited
     }, animationStyles => /*#__PURE__*/React.createElement(Layering, {
-      isDisabled: fg('platform_design_system_team_spotlight_layering') ? false : true
+      isDisabled: false
     }, /*#__PURE__*/React.createElement(SpotlightDialog, {
       testId: `${testId}--dialog`,
       actions: this.props.actions,

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

@@ -43,7 +43,7 @@ export default class SpotlightManager extends PureComponent {
       spotlightCount: 0,
       targets: {}
     });
-    _defineProperty(this, "targetRef", name => element => {
+    _defineProperty(this, "getTargetRef", name => element => {
       this.setState(state => ({
         targets: {
           ...state.targets,
@@ -85,7 +85,7 @@ export default class SpotlightManager extends PureComponent {
     return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
       value: this.getStateProviderValue(this.state.targets)
     }, /*#__PURE__*/React.createElement(TargetProvider, {
-      value: this.targetRef
+      value: this.getTargetRef
     }, /*#__PURE__*/React.createElement(Container, {
       component: Tag || React.Fragment
     }, /*#__PURE__*/React.createElement(Fade, {

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

@@ -14,9 +14,16 @@ import { TargetConsumer } from './spotlight-manager';
 const SpotlightTarget = ({
   children,
   name
-}) => /*#__PURE__*/React.createElement(TargetConsumer, null, targetRef => targetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
-  name: name,
-  hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
-  targetRef: targetRef
-}, /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children);
+}) => /*#__PURE__*/React.createElement(TargetConsumer, null, getTargetRef => {
+  if (typeof children === 'function') {
+    return children({
+      targetRef: getTargetRef === null || getTargetRef === void 0 ? void 0 : getTargetRef(name)
+    });
+  }
+  return getTargetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
+    name: name,
+    hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
+    getTargetRef: getTargetRef
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children;
+});
 export default SpotlightTarget;

package/dist/esm/components/node-resolver-spotlight-target.js

@@ -16,27 +16,28 @@ var spanStyles = css({
  * @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.targetRef - Setting up Target Node in Spotlight Manager.
+ * @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.
  */
 var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
   var hasNodeResolver = _ref.hasNodeResolver,
     children = _ref.children,
-    targetRef = _ref.targetRef,
+    getTargetRef = _ref.getTargetRef,
     name = _ref.name;
   var divRef = useRef(null);
   useEffect(function () {
+    var targetRef = getTargetRef(name);
     if (!hasNodeResolver) {
       var _divRef$current;
-      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+      targetRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
     }
     return function () {
-      !hasNodeResolver && targetRef(name)(undefined);
+      !hasNodeResolver && targetRef(undefined);
     };
-  }, [hasNodeResolver, name, targetRef]);
+  }, [hasNodeResolver, name, getTargetRef]);
   if (hasNodeResolver) {
     return jsx(NodeResolver, {
-      innerRef: targetRef(name)
+      innerRef: getTargetRef(name)
     }, children);
   }
   return jsx("span", {

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

@@ -149,7 +149,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           onExited: onExited
         }, function (animationStyles) {
           return /*#__PURE__*/React.createElement(Layering, {
-            isDisabled: fg('platform_design_system_team_spotlight_layering') ? false : true
+            isDisabled: false
           }, /*#__PURE__*/React.createElement(SpotlightDialog, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,

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

@@ -58,7 +58,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       spotlightCount: 0,
       targets: {}
     });
-    _defineProperty(_assertThisInitialized(_this), "targetRef", function (name) {
+    _defineProperty(_assertThisInitialized(_this), "getTargetRef", function (name) {
       return function (element) {
         _this.setState(function (state) {
           return {
@@ -111,7 +111,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/React.createElement(TargetProvider, {
-        value: this.targetRef
+        value: this.getTargetRef
       }, /*#__PURE__*/React.createElement(Container, {
         component: Tag || React.Fragment
       }, /*#__PURE__*/React.createElement(Fade, {

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

@@ -14,11 +14,16 @@ import { TargetConsumer } from './spotlight-manager';
 var SpotlightTarget = function SpotlightTarget(_ref) {
   var children = _ref.children,
     name = _ref.name;
-  return /*#__PURE__*/React.createElement(TargetConsumer, null, function (targetRef) {
-    return targetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
+  return /*#__PURE__*/React.createElement(TargetConsumer, null, function (getTargetRef) {
+    if (typeof children === 'function') {
+      return children({
+        targetRef: getTargetRef === null || getTargetRef === void 0 ? void 0 : getTargetRef(name)
+      });
+    }
+    return getTargetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
       name: name,
       hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
-      targetRef: targetRef
+      getTargetRef: getTargetRef
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children;
   });
 };

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

@@ -7,7 +7,7 @@ import { jsx } from '@emotion/react';
 interface NodeResolverSpotlightTargetProps {
     hasNodeResolver: boolean;
     children: ReactElement;
-    targetRef: (name: string) => (element: Element | null | undefined) => void;
+    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
     name: string;
 }
 /**
@@ -18,8 +18,8 @@ interface NodeResolverSpotlightTargetProps {
  * @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.targetRef - Setting up Target Node in Spotlight Manager.
+ * @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, targetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
 export default NodeResolverSpotlightTarget;

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

@@ -1,5 +1,15 @@
 import React, { type ElementType, PureComponent, type ReactNode } from 'react';
-declare const TargetConsumer: React.Consumer<any>;
+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;
@@ -58,7 +68,7 @@ export default class SpotlightManager extends PureComponent<SpotlightManagerProp
         spotlightCount: number;
         targets: {};
     };
-    targetRef: (name: string) => (element: HTMLElement | void) => void;
+    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
     spotlightOpen: () => void;
     spotlightClose: () => void;
     getStateProviderValue: import("memoize-one").MemoizedFn<(this: any, targets: any) => {

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

@@ -1,9 +1,32 @@
 import { 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;
+    children: ReactNode | RenderChildrenFunction;
     /**
      * The name to reference from Spotlight.
      */

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

@@ -7,7 +7,7 @@ import { jsx } from '@emotion/react';
 interface NodeResolverSpotlightTargetProps {
     hasNodeResolver: boolean;
     children: ReactElement;
-    targetRef: (name: string) => (element: Element | null | undefined) => void;
+    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
     name: string;
 }
 /**
@@ -18,8 +18,8 @@ interface NodeResolverSpotlightTargetProps {
  * @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.targetRef - Setting up Target Node in Spotlight Manager.
+ * @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, targetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, getTargetRef, name, }: NodeResolverSpotlightTargetProps) => jsx.JSX.Element;
 export default NodeResolverSpotlightTarget;

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

@@ -1,5 +1,15 @@
 import React, { type ElementType, PureComponent, type ReactNode } from 'react';
-declare const TargetConsumer: React.Consumer<any>;
+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;
@@ -58,7 +68,7 @@ export default class SpotlightManager extends PureComponent<SpotlightManagerProp
         spotlightCount: number;
         targets: {};
     };
-    targetRef: (name: string) => (element: HTMLElement | void) => void;
+    getTargetRef: (name: string) => (element: HTMLElement | null | undefined) => void;
     spotlightOpen: () => void;
     spotlightClose: () => void;
     getStateProviderValue: import("memoize-one").MemoizedFn<(this: any, targets: any) => {

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

@@ -1,9 +1,32 @@
 import { 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;
+    children: ReactNode | RenderChildrenFunction;
     /**
      * The name to reference from Spotlight.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "12.1.9",
+	"version": "12.2.1",
 	"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/button": "^20.3.0",
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/heading": "^4.0.0",
-		"@atlaskit/layering": "^0.8.0",
+		"@atlaskit/layering": "^1.0.0",
 		"@atlaskit/modal-dialog": "^12.18.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -86,9 +86,6 @@
 		"platform_design_system_team_onboarding_noderesolve": {
 			"type": "boolean"
 		},
-		"platform_design_system_team_spotlight_layering": {
-			"type": "boolean"
-		},
 		"design-system-closed-all-when-click-outside": {
 			"type": "boolean",
 			"referenceOnly": true