@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/Menu/Menu.flow.js

@@ -0,0 +1,114 @@
+// @flow
+import * as React from 'react';
+import type { StyledComponent } from 'styled-components';
+import Box from "../Box/index.flow";
+import Button from "../Button/index.flow";
+import Popout from "../Popout/index.flow";
+import type { TypeInputProps } from "../Input/index.flow";
+import type { EnumPlacements } from "../Popout/index.flow";
+import type { TypeTheme } from "../types/theme.flow";
+import type { TypeWithDisplayName } from "../types/shared.flow";
+import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+import { MENU_ITEM_ROLES, MENU_ROLES } from "./utils/constants.flow.js";
+export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
+export type TypeMenuItemRoles = $Values<typeof MENU_ITEM_ROLES>;
+export type TypeMenuState = {|
+  selectionIndex: number,
+  filterQuery: string,
+  filteredItems: ?number[],
+  isFilterInputFocused: boolean,
+|};
+export type TypeMenuSharedProps = {|
+  multiselect?: boolean,
+  onChange?: (val: string) => void,
+  role?: TypeMenuRoles,
+  value?: ?string | string[],
+|};
+export type TypeMenuContext = {|
+  ...TypeMenuSharedProps,
+  menuRef: {|
+    current: HTMLDivElement | null
+  |},
+  setState: ($Shape<TypeMenuState>) => void,
+  state: TypeMenuState,
+  selectCallbacks: {|
+    current: (?(any) => void)[]
+  |},
+|};
+export type TypeMenuProps = {
+  ...$Exact<React.ElementConfig<typeof Box>>,
+  ...TypeMenuSharedProps,
+  children?: React.Node,
+  innerRef?: React.Ref<any>,
+  ...
+};
+export type TypeMenuItemProps = {
+  id?: string,
+  index?: number,
+  label?: string,
+  children?: React.Node,
+  active?: boolean,
+  selected?: boolean,
+  disabled?: boolean,
+  indeterminate?: boolean,
+  value?: string,
+  onClick?: (SyntheticEvent<HTMLButtonElement>) => void,
+  onKeyPress?: (SyntheticKeyboardEvent<HTMLButtonElement>) => void,
+  role?: TypeMenuItemRoles,
+  elemAfter?: React.Node,
+  elemBefore?: React.Node,
+  as?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
+  'data-qa-menu-item'?: string,
+  alignItems?: string,
+  ...
+};
+export type TypeMenuGroupProps = {
+  children: React.Node,
+  /** If provided, a visible title will be rendered for the group. */
+  title?: React.Node,
+  titleAs?: $PropertyType<TypeStyledComponentsCommonProps, 'as'>,
+  /** Use the flush appearance if you're using the menu outside of a popout */
+  appearance?: 'default' | 'flush',
+  disabled?: boolean,
+  ...
+};
+export type TypeMenuButtonContext = {|
+  closeOnItemClick?: boolean,
+  closePopout?: () => any,
+|};
+export type TypeMenuButtonProps = {
+  ...$Exact<React.ElementConfig<typeof Button>>,
+  ...TypeMenuButtonContext,
+  id?: string,
+  'aria-labelledby'?: string,
+  'aria-label'?: string,
+  content: React.Node,
+  popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
+  placement?: EnumPlacements,
+  ...
+};
+export type TypeMenuItemContainerProps = {
+  ...TypeMenuItemProps,
+  interactive: boolean,
+  isCheckboxOrRadio: boolean,
+  hidden: ?boolean,
+  ...
+};
+declare export var MenuGroup: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuGroupProps>>;
+declare export var MenuItem: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
+declare export var MenuCheckbox: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
+declare export var MenuRadio: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeMenuItemProps>>;
+declare export var MenuDivider: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>;
+declare var MenuFilterInput: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeInputProps>>;
+declare class Menu extends React.Component<TypeMenuProps> {
+  static Group: typeof MenuGroup,
+  static Item: typeof MenuItem,
+  static Checkbox: typeof MenuCheckbox,
+  static Radio: typeof MenuRadio,
+  static Divider: typeof MenuDivider,
+  static FilterInput: typeof MenuFilterInput,
+}
+declare export var MenuButton: React.StatelessFunctionalComponent<TypeMenuButtonProps>;
+declare export var MenuButtonContext: React.Context<TypeMenuButtonContext>;
+declare export var MenuItemContainer: StyledComponent<TypeMenuItemContainerProps, TypeTheme, typeof Box>;
+declare export default typeof Menu;

package/__flow__/Menu/index.flow.js

@@ -1,95 +1,3 @@
 // @flow
-import * as React from 'react';
-import Box from "../Box";
-import Button from "../Button";
-import Popout from "../Popout";
-import type { EnumPlacements } from "../Popout/index.flow";
-import { MENU_ITEM_ROLES, MENU_ROLES } from "./constants";
-import type { TypeListboxProps as TypeListboxProps2, TypeListboxButtonProps as TypeListboxButtonProps2 } from "../Listbox/index.flow";
-
-/**
- * @deprecated Use TypeListboxProps from root instead
- */
-export type TypeListboxProps = TypeListboxProps2;
-
-/**
- * @deprecated Use TypeListboxButtonProps from root instead
- */
-export type TypeListboxButtonProps = TypeListboxButtonProps2;
-export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
-export type TypeMenuItemRoles = $Values<typeof MENU_ITEM_ROLES>;
-export type TypeMenuState = {|
-  selectionIndex: number,
-  filterQuery: string,
-  filteredItems: ?number[],
-  isFilterInputFocused: boolean,
-|};
-export type TypeMenuSharedProps = {|
-  multiselect?: boolean,
-  onChange?: (val: string) => void,
-  role?: TypeMenuRoles,
-  value?: ?string | string[],
-|};
-export type TypeMenuContext = {|
-  ...TypeMenuSharedProps,
-  menuRef: {|
-    current: HTMLDivElement | null
-  |},
-  setState: ($Shape<TypeMenuState>) => void,
-  state: TypeMenuState,
-  selectCallbacks: {|
-    current: (?(any) => void)[]
-  |},
-|};
-export type TypeMenuProps = {
-  ...$Exact<React.ElementConfig<typeof Box>>,
-  ...TypeMenuSharedProps,
-  children?: React.Node,
-  innerRef?: React.Ref<any>,
-  ...
-};
-export type TypeMenuItemProps = {
-  id?: string,
-  index?: number,
-  label?: string,
-  children?: React.Node,
-  active?: boolean,
-  selected?: boolean,
-  disabled?: boolean,
-  indeterminate?: boolean,
-  value?: string,
-  onClick?: (SyntheticEvent<HTMLButtonElement>) => void,
-  onKeyPress?: (SyntheticKeyboardEvent<HTMLButtonElement>) => void,
-  role?: TypeMenuItemRoles,
-  elemAfter?: React.Node,
-  elemBefore?: React.Node,
-  as?: string,
-  'data-qa-menu-item'?: string,
-  alignItems?: string,
-  ...
-};
-export type TypeMenuGroupProps = {
-  children: React.Node,
-  /** If provided, a visible title will be rendered for the group. */
-  title?: React.Node,
-  titleAs?: string,
-  /** Use the flush appearance if you're using the menu outside of a popout */
-  appearance?: 'default' | 'flush',
-  disabled?: boolean,
-  ...
-};
-export type TypeMenuButtonContext = {|
-  closeOnItemClick?: boolean,
-  closePopout?: () => any,
-|};
-export type TypeMenuButtonProps = {
-  ...$Exact<React.ElementConfig<typeof Button>>,
-  ...TypeMenuButtonContext,
-  id?: string,
-  'aria-labelledby'?: string,
-  'aria-label'?: string,
-  content: React.Node,
-  popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
-  placement?: EnumPlacements,
-  ...
-};
+export * from "./Menu.flow";
+export * from "./utils/constants.flow";

package/__flow__/Menu/utils/constants.flow.js

@@ -0,0 +1,16 @@
+// @flow
+
+export const MENU_ROLES = Object.freeze({
+  MENU: 'menu',
+  LIST: 'list',
+  LISTBOX: 'listbox'
+});
+export const MENU_ITEM_ROLES = Object.freeze({
+  MENUITEM: 'menuitem',
+  LISTITEM: 'listitem',
+  OPTION: 'option',
+  RADIO: 'menuitemradio',
+  CHECKBOX: 'menuitemcheckbox'
+});
+export type TypeMenuRoles = $Values<typeof MENU_ROLES>;
+export type TypeMenuItemRoles = $Values<typeof MENU_ITEM_ROLES>;

package/__flow__/Message/Message.flow.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import type { TypeAvatarProps } from "../Avatar/index.flow";
+import type { TypeButtonProps } from "../Button/index.flow";
+import type { TypeCheckboxProps } from "../Checkbox/index.flow";
+import type { TypeWithDisplayName } from "../types/shared.flow";
+export const MESSAGE_DENSITIES = {
+  COMPACT: 'compact',
+  // Compact is deprecated. New applications should use condensed instead.
+  CONDENSED: 'condensed',
+  SMALL: 'small',
+  LARGE: 'large'
+};
+export type EnumDensities = $Values<typeof MESSAGE_DENSITIES>;
+export type TypeMessageProps = {
+  /** Condensed, small, or large. */
+  density?: EnumDensities,
+  children: React.ChildrenArray<React.Element<any> | null>,
+  innerRef?: React.Ref<'div'>,
+  borderColor?: string,
+  // seeds borderColor tokens (enum when flow types are available)
+  bg?: string,
+  // seeds color tokens (enum when flow types are available)
+  indentContent?: boolean,
+  qa?: Object,
+  ...
+};
+
+// Using `Object.freeze` on MESSAGE_DENSITIES causes breaking type changes, but this is needed for typing Message.DENSITIES
+// This should be improved in the future during a major version bump and Message refactor
+const MESSAGE_DENSITIES_FROZEN = Object.freeze(MESSAGE_DENSITIES);
+declare class Message extends React.Component<TypeMessageProps> {
+  static Body: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>,
+  static Header: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>,
+  static Footer: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>,
+  static Meta: TypeWithDisplayName<React.StatelessFunctionalComponent<any>>,
+  static Button: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeButtonProps>>,
+  static Avatar: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeAvatarProps>>,
+  static Checkbox: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeCheckboxProps>>,
+  static Context: React.Context<{|
+    density: EnumDensities,
+    borderColor: string,
+    bg: string,
+    indentContent: boolean,
+  |}>,
+  static DENSITIES: typeof MESSAGE_DENSITIES_FROZEN,
+}
+declare export default typeof Message;

package/__flow__/Message/index.flow.js

@@ -1,17 +1,2 @@
 // @flow
-import * as React from 'react';
-import { MESSAGE_DENSITIES } from "./constants";
-export type EnumDensities = $Values<typeof MESSAGE_DENSITIES>;
-export type TypeMessageProps = {
-  /** Condensed, small, or large. */
-  density?: EnumDensities,
-  children: React.ChildrenArray<React.Element<any> | null>,
-  innerRef?: React.Ref<'div'>,
-  borderColor?: string,
-  // seeds borderColor tokens (enum when flow types are available)
-  bg?: string,
-  // seeds color tokens (enum when flow types are available)
-  indentContent?: boolean,
-  qa?: Object,
-  ...
-};
+export * from "./Message.flow";

package/__flow__/Modal/Modal.flow.js

@@ -0,0 +1,59 @@
+// @flow
+import * as React from 'react';
+import Box from "../Box/index.flow";
+import type { TypeButtonProps } from "../Button/index.flow";
+import type { TypeWithDisplayName } from "../types/shared.flow";
+export type TypeModalCloseButtonProps = {
+  ...TypeButtonProps,
+  children?: void | null,
+  ...
+};
+export type TypeModalHeaderProps = {
+  title?: string,
+  subtitle?: string,
+  /** Passing children will override the default modal header */
+  children?: React.Node,
+  /** If you're rendering a custom header, you can use this prop to add a bottom border */
+  bordered?: boolean,
+  ...
+};
+export type TypeModalFooterProps = {
+  bg?: string,
+  children: React.Node,
+  ...
+};
+export type TypeModalContentProps = {
+  ...React.ElementProps<typeof Box>,
+  children?: React.Node,
+  ...
+};
+export type TypeModalProps = {
+  /** section of app to aria hide for the modal */
+  appElementSelector?: string,
+  /** trigger to open or close the modal */
+  isOpen: boolean,
+  /** label for screen readers to announce the modal */
+  label: string,
+  /** body content of the modal */
+  children: React.Node,
+  /** callback for close */
+  onClose?: () => any,
+  /** aria-label for modal X */
+  closeButtonLabel: string,
+  /** Controls the z-index CSS property */
+  zIndex?: number,
+  /** The max width of the modal container */
+  width?: string | number,
+  ...
+};
+declare class Modal extends React.Component<TypeModalProps> {
+  static Header: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeModalHeaderProps>>,
+  static Footer: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeModalFooterProps>>,
+  static Content: TypeWithDisplayName<React.AbstractComponent<TypeModalContentProps, *>>,
+  static CloseButton: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeModalCloseButtonProps>>,
+  static defaultProps: {|
+    width: string,
+    zIndex: number,
+  |},
+}
+declare export default typeof Modal;

package/__flow__/Modal/index.flow.js

@@ -1,46 +1,2 @@
 // @flow
-import * as React from 'react';
-import Box from "../Box";
-import type { TypeButtonProps } from "../Button/index.flow";
-export type TypeModalCloseButtonProps = {
-  ...TypeButtonProps,
-  children?: void | null,
-  ...
-};
-export type TypeModalHeaderProps = {
-  title?: string,
-  subtitle?: string,
-  /** Passing children will override the default modal header */
-  children?: React.Node,
-  /** If you're rendering a custom header, you can use this prop to add a bottom border */
-  bordered?: boolean,
-  ...
-};
-export type TypeModalFooterProps = {
-  bg?: string,
-  children: React.Node,
-  ...
-};
-export type TypeModalContentProps = React.ElementProps<typeof Box> & {
-  children?: React.Node,
-  ...
-};
-export type TypeModalProps = {
-  /** section of app to aria hide for the modal */
-  appElementSelector?: string,
-  /** trigger to open or close the modal */
-  isOpen: boolean,
-  /** label for screen readers to announce the modal */
-  label: string,
-  /** body content of the modal */
-  children: React.Node,
-  /** callback for close */
-  onClose?: () => any,
-  /** aria-label for modal X */
-  closeButtonLabel: string,
-  /** Controls the z-index CSS property */
-  zIndex: number,
-  /** The max width of the modal container */
-  width: string | number,
-  ...
-};
+export * from "./Modal.flow";

package/__flow__/Numeral/Numeral.flow.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react';
+export type EnumNumeralFormat = 'decimal' | 'currency' | 'percent';
+export type TypeNumeralProps = {
+  /** The number to be formatted */
+  number?: ?number,
+  /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+  locale?: string,
+  /* The number formatting style to use */
+  format?: EnumNumeralFormat,
+  /** The currency format to use when formatting currency */
+  currency?: string,
+  /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
+  abbreviate?: boolean | number,
+  /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
+  precision?: number | 'none',
+  qa?: Object,
+  ...
+};
+declare var Numeral: React.StatelessFunctionalComponent<TypeNumeralProps>;
+declare export default typeof Numeral;

package/__flow__/Numeral/index.flow.js

@@ -1,19 +1,2 @@
 // @flow
-
-export type EnumNumeralFormat = 'decimal' | 'currency' | 'percent';
-export type TypeNumeralProps = {
-  /** The number to be formatted */
-  number?: ?number,
-  /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
-  locale?: string,
-  /* The number formatting style to use */
-  format?: EnumNumeralFormat,
-  /** The currency format to use when formatting currency */
-  currency?: string,
-  /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
-  abbreviate?: boolean | number,
-  /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
-  precision?: number | 'none',
-  qa?: Object,
-  ...
-};
+export * from "./Numeral.flow";

package/__flow__/OverflowList/OverflowList.flow.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { TypeContainerProps } from "../Box/index.flow";
+export type TypeVirtualizedListProps = {|
+  items: Array<*>,
+  ItemComponent: React.ComponentType<*>,
+  getItemProps: (*) => *,
+  itemWrapperProps?: TypeContainerProps,
+  containerProps?: TypeContainerProps,
+|};
+export type TypeOverflowListProps = {|
+  height: string,
+  width: string,
+  items?: Array<*>,
+  children?: React.Node,
+  ItemComponent?: React.ComponentType<*>,
+  getItemProps?: (*) => *,
+  itemWrapperProps?: TypeContainerProps,
+  containerProps?: TypeContainerProps,
+|};
+declare var OverflowList: React.StatelessFunctionalComponent<TypeOverflowListProps>;
+declare export default typeof OverflowList;

package/__flow__/OverflowList/index.flow.js

@@ -1,20 +1,2 @@
 // @flow
-import * as React from 'react';
-import type { TypeContainerProps } from "../Box/styles";
-export type TypeVirtualizedListProps = {|
-  items: Array<*>,
-  ItemComponent: React.ComponentType<*>,
-  getItemProps: (*) => *,
-  itemWrapperProps?: TypeContainerProps,
-  containerProps?: TypeContainerProps,
-|};
-export type TypeOverflowListProps = {|
-  height: string,
-  width: string,
-  items?: Array<*>,
-  children?: React.Node,
-  ItemComponent?: React.ComponentType<*>,
-  getItemProps?: (*) => *,
-  itemWrapperProps?: TypeContainerProps,
-  containerProps?: TypeContainerProps,
-|};
+export * from "./OverflowList.flow";

package/__flow__/PartnerLogo/PartnerLogo.flow.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { TypePartnerNames } from "./TypePartnerNames.flow";
+export type TypePartnerLogoProps = {
+  /** The name of the partner whose logo you want to render. */
+  partnerName: TypePartnerNames,
+  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
+  backgroundType?: 'dark' | 'light',
+  logoType?: 'wordmark' | 'lockup',
+  height?: string,
+  width?: string,
+  size?: 'mini' // 12x12
+  | 'small' // 16x16
+  | 'medium' // 24x24
+  | 'large' // 32x32
+  | 'jumbo',
+
+    // 64x64
+  ...
+};
+declare var PartnerLogo: React.StatelessFunctionalComponent<TypePartnerLogoProps>;
+declare export default typeof PartnerLogo;

package/__flow__/PartnerLogo/index.flow.js

@@ -1,19 +1,3 @@
 // @flow
-import type { TypePartnerNames } from "./TypePartnerNames";
-export type TypePartnerLogoProps = {
-  /** The name of the partner whose logo you want to render. */
-  partnerName: TypePartnerNames,
-  /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
-  backgroundType?: 'dark' | 'light',
-  logoType?: 'wordmark' | 'lockup',
-  height?: string,
-  width?: string,
-  size?: 'mini' // 12x12
-  | 'small' // 16x16
-  | 'medium' // 24x24
-  | 'large' // 32x32
-  | 'jumbo',
-
-    // 64x64
-  ...
-};
+export * from "./PartnerLogo.flow";
+export * from "./TypePartnerNames.flow";

package/__flow__/Popout/Popout.flow.js

@@ -0,0 +1,98 @@
+// @flow
+import * as React from 'react';
+import type { PopperProps } from 'react-popper';
+import type { TypeBoxProps } from "../Box/index.flow";
+import type { TypeWithDisplayName } from "../types/shared.flow";
+
+// Seeds docs can't parse $Keys<typeof placements> yet
+export type EnumPlacements = 'auto' | 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'right-start' | 'bottom-start' | 'left-start' | 'top-end' | 'right-end' | 'bottom-end' | 'left-end';
+export type TypeFocusLockProps = {|
+  disabled?: boolean,
+  returnFocus?: boolean | {|
+    preventScroll?: boolean
+  |},
+  persistentFocus?: boolean,
+  autoFocus?: boolean,
+  noFocusGuards?: boolean | 'tail',
+  group?: string,
+  className?: string,
+  onActivation?: (node: HTMLElement) => void,
+  onDeactivation?: (node: HTMLElement) => void,
+  as?: string | React.Element<any>,
+  lockProps?: any,
+  ref?: any,
+  whiteList?: (activeElement: HTMLElement) => boolean,
+  shards?: Array<any>,
+  children?: React.Node,
+|};
+export type TypePopoutProps = {
+  /**
+   * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
+   */
+  isOpen?: boolean,
+  /**
+   * If you use the isOpen prop you will need to pass a handler to change the state of the popout
+   */
+  setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void,
+  /**
+   * The content to be shown in the popout. If there is no content, just the children are rendered
+   */
+  content: ?React.Element<any> | ?(opts: {
+    hide: () => void,
+    ...
+  }) => React.Element<any>,
+  /**
+   * The content that the popout should be attached to
+   */
+  children: React.Element<any> | ((opts: {
+    ref: (React.ElementRef<any> | HTMLElement) => void,
+    toggle: () => void,
+    show: () => void,
+    hide: () => void,
+    ariaProps: Object,
+    ...
+  }) => React.Node),
+  /** How the popped-out content should be placed, in relationship to the children */
+  placement?: EnumPlacements,
+  /**
+   * Should the popped-out content inherit its width from the children?
+   * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
+   */
+  fullWidth?: boolean,
+  /**
+   *  When the popout has opened, should we focus on its content?
+   *  Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.
+   *  Upon closing the popout, focus will be returned to the popout's target.
+   *  If nothing within your popout's content is focusable, this prop will do nothing.
+   */
+  focusOnContent?: boolean,
+  qa?: {
+    [string]: string,
+    ...
+  },
+  zIndex?: number,
+  /**
+   * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation
+   */
+  popperProps?: $Shape<PopperProps>,
+  onClose?: () => void,
+  onOpen?: () => void,
+  /**
+   * And optional callback to receive the scheduleUpdate function.
+   * Use the function to recalculate the popout position in relation to the contents.
+   */
+  scheduleUpdateRef?: (() => void) => void,
+  /**
+   * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree
+   */
+  appendToBody?: boolean,
+  /**
+   * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api
+   */
+  focusLockProps?: TypeFocusLockProps,
+  ...
+};
+declare class Popout extends React.Component<TypePopoutProps> {
+  static Content: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeBoxProps>>
+}
+declare export default typeof Popout;