@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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/element-browser/ElementBrowser.js +152 -0
- package/dist/cjs/element-browser/ViewMore.js +39 -0
- package/dist/cjs/element-browser/components/CategoryList.js +115 -0
- package/dist/cjs/element-browser/components/ElementBrowserLoader.js +36 -0
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +256 -0
- package/dist/cjs/element-browser/components/ElementList/EmptyState.js +47 -0
- package/dist/cjs/element-browser/components/ElementList/NotFoundIllustration.js +70 -0
- package/dist/cjs/element-browser/components/ElementList/cellSizeAndPositionGetter.js +42 -0
- package/dist/cjs/element-browser/components/ElementList/utils.js +54 -0
- package/dist/cjs/element-browser/components/ElementSearch.js +88 -0
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +269 -0
- package/dist/cjs/element-browser/constants.js +41 -0
- package/dist/cjs/element-browser/hooks/use-container-width.js +70 -0
- package/dist/cjs/element-browser/hooks/use-focus.js +51 -0
- package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +286 -0
- package/dist/cjs/element-browser/index.js +20 -0
- package/dist/cjs/element-browser/types.js +12 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/utils/performance/measure-render.js +4 -3
- package/dist/cjs/utils/performance/measure-tti.js +9 -3
- package/dist/cjs/utils/validator.js +7 -0
- package/dist/es2019/element-browser/ElementBrowser.js +117 -0
- package/dist/es2019/element-browser/ViewMore.js +40 -0
- package/dist/es2019/element-browser/components/CategoryList.js +106 -0
- package/dist/es2019/element-browser/components/ElementBrowserLoader.js +21 -0
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +320 -0
- package/dist/es2019/element-browser/components/ElementList/EmptyState.js +58 -0
- package/dist/es2019/element-browser/components/ElementList/NotFoundIllustration.js +65 -0
- package/dist/es2019/element-browser/components/ElementList/cellSizeAndPositionGetter.js +39 -0
- package/dist/es2019/element-browser/components/ElementList/utils.js +50 -0
- package/dist/es2019/element-browser/components/ElementSearch.js +117 -0
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +339 -0
- package/dist/es2019/element-browser/constants.js +23 -0
- package/dist/es2019/element-browser/hooks/use-container-width.js +59 -0
- package/dist/es2019/element-browser/hooks/use-focus.js +48 -0
- package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +284 -0
- package/dist/es2019/element-browser/index.js +2 -0
- package/dist/es2019/element-browser/types.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/utils/performance/measure-render.js +2 -3
- package/dist/es2019/utils/performance/measure-tti.js +9 -3
- package/dist/es2019/utils/validator.js +7 -0
- package/dist/esm/element-browser/ElementBrowser.js +142 -0
- package/dist/esm/element-browser/ViewMore.js +31 -0
- package/dist/esm/element-browser/components/CategoryList.js +105 -0
- package/dist/esm/element-browser/components/ElementBrowserLoader.js +23 -0
- package/dist/esm/element-browser/components/ElementList/ElementList.js +241 -0
- package/dist/esm/element-browser/components/ElementList/EmptyState.js +40 -0
- package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js +63 -0
- package/dist/esm/element-browser/components/ElementList/cellSizeAndPositionGetter.js +37 -0
- package/dist/esm/element-browser/components/ElementList/utils.js +46 -0
- package/dist/esm/element-browser/components/ElementSearch.js +77 -0
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +258 -0
- package/dist/esm/element-browser/constants.js +23 -0
- package/dist/esm/element-browser/hooks/use-container-width.js +61 -0
- package/dist/esm/element-browser/hooks/use-focus.js +46 -0
- package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +278 -0
- package/dist/esm/element-browser/index.js +2 -0
- package/dist/esm/element-browser/types.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/utils/performance/measure-render.js +2 -3
- package/dist/esm/utils/performance/measure-tti.js +9 -3
- package/dist/esm/utils/validator.js +7 -0
- package/dist/types/analytics/types/general-events.d.ts +2 -1
- package/dist/types/element-browser/ElementBrowser.d.ts +37 -0
- package/dist/types/element-browser/ViewMore.d.ts +6 -0
- package/dist/types/element-browser/components/CategoryList.d.ts +10 -0
- package/dist/types/element-browser/components/ElementBrowserLoader.d.ts +6 -0
- package/dist/types/element-browser/components/ElementList/ElementList.d.ts +33 -0
- package/dist/types/element-browser/components/ElementList/EmptyState.d.ts +6 -0
- package/dist/types/element-browser/components/ElementList/NotFoundIllustration.d.ts +2 -0
- package/dist/types/element-browser/components/ElementList/cellSizeAndPositionGetter.d.ts +7 -0
- package/dist/types/element-browser/components/ElementList/utils.d.ts +12 -0
- package/dist/types/element-browser/components/ElementSearch.d.ts +18 -0
- package/dist/types/element-browser/components/StatelessElementBrowser.d.ts +23 -0
- package/dist/types/element-browser/constants.d.ts +19 -0
- package/dist/types/element-browser/hooks/use-container-width.d.ts +33 -0
- package/dist/types/element-browser/hooks/use-focus.d.ts +35 -0
- package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +72 -0
- package/dist/types/element-browser/index.d.ts +2 -0
- package/dist/types/element-browser/types.d.ts +12 -0
- package/dist/types/types/quick-insert.d.ts +1 -0
- package/dist/types/utils/performance/measure-render.d.ts +6 -4
- package/dist/types/utils/performance/measure-tti.d.ts +1 -1
- package/dist/types-ts4.5/analytics/types/general-events.d.ts +2 -1
- package/dist/types-ts4.5/element-browser/ElementBrowser.d.ts +37 -0
- package/dist/types-ts4.5/element-browser/ViewMore.d.ts +6 -0
- package/dist/types-ts4.5/element-browser/components/CategoryList.d.ts +10 -0
- package/dist/types-ts4.5/element-browser/components/ElementBrowserLoader.d.ts +6 -0
- package/dist/types-ts4.5/element-browser/components/ElementList/ElementList.d.ts +33 -0
- package/dist/types-ts4.5/element-browser/components/ElementList/EmptyState.d.ts +6 -0
- package/dist/types-ts4.5/element-browser/components/ElementList/NotFoundIllustration.d.ts +2 -0
- package/dist/types-ts4.5/element-browser/components/ElementList/cellSizeAndPositionGetter.d.ts +7 -0
- package/dist/types-ts4.5/element-browser/components/ElementList/utils.d.ts +12 -0
- package/dist/types-ts4.5/element-browser/components/ElementSearch.d.ts +18 -0
- package/dist/types-ts4.5/element-browser/components/StatelessElementBrowser.d.ts +23 -0
- package/dist/types-ts4.5/element-browser/constants.d.ts +19 -0
- package/dist/types-ts4.5/element-browser/hooks/use-container-width.d.ts +33 -0
- package/dist/types-ts4.5/element-browser/hooks/use-focus.d.ts +35 -0
- package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +72 -0
- package/dist/types-ts4.5/element-browser/index.d.ts +2 -0
- package/dist/types-ts4.5/element-browser/types.d.ts +12 -0
- package/dist/types-ts4.5/types/quick-insert.d.ts +1 -0
- package/dist/types-ts4.5/utils/performance/measure-render.d.ts +6 -4
- package/dist/types-ts4.5/utils/performance/measure-tti.d.ts +1 -1
- package/element-browser/package.json +15 -0
- 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.
|
|
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.
|
|
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
|
-
|
|
46
|
+
distortedDurationMonitor.cleanup();
|
|
47
|
+
return onMeasureComplete(prevEnd, 0, false, distortedDurationMonitor.distortedDuration);
|
|
44
48
|
} else if (lastLongTask.startTime - prevEnd >= idleThreshold) {
|
|
45
49
|
observer.disconnect();
|
|
46
|
-
|
|
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
|
-
|
|
54
|
+
distortedDurationMonitor.cleanup();
|
|
55
|
+
return onMeasureComplete(lastEnd, lastEnd - start, canceled, distortedDurationMonitor.distortedDuration);
|
|
50
56
|
}
|
|
51
57
|
return setTimeout(checkIdle, idleThreshold);
|
|
52
58
|
};
|
|
@@ -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,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,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;
|
|
@@ -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
|
|
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,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;
|
package/dist/types-ts4.5/element-browser/components/ElementList/cellSizeAndPositionGetter.d.ts
ADDED
|
@@ -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;
|