@instructure/ui-pagination 8.17.1-snapshot.82 → 8.18.1-snapshot.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
+
+**Note:** Version bump only for package @instructure/ui-pagination
+
 # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
 
 ### Bug Fixes

package/es/Pagination/PaginationPageInput/index.js

@@ -104,11 +104,15 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
   }
 
   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) {
-    this.props.makeStyles?.(); // when the current page changes from outside (e.g.: from arrow buttons),
+    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); // when the current page changes from outside (e.g.: from arrow buttons),
     // we update the initial state
 
     if (this.props.currentPageIndex !== prevProps.currentPageIndex) {
@@ -153,31 +157,31 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
   }
 
   renderLabel() {
-    const _this$props = this.props,
-          label = _this$props.label,
-          numberOfPages = _this$props.numberOfPages,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          label = _this$props3.label,
+          numberOfPages = _this$props3.numberOfPages,
+          styles = _this$props3.styles;
     return typeof label === 'function' && label(numberOfPages) ? jsx("span", {
-      css: styles?.inputLabel
+      css: styles === null || styles === void 0 ? void 0 : styles.inputLabel
     }, label(numberOfPages)) : null;
   }
 
   renderScreenReaderLabel() {
-    const _this$props2 = this.props,
-          screenReaderLabel = _this$props2.screenReaderLabel,
-          numberOfPages = _this$props2.numberOfPages;
+    const _this$props4 = this.props,
+          screenReaderLabel = _this$props4.screenReaderLabel,
+          numberOfPages = _this$props4.numberOfPages;
     return jsx(ScreenReaderContent, null, screenReaderLabel(this.currentPage, numberOfPages));
   }
 
   render() {
-    const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          disabled = _this$props3.disabled;
+    const _this$props5 = this.props,
+          styles = _this$props5.styles,
+          disabled = _this$props5.disabled;
     return jsx("span", {
-      css: styles?.paginationPageInput,
+      css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
       ref: this.handleRef
     }, jsx("span", {
-      css: styles?.numberInput
+      css: styles === null || styles === void 0 ? void 0 : styles.numberInput
     }, jsx(NumberInput, {
       renderLabel: this.renderScreenReaderLabel(),
       onBlur: this.handleBlur,

package/es/Pagination/index.js

@@ -123,11 +123,15 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   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?.();
+    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;
@@ -195,7 +199,9 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   handleInputChange(event, pageIndex) {
-    this.childPages[pageIndex].props.onClick?.(event);
+    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) {
@@ -272,6 +278,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   renderArrowButton(direction, currentPageIndex) {
+    var _page$props, _page$props2;
+
     const childPages = this.childPages; // We don't display the arrows in "compact" variant under 6 items
 
     if (!(propsHaveCompactView(this.props) || this.inputMode)) {
@@ -289,8 +297,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           handleButtonRef = _this$getArrowVariant.handleButtonRef;
 
     const page = childPages[pageIndex];
-    const disabled = page?.props?.disabled || this.props.disabled || !shouldEnableIcon;
-    const onClick = page?.props?.onClick;
+    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,
@@ -302,6 +310,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   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);
@@ -310,11 +320,11 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       as: this.props.as,
       elementRef: this.handleElementRef,
       margin: this.props.margin,
-      css: this.props.styles?.pagination,
+      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 : void 0
     }), this.props.label && this.renderLabel(), jsx(View, {
       display: "inline-block",
-      css: this.props.styles?.pages
+      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)));
   }
 

package/lib/Pagination/PaginationPageInput/index.js

@@ -97,11 +97,15 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
 
   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) {
-    this.props.makeStyles?.(); // when the current page changes from outside (e.g.: from arrow buttons),
+    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); // when the current page changes from outside (e.g.: from arrow buttons),
     // we update the initial state
 
     if (this.props.currentPageIndex !== prevProps.currentPageIndex) {
@@ -146,31 +150,31 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
 
   renderLabel() {
-    const _this$props = this.props,
-          label = _this$props.label,
-          numberOfPages = _this$props.numberOfPages,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          label = _this$props3.label,
+          numberOfPages = _this$props3.numberOfPages,
+          styles = _this$props3.styles;
     return typeof label === 'function' && label(numberOfPages) ? (0, _emotion.jsx)("span", {
-      css: styles?.inputLabel
+      css: styles === null || styles === void 0 ? void 0 : styles.inputLabel
     }, label(numberOfPages)) : null;
   }
 
   renderScreenReaderLabel() {
-    const _this$props2 = this.props,
-          screenReaderLabel = _this$props2.screenReaderLabel,
-          numberOfPages = _this$props2.numberOfPages;
+    const _this$props4 = this.props,
+          screenReaderLabel = _this$props4.screenReaderLabel,
+          numberOfPages = _this$props4.numberOfPages;
     return (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel(this.currentPage, numberOfPages));
   }
 
   render() {
-    const _this$props3 = this.props,
-          styles = _this$props3.styles,
-          disabled = _this$props3.disabled;
+    const _this$props5 = this.props,
+          styles = _this$props5.styles,
+          disabled = _this$props5.disabled;
     return (0, _emotion.jsx)("span", {
-      css: styles?.paginationPageInput,
+      css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
       ref: this.handleRef
     }, (0, _emotion.jsx)("span", {
-      css: styles?.numberInput
+      css: styles === null || styles === void 0 ? void 0 : styles.numberInput
     }, (0, _emotion.jsx)(_NumberInput.NumberInput, {
       renderLabel: this.renderScreenReaderLabel(),
       onBlur: this.handleBlur,

package/lib/Pagination/index.js

@@ -131,11 +131,15 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   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?.();
+    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;
@@ -203,7 +207,9 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   handleInputChange(event, pageIndex) {
-    this.childPages[pageIndex].props.onClick?.(event);
+    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) {
@@ -280,6 +286,8 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   renderArrowButton(direction, currentPageIndex) {
+    var _page$props, _page$props2;
+
     const childPages = this.childPages; // We don't display the arrows in "compact" variant under 6 items
 
     if (!(propsHaveCompactView(this.props) || this.inputMode)) {
@@ -297,8 +305,8 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
           handleButtonRef = _this$getArrowVariant.handleButtonRef;
 
     const page = childPages[pageIndex];
-    const disabled = page?.props?.disabled || this.props.disabled || !shouldEnableIcon;
-    const onClick = page?.props?.onClick;
+    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 ? (0, _emotion.jsx)(_PaginationArrowButton.PaginationArrowButton, {
       direction: direction,
       "data-direction": direction,
@@ -310,6 +318,8 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   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);
 
@@ -320,11 +330,11 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       as: this.props.as,
       elementRef: this.handleElementRef,
       margin: this.props.margin,
-      css: this.props.styles?.pagination,
+      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 : void 0
     }), this.props.label && this.renderLabel(), (0, _emotion.jsx)(_View.View, {
       display: "inline-block",
-      css: this.props.styles?.pages
+      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)));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "8.17.1-snapshot.82+96244a097",
+  "version": "8.18.1-snapshot.1+669aa5892",
   "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.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-queries": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-queries": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
-    "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-buttons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-number-input": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-portal": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-tooltip": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
-    "@instructure/uid": "8.17.1-snapshot.82+96244a097",
+    "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-buttons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-number-input": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-portal": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-tooltip": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/uid": "8.18.1-snapshot.1+669aa5892",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
+  "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
 }