@atlaskit/editor-common 74.57.0 → 74.58.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 (111) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/element-browser/ElementBrowser.js +152 -0
  3. package/dist/cjs/element-browser/ViewMore.js +39 -0
  4. package/dist/cjs/element-browser/components/CategoryList.js +115 -0
  5. package/dist/cjs/element-browser/components/ElementBrowserLoader.js +36 -0
  6. package/dist/cjs/element-browser/components/ElementList/ElementList.js +256 -0
  7. package/dist/cjs/element-browser/components/ElementList/EmptyState.js +47 -0
  8. package/dist/cjs/element-browser/components/ElementList/NotFoundIllustration.js +70 -0
  9. package/dist/cjs/element-browser/components/ElementList/cellSizeAndPositionGetter.js +42 -0
  10. package/dist/cjs/element-browser/components/ElementList/utils.js +54 -0
  11. package/dist/cjs/element-browser/components/ElementSearch.js +88 -0
  12. package/dist/cjs/element-browser/components/StatelessElementBrowser.js +269 -0
  13. package/dist/cjs/element-browser/constants.js +41 -0
  14. package/dist/cjs/element-browser/hooks/use-container-width.js +70 -0
  15. package/dist/cjs/element-browser/hooks/use-focus.js +51 -0
  16. package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +286 -0
  17. package/dist/cjs/element-browser/index.js +20 -0
  18. package/dist/cjs/element-browser/types.js +12 -0
  19. package/dist/cjs/monitoring/error.js +1 -1
  20. package/dist/cjs/ui/DropList/index.js +1 -1
  21. package/dist/cjs/utils/performance/measure-render.js +4 -3
  22. package/dist/cjs/utils/performance/measure-tti.js +9 -3
  23. package/dist/cjs/utils/validator.js +7 -0
  24. package/dist/es2019/element-browser/ElementBrowser.js +117 -0
  25. package/dist/es2019/element-browser/ViewMore.js +40 -0
  26. package/dist/es2019/element-browser/components/CategoryList.js +106 -0
  27. package/dist/es2019/element-browser/components/ElementBrowserLoader.js +21 -0
  28. package/dist/es2019/element-browser/components/ElementList/ElementList.js +320 -0
  29. package/dist/es2019/element-browser/components/ElementList/EmptyState.js +58 -0
  30. package/dist/es2019/element-browser/components/ElementList/NotFoundIllustration.js +65 -0
  31. package/dist/es2019/element-browser/components/ElementList/cellSizeAndPositionGetter.js +39 -0
  32. package/dist/es2019/element-browser/components/ElementList/utils.js +50 -0
  33. package/dist/es2019/element-browser/components/ElementSearch.js +117 -0
  34. package/dist/es2019/element-browser/components/StatelessElementBrowser.js +339 -0
  35. package/dist/es2019/element-browser/constants.js +23 -0
  36. package/dist/es2019/element-browser/hooks/use-container-width.js +59 -0
  37. package/dist/es2019/element-browser/hooks/use-focus.js +48 -0
  38. package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +284 -0
  39. package/dist/es2019/element-browser/index.js +2 -0
  40. package/dist/es2019/element-browser/types.js +5 -0
  41. package/dist/es2019/monitoring/error.js +1 -1
  42. package/dist/es2019/ui/DropList/index.js +1 -1
  43. package/dist/es2019/utils/performance/measure-render.js +2 -3
  44. package/dist/es2019/utils/performance/measure-tti.js +9 -3
  45. package/dist/es2019/utils/validator.js +7 -0
  46. package/dist/esm/element-browser/ElementBrowser.js +142 -0
  47. package/dist/esm/element-browser/ViewMore.js +31 -0
  48. package/dist/esm/element-browser/components/CategoryList.js +105 -0
  49. package/dist/esm/element-browser/components/ElementBrowserLoader.js +23 -0
  50. package/dist/esm/element-browser/components/ElementList/ElementList.js +241 -0
  51. package/dist/esm/element-browser/components/ElementList/EmptyState.js +40 -0
  52. package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js +63 -0
  53. package/dist/esm/element-browser/components/ElementList/cellSizeAndPositionGetter.js +37 -0
  54. package/dist/esm/element-browser/components/ElementList/utils.js +46 -0
  55. package/dist/esm/element-browser/components/ElementSearch.js +77 -0
  56. package/dist/esm/element-browser/components/StatelessElementBrowser.js +258 -0
  57. package/dist/esm/element-browser/constants.js +23 -0
  58. package/dist/esm/element-browser/hooks/use-container-width.js +61 -0
  59. package/dist/esm/element-browser/hooks/use-focus.js +46 -0
  60. package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +278 -0
  61. package/dist/esm/element-browser/index.js +2 -0
  62. package/dist/esm/element-browser/types.js +5 -0
  63. package/dist/esm/monitoring/error.js +1 -1
  64. package/dist/esm/ui/DropList/index.js +1 -1
  65. package/dist/esm/utils/performance/measure-render.js +2 -3
  66. package/dist/esm/utils/performance/measure-tti.js +9 -3
  67. package/dist/esm/utils/validator.js +7 -0
  68. package/dist/types/analytics/types/general-events.d.ts +2 -1
  69. package/dist/types/element-browser/ElementBrowser.d.ts +37 -0
  70. package/dist/types/element-browser/ViewMore.d.ts +6 -0
  71. package/dist/types/element-browser/components/CategoryList.d.ts +10 -0
  72. package/dist/types/element-browser/components/ElementBrowserLoader.d.ts +6 -0
  73. package/dist/types/element-browser/components/ElementList/ElementList.d.ts +33 -0
  74. package/dist/types/element-browser/components/ElementList/EmptyState.d.ts +6 -0
  75. package/dist/types/element-browser/components/ElementList/NotFoundIllustration.d.ts +2 -0
  76. package/dist/types/element-browser/components/ElementList/cellSizeAndPositionGetter.d.ts +7 -0
  77. package/dist/types/element-browser/components/ElementList/utils.d.ts +12 -0
  78. package/dist/types/element-browser/components/ElementSearch.d.ts +18 -0
  79. package/dist/types/element-browser/components/StatelessElementBrowser.d.ts +23 -0
  80. package/dist/types/element-browser/constants.d.ts +19 -0
  81. package/dist/types/element-browser/hooks/use-container-width.d.ts +33 -0
  82. package/dist/types/element-browser/hooks/use-focus.d.ts +35 -0
  83. package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +72 -0
  84. package/dist/types/element-browser/index.d.ts +2 -0
  85. package/dist/types/element-browser/types.d.ts +12 -0
  86. package/dist/types/types/quick-insert.d.ts +1 -0
  87. package/dist/types/utils/performance/measure-render.d.ts +6 -4
  88. package/dist/types/utils/performance/measure-tti.d.ts +1 -1
  89. package/dist/types-ts4.5/analytics/types/general-events.d.ts +2 -1
  90. package/dist/types-ts4.5/element-browser/ElementBrowser.d.ts +37 -0
  91. package/dist/types-ts4.5/element-browser/ViewMore.d.ts +6 -0
  92. package/dist/types-ts4.5/element-browser/components/CategoryList.d.ts +10 -0
  93. package/dist/types-ts4.5/element-browser/components/ElementBrowserLoader.d.ts +6 -0
  94. package/dist/types-ts4.5/element-browser/components/ElementList/ElementList.d.ts +33 -0
  95. package/dist/types-ts4.5/element-browser/components/ElementList/EmptyState.d.ts +6 -0
  96. package/dist/types-ts4.5/element-browser/components/ElementList/NotFoundIllustration.d.ts +2 -0
  97. package/dist/types-ts4.5/element-browser/components/ElementList/cellSizeAndPositionGetter.d.ts +7 -0
  98. package/dist/types-ts4.5/element-browser/components/ElementList/utils.d.ts +12 -0
  99. package/dist/types-ts4.5/element-browser/components/ElementSearch.d.ts +18 -0
  100. package/dist/types-ts4.5/element-browser/components/StatelessElementBrowser.d.ts +23 -0
  101. package/dist/types-ts4.5/element-browser/constants.d.ts +19 -0
  102. package/dist/types-ts4.5/element-browser/hooks/use-container-width.d.ts +33 -0
  103. package/dist/types-ts4.5/element-browser/hooks/use-focus.d.ts +35 -0
  104. package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +72 -0
  105. package/dist/types-ts4.5/element-browser/index.d.ts +2 -0
  106. package/dist/types-ts4.5/element-browser/types.d.ts +12 -0
  107. package/dist/types-ts4.5/types/quick-insert.d.ts +1 -0
  108. package/dist/types-ts4.5/utils/performance/measure-render.d.ts +6 -4
  109. package/dist/types-ts4.5/utils/performance/measure-tti.d.ts +1 -1
  110. package/element-browser/package.json +15 -0
  111. package/package.json +6 -2
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
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
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "74.57.0";
9
+ var packageVersion = "74.58.1";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -19,7 +19,7 @@ import { themed } from '@atlaskit/theme/components';
19
19
  import { borderRadius } from '@atlaskit/theme/constants';
20
20
  import Layer from '../Layer';
21
21
  var packageName = "@atlaskit/editor-common";
22
- var packageVersion = "74.57.0";
22
+ var packageVersion = "74.58.1";
23
23
  var halfFocusRing = 1;
24
24
  var dropOffset = '0, 8';
25
25
  var DropList = /*#__PURE__*/function (_Component) {
@@ -1,11 +1,10 @@
1
1
  import { isPerformanceAPIAvailable } from './is-performance-api-available';
2
-
3
2
  /**
4
3
  * Monitors if a pages enters a visibility state which will lead to
5
4
  * distorted duration measurements (where the measurement uses the
6
5
  * requestAnimationFrame api).
7
6
  */
8
- export function getDistortedDurationMonitor() {
7
+ export var getDistortedDurationMonitor = function getDistortedDurationMonitor() {
9
8
  if (typeof document === 'undefined') {
10
9
  return {
11
10
  distortedDuration: false,
@@ -37,7 +36,7 @@ export function getDistortedDurationMonitor() {
37
36
  document.removeEventListener('visibilitychange', handleVisibilityChange);
38
37
  }
39
38
  };
40
- }
39
+ };
41
40
 
42
41
  /**
43
42
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
@@ -1,5 +1,6 @@
1
1
  import { SEVERITY } from '../analytics';
2
2
  import { isPerformanceObserverLongTaskAvailable } from './is-performance-api-available';
3
+ import { getDistortedDurationMonitor } from './measure-render';
3
4
  export function measureTTI(onMeasureComplete) {
4
5
  var idleThreshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
5
6
  var cancelAfter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 60;
@@ -10,6 +11,8 @@ export function measureTTI(onMeasureComplete) {
10
11
  return;
11
12
  }
12
13
  var start = performance.now();
14
+ // Keeping track of users moving away from the tab, which distorts the TTI measurement
15
+ var distortedDurationMonitor = getDistortedDurationMonitor();
13
16
  var prevLongTask;
14
17
  var lastLongTask = {
15
18
  startTime: start,
@@ -40,13 +43,16 @@ export function measureTTI(onMeasureComplete) {
40
43
  var canceled = elapsedTimeMs > cancelAfterMs;
41
44
  if (!prevLongTask) {
42
45
  observer.disconnect();
43
- return onMeasureComplete(prevEnd, 0, false);
46
+ distortedDurationMonitor.cleanup();
47
+ return onMeasureComplete(prevEnd, 0, false, distortedDurationMonitor.distortedDuration);
44
48
  } else if (lastLongTask.startTime - prevEnd >= idleThreshold) {
45
49
  observer.disconnect();
46
- return onMeasureComplete(prevEnd, prevEnd - start, canceled);
50
+ distortedDurationMonitor.cleanup();
51
+ return onMeasureComplete(prevEnd, prevEnd - start, canceled, distortedDurationMonitor.distortedDuration);
47
52
  } else if (now - lastEnd >= idleThreshold || canceled) {
48
53
  observer.disconnect();
49
- return onMeasureComplete(lastEnd, lastEnd - start, canceled);
54
+ distortedDurationMonitor.cleanup();
55
+ return onMeasureComplete(lastEnd, lastEnd - start, canceled, distortedDurationMonitor.distortedDuration);
50
56
  }
51
57
  return setTimeout(checkIdle, idleThreshold);
52
58
  };
@@ -845,6 +845,13 @@ export var getValidMark = function getValidMark(mark) {
845
845
  attrs: attrs
846
846
  };
847
847
  }
848
+ case 'border':
849
+ {
850
+ return {
851
+ type: type,
852
+ attrs: attrs
853
+ };
854
+ }
848
855
  }
849
856
  }
850
857
  if (adfStage === 'stage0') {
@@ -1,6 +1,6 @@
1
1
  import type { RichMediaLayout } from '@atlaskit/adf-schema';
2
2
  import type { FeatureFlagKey } from '../../types/feature-flags';
3
- import { PropsDifference, ShallowPropsDifference } from '../../utils';
3
+ import type { PropsDifference, ShallowPropsDifference } from '../../utils';
4
4
  import type { SEVERITY } from '../../utils/analytics';
5
5
  import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD } from './enums';
6
6
  import type { AnnotationAEP } from './inline-comment-events';
@@ -48,6 +48,7 @@ type EditorTTIAEP = OperationalAEP<ACTION.EDITOR_TTI, ACTION_SUBJECT.EDITOR, und
48
48
  canceled: boolean;
49
49
  ttiSeverity?: SEVERITY;
50
50
  ttiFromInvocationSeverity?: SEVERITY;
51
+ distortedDuration: boolean;
51
52
  }, undefined>;
52
53
  type EditorContentRetrievalPerformedAEP = OperationalAEP<ACTION.EDITOR_CONTENT_RETRIEVAL_PERFORMED, ACTION_SUBJECT.EDITOR, undefined, {
53
54
  success: boolean;
@@ -0,0 +1,37 @@
1
+ import { PureComponent } from 'react';
2
+ import type { QuickInsertItem } from '../provider-factory';
3
+ import type { EmptyStateHandler } from '../types';
4
+ import type { Category, Modes } from './types';
5
+ export interface Props {
6
+ categories?: Category[];
7
+ mode: keyof typeof Modes;
8
+ getItems: (query?: string, category?: string) => QuickInsertItem[];
9
+ onSelectItem?: (item: QuickInsertItem) => void;
10
+ onInsertItem: (item: QuickInsertItem) => void;
11
+ showSearch: boolean;
12
+ showCategories: boolean;
13
+ defaultCategory?: string;
14
+ emptyStateHandler?: EmptyStateHandler;
15
+ viewMoreItem?: QuickInsertItem;
16
+ }
17
+ export interface State {
18
+ items: QuickInsertItem[];
19
+ categories: Category[];
20
+ selectedCategory?: string;
21
+ searchTerm?: string;
22
+ }
23
+ export default class ElementBrowser extends PureComponent<Props, State> {
24
+ static defaultProps: {
25
+ defaultCategory: string;
26
+ onInsertItem: () => void;
27
+ };
28
+ state: State;
29
+ componentDidMount(): void;
30
+ getCategories: (items?: QuickInsertItem[]) => Category[];
31
+ filterCategories: (items: QuickInsertItem[], categories?: Category[]) => Category[];
32
+ fetchItems: (query?: string, category?: string) => QuickInsertItem[];
33
+ componentDidUpdate(prevProps: Props, prevState: State): void;
34
+ handleSearch: (searchTerm: string) => void;
35
+ handleCategorySelection: (clickedCategory: Category) => void;
36
+ render(): JSX.Element;
37
+ }
@@ -0,0 +1,6 @@
1
+ import { jsx } from '@emotion/react';
2
+ import type { QuickInsertItem } from '../provider-factory';
3
+ export declare const ViewMore: ({ item, focus, }: {
4
+ item: QuickInsertItem;
5
+ focus: boolean;
6
+ }) => jsx.JSX.Element;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
3
+ import type { Category } from '../types';
4
+ interface Props {
5
+ categories?: Category[];
6
+ onSelectCategory: (category: Category) => void;
7
+ selectedCategory?: string;
8
+ }
9
+ declare const MemoizedCategoryListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props> & React.RefAttributes<any>>>;
10
+ export default MemoizedCategoryListWithAnalytics;
@@ -0,0 +1,6 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import Loadable from 'react-loadable';
4
+ import type { Props as ElementBrowserProps } from '../ElementBrowser';
5
+ declare const ElementBrowserLoader: React.ComponentType<ElementBrowserProps> & Loadable.LoadableComponent;
6
+ export default ElementBrowserLoader;
@@ -0,0 +1,33 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import { jsx } from '@emotion/react';
4
+ import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
5
+ import type { QuickInsertItem } from '../../../provider-factory';
6
+ import type { EmptyStateHandler } from '../../../types';
7
+ import type { SelectedItemProps } from '../../types';
8
+ import { Modes } from '../../types';
9
+ export declare const ICON_HEIGHT = 40;
10
+ export declare const ICON_WIDTH = 40;
11
+ export declare const itemIcon: import("@emotion/react").SerializedStyles;
12
+ export interface Props {
13
+ items: QuickInsertItem[];
14
+ mode: keyof typeof Modes;
15
+ onInsertItem: (item: QuickInsertItem) => void;
16
+ setColumnCount: (columnCount: number) => void;
17
+ setFocusedItemIndex: (index: number) => void;
18
+ emptyStateHandler?: EmptyStateHandler;
19
+ selectedCategory?: string;
20
+ searchTerm?: string;
21
+ }
22
+ type ElementItemType = {
23
+ inlineMode: boolean;
24
+ item: QuickInsertItem;
25
+ onInsertItem: (item: QuickInsertItem) => void;
26
+ selected: boolean;
27
+ focus: boolean;
28
+ setFocusedItemIndex: (index: number) => void;
29
+ index: number;
30
+ };
31
+ export declare function ElementItem({ inlineMode, selected, item, index, onInsertItem, focus, setFocusedItemIndex, }: ElementItemType): jsx.JSX.Element;
32
+ declare const MemoizedElementListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & SelectedItemProps & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props | keyof SelectedItemProps> & React.RefAttributes<any>>>;
33
+ export default MemoizedElementListWithAnalytics;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ type Props = {
3
+ onExternalLinkClick: () => void;
4
+ };
5
+ export default function EmptyState({ onExternalLinkClick, }: Props): JSX.Element;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export default function NotFoundIllustration(): JSX.Element;
@@ -0,0 +1,7 @@
1
+ import type { CollectionCellSizeAndPositionGetter } from 'react-virtualized/dist/commonjs/Collection';
2
+ /**
3
+ * Callback responsible for returning size and offset/position information
4
+ * for a given cell.
5
+ * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
6
+ **/
7
+ export default function cellSizeAndPositionGetter(containerWidth: number, scrollbarWidth: number): CollectionCellSizeAndPositionGetter;
@@ -0,0 +1,12 @@
1
+ export declare function getColumnCount(clientWidth: number): number;
2
+ type DatumReturnType = {
3
+ availableWidth: number;
4
+ columnCount: number;
5
+ };
6
+ type Options = {
7
+ gutterSize: number;
8
+ scrollbarWidth: number;
9
+ };
10
+ export declare function generateVirtualizedContainerDatum(containerWidth: number, options: Options): DatumReturnType;
11
+ export declare function getScrollbarWidth(): number;
12
+ export {};
@@ -0,0 +1,18 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import type { WrappedComponentProps } from 'react-intl-next';
4
+ import { Modes } from '../types';
5
+ interface Props {
6
+ onSearch: (value: string) => void;
7
+ mode: keyof typeof Modes;
8
+ focus: boolean;
9
+ onClick: (e: React.MouseEvent) => void;
10
+ onKeyDown: (e: React.KeyboardEvent) => void;
11
+ searchTerm?: string;
12
+ }
13
+ declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
14
+ forwardedRef?: React.Ref<any> | undefined;
15
+ } & {
16
+ children?: React.ReactNode;
17
+ } & import("@atlaskit/analytics-next").WithContextProps & React.RefAttributes<any>>>;
18
+ export default MemoizedElementSearchWithAnalytics;
@@ -0,0 +1,23 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
4
+ import type { QuickInsertItem } from '../../provider-factory';
5
+ import type { EmptyStateHandler } from '../../types';
6
+ import type { Category, Modes } from '../types';
7
+ export type StatelessElementBrowserProps = {
8
+ categories?: Category[];
9
+ items: QuickInsertItem[];
10
+ onSearch: (searchTerm: string) => void;
11
+ onSelectCategory: (category: Category) => void;
12
+ onSelectItem?: (item: QuickInsertItem) => void;
13
+ onInsertItem: (item: QuickInsertItem) => void;
14
+ selectedCategory?: string;
15
+ showSearch: boolean;
16
+ showCategories: boolean;
17
+ mode: keyof typeof Modes;
18
+ searchTerm?: string;
19
+ emptyStateHandler?: EmptyStateHandler;
20
+ viewMoreItem?: QuickInsertItem;
21
+ } & WithAnalyticsEventsProps;
22
+ declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<StatelessElementBrowserProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "mode" | "analyticsContext" | "categories" | "onSelectCategory" | "selectedCategory" | "items" | "emptyStateHandler" | "searchTerm" | "onInsertItem" | "onSearch" | "onSelectItem" | "viewMoreItem" | "showCategories" | "showSearch"> & React.RefAttributes<any>>>;
23
+ export default MemoizedElementBrowser;
@@ -0,0 +1,19 @@
1
+ export declare const GRID_SIZE: number;
2
+ export declare const DEVICE_BREAKPOINT_NUMBERS: {
3
+ small: number;
4
+ medium: number;
5
+ large: number;
6
+ };
7
+ export declare const FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS: {
8
+ small: number;
9
+ medium: number;
10
+ large: number;
11
+ };
12
+ export declare const SIDEBAR_WIDTH: string;
13
+ export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT: string;
14
+ export declare const SIDEBAR_HEADING_PADDING_LEFT = "12px";
15
+ export declare const INLINE_SIDEBAR_HEIGHT = "54px";
16
+ export declare const SEARCH_ITEM_HEIGHT_WIDTH = "20px";
17
+ export declare const SCROLLBAR_WIDTH = 15;
18
+ export declare const ELEMENT_LIST_PADDING = 2;
19
+ export declare const ELEMENT_ITEM_HEIGHT = 75;
@@ -0,0 +1,33 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ /**
4
+ *
5
+ * Problem:
6
+ * While using WidthObserver, there's no initial width.
7
+ * That may cause problems, but not limited to, something like a lag between
8
+ * renders for conditionally rendered components.
9
+ *
10
+ * solution:
11
+ * useContainerWidth() hook
12
+ * it pre-measures the width of a parent container on initial mount
13
+ * and gives you back the containerWidth.
14
+ *
15
+ *
16
+ * Example hook usage:
17
+ *
18
+ * const { containerWidth, ContainerWidthMonitor } = useContainerWidth();
19
+ *
20
+ * return (
21
+ * <>
22
+ * <ContainerWidthMonitor />
23
+ * {containerWidth < 600 ? <MobileComponent /> : <DesktopComponent />}
24
+ * </>
25
+ * );
26
+ *
27
+ */
28
+ type useContainerWidthReturnType = {
29
+ containerWidth: number;
30
+ ContainerWidthMonitor: React.ElementType;
31
+ };
32
+ export default function useContainerWidth(): useContainerWidthReturnType;
33
+ export {};
@@ -0,0 +1,35 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * A custom hook that handles focus on a DOM element.
4
+ * Takes in a boolean value and calls element.focus
5
+ *
6
+ * @param {boolean} focus
7
+ *
8
+ * Example usage:
9
+ *******************************************************************************
10
+ * const SearchBar = ({ focus }) => {
11
+ * const ref = useFocus(focus);
12
+ * return <input ref={ref} />
13
+ * }
14
+ *******************************************************************************
15
+ * const ItemList = ({ items, focus }) => (
16
+ * <ul>
17
+ * {items.map((item, index) => (
18
+ * <Item key={item.uuid} item={item} focus={focus} />
19
+ * ))}
20
+ * </ul>
21
+ * );
22
+ *
23
+ * const Item = ({ item, focus }) => {
24
+ * const ref = useFocus(focus);
25
+ * return (
26
+ * <li ref={ref}>
27
+ * {item.name}
28
+ * </li>
29
+ * )
30
+ * }
31
+ *******************************************************************************
32
+ */
33
+ type RefType = null | HTMLInputElement | HTMLDivElement;
34
+ export default function useFocus(focus: boolean): import("react").MutableRefObject<RefType>;
35
+ export {};
@@ -0,0 +1,72 @@
1
+ import type React from 'react';
2
+ /**
3
+ * a custom hook that handles keyboard navigation for Arrow keys based on a
4
+ * given listSize, and a step (for up and down arrows).
5
+ *
6
+ * @param {number} listSize
7
+ * @param {number} upDownStep
8
+ *
9
+ * Example usage:
10
+ * const list = ['Confluence','Jira','Atlaskit'];
11
+ * const {
12
+ * selectedItemIndex,
13
+ * focusedItemIndex,
14
+ * focusOnSearch,
15
+ * focusOnViewMore,
16
+ * setFocusedItemIndex,
17
+ * onKeyDown
18
+ * } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
19
+ *
20
+ * return (
21
+ * <div onKeyDown={onKeyDown}>
22
+ * <SearchBar onClick={() => setFocusedItemIndex(undefined)} focus={focusOnSearch} />
23
+ * {list.map((item, index) => (
24
+ * <ListItem
25
+ * title={item}
26
+ * style={{ ..., color: selected ? 'selectedStateColor' : defaultColor }}
27
+ * onClick={() => {
28
+ * setFocusedItemIndex(index);
29
+ * }
30
+ * />
31
+ * )}
32
+ * </div>
33
+ * );
34
+ *
35
+ * const SearchBar = ({ focus }) => {
36
+ * const ref = useRefToFocusOrScroll(focus);
37
+ * return <input ref={ref} />
38
+ * }
39
+ *
40
+ */
41
+ type ReducerState = {
42
+ focusOnSearch: boolean;
43
+ focusOnViewMore: boolean;
44
+ selectedItemIndex?: number;
45
+ focusedItemIndex?: number;
46
+ listSize: number;
47
+ canFocusViewMore?: boolean;
48
+ };
49
+ export declare enum ACTIONS {
50
+ FOCUS_SEARCH = "focusOnSearch",
51
+ UPDATE_STATE = "updateState",
52
+ MOVE = "move"
53
+ }
54
+ export type ReducerAction = {
55
+ type: ACTIONS;
56
+ payload: Partial<ReducerState> & {
57
+ positions?: number;
58
+ step?: number;
59
+ };
60
+ };
61
+ export type useSelectAndFocusReturnType = {
62
+ selectedItemIndex?: number;
63
+ onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
64
+ focusOnSearch: boolean;
65
+ focusOnViewMore: boolean;
66
+ focusedItemIndex?: number;
67
+ setFocusedItemIndex: (index?: number) => void;
68
+ setFocusOnSearch: () => void;
69
+ };
70
+ declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
71
+ export declare const ensureSafeIndex: (index: number, listSize: number) => number;
72
+ export default useSelectAndFocusOnArrowNavigation;
@@ -0,0 +1,2 @@
1
+ export { default as ElementBrowser } from './components/ElementBrowserLoader';
2
+ export { ELEMENT_ITEM_HEIGHT } from './constants';
@@ -0,0 +1,12 @@
1
+ export type Category = {
2
+ title: string;
3
+ name: string;
4
+ };
5
+ export declare enum Modes {
6
+ full = "full",
7
+ inline = "inline"
8
+ }
9
+ export type SelectedItemProps = {
10
+ selectedItemIndex?: number;
11
+ focusedItemIndex?: number;
12
+ };
@@ -34,4 +34,5 @@ export type QuickInsertSharedState = {
34
34
  lazyDefaultItems: () => QuickInsertItem[];
35
35
  emptyStateHandler?: EmptyStateHandler;
36
36
  providedItems?: QuickInsertItem[];
37
+ isElementBrowserModalOpen: boolean;
37
38
  };
@@ -1,12 +1,13 @@
1
+ type DistortedDurationMonitor = {
2
+ distortedDuration: boolean;
3
+ cleanup: () => void;
4
+ };
1
5
  /**
2
6
  * Monitors if a pages enters a visibility state which will lead to
3
7
  * distorted duration measurements (where the measurement uses the
4
8
  * requestAnimationFrame api).
5
9
  */
6
- export declare function getDistortedDurationMonitor(): {
7
- distortedDuration: boolean;
8
- cleanup(): void;
9
- };
10
+ export declare const getDistortedDurationMonitor: () => DistortedDurationMonitor;
10
11
  /**
11
12
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
12
13
  *
@@ -48,3 +49,4 @@ onMeasureComplete: ({ duration, startTime, distortedDuration, }: {
48
49
  */
49
50
  distortedDuration: boolean;
50
51
  }) => void): void;
52
+ export {};
@@ -1,5 +1,5 @@
1
1
  import { SEVERITY } from '../analytics';
2
- export declare function measureTTI(onMeasureComplete: (tti: number, ttiFromInvocation: number, canceled: boolean) => void, idleThreshold?: number, cancelAfter?: number, PerfObserver?: typeof window.PerformanceObserver): void;
2
+ export declare function measureTTI(onMeasureComplete: (tti: number, ttiFromInvocation: number, canceled: boolean, distortedDuration: boolean) => void, idleThreshold?: number, cancelAfter?: number, PerfObserver?: typeof window.PerformanceObserver): void;
3
3
  export declare const TTI_SEVERITY_THRESHOLD_DEFAULTS: {
4
4
  NORMAL: number;
5
5
  DEGRADED: number;
@@ -1,6 +1,6 @@
1
1
  import type { RichMediaLayout } from '@atlaskit/adf-schema';
2
2
  import type { FeatureFlagKey } from '../../types/feature-flags';
3
- import { PropsDifference, ShallowPropsDifference } from '../../utils';
3
+ import type { PropsDifference, ShallowPropsDifference } from '../../utils';
4
4
  import type { SEVERITY } from '../../utils/analytics';
5
5
  import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD } from './enums';
6
6
  import type { AnnotationAEP } from './inline-comment-events';
@@ -48,6 +48,7 @@ type EditorTTIAEP = OperationalAEP<ACTION.EDITOR_TTI, ACTION_SUBJECT.EDITOR, und
48
48
  canceled: boolean;
49
49
  ttiSeverity?: SEVERITY;
50
50
  ttiFromInvocationSeverity?: SEVERITY;
51
+ distortedDuration: boolean;
51
52
  }, undefined>;
52
53
  type EditorContentRetrievalPerformedAEP = OperationalAEP<ACTION.EDITOR_CONTENT_RETRIEVAL_PERFORMED, ACTION_SUBJECT.EDITOR, undefined, {
53
54
  success: boolean;
@@ -0,0 +1,37 @@
1
+ import { PureComponent } from 'react';
2
+ import type { QuickInsertItem } from '../provider-factory';
3
+ import type { EmptyStateHandler } from '../types';
4
+ import type { Category, Modes } from './types';
5
+ export interface Props {
6
+ categories?: Category[];
7
+ mode: keyof typeof Modes;
8
+ getItems: (query?: string, category?: string) => QuickInsertItem[];
9
+ onSelectItem?: (item: QuickInsertItem) => void;
10
+ onInsertItem: (item: QuickInsertItem) => void;
11
+ showSearch: boolean;
12
+ showCategories: boolean;
13
+ defaultCategory?: string;
14
+ emptyStateHandler?: EmptyStateHandler;
15
+ viewMoreItem?: QuickInsertItem;
16
+ }
17
+ export interface State {
18
+ items: QuickInsertItem[];
19
+ categories: Category[];
20
+ selectedCategory?: string;
21
+ searchTerm?: string;
22
+ }
23
+ export default class ElementBrowser extends PureComponent<Props, State> {
24
+ static defaultProps: {
25
+ defaultCategory: string;
26
+ onInsertItem: () => void;
27
+ };
28
+ state: State;
29
+ componentDidMount(): void;
30
+ getCategories: (items?: QuickInsertItem[]) => Category[];
31
+ filterCategories: (items: QuickInsertItem[], categories?: Category[]) => Category[];
32
+ fetchItems: (query?: string, category?: string) => QuickInsertItem[];
33
+ componentDidUpdate(prevProps: Props, prevState: State): void;
34
+ handleSearch: (searchTerm: string) => void;
35
+ handleCategorySelection: (clickedCategory: Category) => void;
36
+ render(): JSX.Element;
37
+ }
@@ -0,0 +1,6 @@
1
+ import { jsx } from '@emotion/react';
2
+ import type { QuickInsertItem } from '../provider-factory';
3
+ export declare const ViewMore: ({ item, focus, }: {
4
+ item: QuickInsertItem;
5
+ focus: boolean;
6
+ }) => jsx.JSX.Element;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
3
+ import type { Category } from '../types';
4
+ interface Props {
5
+ categories?: Category[];
6
+ onSelectCategory: (category: Category) => void;
7
+ selectedCategory?: string;
8
+ }
9
+ declare const MemoizedCategoryListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props> & React.RefAttributes<any>>>;
10
+ export default MemoizedCategoryListWithAnalytics;
@@ -0,0 +1,6 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import Loadable from 'react-loadable';
4
+ import type { Props as ElementBrowserProps } from '../ElementBrowser';
5
+ declare const ElementBrowserLoader: React.ComponentType<ElementBrowserProps> & Loadable.LoadableComponent;
6
+ export default ElementBrowserLoader;
@@ -0,0 +1,33 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
3
+ import { jsx } from '@emotion/react';
4
+ import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
5
+ import type { QuickInsertItem } from '../../../provider-factory';
6
+ import type { EmptyStateHandler } from '../../../types';
7
+ import type { SelectedItemProps } from '../../types';
8
+ import { Modes } from '../../types';
9
+ export declare const ICON_HEIGHT = 40;
10
+ export declare const ICON_WIDTH = 40;
11
+ export declare const itemIcon: import("@emotion/react").SerializedStyles;
12
+ export interface Props {
13
+ items: QuickInsertItem[];
14
+ mode: keyof typeof Modes;
15
+ onInsertItem: (item: QuickInsertItem) => void;
16
+ setColumnCount: (columnCount: number) => void;
17
+ setFocusedItemIndex: (index: number) => void;
18
+ emptyStateHandler?: EmptyStateHandler;
19
+ selectedCategory?: string;
20
+ searchTerm?: string;
21
+ }
22
+ type ElementItemType = {
23
+ inlineMode: boolean;
24
+ item: QuickInsertItem;
25
+ onInsertItem: (item: QuickInsertItem) => void;
26
+ selected: boolean;
27
+ focus: boolean;
28
+ setFocusedItemIndex: (index: number) => void;
29
+ index: number;
30
+ };
31
+ export declare function ElementItem({ inlineMode, selected, item, index, onInsertItem, focus, setFocusedItemIndex, }: ElementItemType): jsx.JSX.Element;
32
+ declare const MemoizedElementListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & SelectedItemProps & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props | keyof SelectedItemProps> & React.RefAttributes<any>>>;
33
+ export default MemoizedElementListWithAnalytics;
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ type Props = {
3
+ onExternalLinkClick: () => void;
4
+ };
5
+ export default function EmptyState({ onExternalLinkClick, }: Props): JSX.Element;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export default function NotFoundIllustration(): JSX.Element;
@@ -0,0 +1,7 @@
1
+ import type { CollectionCellSizeAndPositionGetter } from 'react-virtualized/dist/commonjs/Collection';
2
+ /**
3
+ * Callback responsible for returning size and offset/position information
4
+ * for a given cell.
5
+ * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
6
+ **/
7
+ export default function cellSizeAndPositionGetter(containerWidth: number, scrollbarWidth: number): CollectionCellSizeAndPositionGetter;