baseui 11.0.1 → 11.1.0

package/pin-code/index.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+import { SIZE, InputProps, InputOverrides, STATE_CHANGE_TYPE } from '../input';
 
-import {SIZE, InputProps, InputOverrides, STATE_CHANGE_TYPE} from '../input';
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
-export {SIZE};
+export { SIZE };
 
 export type PinCodeOverrides = InputOverrides & {
   Root?: Override<any>;
@@ -18,10 +17,7 @@ export type PinCodeProps = Omit<InputProps, 'onChange' | 'value'> & {
   values: string[];
   manageFocus?: boolean;
   mask?: boolean | string;
-  onChange: (args: {
-    values: string[];
-    event: React.FormEvent<HTMLInputElement>;
-  }) => void;
+  onChange: (args: { values: string[]; event: React.FormEvent<HTMLInputElement> }) => void;
 };
 
 export type State = {
@@ -32,19 +28,16 @@ export interface StatefulContainerProps {
   children?: React.ReactNode;
   initialState?: State;
   stateReducer?: (
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
     nextState: State,
-    currentState: State,
+    currentState: State
   ) => State;
-  onChange?: (args: {
-    values: string[];
-    event: React.FormEvent<HTMLInputElement>;
-  }) => void;
+  onChange?: (args: { values: string[]; event: React.FormEvent<HTMLInputElement> }) => void;
 }
 
 export type StatefulPinCodeProps = Partial<PinCodeProps> &
-  StatefulContainerProps & {children?: never; overrides?: PinCodeOverrides};
+  StatefulContainerProps & { children?: never; overrides?: PinCodeOverrides };
 
-export const StatefulPinCode: React.FC<StatefulPinCodeProps>;
-export const StatefulContainer: React.FC<StatefulContainerProps>;
+export declare const StatefulPinCode: React.FC<StatefulPinCodeProps>;
+export declare const StatefulContainer: React.FC<StatefulContainerProps>;
 export class PinCode extends React.Component<PinCodeProps> {}

package/popover/index.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
-import {NormalizedOffsets, PopperDataObject, TetherPlacement} from '../layer';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+import { NormalizedOffsets, PopperDataObject, TetherPlacement } from '../layer';
 
-export interface ACCESSIBILITY_TYPE {
+export declare const ACCESSIBILITY_TYPE: {
   none: 'none';
   menu: 'menu';
   tooltip: 'tooltip';
-}
-export interface PLACEMENT {
+};
+export declare const PLACEMENT: {
   auto: 'auto';
   topLeft: 'topLeft';
   top: 'top';
@@ -22,27 +22,28 @@ export interface PLACEMENT {
   leftBottom: 'leftBottom';
   left: 'left';
   leftTop: 'leftTop';
-}
-export interface TRIGGER_TYPE {
+};
+export declare const TRIGGER_TYPE: {
   click: 'click';
   hover: 'hover';
-}
-export interface STATE_CHANGE_TYPE {
+};
+export declare const STATE_CHANGE_TYPE: {
   open: 'open';
   close: 'close';
-}
-export type ANIMATE_IN_TIME = 20;
-export type ANIMATE_OUT_TIME = 0;
+};
+
+export const ANIMATE_IN_TIME = 20;
+export const ANIMATE_OUT_TIME = 0;
 
 export type StateReducer = (
-  stateChangeType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+  stateChangeType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
   nextState: State,
-  currentState: State,
+  currentState: State
 ) => State;
 
 export type StatefulPopoverProps = BasePopoverProps & {
   children?: React.ReactNode;
-  content?: React.ReactNode | ((args: {close: () => void}) => React.ReactNode);
+  content?: React.ReactNode | ((args: { close: () => void }) => React.ReactNode);
   dismissOnClickOutside?: boolean;
   dismissOnEsc?: boolean;
   initialState?: State;
@@ -50,18 +51,15 @@ export type StatefulPopoverProps = BasePopoverProps & {
   onOpen?: () => any;
   stateReducer?: StateReducer;
 };
-export const StatefulPopover: React.FC<StatefulPopoverProps>;
+export declare const StatefulPopover: React.FC<StatefulPopoverProps>;
 
 export type StatefulPopoverContainerProps = StatefulPopoverProps & {
-  children: (props: PopoverProps & {children: never}) => React.ReactNode;
+  children: (props: PopoverProps & { children: never }) => React.ReactNode;
 };
 export interface State {
   isOpen: boolean;
 }
-export class StatefulContainer extends React.Component<
-  StatefulPopoverContainerProps,
-  State
-> {
+export class StatefulContainer extends React.Component<StatefulPopoverContainerProps, State> {
   onBlur(): void;
   onClick(): void;
   onClickOutside(): void;
@@ -73,8 +71,8 @@ export class StatefulContainer extends React.Component<
   open(): void;
   close(): void;
   internalSetState(
-    type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
-    changes: State,
+    type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
+    changes: State
   ): void;
 }
 
@@ -93,11 +91,11 @@ export interface PopoverOverrides {
   Inner?: Override<SharedStylePropsArg>;
 }
 export interface BasePopoverProps {
-  accessibilityType?: ACCESSIBILITY_TYPE[keyof ACCESSIBILITY_TYPE];
+  accessibilityType?: typeof ACCESSIBILITY_TYPE[keyof typeof ACCESSIBILITY_TYPE];
   focusLock?: boolean;
   autoFocus?: boolean;
   focusOptions?: FocusOptions;
-  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => (boolean | FocusOptions));
+  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
   'data-baseweb'?: string;
   id?: string;
   ignoreBoundary?: boolean;
@@ -106,7 +104,7 @@ export interface BasePopoverProps {
   overrides?: PopoverOverrides;
   placement?: TetherPlacement[keyof TetherPlacement];
   showArrow?: boolean;
-  triggerType?: TRIGGER_TYPE[keyof TRIGGER_TYPE];
+  triggerType?: typeof TRIGGER_TYPE[keyof typeof TRIGGER_TYPE];
   mountNode?: HTMLElement;
   animateOutTime?: number;
   popperOptions?: any;
@@ -138,18 +136,13 @@ export interface PopoverPrivateState {
   isLayerMounted: boolean;
   isMounted: boolean;
 }
-export class Popover extends React.Component<
-  PopoverProps,
-  PopoverPrivateState
-> {
+export class Popover extends React.Component<PopoverProps, PopoverPrivateState> {
   init(prevProps: PopoverProps, prevState: PopoverPrivateState): void;
-  getDefaultState(
-    props: PopoverProps,
-  ): {
+  getDefaultState(props: PopoverProps): {
     isAnimating: false;
-    arrowOffset: {left: 0; top: 0};
-    popoverOffset: {left: 0; top: 0};
-    placement: PLACEMENT[keyof PLACEMENT];
+    arrowOffset: { left: 0; top: 0 };
+    popoverOffset: { left: 0; top: 0 };
+    placement: typeof PLACEMENT[keyof typeof PLACEMENT];
     isMounted: false;
     isLayerMounted: false;
   };
@@ -162,10 +155,7 @@ export class Popover extends React.Component<
   onPopoverMouseEnter(): void;
   onPopoverMouseLeave(): void;
   onKeyPress(evt: KeyboardEvent): void;
-  onPopperUpdate(
-    normalizedOffsets: NormalizedOffsets,
-    data: PopperDataObject,
-  ): void;
+  onPopperUpdate(normalizedOffsets: NormalizedOffsets, data: PopperDataObject): void;
   triggerOnMouseLeaveWithDelay(): void;
   triggerOnMouseLeave(): void;
   triggerOnMouseEnterWithDelay(): void;
@@ -181,23 +171,17 @@ export class Popover extends React.Component<
   getPopoverIdAttr(): string | null;
   getAnchorProps(): object;
   getPopoverBodyProps(): object;
-  getSharedProps(): SharedStylePropsArg & {children?: React.ReactNode};
+  getSharedProps(): SharedStylePropsArg & { children?: React.ReactNode };
   getAnchorFromChildren(): React.ReactNode;
   renderAnchor(): React.ReactNode;
   renderPopover(): React.ReactNode;
 }
 
-export const StyledArrow: StyletronComponent<any>;
-export const StyledBody: StyletronComponent<any>;
-export const StyledInner: StyletronComponent<any>;
-export const StyledPadding: StyletronComponent<any>;
+export declare const StyledArrow: StyletronComponent<any>;
+export declare const StyledBody: StyletronComponent<any>;
+export declare const StyledInner: StyletronComponent<any>;
+export declare const StyledPadding: StyletronComponent<any>;
 
-export const ACCESSIBILITY_TYPE: ACCESSIBILITY_TYPE;
-export const PLACEMENT: PLACEMENT;
-export const TRIGGER_TYPE: TRIGGER_TYPE;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
-export const POPOVER_MARGIN: 8;
-export const ARROW_SIZE: 6;
-export const ANIMATE_IN_TIME: ANIMATE_IN_TIME;
-export const ANIMATE_OUT_TIME: ANIMATE_OUT_TIME;
-export const ARROW_WIDTH: number;
+export declare const POPOVER_MARGIN: 8;
+export declare const ARROW_SIZE: 6;
+export declare const ARROW_WIDTH: number;

package/popover/popover.js

@@ -413,6 +413,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         $popoverOffset: popoverOffset,
         $placement: placement,
         $isAnimating: isAnimating,
+        $animationDuration: this.props.animateOutTime || _constants.ANIMATE_OUT_TIME,
         $isOpen: isOpen,
         $popoverMargin: popoverMargin,
         $isHoverTrigger: this.isHoverTrigger()
@@ -488,7 +489,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this4 = this;
 
-      var mountedAndOpen = this.state.isMounted && this.props.isOpen;
+      var mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
       var rendered = [this.renderAnchor()];
       var renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
       var defaultPopperOptions = {

package/popover/popover.js.flow

@@ -345,6 +345,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
       $popoverOffset: popoverOffset,
       $placement: placement,
       $isAnimating: isAnimating,
+      $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
       $isOpen: isOpen,
       $popoverMargin: popoverMargin,
       $isHoverTrigger: this.isHoverTrigger(),
@@ -420,7 +421,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
   }
 
   render() {
-    const mountedAndOpen = this.state.isMounted && this.props.isOpen;
+    const mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
     const rendered = [this.renderAnchor()];
     const renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
 

package/popover/stateful-container.js

@@ -193,6 +193,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           accessibilityType = _this$props.accessibilityType,
           autoFocus = _this$props.autoFocus,
+          animateOutTime = _this$props.animateOutTime,
           dismissOnClickOutside = _this$props.dismissOnClickOutside,
           dismissOnEsc = _this$props.dismissOnEsc,
           focusLock = _this$props.focusLock,
@@ -216,6 +217,7 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
           focusOptions = _this$props.focusOptions;
       var popoverProps = {
         accessibilityType: accessibilityType,
+        animateOutTime: animateOutTime,
         autoFocus: autoFocus,
         content: this.renderContent,
         focusLock: focusLock,

package/popover/stateful-container.js.flow

@@ -148,6 +148,7 @@ class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT,
     const {
       accessibilityType,
       autoFocus,
+      animateOutTime,
       dismissOnClickOutside,
       dismissOnEsc,
       focusLock,
@@ -173,6 +174,7 @@ class StatefulContainer extends React.Component<StatefulPopoverContainerPropsT,
 
     const popoverProps: PopoverPropsWithoutChildrenT = {
       accessibilityType,
+      animateOutTime,
       autoFocus,
       content: this.renderContent,
       focusLock,

package/popover/styled-components.js

@@ -24,7 +24,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * Main popover container element that gets positioned next to the anchor
  */
 function getBodyStyles(props) {
-  var $isOpen = props.$isOpen,
+  var $animationDuration = props.$animationDuration,
+      $isOpen = props.$isOpen,
       $isAnimating = props.$isAnimating,
       $placement = props.$placement,
       $popoverOffset = props.$popoverOffset,
@@ -43,7 +44,7 @@ function getBodyStyles(props) {
     borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
     boxShadow: $theme.lighting.shadow600,
     transitionProperty: 'opacity,transform',
-    transitionDuration: $isAnimating ? '0.1s' : '0s',
+    transitionDuration: $isAnimating ? $isOpen ? '0.1s' : "".concat($animationDuration, "ms") : '0s',
     transitionTimingFunction: $isOpen ? $theme.animation.easeOutCurve : $theme.animation.easeInCurve,
     opacity: $isAnimating && $isOpen ? 1 : 0,
     transform: $isAnimating && $isOpen ? (0, _utils.getEndPosition)($popoverOffset) : (0, _utils.getStartPosition)($popoverOffset, $placement, $showArrow ? _constants.ARROW_SIZE : 0, $popoverMargin)

package/popover/styled-components.js.flow

@@ -21,6 +21,7 @@ import type { ThemeT } from '../styles/types.js';
  */
 export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
   const {
+    $animationDuration,
     $isOpen,
     $isAnimating,
     $placement,
@@ -42,7 +43,7 @@ export function getBodyStyles(props: BodyStylePropsArgT & { $theme: ThemeT }) {
     borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
     boxShadow: $theme.lighting.shadow600,
     transitionProperty: 'opacity,transform',
-    transitionDuration: $isAnimating ? '0.1s' : '0s',
+    transitionDuration: $isAnimating ? ($isOpen ? '0.1s' : `${$animationDuration}ms`) : '0s',
     transitionTimingFunction: $isOpen
       ? $theme.animation.easeOutCurve
       : $theme.animation.easeInCurve,

package/popover/types.js.flow

@@ -175,6 +175,7 @@ export type ArrowStylePropsArgT = {
 };
 
 export type BodyStylePropsArgT = {
+  $animationDuration: number,
   $isAnimating: boolean,
   $isHoverTrigger: boolean,
   $isOpen: boolean,

package/progress-bar/index.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface SIZE {
+export declare const SIZE: {
   small: 'small';
   medium: 'medium';
   large: 'large';
-}
+};
 export interface ProgressBarOverrides {
   Root?: Override<any>;
   BarContainer?: Override<any>;
@@ -22,7 +22,7 @@ export interface ProgressBarProps {
   getProgressLabel?: (value: number, successValue: number) => React.ReactNode;
   infinite?: boolean;
   overrides?: ProgressBarOverrides;
-  size?: keyof SIZE;
+  size?: typeof SIZE[keyof typeof SIZE];
   showLabel?: boolean;
   steps?: number;
   successValue?: number;
@@ -42,17 +42,16 @@ export interface ProgressBarRoundedOverrides {
 
 export interface ProgressBarRoundedProps {
   progress?: number;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   animate?: boolean;
   inline?: boolean;
   overrides?: ProgressBarRoundedOverrides;
 }
-export const ProgressBarRounded: React.FC<ProgressBarRoundedProps>;
+export declare const ProgressBarRounded: React.FC<ProgressBarRoundedProps>;
 
-export const SIZE: SIZE;
-export const StyledRoot: StyletronComponent<any>;
-export const StyledBarContainer: StyletronComponent<any>;
-export const StyledBar: StyletronComponent<any>;
-export const StyledBarProgress: StyletronComponent<any>;
-export const StyledInfiniteBar: StyletronComponent<any>;
-export const StyledLabel: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledBarContainer: StyletronComponent<any>;
+export declare const StyledBar: StyletronComponent<any>;
+export declare const StyledBarProgress: StyletronComponent<any>;
+export declare const StyledInfiniteBar: StyletronComponent<any>;
+export declare const StyledLabel: StyletronComponent<any>;

package/progress-steps/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface ProgressStepsOverrides {
   Root?: Override<any>;
@@ -10,7 +10,7 @@ export interface ProgressStepsProps {
   children?: React.ReactNode;
   current?: number;
 }
-export const ProgressSteps: React.FC<ProgressStepsProps>;
+export declare const ProgressSteps: React.FC<ProgressStepsProps>;
 
 export interface StepOverrides {
   Root?: Override<any>;
@@ -30,7 +30,7 @@ export interface StepProps {
   overrides?: StepOverrides;
   children?: React.ReactNode;
 }
-export const Step: React.FC<StepProps>;
+export declare const Step: React.FC<StepProps>;
 
 export interface NumberedStepOverrides {
   Root?: Override<any>;
@@ -51,21 +51,21 @@ export interface NumberedStepProps {
   children?: React.ReactNode;
   step?: React.ReactNode;
 }
-export const NumberedStep: React.FC<NumberedStepProps>;
+export declare const NumberedStep: React.FC<NumberedStepProps>;
 
 export interface StyleProps {
   $isActive?: boolean;
   $isCompleted?: boolean;
   $disabled?: boolean;
 }
-export const StyledProgressSteps: StyletronComponent<StyleProps>;
-export const StyledStep: StyletronComponent<StyleProps>;
-export const StyledIcon: StyletronComponent<StyleProps>;
-export const StyledInnerIcon: StyletronComponent<StyleProps>;
-export const StyledContent: StyletronComponent<StyleProps>;
-export const StyledContentTitle: StyletronComponent<StyleProps>;
-export const StyledContentTail: StyletronComponent<StyleProps>;
-export const StyledContentDescription: StyletronComponent<StyleProps>;
-export const StyledNumberStep: StyletronComponent<StyleProps>;
-export const StyledNumberIcon: StyletronComponent<StyleProps>;
-export const StyledNumberContentTail: StyletronComponent<StyleProps>;
+export declare const StyledProgressSteps: StyletronComponent<StyleProps>;
+export declare const StyledStep: StyletronComponent<StyleProps>;
+export declare const StyledIcon: StyletronComponent<StyleProps>;
+export declare const StyledInnerIcon: StyletronComponent<StyleProps>;
+export declare const StyledContent: StyletronComponent<StyleProps>;
+export declare const StyledContentTitle: StyletronComponent<StyleProps>;
+export declare const StyledContentTail: StyletronComponent<StyleProps>;
+export declare const StyledContentDescription: StyletronComponent<StyleProps>;
+export declare const StyledNumberStep: StyletronComponent<StyleProps>;
+export declare const StyledNumberIcon: StyletronComponent<StyleProps>;
+export declare const StyledNumberContentTail: StyletronComponent<StyleProps>;

package/progress-steps/numbered-step.js.flow

@@ -17,7 +17,7 @@ import {
   StyledNumberContentTail,
   StyledContentDescription,
 } from './styled-components.js';
-import StyledCheckIcon from '../icon/check.js';
+import Check from '../icon/check.js';
 
 import type { NumberedStepPropsT } from './types.js';
 
@@ -39,7 +39,7 @@ function NumberedStep({
     overrides.Description,
     StyledContentDescription
   );
-  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, StyledCheckIcon);
+  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, Check);
 
   const sharedProps = {
     $isCompleted: isCompleted,

package/radio/index.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface STATE_TYPE {
+export declare const STATE_TYPE: {
   change: 'CHANGE';
-}
+};
 
-export interface ALIGN {
+export declare const ALIGN: {
   vertical: 'vertical';
   horizontal: 'horizontal';
-}
+};
 
 export type StateReducer = (
   stateType: string,
@@ -46,7 +46,7 @@ export interface StatefulRadioGroupProps {
   align?: 'horizontal' | 'vertical';
 }
 
-export const StatefulRadioGroup: React.FC<StatefulRadioGroupProps>;
+export declare const StatefulRadioGroup: React.FC<StatefulRadioGroupProps>;
 
 export interface RadioGroupProps {
   'aria-describedby'?: string;
@@ -125,13 +125,10 @@ export class Radio extends React.Component<RadioProps, RadioState> {
   onBlur(event: React.FocusEvent<HTMLInputElement>): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledLabel: StyletronComponent<any>;
-export const StyledInput: StyletronComponent<any>;
-export const StyledDescription: StyletronComponent<any>;
-export const StyledRadioMarkInner: StyletronComponent<any>;
-export const StyledRadioMarkOuter: StyletronComponent<any>;
-export const StyledRadioGroupRoot: StyletronComponent<any>;
-
-export const STATE_TYPE: STATE_TYPE;
-export const ALIGN: ALIGN;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledLabel: StyletronComponent<any>;
+export declare const StyledInput: StyletronComponent<any>;
+export declare const StyledDescription: StyletronComponent<any>;
+export declare const StyledRadioMarkInner: StyletronComponent<any>;
+export declare const StyledRadioMarkOuter: StyletronComponent<any>;
+export declare const StyledRadioGroupRoot: StyletronComponent<any>;

package/rating/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
-import {Theme} from '../theme';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+import { Theme } from '../theme';
 
 export interface RatingState {
   previewIndex?: number;
@@ -16,7 +16,7 @@ export interface StarRatingProps {
   value?: number;
   numItems?: number;
   readOnly?: boolean;
-  onChange?: (args: {value: number}) => any;
+  onChange?: (args: { value: number }) => any;
   size?: number;
 }
 
@@ -24,7 +24,7 @@ export interface EmoticonRatingProps {
   overrides?: RatingOverrides;
   value?: number;
   readOnly?: boolean;
-  onChange?: (args: {value: number}) => any;
+  onChange?: (args: { value: number }) => any;
   size?: number;
 }
 export class StarRating extends React.Component<StarRatingProps, RatingState> {
@@ -33,10 +33,7 @@ export class StarRating extends React.Component<StarRatingProps, RatingState> {
   renderRatingContents(): React.ReactNode[];
 }
 
-export class EmoticonRating extends React.Component<
-  EmoticonRatingProps,
-  RatingState
-> {
+export class EmoticonRating extends React.Component<EmoticonRatingProps, RatingState> {
   selectItem(value: number): void;
   updatePreview(previewIndex?: number): void;
   renderRatingContents(): React.ReactNode[];
@@ -51,6 +48,6 @@ export interface StyledRatingItemProps {
   $isSelected: boolean;
   $index: number;
 }
-export const StyledRoot: StyletronComponent<StyledRootProps>;
-export const StyledStar: StyletronComponent<StyledRatingItemProps>;
-export const StyledEmoticon: StyletronComponent<StyledRatingItemProps>;
+export declare const StyledRoot: StyletronComponent<StyledRootProps>;
+export declare const StyledStar: StyletronComponent<StyledRatingItemProps>;
+export declare const StyledEmoticon: StyletronComponent<StyledRatingItemProps>;