@atlaskit/link-picker 3.1.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/link-picker
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#139689](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139689)
8
+ [`4293811430fb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4293811430fb4) -
9
+ Add plugin option to allow filtering by link URL and expose inputRef as a prop from the link
10
+ picker.
11
+
12
+ ## 3.1.4
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 3.1.3
4
19
 
5
20
  ### Patch Changes
@@ -20,6 +20,8 @@ var _default = exports.default = {
20
20
  'fabric.linkPicker.clearLinkText': 'Clear text',
21
21
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
22
22
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
23
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
24
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
23
25
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
24
26
  'fabric.linkPicker.linkLabel': 'Link',
25
27
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -30,6 +32,7 @@ var _default = exports.default = {
30
32
  'fabric.linkPicker.listTitle.results': 'Results',
31
33
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
32
34
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
35
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
33
36
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
34
37
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
35
38
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -20,6 +20,8 @@ var _default = exports.default = {
20
20
  'fabric.linkPicker.clearLinkText': 'Clear text',
21
21
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
22
22
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
23
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
24
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
23
25
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
24
26
  'fabric.linkPicker.linkLabel': 'Link',
25
27
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -30,6 +32,7 @@ var _default = exports.default = {
30
32
  'fabric.linkPicker.listTitle.results': 'Results',
31
33
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
32
34
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
35
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
33
36
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
34
37
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
35
38
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -20,6 +20,8 @@ var _default = exports.default = {
20
20
  'fabric.linkPicker.clearLinkText': '⁣⁢Clear text⁠‌؜؜⁡⁠‍⁡‌⁣⁤',
21
21
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {⁣⁢no results found؜‍⁠‍‍‍‌‌‍‌؜⁣⁤} one {⁣⁢{count,number} result found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤} other {⁣⁢{count,number} results found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤}}',
22
22
  'fabric.linkPicker.linkAriaLabel': '⁣⁢Type or paste a link into the field‍؜؜‍؜‍⁡⁠؜؜⁠⁣⁤',
23
+ 'fabric.linkPicker.linkHelperTextAriaLabel': '⁣⁢Link display helper text؜‌‌‍⁠‌⁡؜‍⁣⁤',
24
+ 'fabric.linkPicker.linkHelperTextLabel': '⁣⁢Give this link a title or description؜⁠⁠‌‍؜⁡⁠⁠⁣⁤',
23
25
  'fabric.linkPicker.linkInvalid': '⁣⁢Enter a valid URL.؜⁠⁠؜؜⁡؜‍؜⁡⁣⁤',
24
26
  'fabric.linkPicker.linkLabel': '⁣⁢Link‌‍‍‍‍‌⁠‍‌⁣⁤',
25
27
  'fabric.linkPicker.linkPlaceholder': '⁣⁢Paste a link؜‍‍⁡؜⁠‌؜‍‍‌⁣⁤',
@@ -30,6 +32,7 @@ var _default = exports.default = {
30
32
  'fabric.linkPicker.listTitle.results': '⁣⁢Results‌‌⁡⁠⁠‌؜‍⁠‍⁣⁤',
31
33
  'fabric.linkPicker.search.error.description': '⁣⁢Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.‌؜‌‍⁡؜⁠؜‍⁣⁤',
32
34
  'fabric.linkPicker.search.error.heading': '⁣⁢We’re having trouble loading data.‌‍⁠⁠‌‍⁡⁠‍‍⁣⁤',
35
+ 'fabric.linkPicker.search.error.retry': '⁣⁢Refresh؜⁡؜⁡‌؜‌؜⁣⁤',
33
36
  'fabric.linkPicker.search.linkAriaLabel': '⁣⁢Suggestions will appear below as you type into the field⁠‍⁠⁡⁠؜⁡‌⁠‌⁣⁤',
34
37
  'fabric.linkPicker.search.linkLabel': '⁣⁢Search or paste a link؜؜‍⁡‍‍‍‍‌⁣⁤',
35
38
  'fabric.linkPicker.search.linkPlaceholder': '⁣⁢Find recent links or paste a new link‌‌‌⁠⁡؜‌؜⁡⁣⁤',
@@ -108,7 +108,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
108
108
  _ref$adaptiveHeight = _ref.adaptiveHeight,
109
109
  adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
110
110
  _ref$moveSubmitButton = _ref.moveSubmitButton,
111
- moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton;
111
+ moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton,
112
+ inputRef = _ref.inputRef;
112
113
  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
113
114
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
114
115
  var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -364,7 +365,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
364
365
  }, a11yList, {
365
366
  onClear: handleUrlClear,
366
367
  onKeyDown: handleKeyDown,
367
- onChange: handleChangeUrl
368
+ onChange: handleChangeUrl,
369
+ inputRef: inputRef
368
370
  })), !hideDisplayText && /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
369
371
  autoComplete: "off",
370
372
  name: "displayText",
@@ -13,6 +13,7 @@ var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
+ var _useCallbackRef = require("use-callback-ref");
16
17
  var _form = require("@atlaskit/form");
17
18
  var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle--select-clear"));
18
19
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -21,7 +22,7 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
21
22
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
22
23
  var _conditionalSpotlightTargetWrapper = require("./conditional-spotlight-target-wrapper");
23
24
  var _utils = require("./utils");
24
- var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
25
+ var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef"];
25
26
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
26
27
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
28
  var styles = {
@@ -49,6 +50,7 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
49
50
  clearLabel = _ref.clearLabel,
50
51
  error = _ref.error,
51
52
  spotlightTargetName = _ref.spotlightTargetName,
53
+ inputRefProp = _ref.inputRef,
52
54
  restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
53
55
  var inputRef = (0, _react.useRef)(null);
54
56
  var handleRef = (0, _react.useCallback)(function (input) {
@@ -62,6 +64,17 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
62
64
  }
63
65
  }
64
66
  }, [autoFocus]);
67
+ var textfieldRef;
68
+ if ((0, _platformFeatureFlags.fg)('jsc_inline_editing_field_refactor')) {
69
+ // eslint-disable-next-line react-hooks/rules-of-hooks
70
+ var refs = (0, _react.useMemo)(function () {
71
+ return [handleRef, inputRefProp].filter(Boolean);
72
+ }, [handleRef, inputRefProp]);
73
+ // eslint-disable-next-line react-hooks/rules-of-hooks
74
+ textfieldRef = (0, _useCallbackRef.useMergeRefs)(refs);
75
+ } else {
76
+ textfieldRef = handleRef;
77
+ }
65
78
  var handleKeydown = (0, _react.useCallback)(function (e) {
66
79
  if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
67
80
  e.preventDefault();
@@ -104,7 +117,7 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
104
117
  spotlightTargetName: spotlightTargetName
105
118
  }, /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
106
119
  onKeyDown: handleKeydown,
107
- ref: handleRef,
120
+ ref: textfieldRef,
108
121
  elemAfterInput: clearText,
109
122
  isInvalid: !!error
110
123
  })), error && /*#__PURE__*/React.createElement(_form.ErrorMessage, {
@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
26
26
  };
27
27
  var PACKAGE_DATA = exports.PACKAGE_DATA = {
28
28
  packageName: "@atlaskit/link-picker" || '',
29
- packageVersion: "3.1.3" || '',
29
+ packageVersion: "3.2.0" || '',
30
30
  componentName: _constants.COMPONENT_NAME,
31
31
  source: _constants.COMPONENT_NAME
32
32
  };
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': 'Clear text',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
16
16
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
18
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
17
19
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
18
20
  'fabric.linkPicker.linkLabel': 'Link',
19
21
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': 'Results',
25
27
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
26
28
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
29
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
27
30
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
28
31
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
29
32
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': 'Clear text',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
16
16
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
18
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
17
19
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
18
20
  'fabric.linkPicker.linkLabel': 'Link',
19
21
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': 'Results',
25
27
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
26
28
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
29
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
27
30
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
28
31
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
29
32
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': '⁣⁢Clear text⁠‌؜؜⁡⁠‍⁡‌⁣⁤',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {⁣⁢no results found؜‍⁠‍‍‍‌‌‍‌؜⁣⁤} one {⁣⁢{count,number} result found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤} other {⁣⁢{count,number} results found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤}}',
16
16
  'fabric.linkPicker.linkAriaLabel': '⁣⁢Type or paste a link into the field‍؜؜‍؜‍⁡⁠؜؜⁠⁣⁤',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': '⁣⁢Link display helper text؜‌‌‍⁠‌⁡؜‍⁣⁤',
18
+ 'fabric.linkPicker.linkHelperTextLabel': '⁣⁢Give this link a title or description؜⁠⁠‌‍؜⁡⁠⁠⁣⁤',
17
19
  'fabric.linkPicker.linkInvalid': '⁣⁢Enter a valid URL.؜⁠⁠؜؜⁡؜‍؜⁡⁣⁤',
18
20
  'fabric.linkPicker.linkLabel': '⁣⁢Link‌‍‍‍‍‌⁠‍‌⁣⁤',
19
21
  'fabric.linkPicker.linkPlaceholder': '⁣⁢Paste a link؜‍‍⁡؜⁠‌؜‍‍‌⁣⁤',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': '⁣⁢Results‌‌⁡⁠⁠‌؜‍⁠‍⁣⁤',
25
27
  'fabric.linkPicker.search.error.description': '⁣⁢Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.‌؜‌‍⁡؜⁠؜‍⁣⁤',
26
28
  'fabric.linkPicker.search.error.heading': '⁣⁢We’re having trouble loading data.‌‍⁠⁠‌‍⁡⁠‍‍⁣⁤',
29
+ 'fabric.linkPicker.search.error.retry': '⁣⁢Refresh؜⁡؜⁡‌؜‌؜⁣⁤',
27
30
  'fabric.linkPicker.search.linkAriaLabel': '⁣⁢Suggestions will appear below as you type into the field⁠‍⁠⁡⁠؜⁡‌⁠‌⁣⁤',
28
31
  'fabric.linkPicker.search.linkLabel': '⁣⁢Search or paste a link؜؜‍⁡‍‍‍‍‌⁣⁤',
29
32
  'fabric.linkPicker.search.linkPlaceholder': '⁣⁢Find recent links or paste a new link‌‌‌⁠⁡؜‌؜⁡⁣⁤',
@@ -98,7 +98,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
98
98
  customMessages,
99
99
  isSubmitting = false,
100
100
  adaptiveHeight = false,
101
- moveSubmitButton = false
101
+ moveSubmitButton = false,
102
+ inputRef
102
103
  }) => {
103
104
  const {
104
105
  createAnalyticsEvent
@@ -358,7 +359,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
358
359
  }, a11yList, {
359
360
  onClear: handleUrlClear,
360
361
  onKeyDown: handleKeyDown,
361
- onChange: handleChangeUrl
362
+ onChange: handleChangeUrl,
363
+ inputRef: inputRef
362
364
  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
363
365
  autoComplete: "off",
364
366
  name: "displayText",
@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./index.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { Fragment, useCallback, useRef } from 'react';
6
+ import { Fragment, useCallback, useMemo, useRef } from 'react';
7
+ import { useMergeRefs } from 'use-callback-ref';
7
8
  import { ErrorMessage, Field } from '@atlaskit/form';
8
9
  import Selectclear from '@atlaskit/icon/core/migration/cross-circle--select-clear';
9
10
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -37,6 +38,7 @@ export const TextInput = ({
37
38
  clearLabel,
38
39
  error,
39
40
  spotlightTargetName,
41
+ inputRef: inputRefProp,
40
42
  ...restProps
41
43
  }) => {
42
44
  const inputRef = useRef(null);
@@ -51,6 +53,15 @@ export const TextInput = ({
51
53
  }
52
54
  }
53
55
  }, [autoFocus]);
56
+ let textfieldRef;
57
+ if (fg('jsc_inline_editing_field_refactor')) {
58
+ // eslint-disable-next-line react-hooks/rules-of-hooks
59
+ const refs = useMemo(() => [handleRef, inputRefProp].filter(Boolean), [handleRef, inputRefProp]);
60
+ // eslint-disable-next-line react-hooks/rules-of-hooks
61
+ textfieldRef = useMergeRefs(refs);
62
+ } else {
63
+ textfieldRef = handleRef;
64
+ }
54
65
  const handleKeydown = useCallback(e => {
55
66
  if (typeof onUndo === 'function' && isUndoEvent(e)) {
56
67
  e.preventDefault();
@@ -94,7 +105,7 @@ export const TextInput = ({
94
105
  spotlightTargetName: spotlightTargetName
95
106
  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
96
107
  onKeyDown: handleKeydown,
97
- ref: handleRef,
108
+ ref: textfieldRef,
98
109
  elemAfterInput: clearText,
99
110
  isInvalid: !!error
100
111
  })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -15,7 +15,7 @@ export const testIds = {
15
15
  };
16
16
  export const PACKAGE_DATA = {
17
17
  packageName: "@atlaskit/link-picker" || '',
18
- packageVersion: "3.1.3" || '',
18
+ packageVersion: "3.2.0" || '',
19
19
  componentName: COMPONENT_NAME,
20
20
  source: COMPONENT_NAME
21
21
  };
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': 'Clear text',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
16
16
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
18
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
17
19
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
18
20
  'fabric.linkPicker.linkLabel': 'Link',
19
21
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': 'Results',
25
27
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
26
28
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
29
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
27
30
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
28
31
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
29
32
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': 'Clear text',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {no results} one {# result} other {# results}} found',
16
16
  'fabric.linkPicker.linkAriaLabel': 'Type or paste a link into the field',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': 'Link display helper text',
18
+ 'fabric.linkPicker.linkHelperTextLabel': 'Give this link a title or description',
17
19
  'fabric.linkPicker.linkInvalid': 'Enter a valid URL.',
18
20
  'fabric.linkPicker.linkLabel': 'Link',
19
21
  'fabric.linkPicker.linkPlaceholder': 'Paste a link',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': 'Results',
25
27
  'fabric.linkPicker.search.error.description': 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
26
28
  'fabric.linkPicker.search.error.heading': 'We’re having trouble loading data.',
29
+ 'fabric.linkPicker.search.error.retry': 'Refresh',
27
30
  'fabric.linkPicker.search.linkAriaLabel': 'Suggestions will appear below as you type into the field',
28
31
  'fabric.linkPicker.search.linkLabel': 'Search or paste a link',
29
32
  'fabric.linkPicker.search.linkPlaceholder': 'Find recent links or paste a new link',
@@ -14,6 +14,8 @@ export default {
14
14
  'fabric.linkPicker.clearLinkText': '⁣⁢Clear text⁠‌؜؜⁡⁠‍⁡‌⁣⁤',
15
15
  'fabric.linkPicker.hyperlink.searchLinkResults': '{count, plural, =0 {⁣⁢no results found؜‍⁠‍‍‍‌‌‍‌؜⁣⁤} one {⁣⁢{count,number} result found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤} other {⁣⁢{count,number} results found؜؜‍⁡⁡‍‍‍؜⁠⁣⁤}}',
16
16
  'fabric.linkPicker.linkAriaLabel': '⁣⁢Type or paste a link into the field‍؜؜‍؜‍⁡⁠؜؜⁠⁣⁤',
17
+ 'fabric.linkPicker.linkHelperTextAriaLabel': '⁣⁢Link display helper text؜‌‌‍⁠‌⁡؜‍⁣⁤',
18
+ 'fabric.linkPicker.linkHelperTextLabel': '⁣⁢Give this link a title or description؜⁠⁠‌‍؜⁡⁠⁠⁣⁤',
17
19
  'fabric.linkPicker.linkInvalid': '⁣⁢Enter a valid URL.؜⁠⁠؜؜⁡؜‍؜⁡⁣⁤',
18
20
  'fabric.linkPicker.linkLabel': '⁣⁢Link‌‍‍‍‍‌⁠‍‌⁣⁤',
19
21
  'fabric.linkPicker.linkPlaceholder': '⁣⁢Paste a link؜‍‍⁡؜⁠‌؜‍‍‌⁣⁤',
@@ -24,6 +26,7 @@ export default {
24
26
  'fabric.linkPicker.listTitle.results': '⁣⁢Results‌‌⁡⁠⁠‌؜‍⁠‍⁣⁤',
25
27
  'fabric.linkPicker.search.error.description': '⁣⁢Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.‌؜‌‍⁡؜⁠؜‍⁣⁤',
26
28
  'fabric.linkPicker.search.error.heading': '⁣⁢We’re having trouble loading data.‌‍⁠⁠‌‍⁡⁠‍‍⁣⁤',
29
+ 'fabric.linkPicker.search.error.retry': '⁣⁢Refresh؜⁡؜⁡‌؜‌؜⁣⁤',
27
30
  'fabric.linkPicker.search.linkAriaLabel': '⁣⁢Suggestions will appear below as you type into the field⁠‍⁠⁡⁠؜⁡‌⁠‌⁣⁤',
28
31
  'fabric.linkPicker.search.linkLabel': '⁣⁢Search or paste a link؜؜‍⁡‍‍‍‍‌⁣⁤',
29
32
  'fabric.linkPicker.search.linkPlaceholder': '⁣⁢Find recent links or paste a new link‌‌‌⁠⁡؜‌؜⁡⁣⁤',
@@ -98,7 +98,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
98
98
  _ref$adaptiveHeight = _ref.adaptiveHeight,
99
99
  adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
100
100
  _ref$moveSubmitButton = _ref.moveSubmitButton,
101
- moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton;
101
+ moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton,
102
+ inputRef = _ref.inputRef;
102
103
  var _useAnalyticsEvents = useAnalyticsEvents(),
103
104
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
104
105
  var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -354,7 +355,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
354
355
  }, a11yList, {
355
356
  onClear: handleUrlClear,
356
357
  onKeyDown: handleKeyDown,
357
- onChange: handleChangeUrl
358
+ onChange: handleChangeUrl,
359
+ inputRef: inputRef
358
360
  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
359
361
  autoComplete: "off",
360
362
  name: "displayText",
@@ -1,11 +1,12 @@
1
1
  /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName"];
4
+ var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef"];
5
5
  import "./index.compiled.css";
6
6
  import * as React from 'react';
7
7
  import { ax, ix } from "@compiled/react/runtime";
8
- import { Fragment, useCallback, useRef } from 'react';
8
+ import { Fragment, useCallback, useMemo, useRef } from 'react';
9
+ import { useMergeRefs } from 'use-callback-ref';
9
10
  import { ErrorMessage, Field } from '@atlaskit/form';
10
11
  import Selectclear from '@atlaskit/icon/core/migration/cross-circle--select-clear';
11
12
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -39,6 +40,7 @@ export var TextInput = function TextInput(_ref) {
39
40
  clearLabel = _ref.clearLabel,
40
41
  error = _ref.error,
41
42
  spotlightTargetName = _ref.spotlightTargetName,
43
+ inputRefProp = _ref.inputRef,
42
44
  restProps = _objectWithoutProperties(_ref, _excluded);
43
45
  var inputRef = useRef(null);
44
46
  var handleRef = useCallback(function (input) {
@@ -52,6 +54,17 @@ export var TextInput = function TextInput(_ref) {
52
54
  }
53
55
  }
54
56
  }, [autoFocus]);
57
+ var textfieldRef;
58
+ if (fg('jsc_inline_editing_field_refactor')) {
59
+ // eslint-disable-next-line react-hooks/rules-of-hooks
60
+ var refs = useMemo(function () {
61
+ return [handleRef, inputRefProp].filter(Boolean);
62
+ }, [handleRef, inputRefProp]);
63
+ // eslint-disable-next-line react-hooks/rules-of-hooks
64
+ textfieldRef = useMergeRefs(refs);
65
+ } else {
66
+ textfieldRef = handleRef;
67
+ }
55
68
  var handleKeydown = useCallback(function (e) {
56
69
  if (typeof onUndo === 'function' && isUndoEvent(e)) {
57
70
  e.preventDefault();
@@ -94,7 +107,7 @@ export var TextInput = function TextInput(_ref) {
94
107
  spotlightTargetName: spotlightTargetName
95
108
  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
96
109
  onKeyDown: handleKeydown,
97
- ref: handleRef,
110
+ ref: textfieldRef,
98
111
  elemAfterInput: clearText,
99
112
  isInvalid: !!error
100
113
  })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -16,7 +16,7 @@ export var testIds = {
16
16
  };
17
17
  export var PACKAGE_DATA = {
18
18
  packageName: "@atlaskit/link-picker" || '',
19
- packageVersion: "3.1.3" || '',
19
+ packageVersion: "3.2.0" || '',
20
20
  componentName: COMPONENT_NAME,
21
21
  source: COMPONENT_NAME
22
22
  };
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { ReactNode, Ref } from 'react';
2
2
  import type { MessageDescriptor } from 'react-intl-next';
3
3
  import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
4
4
  export type LinkInputType = 'manual' | 'typeAhead';
@@ -153,6 +153,8 @@ export interface LinkPickerProps {
153
153
  isSubmitting?: boolean;
154
154
  /** This prop controls where the submit button appears. When true the submit button will move below the input field and be full width */
155
155
  moveSubmitButton?: boolean;
156
+ /** Ref to the link picker search input. */
157
+ inputRef?: Ref<HTMLInputElement>;
156
158
  }
157
159
  type CustomLinkPickerMessages = {
158
160
  /** Label for the link input field */
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -1,4 +1,8 @@
1
- /// <reference types="react" />
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type Ref } from 'react';
2
6
  import { type TextFieldProps } from '@atlaskit/textfield';
3
7
  import { type ConditionalSpotlightTargetWrapperProps } from './conditional-spotlight-target-wrapper';
4
8
  export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
@@ -10,9 +14,11 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
10
14
  onClear?: (name: string) => void;
11
15
  clearLabel?: string;
12
16
  error?: string | null;
17
+ /** Ref to the link picker search input. */
18
+ inputRef?: Ref<HTMLInputElement>;
13
19
  };
14
20
  export declare const testIds: {
15
21
  urlError: string;
16
22
  clearUrlButton: string;
17
23
  };
18
- export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, ...restProps }: TextInputProps) => JSX.Element;
24
+ export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, ...restProps }: TextInputProps) => JSX.Element;
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import type { ReactNode, Ref } from 'react';
2
2
  import type { MessageDescriptor } from 'react-intl-next';
3
3
  import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
4
4
  export type LinkInputType = 'manual' | 'typeAhead';
@@ -156,6 +156,8 @@ export interface LinkPickerProps {
156
156
  isSubmitting?: boolean;
157
157
  /** This prop controls where the submit button appears. When true the submit button will move below the input field and be full width */
158
158
  moveSubmitButton?: boolean;
159
+ /** Ref to the link picker search input. */
160
+ inputRef?: Ref<HTMLInputElement>;
159
161
  }
160
162
  type CustomLinkPickerMessages = {
161
163
  /** Label for the link input field */
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -12,6 +12,8 @@ declare const _default: {
12
12
  'fabric.linkPicker.clearLinkText': string;
13
13
  'fabric.linkPicker.hyperlink.searchLinkResults': string;
14
14
  'fabric.linkPicker.linkAriaLabel': string;
15
+ 'fabric.linkPicker.linkHelperTextAriaLabel': string;
16
+ 'fabric.linkPicker.linkHelperTextLabel': string;
15
17
  'fabric.linkPicker.linkInvalid': string;
16
18
  'fabric.linkPicker.linkLabel': string;
17
19
  'fabric.linkPicker.linkPlaceholder': string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  'fabric.linkPicker.listTitle.results': string;
23
25
  'fabric.linkPicker.search.error.description': string;
24
26
  'fabric.linkPicker.search.error.heading': string;
27
+ 'fabric.linkPicker.search.error.retry': string;
25
28
  'fabric.linkPicker.search.linkAriaLabel': string;
26
29
  'fabric.linkPicker.search.linkLabel': string;
27
30
  'fabric.linkPicker.search.linkPlaceholder': string;
@@ -1,4 +1,8 @@
1
- /// <reference types="react" />
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type Ref } from 'react';
2
6
  import { type TextFieldProps } from '@atlaskit/textfield';
3
7
  import { type ConditionalSpotlightTargetWrapperProps } from './conditional-spotlight-target-wrapper';
4
8
  export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
@@ -10,9 +14,11 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
10
14
  onClear?: (name: string) => void;
11
15
  clearLabel?: string;
12
16
  error?: string | null;
17
+ /** Ref to the link picker search input. */
18
+ inputRef?: Ref<HTMLInputElement>;
13
19
  };
14
20
  export declare const testIds: {
15
21
  urlError: string;
16
22
  clearUrlButton: string;
17
23
  };
18
- export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, ...restProps }: TextInputProps) => JSX.Element;
24
+ export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, ...restProps }: TextInputProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-picker",
3
- "version": "3.1.3",
3
+ "version": "3.2.0",
4
4
  "description": "Standalone link picker",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "publishConfig": {
@@ -45,6 +45,18 @@
45
45
  },
46
46
  "platform-linking-visual-refresh-link-picker": {
47
47
  "type": "boolean"
48
+ },
49
+ "icon-object-migration": {
50
+ "type": "boolean"
51
+ },
52
+ "platform-visual-refresh-icons": {
53
+ "type": "boolean"
54
+ },
55
+ "platform_support_live_doc_icons_in_link_picker": {
56
+ "type": "boolean"
57
+ },
58
+ "jsc_inline_editing_field_refactor": {
59
+ "type": "boolean"
48
60
  }
49
61
  },
50
62
  "scripts": {
@@ -53,22 +65,22 @@
53
65
  "dependencies": {
54
66
  "@atlaskit/analytics-next": "^11.0.0",
55
67
  "@atlaskit/atlassian-context": "^0.2.0",
56
- "@atlaskit/button": "^22.0.0",
68
+ "@atlaskit/button": "^23.0.0",
57
69
  "@atlaskit/css": "^0.10.0",
58
70
  "@atlaskit/form": "^12.0.0",
59
71
  "@atlaskit/frontend-utilities": "^3.0.0",
60
- "@atlaskit/heading": "^5.1.0",
61
- "@atlaskit/icon": "^25.3.0",
72
+ "@atlaskit/heading": "^5.2.0",
73
+ "@atlaskit/icon": "^25.5.0",
62
74
  "@atlaskit/intl-messages-provider": "^2.0.0",
63
75
  "@atlaskit/linking-common": "^8.0.0",
64
76
  "@atlaskit/onboarding": "^14.0.0",
65
77
  "@atlaskit/platform-feature-flags": "^1.1.0",
66
- "@atlaskit/primitives": "^14.2.0",
78
+ "@atlaskit/primitives": "^14.4.0",
67
79
  "@atlaskit/spinner": "^18.0.0",
68
80
  "@atlaskit/tabs": "^18.0.0",
69
81
  "@atlaskit/textfield": "^8.0.0",
70
82
  "@atlaskit/theme": "^18.0.0",
71
- "@atlaskit/tokens": "^4.5.0",
83
+ "@atlaskit/tokens": "^4.7.0",
72
84
  "@atlaskit/tooltip": "^20.0.0",
73
85
  "@atlaskit/ufo": "^0.4.0",
74
86
  "@atlaskit/visually-hidden": "^3.0.0",
@@ -77,6 +89,7 @@
77
89
  "@react-loosely-lazy/manifest": "^1.0.0",
78
90
  "date-fns": "^2.17.0",
79
91
  "react-loosely-lazy": "^1.0.0",
92
+ "use-callback-ref": "^1.2.3",
80
93
  "use-debounce": "^3.4.0",
81
94
  "uuid": "^3.1.0"
82
95
  },
@@ -88,8 +101,8 @@
88
101
  "@af/analytics-codegen": "^0.1.0",
89
102
  "@af/integration-testing": "^0.5.0",
90
103
  "@af/visual-regression": "^1.3.0",
91
- "@atlaskit/dropdown-menu": "^13.1.0",
92
- "@atlaskit/link-provider": "^2.0.0",
104
+ "@atlaskit/dropdown-menu": "^14.0.0",
105
+ "@atlaskit/link-provider": "^2.1.0",
93
106
  "@atlaskit/link-test-helpers": "^8.0.0",
94
107
  "@atlaskit/visual-regression": "^0.10.0",
95
108
  "@atlassian/feature-flags-test-utils": "^0.3.0",