baseui 10.11.1 → 11.0.0

package/README.md

@@ -24,14 +24,14 @@ Add `baseui` and its peer dependencies to your project:
 
 ```bash
 # using yarn
-yarn add baseui styletron-react styletron-engine-atomic
+yarn add baseui styletron-react styletron-engine-monolithic
 
 # using npm
-npm install baseui styletron-react styletron-engine-atomic
+npm install baseui styletron-react styletron-engine-monolithic
 ```
 
 ```javascript
-import {Client as Styletron} from 'styletron-engine-atomic';
+import {Client as Styletron} from 'styletron-engine-monolithic';
 import {Provider as StyletronProvider} from 'styletron-react';
 import {LightTheme, BaseProvider, styled} from 'baseui';
 import {StatefulInput} from 'baseui/input';

package/accordion/accordion.js

@@ -87,6 +87,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       expanded: []
     }, _this.props.initialState));
 
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
+
     return _this;
   }
 
@@ -133,6 +135,56 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       this.setState(newState);
       typeof onChange === 'function' && onChange(newState);
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (this.props.disabled) {
+        return;
+      }
+
+      var itemRefs = this.itemRefs;
+      var HOME = 36;
+      var END = 35;
+      var ARROW_UP = 38;
+      var ARROW_DOWN = 40;
+
+      if (e.keyCode === HOME) {
+        e.preventDefault();
+        var firstItem = itemRefs[0];
+        firstItem.current && firstItem.current.focus();
+      }
+
+      if (e.keyCode === END) {
+        e.preventDefault();
+        var lastItem = itemRefs[itemRefs.length - 1];
+        lastItem.current && lastItem.current.focus();
+      }
+
+      if (e.keyCode === ARROW_UP) {
+        e.preventDefault();
+        var activeItemIdx = itemRefs.findIndex(function (item) {
+          return item.current === document.activeElement;
+        });
+
+        if (activeItemIdx > 0) {
+          var prevItem = itemRefs[activeItemIdx - 1];
+          prevItem.current && prevItem.current.focus();
+        }
+      }
+
+      if (e.keyCode === ARROW_DOWN) {
+        e.preventDefault();
+
+        var _activeItemIdx = itemRefs.findIndex(function (item) {
+          return item.current === document.activeElement;
+        });
+
+        if (_activeItemIdx < itemRefs.length - 1) {
+          var nextItem = itemRefs[_activeItemIdx + 1];
+          nextItem.current && nextItem.current.focus();
+        }
+      }
+    }
   }, {
     key: "getItems",
     value: function getItems() {
@@ -143,12 +195,15 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           accordion = _this$props2.accordion,
           disabled = _this$props2.disabled,
           children = _this$props2.children,
-          renderPanelContent = _this$props2.renderPanelContent,
           renderAll = _this$props2.renderAll,
           overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
 
       return React.Children.map(children, function (child, index) {
-        if (!child) return; // If there is no key provided use the panel order as a default key
+        if (!child) return;
+        var itemRef = /*#__PURE__*/React.createRef();
+
+        _this2.itemRefs.push(itemRef); // If there is no key provided use the panel order as a default key
+
 
         var key = child.key || String(index);
         var isExpanded = false;
@@ -161,9 +216,9 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
         var props = {
           key: key,
+          ref: itemRef,
           expanded: isExpanded || child.props.expanded,
           accordion: accordion,
-          renderPanelContent: renderPanelContent,
           renderAll: renderAll,
           overrides: child.props.overrides || overrides,
           disabled: child.props.disabled || disabled,
@@ -178,14 +233,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(child, props);
       });
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO(v11)
-      if (process.env.NODE_ENV !== "production" && this.props.renderPanelContent) {
-        console.warn('baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.');
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -201,7 +248,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "accordion",
         $disabled: this.props.disabled,
-        $isFocusVisible: false
+        $isFocusVisible: false,
+        onKeyDown: this.handleKeyDown.bind(this)
       }, rootProps), this.getItems());
     }
   }]);
@@ -220,7 +268,6 @@ _defineProperty(Accordion, "defaultProps", {
   onChange: function onChange() {},
   overrides: {},
   renderAll: false,
-  renderPanelContent: false,
   stateReducer: function stateReducer(type, newState) {
     return newState;
   }

package/accordion/accordion.js.flow

@@ -22,7 +22,6 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     onChange: () => {},
     overrides: {},
     renderAll: false,
-    renderPanelContent: false,
     stateReducer: (type, newState) => newState,
   };
 
@@ -31,6 +30,8 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     ...this.props.initialState,
   };
 
+  itemRefs = [];
+
   //flowlint-next-line unclear-type:off
   onPanelChange(key: React.Key, onChange: () => {}, ...args: Array<any>) {
     let activeKeys = this.state.expanded;
@@ -61,12 +62,56 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     typeof onChange === 'function' && onChange(newState);
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    if (this.props.disabled) {
+      return;
+    }
+
+    const itemRefs = this.itemRefs;
+
+    const HOME = 36;
+    const END = 35;
+    const ARROW_UP = 38;
+    const ARROW_DOWN = 40;
+
+    if (e.keyCode === HOME) {
+      e.preventDefault();
+      const firstItem = itemRefs[0];
+      firstItem.current && firstItem.current.focus();
+    }
+    if (e.keyCode === END) {
+      e.preventDefault();
+      const lastItem = itemRefs[itemRefs.length - 1];
+      lastItem.current && lastItem.current.focus();
+    }
+    if (e.keyCode === ARROW_UP) {
+      e.preventDefault();
+      const activeItemIdx = itemRefs.findIndex((item) => item.current === document.activeElement);
+      if (activeItemIdx > 0) {
+        const prevItem = itemRefs[activeItemIdx - 1];
+        prevItem.current && prevItem.current.focus();
+      }
+    }
+    if (e.keyCode === ARROW_DOWN) {
+      e.preventDefault();
+      const activeItemIdx = itemRefs.findIndex((item) => item.current === document.activeElement);
+      if (activeItemIdx < itemRefs.length - 1) {
+        const nextItem = itemRefs[activeItemIdx + 1];
+        nextItem.current && nextItem.current.focus();
+      }
+    }
+  }
+
   getItems() {
     const { expanded } = this.state;
-    const { accordion, disabled, children, renderPanelContent, renderAll, overrides } = this.props;
+    const { accordion, disabled, children, renderAll, overrides } = this.props;
     // flowlint-next-line unclear-type:off
     return React.Children.map(children, (child: any, index) => {
       if (!child) return;
+
+      const itemRef = React.createRef<HTMLDivElement>();
+      this.itemRefs.push(itemRef);
+
       // If there is no key provided use the panel order as a default key
       const key = child.key || String(index);
       let isExpanded = false;
@@ -78,9 +123,9 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
 
       const props = {
         key,
+        ref: itemRef,
         expanded: isExpanded || child.props.expanded,
         accordion,
-        renderPanelContent,
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
@@ -90,15 +135,6 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     });
   }
 
-  componentDidMount() {
-    // TODO(v11)
-    if (__DEV__ && this.props.renderPanelContent) {
-      console.warn(
-        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.'
-      );
-    }
-  }
-
   render() {
     const { overrides = {} } = this.props;
     const { Root: RootOverride } = overrides;
@@ -108,6 +144,7 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
         data-baseweb="accordion"
         $disabled={this.props.disabled}
         $isFocusVisible={false}
+        onKeyDown={this.handleKeyDown.bind(this)}
         {...rootProps}
       >
         {this.getItems()}

package/accordion/index.d.ts

@@ -37,7 +37,6 @@ export interface AccordionProps {
   onChange?: (args: {expanded: React.Key[]}) => any;
   overrides?: AccordionOverrides<SharedProps>;
   stateReducer?: StateReducer<AccordionState>;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 }
 
@@ -48,7 +47,6 @@ export type StatelessAccordionProps = {
   expanded: React.Key[];
   onChange?: (args: {expanded: React.Key[]; key: React.Key}) => any;
   overrides?: AccordionOverrides<SharedProps> & PanelOverrides<SharedProps>;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 };
 
@@ -85,7 +83,6 @@ export interface SharedPanelProps {
   onKeyDown?: (e: KeyboardEvent) => any;
   overrides?: PanelOverrides<SharedProps>;
   title?: React.ReactNode;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 }
 

package/accordion/panel.js

@@ -41,7 +41,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Panel = function Panel(_ref) {
+var Panel = function Panel(_ref, ref) {
   var ariaControls = _ref['aria-controls'],
       children = _ref.children,
       _ref$disabled = _ref.disabled,
@@ -58,8 +58,6 @@ var Panel = function Panel(_ref) {
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$renderPanelConte = _ref.renderPanelContent,
-      renderPanelContent = _ref$renderPanelConte === void 0 ? false : _ref$renderPanelConte,
       _ref$renderAll = _ref.renderAll,
       renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll;
 
@@ -214,7 +212,8 @@ var Panel = function Panel(_ref) {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onFocus: (0, _focusVisible.forkFocus)(headerProps, handleFocus),
-      onBlur: (0, _focusVisible.forkBlur)(headerProps, handleBlur)
+      onBlur: (0, _focusVisible.forkBlur)(headerProps, handleBlur),
+      ref: ref
     }), title, /*#__PURE__*/React.createElement(ToggleIcon, _extends({
       viewBox: "0 0 24 24",
       title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand,
@@ -240,9 +239,11 @@ var Panel = function Panel(_ref) {
       ref: _animateRef
     }, sharedProps, contentProps, ariaControls ? {
       id: ariaControls
-    } : {}), localState.expanded || renderAll || renderPanelContent || localState.animationInProgress ? children : null)));
+    } : {}), localState.expanded || renderAll || localState.animationInProgress ? children : null)));
   });
 };
 
-var _default = Panel;
+var ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+var _default = ForwardedPanel;
 exports.default = _default;

package/accordion/panel.js.flow

@@ -20,19 +20,21 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 import type { PanelPropsT } from './types.js';
 
-const Panel = ({
-  'aria-controls': ariaControls,
-  children,
-  disabled = false,
-  expanded = false,
-  onChange = () => {},
-  onClick = () => {},
-  onKeyDown = () => {},
-  overrides = {},
-  title = '',
-  renderPanelContent = false,
-  renderAll = false,
-}: PanelPropsT) => {
+const Panel = (
+  {
+    'aria-controls': ariaControls,
+    children,
+    disabled = false,
+    expanded = false,
+    onChange = () => {},
+    onClick = () => {},
+    onKeyDown = () => {},
+    overrides = {},
+    title = '',
+    renderAll = false,
+  }: PanelPropsT,
+  ref
+) => {
   const [localState, setLocalState] = React.useState({
     expanded,
     isFocusVisible: false,
@@ -176,6 +178,7 @@ const Panel = ({
             onKeyDown={handleKeyDown}
             onFocus={forkFocus(headerProps, handleFocus)}
             onBlur={forkBlur(headerProps, handleBlur)}
+            ref={ref}
           >
             {title}
             <ToggleIcon
@@ -215,12 +218,7 @@ const Panel = ({
               {...contentProps}
               {...(ariaControls ? { id: ariaControls } : {})}
             >
-              {localState.expanded ||
-              renderAll ||
-              renderPanelContent ||
-              localState.animationInProgress
-                ? children
-                : null}
+              {localState.expanded || renderAll || localState.animationInProgress ? children : null}
             </Content>
           </ContentAnimationContainer>
         </PanelContainer>
@@ -229,7 +227,9 @@ const Panel = ({
   );
 };
 
-export default Panel;
+const ForwardedPanel = React.forwardRef<PanelPropsT, HTMLElement>(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/accordion/stateless-accordion.js

@@ -52,8 +52,7 @@ function StatelessAccordion(_ref) {
       onChange = _ref.onChange,
       _ref$overrides = _ref.overrides,
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      renderAll = _ref.renderAll,
-      renderPanelContent = _ref.renderPanelContent;
+      renderAll = _ref.renderAll;
 
   var RootOverrides = overrides.Root,
       PanelOverrides = _objectWithoutProperties(overrides, ["Root"]);
@@ -97,8 +96,7 @@ function StatelessAccordion(_ref) {
         });
       } : onChange,
       overrides: child.props.overrides || PanelOverrides,
-      renderAll: renderAll,
-      renderPanelContent: renderPanelContent
+      renderAll: renderAll
     });
   }));
 }

package/accordion/stateless-accordion.js.flow

@@ -18,7 +18,6 @@ function StatelessAccordion({
   onChange,
   overrides = {},
   renderAll,
-  renderPanelContent,
 }: StatelessAccordionPropsT) {
   const { Root: RootOverrides, ...PanelOverrides } = overrides;
   const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
@@ -53,7 +52,6 @@ function StatelessAccordion({
               : onChange,
           overrides: child.props.overrides || PanelOverrides,
           renderAll,
-          renderPanelContent,
         });
       })}
     </Root>

package/accordion/types.js.flow

@@ -77,11 +77,6 @@ export type AccordionPropsT = {
   /** Handler called each time the component state changes.
    * Used to override default state-change functionality. */
   stateReducer: StateReducerT,
-  /**
-   * Allows users to render all child content whether a panel is expanded or not
-   * for SEO purposed
-   */
-  renderPanelContent?: boolean,
   /**
    * Allows users to render all child content whether a panel is expanded or not
    * for SEO purposed

package/button/constants.js

@@ -14,8 +14,7 @@ LICENSE file in the root directory of this source tree.
 var KIND = {
   primary: 'primary',
   secondary: 'secondary',
-  tertiary: 'tertiary',
-  minimal: 'minimal'
+  tertiary: 'tertiary'
 };
 exports.KIND = KIND;
 var SHAPE = {

package/button/constants.js.flow

@@ -10,7 +10,6 @@ export const KIND = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
-  minimal: 'minimal',
 };
 
 export const SHAPE = {

package/button/index.d.ts

@@ -10,7 +10,6 @@ export interface KIND {
   primary: 'primary';
   secondary: 'secondary';
   tertiary: 'tertiary';
-  minimal: 'minimal';
 }
 
 export interface SIZE {

package/button/styled-components.js

@@ -215,14 +215,6 @@ function getLoadingSpinnerColors(_ref8) {
         };
       }
 
-    case _constants.KIND.minimal:
-      {
-        return {
-          foreground: $theme.colors.buttonMinimalSpinnerForeground,
-          background: $theme.colors.buttonMinimalSpinnerBackground
-        };
-      }
-
     case _constants.KIND.primary:
     default:
       {
@@ -291,7 +283,7 @@ function getDisabledStyles(_ref11) {
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill
       };
-    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+    } else if ($kind === _constants.KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText
@@ -300,7 +292,7 @@ function getDisabledStyles(_ref11) {
   }
 
   return {
-    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
 }
@@ -429,25 +421,6 @@ function getColorStyles(_ref13) {
         }
       };
 
-    case _constants.KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill
-        };
-      }
-
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonMinimalActive : $theme.colors.buttonMinimalHover
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive
-        }
-      };
-
     default:
       return Object.freeze({});
   }

package/button/styled-components.js.flow

@@ -175,12 +175,6 @@ function getLoadingSpinnerColors({ $theme, $kind, $disabled }) {
         background: $theme.colors.buttonTertiarySpinnerBackground,
       };
     }
-    case KIND.minimal: {
-      return {
-        foreground: $theme.colors.buttonMinimalSpinnerForeground,
-        background: $theme.colors.buttonMinimalSpinnerBackground,
-      };
-    }
     case KIND.primary:
     default: {
       return {
@@ -234,7 +228,7 @@ function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill,
       };
-    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+    } else if ($kind === KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText,
@@ -243,10 +237,7 @@ function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
   }
 
   return {
-    backgroundColor:
-      $kind === KIND.minimal || $kind === KIND.tertiary
-        ? 'transparent'
-        : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText,
   };
 }
@@ -383,25 +374,6 @@ function getColorStyles({
           backgroundColor: $theme.colors.buttonTertiaryActive,
         },
       };
-    case KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill,
-        };
-      }
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading
-            ? $theme.colors.buttonMinimalActive
-            : $theme.colors.buttonMinimalHover,
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive,
-        },
-      };
     default:
       return Object.freeze({});
   }