@atlaskit/link-picker 1.45.1 → 1.46.1

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.
Files changed (41) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/ui/error-boundary/error-boundary-fallback/index.js +11 -30
  3. package/dist/cjs/ui/link-picker/index.js +19 -6
  4. package/dist/cjs/ui/link-picker/search-results/index.js +8 -9
  5. package/dist/cjs/ui/link-picker/search-results/link-search-list/index.js +5 -4
  6. package/dist/cjs/ui/link-picker/search-results/search-results-container/index.js +20 -15
  7. package/dist/cjs/ui/loader-fallback/index.js +14 -21
  8. package/dist/cjs/ui/main.js +4 -13
  9. package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.js +9 -25
  10. package/dist/es2019/ui/link-picker/index.js +17 -5
  11. package/dist/es2019/ui/link-picker/search-results/index.js +8 -9
  12. package/dist/es2019/ui/link-picker/search-results/link-search-list/index.js +4 -3
  13. package/dist/es2019/ui/link-picker/search-results/search-results-container/index.js +20 -14
  14. package/dist/es2019/ui/loader-fallback/index.js +14 -21
  15. package/dist/es2019/ui/main.js +5 -14
  16. package/dist/esm/ui/error-boundary/error-boundary-fallback/index.js +11 -29
  17. package/dist/esm/ui/link-picker/index.js +18 -5
  18. package/dist/esm/ui/link-picker/search-results/index.js +8 -9
  19. package/dist/esm/ui/link-picker/search-results/link-search-list/index.js +5 -4
  20. package/dist/esm/ui/link-picker/search-results/search-results-container/index.js +19 -15
  21. package/dist/esm/ui/loader-fallback/index.js +14 -21
  22. package/dist/esm/ui/main.js +5 -14
  23. package/dist/types/common/types.d.ts +2 -0
  24. package/dist/types/ui/link-picker/search-results/index.d.ts +2 -1
  25. package/dist/types/ui/link-picker/search-results/link-search-list/index.d.ts +1 -0
  26. package/dist/types/ui/link-picker/search-results/search-results-container/index.d.ts +8 -3
  27. package/dist/types-ts4.5/common/types.d.ts +2 -0
  28. package/dist/types-ts4.5/ui/link-picker/search-results/index.d.ts +2 -1
  29. package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/index.d.ts +1 -0
  30. package/dist/types-ts4.5/ui/link-picker/search-results/search-results-container/index.d.ts +8 -3
  31. package/package.json +6 -9
  32. package/dist/cjs/controllers/use-fix-height/index.js +0 -22
  33. package/dist/cjs/ui/link-picker/styled.js +0 -18
  34. package/dist/es2019/controllers/use-fix-height/index.js +0 -16
  35. package/dist/es2019/ui/link-picker/styled.js +0 -19
  36. package/dist/esm/controllers/use-fix-height/index.js +0 -16
  37. package/dist/esm/ui/link-picker/styled.js +0 -12
  38. package/dist/types/controllers/use-fix-height/index.d.ts +0 -7
  39. package/dist/types/ui/link-picker/styled.d.ts +0 -2
  40. package/dist/types-ts4.5/controllers/use-fix-height/index.d.ts +0 -7
  41. package/dist/types-ts4.5/ui/link-picker/styled.d.ts +0 -2
@@ -1,13 +1,11 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
1
  /**
3
2
  * @jsxRuntime classic
4
3
  * @jsx jsx
5
4
  */
6
- import { forwardRef } from 'react';
5
+ import { useLayoutEffect, useRef } from 'react';
7
6
 
8
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
8
  import { css, jsx } from '@emotion/react';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
9
  import { MinHeightContainer } from '../../../../common/ui/min-height-container';
12
10
  const flexColumn = css({
13
11
  display: 'flex',
@@ -15,17 +13,25 @@ const flexColumn = css({
15
13
  justifyContent: 'flex-start',
16
14
  width: '100%'
17
15
  });
18
- export const SearchResultsContainer = /*#__PURE__*/forwardRef(({
16
+ export const SearchResultsContainer = ({
19
17
  hasTabs,
20
- ...props
21
- }, ref) => {
22
- const minHeight = hasTabs ? '347px' : '302px';
23
- const ffMinHeight = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
24
-
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
26
- return jsx(MinHeightContainer, _extends({
18
+ adaptiveHeight,
19
+ isLoadingResults,
20
+ children
21
+ }) => {
22
+ const ref = useRef(null);
23
+ const currentHeight = useRef(null);
24
+ const fixedMinHeight = hasTabs ? '347px' : '302px';
25
+ const adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? `${currentHeight.current}px` : 'auto';
26
+ const minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
27
+ useLayoutEffect(() => {
28
+ if (ref.current && adaptiveHeight && !isLoadingResults) {
29
+ currentHeight.current = ref.current.getBoundingClientRect().height;
30
+ }
31
+ });
32
+ return jsx(MinHeightContainer, {
27
33
  ref: ref,
28
- minHeight: ffMinHeight,
34
+ minHeight: minheight,
29
35
  css: flexColumn
30
- }, props));
31
- });
36
+ }, children);
37
+ };
@@ -4,7 +4,6 @@
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { css, jsx } from '@emotion/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import Spinner from '@atlaskit/spinner';
9
8
  import { MinHeightContainer } from '../../common/ui/min-height-container';
10
9
  const styles = css({
@@ -16,37 +15,31 @@ const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '
16
15
  const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
17
16
  const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
18
17
  const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
19
- // EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
20
- const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
21
- const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
22
18
  const getEstimatedMinHeight = ({
23
19
  hideDisplayText,
24
20
  isLoadingPlugins,
25
21
  plugins,
26
22
  url
27
23
  }) => {
28
- if (fg('platform.linking-platform.link-picker.fixed-height-search-results')) {
24
+ /**
25
+ * "Insert mode" (search results shown initially)
26
+ */
27
+ if (!url) {
29
28
  /**
30
- * "Insert mode" (search results shown initially)
29
+ * With tabs
31
30
  */
32
- if (!url) {
33
- /**
34
- * With tabs
35
- */
36
- if (plugins && plugins.length > 1 || isLoadingPlugins) {
37
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
38
- }
31
+ if (plugins && plugins.length > 1 || isLoadingPlugins) {
32
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
33
+ }
39
34
 
40
- /**
41
- * Without tabs
42
- */
43
- if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
44
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
45
- }
35
+ /**
36
+ * Without tabs
37
+ */
38
+ if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
39
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
46
40
  }
47
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
48
41
  }
49
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
42
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
50
43
  };
51
44
 
52
45
  /**
@@ -3,13 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  * @jsxRuntime classic
4
4
  * @jsx jsx
5
5
  */
6
- import React, { Fragment, memo } from 'react';
6
+ import React, { memo } from 'react';
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { LazySuspense } from 'react-loosely-lazy';
11
11
  import { AnalyticsContext } from '@atlaskit/analytics-next';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
12
  import { COMPONENT_NAME, LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
14
13
  import { LinkPickerSessionProvider } from '../controllers/session-provider';
15
14
  import { ErrorBoundary } from './error-boundary';
@@ -20,7 +19,7 @@ export const testIds = {
20
19
  };
21
20
  export const PACKAGE_DATA = {
22
21
  packageName: "@atlaskit/link-picker" || '',
23
- packageVersion: "1.45.1" || '',
22
+ packageVersion: "1.46.1" || '',
24
23
  componentName: COMPONENT_NAME,
25
24
  source: COMPONENT_NAME
26
25
  };
@@ -46,14 +45,6 @@ export const composeLinkPicker = Component => {
46
45
  component
47
46
  } = props;
48
47
  const RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
49
-
50
- /**
51
- * When ff enabled: root container will provide width to component + loader + error boundary
52
- * When ff disabled: component + loader + error boundary each providing their own width
53
- * Cannot make this change easier at risk of regression as external adopters may have css override on the form element
54
- */
55
- const RootFixedWidthContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
56
- const LoaderFallbackContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
57
48
  return jsx(AnalyticsContext, {
58
49
  data: PACKAGE_DATA
59
50
  }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
@@ -66,13 +57,13 @@ export const composeLinkPicker = Component => {
66
57
  ['--link-picker-padding-top']: (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)",
67
58
  ['--link-picker-padding-bottom']: (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"
68
59
  }
69
- }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
70
- fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
60
+ }, jsx(FixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
61
+ fallback: jsx(LoaderFallback, {
71
62
  url: props.url,
72
63
  hideDisplayText: props.hideDisplayText,
73
64
  isLoadingPlugins: props.isLoadingPlugins,
74
65
  plugins: props.plugins
75
- }))
66
+ })
76
67
  }, jsx(RootComponent, _extends({}, props, {
77
68
  "data-testid": testIds.linkPickerRoot
78
69
  }), jsx(Component, props)))))))));
@@ -5,13 +5,10 @@
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { defineMessages, useIntl } from 'react-intl-next';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
8
  import { LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK } from '../../../common/constants';
10
9
  import { GenericErrorSVG } from '../../../common/generic-error-svg';
11
10
  import { EmptyState } from '../../../common/ui/empty-state';
12
11
  import { MinHeightContainer } from '../../../common/ui/min-height-container';
13
- // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
14
- import { rootContainerStyles } from '../../link-picker/styled';
15
12
  var errorBoundaryFallbackStyles = css({
16
13
  lineHeight: 'initial'
17
14
  });
@@ -31,30 +28,15 @@ export var ErrorBoundaryFallback = function ErrorBoundaryFallback() {
31
28
  var intl = useIntl();
32
29
  var header = intl.formatMessage(messages.heading);
33
30
  var description = intl.formatMessage(messages.description);
34
- if (fg('platform.linking-platform.link-picker.fixed-height-search-results')) {
35
- return jsx(MinHeightContainer, {
36
- css: errorBoundaryFallbackStyles,
37
- minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
38
- "data-testid": "link-picker-root-error-boundary-ui"
39
- }, jsx(EmptyState, {
40
- header: header,
41
- renderImage: function renderImage() {
42
- return jsx(GenericErrorSVG, null);
43
- },
44
- description: description
45
- }));
46
- }
47
- return (
48
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
49
- jsx("div", {
50
- css: rootContainerStyles,
51
- "data-testid": "link-picker-root-error-boundary-ui"
52
- }, jsx(EmptyState, {
53
- header: header,
54
- renderImage: function renderImage() {
55
- return jsx(GenericErrorSVG, null);
56
- },
57
- description: description
58
- }))
59
- );
31
+ return jsx(MinHeightContainer, {
32
+ css: errorBoundaryFallbackStyles,
33
+ minHeight: LINK_PICKER_MIN_HEIGHT_IN_PX_FALLBACK,
34
+ "data-testid": "link-picker-root-error-boundary-ui"
35
+ }, jsx(EmptyState, {
36
+ header: header,
37
+ renderImage: function renderImage() {
38
+ return jsx(GenericErrorSVG, null);
39
+ },
40
+ description: description
41
+ }));
60
42
  };
@@ -10,7 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
10
10
  import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
11
11
 
12
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
- import { jsx } from '@emotion/react';
13
+ import { css, jsx } from '@emotion/react';
14
14
  import { FormattedMessage, useIntl } from 'react-intl-next';
15
15
  import uuid from 'uuid';
16
16
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -30,10 +30,22 @@ import { FormFooter, testIds as formFooterTestIds } from './form-footer';
30
30
  import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
31
31
  import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
32
32
  import { SearchResults, testIds as searchTestIds } from './search-results';
33
- import { formFooterMargin, rootContainerStyles } from './styled';
34
33
  import { testIds as textFieldTestIds, TextInput } from './text-input';
35
34
  import { TrackMount } from './track-mount';
36
35
  import { getDataSource, getScreenReaderText } from './utils';
36
+ var rootContainerStyles = css({
37
+ paddingLeft: 'var(--link-picker-padding-left)',
38
+ paddingRight: 'var(--link-picker-padding-right)',
39
+ paddingTop: 'var(--link-picker-padding-top)',
40
+ paddingBottom: 'var(--link-picker-padding-bottom)',
41
+ boxSizing: 'border-box',
42
+ lineHeight: 'initial',
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
44
+ display: 'block !important'
45
+ });
46
+ var formFooterMargin = css({
47
+ marginTop: "var(--ds-space-200, 16px)"
48
+ });
37
49
  export var testIds = _objectSpread(_objectSpread(_objectSpread({
38
50
  linkPickerRoot: 'link-picker-root',
39
51
  linkPicker: 'link-picker',
@@ -97,6 +109,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
97
109
  customMessages = _ref.customMessages,
98
110
  _ref$isSubmitting = _ref.isSubmitting,
99
111
  isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
112
+ _ref$adaptiveHeight = _ref.adaptiveHeight,
113
+ adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
100
114
  _ref$UNSAFE_moveSubmi = _ref.UNSAFE_moveSubmitButton,
101
115
  UNSAFE_moveSubmitButton = _ref$UNSAFE_moveSubmi === void 0 ? false : _ref$UNSAFE_moveSubmi;
102
116
  var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -327,9 +341,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
327
341
  var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
328
342
  var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
329
343
  return jsx("form", {
330
- "data-testid": testIds.linkPicker
331
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
332
- ,
344
+ "data-testid": testIds.linkPicker,
333
345
  css: rootContainerStyles
334
346
  // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
335
347
  ,
@@ -399,6 +411,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
399
411
  handleSelected: handleSelected,
400
412
  handleTabChange: handleTabChange,
401
413
  handleSearchListOnChange: handleSearchListOnChange,
414
+ adaptiveHeight: adaptiveHeight,
402
415
  retry: retry
403
416
  }), jsx(FormFooter, {
404
417
  error: error,
@@ -1,4 +1,3 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -13,7 +12,6 @@ import { css, jsx } from '@emotion/react';
13
12
  import { Box, xcss } from '@atlaskit/primitives';
14
13
  import Spinner from '@atlaskit/spinner/spinner';
15
14
  import Tabs, { Tab, TabList } from '@atlaskit/tabs';
16
- import { useFixHeight } from '../../../controllers/use-fix-height';
17
15
  import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
18
16
  import { LinkSearchList, testIds as listTestIds } from './link-search-list';
19
17
  import { ScrollingTabList } from './scrolling-tabs';
@@ -54,20 +52,20 @@ export var SearchResults = function SearchResults(_ref) {
54
52
  selectedIndex = _ref.selectedIndex,
55
53
  handleSelected = _ref.handleSelected,
56
54
  handleKeyDown = _ref.handleKeyDown,
55
+ adaptiveHeight = _ref.adaptiveHeight,
57
56
  retry = _ref.retry;
58
57
  var isActivePlugin = !!activePlugin;
59
-
60
- // This will be redundant if we move towards fixed height search results section
61
- var fixListHeightProps = useFixHeight(isLoadingResults);
62
58
  var tabList = jsx(TabList, null, tabs.map(function (tab) {
63
59
  return jsx(Tab, {
64
60
  key: tab.tabTitle,
65
61
  testId: testIds.tabItem
66
62
  }, tab.tabTitle);
67
63
  }));
68
- return jsx(SearchResultsContainer, _extends({
69
- hasTabs: !!tabs.length || isLoadingPlugins
70
- }, fixListHeightProps), isLoadingPlugins && !!queryState && jsx("div", {
64
+ return jsx(SearchResultsContainer, {
65
+ hasTabs: !!tabs.length || isLoadingPlugins,
66
+ adaptiveHeight: adaptiveHeight,
67
+ isLoadingResults: isLoadingResults
68
+ }, isLoadingPlugins && !!queryState && jsx("div", {
71
69
  css: spinnerContainerStyles
72
70
  }, jsx(Spinner, {
73
71
  testId: testIds.tabsLoadingIndicator,
@@ -94,6 +92,7 @@ export var SearchResults = function SearchResults(_ref) {
94
92
  onChange: handleSearchListOnChange,
95
93
  onKeyDown: handleKeyDown,
96
94
  hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
97
- activePlugin: activePlugin
95
+ activePlugin: activePlugin,
96
+ adaptiveHeight: adaptiveHeight
98
97
  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 || (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null) : null));
99
98
  };
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
- var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin"];
4
+ var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  /**
@@ -65,6 +65,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
65
65
  id = _ref.id,
66
66
  hasSearchTerm = _ref.hasSearchTerm,
67
67
  activePlugin = _ref.activePlugin,
68
+ adaptiveHeight = _ref.adaptiveHeight,
68
69
  restProps = _objectWithoutProperties(_ref, _excluded);
69
70
  var itemsContent;
70
71
  var loadingContent;
@@ -136,7 +137,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
136
137
  }))), jsx("ul", {
137
138
  id: id,
138
139
  role: role
139
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
140
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
140
141
  ,
141
142
  css: listStyles,
142
143
  "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
@@ -166,8 +167,8 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
166
167
  }
167
168
  if (isLoading) {
168
169
  loadingContent = jsx(MinHeightContainer, {
169
- minHeight: fg('platform.linking-platform.link-picker.fixed-height-search-results') ? '50px' : '80px'
170
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
170
+ minHeight: adaptiveHeight ? '80px' : '50px'
171
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
171
172
  ,
172
173
  css: spinnerContainerStyles
173
174
  }, jsx(Spinner, {
@@ -1,15 +1,11 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["hasTabs"];
4
1
  /**
5
2
  * @jsxRuntime classic
6
3
  * @jsx jsx
7
4
  */
8
- import { forwardRef } from 'react';
5
+ import { useLayoutEffect, useRef } from 'react';
9
6
 
10
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
8
  import { css, jsx } from '@emotion/react';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
9
  import { MinHeightContainer } from '../../../../common/ui/min-height-container';
14
10
  var flexColumn = css({
15
11
  display: 'flex',
@@ -17,16 +13,24 @@ var flexColumn = css({
17
13
  justifyContent: 'flex-start',
18
14
  width: '100%'
19
15
  });
20
- export var SearchResultsContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
16
+ export var SearchResultsContainer = function SearchResultsContainer(_ref) {
21
17
  var hasTabs = _ref.hasTabs,
22
- props = _objectWithoutProperties(_ref, _excluded);
23
- var minHeight = hasTabs ? '347px' : '302px';
24
- var ffMinHeight = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? minHeight : 'auto';
25
-
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
27
- return jsx(MinHeightContainer, _extends({
18
+ adaptiveHeight = _ref.adaptiveHeight,
19
+ isLoadingResults = _ref.isLoadingResults,
20
+ children = _ref.children;
21
+ var ref = useRef(null);
22
+ var currentHeight = useRef(null);
23
+ var fixedMinHeight = hasTabs ? '347px' : '302px';
24
+ var adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? "".concat(currentHeight.current, "px") : 'auto';
25
+ var minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
26
+ useLayoutEffect(function () {
27
+ if (ref.current && adaptiveHeight && !isLoadingResults) {
28
+ currentHeight.current = ref.current.getBoundingClientRect().height;
29
+ }
30
+ });
31
+ return jsx(MinHeightContainer, {
28
32
  ref: ref,
29
- minHeight: ffMinHeight,
33
+ minHeight: minheight,
30
34
  css: flexColumn
31
- }, props));
32
- });
35
+ }, children);
36
+ };
@@ -4,7 +4,6 @@
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { css, jsx } from '@emotion/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import Spinner from '@atlaskit/spinner';
9
8
  import { MinHeightContainer } from '../../common/ui/min-height-container';
10
9
  var styles = css({
@@ -16,36 +15,30 @@ var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT = '50
16
15
  var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT = '429px';
17
16
  var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT = '218px';
18
17
  var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT = '141px';
19
- // EDM-7122: can delete these two consts once min height container for link picker is firm for the loader
20
- var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = '142px';
21
- var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = '220px';
22
18
  var getEstimatedMinHeight = function getEstimatedMinHeight(_ref) {
23
19
  var hideDisplayText = _ref.hideDisplayText,
24
20
  isLoadingPlugins = _ref.isLoadingPlugins,
25
21
  plugins = _ref.plugins,
26
22
  url = _ref.url;
27
- if (fg('platform.linking-platform.link-picker.fixed-height-search-results')) {
23
+ /**
24
+ * "Insert mode" (search results shown initially)
25
+ */
26
+ if (!url) {
28
27
  /**
29
- * "Insert mode" (search results shown initially)
28
+ * With tabs
30
29
  */
31
- if (!url) {
32
- /**
33
- * With tabs
34
- */
35
- if (plugins && plugins.length > 1 || isLoadingPlugins) {
36
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
37
- }
30
+ if (plugins && plugins.length > 1 || isLoadingPlugins) {
31
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_TABS_WITH_DISPLAYTEXT;
32
+ }
38
33
 
39
- /**
40
- * Without tabs
41
- */
42
- if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
43
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
44
- }
34
+ /**
35
+ * Without tabs
36
+ */
37
+ if ((plugins === null || plugins === void 0 ? void 0 : plugins.length) === 1) {
38
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_PLUGIN_WITH_DISPLAYTEXT;
45
39
  }
46
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
47
40
  }
48
- return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT;
41
+ return hideDisplayText ? LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITHOUT_DISPLAYTEXT : LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_TABS_WITH_DISPLAYTEXT;
49
42
  };
50
43
 
51
44
  /**
@@ -4,13 +4,12 @@ import _extends from "@babel/runtime/helpers/extends";
4
4
  * @jsxRuntime classic
5
5
  * @jsx jsx
6
6
  */
7
- import React, { Fragment, memo } from 'react';
7
+ import React, { memo } from 'react';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
11
  import { LazySuspense } from 'react-loosely-lazy';
12
12
  import { AnalyticsContext } from '@atlaskit/analytics-next';
13
- import { fg } from '@atlaskit/platform-feature-flags';
14
13
  import { COMPONENT_NAME, LINK_PICKER_WIDTH_IN_PX } from '../common/constants';
15
14
  import { LinkPickerSessionProvider } from '../controllers/session-provider';
16
15
  import { ErrorBoundary } from './error-boundary';
@@ -21,7 +20,7 @@ export var testIds = {
21
20
  };
22
21
  export var PACKAGE_DATA = {
23
22
  packageName: "@atlaskit/link-picker" || '',
24
- packageVersion: "1.45.1" || '',
23
+ packageVersion: "1.46.1" || '',
25
24
  componentName: COMPONENT_NAME,
26
25
  source: COMPONENT_NAME
27
26
  };
@@ -44,26 +43,18 @@ export var composeLinkPicker = function composeLinkPicker(Component) {
44
43
  var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom, _ref2;
45
44
  var component = props.component;
46
45
  var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
47
-
48
- /**
49
- * When ff enabled: root container will provide width to component + loader + error boundary
50
- * When ff disabled: component + loader + error boundary each providing their own width
51
- * Cannot make this change easier at risk of regression as external adopters may have css override on the form element
52
- */
53
- var RootFixedWidthContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? FixedWidthContainer : Fragment;
54
- var LoaderFallbackContainer = fg('platform.linking-platform.link-picker.fixed-height-search-results') ? Fragment : FixedWidthContainer;
55
46
  return jsx(AnalyticsContext, {
56
47
  data: PACKAGE_DATA
57
48
  }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
58
49
  style: (_ref2 = {}, _defineProperty(_ref2, '--link-picker-width', props.disableWidth ? '100%' : // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
59
50
  "".concat(LINK_PICKER_WIDTH_IN_PX, "px")), _defineProperty(_ref2, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), _defineProperty(_ref2, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), _defineProperty(_ref2, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), _defineProperty(_ref2, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref2)
60
- }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
61
- fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
51
+ }, jsx(FixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
52
+ fallback: jsx(LoaderFallback, {
62
53
  url: props.url,
63
54
  hideDisplayText: props.hideDisplayText,
64
55
  isLoadingPlugins: props.isLoadingPlugins,
65
56
  plugins: props.plugins
66
- }))
57
+ })
67
58
  }, jsx(RootComponent, _extends({}, props, {
68
59
  "data-testid": testIds.linkPickerRoot
69
60
  }), jsx(Component, props)))))))));
@@ -145,6 +145,8 @@ export interface LinkPickerProps {
145
145
  }>;
146
146
  /** Allows for customisation of text in the link picker. */
147
147
  customMessages?: CustomLinkPickerMessages;
148
+ /** Allows height of search results to adapt to the number of results being displayed. */
149
+ adaptiveHeight?: boolean;
148
150
  featureFlags?: Record<string, unknown>;
149
151
  /** Controls showing a "submission in-progres" UX */
150
152
  isSubmitting?: boolean;
@@ -39,6 +39,7 @@ export type SearchResultsProps = {
39
39
  handleSelected: (objectId: string) => void;
40
40
  handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
41
41
  error?: unknown;
42
+ adaptiveHeight: boolean;
42
43
  retry: () => void;
43
44
  };
44
- export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;
45
+ export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, }: SearchResultsProps) => jsx.JSX.Element;
@@ -36,6 +36,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
36
36
  isLoading: boolean;
37
37
  selectedIndex: number;
38
38
  activeIndex: number;
39
+ adaptiveHeight: boolean;
39
40
  onChange: (objectId: string) => void;
40
41
  onSelect: (objectId: string) => void;
41
42
  onKeyDown?: (e: KeyboardEvent<LinkSearchListElement>) => void;
@@ -1,5 +1,10 @@
1
1
  /// <reference types="react" />
2
- export declare const SearchResultsContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
3
- hasTabs?: boolean | undefined;
2
+ import { jsx } from '@emotion/react';
3
+ type SearchResultsContainerProps = {
4
+ adaptiveHeight: boolean;
5
+ isLoadingResults: boolean;
6
+ hasTabs?: boolean;
4
7
  children?: React.ReactNode;
5
- } & import("react").RefAttributes<HTMLDivElement>>;
8
+ };
9
+ export declare const SearchResultsContainer: ({ hasTabs, adaptiveHeight, isLoadingResults, children, }: SearchResultsContainerProps) => jsx.JSX.Element;
10
+ export {};
@@ -148,6 +148,8 @@ export interface LinkPickerProps {
148
148
  }>;
149
149
  /** Allows for customisation of text in the link picker. */
150
150
  customMessages?: CustomLinkPickerMessages;
151
+ /** Allows height of search results to adapt to the number of results being displayed. */
152
+ adaptiveHeight?: boolean;
151
153
  featureFlags?: Record<string, unknown>;
152
154
  /** Controls showing a "submission in-progres" UX */
153
155
  isSubmitting?: boolean;
@@ -39,6 +39,7 @@ export type SearchResultsProps = {
39
39
  handleSelected: (objectId: string) => void;
40
40
  handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
41
41
  error?: unknown;
42
+ adaptiveHeight: boolean;
42
43
  retry: () => void;
43
44
  };
44
- export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;
45
+ export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, }: SearchResultsProps) => jsx.JSX.Element;
@@ -36,6 +36,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
36
36
  isLoading: boolean;
37
37
  selectedIndex: number;
38
38
  activeIndex: number;
39
+ adaptiveHeight: boolean;
39
40
  onChange: (objectId: string) => void;
40
41
  onSelect: (objectId: string) => void;
41
42
  onKeyDown?: (e: KeyboardEvent<LinkSearchListElement>) => void;
@@ -1,5 +1,10 @@
1
1
  /// <reference types="react" />
2
- export declare const SearchResultsContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
3
- hasTabs?: boolean | undefined;
2
+ import { jsx } from '@emotion/react';
3
+ type SearchResultsContainerProps = {
4
+ adaptiveHeight: boolean;
5
+ isLoadingResults: boolean;
6
+ hasTabs?: boolean;
4
7
  children?: React.ReactNode;
5
- } & import("react").RefAttributes<HTMLDivElement>>;
8
+ };
9
+ export declare const SearchResultsContainer: ({ hasTabs, adaptiveHeight, isLoadingResults, children, }: SearchResultsContainerProps) => jsx.JSX.Element;
10
+ export {};