baseui 11.0.3 → 11.1.2

package/index.d.ts

@@ -1,99 +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 function withStyle<C extends StyletronComponent<any>, P extends object, T = Theme>(
-  component: C,
-  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
-): StyletronComponent<React.ComponentProps<C> & 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 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;

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>;