@instructure/ui-pagination 8.33.1 → 8.33.2

package/es/Pagination/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2, _span, _span2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _dec3, _class, _class2, _span, _span2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import React, { Component } from 'react';
 import { View } from '@instructure/ui-view';
@@ -37,24 +35,18 @@ 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)])));
-
 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
@@ -70,47 +62,36 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     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 = getActiveElement();
-
     if (activeElement === this._firstButton || activeElement === this._prevButton || activeElement === this._nextButton || activeElement === this._lastButton) {
       return {
         lastFocusedButton: activeElement
@@ -121,60 +102,50 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       };
     }
   }
-
   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 = 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.Children.map(children, page => /*#__PURE__*/React.cloneElement(page, {
       disabled: this.props.disabled
     })) : children;
   }
-
   renderLabel() {
     const display = this.props.variant === 'full' ? 'inline-block' : 'block';
     const visibleLabel = hasVisibleChildren(this.props.label);
@@ -185,7 +156,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       id: this._labelId
     }, this.props.label);
   }
-
   renderPageInput(currentPageIndex) {
     return jsx(PaginationPageInput, {
       numberOfPages: this.childPages.length,
@@ -197,17 +167,13 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       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;
@@ -227,12 +193,10 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       }, "\u2026")));
       if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage);
     }
-
     return jsx(View, {
       display: "inline-block"
     }, this.transferDisabledPropToChildren(visiblePages));
   }
-
   getArrowVariant(direction, currentPageIndex, pagesCount) {
     switch (direction) {
       case 'first':
@@ -244,7 +208,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
             this._firstButton = el;
           }
         };
-
       case 'prev':
         return {
           pageIndex: currentPageIndex - 1,
@@ -254,7 +217,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
             this._prevButton = el;
           }
         };
-
       case 'next':
         return {
           pageIndex: currentPageIndex + 1,
@@ -264,7 +226,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
             this._nextButton = el;
           }
         };
-
       case 'last':
         return {
           pageIndex: pagesCount - 1,
@@ -276,26 +237,22 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         };
     }
   }
-
   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;
@@ -308,10 +265,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       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.omitViewProps(omitProps(this.props, Pagination.allowedProps), Pagination);
@@ -327,7 +282,6 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       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 = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   disabled: false,
   withFirstAndLastButton: false,

package/es/Pagination/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { PaginationLocator } from './PaginationLocator';
 export { PaginationLocator };
 export default PaginationLocator;

package/es/Pagination/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { Children } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';

package/es/Pagination/styles.js

@@ -45,5 +45,4 @@ const generateStyle = () => {
     }
   };
 };
-
 export default generateStyle;

package/es/index.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { Pagination, PaginationButton } from './Pagination';

package/lib/Pagination/PaginationArrowButton/PaginationArrowButtonLocator.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaginationArrowButtonLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _uiTestQueries = require("@instructure/ui-test-queries");
-
 var _TooltipLocator = require("@instructure/ui-tooltip/lib/Tooltip/TooltipLocator");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +31,12 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 // eslint-disable-next-line no-restricted-imports
-const PaginationArrowButtonLocator = (0, _locator.locator)( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const PaginationArrowButtonLocator = (0, _locator.locator)(
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 _index.PaginationArrowButton.selector, {
   findTooltipContent: function () {
     return _TooltipLocator.TooltipLocator.findContent(...arguments);
@@ -47,7 +45,6 @@ _index.PaginationArrowButton.selector, {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return (await (0, _uiTestQueries.find)(element, 'a,button,[role="button"]')).click(...args);
   }
 });

package/lib/Pagination/PaginationArrowButton/index.js

@@ -1,40 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PaginationArrowButton = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
-
 var _PresentationContent = require("@instructure/ui-a11y-content/lib/PresentationContent");
-
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
-
 var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
-
 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");
-
 const _excluded = ["label", "direction", "buttonRef"];
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Pagination
@@ -46,50 +30,40 @@ let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_c
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   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);
+      label = _this$props.label,
+      direction = _this$props.direction,
+      buttonRef = _this$props.buttonRef,
+      props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       elementRef: this.handleRef,
       on: ['hover', 'focus'],
@@ -104,7 +78,6 @@ let PaginationArrowButton = (_dec = (0, _testable.testable)(), _dec(_class = (_c
       margin: this.margin
     }), this.Icon));
   }
-
 }, _class2.displayName = "PaginationArrowButton", _class2.componentId = 'Pagination.Navigation', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {}, _class2)) || _class);
 exports.PaginationArrowButton = PaginationArrowButton;
 var _default = PaginationArrowButton;

package/lib/Pagination/PaginationArrowButton/locator.js

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

package/lib/Pagination/PaginationArrowButton/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 = {
   direction: _propTypes.default.oneOf(['first', 'prev', 'next', 'last']),
   label: _propTypes.default.string.isRequired,
@@ -39,7 +37,9 @@ const propTypes = {
   onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['direction', 'label', 'buttonRef' // we don't want to pass onClick
+const allowedProps = ['direction', 'label', 'buttonRef'
+
+// we don't want to pass onClick
 // 'onClick'
 ];
 exports.allowedProps = allowedProps;

package/lib/Pagination/PaginationButton/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PaginationButton = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _BaseButton = require("@instructure/ui-buttons/lib/BaseButton");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _props = require("./props");
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Pagination
@@ -29,12 +21,10 @@ let PaginationButton = (_dec = (0, _testable.testable)(), _dec(_class = (_class2
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   render() {
     const exclude = this.props.current ? ['onClick', 'href'] : [];
     const props = (0, _omitProps.omitProps)(this.props, PaginationButton.allowedProps, exclude);
@@ -47,7 +37,6 @@ let PaginationButton = (_dec = (0, _testable.testable)(), _dec(_class = (_class2
       elementRef: this.handleRef
     }), this.props.children);
   }
-
 }, _class2.displayName = "PaginationButton", _class2.componentId = 'Pagination.Page', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   current: false
 }, _class2)) || _class);

package/lib/Pagination/PaginationButton/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,13 +29,16 @@ 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 = {
   children: _propTypes.default.node.isRequired,
   current: _propTypes.default.bool,
   onClick: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'current' // we don't want to pass onClick
+const allowedProps = ['children', 'current'
+
+// we don't want to pass onClick
 // 'onClick'
 ];
 exports.allowedProps = allowedProps;

package/lib/Pagination/PaginationLocator.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +31,11 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const PaginationButtonLocator = (0, _locator.locator)(_index.Pagination.Page.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const PaginationButtonLocator = (0, _locator.locator)(_index.Pagination.Page.selector);
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const PaginationLocator = (0, _locator.locator)(_index.Pagination.selector, {
   findAllPageButtons: async function () {
     return PaginationButtonLocator.findAll(...arguments);

package/lib/Pagination/PaginationPageInput/PaginationPageInputLocator.js

@@ -4,13 +4,9 @@ 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)
  *
@@ -34,9 +30,12 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 // eslint-disable-line no-restricted-imports
-const PaginationPageInputLocator = (0, _locator.locator)( // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+const PaginationPageInputLocator = (0, _locator.locator)(
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 _index.PaginationPageInput.selector, {
   findInput: function () {
     return _NumberInputLocator.NumberInputLocator.findInput(...arguments);