baseui 11.0.1 → 11.1.0

package/input/base-input.js.flow

@@ -64,6 +64,7 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
     role: null,
     size: SIZE.default,
     type: 'text',
+    readOnly: false,
   };
 
   inputRef = this.props.inputRef || React.createRef<T>();
@@ -117,7 +118,12 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   }
 
   onInputKeyDown = (e: KeyboardEvent) => {
-    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
       e.stopPropagation();
@@ -131,13 +137,17 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   onFocus = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<T>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   getInputType() {
@@ -219,9 +229,10 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
   };
 
   renderClear() {
-    const { clearable, value, disabled, overrides = {} } = this.props;
+    const { clearable, value, disabled, readOnly, overrides = {} } = this.props;
     if (
       disabled ||
+      readOnly ||
       !clearable ||
       value == null ||
       (typeof value === 'string' && value.length === 0)
@@ -320,6 +331,7 @@ class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Compone
           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}

package/input/index.d.ts

@@ -2,30 +2,30 @@ import * as React from 'react';
 import { StyletronComponent } from 'styletron-react';
 import { Override } from '../overrides';
 
-export interface STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
-export interface ADJOINED {
+};
+export declare const ADJOINED: {
   none: 'none';
   left: 'left';
   right: 'right';
   both: 'both';
-}
-export interface SIZE {
+};
+export declare const SIZE: {
   mini: 'mini';
   default: 'default';
   compact: 'compact';
   large: 'large';
-}
+};
 
-export interface CUSTOM_INPUT_TYPE {
+export declare const CUSTOM_INPUT_TYPE: {
   textarea: 'textarea';
-}
+};
 
-export interface ENHANCER_POSITION {
+export declare const ENHANCER_POSITION: {
   start: 'start';
   end: 'end';
-}
+};
 
 export interface BaseInputOverrides<T> {
   InputContainer?: Override<T>;
@@ -39,7 +39,7 @@ export interface BaseInputProps<T> {
   'aria-label'?: string;
   'aria-labelledby'?: string;
   'aria-describedby'?: string;
-  adjoined?: ADJOINED[keyof ADJOINED];
+  adjoined?: typeof ADJOINED[keyof typeof ADJOINED];
   autoComplete?: string;
   autoFocus?: boolean;
   clearable?: boolean;
@@ -63,13 +63,14 @@ export interface BaseInputProps<T> {
   overrides?: BaseInputOverrides<SharedProps>;
   placeholder?: string;
   required?: boolean;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   type?: string;
   value?: string | number;
   rows?: number;
   min?: number;
   max?: number;
   step?: number | 'any';
+  readOnly?: boolean;
 }
 
 export interface State {
@@ -90,6 +91,8 @@ export type InputOverrides = BaseInputOverrides<SharedProps> & {
 export type SharedProps = {
   /** Renders UI in 'focus' state */
   $isFocused: boolean;
+  /** Renders UI in 'readOnly' state */
+  $isReadOnly: boolean;
   /** Renders UI in 'disabled' state */
   $disabled: boolean;
   /** Renders UI in 'error' state */
@@ -97,12 +100,12 @@ export type SharedProps = {
   /** Renders UI in 'positive' state */
   $positive: boolean;
   /** Defines styles for inputs that are grouped with other controls. */
-  $adjoined: keyof ADJOINED;
+  $adjoined: typeof ADJOINED[keyof typeof ADJOINED];
   /** Renders UI in provided size. */
-  $size: keyof SIZE;
+  $size: typeof SIZE[keyof typeof SIZE];
   /** Renders UI in 'required' state */
   $required: boolean;
-  $position: keyof ENHANCER_POSITION;
+  $position: typeof ENHANCER_POSITION[keyof typeof ENHANCER_POSITION];
   /** Defines if has a clearable or MaskToggleButton at the end */
   $hasIconTrailing: boolean;
 };
@@ -133,13 +136,13 @@ export interface MaskedInputProps extends InputProps {
   maskChar?: string;
 }
 
-export const MaskedInput: React.FC<MaskedInputProps>;
+export declare const MaskedInput: React.FC<MaskedInputProps>;
 
 export interface StatefulContainerProps {
   children?: React.ReactNode;
   initialState?: State;
   stateReducer?: (
-    stateType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
+    stateType: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE],
     nextState: State,
     currentState: State
   ) => State;
@@ -148,18 +151,12 @@ export interface StatefulContainerProps {
 
 export type StatefulInputProps = InputProps & StatefulContainerProps & { children?: never };
 
-export const StatefulInput: React.FC<StatefulInputProps>;
-export const StatefulContainer: React.FC<StatefulContainerProps>;
-
-export const StyledRoot: StyletronComponent<any>;
-export const StyledInputEnhancer: StyletronComponent<any>;
-export const StyledStartEnhancer: StyletronComponent<any>;
-export const StyledEndEnhancer: StyletronComponent<any>;
-export const StyledInputContainer: StyletronComponent<any>;
-export const StyledInput: StyletronComponent<any>;
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
-export const CUSTOM_INPUT_TYPE: CUSTOM_INPUT_TYPE;
-export const ADJOINED: ADJOINED;
-export const SIZE: SIZE;
-export const ENHANCER_POSITION: ENHANCER_POSITION;
+export declare const StatefulInput: React.FC<StatefulInputProps>;
+export declare const StatefulContainer: React.FC<StatefulContainerProps>;
+
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledInputEnhancer: StyletronComponent<any>;
+export declare const StyledStartEnhancer: StyletronComponent<any>;
+export declare const StyledEndEnhancer: StyletronComponent<any>;
+export declare const StyledInputContainer: StyletronComponent<any>;
+export declare const StyledInput: StyletronComponent<any>;

package/input/input.js

@@ -82,23 +82,27 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _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);
+      }
     });
 
     return _this;
@@ -175,7 +179,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {

package/input/input.js.flow

@@ -28,6 +28,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
     endEnhancer: null,
     clearable: false,
     type: 'text',
+    readOnly: false,
   };
 
   /**
@@ -35,17 +36,21 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
    * customers shouldn't have to manage themselves, such as input's focus state.
    */
   state = {
-    isFocused: this.props.autoFocus || false,
+    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   render() {

package/input/masked-input.js

@@ -43,14 +43,16 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onBlur = _ref.onBlur,
       value = _ref.value,
       disabled = _ref.disabled,
-      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled"]);
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
 
   return /*#__PURE__*/React.createElement(_reactInputMask.default, _extends({
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, restProps), function (props) {
     return /*#__PURE__*/React.createElement(_styledComponents.Input, _extends({
       ref: ref,
@@ -58,7 +60,8 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onFocus: onFocus,
       onBlur: onBlur,
       value: value,
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, props));
   });
 });

package/input/masked-input.js.flow

@@ -28,6 +28,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
       onBlur,
       value,
       disabled,
+      readOnly,
       ...restProps
     }: MaskedInputPropsT,
     ref
@@ -39,6 +40,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
         onBlur={onBlur}
         value={value}
         disabled={disabled}
+        readOnly={readOnly}
         {...restProps}
       >
         {(props) => (
@@ -49,6 +51,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
             onBlur={onBlur}
             value={value}
             disabled={disabled}
+            readOnly={readOnly}
             {...props}
           />
         )}

package/input/types.js.flow

@@ -38,6 +38,8 @@ export type StateReducerT = (
 export type SharedPropsT = {|
   /** Renders UI in 'focus' state */
   $isFocused: boolean,
+  /** Renders UI in 'readOnly' state */
+  $isReadOnly: boolean,
   /** Renders UI in 'disabled' state */
   $disabled: boolean,
   /** Renders UI in 'error' state */
@@ -141,6 +143,8 @@ export type BaseInputPropsT<T> = {|
   max?: number,
   /** step value when used as input type=number */
   step?: number | 'any',
+  /** Renders component in 'readOnly' state. */
+  readOnly?: boolean,
 |};
 
 export type InputPropsT = {|

package/input/utils.js

@@ -17,7 +17,8 @@ function getSharedProps(props, state) {
       positive = props.positive,
       adjoined = props.adjoined,
       size = props.size,
-      required = props.required;
+      required = props.required,
+      readOnly = props.readOnly;
   var isFocused = state.isFocused;
   return {
     $isFocused: isFocused,
@@ -26,6 +27,7 @@ function getSharedProps(props, state) {
     $positive: positive,
     $adjoined: adjoined,
     $size: size,
-    $required: required
+    $required: required,
+    $isReadOnly: readOnly
   };
 }

package/input/utils.js.flow

@@ -11,7 +11,7 @@ export function getSharedProps<T>(
   props: BaseInputPropsT<T> | InputPropsT,
   state: InternalStateT
 ): $Shape<SharedPropsT> {
-  const { disabled, error, positive, adjoined, size, required } = props;
+  const { disabled, error, positive, adjoined, size, required, readOnly } = props;
   const { isFocused } = state;
   return {
     $isFocused: isFocused,
@@ -21,6 +21,7 @@ export function getSharedProps<T>(
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $isReadOnly: readOnly,
   };
 }
 

package/layer/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export interface TETHER_PLACEMENT {
+export declare const TETHER_PLACEMENT: {
   auto: 'auto';
   topLeft: 'topLeft';
   top: 'top';
@@ -14,9 +14,9 @@ export interface TETHER_PLACEMENT {
   leftBottom: 'leftBottom';
   left: 'left';
   leftTop: 'leftTop';
-}
+};
 
-export type TetherPlacement = TETHER_PLACEMENT;
+export type TetherPlacement = typeof TETHER_PLACEMENT[keyof typeof TETHER_PLACEMENT];
 
 export interface NormalizedOffset {
   top: number;
@@ -46,11 +46,8 @@ export interface TetherProps {
   arrowRef?: React.Ref<HTMLElement>;
   popperRef?: React.Ref<HTMLElement>;
   children: React.ReactNode;
-  onPopperUpdate?: (
-    offsets: NormalizedOffsets,
-    popper: PopperDataObject,
-  ) => any;
-  placement?: TETHER_PLACEMENT[keyof TETHER_PLACEMENT];
+  onPopperUpdate?: (offsets: NormalizedOffsets, popper: PopperDataObject) => any;
+  placement?: typeof TETHER_PLACEMENT[keyof typeof TETHER_PLACEMENT];
   popperOptions?: any;
 }
 export interface TetherState {
@@ -81,6 +78,4 @@ export interface LayerProps {
 export class LayersManager extends React.Component<LayersManagerProps> {
   host: React.Ref<HTMLElement>;
 }
-export const Layer: React.FC<LayerProps>;
-
-export const TETHER_PLACEMENT: TETHER_PLACEMENT;
+export declare const Layer: React.FC<LayerProps>;

package/layout-grid/index.d.ts

@@ -1,7 +1,25 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {CSSLengthUnitT} from '../theme';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
+
+export type CSSLengthUnitT =
+  | 'cm'
+  | 'mm'
+  | 'Q'
+  | 'in'
+  | 'pc'
+  | 'px'
+  | 'pt'
+  | 'em'
+  | 'ex'
+  | 'ch'
+  | 'rem'
+  | 'lh'
+  | 'vw'
+  | 'vh'
+  | 'vmin'
+  | 'vmax'
+  | '%';
 
 export enum ALIGNMENT {
   start = 'flex-start',
@@ -74,7 +92,7 @@ export type StyledCellProps = {
   $span?: Responsive<number>;
 };
 
-export const Grid: React.FunctionComponent<GridProps>;
-export const Cell: React.FunctionComponent<CellProps>;
-export const StyledGrid: StyletronComponent<StyledGridProps>;
-export const StyledCell: StyletronComponent<StyledCellProps>;
+export declare const Grid: React.FunctionComponent<GridProps>;
+export declare const Cell: React.FunctionComponent<CellProps>;
+export declare const StyledGrid: StyletronComponent<StyledGridProps>;
+export declare const StyledCell: StyletronComponent<StyledCellProps>;

package/link/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 
 export interface LinkProps
   extends React.DetailedHTMLProps<
@@ -10,4 +10,4 @@ export interface LinkProps
   target?: '_self' | '_blank' | '_parent' | '_top';
 }
 
-export const StyledLink: StyletronComponent<LinkProps>;
+export declare const StyledLink: StyletronComponent<LinkProps>;

package/list/index.d.ts

@@ -1,25 +1,20 @@
-import {HeaderNavigationOverrides} from 'baseui/header-navigation';
+import { HeaderNavigationOverrides } from '../header-navigation';
 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 ARTWORK_SIZES {
+export declare const ARTWORK_SIZES: {
   SMALL: 'SMALL';
   MEDIUM: 'MEDIUM';
   LARGE: 'LARGE';
-}
-export const ARTWORK_SIZES: ARTWORK_SIZES;
-export type ArtworkSizesT =
-  | ARTWORK_SIZES['SMALL']
-  | ARTWORK_SIZES['MEDIUM']
-  | ARTWORK_SIZES['LARGE'];
+};
+export type ArtworkSizesT = typeof ARTWORK_SIZES[keyof typeof ARTWORK_SIZES];
 
-export interface SHAPE {
+export declare const SHAPE: {
   DEFAULT: 'DEFAULT';
   ROUND: 'ROUND';
-}
-export const SHAPE: SHAPE;
-export type ShapeT = SHAPE['DEFAULT'] | SHAPE['ROUND'];
+};
+export type ShapeT = typeof SHAPE[keyof typeof SHAPE];
 
 export interface StyledRootPropsT {
   $shape: ShapeT;
@@ -47,11 +42,11 @@ export interface LabelOverrides {
 }
 
 export interface PropsT {
-  artwork?: React.ReactNode;
+  artwork?: (args: { size: number }) => React.ReactNode;
   artworkSize?: ArtworkSizesT | number;
   shape?: ShapeT;
   children: React.ReactNode;
-  endEnhancer?: React.ReactNode;
+  endEnhancer?: () => React.ReactNode;
   overrides?: ListOverrides;
   sublist?: boolean;
 }
@@ -72,16 +67,16 @@ export interface MenuAdapterPropsT extends PropsT {
   $disabled: boolean;
 }
 
-export const ListItem: React.ForwardRefExoticComponent<
+export declare const ListItem: React.ForwardRefExoticComponent<
   PropsT & React.RefAttributes<HTMLLIElement>
 >;
-export const ListItemLabel: React.FC<LabelPropsT>;
-export const MenuAdapter: React.FC<MenuAdapterPropsT>;
+export declare const ListItemLabel: React.FC<LabelPropsT>;
+export declare const MenuAdapter: React.FC<MenuAdapterPropsT>;
 
-export const StyledRoot: StyletronComponent<{}>;
-export const StyledContent: StyletronComponent<StyledContentPropsT>;
-export const StyledEndEnhancerContainer: StyletronComponent<{}>;
-export const StyledArtworkContainer: StyletronComponent<StyledArtworkContainerPropsT>;
+export declare const StyledRoot: StyletronComponent<{}>;
+export declare const StyledContent: StyletronComponent<StyledContentPropsT>;
+export declare const StyledEndEnhancerContainer: StyletronComponent<{}>;
+export declare const StyledArtworkContainer: StyletronComponent<StyledArtworkContainerPropsT>;
 
 export interface HeadingPropsT {
   heading: React.ReactNode;
@@ -100,14 +95,14 @@ export type StyledHeadingHeadingPropsT = {
   $maxLines: 1 | 2;
 };
 
-export const ListHeading: React.ForwardRefExoticComponent<
+export declare const ListHeading: React.ForwardRefExoticComponent<
   HeadingPropsT & React.RefAttributes<HTMLLIElement>
 >;
 
-export const StyledHeadingRoot: StyletronComponent<{}>;
-export const StyledHeadingContent: StyletronComponent<{}>;
-export const StyledHeadingContentRow: StyletronComponent<{}>;
-export const StyledHeadingMainHeading: StyletronComponent<StyledHeadingHeadingPropsT>;
-export const StyledHeadingSubHeading: StyletronComponent<StyledHeadingHeadingPropsT>;
-export const StyledHeadingEndEnhancerContainer: StyletronComponent<StyledHeadingEndEnhancerContainerPropsT>;
-export const StyledHeadingEndEnhancerDescriptionContainer: StyletronComponent<{}>;
+export declare const StyledHeadingRoot: StyletronComponent<{}>;
+export declare const StyledHeadingContent: StyletronComponent<{}>;
+export declare const StyledHeadingContentRow: StyletronComponent<{}>;
+export declare const StyledHeadingMainHeading: StyletronComponent<StyledHeadingHeadingPropsT>;
+export declare const StyledHeadingSubHeading: StyletronComponent<StyledHeadingHeadingPropsT>;
+export declare const StyledHeadingEndEnhancerContainer: StyletronComponent<StyledHeadingEndEnhancerContainerPropsT>;
+export declare const StyledHeadingEndEnhancerDescriptionContainer: StyletronComponent<{}>;

package/{locale.ts → locale/index.d.ts}

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 interface AccordionLocale {
   collapse: string;
   expand: string;
@@ -101,3 +103,9 @@ export interface Locale {
   select: SelectLocale;
   toast: ToastLocale;
 }
+
+export interface LocaleProviderProps {
+  locale: Partial<Locale>;
+  children?: React.ReactNode;
+}
+export declare const LocaleProvider: React.FC<LocaleProviderProps>;