baseui 11.0.1 → 11.1.0

package/esm/tree-view/tree-label.js

@@ -74,8 +74,16 @@ var TreeLabel = function TreeLabel(_ref) {
     /*#__PURE__*/
     // $FlowExpectedError[cannot-spread-inexact]
     React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({}, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({}, sharedProps, RightProps));
-    }) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({}, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({}, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
+      return theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+        size: 16
+      }, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+        size: 16
+      }, sharedProps, RightProps));
+    }) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({
+      size: 16
+    }, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
   );
 };
 

package/file-uploader/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 FileUploaderOverrides<T> {
   Root?: Override<T>;
@@ -26,16 +26,16 @@ export interface StyleProps {
 export type DropFilesEventHandler = (
   accepted: File[],
   rejected: File[],
-  event: React.SyntheticEvent<HTMLElement>,
+  event: React.SyntheticEvent<HTMLElement>
 ) => any;
 
 export type DropFileEventHandler = (
   acceptedOrRejected: File[],
-  event: React.SyntheticEvent<HTMLElement>,
+  event: React.SyntheticEvent<HTMLElement>
 ) => any;
 
 export type GetDataTransferItems = (
-  event: React.SyntheticEvent<any>,
+  event: React.SyntheticEvent<any>
 ) => Promise<Array<File | DataTransferItem>>;
 
 export interface FileUploaderProps {
@@ -67,10 +67,10 @@ export interface FileUploaderProps {
   progressAmount?: number;
   progressMessage?: string;
 }
-export const FileUploader: React.FC<FileUploaderProps>;
+export declare const FileUploader: React.FC<FileUploaderProps>;
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledFileDragAndDrop: StyletronComponent<any>;
-export const StyledContentMessage: StyletronComponent<any>;
-export const StyledErrorMessage: StyletronComponent<any>;
-export const StyledHiddenInput: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledFileDragAndDrop: StyletronComponent<any>;
+export declare const StyledContentMessage: StyletronComponent<any>;
+export declare const StyledErrorMessage: StyletronComponent<any>;
+export declare const StyledHiddenInput: StyletronComponent<any>;

package/flex-grid/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {BlockProps, Responsive, Scale} from '../block';
+import { BlockProps, Responsive, Scale } from '../block';
 
 export interface FlexGridProps extends BlockProps {
   flexGridColumnCount?: Responsive<number>;
@@ -7,11 +7,11 @@ export interface FlexGridProps extends BlockProps {
   flexGridRowGap?: Responsive<Scale>;
 }
 
-export const FlexGrid: React.FC<FlexGridProps>;
+export declare const FlexGrid: React.FC<FlexGridProps>;
 
 export interface FlexGridItemProps extends FlexGridProps {
   flexGridItemIndex?: number;
   flexGridItemCount?: number;
 }
 
-export const FlexGridItem: React.FC<FlexGridItemProps>;
+export declare const FlexGridItem: React.FC<FlexGridItemProps>;

package/form-control/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export const StyledLabel: StyletronComponent<any>;
-export const StyledCaption: StyletronComponent<any>;
-export const StyledControlContainer: StyletronComponent<any>;
+export declare const StyledLabel: StyletronComponent<any>;
+export declare const StyledCaption: StyletronComponent<any>;
+export declare const StyledControlContainer: StyletronComponent<any>;
 
 export interface FormControlOverrides {
   Label?: Override<any>;
@@ -25,19 +25,7 @@ export interface FormControlProps {
   error?: boolean | React.ReactNode;
   positive?: React.ReactNode;
   htmlFor?: string;
-  counter?: boolean | {length?: number; maxLength?: number; error?: boolean};
+  counter?: boolean | { length?: number; maxLength?: number; error?: boolean };
 }
 
-export class FormControl extends React.Component<
-  FormControlProps,
-  FormControlState
-> {}
-
-export interface FormControlChildProps {
-  'aria-describedby': string | null,
-  'aria-errormessage': string | null,
-  key: React.Key,
-  disabled: boolean,
-  error: boolean,
-  positive: boolean
-}
+export class FormControl extends React.Component<FormControlProps, FormControlState> {}

package/header-navigation/index.d.ts

@@ -1,12 +1,12 @@
 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 ALIGN {
+export declare const ALIGN: {
   right: 'flex-end';
   left: 'flex-start';
   center: 'center';
-}
+};
 
 export interface HeaderNavigationOverrides {
   Root?: Override<any>;
@@ -14,12 +14,11 @@ export interface HeaderNavigationOverrides {
 
 export interface HeaderNavigationProps {
   overrides?: HeaderNavigationOverrides;
+  children?: React.ReactNode;
 }
 
 export class HeaderNavigation extends React.Component<HeaderNavigationProps> {}
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledNavigationItem: StyletronComponent<any>;
-export const StyledNavigationList: StyletronComponent<any>;
-
-export const ALIGN: ALIGN;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledNavigationItem: StyletronComponent<any>;
+export declare const StyledNavigationList: StyletronComponent<any>;

package/heading/index.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {BlockProps} from '../block';
+import { BlockProps } from '../block';
 
 export interface HeadingLevelProps {
   children: React.ReactNode;
 }
 
-export const HeadingLevel: React.FC<HeadingLevelProps>;
+export declare const HeadingLevel: React.FC<HeadingLevelProps>;
 
 export type HeadingProps = {
   styleLevel?: number;
 } & BlockProps;
 
-export const Heading: React.FC<HeadingProps>;
+export declare const Heading: React.FC<HeadingProps>;

package/helper/helper-steps.js

@@ -9,11 +9,17 @@ exports.HelperSteps = HelperSteps;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _index = require("../icon/index.js");
+var _arrowLeft = _interopRequireDefault(require("../icon/arrow-left.js"));
 
-var _index2 = require("../button/index.js");
+var _arrowRight = _interopRequireDefault(require("../icon/arrow-right.js"));
 
-var _index3 = require("../styles/index.js");
+var _check = _interopRequireDefault(require("../icon/check.js"));
+
+var _index = require("../button/index.js");
+
+var _index2 = require("../styles/index.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -38,7 +44,7 @@ function HelperSteps(_ref) {
       onPrev = _ref.onPrev,
       onNext = _ref.onNext;
 
-  var _useStyletron = (0, _index3.useStyletron)(),
+  var _useStyletron = (0, _index2.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
       theme = _useStyletron2[1];
@@ -50,12 +56,12 @@ function HelperSteps(_ref) {
       display: 'flex',
       justifyContent: 'space-between'
     })
-  }, /*#__PURE__*/React.createElement(_index2.Button, {
+  }, /*#__PURE__*/React.createElement(_index.Button, {
     disabled: index === 0,
-    kind: _index2.KIND.secondary,
+    kind: _index.KIND.secondary,
     onClick: onPrev,
-    shape: _index2.SHAPE.circle
-  }, /*#__PURE__*/React.createElement(_index.ArrowLeft, {
+    shape: _index.SHAPE.circle
+  }, /*#__PURE__*/React.createElement(_arrowLeft.default, {
     size: 20
   })), /*#__PURE__*/React.createElement("div", {
     className: css({
@@ -77,13 +83,13 @@ function HelperSteps(_ref) {
         }
       })
     });
-  })), /*#__PURE__*/React.createElement(_index2.Button, {
-    kind: isLast ? _index2.KIND.primary : _index2.KIND.secondary,
+  })), /*#__PURE__*/React.createElement(_index.Button, {
+    kind: isLast ? _index.KIND.primary : _index.KIND.secondary,
     onClick: isLast ? onFinish : onNext,
-    shape: _index2.SHAPE.circle
-  }, isLast ? /*#__PURE__*/React.createElement(_index.Check, {
+    shape: _index.SHAPE.circle
+  }, isLast ? /*#__PURE__*/React.createElement(_check.default, {
     size: 20
-  }) : /*#__PURE__*/React.createElement(_index.ArrowRight, {
+  }) : /*#__PURE__*/React.createElement(_arrowRight.default, {
     size: 20
   })));
 }

package/helper/helper-steps.js.flow

@@ -9,7 +9,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import ArrowLeft from '../icon/arrow-left.js';
+import ArrowRight from '../icon/arrow-right.js';
+import Check from '../icon/check.js';
 import { Button, KIND, SHAPE } from '../button/index.js';
 import { useStyletron } from '../styles/index.js';
 

package/helper/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 
 import {
   ACCESSIBILITY_TYPE,
@@ -20,11 +20,11 @@ export type HelperStepsPropsT = {
   onNext: () => any;
 };
 
-export {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE};
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE };
 
-export const StyledArrow: StyletronComponent<any>;
-export const StyledBody: StyletronComponent<any>;
+export declare const StyledArrow: StyletronComponent<any>;
+export declare const StyledBody: StyletronComponent<any>;
 
-export const Unstable_Helper: React.FC<PropsT>;
-export const Unstable_StatefulHelper: React.FC<StatefulPropsT>;
-export const Unstable_HelperSteps: React.FC<HelperStepsPropsT>;
+export declare const Unstable_Helper: React.FC<PropsT>;
+export declare const Unstable_StatefulHelper: React.FC<StatefulPropsT>;
+export declare const Unstable_HelperSteps: React.FC<HelperStepsPropsT>;

package/helpers/base-provider.d.ts

@@ -0,0 +1,16 @@
+import { Override } from './overrides';
+import * as React from 'react';
+import { Theme } from '../styles';
+
+export interface BaseProviderOverrides {
+  AppContainer?: Override<any>;
+  LayersContainer?: Override<any>;
+}
+
+export interface BaseProviderProps {
+  children: React.ReactNode;
+  theme: Theme;
+  overrides?: BaseProviderOverrides;
+  zIndex?: number;
+}
+export declare const BaseProvider: React.FC<BaseProviderProps>;

package/helpers/overrides.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { StyleObject } from 'styletron-react';
+import { Theme } from '../styles';
+
+type StyleOverride<T> =
+  | StyleObject
+  | ((props: { $theme: Theme } & React.PropsWithChildren<T>) => StyleObject);
+
+type ComponentOverride<T> = React.ComponentType<T> | React.RefForwardingComponent<T>;
+
+interface OverrideObject<T> {
+  component?: ComponentOverride<T>;
+  props?: any;
+  style?: StyleOverride<T>;
+}
+
+export type Override<T> = OverrideObject<T> | React.ComponentType<T>;
+
+export interface Overrides<T> {
+  [key: string]: Override<T>;
+}
+
+export function mergeOverrides<T>(target?: Overrides<T>, source?: Overrides<T>): Overrides<T>;

package/icon/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 StyledComponentArgsT {
   $size?: number | string;
@@ -19,35 +19,35 @@ export interface IconProps {
   overrides?: IconOverrides;
 }
 
-export const Icon: React.FC<IconProps>;
+export declare const Icon: React.FC<IconProps>;
 
-export const StyledSvg: StyletronComponent<any>;
+export declare const StyledSvg: StyletronComponent<any>;
 
-export const Alert: React.FC<IconProps>;
-export const ArrowDown: React.FC<IconProps>;
-export const ArrowLeft: React.FC<IconProps>;
-export const ArrowRight: React.FC<IconProps>;
-export const ArrowUp: React.FC<IconProps>;
-export const Blank: React.FC<IconProps>;
-export const CheckIndeterminate: React.FC<IconProps>;
-export const Check: React.FC<IconProps>;
-export const ChevronDown: React.FC<IconProps>;
-export const ChevronLeft: React.FC<IconProps>;
-export const ChevronRight: React.FC<IconProps>;
-export const ChevronUp: React.FC<IconProps>;
-export const DeleteAlt: React.FC<IconProps>;
-export const Delete: React.FC<IconProps>;
-export const Filter: React.FC<IconProps>;
-export const Grab: React.FC<IconProps>;
-export const Hide: React.FC<IconProps>;
-export const Menu: React.FC<IconProps>;
-export const Overflow: React.FC<IconProps>;
-export const Plus: React.FC<IconProps>;
-export const Search: React.FC<IconProps>;
-export const Show: React.FC<IconProps>;
-export const Spinner: React.FC<IconProps>;
-export const TriangleDown: React.FC<IconProps>;
-export const TriangleLeft: React.FC<IconProps>;
-export const TriangleRight: React.FC<IconProps>;
-export const TriangleUp: React.FC<IconProps>;
-export const Upload: React.FC<IconProps>;
+export declare const Alert: React.FC<IconProps>;
+export declare const ArrowDown: React.FC<IconProps>;
+export declare const ArrowLeft: React.FC<IconProps>;
+export declare const ArrowRight: React.FC<IconProps>;
+export declare const ArrowUp: React.FC<IconProps>;
+export declare const Blank: React.FC<IconProps>;
+export declare const CheckIndeterminate: React.FC<IconProps>;
+export declare const Check: React.FC<IconProps>;
+export declare const ChevronDown: React.FC<IconProps>;
+export declare const ChevronLeft: React.FC<IconProps>;
+export declare const ChevronRight: React.FC<IconProps>;
+export declare const ChevronUp: React.FC<IconProps>;
+export declare const DeleteAlt: React.FC<IconProps>;
+export declare const Delete: React.FC<IconProps>;
+export declare const Filter: React.FC<IconProps>;
+export declare const Grab: React.FC<IconProps>;
+export declare const Hide: React.FC<IconProps>;
+export declare const Menu: React.FC<IconProps>;
+export declare const Overflow: React.FC<IconProps>;
+export declare const Plus: React.FC<IconProps>;
+export declare const Search: React.FC<IconProps>;
+export declare const Show: React.FC<IconProps>;
+export declare const Spinner: React.FC<IconProps>;
+export declare const TriangleDown: React.FC<IconProps>;
+export declare const TriangleLeft: React.FC<IconProps>;
+export declare const TriangleRight: React.FC<IconProps>;
+export declare const TriangleUp: React.FC<IconProps>;
+export declare const Upload: React.FC<IconProps>;

package/index.d.ts

@@ -1,114 +1,34 @@
-import * as React from 'react';
-import {
-  StyleObject,
-  StyletronComponent,
-  WithStyleFn as StyletronWithStyleFn,
-  StyledFn as StyletronStyledFn,
-} from 'styletron-react';
-import {Override, Overrides} from './overrides';
-import {Locale} from './locale';
-import {Theme, ThemePrimitives} from './theme';
-
-type UseStyletronFn<Theme> = () => [(arg: StyleObject) => string, Theme];
-export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme>;
-export const useStyletron: UseStyletronFn<Theme>;
-export function withWrapper<
-  C extends StyletronComponent<any>,
-  P extends object
->(
-  component: C,
-  wrapper: (component: C) => React.ComponentType<P>,
-): StyletronComponent<React.ComponentProps<C> & P>;
-
-export function createTheme<P extends object>(
-  primitives: Partial<ThemePrimitives>,
-  overrides?: P,
-): Theme & P;
-export function createLightTheme<P extends object>(
-  primitives: Partial<ThemePrimitives>,
-  overrides?: P,
-): Theme & P;
-export function createDarkTheme<P extends object>(
-  primitives: Partial<ThemePrimitives>,
-  overrides?: P,
-): Theme & P;
-export function mergeOverrides<T>(
-  target?: Overrides<T>,
-  source?: Overrides<T>,
-): Overrides<T>;
-export function styled<
-  P extends object,
-  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-  T = Theme
->(
-  component: C,
-  styledFn: StyleObject | ((props: {$theme: T} & P) => StyleObject),
-): StyletronComponent<
-  Pick<
-    React.ComponentProps<C>,
-    Exclude<keyof React.ComponentProps<C>, {className: string}>
-  > &
-    P
->;
-
-export {Theme} from 'baseui/theme';
-export const LightTheme: Theme;
-export const LightThemeMove: Theme;
-export const lightThemePrimitives: ThemePrimitives;
-export const DarkTheme: Theme;
-export const DarkThemeMove: Theme;
-export const darkThemePrimitives: ThemePrimitives;
-
-export interface BaseProviderOverrides {
-  AppContainer?: Override<any>;
-  LayersContainer?: Override<any>;
-}
-
-export interface BaseProviderProps {
-  children: React.ReactNode;
-  theme: Theme;
-  overrides?: BaseProviderOverrides;
-  zIndex?: number;
-}
-export const BaseProvider: React.FC<BaseProviderProps>;
-
-export interface LocaleProviderProps {
-  locale: Partial<Locale>;
-  children?: React.ReactNode;
-}
-export const LocaleProvider: React.FC<LocaleProviderProps>;
-
-export interface ThemeProviderProps {
-  theme: Theme;
-  children?: React.ReactNode;
-}
-export const ThemeProvider: React.FC<ThemeProviderProps>;
-
-export interface StyledFn<T> extends StyletronStyledFn {
-  <
-    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-    P extends object
-  >(
-    component: C,
-    style: (props: {$theme: T} & P) => StyleObject,
-  ): StyletronComponent<
-    Pick<
-      React.ComponentProps<C>,
-      Exclude<keyof React.ComponentProps<C>, {className: string}>
-    > &
-      P
-  >;
-}
-
-export function createThemedStyled<Theme>(): StyledFn<Theme>;
-
-export interface WithStyleFn<T = Theme> extends StyletronWithStyleFn {
-  <C extends StyletronComponent<any>, P extends object, T1 = T>(
-    component: C,
-    style: (props: P & {$theme: T1}) => StyleObject,
-  ): StyletronComponent<React.ComponentProps<C> & P>;
-}
-
-export const withStyle: WithStyleFn;
-
-export function createThemedWithStyle<Theme>(): WithStyleFn<Theme>;
+export {
+  createThemedUseStyletron,
+  useStyletron,
+  withWrapper,
+  styled,
+  withStyle,
+  createThemedStyled,
+  createThemedWithStyle,
+  type StyledFn,
+  type WithStyleFn,
+  type ThemeProviderProps,
+  ThemeProvider,
+  type Theme,
+} from './styles';
+
+export { type LocaleProviderProps, LocaleProvider } from './locale';
+export { createTheme, createLightTheme, createDarkTheme } from './themes';
+
+export { mergeOverrides } from './helpers/overrides';
+
+export {
+  LightTheme,
+  LightThemeMove,
+  lightThemePrimitives,
+  DarkTheme,
+  DarkThemeMove,
+  darkThemePrimitives,
+} from './themes';
+
+export {
+  type BaseProviderOverrides,
+  type BaseProviderProps,
+  BaseProvider,
+} from './helpers/base-provider';

package/input/base-input.js

@@ -98,7 +98,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (e) {
-      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current) {
+      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
         _this.clearValue(); // prevent event from closing modal or doing something unexpected
 
 
@@ -113,19 +113,23 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
@@ -280,10 +284,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
           clearable = _this$props2.clearable,
           value = _this$props2.value,
           disabled = _this$props2.disabled,
+          readOnly = _this$props2.readOnly,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override;
 
-      if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+      if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
         return null;
       }
 
@@ -373,6 +378,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         "aria-required": this.props.required,
         autoComplete: autoComplete,
         disabled: this.props.disabled,
+        readOnly: this.props.readOnly,
         id: this.props.id,
         inputMode: this.props.inputMode,
         maxLength: this.props.maxLength,
@@ -432,7 +438,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: _constants.SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 var _default = BaseInput;