react-aria-components 0.0.4 → 1.0.0-alpha.2

package/src/grid/grid-cell.js

@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import GridContext from './grid-context.js';
-import RefType from '../prop-types/ref.js';
-
-import styles from './grid-cell.css';
-
-class GridCell extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onBlur = this.onBlur.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-
-    this.state = {
-      tabIndex: -1,
-    };
-  }
-
-  onBlur(event) {
-    const focusWithinCell = this.props.gridCellRef.current === event.relatedTarget
-      || this.props.gridCellRef.current.contains(event.relatedTarget);
-    if (focusWithinCell) return;
-
-    const focusWithinGrid = this.props.gridCellRefs.some(rows => (
-      rows.some(cellRef => cellRef.current === event.relatedTarget) // `relatedTarget` is not supported in IE 11 :( https://github.com/facebook/react/issues/3751
-    ));
-    if (focusWithinGrid) this.setState({ tabIndex: -1 });
-
-    this.props.onBlur(event);
-  }
-
-  onClick(event) {
-    this.props.onClick(event);
-  }
-
-  onFocus(event) {
-    this.setState({ tabIndex: 0 });
-    this.props.onFocus(event);
-  }
-
-  onKeyDown(event) {
-    this.props.onKeyDown(event);
-  }
-
-  render() {
-    return (
-      <div // eslint-disable-line jsx-a11y/no-static-element-interactions
-        className={this.props.className}
-        onBlur={this.onBlur}
-        onClick={this.onClick}
-        onFocus={this.onFocus}
-        onKeyDown={this.onKeyDown}
-        ref={this.props.gridCellRef}
-        role={this.props.role}
-        tabIndex={this.state.tabIndex}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-GridCell.defaultProps = {
-  className: styles.container,
-  onBlur: () => {},
-  onClick: () => {},
-  onFocus: () => {},
-  onKeyDown: () => {},
-  role: 'gridcell',
-};
-
-GridCell.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  gridCellRef: RefType.isRequired,
-  gridCellRefs: PropTypes.arrayOf(PropTypes.arrayOf(RefType)).isRequired,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  role: PropTypes.oneOf(['columnheader', 'gridcell']),
-};
-
-export default function FocusableGridCell(props) {
-  const {
-    idX,
-    idY,
-  } = props;
-
-  return (
-    <GridContext.Consumer>
-      {gridRefs => <GridCell {...props} gridCellRefs={gridRefs} gridCellRef={gridRefs[idY][idX]} />}
-    </GridContext.Consumer>
-  );
-}
-
-FocusableGridCell.propTypes = {
-  idX: PropTypes.number.isRequired,
-  idY: PropTypes.number.isRequired,
-};

package/src/grid/grid-context.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default React.createContext();

package/src/grid/grid.css

@@ -1,4 +0,0 @@
-.container {
-  position: relative;
-  transform: translate3d(0, 0, 0);
-}

package/src/grid/grid.js

@@ -1,110 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import GridContext from './grid-context.js';
-import RefType from '../prop-types/ref.js';
-import styles from './grid.css';
-
-export default class Grid extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      rowIndex: -1,
-      columnIndex: -1,
-    };
-
-    this.onFocus = this.onFocus.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-  }
-
-  componentDidUpdate() {
-    this.props.gridRefs[this.state.rowIndex][this.state.columnIndex].current.focus();
-  }
-
-  onFocus(event) {
-    let newColumnIndex;
-    const newRowIndex = this.props.gridRefs.findIndex((rows) => {
-      newColumnIndex = rows.findIndex(cellRef => cellRef.current === event.target);
-      return newColumnIndex > -1;
-    });
-
-    // If the click event does not match any of grid cell containers,
-    // it must be within the active cell.
-    if (newRowIndex === -1 || newColumnIndex === -1) { return; }
-
-    this.setState({
-      columnIndex: newColumnIndex,
-      rowIndex: newRowIndex,
-    });
-  }
-
-  onKeyDown(event) {
-    switch (event.key) {
-      case 'ArrowDown': {
-        event.preventDefault();
-        this.setState(state => ({
-          columnIndex: Math.max(state.columnIndex, 0),
-          rowIndex: Math.min(state.rowIndex + 1, this.props.gridRefs.length - 1),
-        }));
-
-        return true;
-      }
-      case 'ArrowLeft': {
-        event.preventDefault();
-        this.setState(state => ({
-          columnIndex: Math.max(state.columnIndex - 1, 0),
-          rowIndex: Math.max(state.rowIndex, 0),
-        }));
-
-        return true;
-      }
-      case 'ArrowRight': {
-        event.preventDefault();
-        this.setState(state => ({
-          columnIndex: Math.min(state.columnIndex + 1, this.props.gridRefs[0].length - 1),
-          rowIndex: Math.max(state.rowIndex, 0),
-        }));
-
-        return true;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        this.setState(state => ({
-          columnIndex: Math.max(state.columnIndex, 0),
-          rowIndex: Math.max(state.rowIndex - 1, 0),
-        }));
-
-        return true;
-      }
-      default:
-        return true;
-    }
-  }
-
-  render() {
-    return (
-      <GridContext.Provider value={this.props.gridRefs}>
-        <div // eslint-disable-line jsx-a11y/interactive-supports-focus
-          className={this.props.className}
-          role="grid"
-          onFocus={this.onFocus}
-          onKeyDown={this.onKeyDown}
-          tabIndex="0"
-        >
-          {this.props.children}
-        </div>
-      </GridContext.Provider>
-    );
-  }
-}
-
-Grid.defaultProps = {
-  className: styles.container,
-};
-
-Grid.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  gridRefs: PropTypes.arrayOf(PropTypes.arrayOf(RefType)).isRequired,
-};

package/src/grid/index.js

@@ -1,6 +0,0 @@
-export { default as ColumnHeader } from './column-header.js';
-export { default as InteractiveGridCell } from './interactive-grid-cell.js';
-export { default as GridCell } from './grid-cell.js';
-export { default as Grid } from './grid.js';
-export { default as RowHeaders } from './row-headers.js';
-export { default as Row } from './row.js';

package/src/grid/interactive-grid-cell.js

@@ -1,96 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import GridCell from './grid-cell.js';
-import GridContext from './grid-context.js';
-import RefType from '../prop-types/ref.js';
-
-class InteractiveGridCell extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onBlur = this.onBlur.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-
-    this.state = {
-      interactive: false,
-    };
-  }
-
-  componentDidUpdate(props, state) {
-    if (state.interactive && !this.state.interactive) {
-      this.props.gridCellRef.current.focus();
-    }
-  }
-
-  onBlur(event) {
-    const focusWithinCell = this.props.gridCellRef.current === event.relatedTarget
-      || this.props.gridCellRef.current.contains(event.relatedTarget);
-    if (focusWithinCell) return;
-
-    this.setState({ interactive: false });
-  }
-
-  onClick() {
-    this.setState({ interactive: true });
-  }
-
-  onKeyDown(event) {
-    switch (event.key) {
-      case 'Enter': {
-        this.setState(state => ({ interactive: !state.interactive }));
-        break;
-      }
-      case 'Escape': {
-        this.setState({ interactive: false });
-        break;
-      }
-      default: {
-        // Do not use keyboard navigation while interactive
-        if (this.state.interactive) {
-          event.stopPropagation();
-        }
-      }
-    }
-  }
-
-  render() {
-    return (
-      <GridCell
-        {...this.props}
-        onBlur={this.onBlur}
-        onClick={this.onClick}
-        onKeyDown={this.onKeyDown}
-      >
-        {this.props.children(this.state.interactive)}
-      </GridCell>
-    );
-  }
-}
-
-InteractiveGridCell.defaultProps = {
-};
-
-InteractiveGridCell.propTypes = {
-  children: PropTypes.func.isRequired,
-  gridCellRef: RefType.isRequired,
-};
-
-export default function FocusableInteractiveGridCell(props) {
-  const {
-    idX,
-    idY,
-  } = props;
-
-  return (
-    <GridContext.Consumer>
-      {gridRefs => <InteractiveGridCell {...props} gridCellRef={gridRefs[idY][idX]} />}
-    </GridContext.Consumer>
-  );
-}
-
-FocusableInteractiveGridCell.propTypes = {
-  idX: PropTypes.number.isRequired,
-  idY: PropTypes.number.isRequired,
-};

package/src/grid/row-headers.css

@@ -1,6 +0,0 @@
-.container {
-  composes: container from './row.css';
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}

package/src/grid/row-headers.js

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import Row from './row.js';
-import styles from './row-headers.css';
-
-export default function RowHeaders(props) {
-  return (
-    <Row className={props.className}>
-      {props.children}
-    </Row>
-  );
-}
-
-RowHeaders.defaultProps = {
-  className: styles.container,
-};
-
-RowHeaders.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};

package/src/grid/row.css

@@ -1,5 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: row;
-  width: fit-content;
-}

package/src/grid/row.js

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import styles from './row.css';
-
-export default function Row(props) {
-  return (
-    <div className={props.className} role="row">
-      {props.children}
-    </div>
-  );
-}
-
-Row.defaultProps = {
-  className: styles.container,
-};
-
-Row.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};

package/src/prop-types/ref.js

@@ -1,3 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default PropTypes.object;

package/src/tabs/index.js

@@ -1,4 +0,0 @@
-export { default as TabList } from './tab-list.js';
-export { default as TabPanels } from './tab-panels.js';
-export { default as Tab } from './tab.js';
-export { default as Tabs } from './tabs.js';

package/src/tabs/tab-list.css

@@ -1,6 +0,0 @@
-.container {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}

package/src/tabs/tab-list.js

@@ -1,103 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Tab from './tab.js';
-import styles from './tab-list.css';
-
-export default class TabList extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const childrenCount = React.Children.count(props.children);
-
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.tabRefs = new Array(childrenCount).fill(0).map(() => React.createRef());
-    this.handlers = this.getHandlers(props.vertical);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.activeIndex !== this.props.activeIndex) {
-      this.tabRefs[this.props.activeIndex].current.focus();
-    }
-  }
-
-  getHandlers(vertical) {
-    if (vertical) {
-      return {
-        ArrowDown: this.next.bind(this),
-        ArrowUp: this.previous.bind(this),
-      };
-    }
-    return {
-      ArrowLeft: this.previous.bind(this),
-      ArrowRight: this.next.bind(this),
-    };
-  }
-
-  wrapIndex(index) {
-    const count = React.Children.count(this.props.children);
-    return (index + count) % count;
-  }
-
-  handleKeyPress(event) {
-    const handler = this.handlers[event.key];
-    if (handler) { handler(); }
-  }
-
-  previous() {
-    const newIndex = this.wrapIndex(this.props.activeIndex - 1);
-    this.props.onActivateTab(newIndex);
-  }
-
-  next() {
-    const newIndex = this.wrapIndex(this.props.activeIndex + 1);
-    this.props.onActivateTab(newIndex);
-  }
-
-  render() {
-    const {
-      accessibleId,
-      activeIndex,
-      children,
-      className,
-      onActivateTab,
-    } = this.props;
-
-    return (
-      <ul className={className} onKeyUp={this.handleKeyPress} role="tablist">
-        {React.Children.map(children, (child, index) => {
-          if (child.type !== Tab) {
-            throw new Error('Direct children of a <TabList> must be a <Tab>');
-          }
-
-          const active = index === activeIndex;
-          const tabRef = this.tabRefs[index];
-
-          return React.cloneElement(child, {
-            accessibleId: active ? accessibleId : undefined,
-            active,
-            tabRef,
-            onActivate: () => onActivateTab(index),
-          });
-        })}
-      </ul>
-    );
-  }
-}
-
-TabList.propTypes = {
-  accessibleId: PropTypes.string,
-  activeIndex: PropTypes.number,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  onActivateTab: PropTypes.func,
-  vertical: PropTypes.bool,
-};
-
-TabList.defaultProps = {
-  accessibleId: undefined,
-  activeIndex: 0,
-  children: null,
-  className: styles.container,
-  onActivateTab: () => {},
-  vertical: false,
-};

package/src/tabs/tab-panels.js

@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function TabPanels({
-  accessibleId,
-  activeIndex,
-  children,
-  className,
-  hasFocusableContent,
-}) {
-  return (
-    <div
-      aria-labelledby={accessibleId}
-      role="tabpanel"
-      className={className}
-      tabIndex={hasFocusableContent ? undefined : 0}
-    >
-      {React.Children.toArray(children)[activeIndex]}
-    </div>
-  );
-}
-
-TabPanels.propTypes = {
-  accessibleId: PropTypes.string,
-  activeIndex: PropTypes.number,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  hasFocusableContent: PropTypes.bool.isRequired,
-};
-
-TabPanels.defaultProps = {
-  accessibleId: undefined,
-  activeIndex: 0,
-  className: null,
-};

package/src/tabs/tab.css

@@ -1,10 +0,0 @@
-.container {
-  background-color: lightgrey;
-  border: 1px solid darkgrey;
-  cursor: pointer;
-  padding: 0 3px;
-}
-
-.container[aria-selected=true] {
-  background-color: white;
-}

package/src/tabs/tab.js

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import RefType from '../prop-types/ref.js';
-import styles from './tab.css';
-
-export default function Tab({
-  accessibleId,
-  active,
-  children,
-  className,
-  onActivate,
-  tabRef,
-}) {
-  return (
-    <li
-      aria-selected={active}
-      className={className}
-      id={accessibleId}
-      onClick={onActivate}
-      onKeyDown={() => {}}
-      ref={tabRef}
-      role="tab"
-      tabIndex={active ? 0 : undefined}
-    >
-      {children}
-    </li>
-  );
-}
-
-Tab.propTypes = {
-  accessibleId: PropTypes.string,
-  active: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  onActivate: PropTypes.func,
-  tabRef: RefType,
-};
-
-Tab.defaultProps = {
-  accessibleId: undefined,
-  active: false,
-  className: styles.container,
-  onActivate: undefined,
-  tabRef: undefined,
-};

package/src/tabs/tabs.js

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import uniqueId from '../utils/unique-id';
-import TabList from './tab-list';
-import TabPanels from './tab-panels';
-
-export default class Tabs extends React.Component {
-  constructor() {
-    super();
-    this.accessibleId = uniqueId();
-  }
-
-  render() {
-    const {
-      activeIndex,
-      children,
-      className,
-      onActivateTab,
-    } = this.props;
-    const accessibleId = this.accessibleId;
-
-    return (
-      <div className={className}>
-        {React.Children.map(children, (child) => {
-          if (!child) { return child; }
-
-          switch (child.type) {
-            case TabList:
-              return React.cloneElement(child, { accessibleId, activeIndex, onActivateTab });
-            case TabPanels:
-              return React.cloneElement(child, { accessibleId, activeIndex });
-            default:
-              return child;
-          }
-        })}
-      </div>
-    );
-  }
-}
-
-Tabs.propTypes = {
-  activeIndex: PropTypes.number.isRequired,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  onActivateTab: PropTypes.func,
-};
-
-Tabs.defaultProps = {
-  children: null,
-  className: undefined,
-  onActivateTab: () => {},
-};

package/src/utils/debounce.js

@@ -1,12 +0,0 @@
-export default function debounce(funk) {
-  let lastCalled = 0;
-
-  return function debounced(...args) {
-    const now = Date.now();
-    const timeSinceLastCalled = now - lastCalled;
-    if (timeSinceLastCalled >= 1000) {
-      lastCalled = now;
-      funk(...args);
-    }
-  }
-}