@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/dist/types-ts4.5/box.d.ts

An optional Pragmatic drag and drop package containing react components that provide a visual indication about what the user will achieve when the drop (eg lines)

import React from 'react';
import type { Appearance, CSSSize } from './internal-types';
import { Line } from './internal/line';
import type { Edge } from './types';
export type DropIndicatorProps = {
    /**
     * The `edge` to draw a drop indicator on.
     *
     * `edge` is required as for the best possible performance
     * outcome you should only render this component when it needs to do something
     *
     * @example {closestEdge && <DropIndicator edge={closestEdge} />}
     */
    edge: Edge;
    /**
     * `gap` allows you to position the drop indicator further away from the drop target.
     * `gap` should be the distance between your drop targets
     * a drop indicator will be rendered halfway between the drop targets
     * (the drop indicator will be offset by half of the `gap`)
     *
     * `gap` should be a valid CSS size.
     *
     * @example "8px"
     * @example "var(--gap)"
     */
    gap?: CSSSize;
    /**
     * This will control what color the indicator is set to
     */
    appearance?: Appearance;
    /**
     * Which style of indicator should be used
     *
     * *"terminal"*
     *
     * - display a terminal (circle with a whole in it) at the start of the line
     * - half the size of the terminal will "bleed out" of the containing element
     *
     * *"terminal-no-bleed"*
     *
     * - display a terminal (circle with a whole in it) at the start of the line
     * - the terminal will _not_ "bleed out" of the containing element
     * - this is useful in situations where the terminal cannot bleed out
     *   (such as when inside scroll containers with no padding)
     *
     * *"no-terminal"*
     *
     * - display a full width line with no terminal
     */
    type?: Parameters<typeof Line>[0]['type'];
    /**
     * Add additional indentation on the main axis of the line.
     * Useful in situations where you want to shift the line along a larger element.
     *
     * `indent` should be a valid CSS size.
     *
     * @example "20px"
     * @example "var(--indent)"
     */
    indent?: CSSSize;
};
/**
 * __Drop indicator__
 *
 * A drop indicator is used to communicate the intended resting place of the draggable item. The orientation of the drop indicator should always match the direction of the content flow.
 */
export declare function DropIndicator({ appearance, edge, gap, indent, type, }: DropIndicatorProps): React.JSX.Element;
export default DropIndicator;