baseui 11.0.2 → 11.1.1

package/table-semantic/table-builder.js.flow

@@ -19,13 +19,13 @@ import {
   StyledTableBodyCell,
   StyledTableLoadingMessage,
   StyledTableEmptyMessage,
-  StyledSortAscIcon,
-  StyledSortDescIcon,
-  StyledSortNoneIcon,
+  StyledSortIconContainer,
 } from './styled-components.js';
 import { getOverrides } from '../helpers/overrides.js';
+import Blank from '../icon/blank.js';
+import ChevronDown from '../icon/chevron-down.js';
+import ChevronUp from '../icon/chevron-up.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
-
 import type { TableBuilderPropsT } from './types.js';
 
 export default class TableBuilder<T> extends React.Component<
@@ -113,17 +113,16 @@ export default class TableBuilder<T> extends React.Component<
       StyledTableEmptyMessage
     );
 
-    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, StyledSortAscIcon);
-
-    const [SortDescIcon, sortDescIconProps] = getOverrides(
-      overrides.SortDescIcon,
-      StyledSortDescIcon
+    const [SortIconContainer, sortIconContainerProps] = getOverrides(
+      overrides.SortIconContainer,
+      StyledSortIconContainer
     );
 
-    const [SortNoneIcon, sortNoneIconProps] = getOverrides(
-      overrides.SortNoneIcon,
-      StyledSortNoneIcon
-    );
+    const [SortAscIcon, sortAscIconProps] = getOverrides(overrides.SortAscIcon, ChevronUp);
+
+    const [SortDescIcon, sortDescIconProps] = getOverrides(overrides.SortDescIcon, ChevronDown);
+
+    const [SortNoneIcon, sortNoneIconProps] = getOverrides(overrides.SortNoneIcon, Blank);
 
     const columns = React.Children.toArray(children)
       .filter(Boolean)
@@ -164,15 +163,31 @@ export default class TableBuilder<T> extends React.Component<
 
       switch (col.id === sortColumn && sortOrder) {
         case 'ASC':
-          sortIcon = <SortAscIcon aria-hidden={true} role="presentation" {...sortAscIconProps} />;
+          sortIcon = (
+            <SortAscIcon size="16px" aria-hidden={true} role="presentation" {...sortAscIconProps} />
+          );
           sortLabel = 'ascending sorting';
           break;
         case 'DESC':
-          sortIcon = <SortDescIcon aria-hidden={true} role="presentation" {...sortDescIconProps} />;
+          sortIcon = (
+            <SortDescIcon
+              size="16px"
+              aria-hidden={true}
+              role="presentation"
+              {...sortDescIconProps}
+            />
+          );
           sortLabel = 'descending sorting';
           break;
         default:
-          sortIcon = <SortNoneIcon aria-hidden={true} role="presentation" {...sortNoneIconProps} />;
+          sortIcon = (
+            <SortNoneIcon
+              size="16px"
+              aria-hidden={true}
+              role="presentation"
+              {...sortNoneIconProps}
+            />
+          );
           break;
       }
 
@@ -198,7 +213,7 @@ export default class TableBuilder<T> extends React.Component<
           {...colTableHeadCellSortableProps}
         >
           {col.header}
-          {sortIcon}
+          <SortIconContainer {...sortIconContainerProps}>{sortIcon}</SortIconContainer>
         </ColTableHeadCellSortable>
       );
     }

package/table-semantic/types.js.flow

@@ -41,6 +41,7 @@ export type TablePropsT = {
 export type BuilderOverridesT = {
   ...OverridesT,
   TableHeadCellSortable?: OverrideT,
+  SortIconContainer?: OverrideT,
   SortAscIcon?: OverrideT,
   SortDescIcon?: OverrideT,
   SortNoneIcon?: OverrideT,

package/tabs/index.d.ts

@@ -1,23 +1,23 @@
 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 ORIENTATION {
+export declare const ORIENTATION: {
   horizontal: 'horizontal';
   vertical: 'vertical';
-}
-export interface STATE_CHANGE_TYPE {
+};
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export interface State {
   activeKey: React.Key;
 }
 
 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 interface TabsOverrides<T> {
@@ -32,12 +32,12 @@ export interface TabsProps {
   activeKey?: React.Key;
   disabled?: boolean;
   renderAll?: boolean;
-  onChange?: (args: {activeKey: React.Key}) => any;
-  orientation?: ORIENTATION[keyof ORIENTATION];
-  overrides?: TabsOverrides<SharedProps & {$active?: boolean}>;
+  onChange?: (args: { activeKey: React.Key }) => any;
+  orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
+  overrides?: TabsOverrides<SharedProps & { $active?: boolean }>;
 }
 
-export const Tabs: React.FC<TabsProps>;
+export declare const Tabs: React.FC<TabsProps>;
 
 export type StatefulTabsProps = TabsProps & {
   activeKey?: never;
@@ -49,8 +49,8 @@ export type StatefulTabsProps = TabsProps & {
 export class StatefulTabs extends React.Component<StatefulTabsProps, State> {
   onTabChange(newState: State): 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;
   getInitialKey(): any;
 }
@@ -62,7 +62,7 @@ export interface TabOverrides<T> {
 export interface SharedProps {
   $disabled?: boolean;
   $active?: boolean;
-  $orientation?: ORIENTATION[keyof ORIENTATION];
+  $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
 }
 
 export interface TabProps {
@@ -76,7 +76,7 @@ export interface TabProps {
   overrides?: TabOverrides<SharedProps>;
   title?: React.ReactNode;
   id?: string;
-  $orientation?: ORIENTATION[keyof ORIENTATION];
+  $orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
 }
 
 export class Tab extends React.Component<TabProps> {
@@ -85,10 +85,7 @@ export class Tab extends React.Component<TabProps> {
   getSharedProps(): SharedProps;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTab: StyletronComponent<any>;
-export const StyledTabBar: StyletronComponent<any>;
-export const StyledTabContent: StyletronComponent<any>;
-
-export const ORIENTATION: ORIENTATION;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTab: StyletronComponent<any>;
+export declare const StyledTabBar: StyletronComponent<any>;
+export declare const StyledTabContent: StyletronComponent<any>;

package/tabs-motion/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';
 
 // constants
 
@@ -20,23 +20,23 @@ export enum STATE_CHANGE_TYPE {
 
 // utils
 
-export const getTabId: (uid: string, key: React.Key) => string;
-export const getTabPanelId: (uid: string, key: React.Key) => string;
-export const isHorizontal: (orientation: ORIENTATION) => boolean;
-export const isVertical: (orientation: ORIENTATION) => boolean;
-export const isIntrinsic: (fill: FILL) => boolean;
-export const isFixed: (fill: FILL) => boolean;
-export const isRTL: (direction: string) => boolean;
+export declare const getTabId: (uid: string, key: React.Key) => string;
+export declare const getTabPanelId: (uid: string, key: React.Key) => string;
+export declare const isHorizontal: (orientation: ORIENTATION) => boolean;
+export declare const isVertical: (orientation: ORIENTATION) => boolean;
+export declare const isIntrinsic: (fill: FILL) => boolean;
+export declare const isFixed: (fill: FILL) => boolean;
+export declare const isRTL: (direction: string) => boolean;
 
 // styled-components
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledTabList: StyletronComponent<any>;
-export const StyledTab: StyletronComponent<any>;
-export const StyledArtworkContainer: StyletronComponent<any>;
-export const StyledTabBorder: StyletronComponent<any>;
-export const StyledTabHighlight: StyletronComponent<any>;
-export const StyledTabPanel: StyletronComponent<any>;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledTabList: StyletronComponent<any>;
+export declare const StyledTab: StyletronComponent<any>;
+export declare const StyledArtworkContainer: StyletronComponent<any>;
+export declare const StyledTabBorder: StyletronComponent<any>;
+export declare const StyledTabHighlight: StyletronComponent<any>;
+export declare const StyledTabPanel: StyletronComponent<any>;
 
 // tabs
 
@@ -63,16 +63,16 @@ interface TabsProps {
   children: React.ReactNode;
   activeKey?: React.Key;
   disabled?: boolean;
-  fill?: FILL[keyof FILL];
-  orientation?: ORIENTATION[keyof ORIENTATION];
+  fill?: typeof FILL[keyof typeof FILL];
+  orientation?: typeof ORIENTATION[keyof typeof ORIENTATION];
   activateOnFocus?: boolean;
   renderAll?: boolean;
-  onChange?: (params: {activeKey: React.Key}) => void;
+  onChange?: (params: { activeKey: React.Key }) => void;
   overrides?: TabsOverrides;
   uid?: string;
 }
 
-export const Tabs: React.FC<TabsProps>;
+export declare const Tabs: React.FC<TabsProps>;
 
 // tab
 
@@ -101,7 +101,7 @@ interface TabProps {
   tabRef?: React.MutableRefObject<HTMLButtonElement | undefined>;
 }
 
-export const Tab: React.FC<TabProps>;
+export declare const Tab: React.FC<TabProps>;
 
 // stateful-tabs
 
@@ -110,7 +110,7 @@ interface State {
 }
 
 interface Action {
-  type: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE];
+  type: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
   payload: React.Key;
 }
 
@@ -121,4 +121,4 @@ type StatefulTabsProps = TabsProps & {
   stateReducer?: StateReducer;
 };
 
-export const StatefulTabs: React.FC<StatefulTabsProps>;
+export declare const StatefulTabs: React.FC<StatefulTabsProps>;

package/tag/index.d.ts

@@ -1,8 +1,8 @@
 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 KIND {
+export declare const KIND: {
   custom: 'custom';
   neutral: 'neutral';
   primary: 'primary';
@@ -19,19 +19,19 @@ export interface KIND {
   green: 'green';
   purple: 'purple';
   brown: 'brown';
-}
+};
 
-export interface VARIANT {
+export declare const VARIANT: {
   solid: 'solid';
   light: 'light';
   outlined: 'outlined';
-}
+};
 
-export interface SIZE {
+export declare const SIZE: {
   small: 'small';
   medium: 'medium';
   large: 'large';
-}
+};
 
 export interface TagOverrides {
   Root?: Override<any>;
@@ -47,12 +47,12 @@ export interface TagProps {
   disabled?: boolean;
   isFocused?: boolean;
   isHovered?: boolean;
-  kind?: KIND[keyof KIND];
-  variant?: VARIANT[keyof VARIANT];
+  kind?: typeof KIND[keyof typeof KIND];
+  variant?: typeof VARIANT[keyof typeof VARIANT];
   children?: React.ReactNode;
   title?: string;
   color?: string;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   onActionClick?: (e: Event, children?: React.ReactNode) => any;
   onActionKeyDown?: (e: Event, children?: React.ReactNode) => any;
   onClick?: (event: Event) => any;
@@ -65,10 +65,6 @@ export class Tag extends React.Component<TagProps> {
   handleActionKeyDown(event: KeyboardEvent): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledAction: StyletronComponent<any>;
-export const StyledText: StyletronComponent<any>;
-
-export const KIND: KIND;
-export const VARIANT: VARIANT;
-export const SIZE: SIZE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledAction: StyletronComponent<any>;
+export declare const StyledText: StyletronComponent<any>;

package/textarea/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 import {
   BaseInputProps,
   StatefulContainer,
@@ -13,30 +13,27 @@ export interface TextareaProps extends BaseInputProps<HTMLTextAreaElement> {
   maxLength?: number;
 }
 
-export interface ADJOINED {
+export declare const ADJOINED: {
   none: 'none';
   left: 'left';
   right: 'right';
   both: 'both';
-}
-export interface SIZE {
+};
+export declare const SIZE: {
   default: 'default';
   compact: 'compact';
   large: 'large';
-}
+};
 
 export class Textarea extends React.Component<TextareaProps> {}
 
-export type StatefulTextareaProps = TextareaProps &
-  StatefulContainerProps & {children?: never};
+export type StatefulTextareaProps = TextareaProps & StatefulContainerProps & { children?: never };
 
-export const StatefulTextarea: React.FC<StatefulTextareaProps>;
+export declare const StatefulTextarea: React.FC<StatefulTextareaProps>;
 
-export {StatefulContainer};
+export { StatefulContainer };
 
-export const StyledTextareaContainer: StyletronComponent<any>;
-export const StyledTextarea: StyletronComponent<any>;
+export declare const StyledTextareaContainer: StyletronComponent<any>;
+export declare const StyledTextarea: StyletronComponent<any>;
 
-export const ADJOINED: ADJOINED;
-export const SIZE: SIZE;
-export {STATE_CHANGE_TYPE};
+export { STATE_CHANGE_TYPE };

package/textarea/textarea.js

@@ -72,23 +72,27 @@ var Textarea = /*#__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;
@@ -116,6 +120,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "textarea",
         $isFocused: this.state.isFocused,
+        $isReadOnly: this.props.readOnly,
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
@@ -136,6 +141,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: function onBlur() {},

package/textarea/textarea.js.flow

@@ -19,6 +19,7 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
   static defaultProps = {
     autoFocus: false,
     disabled: false,
+    readOnly: false,
     error: false,
     name: '',
     onBlur: () => {},
@@ -35,17 +36,21 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
   };
 
   state = {
-    isFocused: this.props.autoFocus || false,
+    isFocused: (this.props.autoFocus && !this.props.readOnly) || false,
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({ isFocused: true });
-    this.props.onFocus(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: true });
+      this.props.onFocus(e);
+    }
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLTextAreaElement>) => {
-    this.setState({ isFocused: false });
-    this.props.onBlur(e);
+    if (!this.props.readOnly) {
+      this.setState({ isFocused: false });
+      this.props.onBlur(e);
+    }
   };
 
   render() {
@@ -63,6 +68,7 @@ class Textarea extends React.Component<TextareaPropsT, { isFocused: boolean }> {
       <Root
         data-baseweb="textarea"
         $isFocused={this.state.isFocused}
+        $isReadOnly={this.props.readOnly}
         $disabled={this.props.disabled}
         $error={this.props.error}
         $positive={this.props.positive}

package/textarea/types.js.flow

@@ -20,6 +20,7 @@ export type SharedStylePropsT = {
   $disabled: boolean,
   $error: boolean,
   $isFocused: boolean,
+  $isReadOnly: boolean,
   $positive?: boolean,
   $required: boolean,
   $size: SizeT,