@instructure/ui-pagination 8.17.1-snapshot.21 → 8.17.1-snapshot.30

package/es/Pagination/PaginationPageInput/index.js

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

package/es/Pagination/index.js

@@ -123,15 +123,11 @@ 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);
+    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);
+    this.props.makeStyles?.();
 
     if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
       return;
@@ -199,9 +195,7 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   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);
+    this.childPages[pageIndex].props.onClick?.(event);
   }
 
   renderPages(currentPageIndex) {
@@ -278,8 +272,6 @@ 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)) {
@@ -297,8 +289,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           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;
+    const disabled = page?.props?.disabled || this.props.disabled || !shouldEnableIcon;
+    const onClick = page?.props?.onClick;
     return shouldEnableIcon || this.showDisabledButtons ? jsx(PaginationArrowButton, {
       direction: direction,
       "data-direction": direction,
@@ -310,8 +302,6 @@ 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);
@@ -320,11 +310,11 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       as: this.props.as,
       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,
+      css: 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$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
+      css: this.props.styles?.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,15 +97,11 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
 
   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);
+    this.props.makeStyles?.();
   }
 
   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); // when the current page changes from outside (e.g.: from arrow buttons),
+    this.props.makeStyles?.(); // when the current page changes from outside (e.g.: from arrow buttons),
     // we update the initial state
 
     if (this.props.currentPageIndex !== prevProps.currentPageIndex) {
@@ -150,31 +146,31 @@ let PaginationPageInput = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
 
   renderLabel() {
-    const _this$props3 = this.props,
-          label = _this$props3.label,
-          numberOfPages = _this$props3.numberOfPages,
-          styles = _this$props3.styles;
+    const _this$props = this.props,
+          label = _this$props.label,
+          numberOfPages = _this$props.numberOfPages,
+          styles = _this$props.styles;
     return typeof label === 'function' && label(numberOfPages) ? (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.inputLabel
+      css: styles?.inputLabel
     }, label(numberOfPages)) : null;
   }
 
   renderScreenReaderLabel() {
-    const _this$props4 = this.props,
-          screenReaderLabel = _this$props4.screenReaderLabel,
-          numberOfPages = _this$props4.numberOfPages;
+    const _this$props2 = this.props,
+          screenReaderLabel = _this$props2.screenReaderLabel,
+          numberOfPages = _this$props2.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;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          disabled = _this$props3.disabled;
     return (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
+      css: styles?.paginationPageInput,
       ref: this.handleRef
     }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.numberInput
+      css: styles?.numberInput
     }, (0, _emotion.jsx)(_NumberInput.NumberInput, {
       renderLabel: this.renderScreenReaderLabel(),
       onBlur: this.handleBlur,

package/lib/Pagination/index.js

@@ -131,15 +131,11 @@ 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);
+    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);
+    this.props.makeStyles?.();
 
     if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
       return;
@@ -207,9 +203,7 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
   }
 
   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);
+    this.childPages[pageIndex].props.onClick?.(event);
   }
 
   renderPages(currentPageIndex) {
@@ -286,8 +280,6 @@ 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)) {
@@ -305,8 +297,8 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
           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;
+    const disabled = page?.props?.disabled || this.props.disabled || !shouldEnableIcon;
+    const onClick = page?.props?.onClick;
     return shouldEnableIcon || this.showDisabledButtons ? (0, _emotion.jsx)(_PaginationArrowButton.PaginationArrowButton, {
       direction: direction,
       "data-direction": direction,
@@ -318,8 +310,6 @@ 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);
 
@@ -330,11 +320,11 @@ let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2
       as: this.props.as,
       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,
+      css: 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$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
+      css: this.props.styles?.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.21+79d490548",
+  "version": "8.17.1-snapshot.30+cb1322c25",
   "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.21+79d490548",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-test-queries": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-locator": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-queries": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
-    "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-a11y-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-buttons": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-number-input": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-portal": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-tooltip": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
-    "@instructure/uid": "8.17.1-snapshot.21+79d490548",
+    "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-a11y-content": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-a11y-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-buttons": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-number-input": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-portal": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-testable": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-tooltip": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-view": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/uid": "8.17.1-snapshot.30+cb1322c25",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
+  "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
 }