@instructure/ui-tabs 11.7.10 → 11.7.11-snapshot-4

package/lib/Tabs/v2/index.js

@@ -16,7 +16,7 @@ var _keycode = _interopRequireDefault(require("keycode"));
 var _latest = require("@instructure/ui-view/latest");
 var _uiReactUtils = require("@instructure/ui-react-utils");
 var _console = require("@instructure/console");
-var _uiFocusable = require("@instructure/ui-focusable");
+var _uiI18n = require("@instructure/ui-i18n");
 var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _debounce = require("@instructure/debounce");
 var _uiUtils = require("@instructure/ui-utils");
@@ -26,7 +26,7 @@ var _index = require("./Tab/index.js");
 var _index2 = require("./Panel/index.js");
 var _props = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class;
+var _dec, _dec2, _dec3, _class;
 /*
  * The MIT License (MIT)
  *
@@ -55,19 +55,19 @@ var _dec, _dec2, _class;
 category: components
 ---
 **/
-let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Tabs extends _react.Component {
+let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec3 = (0, _uiI18n.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = class Tabs extends _react.Component {
   static displayName = 'Tabs';
   static componentId = 'Tabs';
   static allowedProps = _props.allowedProps;
   static defaultProps = {
     variant: 'default',
     shouldFocusOnRender: false,
-    tabOverflow: 'stack'
+    tabOverflow: 'stack',
+    activationMode: 'auto'
   };
   static Panel = _index2.Panel;
   static Tab = _index.Tab;
   _tabList = null;
-  _focusable = null;
   _tabListPosition;
   _debounced;
   _resizeListener;
@@ -197,26 +197,74 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       }
     }
   }
+  get isRtl() {
+    return this.props.dir === _uiI18n.textDirectionContextConsumer.DIRECTION.rtl;
+  }
   handleTabClick = (event, {
     index
   }) => {
-    const nextTab = this.getNextTab(index, 0);
-    this.fireOnChange(event, nextTab);
+    const target = this.getNextTab(this.getTabs(), index, 0);
+    if (target) {
+      this.fireOnChange(event, target);
+    }
   };
   handleTabKeyDown = (event, {
     index
   }) => {
-    let nextTab;
-    if (event.keyCode === _keycode.default.codes.up || event.keyCode === _keycode.default.codes.left) {
-      // Select next tab to the left
-      nextTab = this.getNextTab(index, -1);
-    } else if (event.keyCode === _keycode.default.codes.down || event.keyCode === _keycode.default.codes.right) {
-      // Select next tab to the right
-      nextTab = this.getNextTab(index, 1);
+    const tabs = this.getTabs();
+    let target;
+    let isActivation = false;
+    switch (event.keyCode) {
+      case _keycode.default.codes.left:
+        target = this.getNextTab(tabs, index, this.isRtl ? 1 : -1);
+        break;
+      case _keycode.default.codes.right:
+        target = this.getNextTab(tabs, index, this.isRtl ? -1 : 1);
+        break;
+      case _keycode.default.codes.up:
+        target = this.getNextTab(tabs, index, -1);
+        break;
+      case _keycode.default.codes.down:
+        target = this.getNextTab(tabs, index, 1);
+        break;
+      case _keycode.default.codes.home:
+        target = this.getEdgeTab(tabs, 'first');
+        break;
+      case _keycode.default.codes.end:
+        target = this.getEdgeTab(tabs, 'last');
+        break;
+      case _keycode.default.codes.enter:
+      case _keycode.default.codes.space:
+        target = this.getNextTab(tabs, index, 0);
+        isActivation = true;
+        break;
+      default:
+        return;
     }
-    if (nextTab) {
-      event.preventDefault();
-      this.fireOnChange(event, nextTab);
+    event.stopPropagation();
+    event.preventDefault();
+    if (!target) {
+      return;
+    }
+    if (isActivation || this.props.activationMode !== 'manual') {
+      this.fireOnChange(event, target);
+    }
+    this.focusTab(target.tabDomId);
+  };
+  handleTabFocus = (_event, {
+    id
+  }) => {
+    if (this.state.focusedTabId !== id) {
+      this.setState({
+        focusedTabId: id
+      });
+    }
+  };
+  handleTabListBlur = event => {
+    if (!(0, _uiDomUtils.contains)(event.currentTarget, event.relatedTarget)) {
+      this.setState({
+        focusedTabId: undefined
+      });
     }
   };
   handleResize = () => {
@@ -225,67 +273,129 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
     });
     this._tabListPosition = (0, _uiDomUtils.getBoundingClientRect)(this._tabList);
   };
-  getNextTab(startIndex, step) {
-    const tabs = _react.Children.toArray(this.props.children).map(child => (0, _uiReactUtils.matchComponentTypes)(child, [_index2.Panel]) && child);
+
+  /**
+   * The single source of truth for tab order, ids and state.
+   */
+  getTabs() {
+    const panels = [];
+    _react.Children.toArray(this.props.children).forEach((child, index) => {
+      if ((0, _uiReactUtils.matchComponentTypes)(child, [_index2.Panel])) {
+        panels.push({
+          index,
+          panel: child
+        });
+      }
+    });
+    const explicitlySelected = panels.find(({
+      panel
+    }) => panel.props.isSelected && !panel.props.isDisabled);
+    const fallbackIndex = explicitlySelected ? explicitlySelected.index : 0;
+    return panels.map(({
+      index,
+      panel
+    }) => {
+      const baseId = panel.props.id || this.props.deterministicId(`Tabs_${index}`);
+      const isDisabled = !!panel.props.isDisabled;
+      return {
+        index,
+        tabDomId: `tab-${baseId}`,
+        panelDomId: panel.props.id || `panel-${baseId}`,
+        isDisabled,
+        isSelected: !isDisabled && (!!panel.props.isSelected || index === fallbackIndex),
+        panel
+      };
+    });
+  }
+  getNextTab(tabs, startIndex, step) {
     const count = tabs.length;
-    const change = step < 0 ? step + count : step;
-    (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
-    let nextIndex = startIndex;
-    let nextTab;
-    do {
-      nextIndex = (nextIndex + change) % count;
-      nextTab = tabs[nextIndex];
-    } while (nextTab && nextTab.props && nextTab.props.isDisabled);
-    (0, _console.logError)(nextIndex >= 0 && nextIndex < count, `[Tabs] Invalid tab index: '${nextIndex}'.`);
-    return {
-      index: nextIndex,
-      id: nextTab.props.id
-    };
+    const from = tabs.findIndex(tab => tab.index === startIndex);
+    (0, _console.logError)(from >= 0, `[Tabs] Invalid tab index: '${startIndex}'.`);
+    if (from < 0) {
+      return undefined;
+    }
+    if (step === 0) {
+      return tabs[from];
+    }
+    for (let offset = 1; offset <= count; offset++) {
+      const candidate = tabs[((from + step * offset) % count + count) % count];
+      if (!candidate.isDisabled) {
+        return candidate;
+      }
+    }
+    return undefined;
+  }
+  getEdgeTab(tabs, edge) {
+    const enabled = tabs.filter(tab => !tab.isDisabled);
+    return edge === 'first' ? enabled[0] : enabled[enabled.length - 1];
+  }
+  getRovingTabId(tabs) {
+    const {
+      focusedTabId
+    } = this.state;
+    const focused = tabs.find(tab => tab.tabDomId === focusedTabId && !tab.isDisabled);
+    return focused?.tabDomId ?? tabs.find(tab => tab.isSelected)?.tabDomId ?? tabs.find(tab => !tab.isDisabled)?.tabDomId;
   }
   fireOnChange(event, {
     index,
-    id
+    panel,
+    tabDomId
   }) {
     if (typeof this.props.onRequestTabChange === 'function') {
       this.props.onRequestTabChange(event, {
         index,
-        id
+        id: panel.props.id
       });
     }
-
-    // this is needed because keypress cancels scrolling. So we have to trigger the scrolling
+    this.scrollTabIntoView(tabDomId);
+  }
+  scrollTabIntoView(tabDomId) {
     // one "tick" later than the keypress
     setTimeout(() => {
       if (this.state.withTabListOverflow) {
-        const tab = id ? this._tabList.querySelector(`#tab-${CSS.escape(id)}`) : null;
-        this.showActiveTabIfOverlayed(tab);
+        this.showActiveTabIfOverlayed(this._tabList.querySelector(`#${CSS.escape(tabDomId)}`));
       }
     }, 0);
   }
-  createTab(index, generatedId, selected, panel) {
-    const id = panel.props.id || generatedId;
+  createTab(tab, isTabbable) {
+    const {
+      index,
+      tabDomId,
+      panelDomId,
+      isSelected,
+      isDisabled,
+      panel
+    } = tab;
     return (0, _jsxRuntime.jsx)(_index.Tab, {
       variant: this.props.variant,
-      id: `tab-${id}`,
-      controls: panel.props.id || `panel-${id}`,
+      id: tabDomId,
+      controls: panelDomId,
       index: index,
-      isSelected: selected,
-      isDisabled: panel.props.isDisabled,
+      isSelected: isSelected,
+      isDisabled: isDisabled,
+      isTabbable: isTabbable,
       onClick: this.handleTabClick,
       onKeyDown: this.handleTabKeyDown,
+      onFocus: this.handleTabFocus,
       isOverflowScroll: this.props.tabOverflow === 'scroll',
       children: panel.props.renderTitle
     }, `tab-${index}`);
   }
-  clonePanel(index, generatedId, selected, panel, activePanel) {
-    const id = panel.props.id || generatedId;
+  clonePanel(tab, activePanel) {
+    const {
+      index,
+      tabDomId,
+      panelDomId,
+      isSelected,
+      panel
+    } = tab;
 
     // fixHeight can be 0, so simply `fixheight` could return falsy value
     const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
     const commonProps = {
-      id: panel.props.id || `panel-${id}`,
-      labelledBy: `tab-${id}`,
-      isSelected: selected,
+      id: panelDomId,
+      labelledBy: tabDomId,
+      isSelected,
       variant: this.props.variant,
       maxHeight: !hasFixedHeight ? this.props.maxHeight : undefined,
       minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
@@ -311,14 +421,19 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       });
     }
   }
-  handleFocusableRef = el => {
-    this._focusable = el;
-  };
   handleTabListRef = el => {
     this._tabList = el;
   };
   focus() {
-    this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
+    this.focusTab(this.getRovingTabId(this.getTabs()));
+  }
+  focusTab(tabDomId) {
+    if (!tabDomId) {
+      return;
+    }
+    const tab = this._tabList?.querySelector(`#${CSS.escape(tabDomId)}`);
+    tab?.focus();
+    this.scrollTabIntoView(tabDomId);
   }
   handleScroll = event => {
     if (this.props.tabOverflow !== 'scroll' || !this.state.withTabListOverflow) {
@@ -346,27 +461,24 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       onRequestTabChange,
       tabOverflow,
       styles,
+      dir,
       ...props
     } = this.props;
-    const activePanels = _react.Children.toArray(children).filter(child => (0, _uiReactUtils.matchComponentTypes)(child, [_index2.Panel])).filter(child => child.props.active);
+    const tabDescriptors = this.getTabs();
+    const rovingTabId = this.getRovingTabId(tabDescriptors);
+    const tabsByIndex = new Map(tabDescriptors.map(tab => [tab.index, tab]));
+    const activePanels = tabDescriptors.map(tab => tab.panel).filter(panel => panel.props.active);
     if (activePanels.length > 1) {
       (0, _console.logError)(false, `[Tabs] Only one Panel can be marked as active.`);
     }
-    const selectedChildIndex = _react.Children.toArray(children).filter(child => (0, _uiReactUtils.matchComponentTypes)(child, [_index2.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
-    const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
-    _react.Children.toArray(children).map((child, index) => {
-      if ((0, _uiReactUtils.matchComponentTypes)(child, [_index2.Panel])) {
-        const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
-        const id = this.props.deterministicId(`Tabs_${index}`);
-        tabs.push(this.createTab(index, id, selected, child));
-        if (activePanels.length === 1) {
-          panels.push(this.clonePanel(index, id, selected, child, activePanels[0]));
-        } else {
-          panels.push(this.clonePanel(index, id, selected, child));
-        }
-      } else {
+    _react.Children.toArray(children).forEach((child, index) => {
+      const tab = tabsByIndex.get(index);
+      if (!tab) {
         panels.push(child);
+        return;
       }
+      tabs.push(this.createTab(tab, tab.tabDomId === rovingTabId));
+      panels.push(this.clonePanel(tab, activePanels.length === 1 ? activePanels[0] : undefined));
     });
     const withScrollFade = tabOverflow === 'scroll' && this.state.withTabListOverflow;
 
@@ -385,23 +497,21 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       as: "div",
       css: styles?.container,
       "data-cid": "Tabs",
-      children: [(0, _jsxRuntime.jsx)(_uiFocusable.Focusable, {
-        ref: this.handleFocusableRef,
-        children: () => (0, _jsxRuntime.jsx)(_latest.View, {
+      children: [(0, _jsxRuntime.jsx)(_latest.View, {
+        as: "div",
+        position: "relative",
+        borderRadius: "medium",
+        shouldAnimateFocus: false,
+        css: styles?.tabs,
+        children: (0, _jsxRuntime.jsxs)(_latest.View, {
           as: "div",
-          position: "relative",
-          borderRadius: "medium",
-          shouldAnimateFocus: false,
-          css: styles?.tabs,
-          children: (0, _jsxRuntime.jsxs)(_latest.View, {
-            as: "div",
-            role: "tablist",
-            css: styles?.tabList,
-            "aria-label": screenReaderLabel,
-            elementRef: this.handleTabListRef,
-            onScroll: this.handleScroll,
-            children: [tabs, withScrollFade && startScrollOverlay, withScrollFade && endScrollOverlay]
-          })
+          role: "tablist",
+          css: styles?.tabList,
+          "aria-label": screenReaderLabel,
+          elementRef: this.handleTabListRef,
+          onScroll: this.handleScroll,
+          onBlur: this.handleTabListBlur,
+          children: [tabs, withScrollFade && startScrollOverlay, withScrollFade && endScrollOverlay]
         })
       }), (0, _jsxRuntime.jsx)("div", {
         css: styles?.panelsContainer,
@@ -409,5 +519,5 @@ let Tabs = exports.Tabs = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       })]
     });
   }
-}) || _class) || _class);
+}) || _class) || _class) || _class);
 var _default = exports.default = Tabs;

package/lib/Tabs/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'fixHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];
+const allowedProps = exports.allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'fixHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender', 'activationMode'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "11.7.10",
+  "version": "11.7.11-snapshot-4",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,24 +15,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.10",
-    "@instructure/debounce": "11.7.10",
-    "@instructure/emotion": "11.7.10",
-    "@instructure/shared-types": "11.7.10",
-    "@instructure/ui-dom-utils": "11.7.10",
-    "@instructure/ui-focusable": "11.7.10",
-    "@instructure/ui-i18n": "11.7.10",
-    "@instructure/ui-motion": "11.7.10",
-    "@instructure/ui-react-utils": "11.7.10",
-    "@instructure/ui-themes": "11.7.10",
-    "@instructure/ui-utils": "11.7.10",
-    "@instructure/ui-view": "11.7.10",
+    "@instructure/console": "11.7.11-snapshot-4",
+    "@instructure/debounce": "11.7.11-snapshot-4",
+    "@instructure/emotion": "11.7.11-snapshot-4",
+    "@instructure/shared-types": "11.7.11-snapshot-4",
+    "@instructure/ui-dom-utils": "11.7.11-snapshot-4",
+    "@instructure/ui-focusable": "11.7.11-snapshot-4",
+    "@instructure/ui-i18n": "11.7.11-snapshot-4",
+    "@instructure/ui-motion": "11.7.11-snapshot-4",
+    "@instructure/ui-react-utils": "11.7.11-snapshot-4",
+    "@instructure/ui-themes": "11.7.11-snapshot-4",
+    "@instructure/ui-utils": "11.7.11-snapshot-4",
+    "@instructure/ui-view": "11.7.11-snapshot-4",
     "keycode": "^2"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.7.10",
-    "@instructure/ui-babel-preset": "11.7.10",
-    "@instructure/ui-color-utils": "11.7.10",
+    "@instructure/ui-axe-check": "11.7.11-snapshot-4",
+    "@instructure/ui-babel-preset": "11.7.11-snapshot-4",
+    "@instructure/ui-color-utils": "11.7.11-snapshot-4",
     "vitest": "^5.0.0"
   },
   "peerDependencies": {

package/src/Tabs/v2/README.md

@@ -2,7 +2,7 @@
 describes: Tabs
 ---
 
-`<Tabs />` is an accessible tabbed navigation component. Use the TAB key to focus the component and arrow keys to navigate between panels of content. To set a default panel that should be selected on initial render, set the `selected` prop on that `<Tabs.Panel>`.
+`<Tabs />` is an accessible tabbed navigation component. Use the TAB key to focus the component and arrow keys to navigate between panels of content. Home and End jump to the first and last tab, and the arrow keys are mirrored in right-to-left text direction. By default a tab is selected as soon as an arrow key reaches it; see the Manual activation section below to require a key press instead. To set a default panel that should be selected on initial render, set the `selected` prop on that `<Tabs.Panel>`.
 
 ```js
 ---
@@ -533,6 +533,62 @@ const Example = () => {
 render(<Example />)
 ```
 
+### Manual activation
+
+Set `activationMode="manual"` to separate the two: the arrow keys, Home
+and End only move focus, and Enter or Space selects the focused tab.
+
+Use manual activation for expensive panels. This is also important for VoiceOver, which reserves arrow keys for its cursor, while Enter and Space work across screen readers.
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const handleTabChange = (event, { index }) => {
+    setSelectedIndex(index)
+  }
+
+  return (
+    <Tabs
+      activationMode="manual"
+      margin="general.space2xl auto"
+      padding="general.spaceXl"
+      onRequestTabChange={handleTabChange}
+    >
+      <Tabs.Panel
+        id="manualA"
+        renderTitle="First Tab"
+        isSelected={selectedIndex === 0}
+        tabIndex={0}
+      >
+        Arrow to another tab, then press Enter or Space to open it.
+      </Tabs.Panel>
+      <Tabs.Panel
+        id="manualB"
+        renderTitle="Second Tab"
+        isSelected={selectedIndex === 1}
+        tabIndex={0}
+      >
+        Second panel
+      </Tabs.Panel>
+      <Tabs.Panel
+        id="manualC"
+        renderTitle="Third Tab"
+        isSelected={selectedIndex === 2}
+        tabIndex={0}
+      >
+        Third panel
+      </Tabs.Panel>
+    </Tabs>
+  )
+}
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

package/src/Tabs/v2/Tab/index.tsx

@@ -86,12 +86,25 @@ class Tab extends Component<TabsTabProps> {
     }
   }
 
+  handleFocus = (event: React.FocusEvent<ViewOwnProps>) => {
+    const { onFocus, index, id, isDisabled } = this.props
+
+    if (isDisabled) {
+      return
+    }
+
+    if (typeof onFocus === 'function') {
+      onFocus(event, { index, id })
+    }
+  }
+
   render() {
     const {
       id,
       variant,
       isSelected,
       isDisabled,
+      isTabbable = isSelected,
       controls,
       children,
       styles,
@@ -106,11 +119,12 @@ class Tab extends Component<TabsTabProps> {
         id={id}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
+        onFocus={this.handleFocus}
         css={styles?.tab}
-        aria-selected={isSelected ? 'true' : undefined}
+        aria-selected={isSelected ? 'true' : 'false'}
         aria-disabled={isDisabled ? 'true' : undefined}
         aria-controls={controls}
-        tabIndex={isSelected && !isDisabled ? 0 : undefined}
+        tabIndex={isDisabled ? undefined : isTabbable ? 0 : -1}
         position="relative"
         focusPosition="offset"
       >

package/src/Tabs/v2/Tab/props.ts

@@ -35,6 +35,7 @@ type TabsTabOwnProps = {
   controls: string
   isDisabled?: boolean
   isSelected?: boolean
+  isTabbable?: boolean
   onClick?: (
     event: React.MouseEvent<ViewOwnProps>,
     tabData: { index: number; id: string }
@@ -43,6 +44,10 @@ type TabsTabOwnProps = {
     event: React.KeyboardEvent<ViewOwnProps>,
     tabData: { index: number; id: string }
   ) => void
+  onFocus?: (
+    event: React.FocusEvent<ViewOwnProps>,
+    tabData: { index: number; id: string }
+  ) => void
   children?: Renderable
   /**
    * Whether tabOverflow prop in Tabs is set to 'scroll'.
@@ -67,8 +72,10 @@ const allowedProps: AllowedPropKeys = [
   'controls',
   'isDisabled',
   'isSelected',
+  'isTabbable',
   'onClick',
   'onKeyDown',
+  'onFocus',
   'children',
   'isOverflowScroll'
 ]