@atlaskit/link-picker 2.0.0 → 3.0.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 +17 -0
- package/dist/cjs/common/generic-error-svg/index.js +2 -10
- package/dist/cjs/common/ui/empty-state/index.js +2 -10
- package/dist/cjs/common/ui/min-height-container/index.js +2 -14
- package/dist/cjs/ui/error-boundary/error-boundary-fallback/index.js +2 -9
- package/dist/cjs/ui/link-picker/form-footer/index.js +3 -11
- package/dist/cjs/ui/link-picker/index.js +3 -10
- package/dist/cjs/ui/link-picker/search-results/index.js +2 -10
- package/dist/cjs/ui/link-picker/search-results/link-search-list/index.js +2 -13
- package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/index.js +2 -10
- package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/index.js +2 -15
- package/dist/cjs/ui/link-picker/search-results/scrolling-tabs/index.js +2 -10
- package/dist/cjs/ui/link-picker/search-results/search-results-container/index.js +2 -10
- package/dist/cjs/ui/link-picker/text-input/index.js +2 -9
- package/dist/cjs/ui/loader-fallback/index.js +2 -10
- package/dist/cjs/ui/main.js +3 -11
- package/dist/es2019/common/generic-error-svg/index.js +1 -9
- package/dist/es2019/common/ui/empty-state/index.js +1 -9
- package/dist/es2019/common/ui/min-height-container/index.js +1 -13
- package/dist/es2019/ui/error-boundary/error-boundary-fallback/index.js +1 -8
- package/dist/es2019/ui/link-picker/form-footer/index.js +2 -10
- package/dist/es2019/ui/link-picker/index.js +2 -9
- package/dist/es2019/ui/link-picker/search-results/index.js +1 -9
- package/dist/es2019/ui/link-picker/search-results/link-search-list/index.js +1 -12
- package/dist/es2019/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/index.js +1 -9
- package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/index.js +1 -14
- package/dist/es2019/ui/link-picker/search-results/scrolling-tabs/index.js +1 -9
- package/dist/es2019/ui/link-picker/search-results/search-results-container/index.js +1 -9
- package/dist/es2019/ui/link-picker/text-input/index.js +1 -8
- package/dist/es2019/ui/loader-fallback/index.js +1 -9
- package/dist/es2019/ui/main.js +2 -10
- package/dist/esm/common/generic-error-svg/index.js +1 -9
- package/dist/esm/common/ui/empty-state/index.js +1 -9
- package/dist/esm/common/ui/min-height-container/index.js +1 -13
- package/dist/esm/ui/error-boundary/error-boundary-fallback/index.js +1 -8
- package/dist/esm/ui/link-picker/form-footer/index.js +2 -10
- package/dist/esm/ui/link-picker/index.js +2 -9
- package/dist/esm/ui/link-picker/search-results/index.js +1 -9
- package/dist/esm/ui/link-picker/search-results/link-search-list/index.js +1 -12
- package/dist/esm/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/index.js +1 -9
- package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/index.js +1 -14
- package/dist/esm/ui/link-picker/search-results/scrolling-tabs/index.js +1 -9
- package/dist/esm/ui/link-picker/search-results/search-results-container/index.js +1 -9
- package/dist/esm/ui/link-picker/text-input/index.js +1 -8
- package/dist/esm/ui/loader-fallback/index.js +1 -9
- package/dist/esm/ui/main.js +2 -10
- package/dist/types/common/generic-error-svg/index.d.ts +0 -1
- package/dist/types/common/ui/empty-state/index.d.ts +1 -2
- package/dist/types/common/ui/min-height-container/index.d.ts +0 -3
- package/dist/types/ui/error-boundary/error-boundary-fallback/index.d.ts +0 -1
- package/dist/types/ui/index.d.ts +2 -2
- package/dist/types/ui/lazy.d.ts +1 -1
- package/dist/types/ui/link-picker/form-footer/index.d.ts +1 -2
- package/dist/types/ui/link-picker/index.d.ts +1 -2
- package/dist/types/ui/link-picker/search-results/index.d.ts +1 -2
- package/dist/types/ui/link-picker/search-results/link-search-list/index.d.ts +0 -1
- package/dist/types/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/index.d.ts +1 -2
- package/dist/types/ui/link-picker/search-results/link-search-list/list-item/index.d.ts +0 -1
- package/dist/types/ui/link-picker/search-results/scrolling-tabs/index.d.ts +0 -1
- package/dist/types/ui/link-picker/search-results/search-results-container/index.d.ts +1 -2
- package/dist/types/ui/link-picker/text-input/index.d.ts +1 -2
- package/dist/types/ui/loader-fallback/index.d.ts +0 -1
- package/dist/types/ui/main.d.ts +1 -2
- package/dist/types-ts4.5/common/generic-error-svg/index.d.ts +0 -1
- package/dist/types-ts4.5/common/ui/empty-state/index.d.ts +1 -2
- package/dist/types-ts4.5/common/ui/min-height-container/index.d.ts +0 -3
- package/dist/types-ts4.5/ui/error-boundary/error-boundary-fallback/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/index.d.ts +2 -2
- package/dist/types-ts4.5/ui/lazy.d.ts +1 -1
- package/dist/types-ts4.5/ui/link-picker/form-footer/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/link-picker/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/link-picker/search-results/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/list-item/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/link-picker/search-results/scrolling-tabs/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/link-picker/search-results/search-results-container/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/link-picker/text-input/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/loader-fallback/index.d.ts +0 -1
- package/dist/types-ts4.5/ui/main.d.ts +1 -2
- package/package.json +6 -10
- package/report.api.md +1 -1
- package/dist/cjs/common/generic-error-svg/old/index.js +0 -66
- package/dist/cjs/common/ui/empty-state/old/index.js +0 -38
- package/dist/cjs/common/ui/min-height-container/old/index.js +0 -34
- package/dist/cjs/common/ui/min-height-container/old/styled.js +0 -16
- package/dist/cjs/ui/error-boundary/error-boundary-fallback/old/index.js +0 -50
- package/dist/cjs/ui/link-picker/form-footer/old/index.js +0 -116
- package/dist/cjs/ui/link-picker/old/index.js +0 -435
- package/dist/cjs/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/old/index.js +0 -70
- package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/old/index.js +0 -145
- package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/old/styled.js +0 -91
- package/dist/cjs/ui/link-picker/search-results/link-search-list/old/index.js +0 -188
- package/dist/cjs/ui/link-picker/search-results/link-search-list/old/styled.js +0 -45
- package/dist/cjs/ui/link-picker/search-results/old/index.js +0 -105
- package/dist/cjs/ui/link-picker/search-results/scrolling-tabs/old/index.js +0 -163
- package/dist/cjs/ui/link-picker/search-results/scrolling-tabs/old/styles.js +0 -74
- package/dist/cjs/ui/link-picker/search-results/search-results-container/old/index.js +0 -43
- package/dist/cjs/ui/link-picker/text-input/old/index.js +0 -125
- package/dist/cjs/ui/loader-fallback/old/index.js +0 -67
- package/dist/cjs/ui/old/main.js +0 -75
- package/dist/es2019/common/generic-error-svg/old/index.js +0 -58
- package/dist/es2019/common/ui/empty-state/old/index.js +0 -32
- package/dist/es2019/common/ui/min-height-container/old/index.js +0 -25
- package/dist/es2019/common/ui/min-height-container/old/styled.js +0 -10
- package/dist/es2019/ui/error-boundary/error-boundary-fallback/old/index.js +0 -41
- package/dist/es2019/ui/link-picker/form-footer/old/index.js +0 -104
- package/dist/es2019/ui/link-picker/old/index.js +0 -436
- package/dist/es2019/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/old/index.js +0 -63
- package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/old/index.js +0 -132
- package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/old/styled.js +0 -83
- package/dist/es2019/ui/link-picker/search-results/link-search-list/old/index.js +0 -178
- package/dist/es2019/ui/link-picker/search-results/link-search-list/old/styled.js +0 -38
- package/dist/es2019/ui/link-picker/search-results/old/index.js +0 -98
- package/dist/es2019/ui/link-picker/search-results/scrolling-tabs/old/index.js +0 -130
- package/dist/es2019/ui/link-picker/search-results/scrolling-tabs/old/styles.js +0 -67
- package/dist/es2019/ui/link-picker/search-results/search-results-container/old/index.js +0 -37
- package/dist/es2019/ui/link-picker/text-input/old/index.js +0 -121
- package/dist/es2019/ui/loader-fallback/old/index.js +0 -60
- package/dist/es2019/ui/old/main.js +0 -73
- package/dist/esm/common/generic-error-svg/old/index.js +0 -58
- package/dist/esm/common/ui/empty-state/old/index.js +0 -31
- package/dist/esm/common/ui/min-height-container/old/index.js +0 -25
- package/dist/esm/common/ui/min-height-container/old/styled.js +0 -10
- package/dist/esm/ui/error-boundary/error-boundary-fallback/old/index.js +0 -43
- package/dist/esm/ui/link-picker/form-footer/old/index.js +0 -108
- package/dist/esm/ui/link-picker/old/index.js +0 -432
- package/dist/esm/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/old/index.js +0 -63
- package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/old/index.js +0 -136
- package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/old/styled.js +0 -84
- package/dist/esm/ui/link-picker/search-results/link-search-list/old/index.js +0 -186
- package/dist/esm/ui/link-picker/search-results/link-search-list/old/styled.js +0 -38
- package/dist/esm/ui/link-picker/search-results/old/index.js +0 -100
- package/dist/esm/ui/link-picker/search-results/scrolling-tabs/old/index.js +0 -158
- package/dist/esm/ui/link-picker/search-results/scrolling-tabs/old/styles.js +0 -67
- package/dist/esm/ui/link-picker/search-results/search-results-container/old/index.js +0 -36
- package/dist/esm/ui/link-picker/text-input/old/index.js +0 -121
- package/dist/esm/ui/loader-fallback/old/index.js +0 -59
- package/dist/esm/ui/old/main.js +0 -64
- package/dist/types/common/generic-error-svg/old/index.d.ts +0 -6
- package/dist/types/common/ui/empty-state/old/index.d.ts +0 -9
- package/dist/types/common/ui/min-height-container/old/index.d.ts +0 -8
- package/dist/types/common/ui/min-height-container/old/styled.d.ts +0 -1
- package/dist/types/ui/error-boundary/error-boundary-fallback/old/index.d.ts +0 -6
- package/dist/types/ui/link-picker/form-footer/old/index.d.ts +0 -42
- package/dist/types/ui/link-picker/old/index.d.ts +0 -25
- package/dist/types/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/old/index.d.ts +0 -6
- package/dist/types/ui/link-picker/search-results/link-search-list/list-item/old/index.d.ts +0 -23
- package/dist/types/ui/link-picker/search-results/link-search-list/list-item/old/styled.d.ts +0 -7
- package/dist/types/ui/link-picker/search-results/link-search-list/old/index.d.ts +0 -52
- package/dist/types/ui/link-picker/search-results/link-search-list/old/styled.d.ts +0 -4
- package/dist/types/ui/link-picker/search-results/old/index.d.ts +0 -45
- package/dist/types/ui/link-picker/search-results/scrolling-tabs/old/index.d.ts +0 -7
- package/dist/types/ui/link-picker/search-results/scrolling-tabs/old/styles.d.ts +0 -6
- package/dist/types/ui/link-picker/search-results/search-results-container/old/index.d.ts +0 -10
- package/dist/types/ui/link-picker/text-input/old/index.d.ts +0 -18
- package/dist/types/ui/loader-fallback/old/index.d.ts +0 -17
- package/dist/types/ui/old/main.d.ts +0 -13
- package/dist/types-ts4.5/common/generic-error-svg/old/index.d.ts +0 -6
- package/dist/types-ts4.5/common/ui/empty-state/old/index.d.ts +0 -9
- package/dist/types-ts4.5/common/ui/min-height-container/old/index.d.ts +0 -8
- package/dist/types-ts4.5/common/ui/min-height-container/old/styled.d.ts +0 -1
- package/dist/types-ts4.5/ui/error-boundary/error-boundary-fallback/old/index.d.ts +0 -6
- package/dist/types-ts4.5/ui/link-picker/form-footer/old/index.d.ts +0 -42
- package/dist/types-ts4.5/ui/link-picker/old/index.d.ts +0 -25
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg/old/index.d.ts +0 -6
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/list-item/old/index.d.ts +0 -23
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/list-item/old/styled.d.ts +0 -7
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/old/index.d.ts +0 -52
- package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/old/styled.d.ts +0 -4
- package/dist/types-ts4.5/ui/link-picker/search-results/old/index.d.ts +0 -45
- package/dist/types-ts4.5/ui/link-picker/search-results/scrolling-tabs/old/index.d.ts +0 -7
- package/dist/types-ts4.5/ui/link-picker/search-results/scrolling-tabs/old/styles.d.ts +0 -6
- package/dist/types-ts4.5/ui/link-picker/search-results/search-results-container/old/index.d.ts +0 -10
- package/dist/types-ts4.5/ui/link-picker/text-input/old/index.d.ts +0 -18
- package/dist/types-ts4.5/ui/loader-fallback/old/index.d.ts +0 -17
- package/dist/types-ts4.5/ui/old/main.d.ts +0 -13
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
|
-
import { css } from '@emotion/react';
|
|
3
|
-
import { B100, B400, B50, N20, N200, N300 } from '@atlaskit/theme/colors';
|
|
4
|
-
const listItemBaseStyles = css({
|
|
5
|
-
display: 'flex',
|
|
6
|
-
paddingTop: "var(--ds-space-100, 8px)",
|
|
7
|
-
paddingBottom: "var(--ds-space-100, 8px)",
|
|
8
|
-
paddingLeft: `clamp( ${"var(--ds-space-100, 8px)"}, var(--link-picker-padding-left), 100% )`,
|
|
9
|
-
paddingRight: `clamp( ${"var(--ds-space-100, 8px)"}, var(--link-picker-padding-right), 100% )`,
|
|
10
|
-
margin: 0,
|
|
11
|
-
cursor: 'pointer'
|
|
12
|
-
});
|
|
13
|
-
const listItemFocusStyles = css({
|
|
14
|
-
'&:focus': {
|
|
15
|
-
outline: 'none',
|
|
16
|
-
boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`} inset`,
|
|
17
|
-
textDecoration: 'none'
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
const listItemBoxShadow = css({
|
|
21
|
-
boxShadow: `inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`}`
|
|
22
|
-
});
|
|
23
|
-
const listItemActive = css({
|
|
24
|
-
'&:hover': {
|
|
25
|
-
backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`
|
|
26
|
-
},
|
|
27
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
28
|
-
listItemBoxShadow
|
|
29
|
-
});
|
|
30
|
-
const listItemSelected = css({
|
|
31
|
-
backgroundColor: `var(--ds-background-selected, ${B50})`
|
|
32
|
-
},
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
34
|
-
listItemBoxShadow);
|
|
35
|
-
export const composeListItemStyles = (selected = false) => {
|
|
36
|
-
return css(
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
38
|
-
listItemBaseStyles,
|
|
39
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
40
|
-
!selected && listItemActive,
|
|
41
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
42
|
-
selected && listItemSelected,
|
|
43
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
44
|
-
listItemFocusStyles);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
48
|
-
export const itemNameStyles = css({
|
|
49
|
-
overflow: 'hidden',
|
|
50
|
-
alignContent: 'center',
|
|
51
|
-
width: '100%'
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
55
|
-
export const listItemContextStyles = css({
|
|
56
|
-
color: `var(--ds-text, ${N300})`,
|
|
57
|
-
font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
58
|
-
display: 'flex'
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
62
|
-
export const listItemContainerStyles = css({
|
|
63
|
-
overflow: 'hidden',
|
|
64
|
-
textOverflow: 'ellipsis'
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
68
|
-
export const listItemContainerInnerStyles = css({
|
|
69
|
-
color: `var(--ds-text-subtlest, ${N200})`,
|
|
70
|
-
whiteSpace: 'nowrap'
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
74
|
-
export const itemIconStyles = css({
|
|
75
|
-
minWidth: "var(--ds-space-200, 16px)",
|
|
76
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
77
|
-
marginRight: "var(--ds-space-150, 12px)"
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
81
|
-
export const imgStyles = css({
|
|
82
|
-
maxWidth: "var(--ds-space-200, 16px)"
|
|
83
|
-
});
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @jsxRuntime classic
|
|
6
|
-
* @jsx jsx
|
|
7
|
-
*/
|
|
8
|
-
import { forwardRef, Fragment, useCallback, useRef } from 'react';
|
|
9
|
-
|
|
10
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
|
-
import { jsx } from '@emotion/react';
|
|
12
|
-
import { defineMessages, FormattedMessage } from 'react-intl-next';
|
|
13
|
-
import { Box, xcss } from '@atlaskit/primitives';
|
|
14
|
-
import Spinner from '@atlaskit/spinner';
|
|
15
|
-
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
16
|
-
import { MinHeightContainer } from '../../../../../common/ui/min-height-container';
|
|
17
|
-
import { handleNavKeyDown } from '../../../../../common/utils/handleNavKeyDown';
|
|
18
|
-
import { NoResults, testIds as noResultsTestIds } from '../link-search-no-results';
|
|
19
|
-
import { LinkSearchListItem, testIds as searchResultItemTestIds } from '../list-item';
|
|
20
|
-
import { useTrackResultsShown } from '../use-track-results-shown';
|
|
21
|
-
import { listContainerStyles, listStyles, listTitleStyles, spinnerContainerStyles } from './styled';
|
|
22
|
-
export const messages = defineMessages({
|
|
23
|
-
titleRecentlyViewed: {
|
|
24
|
-
id: 'fabric.linkPicker.listTitle.recentlyViewed',
|
|
25
|
-
defaultMessage: 'Recently Viewed',
|
|
26
|
-
description: 'Describes type of items shown in the list for screen-reader users'
|
|
27
|
-
},
|
|
28
|
-
titleResults: {
|
|
29
|
-
id: 'fabric.linkPicker.listTitle.results',
|
|
30
|
-
defaultMessage: 'Results',
|
|
31
|
-
description: 'Describes type of items shown in the list for screen-reader users'
|
|
32
|
-
},
|
|
33
|
-
searchLinkResults: {
|
|
34
|
-
id: 'fabric.linkPicker.hyperlink.searchLinkResults',
|
|
35
|
-
defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
|
|
36
|
-
description: 'Announce search results for screen-reader users.'
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
export const testIds = {
|
|
40
|
-
...noResultsTestIds,
|
|
41
|
-
...searchResultItemTestIds,
|
|
42
|
-
resultListTitle: 'link-picker-list-title',
|
|
43
|
-
searchResultList: 'link-search-list',
|
|
44
|
-
searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
|
|
45
|
-
tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
|
|
46
|
-
};
|
|
47
|
-
const emptyStateNoResultsWrapper = xcss({
|
|
48
|
-
minHeight: 'space.200'
|
|
49
|
-
});
|
|
50
|
-
export const LinkSearchListOld = /*#__PURE__*/forwardRef(({
|
|
51
|
-
onChange,
|
|
52
|
-
onSelect,
|
|
53
|
-
onKeyDown,
|
|
54
|
-
items,
|
|
55
|
-
activeIndex,
|
|
56
|
-
selectedIndex,
|
|
57
|
-
isLoading,
|
|
58
|
-
ariaControls,
|
|
59
|
-
ariaLabelledBy,
|
|
60
|
-
ariaReadOnly,
|
|
61
|
-
role,
|
|
62
|
-
id,
|
|
63
|
-
hasSearchTerm,
|
|
64
|
-
activePlugin,
|
|
65
|
-
adaptiveHeight,
|
|
66
|
-
...restProps
|
|
67
|
-
}, ref) => {
|
|
68
|
-
var _activePlugin$uiOptio;
|
|
69
|
-
let itemsContent;
|
|
70
|
-
let loadingContent;
|
|
71
|
-
const linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
|
|
72
|
-
useTrackResultsShown(isLoading, items, hasSearchTerm);
|
|
73
|
-
const itemRefs = useRef({});
|
|
74
|
-
const itemRefCallback = useCallback((el, id) => {
|
|
75
|
-
if (el === null) {
|
|
76
|
-
delete itemRefs.current[id];
|
|
77
|
-
} else {
|
|
78
|
-
itemRefs.current[id] = el;
|
|
79
|
-
}
|
|
80
|
-
}, []);
|
|
81
|
-
const getTabIndex = useCallback(index => {
|
|
82
|
-
if (selectedIndex > -1) {
|
|
83
|
-
return selectedIndex === index ? 0 : -1;
|
|
84
|
-
}
|
|
85
|
-
if (index === 0) {
|
|
86
|
-
return 0;
|
|
87
|
-
}
|
|
88
|
-
return -1;
|
|
89
|
-
}, [selectedIndex]);
|
|
90
|
-
const handleKeyDown = useCallback(event => {
|
|
91
|
-
let updatedIndex = activeIndex;
|
|
92
|
-
if (onKeyDown) {
|
|
93
|
-
onKeyDown(event);
|
|
94
|
-
}
|
|
95
|
-
if (!(items !== null && items !== void 0 && items.length)) {
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
updatedIndex = handleNavKeyDown(event, items.length, activeIndex);
|
|
99
|
-
const item = items === null || items === void 0 ? void 0 : items[updatedIndex];
|
|
100
|
-
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
|
|
101
|
-
if (itemRefs.current) {
|
|
102
|
-
var _itemRefs$current$ite;
|
|
103
|
-
(_itemRefs$current$ite = itemRefs.current[item.objectId]) === null || _itemRefs$current$ite === void 0 ? void 0 : _itemRefs$current$ite.focus();
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}, [activeIndex, items, onKeyDown]);
|
|
107
|
-
if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
|
|
108
|
-
if (!hasSearchTerm) {
|
|
109
|
-
var _activePlugin$emptySt;
|
|
110
|
-
const emptyState = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
|
|
111
|
-
if (emptyState) {
|
|
112
|
-
return jsx(Box, {
|
|
113
|
-
xcss: emptyStateNoResultsWrapper
|
|
114
|
-
}, emptyState);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
return jsx(NoResults, null);
|
|
118
|
-
}
|
|
119
|
-
const listItemNameMaxLines = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
|
|
120
|
-
if (items && items.length > 0) {
|
|
121
|
-
itemsContent = jsx(Fragment, null, jsx("div", {
|
|
122
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
123
|
-
css: listTitleStyles,
|
|
124
|
-
id: testIds.resultListTitle,
|
|
125
|
-
"data-testid": testIds.resultListTitle
|
|
126
|
-
}, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
|
|
127
|
-
id: "fabric.smartcard.linkpicker.suggested.results"
|
|
128
|
-
}, hasSearchTerm && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
|
|
129
|
-
values: {
|
|
130
|
-
count: items.length
|
|
131
|
-
},
|
|
132
|
-
"aria-live": "polite",
|
|
133
|
-
"aria-atomic": "true"
|
|
134
|
-
}))), jsx("ul", {
|
|
135
|
-
id: id,
|
|
136
|
-
role: role
|
|
137
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
138
|
-
,
|
|
139
|
-
css: listStyles,
|
|
140
|
-
"aria-controls": "fabric.smartcard.linkpicker.suggested.results",
|
|
141
|
-
"aria-labelledby": testIds.resultListTitle,
|
|
142
|
-
"aria-readonly": ariaReadOnly,
|
|
143
|
-
"data-testid": testIds.searchResultList
|
|
144
|
-
}, items.map((item, index) => jsx(LinkSearchListItem, {
|
|
145
|
-
id: `${testIds.searchResultItem}-${index}`,
|
|
146
|
-
role: role && 'option',
|
|
147
|
-
item: item,
|
|
148
|
-
selected: selectedIndex === index,
|
|
149
|
-
active: activeIndex === index,
|
|
150
|
-
onFocus: () => onChange(item.objectId),
|
|
151
|
-
onKeyDown: handleKeyDown,
|
|
152
|
-
onSelect: onSelect,
|
|
153
|
-
key: item.objectId,
|
|
154
|
-
tabIndex: getTabIndex(index),
|
|
155
|
-
ref: el => itemRefCallback(el, item.objectId),
|
|
156
|
-
nameMaxLines: listItemNameMaxLines
|
|
157
|
-
}))));
|
|
158
|
-
}
|
|
159
|
-
if (isLoading) {
|
|
160
|
-
loadingContent = jsx(MinHeightContainer, {
|
|
161
|
-
minHeight: adaptiveHeight ? '80px' : '50px'
|
|
162
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
163
|
-
,
|
|
164
|
-
css: spinnerContainerStyles
|
|
165
|
-
}, jsx(Spinner, {
|
|
166
|
-
testId: testIds.searchResultLoadingIndicator,
|
|
167
|
-
interactionName: "link-picker-search-list-loading",
|
|
168
|
-
size: "medium"
|
|
169
|
-
}));
|
|
170
|
-
}
|
|
171
|
-
return (
|
|
172
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
173
|
-
jsx("div", _extends({
|
|
174
|
-
ref: ref,
|
|
175
|
-
css: listContainerStyles
|
|
176
|
-
}, restProps), itemsContent, loadingContent)
|
|
177
|
-
);
|
|
178
|
-
});
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
|
-
import { css } from '@emotion/react';
|
|
3
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
4
|
-
export const listContainerStyles = css({
|
|
5
|
-
width: '100%',
|
|
6
|
-
paddingTop: 0,
|
|
7
|
-
minHeight: '80px',
|
|
8
|
-
marginTop: "var(--ds-space-200, 16px)",
|
|
9
|
-
marginBottom: "var(--ds-space-200, 16px)",
|
|
10
|
-
flexGrow: 1,
|
|
11
|
-
display: 'flex',
|
|
12
|
-
flexDirection: 'column'
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
16
|
-
export const spinnerContainerStyles = css({
|
|
17
|
-
flexGrow: 1,
|
|
18
|
-
flexDirection: 'column',
|
|
19
|
-
alignItems: 'center'
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
23
|
-
export const listStyles = css({
|
|
24
|
-
padding: "var(--ds-space-0, 0px)",
|
|
25
|
-
marginTop: "var(--ds-space-0, 0px)",
|
|
26
|
-
marginBottom: "var(--ds-space-0, 0px)",
|
|
27
|
-
marginLeft: 'calc(-1 * var(--link-picker-padding-left))',
|
|
28
|
-
marginRight: 'calc(-1 * var(--link-picker-padding-right))',
|
|
29
|
-
listStyle: 'none'
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
33
|
-
export const listTitleStyles = css({
|
|
34
|
-
font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
35
|
-
fontWeight: "var(--ds-font-weight-bold, 700)",
|
|
36
|
-
color: "var(--ds-text-subtlest, #626F86)",
|
|
37
|
-
marginBottom: "var(--ds-space-050, 4px)"
|
|
38
|
-
});
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @jsxRuntime classic
|
|
5
|
-
* @jsx jsx
|
|
6
|
-
*/
|
|
7
|
-
import { Fragment } from 'react';
|
|
8
|
-
|
|
9
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
|
-
import { css, jsx } from '@emotion/react';
|
|
11
|
-
import { Box, xcss } from '@atlaskit/primitives';
|
|
12
|
-
import Spinner from '@atlaskit/spinner/spinner';
|
|
13
|
-
import Tabs, { Tab, TabList } from '@atlaskit/tabs';
|
|
14
|
-
import { LinkSearchError, testIds as searchErrorTestIds } from '../link-search-error';
|
|
15
|
-
import { LinkSearchList, testIds as listTestIds } from '../link-search-list';
|
|
16
|
-
import { ScrollingTabList } from '../scrolling-tabs';
|
|
17
|
-
import { SearchResultsContainer } from '../search-results-container';
|
|
18
|
-
import { TrackTabViewed } from '../track-tab-viewed';
|
|
19
|
-
const tabsWrapperStyles = xcss({
|
|
20
|
-
marginTop: 'space.150'
|
|
21
|
-
});
|
|
22
|
-
const spinnerContainerStyles = css({
|
|
23
|
-
minHeight: '80px',
|
|
24
|
-
display: 'flex',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
justifyContent: 'center',
|
|
27
|
-
alignSelf: 'center',
|
|
28
|
-
flexGrow: 1
|
|
29
|
-
});
|
|
30
|
-
export const testIds = {
|
|
31
|
-
...searchErrorTestIds,
|
|
32
|
-
...listTestIds,
|
|
33
|
-
tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
|
|
34
|
-
tabList: 'link-picker-tabs',
|
|
35
|
-
tabItem: 'link-picker-tab'
|
|
36
|
-
};
|
|
37
|
-
export const SearchResultsOld = ({
|
|
38
|
-
tabs,
|
|
39
|
-
activeTab,
|
|
40
|
-
activePlugin,
|
|
41
|
-
isLoadingPlugins,
|
|
42
|
-
isLoadingResults,
|
|
43
|
-
isSubmitting,
|
|
44
|
-
handleTabChange,
|
|
45
|
-
handleSearchListOnChange,
|
|
46
|
-
featureFlags,
|
|
47
|
-
linkSearchListId,
|
|
48
|
-
error,
|
|
49
|
-
queryState,
|
|
50
|
-
items,
|
|
51
|
-
activeIndex,
|
|
52
|
-
selectedIndex,
|
|
53
|
-
handleSelected,
|
|
54
|
-
handleKeyDown,
|
|
55
|
-
adaptiveHeight,
|
|
56
|
-
retry
|
|
57
|
-
}) => {
|
|
58
|
-
var _activePlugin$errorFa, _activePlugin$errorFa2;
|
|
59
|
-
const isActivePlugin = !!activePlugin;
|
|
60
|
-
const tabList = jsx(TabList, null, tabs.map(tab => jsx(Tab, {
|
|
61
|
-
key: tab.tabTitle,
|
|
62
|
-
testId: testIds.tabItem
|
|
63
|
-
}, tab.tabTitle)));
|
|
64
|
-
return jsx(SearchResultsContainer, {
|
|
65
|
-
hasTabs: !!tabs.length || isLoadingPlugins,
|
|
66
|
-
adaptiveHeight: adaptiveHeight,
|
|
67
|
-
isLoadingResults: isLoadingResults
|
|
68
|
-
}, isLoadingPlugins && !!queryState && jsx("div", {
|
|
69
|
-
css: spinnerContainerStyles
|
|
70
|
-
}, jsx(Spinner, {
|
|
71
|
-
testId: testIds.tabsLoadingIndicator,
|
|
72
|
-
interactionName: "link-picker-tabs-loading",
|
|
73
|
-
size: "medium"
|
|
74
|
-
})), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx(Box, {
|
|
75
|
-
xcss: tabsWrapperStyles
|
|
76
|
-
}, jsx(Tabs, {
|
|
77
|
-
id: testIds.tabList,
|
|
78
|
-
testId: testIds.tabList,
|
|
79
|
-
selected: activeTab,
|
|
80
|
-
onChange: handleTabChange
|
|
81
|
-
}, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
|
|
82
|
-
activePlugin: activePlugin
|
|
83
|
-
})), !error && jsx(LinkSearchList, {
|
|
84
|
-
id: linkSearchListId,
|
|
85
|
-
role: "listbox",
|
|
86
|
-
ariaReadOnly: isSubmitting,
|
|
87
|
-
items: items,
|
|
88
|
-
isLoading: isLoadingResults,
|
|
89
|
-
selectedIndex: selectedIndex,
|
|
90
|
-
activeIndex: activeIndex,
|
|
91
|
-
onSelect: handleSelected,
|
|
92
|
-
onChange: handleSearchListOnChange,
|
|
93
|
-
onKeyDown: handleKeyDown,
|
|
94
|
-
hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
|
|
95
|
-
activePlugin: activePlugin,
|
|
96
|
-
adaptiveHeight: adaptiveHeight
|
|
97
|
-
}), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? 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));
|
|
98
|
-
};
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @jsxRuntime classic
|
|
6
|
-
* @jsx jsx
|
|
7
|
-
*/
|
|
8
|
-
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
|
9
|
-
|
|
10
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
|
-
import { jsx } from '@emotion/react';
|
|
12
|
-
import { IconButton } from '@atlaskit/button/new';
|
|
13
|
-
import ChevronLeftIcon from '@atlaskit/icon/utility/migration/chevron-left';
|
|
14
|
-
import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
|
|
15
|
-
import { calculateConditionalButtons, createGhost, getTabList, scrollBack, scrollForward } from '../scrolling-tabs';
|
|
16
|
-
import { backButtonStyles, containerStyles, nextButtonStyles, scrollingContainerStyles } from './styles';
|
|
17
|
-
function isTouchDevice() {
|
|
18
|
-
return 'ontouchstart' in window ||
|
|
19
|
-
// eslint-disable-next-line compat/compat
|
|
20
|
-
navigator.maxTouchPoints > 0;
|
|
21
|
-
}
|
|
22
|
-
const initialConditionalButtonsState = {
|
|
23
|
-
back: false,
|
|
24
|
-
forward: false
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
|
|
28
|
-
export const ScrollingTabListOld = props => {
|
|
29
|
-
const ref = useRef(null);
|
|
30
|
-
const [conditionalButtons, setConditionalButtons] = useState(initialConditionalButtonsState);
|
|
31
|
-
const ghost = useMemo(() => createGhost(), []);
|
|
32
|
-
const onTabClick = useCallback(e => {
|
|
33
|
-
const target = e.currentTarget;
|
|
34
|
-
if (target) {
|
|
35
|
-
target.scrollIntoView({
|
|
36
|
-
behavior: 'smooth',
|
|
37
|
-
block: 'nearest',
|
|
38
|
-
inline: 'center'
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}, []);
|
|
42
|
-
React.useLayoutEffect(() => {
|
|
43
|
-
const container = ref.current;
|
|
44
|
-
let scrollingContainer;
|
|
45
|
-
let tabs;
|
|
46
|
-
const handleConditionalButtonsChange = () => {
|
|
47
|
-
const buttons = calculateConditionalButtons(scrollingContainer, isTouchDevice());
|
|
48
|
-
setConditionalButtons(buttons);
|
|
49
|
-
};
|
|
50
|
-
const observerCallback = mutationList => {
|
|
51
|
-
const tablist = getTabList(ref);
|
|
52
|
-
for (const mutation of mutationList) {
|
|
53
|
-
if (mutation.type === 'childList') {
|
|
54
|
-
const addedNodes = Array.from(mutation.addedNodes);
|
|
55
|
-
const found = addedNodes.find(node => node.getAttribute('role') === 'tab');
|
|
56
|
-
if (found && tablist) {
|
|
57
|
-
ghost.remove();
|
|
58
|
-
const tabs = Array.from(tablist.children);
|
|
59
|
-
tabs.forEach(tab => {
|
|
60
|
-
tab.removeEventListener('click', onTabClick);
|
|
61
|
-
tab.addEventListener('click', onTabClick);
|
|
62
|
-
});
|
|
63
|
-
tablist.appendChild(ghost);
|
|
64
|
-
handleConditionalButtonsChange();
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
const observer = new MutationObserver(observerCallback);
|
|
70
|
-
if (container) {
|
|
71
|
-
const tablist = getTabList(ref);
|
|
72
|
-
scrollingContainer = tablist === null || tablist === void 0 ? void 0 : tablist.parentElement;
|
|
73
|
-
observer.observe(container, {
|
|
74
|
-
attributes: false,
|
|
75
|
-
childList: true,
|
|
76
|
-
subtree: true
|
|
77
|
-
});
|
|
78
|
-
if (scrollingContainer instanceof HTMLElement && tablist) {
|
|
79
|
-
tablist.appendChild(ghost);
|
|
80
|
-
tabs = Array.from(tablist.children);
|
|
81
|
-
tabs.forEach(tab => tab.addEventListener('click', onTabClick));
|
|
82
|
-
handleConditionalButtonsChange();
|
|
83
|
-
scrollingContainer.addEventListener('scroll', handleConditionalButtonsChange);
|
|
84
|
-
}
|
|
85
|
-
return () => {
|
|
86
|
-
if (scrollingContainer) {
|
|
87
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
88
|
-
scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
|
|
89
|
-
}
|
|
90
|
-
if (tabs.length) {
|
|
91
|
-
tabs.forEach(tab => tab.removeEventListener('click', onTabClick));
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
}, [onTabClick, ghost, ref]);
|
|
96
|
-
const buttonProps = {
|
|
97
|
-
appearance: 'subtle',
|
|
98
|
-
spacing: 'compact'
|
|
99
|
-
};
|
|
100
|
-
return (
|
|
101
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
102
|
-
jsx("div", {
|
|
103
|
-
css: containerStyles,
|
|
104
|
-
ref: ref,
|
|
105
|
-
"data-testid": "scrolling-tabs"
|
|
106
|
-
}, conditionalButtons.back &&
|
|
107
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
108
|
-
jsx("div", {
|
|
109
|
-
className: "back",
|
|
110
|
-
css: backButtonStyles
|
|
111
|
-
}, jsx(IconButton, _extends({
|
|
112
|
-
"data-test-id": "back",
|
|
113
|
-
onClick: () => scrollBack(ref),
|
|
114
|
-
label: "back",
|
|
115
|
-
icon: ChevronLeftIcon
|
|
116
|
-
}, buttonProps))), jsx("div", {
|
|
117
|
-
css: scrollingContainerStyles
|
|
118
|
-
}, props.children), conditionalButtons.forward &&
|
|
119
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
120
|
-
jsx("div", {
|
|
121
|
-
css: nextButtonStyles
|
|
122
|
-
}, jsx(IconButton, _extends({
|
|
123
|
-
"data-test-id": "forward",
|
|
124
|
-
onClick: () => scrollForward(ref)
|
|
125
|
-
}, buttonProps, {
|
|
126
|
-
label: "forward",
|
|
127
|
-
icon: ChevronRightIcon
|
|
128
|
-
}))))
|
|
129
|
-
);
|
|
130
|
-
};
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
|
-
import { css } from '@emotion/react';
|
|
3
|
-
import { N0, N30 } from '@atlaskit/theme/colors';
|
|
4
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
5
|
-
export const scrollingContainerStyles = css({
|
|
6
|
-
overflowX: 'auto',
|
|
7
|
-
scrollBehavior: 'smooth',
|
|
8
|
-
scrollPadding: '0 24px',
|
|
9
|
-
scrollbarWidth: 'none',
|
|
10
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
11
|
-
'&::-webkit-scrollbar': {
|
|
12
|
-
display: 'none'
|
|
13
|
-
},
|
|
14
|
-
'&::before': {
|
|
15
|
-
content: '""',
|
|
16
|
-
borderRadius: 2,
|
|
17
|
-
bottom: 0,
|
|
18
|
-
margin: 0,
|
|
19
|
-
position: 'absolute',
|
|
20
|
-
width: 'inherit',
|
|
21
|
-
left: "var(--ds-space-100, 8px)",
|
|
22
|
-
right: "var(--ds-space-100, 8px)",
|
|
23
|
-
height: 2,
|
|
24
|
-
backgroundColor: `var(--ds-border, ${N30})`
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
29
|
-
export const containerStyles = css({
|
|
30
|
-
position: 'relative',
|
|
31
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
32
|
-
'[role="tablist"]': {
|
|
33
|
-
'&::before': {
|
|
34
|
-
display: 'none'
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
// Overrides Atlaskit tabs styles to stop overflowing with ellipsis
|
|
38
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
39
|
-
'[role="tab"]': {
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
41
|
-
overflow: 'unset !important',
|
|
42
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
43
|
-
textOverflow: 'unset !important'
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
48
|
-
export const buttonContainerStyles = css({
|
|
49
|
-
position: 'absolute',
|
|
50
|
-
top: "var(--ds-space-050, 4px)",
|
|
51
|
-
zIndex: 999,
|
|
52
|
-
backgroundColor: `var(--ds-surface, ${N0})`
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
56
|
-
export const backButtonStyles = css([
|
|
57
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
58
|
-
buttonContainerStyles, {
|
|
59
|
-
left: 0
|
|
60
|
-
}]);
|
|
61
|
-
|
|
62
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
63
|
-
export const nextButtonStyles = css([
|
|
64
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
65
|
-
buttonContainerStyles, {
|
|
66
|
-
right: 0
|
|
67
|
-
}]);
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { useLayoutEffect, useRef } from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx } from '@emotion/react';
|
|
9
|
-
import { MinHeightContainer } from '../../../../../common/ui/min-height-container';
|
|
10
|
-
const flexColumn = css({
|
|
11
|
-
display: 'flex',
|
|
12
|
-
flexDirection: 'column',
|
|
13
|
-
justifyContent: 'flex-start',
|
|
14
|
-
width: '100%'
|
|
15
|
-
});
|
|
16
|
-
export const SearchResultsContainerOld = ({
|
|
17
|
-
hasTabs,
|
|
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, {
|
|
33
|
-
ref: ref,
|
|
34
|
-
minHeight: minheight,
|
|
35
|
-
css: flexColumn
|
|
36
|
-
}, children);
|
|
37
|
-
};
|