@atlaskit/editor-common 69.3.0 → 69.3.1

package/dist/types-ts4.0/types/type-ahead.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import { Fragment, Node as PMNode } from 'prosemirror-model';
+import { EditorState, Transaction } from 'prosemirror-state';
+import type { TypeAheadPayload } from '../analytics/types/type-ahead';
+import type { SelectItemMode, TypeAheadAvailableNodes } from '../type-ahead';
+declare type TypeAheadForceSelectProps = {
+    query: string;
+    items: Array<TypeAheadItem>;
+    editorState: EditorState;
+};
+export interface TypeAheadStats {
+    startedAt: number;
+    endedAt: number;
+    keyCount: {
+        arrowUp: number;
+        arrowDown: number;
+    };
+}
+export declare type TypeAheadItemRenderProps = {
+    onClick: () => void;
+    onHover: () => void;
+    isSelected: boolean;
+};
+export declare type TypeAheadInsert = (node?: PMNode | Object | string | Fragment, opts?: {
+    selectInlineNode?: boolean;
+}) => Transaction;
+export declare type TypeAheadSelectItem = (state: EditorState, item: TypeAheadItem, insert: TypeAheadInsert, meta: {
+    mode: SelectItemMode;
+    stats: TypeAheadStats;
+    query: string;
+    sourceListItem: Array<TypeAheadItem>;
+}) => Transaction | false;
+export declare type TypeAheadItem = {
+    title: string;
+    description?: string;
+    keyshortcut?: string;
+    key?: string | number;
+    icon?: () => ReactElement<any>;
+    render?: (props: TypeAheadItemRenderProps) => React.ReactElement<TypeAheadItemRenderProps> | null;
+    [key: string]: any;
+};
+export declare type TypeAheadForceSelect = (props: TypeAheadForceSelectProps) => TypeAheadItem | undefined;
+export declare type TypeAheadHandler = {
+    id: TypeAheadAvailableNodes;
+    trigger: string;
+    customRegex?: string;
+    headless?: boolean;
+    forceSelect?: TypeAheadForceSelect;
+    onInvokeAnalytics?: TypeAheadPayload;
+    onOpen?: (editorState: EditorState) => void;
+    getItems: (props: {
+        query: string;
+        editorState: EditorState;
+    }) => Promise<Array<TypeAheadItem>>;
+    selectItem: TypeAheadSelectItem;
+    dismiss?: (props: {
+        editorState: EditorState;
+        query: string;
+        stats: TypeAheadStats;
+        wasItemInserted?: boolean;
+    }) => void;
+    getHighlight?: (state: EditorState) => JSX.Element | null;
+};
+export {};

package/dist/types-ts4.0/types/ui-components.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import type { EditorView } from 'prosemirror-view';
+import type { DispatchAnalyticsEvent } from '../analytics/types/dispatch-analytics-event';
+import type { EventDispatcher } from '../event-dispatcher';
+import type { ProviderFactory } from '../provider-factory';
+import type { EditorActionsOptions } from './editor-actions';
+import type { EditorAppearance } from './editor-appearance';
+export declare type UiComponentFactoryParams = {
+    editorView: EditorView;
+    editorActions: EditorActionsOptions;
+    eventDispatcher: EventDispatcher;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    providerFactory: ProviderFactory;
+    appearance: EditorAppearance;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    containerElement: HTMLElement | null;
+    disabled: boolean;
+    wrapperElement: HTMLElement | null;
+};
+export declare type UIComponentFactory = (params: UiComponentFactoryParams) => React.ReactElement<any> | null;

package/dist/types-ts4.0/ufo/experience-store.d.ts

@@ -0,0 +1,33 @@
+import { EditorView } from 'prosemirror-view';
+import { UFOExperience } from '@atlaskit/ufo';
+import type { CustomData, ExperienceConfig } from '@atlaskit/ufo/types';
+export declare const experienceConfig: ExperienceConfig;
+export declare enum EditorExperience {
+    loadEditor = "load",
+    typing = "type",
+    interaction = "interact",
+    editSession = "editSession"
+}
+export declare const RELIABILITY_INTERVAL = 30000;
+declare type TypeOfEditorExperience = typeof EditorExperience;
+declare type ValueOfEditorExperience = TypeOfEditorExperience[keyof TypeOfEditorExperience];
+export declare class ExperienceStore {
+    private static stores;
+    private experiences;
+    private constructor();
+    static getInstance(view: EditorView, options?: {
+        forceNewInstance?: boolean;
+    }): ExperienceStore;
+    get(experienceId: string): UFOExperience | undefined;
+    getActive(experienceId: string): UFOExperience | undefined;
+    getAll(): UFOExperience[];
+    start(experienceId: ValueOfEditorExperience, startTime?: number): void;
+    addMetadata(experienceId: string, metadata: CustomData): void;
+    mark(experienceId: string, mark: string, value: number): void;
+    success(experienceId: string, metadata?: CustomData): Promise<boolean | null> | undefined;
+    fail(experienceId: string, metadata?: CustomData): void;
+    abort(experienceId: string, metadata?: CustomData): void;
+    abortAll(metadata?: CustomData): void;
+    failAll(metadata?: CustomData): void;
+}
+export {};

package/dist/types-ts4.0/ufo/index.d.ts

@@ -0,0 +1 @@
+export { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL, } from './experience-store';

package/dist/types-ts4.0/ui/BaseTheme/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Breakpoints } from '../WidthProvider';
+export declare function mapBreakpointToLayoutMaxWidth(breakpoint: Breakpoints): 760 | 850 | 680;
+declare type BaseThemeWrapperProps = {
+    breakpoint: Breakpoints;
+    children: React.ReactNode;
+    baseFontSize?: number;
+};
+export declare function BaseThemeWrapper({ baseFontSize, children, }: BaseThemeWrapperProps): JSX.Element;
+declare type BaseThemeProps = {
+    children: React.ReactNode;
+    baseFontSize?: number;
+};
+export declare function BaseTheme({ children, baseFontSize }: BaseThemeProps): JSX.Element;
+export {};

package/dist/types-ts4.0/ui/Caption/index.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { WrappedComponentProps } from 'react-intl-next';
+declare type Props = {
+    selected?: boolean;
+    hasContent?: boolean;
+    children?: React.ReactNode;
+    dataAttributes?: {
+        'data-renderer-start-pos': number;
+    };
+};
+export declare class CaptionComponent extends React.Component<Props & WrappedComponentProps> {
+    render(): jsx.JSX.Element;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.0/ui/Caption/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    placeholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.0/ui/DropList/index.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { Component, ReactNode } from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+interface Props extends WithAnalyticsEventsProps {
+    isOpen?: boolean;
+    trigger?: typeof Component;
+    position: string;
+    onOpenChange?: (event: OpenChangedEvent) => void;
+    onPositioned?: () => void;
+    testId?: string;
+    shouldFitContainer: boolean;
+    children?: ReactNode;
+}
+export declare type OpenChangedEvent = {
+    isOpen: boolean;
+    event: MouseEvent | KeyboardEvent;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "children" | "position" | "trigger" | "testId" | "analyticsContext" | "isOpen" | "onPositioned" | "onOpenChange" | "shouldFitContainer"> & import("react").RefAttributes<any>>;
+export default _default;

package/dist/types-ts4.0/ui/Emoji/index.d.ts

@@ -0,0 +1,20 @@
+import { PureComponent } from 'react';
+import { EmojiId } from '@atlaskit/emoji/types';
+import { ProviderFactory } from '../../provider-factory';
+export interface EmojiProps extends EmojiId {
+    allowTextFallback?: boolean;
+    providers?: ProviderFactory;
+    fitToHeight?: number;
+    showTooltip?: boolean;
+}
+export default class EmojiNode extends PureComponent<EmojiProps, {}> {
+    static displayName: string;
+    static defaultProps: {
+        showTooltip: boolean;
+    };
+    private providerFactory;
+    constructor(props: EmojiProps);
+    componentWillUnmount(): void;
+    private renderWithProvider;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/ui/ErrorBoundary/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ACTION, DispatchAnalyticsEvent, ErrorEventPayload } from '../../analytics';
+declare type ErrorCrashPayload = Extract<ErrorEventPayload, {
+    action: ACTION.EDITOR_CRASHED;
+}>;
+interface ErrorBoundaryProps {
+    component: ErrorCrashPayload['actionSubject'];
+    componentId?: ErrorCrashPayload['actionSubjectId'];
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    fallbackComponent?: React.ReactNode;
+}
+interface ErrorBoundaryState {
+    errorCaptured: boolean;
+}
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: {
+        errorCaptured: boolean;
+    };
+    hasFallback(): boolean;
+    shouldRecover(): boolean;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types-ts4.0/ui/EventHandlers/index.d.ts

@@ -0,0 +1,36 @@
+import { SyntheticEvent } from 'react';
+import type { CardEvent } from '@atlaskit/media-card';
+import type { Identifier } from '@atlaskit/media-client';
+export interface CardSurroundings {
+    collectionName: string;
+    list: Identifier[];
+}
+export declare type MentionEventHandler = (mentionId: string, text: string, event?: SyntheticEvent<HTMLSpanElement>) => void;
+export declare type CardEventClickHandler = (result: CardEvent, surroundings?: CardSurroundings, analyticsEvent?: any) => void;
+export declare type LinkEventClickHandler = (event: SyntheticEvent<HTMLAnchorElement>, url?: string) => void;
+export declare type SmartCardEventClickHandler = (event: SyntheticEvent<HTMLAnchorElement>, url?: string) => void;
+export declare type OnUnhandledClickHandler = (event: React.MouseEvent) => void;
+export interface MentionEventHandlers {
+    onClick?: MentionEventHandler;
+    onMouseEnter?: MentionEventHandler;
+    onMouseLeave?: MentionEventHandler;
+}
+/** Callbacks for mouse events in the renderer */
+export interface EventHandlers {
+    /** This fires when there is a click in the renderer that wasn’t handled by anything in the
+     * renderer. Example usage of this callback: load the editor in place of the renderer when
+     * renderer text is clicked.
+     * See example at /examples.html?groupId=editor&packageId=editor-core&exampleId=full-page-click-to-edit
+     *  */
+    onUnhandledClick?: OnUnhandledClickHandler;
+    mention?: MentionEventHandlers;
+    media?: {
+        onClick?: CardEventClickHandler;
+    };
+    link?: {
+        onClick?: LinkEventClickHandler;
+    };
+    smartCard?: {
+        onClick?: SmartCardEventClickHandler;
+    };
+}

package/dist/types-ts4.0/ui/Expand/index.d.ts

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ThemeProps } from '@atlaskit/theme/types';
+export declare const messages: {
+    collapseNode: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    expandDefaultTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    expandNode: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    expandPlaceholderText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export interface StyleProps {
+    expanded?: boolean;
+    focused?: boolean;
+    'data-node-type'?: 'expand' | 'nestedExpand';
+    'data-title'?: string;
+}
+export declare const ExpandIconWrapper: ({ children, expanded, }: React.HTMLAttributes<HTMLDivElement> & {
+    expanded: boolean;
+}) => jsx.JSX.Element;
+export declare const expandLayoutWrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const ExpandLayoutWrapperWithRef: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
+export declare const sharedExpandStyles: {
+    titleInputStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+    titleContainerStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+    containerStyles: (styleProps: StyleProps) => (themeProps: ThemeProps) => import("@emotion/react").SerializedStyles;
+    contentStyles: (styleProps: StyleProps) => (themeProps: ThemeProps) => import("@emotion/react").SerializedStyles;
+};

package/dist/types-ts4.0/ui/IntlErrorBoundary/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ErrorBoundaryProps {
+}
+interface ErrorBoundaryState {
+    missingIntlProviderInAncestry: boolean;
+}
+export declare const REACT_INTL_ERROR_MESSAGE = "<IntlProvider> needs to exist in the component ancestry";
+export declare class IntlErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: {
+        missingIntlProviderInAncestry: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types-ts4.0/ui/Layer/index.d.ts

@@ -0,0 +1,47 @@
+import { Component, ReactNode } from 'react';
+import { Data } from 'popper.js';
+export declare type Props = {
+    content: ReactNode | null;
+    offset: string;
+    position: string;
+    onPositioned: () => void;
+};
+export declare type State = {
+    hasExtractedStyles: boolean;
+    position?: string;
+    transform?: string;
+    offsets: {
+        popper: {
+            left: number;
+            top: number;
+        };
+    };
+    cssPosition: string;
+    originalHeight: number | null;
+    maxHeight: number | null;
+};
+export default class Layer extends Component<Props, State> {
+    private popper;
+    private targetRef;
+    private contentRef;
+    static defaultProps: {
+        boundariesElement: string;
+        children: null;
+        content: null;
+        offset: string;
+        position: string;
+        zIndex: number;
+        lockScroll: boolean;
+        isAlwaysFixed: boolean;
+        onPositioned: () => void;
+    };
+    constructor(props: Props);
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    calculateMaxHeight(originalHeight: number, currentHeight: number, positionTop: number, cssPosition: string): number | null;
+    extractStyles: (state: Data) => void;
+    applyPopper(props: Props): void;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/ui/Layer/internal/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const POSITION_ATTRIBUTE_ENUM: {
+    values: string[];
+    default: string;
+};
+export declare function positionPropToPopperPosition(position: string): import("popper.js").default.Placement;

package/dist/types-ts4.0/ui/MediaSingle/grid.d.ts

@@ -0,0 +1,10 @@
+import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+export declare const layoutSupportsWidth: (layout: MediaSingleLayout) => boolean;
+export declare function calcPxFromColumns(columns: number, lineLength: number, gridSize: number): number;
+export declare function calcColumnsFromPx(width: number, lineLength: number, gridSize: number): number;
+export declare function calcPxFromPct(pct: number, lineLength: number): number;
+export declare function calcPctFromPx(width: number, lineLength: number): number;
+export declare const snapToGrid: (gridWidth: number, width: number, height: number, lineLength: number, gridSize: number) => {
+    height: number;
+    width: number;
+};

package/dist/types-ts4.0/ui/MediaSingle/index.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+export declare const DEFAULT_IMAGE_WIDTH = 250;
+export declare const DEFAULT_IMAGE_HEIGHT = 200;
+export declare const wrappedLayouts: RichMediaLayout[];
+export interface Props {
+    children: React.ReactNode;
+    layout: MediaSingleLayout;
+    width?: number;
+    height: number;
+    lineLength: number;
+    containerWidth?: number;
+    isLoading?: boolean;
+    className?: string;
+    pctWidth?: number;
+    nodeType?: string;
+    fullWidthMode?: boolean;
+    hasFallbackContainer?: boolean;
+    handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
+}
+export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number | undefined, lineLength?: number | undefined) => boolean | 0 | undefined;
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types-ts4.0/ui/MediaSingle/link.d.ts

@@ -0,0 +1 @@
+export declare const mediaLinkStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/MediaSingle/styled.d.ts

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import React, { RefObject } from 'react';
+import { jsx } from '@emotion/react';
+import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+export declare function calcLegacyWidth(layout: MediaSingleLayout, width: number, containerWidth?: number, fullWidthMode?: boolean, isResized?: boolean): string;
+/**
+ * Calculates the image width for previously resized images.
+ *
+ * Wide and full-width images are always that size (960px and 100%); there is
+ * no distinction between max-width and width.
+ */
+export declare function calcResizedWidth(layout: MediaSingleLayout, width: number, containerWidth?: number): any;
+export interface MediaSingleWrapperProps {
+    containerWidth?: number;
+    fullWidthMode?: boolean;
+    isResized?: boolean;
+    layout: MediaSingleLayout;
+    pctWidth?: number;
+    width?: number;
+    innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
+}
+/**
+ * Can't use `.attrs` to handle highly dynamic styles because we are still
+ * supporting `styled-components` v1.
+ */
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export interface MediaWrapperProps {
+    paddingBottom?: string;
+    height?: number;
+    hasFallbackContainer?: boolean;
+}
+export declare const mediaWrapperStyle: (props: MediaWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaWrapper: {
+    ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & MediaWrapperProps): jsx.JSX.Element;
+    displayName: string;
+};

package/dist/types-ts4.0/ui/Mention/index.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+import { ProviderFactory } from '../../provider-factory';
+import { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
+import { MentionEventHandlers } from '../EventHandlers';
+export interface MentionProps {
+    id: string;
+    providers?: ProviderFactory;
+    eventHandlers?: MentionEventHandlers;
+    text: string;
+    accessLevel?: string;
+}
+export interface MentionState {
+    profilecardProvider: ProfilecardProvider | null;
+}
+export default class Mention extends PureComponent<MentionProps, {}> {
+    private providerFactory;
+    constructor(props: MentionProps);
+    componentWillUnmount(): void;
+    private renderWithProvider;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/ui/Mention/mention-with-profilecard.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MentionProvider } from '@atlaskit/mention';
+import { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
+import { MentionEventHandler } from '../EventHandlers';
+export interface Props {
+    id: string;
+    text: string;
+    accessLevel?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider: ProfilecardProvider;
+    onClick?: MentionEventHandler;
+    onMouseEnter?: MentionEventHandler;
+    onMouseLeave?: MentionEventHandler;
+}
+export default function MentionWithProfileCard({ id, text, accessLevel, mentionProvider, profilecardProvider, onClick, onMouseEnter, onMouseLeave, }: Props): JSX.Element;

package/dist/types-ts4.0/ui/Mention/mention-with-providers.d.ts

@@ -0,0 +1,22 @@
+import { PureComponent } from 'react';
+import { MentionProvider } from '@atlaskit/mention/resource';
+import { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
+import { MentionEventHandlers } from '../EventHandlers';
+export interface Props {
+    id: string;
+    text: string;
+    accessLevel?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
+    eventHandlers?: MentionEventHandlers;
+}
+export interface State {
+    profilecardProvider: ProfilecardProvider | null;
+}
+export default class MentionWithProviders extends PureComponent<Props, State> {
+    state: State;
+    UNSAFE_componentWillMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    private updateProfilecardProvider;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/ui/Mention/types.d.ts

@@ -0,0 +1,2 @@
+import { ProfileCardAction } from '@atlaskit/profilecard';
+export type { ProfileCardAction };

package/dist/types-ts4.0/ui/Messages/index.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+interface Props {
+    /** The content of the message */
+    children: ReactNode;
+}
+export declare const HelperMessage: ({ children }: Props) => jsx.JSX.Element;
+export declare const ErrorMessage: ({ children }: Props) => jsx.JSX.Element;
+export declare const ValidMessage: ({ children }: Props) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.0/ui/OverflowShadow/index.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import { ShadowObserver } from './shadowObserver';
+export declare const shadowClassNames: {
+    RIGHT_SHADOW: string;
+    LEFT_SHADOW: string;
+};
+export interface OverflowShadowProps {
+    handleRef?: (ref: HTMLElement | null) => void;
+    shadowClassNames?: string;
+}
+export interface OverflowShadowState {
+    showLeftShadow: boolean;
+    showRightShadow: boolean;
+}
+export interface OverflowShadowOptions {
+    overflowSelector: string;
+    useShadowObserver?: boolean;
+}
+export default function overflowShadow<P>(Component: React.ComponentType<P & OverflowShadowProps> | React.StatelessComponent<P & OverflowShadowProps>, options: OverflowShadowOptions): {
+    new (props: Readonly<P>): {
+        overflowContainer?: HTMLElement | null | undefined;
+        container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
+        scrollable?: NodeList | undefined;
+        diff?: number | undefined;
+        state: {
+            showLeftShadow: boolean;
+            showRightShadow: boolean;
+        };
+        componentWillUnmount(): void;
+        componentDidUpdate(): void;
+        handleScroll: (event: Event) => void;
+        updateShadows: () => void;
+        showLeftShadow: (overflowContainer: HTMLElement | null | undefined) => boolean;
+        calcOverflowDiff: () => number;
+        calcScrollableWidth: () => number;
+        handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<OverflowShadowState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): void;
+    };
+    new (props: P, context?: any): {
+        overflowContainer?: HTMLElement | null | undefined;
+        container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
+        scrollable?: NodeList | undefined;
+        diff?: number | undefined;
+        state: {
+            showLeftShadow: boolean;
+            showRightShadow: boolean;
+        };
+        componentWillUnmount(): void;
+        componentDidUpdate(): void;
+        handleScroll: (event: Event) => void;
+        updateShadows: () => void;
+        showLeftShadow: (overflowContainer: HTMLElement | null | undefined) => boolean;
+        calcOverflowDiff: () => number;
+        calcScrollableWidth: () => number;
+        handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<OverflowShadowState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<OverflowShadowState>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};