Add @atlaskit/layer types (#25427)

* Add @atlaskit/layer types

* fix name of module in comment

types/atlaskit__layer/atlaskit__layer-tests.tsx

@@ -0,0 +1,15 @@
+import Layer from '@atlaskit/layer';
+
+import * as React from 'react';
+import { render } from 'react-dom';
+
+declare const container: Element;
+
+render(
+    <Layer
+        position="bottom left"
+        content={<h1>Hello, world!</h1>}
+        autoFlip={false}
+    />,
+    container,
+);

types/atlaskit__layer/index.d.ts

@@ -0,0 +1,72 @@
+// Type definitions for @atlaskit/layer 3.1
+// Project: https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/
+// Definitions by: Lee Standen <https://github.com/lstanden>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import { Component, ReactNode } from 'react';
+
+export default class Layer extends Component<Props> {}
+
+export interface Props {
+    /**
+     * Sets whether the content auto flip when it reaches the border set it as true for default flip
+     * or set the custom flip positions
+     */
+    autoFlip?: boolean | FlipPositionType | FlipPositionType[];
+    /**
+     * Element to act as a boundary for the Layer. The Layer will not sit outside this element if it
+     * can help it. If, through it's normal positoning, it would end up outside the boundary the
+     * layer will flip positions if the autoPosition prop is set.
+     */
+    boundariesElement?: BoundariesElementType;
+    /** Target to which layer is attached */
+    children?: ReactNode;
+    /** HTML content to display in the layer. Will be aligned to the target according to the position prop. */
+    content?: ReactNode;
+    /**
+     * String representing the offsets from the target element in the format "[x-offset][y-offset]",
+     * measured in pixels.
+     */
+    offset?: string;
+    /**
+     * Callback that is used to know when the flipped state of Layer changes. This occurs when placing a
+     * Layered element in the requested position would cause Layer to be rendered outside of the
+     * boundariesElement (usually viewport).
+     */
+    onFlippedChange?: (
+        flipped: boolean,
+        actualPosition: CSSPositionType,
+        originalPosition: CSSPositionType,
+    ) => void;
+    /**
+     * Position of a layer relative to its target. The position attribute takes two positional arguments in
+     * the format position="edge edge-position", where edge specifies what edge to align the layer to, and
+     * edge-position specifies where on that edge the layer should appear.
+     */
+    position?: PositionType;
+    /** z-index for the layer component */
+    zIndex?: number;
+    /** Lock scrolling behind the layer */
+    lockScroll?: boolean;
+}
+
+export type FlipPositionType = 'top' | 'right' | 'bottom' | 'left';
+
+export type PositionType =
+    | 'top left'
+    | 'top center'
+    | 'top right'
+    | 'right top'
+    | 'right middle'
+    | 'right bottom'
+    | 'bottom left'
+    | 'bottom center'
+    | 'bottom right'
+    | 'left top'
+    | 'left middle'
+    | 'left bottom';
+
+export type BoundariesElementType = 'viewport' | 'window' | 'scrollParent';
+
+export type CSSPositionType = 'absolute' | 'fixed';

types/atlaskit__layer/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6", "dom"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "paths": {
+            "@atlaskit/layer": ["atlaskit__layer"]
+        }
+    },
+    "files": ["index.d.ts", "atlaskit__layer-tests.tsx"]
+}

types/atlaskit__layer/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }