optimizely-oui
Version:
Optimizely's Component Library.
1,175 lines (1,170 loc) • 278 kB
TypeScript
// Type definitions for OUI
// Project: OUI
// Definitions by: ui-engineering <https://github.com/optimizely/oui>
declare module 'optimizely-oui' {
export { default as Accordion } from 'components/Accordion/index';
export { default as ArrowsInline } from 'components/ArrowsInline/index';
export { default as Attention } from 'components/Attention/index';
export { default as Avatar } from 'components/Avatar/index';
export { default as Badge } from 'components/Badge/index';
export { default as BlockList } from 'components/BlockList/index';
export { default as ButterBar } from 'components/ButterBar/index';
export { default as Button } from 'components/Button/index';
export { default as ButtonRow } from 'components/ButtonRow/index';
export { default as Card } from 'components/Card/index';
export { default as Checkbox } from 'components/Checkbox/index';
export { default as Code } from 'components/Code/index';
export { default as CodeDiff } from 'components/CodeDiff/index';
export { default as Col } from 'components/Layout/Col';
export { default as ColWithNubbin } from 'components/Layout/ColWithNubbin';
export { default as Container } from 'components/Layout/Container';
export { default as CopyButton } from 'components/CopyButton/index';
export { default as DatePicker } from 'components/DatePicker/DatePicker';
export { default as DateRangePicker } from 'components/DatePicker/DateRangePicker';
export { default as Dialog } from 'components/Dialog/index';
/* Temporary export while we migrate from deprecated to new Dialog cmp */
export { DialogNew } from 'components/Dialog/index';
export { default as Disclose } from 'components/Disclose/index';
export { default as DiscloseTable } from 'components/DiscloseTable/index';
export { default as DockedFooter } from 'components/DockedFooter/index';
export { default as DragAndDrop } from 'components/DragAndDrop/index';
export { default as Dropdown } from 'components/Dropdown/index';
export { default as EmptyDashboard } from 'components/EmptyDashboard/index';
export { default as Fieldset } from 'components/Fieldset/index';
export { default as FilterPicker } from 'components/FilterPicker/index';
export * from "components/Grid/grid";
export { default as HelpPopover } from 'components/HelpPopover/index';
export { default as ButtonIcon } from 'components/ButtonIcon/index';
export { default as Input } from 'components/Input/index';
export { default as Label } from 'components/Label/index';
export * from "components/LayoutGrid/layout-grid";
export { default as Link } from 'components/Link/index';
export { default as ListGroup } from 'components/ListGroup/index';
export { default as ManagerSideNav } from 'components/ManagerSideNav/index';
export { default as OverlayWrapper } from 'components/OverlayWrapper/index';
export { default as Pagination } from 'components/Pagination/index';
export { default as PaginationControls } from 'components/PaginationControls/index';
export { default as Tile } from 'components/Tile/index';
export { default as ProgressBar } from 'components/ProgressBar/index';
export { default as ProgressDots } from 'components/ProgressDots/index';
export { default as Popover } from 'components/Popover/index';
export { default as Poptip } from 'components/Poptip/index';
export { default as Radio } from 'components/Radio/index';
export { default as RangeSlider } from 'components/RangeSlider/index';
export { default as Row } from 'components/Layout/Row';
export { default as SearchPicker } from 'components/SearchPicker/index';
export { default as Select } from 'components/Select/index';
export { default as SelectDropdown } from 'components/SelectDropdown/index';
export { default as Sheet } from 'components/Sheet/index';
export { default as Sidebar } from 'components/Sidebar/index';
export { default as Sortable } from 'components/Sortable/index';
export { default as Spinner } from 'components/Spinner/index';
export { default as Steps } from 'components/Steps/index';
export { default as SummaryBar } from 'components/SummaryBar/index';
export { default as Switch } from 'components/Switch/index';
export { default as Table } from 'components/Table/index';
export { default as TabNav } from 'components/TabNav/index';
export { default as Textarea } from 'components/Textarea/index';
export { default as TextField } from 'components/TextField/index';
export { default as Toolbar } from 'components/Toolbar/index';
export { default as Token } from 'components/Token/index';
export { default as TokensInput } from 'components/TokensInput/index';
export * from "components/Typography/typography";
export { default as NavBar } from 'components/NavBar/index';
export * from 'components/Navigation/navigation';
}
//
// AUTOGENERATED MODULES ARE APPENDED BELOW
// SEE yarn generate-types
//
/// <reference types="react" />
/// <reference types="lodash" />
declare module "components/Accordion/index" {
export function AccordionSection({ _isSelected, _onClickHandler, children, testSection, title }: {
_isSelected: any;
_onClickHandler: any;
children: any;
testSection: any;
title: any;
}): JSX.Element;
export namespace AccordionSection {
export namespace propTypes {
export const _isSelected: PropTypes.Requireable<boolean>;
export const _onClickHandler: PropTypes.Requireable<(...args: any[]) => any>;
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const testSection: PropTypes.Requireable<string>;
export const title: PropTypes.Validator<string>;
}
}
/**
* @deprecated This component has been deprecated. 2020-04-10
*/
export class Accordion extends React.Component<any, any, any> {
constructor(props: any);
state: {
selected: any;
};
handleSelection(selected: any): void;
render(): JSX.Element;
}
export namespace Accordion {
export namespace propTypes_1 {
const children_1: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export { children_1 as children };
export const initiallySelected: PropTypes.Requireable<number>;
const testSection_1: PropTypes.Requireable<string>;
export { testSection_1 as testSection };
}
export { propTypes_1 as propTypes };
export namespace defaultProps {
const initiallySelected_1: number;
export { initiallySelected_1 as initiallySelected };
}
}
namespace _default {
export { Accordion };
export { AccordionSection };
}
export default _default;
import PropTypes from "prop-types";
import React from "react";
}
declare module "components/Spinner/index" {
export default Spinner;
function Spinner({ className, hasOverlay, size, testSection, ...props }: any): any;
namespace Spinner {
export namespace propTypes {
export const className: PropTypes.Requireable<string>;
export const hasOverlay: PropTypes.Requireable<boolean>;
export const size: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
}
export const displayName: string;
}
import PropTypes from "prop-types";
}
declare module "components/Button/index" {
export default Button;
function Button({ ariaLabel, ariaHasPopup, buttonRef, children, className, isActive, isDisabled, isLink, isLoading, isSubmit, leftIcon, loadingText, onBlur, onClick, onMouseDown, rightIcon, size, style, testSection, title, width, ...props }: any): any;
namespace Button {
export namespace propTypes {
export const ariaHasPopup: PropTypes.Requireable<boolean>;
export const ariaLabel: PropTypes.Requireable<string>;
export const buttonRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
current: PropTypes.Requireable<Element>;
}>>;
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const isActive: PropTypes.Requireable<boolean>;
export const isDisabled: PropTypes.Requireable<boolean>;
export const isLink: PropTypes.Requireable<boolean>;
export const isLoading: PropTypes.Requireable<boolean>;
export const isSubmit: PropTypes.Requireable<boolean>;
export const leftIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const loadingText: PropTypes.Requireable<string>;
export const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
export const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
export const rightIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const size: PropTypes.Requireable<string>;
export const style: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
export const title: PropTypes.Requireable<string>;
export const width: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const isLink_1: boolean;
export { isLink_1 as isLink };
const isLoading_1: boolean;
export { isLoading_1 as isLoading };
const isDisabled_1: boolean;
export { isDisabled_1 as isDisabled };
const isSubmit_1: boolean;
export { isSubmit_1 as isSubmit };
const loadingText_1: string;
export { loadingText_1 as loadingText };
export function onBlur_1(): null;
export { onBlur_1 as onBlur };
export function onClick_1(): null;
export { onClick_1 as onClick };
export function onMouseDown_1(): null;
export { onMouseDown_1 as onMouseDown };
const width_1: string;
export { width_1 as width };
}
export const displayName: string;
}
import PropTypes from "prop-types";
}
declare module "tokens/forimport/index.es" {
export var brandBlueXLight: string;
export var brandBlueLight: string;
export var brandBlueBase: string;
export var brandBlueDark: string;
export var brandPurpleXLight: string;
export var brandPurpleLight: string;
export var brandPurpleBase: string;
export var brandPurpleDark: string;
export var smokeXLight: string;
export var smokeLight: string;
export var smokeBase: string;
export var smokeDark: string;
export var greyXLight: string;
export var greyLight: string;
export var greyBase: string;
export var greyDark: string;
export var purpleXLight: string;
export var purpleLight: string;
export var purpleBase: string;
export var purpleDark: string;
export var magentaXLight: string;
export var magentaLight: string;
export var magentaBase: string;
export var magentaDark: string;
export var pinkXLight: string;
export var pinkLight: string;
export var pinkBase: string;
export var pinkDark: string;
export var redXLight: string;
export var redLight: string;
export var redBase: string;
export var redDark: string;
export var orangeXLight: string;
export var orangeLight: string;
export var orangeBase: string;
export var orangeDark: string;
export var yellowXLight: string;
export var yellowLight: string;
export var yellowBase: string;
export var yellowDark: string;
export var greenXLight: string;
export var greenLight: string;
export var greenBase: string;
export var greenDark: string;
export var aquaXLight: string;
export var aquaLight: string;
export var aquaBase: string;
export var aquaDark: string;
export var blueXLight: string;
export var blueLight: string;
export var blueBase: string;
export var blueDark: string;
export var white: string;
export var black: string;
export var iconSmall: string;
export var iconLarge: string;
export var nubbinSize: string;
}
declare module "utils/accessibility" {
export function getAssistiveTextFromColorClass(className: string): string;
export function keyboardTracker(Component: React.Component<any, any, any>): React.Component<any, any, any>;
export const FILL_COLOR_MAP: {
aqua: string;
yellow: string;
default: string;
green: string;
orange: string;
pink: string;
red: string;
magenta: string;
grey: string;
purple: string;
black: string;
};
export namespace FILL_COLOR_MAP_LIGHT {
export { aquaXLight as aqua };
export { yellowXLight as yellow };
export { blueXLight as blue };
export { greenXLight as green };
export { orangeXLight as orange };
export { pinkXLight as pink };
export { redXLight as red };
export { magentaXLight as magenta };
export { purpleXLight as purple };
}
namespace _default {
export { FILL_COLOR_MAP };
export { FILL_COLOR_MAP_LIGHT };
}
export default _default;
import React from "react";
import { aquaXLight } from "tokens/forimport/index.es";
import { yellowXLight } from "tokens/forimport/index.es";
import { blueXLight } from "tokens/forimport/index.es";
import { greenXLight } from "tokens/forimport/index.es";
import { orangeXLight } from "tokens/forimport/index.es";
import { pinkXLight } from "tokens/forimport/index.es";
import { redXLight } from "tokens/forimport/index.es";
import { magentaXLight } from "tokens/forimport/index.es";
import { purpleXLight } from "tokens/forimport/index.es";
}
declare module "components/Attention/index" {
import { FunctionComponent } from "react";
export type AttentionProps = {
alignment?: "left" | "center";
children?: any;
/** CSS class names. */
className?: string;
isDismissible?: boolean;
testSection?: string;
type?: "bad-news" | "brand" | "good-news" | "warning";
};
const Attention: FunctionComponent<AttentionProps>;
export default Attention;
}
declare module "components/Accordion/Accordion.story" {
export {};
}
declare module "components/ArrowsInline/index" {
export default ArrowsInline;
function ArrowsInline({ direction, testSection }: any): any;
namespace ArrowsInline {
export namespace defaultProps {
export const direction: string;
}
export namespace propTypes {
const direction_1: PropTypes.Requireable<string>;
export { direction_1 as direction };
export const testSection: PropTypes.Requireable<string>;
}
}
import PropTypes from "prop-types";
}
declare module "components/ArrowsInline/ArrowInline.story" {
export {};
}
declare module "components/ArrowsInline/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/Attention/Attention.story" {
export {};
}
declare module "components/Attention/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/Avatar/index" {
export default Avatar;
function Avatar({ className, imageUrl, isEmulating, size, testSection, ...props }: any): any;
namespace Avatar {
export namespace propTypes {
export const className: PropTypes.Requireable<string>;
export const imageUrl: PropTypes.Requireable<string>;
export const isEmulating: PropTypes.Requireable<boolean>;
export const size: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
}
}
import PropTypes from "prop-types";
}
declare module "components/Layout/Container" {
import React from "react";
type ContainerProps = {
/**
* Use a custom element for this component
*/
as?: React.ElementType;
/**
* Allow the Container to fill available horizontal space.
*/
fluid?: boolean;
/**
* Allow the Container to fill available vertical space.
*/
isFullHeight?: boolean;
/**
* For testing/debugging only -- show hotpink grid borders and backgrounds.
*/
outlineDebug?: boolean;
/**
* Pad inner content.
*/
paddedContent?: "none" | "around" | "sides" | "ends" | "remove";
/**
* Remove first and last child side padding.
*/
pullRowPadding?: boolean;
/**
* Add top margin space between rows.
*/
pushRowsTop?: boolean;
};
/**
* @deprecated This component has been deprecated 2021-06-04. Use Grid or LayoutGrid instead.
*/
const Container: React.SFC<ContainerProps>;
export default Container;
}
declare module "components/Layout/Row" {
import React, { Ref } from "react";
type RowProps = {
/**
* @default 'row'
*/
as?: React.ElementType;
/**
* Add visible border to row
*/
border?: "top" | "bottom" | "left" | "right" | "sides" | "ends" | "all" | "none";
/**
* Display layout as vertical column.
*/
displayVertical?: boolean;
/**
* For testing/debugging only -- show grid hotpink borders and backgrounds.
*/
outlineDebug?: boolean;
/**
* Force overflow scrolling
*/
overflow?: "overflow-y--scroll" | "overflow-x--auto" | "overflow-y--auto";
/**
* Pad inner content.
*/
paddedContent?: "none" | "around" | "sides" | "ends" | "remove" | "top" | "bottom";
/** Optional pass through ref. */
ref?: Ref<HTMLElement>;
/**
* Removes gutters and negative margins.
*/
removeGutters?: boolean;
/** Whether this row should wrap at small screen sizes */
shouldWrap?: boolean;
/**
* How to vertically align content
*/
verticalAlignment?: "start" | "center" | "end";
};
/**
* @deprecated This component has been deprecated 2021-06-04. Use Grid or LayoutGrid instead.
*/
const Row: React.SFC<RowProps>;
export default Row;
}
declare module "components/Avatar/avatar.story" {
export {};
}
declare module "components/Badge/index" {
export default Badge;
function Badge({ backgroundColor, children, className, color, testSection, ...props }: any): any;
namespace Badge {
export namespace propTypes {
export const backgroundColor: PropTypes.Requireable<string>;
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const color: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const color_1: string;
export { color_1 as color };
}
}
import PropTypes from "prop-types";
}
declare module "components/Badge/Badge.story" {
export {};
}
declare module "components/Badge/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/BlockList/Category/index" {
export default Category;
function Category({ children, className, header, testSection, ...props }: any): any;
namespace Category {
export namespace propTypes {
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const testSection: PropTypes.Requireable<string>;
}
export const displayName: string;
}
import PropTypes from "prop-types";
}
declare module "components/BlockList/Item/index" {
export default Item;
class Item extends React.Component<any, any, any> {
constructor(props: any);
_handleOnKeyDown(event: any): void;
ref: React.RefObject<any>;
componentDidUpdate(): void;
render(): JSX.Element;
_itemWithOnClick: HTMLDivElement | null | undefined;
}
namespace Item {
export namespace propTypes {
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const gutters: PropTypes.Requireable<string>;
export const hasFauxFocus: PropTypes.Requireable<boolean>;
export const href: PropTypes.Requireable<string>;
export const hrefTarget: PropTypes.Requireable<string>;
export const hrefTitle: PropTypes.Requireable<string>;
export const isDisabled: PropTypes.Requireable<boolean>;
export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
export const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
export const testSection: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const gutters_1: string;
export { gutters_1 as gutters };
}
export const displayName: string;
}
import React from "react";
import PropTypes from "prop-types";
}
declare module "components/BlockList/index" {
export default BlockList;
function BlockList({ children, className, hasBorder, maxHeight, testSection, ...props }: any): any;
namespace BlockList {
export namespace propTypes {
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const hasBorder: PropTypes.Requireable<boolean>;
export const maxHeight: PropTypes.Requireable<string | number>;
export const testSection: PropTypes.Requireable<string>;
}
export { Category };
export { Item };
}
import PropTypes from "prop-types";
import Category from "components/BlockList/Category";
import Item from "components/BlockList/Item";
}
declare module "components/ButtonIcon/index" {
import PropTypes from "prop-types";
import React from "react";
export interface ButtonIconProps {
/** React ref to the underlying button component */
buttonRef?: any;
/** CSS class names. */
className?: string;
/** Color to use for the fill of the icon */
iconFill?: "aqua" | "yellow" | "default" | "green" | "orange" | "pink" | "red" | "magenta" | "grey" | "purple" | "black";
/** Name of the icon to use */
iconName: string;
/** Prevent users from interacting with the button */
isDisabled?: boolean;
/** Function to perform when the close button is clicked. */
onClick?: (evt: any) => void;
/** Size of the button, medium by default */
size?: "small" | "medium" | "large";
/** Various style options */
style?: "highlight" | "danger" | "danger-outline" | "outline" | "plain" | "unstyled";
/** Hook for automated JavaScript tests */
testSection?: string;
/** Title of the button used on hover and for screen readers */
title: string;
}
const _default: React.MemoExoticComponent<{
({ buttonRef, className, iconFill, iconName, isDisabled, onClick, size, style, testSection, title, ...props }: ButtonIconProps): JSX.Element;
propTypes: {
/** React ref to the underlying button component */
buttonRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
current: PropTypes.Requireable<Element>;
}>>;
/** CSS class names. */
className: PropTypes.Requireable<string>;
/**
* Color to use for the fill of the icon
*/
iconFill: PropTypes.Requireable<string>;
/**
* Name of the icon to use
*/
iconName: PropTypes.Validator<string>;
/**
* Prevent users from interacting with the button
*/
isDisabled: PropTypes.Requireable<boolean>;
/**
* Function to perform when the close button is clicked.
*/
onClick: PropTypes.Requireable<(...args: any[]) => any>;
/**
* Size of the button, medium by default
*/
size: PropTypes.Requireable<string>;
/**
* Various style options
*/
style: PropTypes.Requireable<string>;
/**
* Hook for automated JavaScript tests
*/
testSection: PropTypes.Requireable<string>;
/**
* Title of the button used on hover and for screen readers
*/
title: PropTypes.Validator<string>;
};
defaultProps: {
iconName: string;
onClick: () => null;
size: string;
title: string;
};
}>;
export default _default;
}
declare module "components/Token/DismissButton/index" {
export default DismissButton;
function DismissButton(props: any): any;
namespace DismissButton {
export namespace propTypes {
export const backgroundColor: PropTypes.Requireable<string>;
export const fill: PropTypes.Requireable<string>;
export const onClick: PropTypes.Validator<(...args: any[]) => any>;
export const testSection: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const fill_1: string;
export { fill_1 as fill };
}
export const displayName: string;
}
import PropTypes from "prop-types";
}
declare module "components/Token/index" {
export default Token;
function Token({ className, description, dragHandleProps, backgroundColor, hasSnugWrap, hasWrap, isDismissible, isDraggable, isFullWidth, name, onDismiss, order, style, showWell, testSection, usesDragHandle, ...props }: any): any;
namespace Token {
export namespace propTypes {
export const backgroundColor: PropTypes.Requireable<string>;
export const className: PropTypes.Requireable<string>;
export const description: PropTypes.Requireable<string>;
export const dragHandleProps: PropTypes.Requireable<object>;
export const hasSnugWrap: PropTypes.Requireable<boolean>;
export const hasWrap: PropTypes.Requireable<boolean>;
export const isDismissible: PropTypes.Requireable<boolean>;
export const isDraggable: PropTypes.Requireable<boolean>;
export const isFullWidth: PropTypes.Requireable<boolean>;
export const name: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const onDismiss: PropTypes.Requireable<(...args: any[]) => any>;
export const order: PropTypes.Requireable<number>;
export const showWell: PropTypes.Requireable<boolean>;
export const style: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
export const usesDragHandle: PropTypes.Requireable<boolean>;
}
export namespace defaultProps {
const dragHandleProps_1: {};
export { dragHandleProps_1 as dragHandleProps };
const hasWrap_1: boolean;
export { hasWrap_1 as hasWrap };
const isDismissible_1: boolean;
export { isDismissible_1 as isDismissible };
const style_1: string;
export { style_1 as style };
const showWell_1: boolean;
export { showWell_1 as showWell };
const usesDragHandle_1: boolean;
export { usesDragHandle_1 as usesDragHandle };
}
}
import PropTypes from "prop-types";
}
declare module "components/OverlayWrapper/index" {
export default OverlayWrapper;
/**
* Intelligently position elements on a page.
* @param {Object} props - Properties passed to component
* @returns {ReactElement}
*/
class OverlayWrapper extends React.Component<any, any, any> {
constructor(props: any);
state: {
isOverlayOpen: boolean;
};
onChildClick(event: any, child: any): void;
onChildMouseOver(event: any, child: any): void;
onChildMouseOut(event: any, child: any): void;
disableTether(): void;
getChildContext(): {
hideOverlay: () => void;
};
componentDidMount(): void;
initTether: (() => any) | undefined;
enableTether(): void;
_tether: any;
_bodyClickListener: ((event: any) => void) | undefined;
_documentEscapeListener: ((event: any) => void) | undefined;
removeBodyEventListener(): void;
/**
* Disable Tether if a user clicks outside of the `overlay` and `children`.
* @param {Object} event - Click event
*/
isClickWithinOverlayOrChildren(event: any): void;
componentWillUnmount(): void;
onEscapeKey(event: any): void;
render(): JSX.Element;
_activatorEl: HTMLDivElement | null | undefined;
_overlayEl: HTMLDivElement | null | undefined;
}
namespace OverlayWrapper {
export namespace propTypes {
export const attachmentConstraint: PropTypes.Requireable<string>;
export const behavior: PropTypes.Requireable<string>;
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const horizontalAttachment: PropTypes.Requireable<string>;
export const horizontalTargetAttachment: PropTypes.Requireable<string>;
export const isConstrainedToScreen: PropTypes.Requireable<boolean>;
export const onHide: PropTypes.Requireable<(...args: any[]) => any>;
export const onShow: PropTypes.Requireable<(...args: any[]) => any>;
export const overlay: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const shouldHideOnClick: PropTypes.Requireable<boolean>;
export const testSection: PropTypes.Requireable<string>;
export const verticalAttachment: PropTypes.Requireable<string>;
export const verticalTargetAttachment: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const attachmentConstraint_1: string;
export { attachmentConstraint_1 as attachmentConstraint };
const behavior_1: string;
export { behavior_1 as behavior };
const horizontalAttachment_1: string;
export { horizontalAttachment_1 as horizontalAttachment };
const isConstrainedToScreen_1: boolean;
export { isConstrainedToScreen_1 as isConstrainedToScreen };
export function onHide_1(): null;
export { onHide_1 as onHide };
const shouldHideOnClick_1: boolean;
export { shouldHideOnClick_1 as shouldHideOnClick };
const verticalAttachment_1: string;
export { verticalAttachment_1 as verticalAttachment };
}
export namespace childContextTypes {
export const hideOverlay: PropTypes.Requireable<(...args: any[]) => any>;
}
}
import React from "react";
import PropTypes from "prop-types";
}
declare module "components/BlockList/BlockList.story" {
export {};
}
declare module "components/BlockList/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/ButterBar/index" {
import { FunctionComponent } from "react";
export type ButterBarProps = {
alignment?: "left" | "center";
children?: any;
/** CSS class names. */
className?: string;
isDismissible?: boolean;
testSection?: string;
type?: "bad-news" | "brand" | "good-news" | "warning";
onDismiss?: () => any;
};
const ButterBar: FunctionComponent<ButterBarProps>;
export default ButterBar;
}
declare module "components/ButterBar/ButterBar.story" {
export {};
}
declare module "components/ButtonRow/index" {
export default ButtonRow;
function ButtonRow({ centerGroup, className, leftGroup, rightGroup, testSection, ...props }: any): any;
namespace ButtonRow {
export namespace propTypes {
export const centerGroup: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
export const className: PropTypes.Requireable<string>;
export const leftGroup: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
export const rightGroup: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
export const testSection: PropTypes.Requireable<string>;
}
}
import PropTypes from "prop-types";
}
declare module "components/Link/index" {
export default Link;
function Link({ ariaLabel, children, className, href, leftIcon, onClick, isDisabled, isFullWidth, newWindow, rightIcon, style, testSection, ...props }: any): any;
namespace Link {
export namespace propTypes {
export const ariaLabel: PropTypes.Requireable<string>;
export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const href: PropTypes.Requireable<string>;
export const isDisabled: PropTypes.Requireable<boolean>;
export const isFullWidth: PropTypes.Requireable<boolean>;
export const leftIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const newWindow: PropTypes.Requireable<boolean>;
export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
export const rightIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const style: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
}
}
import PropTypes from "prop-types";
}
declare module "components/Button/Button.story" {
export {};
}
declare module "components/Button/example/index" {
var _default: ({
isPadded: boolean;
examples: JSX.Element[];
backgroundColor?: undefined;
} | {
backgroundColor: string;
isPadded: boolean;
examples: JSX.Element[];
})[];
export default _default;
}
declare module "components/Layout/Col" {
import React, { Ref } from "react";
/** colSize shorthand */
type colSizeShorthand = boolean | number | "fitContent" | "fillSpace";
type column = colSizeShorthand | {
/** Draw border on this single column. */
border: "top" | "bottom" | "left" | "right" | "sides" | "ends" | "all";
/** Push columns around with an offset. */
offset: string | number;
/** Specify a content display order different from HTML source order. */
order: string | number;
/** Pad inner content with a default amount. */
paddedContent: "none" | "around" | "sides" | "ends" | "remove";
/** Size of this column; allows for some shorthand. */
size: colSizeShorthand;
};
type ColPropTypes = {
/** Specify an element besides <div>. */
as?: React.ElementType;
/** Add single border column. */
border?: "top" | "bottom" | "left" | "right" | "sides" | "ends" | "all";
/** Inner contents. */
children: React.ReactNode;
/** Whether or not this is a reading column layout */
isReadingColumn?: boolean;
/**
* The number of columns to span on large devices (≥992px)
*
* @type {("fillSpace"|"fitContent"|number|
* { span: "fillSpace"|"fitContent"|number, offset: number, order: number }
* )}
*/
large?: column;
/**
* Force overflow scrolling
*/
overflow?: "overflow-y--scroll" | "overflow-x--auto" | "overflow-y--auto";
/** Add default amount of padding. */
paddedContent?: "around" | "sides" | "ends" | "none" | "remove";
/** Optional pass through ref. */
ref?: Ref<HTMLElement>;
/**
* The number of columns to span on small devices (≥576px)
*
* @type {("fillSpace"|"fitContent"|number|
* { span: "fillSpace"|"fitContent"|number, offset: number, order: number }
* )}
*/
small?: column;
/**
* How to vertically align self
*/
alignSelf?: "start" | "center" | "end";
};
/**
* @deprecated This component has been deprecated 2021-06-04. Use Grid or LayoutGrid instead.
*/
const Col: React.SFC<ColPropTypes>;
export default Col;
}
declare module "components/ButtonIcon/ButtonIcon.story" {
export {};
}
declare module "components/ButtonRow/ButtonRow.story" {
export {};
}
declare module "components/ButtonRow/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/Card/index" {
import { FunctionComponent } from "react";
export interface CardProps {
/** Elements that appears within the component */
children: any;
/** CSS class names. */
className?: string;
/** Method to invoke when a close element is clicked */
onClose?: () => void;
/** Display a subtle shadow around card. */
shadow?: boolean;
/** For automated testing only. */
testSection?: string;
/** A title to be displayed on the card */
title: string;
}
const Card: FunctionComponent<CardProps>;
export default Card;
}
declare module "components/Card/Card.story" {
export {};
}
declare module "components/Card/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/Label/index" {
export default Label;
function Label({ children, className, inputId, isOptional, isRequired, testSection, ...props }: any): any;
namespace Label {
export namespace propTypes {
export const children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const className: PropTypes.Requireable<string>;
export const inputId: PropTypes.Requireable<string>;
export const isOptional: PropTypes.Requireable<boolean>;
export const isRequired: PropTypes.Requireable<boolean>;
export const testSection: PropTypes.Requireable<string>;
}
}
import PropTypes from "prop-types";
}
declare module "components/Checkbox/index" {
export default Checkbox;
function Checkbox({ checked, className, defaultChecked, isDisabled, label, labelWeight, onChange, testSection, ...props }: any): any;
namespace Checkbox {
export namespace propTypes {
export const checked: PropTypes.Requireable<boolean>;
export const className: PropTypes.Requireable<string>;
export const defaultChecked: PropTypes.Requireable<boolean>;
export const isDisabled: PropTypes.Requireable<boolean>;
export const label: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
export const labelWeight: PropTypes.Requireable<string>;
export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
export const testSection: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const labelWeight_1: string;
export { labelWeight_1 as labelWeight };
}
}
import PropTypes from "prop-types";
}
declare module "components/Checkbox/Checkbox.story" {
export {};
}
declare module "components/Checkbox/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/CloseButton/index" {
export default CloseButton;
function CloseButton({ className, onClick, size, ...props }: any): any;
namespace CloseButton {
export namespace propTypes {
export const className: PropTypes.Requireable<string>;
export const onClick: PropTypes.Validator<(...args: any[]) => any>;
export const size: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const size_1: string;
export { size_1 as size };
}
}
import PropTypes from "prop-types";
}
declare module "components/CopyButton/index" {
export default CopyButton;
function CopyButton({ className, onCopy, style, testSection, textLabel, textToCopy, usesTextLabel, ...props }: any): any;
namespace CopyButton {
export namespace propTypes {
export const className: PropTypes.Requireable<string>;
export const onCopy: PropTypes.Requireable<(...args: any[]) => any>;
export const style: PropTypes.Requireable<string>;
export const testSection: PropTypes.Requireable<string>;
export const textLabel: PropTypes.Requireable<string>;
export const textToCopy: PropTypes.Validator<string>;
export const usesTextLabel: PropTypes.Requireable<boolean>;
}
export namespace defaultProps {
const style_1: string;
export { style_1 as style };
const usesTextLabel_1: boolean;
export { usesTextLabel_1 as usesTextLabel };
const textLabel_1: string;
export { textLabel_1 as textLabel };
}
}
import PropTypes from "prop-types";
}
declare module "components/Code/index" {
export default Code;
/**
* Display code either inline or in its own block.
* @param {Object} props - Properties passed to component
* @returns {ReactElement}
*/
class Code extends React.Component<any, any, any> {
renderCode(): JSX.Element;
render(): JSX.Element | null;
}
namespace Code {
export const propTypes: {
/** The code within the component */
children: PropTypes.Requireable<string>;
/** CSS class names. */
className: PropTypes.Requireable<string>;
/** Style for the CopyButton */
copyButtonStyle: PropTypes.Requireable<string>;
/** Copy button displays `Copy` instead of icon */
copyButtonUsesTextLabel: PropTypes.Requireable<boolean>;
/** Adds a copy button to code examples */
hasCopyButton: PropTypes.Requireable<boolean>;
/** Apply syntax highlighting to the code */
isHighlighted: PropTypes.Requireable<boolean>;
/** Specify a language for the syntax highlighter */
language: PropTypes.Requireable<string>;
/** ouiStyle */
ouiStyle: PropTypes.Requireable<boolean>;
/** Whether or not the content should wrap */
shouldWrap: PropTypes.Requireable<boolean>;
/** Hook for automated JavaScript tests */
testSection: PropTypes.Requireable<string>;
/** How the code should be displayed */
type: PropTypes.Validator<string>;
};
export namespace defaultProps {
export const copyButtonUsesTextLabel: boolean;
}
}
import React from "react";
import PropTypes from "prop-types";
}
declare module "components/Code/Code.story" {
export {};
}
declare module "components/Code/example/index" {
var _default: {
examples: JSX.Element[];
}[];
export default _default;
}
declare module "components/CodeDiff/CodeDiff" {
export function CodeDiff({ borderLocation, className, header, newValue, oldValue, testSection, ...props }: any): any;
export namespace CodeDiff {
export namespace propTypes {
export const borderLocation: PropTypes.Requireable<(string | null | undefined)[]>;
export const className: PropTypes.Requireable<string>;
export const header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
export const newValue: PropTypes.Validator<any>;
export const oldValue: PropTypes.Validator<any>;
export const testSection: PropTypes.Requireable<string>;
}
export namespace defaultProps {
const borderLocation_1: string[];
export { borderLocation_1 as borderLocation };
export const compareMethod: string;
const header_1: string;
export { header_1 as header };
const testSection_1: string;
export { testSection_1 as testSection };
}
}
export default CodeDiff;
import PropTypes from "prop-types";
}
declare module "components/CodeDiff/index" {
export default CodeDiff;
import CodeDiff from "components/CodeDiff/CodeDiff";
}
declare module "utils/storybook-utils" {
/**
* @name StoryStateWrapper
* @description
* This HOC allows us to use React's useState hook within our Story (source: https://levelup.gitconnected.com/adding-state-to-storybook-in-react-c6744fda25b4).
* The initialValue or initialValues props are mutually exclusive.
* The prop initialValue can be used if only one piece of state is needed.
* Add an array of initialValues to return an array of state / setter arrays.
*
* @param {Object} props props from child component to be decorated
* @param {*} initialValue (optional)
* For uses where only one state / setter is needed, sets initial state value.
* @param {Array} initialValues (optional)
* For uses where multiple state / setters are needed,
* sets initial state values.
*
* @returns {ReactElement} Provided component decorated with state and setters
*/
export function StoryStateWrapper({ children, initialValue, initialValues }: any): any;
export namespace StoryStateWrapper {
export namespace propTypes {
export const initialValue: PropTypes.Requireable<any>;
export const initialValues: PropTypes.Requireable<any[]>;
}
export namespace defaultProps {
const initialValue_1: null;
export { initialValue_1 as initialValue };
const initialValues_1: null;
export { initialValues_1 as initialValues };
}
}
import PropTypes from "prop-types";
}
declare module "components/CodeDiff/CodeDiff.story" {
export {};
}
declare module "components/CopyButton/CopyButton.story" {
export {};
}
declare module "components/DatePicker/CalendarNavButton" {
export default CalendarNavButton;
function CalendarNavButton({ type }: {
type: any;
}): JSX.Element;
namespace CalendarNavButton {
export const propTypes: {
type: PropTypes.Requireable<string>;
};
}
import PropTypes from "prop-types";
}
declare module "components/Input/index" {
import React from "react";
interface InputProps {
/** CSS class names. */
className?: string;
/** The default value of the input used on initial render */
defaultValue?: string;
/** Includes search icon if true */
displayError?: boolean;
/** Whether or not to automatically focus this input */
focus?: boolean;
/** Whether or not to add a clear button to right of input */
hasClearButton?: boolean;
/** Disables spell checking when set to false */
hasSpellCheck?: boolean;
/** Id of the input to properly associate with the input's label */
id?: string;
/** Allows for prevention of input autocomplete suggestions */
isAutoCompleteEnabled?: boolean;
/** Prevents input from being modified and appears disabled */
isDisabled?: boolean;
/** Includes error if true */
isFilter?: boolean;
/** Adds an optional label if there is a label provided */