baseui 0.0.0-next-5855449 → 0.0.0-next-aab5904

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() {
@@ -148,7 +200,11 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           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,6 +217,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
         var props = {
           key: key,
+          ref: itemRef,
           expanded: isExpanded || child.props.expanded,
           accordion: accordion,
           renderPanelContent: renderPanelContent,
@@ -201,7 +258,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());
     }
   }]);

package/accordion/accordion.js.flow

@@ -31,6 +31,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 +63,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;
     // 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,6 +124,7 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
 
       const props = {
         key,
+        ref: itemRef,
         expanded: isExpanded || child.props.expanded,
         accordion,
         renderPanelContent,
@@ -108,6 +155,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/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,
@@ -214,7 +214,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,
@@ -244,5 +245,7 @@ var Panel = function Panel(_ref) {
   });
 };
 
-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,22 @@ 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 = '',
+    renderPanelContent = false,
+    renderAll = false,
+  }: PanelPropsT,
+  ref
+) => {
   const [localState, setLocalState] = React.useState({
     expanded,
     isFocusVisible: false,
@@ -176,6 +179,7 @@ const Panel = ({
             onKeyDown={handleKeyDown}
             onFocus={forkFocus(headerProps, handleFocus)}
             onBlur={forkBlur(headerProps, handleBlur)}
+            ref={ref}
           >
             {title}
             <ToggleIcon
@@ -229,7 +233,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/es/accordion/accordion.js

@@ -22,6 +22,8 @@ export default class Accordion extends React.Component {
       expanded: [],
       ...this.props.initialState
     });
+
+    _defineProperty(this, "itemRefs", []);
   }
 
   //flowlint-next-line unclear-type:off
@@ -64,6 +66,50 @@ export default class Accordion extends React.Component {
     typeof onChange === 'function' && onChange(newState);
   }
 
+  handleKeyDown(e) {
+    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
@@ -78,7 +124,9 @@ export default class Accordion extends React.Component {
     } = this.props; // flowlint-next-line unclear-type:off
 
     return React.Children.map(children, (child, index) => {
-      if (!child) return; // If there is no key provided use the panel order as a default key
+      if (!child) return;
+      const itemRef = /*#__PURE__*/React.createRef();
+      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;
@@ -91,6 +139,7 @@ export default class Accordion extends React.Component {
 
       const props = {
         key,
+        ref: itemRef,
         expanded: isExpanded || child.props.expanded,
         accordion,
         renderPanelContent,
@@ -121,7 +170,8 @@ export default class Accordion extends 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());
   }
 

package/es/accordion/panel.js

@@ -24,7 +24,7 @@ const Panel = ({
   title = '',
   renderPanelContent = false,
   renderAll = false
-}) => {
+}, ref) => {
   const [localState, setLocalState] = React.useState({
     expanded,
     isFocusVisible: false,
@@ -148,7 +148,8 @@ const Panel = ({
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onFocus: forkFocus(headerProps, handleFocus),
-    onBlur: forkBlur(headerProps, handleBlur)
+    onBlur: 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,
@@ -177,4 +178,6 @@ const Panel = ({
   } : {}), localState.expanded || renderAll || renderPanelContent || localState.animationInProgress ? children : null))));
 };
 
-export default Panel;
+const ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;

package/esm/accordion/accordion.js

@@ -81,6 +81,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       expanded: []
     }, _this.props.initialState));
 
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
+
     return _this;
   }
 
@@ -127,6 +129,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() {
@@ -142,7 +194,11 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           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;
@@ -155,6 +211,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
         var props = {
           key: key,
+          ref: itemRef,
           expanded: isExpanded || child.props.expanded,
           accordion: accordion,
           renderPanelContent: renderPanelContent,
@@ -195,7 +252,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());
     }
   }]);

package/esm/accordion/panel.js

@@ -30,7 +30,7 @@ import { getOverrides } from '../helpers/overrides.js';
 import { PanelContainer as StyledPanelContainer, Header as StyledHeader, Content as StyledContent, ToggleIcon as StyledToggleIcon, ToggleIconGroup as StyledToggleIconGroup, ContentAnimationContainer as StyledContentAnimationContainer } from './styled-components.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-var Panel = function Panel(_ref) {
+var Panel = function Panel(_ref, ref) {
   var ariaControls = _ref['aria-controls'],
       children = _ref.children,
       _ref$disabled = _ref.disabled,
@@ -203,7 +203,8 @@ var Panel = function Panel(_ref) {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onFocus: forkFocus(headerProps, handleFocus),
-      onBlur: forkBlur(headerProps, handleBlur)
+      onBlur: 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,
@@ -233,4 +234,6 @@ var Panel = function Panel(_ref) {
   });
 };
 
-export default Panel;
+var ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
+ForwardedPanel.displayName = 'Panel';
+export default ForwardedPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-5855449",
+  "version": "0.0.0-next-aab5904",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",