@instructure/ui-pagination 8.33.1 → 8.33.2

package/lib/Pagination/PaginationPageInput/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PaginationPageInput = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _NumberInput = require("@instructure/ui-number-input/lib/NumberInput");
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: Pagination
@@ -38,108 +26,89 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   constructor(props) {
     super(props);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handleInputRef = el => {
       if (typeof this.props.inputRef === 'function') {
         this.props.inputRef(el);
       }
     };
-
     this.handleChange = (_event, value) => {
-      let newValue = value; // if the last character was not a number, don't accept it
+      let newValue = value;
 
+      // if the last character was not a number, don't accept it
       if (value.length > 0 && isNaN(value.slice(-1))) {
         newValue = value.slice(0, -1);
       }
-
       this.setState({
         number: newValue ? Number(newValue) : this.MIN,
         value: newValue
       });
     };
-
     this.handleDecrement = event => {
       this.setNewPage(event, Math.floor(this.currentPage - 1));
     };
-
     this.handleIncrement = event => {
       this.setNewPage(event, Math.floor(this.currentPage + 1));
     };
-
     this.handleBlur = event => {
       this.setNewPage(event, Math.round(this.state.number));
     };
-
     this.state = this.initialState;
   }
-
   get currentPage() {
     return this.props.currentPageIndex + 1;
   }
-
   get initialState() {
     return {
       number: this.currentPage,
       value: `${this.currentPage}`
     };
   }
-
   get MIN() {
     return 1;
   }
-
   get MAX() {
     return this.props.numberOfPages;
   }
-
   componentDidMount() {
     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) {
     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);
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // when the current page changes from outside (e.g.: from arrow buttons),
+    // when the current page changes from outside (e.g.: from arrow buttons),
     // we update the initial state
-
     if (this.props.currentPageIndex !== prevProps.currentPageIndex) {
       this.resetInitialState();
     }
   }
-
   resetInitialState() {
     this.setState(this.initialState);
   }
-
   handleKeyDown(event) {
     const key = event.key;
-
     if (key.toLowerCase() === 'enter') {
       const _this$state = this.state,
-            value = _this$state.value,
-            number = _this$state.number; // If it is invalid, we reset the input to the current page
+        value = _this$state.value,
+        number = _this$state.number;
 
+      // If it is invalid, we reset the input to the current page
       if (value === '' || isNaN(value)) {
         this.resetInitialState();
         return;
       }
-
       this.setNewPage(event, number);
     }
   }
-
   getNumberWithinRange(n) {
     if (n < this.MIN) return this.MIN;
     if (n > this.MAX) return this.MAX;
     return n;
   }
-
   setNewPage(event, n) {
     const number = this.getNumberWithinRange(n);
     this.setState({
@@ -148,28 +117,25 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     });
     this.props.onChange(event, number - 1);
   }
-
   renderLabel() {
     const _this$props3 = this.props,
-          label = _this$props3.label,
-          numberOfPages = _this$props3.numberOfPages,
-          styles = _this$props3.styles;
+      label = _this$props3.label,
+      numberOfPages = _this$props3.numberOfPages,
+      styles = _this$props3.styles;
     return typeof label === 'function' && label(numberOfPages) ? (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.inputLabel
     }, label(numberOfPages)) : null;
   }
-
   renderScreenReaderLabel() {
     const _this$props4 = this.props,
-          screenReaderLabel = _this$props4.screenReaderLabel,
-          numberOfPages = _this$props4.numberOfPages;
+      screenReaderLabel = _this$props4.screenReaderLabel,
+      numberOfPages = _this$props4.numberOfPages;
     return (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel(this.currentPage, numberOfPages));
   }
-
   render() {
     const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          disabled = _this$props5.disabled;
+      styles = _this$props5.styles,
+      disabled = _this$props5.disabled;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
       ref: this.handleRef
@@ -190,7 +156,6 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       inputRef: this.handleInputRef
     })), this.renderLabel());
   }
-
 }, _class2.displayName = "PaginationPageInput", _class2.componentId = 'Pagination.PageInput', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   disabled: false
 }, _class2)) || _class) || _class);

package/lib/Pagination/PaginationPageInput/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   numberOfPages: _propTypes.default.number.isRequired,
   currentPageIndex: _propTypes.default.number.isRequired,

package/lib/Pagination/PaginationPageInput/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -58,6 +57,5 @@ const generateStyle = componentTheme => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Pagination/PaginationPageInput/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,9 +39,9 @@ const generateComponentTheme = theme => {
     inputSpacing: spacing.xSmall,
     inputWidth: '4.5rem'
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Pagination/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,54 +13,33 @@ Object.defineProperty(exports, "PaginationButton", {
   }
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
-
 var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
-
 var _getActiveElement = require("@instructure/ui-dom-utils/lib/getActiveElement.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _PaginationButton = require("./PaginationButton");
-
 var _PaginationArrowButton = require("./PaginationArrowButton");
-
 var _PaginationPageInput = require("./PaginationPageInput");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2, _span, _span2;
-
 /** 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)])));
-
 const childrenArray = props => {
   const children = props.children;
-
   if (!children) {
     return [];
   }
-
   return Array.isArray(children) ? children : [children];
 };
-
 function propsHaveCompactView(props) {
   return props.variant === 'compact' && childrenArray(props).length > 5;
 }
-
 /**
 ---
 category: components
@@ -78,47 +55,36 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
     this._nextButton = null;
     this._lastButton = null;
     this.ref = null;
-
     this.handleElementRef = el => {
       this.ref = el;
-
       if (el && typeof this.props.elementRef === 'function') {
         this.props.elementRef(el);
       }
     };
-
     this.handleInputRef = el => {
       if (typeof this.props.inputRef === 'function') {
         this.props.inputRef(el);
       }
     };
-
     this._labelId = props.deterministicId();
   }
-
   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 = (0, _getActiveElement.getActiveElement)();
-
     if (activeElement === this._firstButton || activeElement === this._prevButton || activeElement === this._nextButton || activeElement === this._lastButton) {
       return {
         lastFocusedButton: activeElement
@@ -129,60 +95,50 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       };
     }
   }
-
   componentDidMount() {
     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) {
     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);
     }
   }
-
   focusElementAfterUpdate(snapshot) {
     const lastFocusedButton = snapshot.lastFocusedButton;
-
     if (lastFocusedButton) {
       const focusable = (0, _findTabbable.findTabbable)(this.ref);
-      const direction = lastFocusedButton.dataset.direction; // By default we want to focus the previously focused button
+      const direction = lastFocusedButton.dataset.direction;
 
-      let nextFocusElement = lastFocusedButton; // In case the button is not focusable anymore
-      // (disabled or not in the DOM), we focus to the next available page
+      // 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();
     }
   }
-
   get compactView() {
     return propsHaveCompactView(this.props);
   }
-
   transferDisabledPropToChildren(children) {
     return children && this.props.disabled ? _react.default.Children.map(children, page => /*#__PURE__*/_react.default.cloneElement(page, {
       disabled: this.props.disabled
     })) : children;
   }
-
   renderLabel() {
     const display = this.props.variant === 'full' ? 'inline-block' : 'block';
     const visibleLabel = (0, _hasVisibleChildren.hasVisibleChildren)(this.props.label);
@@ -193,7 +149,6 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       id: this._labelId
     }, this.props.label);
   }
-
   renderPageInput(currentPageIndex) {
     return (0, _emotion.jsx)(_PaginationPageInput.PaginationPageInput, {
       numberOfPages: this.childPages.length,
@@ -205,17 +160,13 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       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.childPages;
     let visiblePages = allPages;
-
     if (this.compactView) {
       const firstIndex = 0;
       const lastIndex = allPages.length - 1;
@@ -235,12 +186,10 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       }, "\u2026")));
       if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage);
     }
-
     return (0, _emotion.jsx)(_View.View, {
       display: "inline-block"
     }, this.transferDisabledPropToChildren(visiblePages));
   }
-
   getArrowVariant(direction, currentPageIndex, pagesCount) {
     switch (direction) {
       case 'first':
@@ -252,7 +201,6 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
             this._firstButton = el;
           }
         };
-
       case 'prev':
         return {
           pageIndex: currentPageIndex - 1,
@@ -262,7 +210,6 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
             this._prevButton = el;
           }
         };
-
       case 'next':
         return {
           pageIndex: currentPageIndex + 1,
@@ -272,7 +219,6 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
             this._nextButton = el;
           }
         };
-
       case 'last':
         return {
           pageIndex: pagesCount - 1,
@@ -284,26 +230,22 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
         };
     }
   }
-
   renderArrowButton(direction, currentPageIndex) {
     var _page$props, _page$props2;
+    const childPages = this.childPages;
 
-    const childPages = this.childPages; // We don't display the arrows in "compact" variant under 6 items
-
+    // We don't display the arrows in "compact" variant under 6 items
     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;
-
+      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;
@@ -316,15 +258,11 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       buttonRef: handleButtonRef
     }) : null;
   }
-
   render() {
     var _this$props$styles, _this$props$styles2;
-
     if (!this.props.children) return null;
     const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);
-
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Pagination.allowedProps), Pagination);
-
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       role: "navigation",
       as: this.props.as,
@@ -337,7 +275,6 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
     }, 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 = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   disabled: false,
   withFirstAndLastButton: false,

package/lib/Pagination/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "PaginationLocator", {
   }
 });
 exports.default = void 0;
-
 var _PaginationLocator = require("./PaginationLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Pagination/props.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _PaginationButton = require("./PaginationButton");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,6 +32,7 @@ var _PaginationButton = require("./PaginationButton");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _Children.Children.oneOf([_PaginationButton.PaginationButton]),
   disabled: _propTypes.default.bool,

package/lib/Pagination/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -52,6 +51,5 @@ const generateStyle = () => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/index.js

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "PaginationButton", {
     return _Pagination.PaginationButton;
   }
 });
-
 var _Pagination = require("./Pagination");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-queries": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-queries": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-a11y-content": "8.33.1",
-    "@instructure/ui-a11y-utils": "8.33.1",
-    "@instructure/ui-buttons": "8.33.1",
-    "@instructure/ui-dom-utils": "8.33.1",
-    "@instructure/ui-icons": "8.33.1",
-    "@instructure/ui-number-input": "8.33.1",
-    "@instructure/ui-portal": "8.33.1",
-    "@instructure/ui-prop-types": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-tooltip": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
-    "@instructure/ui-view": "8.33.1",
-    "@instructure/uid": "8.33.1",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-a11y-content": "8.33.2",
+    "@instructure/ui-a11y-utils": "8.33.2",
+    "@instructure/ui-buttons": "8.33.2",
+    "@instructure/ui-dom-utils": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-number-input": "8.33.2",
+    "@instructure/ui-portal": "8.33.2",
+    "@instructure/ui-prop-types": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-tooltip": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
+    "@instructure/ui-view": "8.33.2",
+    "@instructure/uid": "8.33.2",
     "keycode": "^2",
     "prop-types": "^15"
   },