@instructure/ui-pagination 8.13.1-snapshot.9 → 8.14.0

package/es/Pagination/index.js

@@ -35,36 +35,42 @@ import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import { PaginationButton } from './PaginationButton';
 import { PaginationArrowButton } from './PaginationArrowButton';
+import { PaginationPageInput } from './PaginationPageInput';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
 
 /** This is an [].findIndex optimized to work on really big, but sparse, arrays */
 const fastFindIndex = (arr, fn) => Number(Object.keys(arr).find(k => fn(arr[Number(k)])));
 
-function propsHaveCompactView(props) {
-  var _props$children;
+const childrenArray = props => {
+  const children = props.children;
 
-  return props.variant === 'compact' && (props === null || props === void 0 ? void 0 : (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.length) > 5;
-}
+  if (!children) {
+    return [];
+  }
 
-function shouldShowPrevButton(props, currentPageIndex) {
-  return propsHaveCompactView(props) && currentPageIndex > 0;
-}
+  return Array.isArray(children) ? children : [children];
+};
 
-function shouldShowNextButton(props, currentPageIndex) {
-  return propsHaveCompactView(props) && currentPageIndex < props.children.length - 1;
+function propsHaveCompactView(props) {
+  return props.variant === 'compact' && childrenArray(props).length > 5;
 }
+
 /**
 ---
 category: components
 ---
 **/
-
-
 let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends Component {
   constructor() {
     super(...arguments);
+    this._labelId = void 0;
     this.ref = null;
+    this._inputRef = null;
+    this._firstButton = null;
+    this._prevButton = null;
+    this._nextButton = null;
+    this._lastButton = null;
 
     this.handleElementRef = el => {
       this.ref = el;
@@ -76,42 +82,87 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       }
     };
 
+    this.handleInputRef = el => {
+      this._inputRef = el;
+    };
+
     this._labelId = uid('Pagination');
-    this._prevButton = null;
-    this._nextButton = null;
   }
 
   get _root() {
     return this.ref;
   }
 
+  get inputMode() {
+    return this.props.variant === 'input';
+  }
+
+  get childPages() {
+    return childrenArray(this.props);
+  }
+
+  get withFirstAndLastButton() {
+    return this.inputMode || this.props.withFirstAndLastButton;
+  }
+
+  get showDisabledButtons() {
+    return this.inputMode || this.props.showDisabledButtons;
+  }
+
   getSnapshotBeforeUpdate() {
     const activeElement = getActiveElement();
-    return {
-      prevButtonFocused: this._prevButton === activeElement,
-      nextButtonFocused: this._nextButton === activeElement
-    };
+
+    if (activeElement === this._firstButton || activeElement === this._prevButton || activeElement === this._nextButton || activeElement === this._lastButton) {
+      return {
+        lastFocusedButton: activeElement
+      };
+    } else {
+      return {
+        lastFocusedButton: void 0
+      };
+    }
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate(prevProps, _prevState, snapshot) {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
 
     if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
       return;
+    } else {
+      this.focusElementAfterUpdate(snapshot);
     }
+  }
 
-    const _ref = snapshot || {},
-          prevButtonFocused = _ref.prevButtonFocused,
-          nextButtonFocused = _ref.nextButtonFocused;
+  focusElementAfterUpdate(snapshot) {
+    const lastFocusedButton = snapshot.lastFocusedButton;
 
-    if (prevButtonFocused || nextButtonFocused) {
+    if (lastFocusedButton) {
       const focusable = findTabbable(this.ref);
-      const focusIndex = prevButtonFocused ? 0 : focusable.length - 1;
-      focusable[focusIndex].focus();
+      const direction = lastFocusedButton.dataset.direction; // By default we want to focus the previously focused button
+
+      let nextFocusElement = lastFocusedButton; // In case the button is not focusable anymore
+      // (disabled or not in the DOM), we focus to the next available page
+
+      if (!focusable.includes(nextFocusElement)) {
+        if (direction === 'first' || direction === 'prev') {
+          nextFocusElement = focusable[0];
+        }
+
+        if (direction === 'next' || direction === 'last') {
+          nextFocusElement = focusable[focusable.length - 1];
+        }
+      }
+
+      ;
+      nextFocusElement.focus();
     }
   }
 
@@ -120,13 +171,13 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
   }
 
   transferDisabledPropToChildren(children) {
-    return this.props.disabled ? React.Children.map(children, page => /*#__PURE__*/React.cloneElement(page, {
+    return children && this.props.disabled ? React.Children.map(children, page => /*#__PURE__*/React.cloneElement(page, {
       disabled: this.props.disabled
     })) : children;
   }
 
   renderLabel() {
-    const display = this.props.variant === 'compact' ? 'block' : 'inline-block';
+    const display = this.props.variant === 'full' ? 'inline-block' : 'block';
     const visibleLabel = hasVisibleChildren(this.props.label);
     return jsx(View, {
       as: "span",
@@ -136,8 +187,26 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
     }, this.props.label);
   }
 
+  renderPageInput(currentPageIndex) {
+    return jsx(PaginationPageInput, {
+      numberOfPages: this.childPages.length,
+      currentPageIndex: currentPageIndex,
+      onChange: this.handleInputChange.bind(this),
+      screenReaderLabel: this.props.screenReaderLabelNumberInput,
+      label: this.props.labelNumberInput,
+      disabled: this.props.disabled,
+      inputRef: this.handleInputRef
+    });
+  }
+
+  handleInputChange(event, pageIndex) {
+    var _this$childPages$page, _this$childPages$page2;
+
+    (_this$childPages$page = (_this$childPages$page2 = this.childPages[pageIndex].props).onClick) === null || _this$childPages$page === void 0 ? void 0 : _this$childPages$page.call(_this$childPages$page2, event);
+  }
+
   renderPages(currentPageIndex) {
-    const allPages = this.props.children;
+    const allPages = this.childPages;
     let visiblePages = allPages;
 
     if (this.compactView) {
@@ -149,14 +218,14 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       const firstPage = allPages[firstIndex];
       const lastPage = allPages[lastIndex];
       if (sliceStart - firstIndex > 1) visiblePages.unshift(_span || (_span = jsx("span", {
-          key: "first",
-          "aria-hidden": "true"
-        }, "\u2026")));
+        key: "first",
+        "aria-hidden": "true"
+      }, "\u2026")));
       if (sliceStart - firstIndex > 0) visiblePages.unshift(firstPage);
       if (lastIndex - sliceEnd + 1 > 1) visiblePages.push(_span2 || (_span2 = jsx("span", {
-          key: "last",
-          "aria-hidden": "true"
-        }, "\u2026")));
+        key: "last",
+        "aria-hidden": "true"
+      }, "\u2026")));
       if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage);
     }
 
@@ -165,27 +234,80 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
     }, this.transferDisabledPropToChildren(visiblePages));
   }
 
-  renderArrowButton(label, direction, currentPageIndex) {
-    // eslint-disable-next-line react/prop-types
-    const _this$props$children$ = this.props.children[currentPageIndex + direction].props,
-          onClick = _this$props$children$.onClick,
-          disabled = _this$props$children$.disabled;
+  getArrowVariant(direction, currentPageIndex, pagesCount) {
+    switch (direction) {
+      case 'first':
+        return {
+          pageIndex: 0,
+          label: this.props.labelFirst || 'First Page',
+          shouldEnableIcon: currentPageIndex > 1,
+          handleButtonRef: el => {
+            this._firstButton = el;
+          }
+        };
 
-    const handleButtonRef = el => {
-      if (direction < 0) {
-        this._prevButton = el;
-      } else {
-        this._nextButton = el;
-      }
-    };
+      case 'prev':
+        return {
+          pageIndex: currentPageIndex - 1,
+          label: this.props.labelPrev || 'Previous Page',
+          shouldEnableIcon: currentPageIndex > 0,
+          handleButtonRef: el => {
+            this._prevButton = el;
+          }
+        };
+
+      case 'next':
+        return {
+          pageIndex: currentPageIndex + 1,
+          label: this.props.labelNext || 'Next Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 1,
+          handleButtonRef: el => {
+            this._nextButton = el;
+          }
+        };
+
+      case 'last':
+        return {
+          pageIndex: pagesCount - 1,
+          label: this.props.labelLast || 'Last Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 2,
+          handleButtonRef: el => {
+            this._lastButton = el;
+          }
+        };
+    }
+  }
+
+  renderArrowButton(direction, currentPageIndex) {
+    var _page$props, _page$props2;
+
+    const childPages = this.childPages; // We don't display the arrows in "compact" variant under 6 items
 
-    return jsx(PaginationArrowButton, {
-      direction: direction === -1 ? 'prev' : 'next',
+    if (!(propsHaveCompactView(this.props) || this.inputMode)) {
+      return null;
+    }
+
+    if (!this.withFirstAndLastButton && (direction === 'first' || direction === 'last')) {
+      return null;
+    }
+
+    const _this$getArrowVariant = this.getArrowVariant(direction, currentPageIndex, childPages.length),
+          pageIndex = _this$getArrowVariant.pageIndex,
+          label = _this$getArrowVariant.label,
+          shouldEnableIcon = _this$getArrowVariant.shouldEnableIcon,
+          handleButtonRef = _this$getArrowVariant.handleButtonRef;
+
+    const page = childPages[pageIndex];
+    const disabled = (page === null || page === void 0 ? void 0 : (_page$props = page.props) === null || _page$props === void 0 ? void 0 : _page$props.disabled) || this.props.disabled || !shouldEnableIcon;
+    const onClick = page === null || page === void 0 ? void 0 : (_page$props2 = page.props) === null || _page$props2 === void 0 ? void 0 : _page$props2.onClick;
+    return shouldEnableIcon || this.showDisabledButtons ? jsx(PaginationArrowButton, {
+      direction: direction,
+      "data-direction": direction,
       label: label,
       onClick: onClick,
       disabled: disabled,
       buttonRef: handleButtonRef
-    });
+    }) : null;
   }
 
   render() {
@@ -200,19 +322,23 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       elementRef: this.handleElementRef,
       margin: this.props.margin,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pagination,
-      "aria-labelledby": this.props.label && this._labelId
+      "aria-labelledby": this.props.label ? this._labelId : void 0
     }), this.props.label && this.renderLabel(), jsx(View, {
       display: "inline-block",
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
-    }, shouldShowPrevButton(this.props, currentPageIndex) && this.renderArrowButton(this.props.labelPrev, -1, currentPageIndex), this.renderPages(currentPageIndex), shouldShowNextButton(this.props, currentPageIndex) && this.renderArrowButton(this.props.labelNext, 1, currentPageIndex)));
+    }, this.renderArrowButton('first', currentPageIndex), this.renderArrowButton('prev', currentPageIndex), this.inputMode ? this.renderPageInput(currentPageIndex) : this.renderPages(currentPageIndex), this.renderArrowButton('next', currentPageIndex), this.renderArrowButton('last', currentPageIndex)));
   }
 
 }, _class2.displayName = "Pagination", _class2.componentId = 'Pagination', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   children: null,
   disabled: false,
+  withFirstAndLastButton: false,
+  showDisabledButtons: false,
   variant: 'full',
   as: 'div',
   elementRef: el => {},
+  labelNumberInput: numberOfPages => `of ${numberOfPages}`,
+  screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
   shouldHandleFocus: true
 }, _class2.Page = PaginationButton, _class2.Navigation = PaginationArrowButton, _temp)) || _class) || _class);
 export default Pagination;

package/es/Pagination/props.js

@@ -36,6 +36,16 @@ const propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Displays "jump to first" and "jump to last" buttons. Always turned on with `input` variant.
+   */
+  withFirstAndLastButton: PropTypes.bool,
+
+  /**
+   * Displays the unavailable navigation buttons as disabled instead of hiding them.  Always turned on with `input` variant.
+   */
+  showDisabledButtons: PropTypes.bool,
+
   /**
    * Visible label for component
    */
@@ -51,12 +61,32 @@ const propTypes = {
    */
   labelPrev: PropTypes.string,
 
+  /**
+   * Accessible label for "jump to first" button
+   */
+  labelFirst: PropTypes.string,
+
+  /**
+   * Accessible label for "jump to last" button
+   */
+  labelLast: PropTypes.string,
+
+  /**
+   * Label for number input (for `input` variant)
+   */
+  labelNumberInput: PropTypes.func,
+
+  /**
+   * ScreenReaderLabel for number input (for `input` variant)
+   */
+  screenReaderLabelNumberInput: PropTypes.func,
+
   /**
    * The compact variant truncates the page navigation to show only the first,
    * last, and pages immediately surrounding the current page. Fewer than 5 pages,
    * no next/previous arrow buttons will be shown, and all pages will be listed
    */
-  variant: PropTypes.oneOf(['full', 'compact']),
+  variant: PropTypes.oneOf(['full', 'compact', 'input']),
 
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
@@ -82,5 +112,5 @@ const propTypes = {
    */
   shouldHandleFocus: PropTypes.bool
 };
-const allowedProps = ['children', 'disabled', 'label', 'labelNext', 'labelPrev', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
+const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'variant', 'margin', 'as', 'elementRef', 'shouldHandleFocus'];
 export { propTypes, allowedProps };

package/lib/Pagination/PaginationArrowButton/index.js

@@ -23,6 +23,10 @@ var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenS
 
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 
+var _IconArrowDoubleStartSolid = require("@instructure/ui-icons/lib/IconArrowDoubleStartSolid.js");
+
+var _IconArrowDoubleEndSolid = require("@instructure/ui-icons/lib/IconArrowDoubleEndSolid.js");
+
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _props = require("./props");
@@ -47,13 +51,44 @@ let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_t
     };
   }
 
+  get margin() {
+    switch (this.props.direction) {
+      case 'first':
+        return '0 xx-small 0 0';
+
+      case 'last':
+        return '0 0 0 xx-small';
+
+      default:
+        return void 0;
+    }
+  }
+
+  get Icon() {
+    switch (this.props.direction) {
+      case 'first':
+        return _IconArrowDoubleStartSolid.IconArrowDoubleStartSolid;
+
+      case 'prev':
+        return _IconArrowOpenStartSolid.IconArrowOpenStartSolid;
+
+      case 'next':
+        return _IconArrowOpenEndSolid.IconArrowOpenEndSolid;
+
+      case 'last':
+        return _IconArrowDoubleEndSolid.IconArrowDoubleEndSolid;
+
+      default:
+        return null;
+    }
+  }
+
   render() {
     const _this$props = this.props,
           label = _this$props.label,
           direction = _this$props.direction,
           buttonRef = _this$props.buttonRef,
           props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-    const Icon = direction === 'prev' ? _IconArrowOpenStartSolid.IconArrowOpenStartSolid : _IconArrowOpenEndSolid.IconArrowOpenEndSolid;
     return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       on: ['hover', 'focus'],
       renderTip: /*#__PURE__*/_react.default.createElement(_PresentationContent.PresentationContent, {
@@ -65,8 +100,9 @@ let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_t
       withBorder: false,
       screenReaderLabel: label,
       rel: props.href || props.to ? direction : void 0,
-      elementRef: buttonRef
-    }), Icon));
+      elementRef: buttonRef,
+      margin: this.margin
+    }), this.Icon));
   }
 
 }, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/Pagination/PaginationArrowButton/props.js

@@ -33,10 +33,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  direction: _propTypes.default.oneOf(['next', 'prev']),
+  direction: _propTypes.default.oneOf(['first', 'prev', 'next', 'last']),
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
-  buttonRef: _propTypes.default.func
+  buttonRef: _propTypes.default.func,
+  onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['direction', 'label', 'buttonRef'];
+const allowedProps = ['direction', 'label', 'buttonRef' // we don't want to pass onClick
+// 'onClick'
+];
 exports.allowedProps = allowedProps;

package/lib/Pagination/PaginationButton/props.js

@@ -41,8 +41,15 @@ const propTypes = {
   /**
    * Whether the page is currently displayed
    */
-  current: _propTypes.default.bool
+  current: _propTypes.default.bool,
+
+  /**
+   * Whether the page is currently displayed
+   */
+  onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'current'];
+const allowedProps = ['children', 'current' // we don't want to pass onClick
+// 'onClick'
+];
 exports.allowedProps = allowedProps;

package/lib/Pagination/PaginationLocator.js

@@ -7,6 +7,8 @@ exports.PaginationLocator = void 0;
 
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
 
+var _PaginationPageInputLocator = require("./PaginationPageInput/PaginationPageInputLocator");
+
 var _PaginationArrowButtonLocator = require("./PaginationArrowButton/PaginationArrowButtonLocator");
 
 var _index = require("./index");
@@ -44,6 +46,9 @@ const PaginationLocator = (0, _locator.locator)(_index.Pagination.selector, {
   },
   findArrowButton: async function () {
     return _PaginationArrowButtonLocator.PaginationArrowButtonLocator.find(...arguments);
+  },
+  findPageInput: async function () {
+    return _PaginationPageInputLocator.PaginationPageInputLocator.find(...arguments);
   }
 });
 exports.PaginationLocator = PaginationLocator;

package/lib/Pagination/PaginationPageInput/PaginationPageInputLocator.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationPageInputLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _NumberInputLocator = require("@instructure/ui-number-input/lib/NumberInput/NumberInputLocator");
+
+var _index = require("./index");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// eslint-disable-line no-restricted-imports
+const PaginationPageInputLocator = (0, _locator.locator)(_index.PaginationPageInput.selector, {
+  findInput: function () {
+    return _NumberInputLocator.NumberInputLocator.findInput(...arguments);
+  },
+  findNumberInputArrows: function () {
+    return _NumberInputLocator.NumberInputLocator.findArrowButtons(...arguments);
+  }
+});
+exports.PaginationPageInputLocator = PaginationPageInputLocator;