@sproutsocial/racine 13.8.0 → 14.0.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 14.0.1
+
+### Patch Changes
+
+- 32d0513a: Revert default set on `PartnerLogo.size` (should have no default)
+- 32d0513a: Revert a markup and styled component change on `Label` that broke the font family and styles used
+- 32d0513a: Fix `TypeDrawerCloseButtonProps` for `Drawer.CloseButton` to correctly extend `TypeButtonProps`
+
+## 14.0.0
+
+### Major Changes
+
+- be795a0b: **TYPESCRIPT IS HERE** 🎉
+
+  This release includes new support for Typescript, which now type-checks all of our code and provides new types and interfaces for each component. Currently, the types and type safety are similar to the Flow version of Racine, but we will be making incremental improvements over time.
+
+  Reach out in [#design-systems](https://sproutsocial.slack.com/archives/CTJV9GC8H) if you find an issue or have any feedback.
+
+  #### Breaking Changes
+
+  - We've restructured the component directories and renamed many files, so subdirectory imports are likely to break. However, everything that needs to be imported should be available in the root index file. Please let us know if this is not the case, and we can add what is needed.
+  - Previously deprecated flow type imports from subdirectories have been fully moved to a new file structure (ex: `__flow__/Toast` is now `__flow__/Toast/index.flow`) and we strongly encourage importing these from the root instead of the subdirectories to avoid possible future breaking changes if the files are moved again.
+
+  #### Notable differences from Flow
+
+  - Flow allowed inexact typing on components, but this is not the case for the typescript types. We've done our best to add the necessary extensions and props to each component type, but please let us know if you think any necessary properties are not included.
+  - In many cases where "any" was used in Flow (such as with styled components and React refs), Typescript may provide more accurate typing and potentially break current implementations.
+
+### Minor Changes
+
+- be795a0b: Upgrade csstype to latest
+
+### Patch Changes
+
+- be795a0b: Fixed `Button` styles to handle the `unstyled` appearance
+- e745b3c3: We've included an icons directory in the Racine build, providing more precise access to Racine's collection of icon SVGs.
+- be795a0b: Add eslint check to disallow @src imports
+- be795a0b: Fix popoutProps type on MenuButton
+- be795a0b: Fix typo in `TypeStyledComponentsCommonProps` for `forwardedAs` (previously `forwardAs`)
+
 ## 13.8.0
 
 ### Minor Changes

package/__flow__/Avatar/Avatar.flow.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+export type TypeAvatarProps = {
+  /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
+  appearance?: 'circle' | 'leaf',
+  /** The name of the user that the avatar represents */
+  name?: string,
+  /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
+  src?: string,
+  type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
+  variant?: 'dark' | 'light',
+  bg?: string,
+  color?: string,
+  size?: string,
+  ...
+};
+declare var Avatar: React.StatelessFunctionalComponent<TypeAvatarProps>;
+declare export default typeof Avatar;

package/__flow__/Avatar/index.flow.js

@@ -1,16 +1,2 @@
 // @flow
-
-export type TypeAvatarProps = {
-  /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
-  appearance?: 'circle' | 'leaf',
-  /** The name of the user that the avatar represents */
-  name: string,
-  /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
-  src?: string,
-  type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
-  variant?: 'dark' | 'light',
-  bg?: string,
-  color?: string,
-  size?: string,
-  ...
-};
+export * from "./Avatar.flow";

package/__flow__/Badge/Badge.flow.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react';
+import type { TypeIconName } from "../Icon/index.flow";
+export type TypeBadgeProps = {
+  children?: React.Node,
+  /** DEPRECATED: Use children instead of text */
+  text?: React.Node,
+  /** Size default is deprecated in favor of small and large */
+  size?: 'small' | 'large' | 'default',
+  badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral',
+  iconName?: TypeIconName,
+  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
+  tip?: React.Node,
+  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
+  type?: string,
+  ...
+};
+declare var Badge: React.StatelessFunctionalComponent<TypeBadgeProps>;
+declare export default typeof Badge;

package/__flow__/Badge/constants.flow.js

@@ -0,0 +1,15 @@
+// @flow
+
+type TypeLegacyBadgeColor = {|
+  color: string,
+  background: string,
+|};
+declare export var legacyBadgeColors: {|
+  primary: TypeLegacyBadgeColor,
+  secondary: TypeLegacyBadgeColor,
+  passive: TypeLegacyBadgeColor,
+  common: TypeLegacyBadgeColor,
+  approval: TypeLegacyBadgeColor,
+  default: TypeLegacyBadgeColor,
+  suggestion: TypeLegacyBadgeColor,
+|};

package/__flow__/Badge/index.flow.js

@@ -1,17 +1,3 @@
 // @flow
-import * as React from 'react';
-import type { TypeIconName } from "../Icon/index.flow";
-export type TypeBadgeProps = {
-  children?: React.Node,
-  /** DEPRECATED: Use children instead of text */
-  text?: React.Node,
-  /** Size default is deprecated in favor of small and large */
-  size?: 'small' | 'large' | 'default',
-  badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral',
-  iconName?: TypeIconName,
-  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
-  tip?: React.Node,
-  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
-  type?: string,
-  ...
-};
+export * from "./Badge.flow";
+export * from "./constants.flow";

package/__flow__/Banner/Banner.flow.js

@@ -0,0 +1,11 @@
+// @flow
+import * as React from 'react';
+export type EnumBannerType = 'success' | 'info' | 'error' | 'warning' | 'opportunity';
+export type TypeBannerProps = {
+  text: React.Node,
+  /** Type of banner. */
+  type?: EnumBannerType,
+  ...
+};
+declare var Banner: React.StatelessFunctionalComponent<TypeBannerProps>;
+declare export default typeof Banner;

package/__flow__/Banner/index.flow.js

@@ -1,9 +1,2 @@
 // @flow
-import * as React from 'react';
-export type EnumBannerType = 'success' | 'info' | 'error' | 'warning' | 'opportunity';
-export type TypeBannerProps = {
-  text: React.Node,
-  /** Type of banner. */
-  type?: EnumBannerType,
-  ...
-};
+export * from "./Banner.flow";

package/__flow__/Box/Box.flow.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { StyledComponent } from 'styled-components';
+import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+import type { TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
+import type { TypeTheme } from "../types/theme.flow";
+export type TypeContainerProps = $ReadOnly<{|
+  ...TypeStyledComponentsCommonProps,
+  ...TypeSystemCommonProps,
+  ...TypeSystemBorderProps,
+  ...TypeSystemLayoutProps,
+  ...TypeSystemPositionProps,
+  ...TypeSystemFlexboxProps,
+  ...TypeSystemGridProps,
+|}>;
+type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
+export type TypeBoxProps = {
+  ...React.ElementConfig<TypeBoxContainer>,
+  ...
+};
+declare var Box: React.AbstractComponent<TypeBoxProps, *>;
+declare export default typeof Box;

package/__flow__/Box/index.flow.js

@@ -1,7 +1,2 @@
 // @flow
-import * as React from 'react';
-import Container from "./styles";
-export type TypeBoxProps = $ReadOnly<{
-  ...React.ElementConfig<typeof Container>,
-  ...
-}>;
+export * from "./Box.flow";

package/__flow__/Breadcrumb/Breadcrumb.flow.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { TypeLinkProps } from "../Link/index.flow";
+import type { TypeWithDisplayName } from "../types/shared.flow";
+export type TypeBreadcrumbProps = {
+  children: React.Node,
+  /** Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb") */
+  ariaLabel: string,
+  /** optional */
+  overflow?: {
+    label: string,
+    menu: React.Node,
+    ...
+  },
+  ...
+};
+export type TypeBreadcrumbItemProps = TypeLinkProps;
+declare var BreadcrumbItem: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeBreadcrumbItemProps>>;
+declare class Breadcrumb extends React.Component<TypeBreadcrumbProps> {
+  static Item: typeof BreadcrumbItem
+}
+declare export default typeof Breadcrumb;

package/__flow__/Breadcrumb/index.flow.js

@@ -1,15 +1,2 @@
 // @flow
-import * as React from 'react';
-import Link from "../Link";
-export type TypeBreadcrumbProps = {
-  children: React.Node,
-  /** Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb") */
-  ariaLabel: string,
-  /** optional */
-  overflow?: {
-    label: string,
-    menu: React.Node,
-  },
-  ...
-};
-export type TypeBreadcrumbItemProps = React.ElementConfig<typeof Link>;
+export * from "./Breadcrumb.flow";

package/__flow__/Button/Button.flow.js

@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import { type StyledComponent } from 'styled-components';
+import type { TypeTheme } from "../types/theme.flow";
+import type { TypeSystemCommonProps, TypeSystemLayoutProps } from "../types/system-props.flow";
+export type TypeButtonProps = {
+  ...TypeSystemCommonProps,
+  ...TypeSystemLayoutProps,
+  /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
+  external?: boolean,
+  size?: 'large' | 'default',
+  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
+  appearance?: 'primary' | 'secondary' | 'pill' | 'destructive' | 'unstyled' | 'placeholder',
+  /** Set the button to display in its active state */
+  active?: boolean,
+  /** Disables user action and applies a disabled style on the button */
+  disabled?: boolean,
+  children: React.Node,
+  /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
+  href?: string,
+  /** Used to get a reference to the underlying button */
+  innerRef?: React.Ref<'button'>,
+  /** Action to perform when the button is clicked */
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
+  title?: string,
+  qa?: Object,
+  as?: any,
+  /** Label used to describe the button if the button does not have text within it */
+  ariaLabel?: string,
+  ...
+};
+declare export var Container: StyledComponent<any, TypeTheme, *>;
+declare var Button: React.StatelessFunctionalComponent<TypeButtonProps>;
+declare export default typeof Button;

package/__flow__/Button/index.flow.js

@@ -1,26 +1,2 @@
 // @flow
-import * as React from 'react';
-export type TypeButtonProps = {
-  /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
-  external?: boolean,
-  size?: 'large' | 'default',
-  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance?: 'primary' | 'secondary' | 'pill' | 'destructive' | 'unstyled' | 'placeholder',
-  /** Set the button to display in its active state */
-  active?: boolean,
-  /** Disables user action and applies a disabled style on the button */
-  disabled?: boolean,
-  children: React.Node,
-  /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
-  href?: string,
-  /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<'button'>,
-  /** Action to perform when the button is clicked */
-  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
-  title?: string,
-  qa?: Object,
-  as?: any,
-  /** Label used to describe the button if the button does not have text within it */
-  ariaLabel?: string,
-  ...
-};
+export * from "./Button.flow";

package/__flow__/Card/Card.flow.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react';
+import type { TypeButtonProps } from "../Button/index.flow";
+import type { TypeBoxProps } from "../Box/index.flow";
+type TypeChildrenlessButtonProps = {
+  ...TypeButtonProps,
+  children?: void | null,
+  ...
+};
+export type TypeCardProps = {
+  ...TypeBoxProps,
+  onClick?: () => void,
+  href?: string,
+  children: React.Node,
+  /** Label describing the action that will be performed when the user interacts with the card */
+  ariaLabel: string,
+  buttonProps?: TypeChildrenlessButtonProps,
+  ...
+};
+declare var Card: React.StatelessFunctionalComponent<TypeCardProps>;
+declare export default typeof Card;

package/__flow__/Card/index.flow.js

@@ -1,19 +1,2 @@
 // @flow
-import * as React from 'react';
-import type { TypeButtonProps } from "../Button/index.flow";
-import { Container } from "./styles";
-type TypeChildrenlessButtonProps = {
-  ...TypeButtonProps,
-  children?: void | null,
-  ...
-};
-export type TypeCardProps = {
-  ...React.ElementConfig<typeof Container>,
-  onClick?: () => void,
-  href?: string,
-  children: React.Node,
-  /** Label describing the action that will be performed when the user interacts with the card */
-  ariaLabel: string,
-  buttonProps?: TypeChildrenlessButtonProps,
-  ...
-};
+export * from "./Card.flow";

package/__flow__/CharacterCounter/CharacterCounter.flow.js

@@ -0,0 +1,12 @@
+// @flow
+import * as React from 'react';
+export type TypeCharacterCounterProps = {
+  /** Current value of relative input/textarea */
+  currentValue: number,
+  /** Max amount of characters for input/textarea */
+  maxValue: number,
+  size?: 'default' | 'mini',
+  ...
+};
+declare var CharacterCounter: React.ComponentType<TypeCharacterCounterProps>;
+declare export default typeof CharacterCounter;

package/__flow__/CharacterCounter/index.flow.js

@@ -1,10 +1,2 @@
 // @flow
-
-export type TypeCharacterCounterProps = {
-  /** Current value of relative input/textarea */
-  currentValue: number,
-  /** Max amount of characters for input/textarea */
-  maxValue: number,
-  size: 'default' | 'mini',
-  ...
-};
+export * from "./CharacterCounter.flow";

package/__flow__/ChartLegend/ChartLegend.flow.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+export type TypeChartLegendTheme = 'compare' | 'contrast' | 'extended';
+export type TypeChartLegendProps = {
+  /** Inline or stacked y plots */
+  stacked?: boolean,
+  theme?: TypeChartLegendTheme,
+  /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
+  legendLabels: {
+    name: string,
+    color?: string,
+    ...
+  }[],
+  qa?: Object,
+  ...
+};
+declare var ChartLegend: React.StatelessFunctionalComponent<TypeChartLegendProps>;
+declare export default typeof ChartLegend;

package/__flow__/ChartLegend/index.flow.js

@@ -1,14 +1,2 @@
 // @flow
-
-export type TypeChartLegendProps = {
-  /** Inline or stacked y plots */
-  stacked?: boolean,
-  theme?: 'compare' | 'contrast' | 'extended',
-  /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
-  legendLabels: {
-    name: string,
-    color?: string,
-  }[],
-  qa?: Object,
-  ...
-};
+export * from "./ChartLegend.flow";

package/__flow__/Checkbox/Checkbox.flow.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react';
+export type TypeCheckboxProps = {
+  /** ID of the form element, should match the "for" value of the associated label */
+  id: string,
+  value?: string,
+  name?: string,
+  /** Label text to display next to the checkbox */
+  label?: string,
+  /** Label used to describe the input (if not used with an accompanying visual label) */
+  ariaLabel?: string,
+  labelProps?: Object,
+  checked?: boolean,
+  indeterminate?: boolean,
+  disabled?: boolean,
+  onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
+  appearance?: 'pill' | 'default',
+  qa?: Object,
+  tabIndex?: string | number,
+  inputProps?: Object,
+  ...
+};
+declare var Checkbox: React.StatelessFunctionalComponent<TypeCheckboxProps>;
+declare export default typeof Checkbox;

package/__flow__/Checkbox/index.flow.js

@@ -1,22 +1,2 @@
 // @flow
-
-export type TypeCheckboxProps = {
-  /** ID of the form element, should match the "for" value of the associated label */
-  id: string,
-  value?: string,
-  name?: string,
-  /** Label text to display next to the checkbox */
-  label?: string,
-  /** Label used to describe the input (if not used with an accompanying visual label) */
-  ariaLabel?: string,
-  labelProps?: Object,
-  checked?: boolean,
-  indeterminate?: boolean,
-  disabled?: boolean,
-  onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
-  appearance?: 'pill' | 'default',
-  qa?: Object,
-  tabIndex?: string | number,
-  inputProps?: Object,
-  ...
-};
+export * from "./Checkbox.flow";

package/__flow__/Collapsible/Collapsible.flow.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react';
+import type { TypeWithDisplayName } from "../types/shared.flow";
+export type TypeCollapsibleProps = {
+  isOpen: boolean,
+  children: React.Node,
+  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
+  offset?: number,
+  collapsedHeight?: number,
+  openHeight?: number,
+  ...
+};
+declare var Trigger: TypeWithDisplayName<React.StatelessFunctionalComponent<{...}>>;
+declare var Panel: TypeWithDisplayName<React.StatelessFunctionalComponent<{...}>>;
+declare class Collapsible extends React.Component<TypeCollapsibleProps> {
+  static Trigger: typeof Trigger,
+  static Panel: typeof Panel,
+}
+declare export default typeof Collapsible;

package/__flow__/Collapsible/index.flow.js

@@ -1,11 +1,2 @@
 // @flow
-import * as React from 'react';
-export type TypeCollapsibleProps = {
-  isOpen: boolean,
-  children: React.Node,
-  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
-  offset?: number,
-  collapsedHeight?: number,
-  openHeight?: number,
-  ...
-};
+export * from "./Collapsible.flow";

package/__flow__/DatePicker/DateRangePicker/DateRangePicker.flow.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+import { type TypeCommonDatePickerProps } from "../common.flow";
+export type EnumFocusedInput = null | 'startDate' | 'endDate';
+export type TypeDateRangePickerProps = {
+  startDate: ?moment$Moment,
+  endDate: ?moment$Moment,
+  onDatesChange: ({|
+    startDate: moment$Moment,
+    endDate: moment$Moment,
+  |}) => void,
+  focusedInput: EnumFocusedInput,
+  onFocusChange: (EnumFocusedInput) => void,
+  ...TypeCommonDatePickerProps,
+  ...
+};
+declare var DateRangePicker: React.StatelessFunctionalComponent<TypeDateRangePickerProps>;
+declare export default typeof DateRangePicker;

package/__flow__/DatePicker/DateRangePicker/StatefulDateRangePicker.flow.js

@@ -0,0 +1,11 @@
+// @flow
+import * as React from 'react';
+import type { TypeDateRangePickerProps } from "./DateRangePicker.flow";
+export type TypeStatefulDateRangePickerProps = {
+  ...TypeDateRangePickerProps,
+  onDatesChange?: $PropertyType<TypeDateRangePickerProps, 'onDatesChange'>,
+  focusedInput?: $PropertyType<TypeDateRangePickerProps, 'focusedInput'>,
+  onFocusChange?: $PropertyType<TypeDateRangePickerProps, 'onFocusChange'>,
+  ...
+};
+declare export var StatefulDateRangePicker: React.StatelessFunctionalComponent<TypeStatefulDateRangePickerProps>;

package/__flow__/DatePicker/DateRangePicker/index.flow.js

@@ -0,0 +1,3 @@
+// @flow
+export * from "./DateRangePicker.flow";
+export * from "./StatefulDateRangePicker.flow";

package/__flow__/DatePicker/SingleDatePicker/SingleDatePicker.flow.js

@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+import { type TypeCommonDatePickerProps } from "../common.flow";
+export type TypeSingleDatePickerProps = {
+  date: ?moment$Moment,
+  onDateChange: (date: moment$Moment) => void,
+  focused?: boolean,
+  onFocusChange?: ({
+    focused: boolean,
+    ...
+  }) => void,
+  ...TypeCommonDatePickerProps,
+  ...
+};
+declare var SingleDatePicker: React.StatelessFunctionalComponent<TypeSingleDatePickerProps>;
+declare export default typeof SingleDatePicker;

package/__flow__/DatePicker/SingleDatePicker/StatefulSingleDatePicker.flow.js

@@ -0,0 +1,9 @@
+// @flow
+import * as React from 'react';
+import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
+export type TypeStatefulSingleDatePickerProps = {
+  ...TypeSingleDatePickerProps,
+  onDateChange?: (date: moment$Moment) => void,
+  ...
+};
+declare export var StatefulSingleDatePicker: React.StatelessFunctionalComponent<TypeStatefulSingleDatePickerProps>;

package/__flow__/DatePicker/SingleDatePicker/index.flow.js

@@ -0,0 +1,3 @@
+// @flow
+export * from "./SingleDatePicker.flow";
+export * from "./StatefulSingleDatePicker.flow";

package/__flow__/DatePicker/common.flow.js

@@ -13,7 +13,8 @@ export type TypeCommonDatePickerProps = {|
   minimumNights?: number,
   phrases?: {
     [phrase: string]: Node | (({
-      date: moment$Moment
+      date: moment$Moment,
+      ...
     }) => Node),
     ...
   },

package/__flow__/DatePicker/index.flow.js

@@ -0,0 +1,6 @@
+// @flow
+export { default as SingleDatePicker } from "./SingleDatePicker/index.flow";
+export { default as DateRangePicker } from "./DateRangePicker/index.flow";
+export * from "./common.flow";
+export * from "./DateRangePicker/index.flow";
+export * from "./SingleDatePicker/index.flow";

package/__flow__/Drawer/Drawer.flow.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import type { TypeWithDisplayName } from "../types/shared.flow";
+export type TypeDrawerContext = $Shape<{
+  /** Callback for close button */
+  onClose: () => any,
+  /** aria-label for drawer close button */
+  closeButtonLabel: string,
+  ...
+}>;
+export type TypeDrawerCloseButtonProps = {
+  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior. */
+  render?: (TypeDrawerContext) => React.Node,
+  children?: React.Node,
+  ...
+};
+export type TypeDrawerHeaderProps = {
+  title?: string,
+  children?: React.Node,
+  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the header. */
+  render?: (TypeDrawerContext) => React.Node,
+  ...
+};
+export type TypeDrawerProps = {
+  children: React.Node,
+  /** Label for the close button. Usually this should be "Close" */
+  closeButtonLabel: string,
+  /** Whether the drawer slides in from the left or right side of the screen */
+  direction?: 'left' | 'right',
+  /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
+  disableCloseOnClickOutside?: boolean,
+  id: string,
+  isOpen: boolean,
+  offset?: number,
+  onClose: () => void,
+  zIndex?: number,
+  closeTargets?: Array<Element>,
+  ...
+};
+declare class DrawerContainer extends React.Component<TypeDrawerProps> {
+  static Header: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeDrawerHeaderProps>>,
+  static Content: TypeWithDisplayName<React.StatelessFunctionalComponent<{
+    children?: React.Node,
+    ...
+  }>>,
+  static CloseButton: TypeWithDisplayName<React.StatelessFunctionalComponent<TypeDrawerCloseButtonProps>>,
+}
+declare export default typeof DrawerContainer;