@atlaskit/editor-common 74.57.0 → 74.58.0

package/dist/types-ts4.5/element-browser/components/ElementSearch.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { Modes } from '../types';
+interface Props {
+    onSearch: (value: string) => void;
+    mode: keyof typeof Modes;
+    focus: boolean;
+    onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    searchTerm?: string;
+}
+declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & {
+    children?: React.ReactNode;
+} & import("@atlaskit/analytics-next").WithContextProps & React.RefAttributes<any>>>;
+export default MemoizedElementSearchWithAnalytics;

package/dist/types-ts4.5/element-browser/components/StatelessElementBrowser.d.ts

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import React from 'react';
+import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { QuickInsertItem } from '../../provider-factory';
+import type { EmptyStateHandler } from '../../types';
+import type { Category, Modes } from '../types';
+export type StatelessElementBrowserProps = {
+    categories?: Category[];
+    items: QuickInsertItem[];
+    onSearch: (searchTerm: string) => void;
+    onSelectCategory: (category: Category) => void;
+    onSelectItem?: (item: QuickInsertItem) => void;
+    onInsertItem: (item: QuickInsertItem) => void;
+    selectedCategory?: string;
+    showSearch: boolean;
+    showCategories: boolean;
+    mode: keyof typeof Modes;
+    searchTerm?: string;
+    emptyStateHandler?: EmptyStateHandler;
+    viewMoreItem?: QuickInsertItem;
+} & WithAnalyticsEventsProps;
+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>>>;
+export default MemoizedElementBrowser;

package/dist/types-ts4.5/element-browser/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const GRID_SIZE: number;
+export declare const DEVICE_BREAKPOINT_NUMBERS: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export declare const FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export declare const SIDEBAR_WIDTH: string;
+export declare const SIDEBAR_HEADING_WRAPPER_HEIGHT: string;
+export declare const SIDEBAR_HEADING_PADDING_LEFT = "12px";
+export declare const INLINE_SIDEBAR_HEIGHT = "54px";
+export declare const SEARCH_ITEM_HEIGHT_WIDTH = "20px";
+export declare const SCROLLBAR_WIDTH = 15;
+export declare const ELEMENT_LIST_PADDING = 2;
+export declare const ELEMENT_ITEM_HEIGHT = 75;

package/dist/types-ts4.5/element-browser/hooks/use-container-width.d.ts

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import React from 'react';
+/**
+ *
+ * Problem:
+ * While using WidthObserver, there's no initial width.
+ * That may cause problems, but not limited to, something like a lag between
+ * renders for conditionally rendered components.
+ *
+ * solution:
+ * useContainerWidth() hook
+ * it pre-measures the width of a parent container on initial mount
+ * and gives you back the containerWidth.
+ *
+ *
+ * Example hook usage:
+ *
+ *  const { containerWidth, ContainerWidthMonitor } = useContainerWidth();
+ *
+ *  return (
+ *   <>
+ *    <ContainerWidthMonitor />
+ *    {containerWidth < 600 ? <MobileComponent /> : <DesktopComponent />}
+ *   </>
+ *  );
+ *
+ */
+type useContainerWidthReturnType = {
+    containerWidth: number;
+    ContainerWidthMonitor: React.ElementType;
+};
+export default function useContainerWidth(): useContainerWidthReturnType;
+export {};

package/dist/types-ts4.5/element-browser/hooks/use-focus.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+/**
+ * A custom hook that handles focus on a DOM element.
+ * Takes in a boolean value and calls element.focus
+ *
+ * @param {boolean} focus
+ *
+ * Example usage:
+ *******************************************************************************
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useFocus(focus);
+ *      return <input ref={ref} />
+ *    }
+ *******************************************************************************
+ *    const ItemList = ({ items, focus }) => (
+ *       <ul>
+ *        {items.map((item, index) => (
+ *          <Item key={item.uuid} item={item} focus={focus} />
+ *        ))}
+ *       </ul>
+ *     );
+ *
+ *    const Item = ({ item, focus }) => {
+ *      const ref = useFocus(focus);
+ *      return (
+ *        <li ref={ref}>
+ *          {item.name}
+ *        </li>
+ *      )
+ *    }
+ *******************************************************************************
+ */
+type RefType = null | HTMLInputElement | HTMLDivElement;
+export default function useFocus(focus: boolean): import("react").MutableRefObject<RefType>;
+export {};

package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -0,0 +1,72 @@
+import type React from 'react';
+/**
+ * a custom hook that handles keyboard navigation for Arrow keys based on a
+ * given listSize, and a step (for up and down arrows).
+ *
+ * @param {number} listSize
+ * @param {number} upDownStep
+ *
+ * Example usage:
+ *    const list = ['Confluence','Jira','Atlaskit'];
+ *    const {
+ *      selectedItemIndex,
+ *      focusedItemIndex,
+ *      focusOnSearch,
+ *      focusOnViewMore,
+ *      setFocusedItemIndex,
+ *      onKeyDown
+ *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
+ *
+ *    return (
+ *      <div onKeyDown={onKeyDown}>
+ *        <SearchBar onClick={() => setFocusedItemIndex(undefined)} focus={focusOnSearch} />
+ *        {list.map((item, index) => (
+ *           <ListItem
+ *            title={item}
+ *            style={{ ..., color: selected ? 'selectedStateColor' : defaultColor }}
+ *            onClick={() => {
+ *              setFocusedItemIndex(index);
+ *            }
+ *          />
+ *        )}
+ *      </div>
+ *    );
+ *
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useRefToFocusOrScroll(focus);
+ *      return <input ref={ref} />
+ *    }
+ *
+ */
+type ReducerState = {
+    focusOnSearch: boolean;
+    focusOnViewMore: boolean;
+    selectedItemIndex?: number;
+    focusedItemIndex?: number;
+    listSize: number;
+    canFocusViewMore?: boolean;
+};
+export declare enum ACTIONS {
+    FOCUS_SEARCH = "focusOnSearch",
+    UPDATE_STATE = "updateState",
+    MOVE = "move"
+}
+export type ReducerAction = {
+    type: ACTIONS;
+    payload: Partial<ReducerState> & {
+        positions?: number;
+        step?: number;
+    };
+};
+export type useSelectAndFocusReturnType = {
+    selectedItemIndex?: number;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    focusOnSearch: boolean;
+    focusOnViewMore: boolean;
+    focusedItemIndex?: number;
+    setFocusedItemIndex: (index?: number) => void;
+    setFocusOnSearch: () => void;
+};
+declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
+export declare const ensureSafeIndex: (index: number, listSize: number) => number;
+export default useSelectAndFocusOnArrowNavigation;

package/dist/types-ts4.5/element-browser/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ElementBrowser } from './components/ElementBrowserLoader';
+export { ELEMENT_ITEM_HEIGHT } from './constants';

package/dist/types-ts4.5/element-browser/types.d.ts

@@ -0,0 +1,12 @@
+export type Category = {
+    title: string;
+    name: string;
+};
+export declare enum Modes {
+    full = "full",
+    inline = "inline"
+}
+export type SelectedItemProps = {
+    selectedItemIndex?: number;
+    focusedItemIndex?: number;
+};

package/dist/types-ts4.5/types/quick-insert.d.ts

@@ -34,4 +34,5 @@ export type QuickInsertSharedState = {
     lazyDefaultItems: () => QuickInsertItem[];
     emptyStateHandler?: EmptyStateHandler;
     providedItems?: QuickInsertItem[];
+    isElementBrowserModalOpen: boolean;
 };

package/dist/types-ts4.5/utils/performance/measure-render.d.ts

@@ -1,12 +1,13 @@
+type DistortedDurationMonitor = {
+    distortedDuration: boolean;
+    cleanup: () => void;
+};
 /**
  * Monitors if a pages enters a visibility state which will lead to
  * distorted duration measurements (where the measurement uses the
  * requestAnimationFrame api).
  */
-export declare function getDistortedDurationMonitor(): {
-    distortedDuration: boolean;
-    cleanup(): void;
-};
+export declare const getDistortedDurationMonitor: () => DistortedDurationMonitor;
 /**
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
  *
@@ -48,3 +49,4 @@ onMeasureComplete: ({ duration, startTime, distortedDuration, }: {
      */
     distortedDuration: boolean;
 }) => void): void;
+export {};

package/dist/types-ts4.5/utils/performance/measure-tti.d.ts

@@ -1,5 +1,5 @@
 import { SEVERITY } from '../analytics';
-export declare function measureTTI(onMeasureComplete: (tti: number, ttiFromInvocation: number, canceled: boolean) => void, idleThreshold?: number, cancelAfter?: number, PerfObserver?: typeof window.PerformanceObserver): void;
+export declare function measureTTI(onMeasureComplete: (tti: number, ttiFromInvocation: number, canceled: boolean, distortedDuration: boolean) => void, idleThreshold?: number, cancelAfter?: number, PerfObserver?: typeof window.PerformanceObserver): void;
 export declare const TTI_SEVERITY_THRESHOLD_DEFAULTS: {
     NORMAL: number;
     DEGRADED: number;

package/element-browser/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/element-browser",
+  "main": "../dist/cjs/element-browser/index.js",
+  "module": "../dist/esm/element-browser/index.js",
+  "module:es2019": "../dist/es2019/element-browser/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/element-browser/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/element-browser/index.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.57.0",
+  "version": "74.58.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -77,7 +77,8 @@
     "./link": "./src/link/index.ts",
     "./mark": "./src/mark/index.ts",
     "./commands": "./src/commands/index.ts",
-    "./lists": "./src/lists/index.ts"
+    "./lists": "./src/lists/index.ts",
+    "./element-browser": "./src/element-browser/index.ts"
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.4.0",
@@ -111,6 +112,7 @@
     "@atlaskit/smart-user-picker": "^6.3.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/task-decision": "^17.8.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.21.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -134,6 +136,7 @@
     "raf-schd": "^4.0.3",
     "re-resizable": "6.0.0",
     "react-loadable": "^5.1.0",
+    "react-virtualized": "^9.8.0",
     "rusha": "^0.8.13",
     "w3c-keyname": "^2.1.0"
   },
@@ -158,6 +161,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/raf-schd": "^4.0.1",
+    "@types/react-virtualized": "^9.18.12",
     "enzyme": "^3.10.0",
     "raf-stub": "^2.0.1",
     "react": "^16.8.0",