@atlaskit/link-picker 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.22.0
+
+### Minor Changes
+
+- [`cd623c7a474`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd623c7a474) - [ux] Wrap search input with conditional spotlight target for better onboarding
+
 ## 1.21.0
 
 ### Minor Changes

package/dist/cjs/ui/link-picker/conditional-spotlight-target-wrapper/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConditionalSpotlightTargetWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _onboarding = require("@atlaskit/onboarding");
+var ConditionalSpotlightTargetWrapper = function ConditionalSpotlightTargetWrapper(_ref) {
+  var spotlightTargetName = _ref.spotlightTargetName,
+    children = _ref.children;
+  return spotlightTargetName ? /*#__PURE__*/_react.default.createElement(_onboarding.SpotlightTarget, {
+    name: spotlightTargetName
+  }, children) : children;
+};
+exports.ConditionalSpotlightTargetWrapper = ConditionalSpotlightTargetWrapper;

package/dist/cjs/ui/link-picker/index.js

@@ -332,6 +332,7 @@ function LinkPicker(_ref) {
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
+    spotlightTargetName: "link-picker-search-field-spotlight-target",
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl

package/dist/cjs/ui/link-picker/text-input/index.js

@@ -13,9 +13,10 @@ var _form = require("@atlaskit/form");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
+var _conditionalSpotlightTargetWrapper = require("../conditional-spotlight-target-wrapper");
 var _utils = require("../utils");
 var _styled = require("./styled");
-var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
 /** @jsx jsx */
 var testIds = {
   urlError: 'link-error',
@@ -32,6 +33,7 @@ var TextInput = function TextInput(_ref) {
     onClear = _ref.onClear,
     clearLabel = _ref.clearLabel,
     error = _ref.error,
+    spotlightTargetName = _ref.spotlightTargetName,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var inputRef = (0, _react.useRef)(null);
   var handleRef = (0, _react.useCallback)(function (input) {
@@ -82,14 +84,16 @@ var TextInput = function TextInput(_ref) {
     name: name
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps;
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+    return (0, _react2.jsx)(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && (0, _react2.jsx)(_form.ErrorMessage, {
       testId: testIds.urlError
-    }, error));
+    }, error)));
   }));
 };
 var _default = TextInput;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.21.0",
+	"version": "1.22.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/conditional-spotlight-target-wrapper/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SpotlightTarget } from '@atlaskit/onboarding';
+export const ConditionalSpotlightTargetWrapper = ({
+  spotlightTargetName,
+  children
+}) => {
+  return spotlightTargetName ? /*#__PURE__*/React.createElement(SpotlightTarget, {
+    name: spotlightTargetName
+  }, children) : children;
+};

package/dist/es2019/ui/link-picker/index.js

@@ -326,6 +326,7 @@ function LinkPicker({
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
+    spotlightTargetName: "link-picker-search-field-spotlight-target",
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl

package/dist/es2019/ui/link-picker/text-input/index.js

@@ -6,6 +6,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
+import { ConditionalSpotlightTargetWrapper } from '../conditional-spotlight-target-wrapper';
 import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
 export const testIds = {
@@ -22,6 +23,7 @@ const TextInput = ({
   onClear,
   clearLabel,
   error,
+  spotlightTargetName,
   ...restProps
 }) => {
   const inputRef = useRef(null);
@@ -74,14 +76,16 @@ const TextInput = ({
   }, ({
     fieldProps
   }) => {
-    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+    return jsx(ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && jsx(ErrorMessage, {
       testId: testIds.urlError
-    }, error));
+    }, error)));
   }));
 };
 export default TextInput;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.21.0",
+	"version": "1.22.0",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker/conditional-spotlight-target-wrapper/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SpotlightTarget } from '@atlaskit/onboarding';
+export var ConditionalSpotlightTargetWrapper = function ConditionalSpotlightTargetWrapper(_ref) {
+  var spotlightTargetName = _ref.spotlightTargetName,
+    children = _ref.children;
+  return spotlightTargetName ? /*#__PURE__*/React.createElement(SpotlightTarget, {
+    name: spotlightTargetName
+  }, children) : children;
+};

package/dist/esm/ui/link-picker/index.js

@@ -321,6 +321,7 @@ function LinkPicker(_ref) {
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
+    spotlightTargetName: "link-picker-search-field-spotlight-target",
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl

package/dist/esm/ui/link-picker/text-input/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
 /** @jsx jsx */
 import { useCallback, useRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,6 +8,7 @@ import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
+import { ConditionalSpotlightTargetWrapper } from '../conditional-spotlight-target-wrapper';
 import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
 export var testIds = {
@@ -24,6 +25,7 @@ var TextInput = function TextInput(_ref) {
     onClear = _ref.onClear,
     clearLabel = _ref.clearLabel,
     error = _ref.error,
+    spotlightTargetName = _ref.spotlightTargetName,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var handleRef = useCallback(function (input) {
@@ -74,14 +76,16 @@ var TextInput = function TextInput(_ref) {
     name: name
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps;
-    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
+    return jsx(ConditionalSpotlightTargetWrapper, {
+      spotlightTargetName: spotlightTargetName
+    }, jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && jsx(ErrorMessage, {
       testId: testIds.urlError
-    }, error));
+    }, error)));
   }));
 };
 export default TextInput;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.21.0",
+	"version": "1.22.0",
 	"sideEffects": false
 }

package/dist/types/ui/link-picker/conditional-spotlight-target-wrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FunctionComponent } from 'react';
+export interface ConditionalSpotlightTargetWrapperProps {
+    spotlightTargetName?: string;
+    children: React.ReactElement;
+}
+export declare const ConditionalSpotlightTargetWrapper: FunctionComponent<ConditionalSpotlightTargetWrapperProps>;

package/dist/types/ui/link-picker/text-input/index.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from '@atlaskit/textfield';
-export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
+import { ConditionalSpotlightTargetWrapperProps } from '../conditional-spotlight-target-wrapper';
+export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
     name: string;
     value: string;
     label?: string;
@@ -14,5 +15,5 @@ export declare const testIds: {
     urlError: string;
     clearUrlButton: string;
 };
-declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
+declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, ...restProps }: TextInputProps) => jsx.JSX.Element;
 export default TextInput;

package/dist/types-ts4.5/ui/link-picker/conditional-spotlight-target-wrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FunctionComponent } from 'react';
+export interface ConditionalSpotlightTargetWrapperProps {
+    spotlightTargetName?: string;
+    children: React.ReactElement;
+}
+export declare const ConditionalSpotlightTargetWrapper: FunctionComponent<ConditionalSpotlightTargetWrapperProps>;

package/dist/types-ts4.5/ui/link-picker/text-input/index.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from '@atlaskit/textfield';
-export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
+import { ConditionalSpotlightTargetWrapperProps } from '../conditional-spotlight-target-wrapper';
+export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
     name: string;
     value: string;
     label?: string;
@@ -14,5 +15,5 @@ export declare const testIds: {
     urlError: string;
     clearUrlButton: string;
 };
-declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
+declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, ...restProps }: TextInputProps) => jsx.JSX.Element;
 export default TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -45,9 +45,10 @@
     "@atlaskit/frontend-utilities": "^2.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/linking-common": "^2.12.0",
+    "@atlaskit/onboarding": "^10.8.2",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
-    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -79,8 +80,8 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/link-picker-atlassian-plugin": "^31.0.0",
-    "@atlassian/link-picker-plugins": "^21.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^32.0.0",
+    "@atlassian/link-picker-plugins": "^22.0.0",
     "@atlassian/recent-work-client": "^1.8.0",
     "@atlassian/search-provider": "^2.4.0",
     "@testing-library/dom": "^8.17.1",