@instructure/ui-pagination 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-pagination
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/Pagination/v1/PaginationArrowButton/index.js

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "direction", "buttonRef"];
 /*
  * The MIT License (MIT)
  *
@@ -38,13 +36,14 @@ id: Pagination.Navigation
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 class PaginationArrowButton extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+  static displayName = "PaginationArrowButton";
+  static componentId = 'Pagination.Navigation';
+  static allowedProps = allowedProps;
+  static defaultProps = {};
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   get margin() {
     switch (this.props.direction) {
       case 'first':
@@ -52,7 +51,7 @@ class PaginationArrowButton extends Component {
       case 'last':
         return '0 0 0 xx-small';
       default:
-        return void 0;
+        return undefined;
     }
   }
   get Icon() {
@@ -70,11 +69,12 @@ class PaginationArrowButton extends Component {
     }
   }
   render() {
-    const _this$props = this.props,
-      label = _this$props.label,
-      direction = _this$props.direction,
-      buttonRef = _this$props.buttonRef,
-      props = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      label,
+      direction,
+      buttonRef,
+      ...props
+    } = this.props;
     return _jsx(Tooltip, {
       elementRef: this.handleRef,
       on: ['hover', 'focus'],
@@ -87,7 +87,7 @@ class PaginationArrowButton extends Component {
         withBackground: false,
         withBorder: false,
         screenReaderLabel: label,
-        rel: props.href || props.to ? direction : void 0,
+        rel: props.href || props.to ? direction : undefined,
         elementRef: buttonRef,
         margin: this.margin,
         "data-cid": "PaginationArrowButton",
@@ -96,9 +96,5 @@ class PaginationArrowButton extends Component {
     });
   }
 }
-PaginationArrowButton.displayName = "PaginationArrowButton";
-PaginationArrowButton.componentId = 'Pagination.Navigation';
-PaginationArrowButton.allowedProps = allowedProps;
-PaginationArrowButton.defaultProps = {};
 export default PaginationArrowButton;
 export { PaginationArrowButton };

package/es/Pagination/v1/PaginationButton/index.js

@@ -35,13 +35,16 @@ id: Pagination.Page
 **/
 
 class PaginationButton extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+  static displayName = "PaginationButton";
+  static componentId = 'Pagination.Page';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    current: false
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   render() {
     const exclude = this.props.current ? ['onClick', 'href'] : [];
     const props = omitProps(this.props, PaginationButton.allowedProps, exclude);
@@ -57,7 +60,7 @@ class PaginationButton extends Component {
         withBackground: this.props.current,
         withBorder: this.props.current,
         ...props,
-        "aria-current": this.props.current ? 'page' : void 0,
+        "aria-current": this.props.current ? 'page' : undefined,
         elementRef: this.handleRef,
         ...(this.props.screenReaderLabel ? {
           'aria-label': this.props.screenReaderLabel
@@ -67,11 +70,5 @@ class PaginationButton extends Component {
     });
   }
 }
-PaginationButton.displayName = "PaginationButton";
-PaginationButton.componentId = 'Pagination.Page';
-PaginationButton.allowedProps = allowedProps;
-PaginationButton.defaultProps = {
-  current: false
-};
 export default PaginationButton;
 export { PaginationButton };

package/es/Pagination/v1/PaginationPageInput/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _PaginationPageInput;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -37,41 +37,16 @@ parent: Pagination
 id: Pagination.PageInput
 ---
 **/
-let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_PaginationPageInput = class PaginationPageInput extends Component {
+let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class PaginationPageInput extends Component {
+  static displayName = "PaginationPageInput";
+  static componentId = 'Pagination.PageInput';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    disabled: false
+  };
+  ref = null;
   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
-      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 => {
-      if (Math.round(this.state.number) !== this.currentPage) {
-        this.setNewPage(event, Math.round(this.state.number));
-      }
-    };
     this.state = this.initialState;
   }
   get currentPage() {
@@ -90,12 +65,10 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
     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);
+    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);
+    this.props.makeStyles?.();
 
     // when the current page changes from outside (e.g.: from arrow buttons),
     // we update the initial state
@@ -106,12 +79,35 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
   resetInitialState() {
     this.setState(this.initialState);
   }
+  handleRef = el => {
+    this.ref = el;
+  };
+  handleInputRef = el => {
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el);
+    }
+  };
+  handleChange = (_event, value) => {
+    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
+    });
+  };
   handleKeyDown(event) {
-    const key = event.key;
+    const {
+      key
+    } = event;
     if (key.toLowerCase() === 'enter') {
-      const _this$state = this.state,
-        value = _this$state.value,
-        number = _this$state.number;
+      const {
+        value,
+        number
+      } = this.state;
 
       // If it is invalid, we reset the input to the current page
       if (value === '' || isNaN(value)) {
@@ -121,6 +117,17 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
       this.setNewPage(event, number);
     }
   }
+  handleDecrement = event => {
+    this.setNewPage(event, Math.floor(this.currentPage - 1));
+  };
+  handleIncrement = event => {
+    this.setNewPage(event, Math.floor(this.currentPage + 1));
+  };
+  handleBlur = event => {
+    if (Math.round(this.state.number) !== this.currentPage) {
+      this.setNewPage(event, Math.round(this.state.number));
+    }
+  };
   getNumberWithinRange(n) {
     if (n < this.MIN) return this.MIN;
     if (n > this.MAX) return this.MAX;
@@ -135,33 +142,36 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
     this.props.onChange(event, number - 1);
   }
   renderLabel() {
-    const _this$props3 = this.props,
-      label = _this$props3.label,
-      numberOfPages = _this$props3.numberOfPages,
-      styles = _this$props3.styles;
+    const {
+      label,
+      numberOfPages,
+      styles
+    } = this.props;
     return typeof label === 'function' && label(numberOfPages) ? _jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.inputLabel,
+      css: styles?.inputLabel,
       children: label(numberOfPages)
     }) : null;
   }
   renderScreenReaderLabel() {
-    const _this$props4 = this.props,
-      screenReaderLabel = _this$props4.screenReaderLabel,
-      numberOfPages = _this$props4.numberOfPages;
+    const {
+      screenReaderLabel,
+      numberOfPages
+    } = this.props;
     return _jsx(ScreenReaderContent, {
       children: screenReaderLabel(this.currentPage, numberOfPages)
     });
   }
   render() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      disabled = _this$props5.disabled;
+    const {
+      styles,
+      disabled
+    } = this.props;
     return _jsxs("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.paginationPageInput,
+      css: styles?.paginationPageInput,
       ref: this.handleRef,
       "data-cid": "PaginationPageInput",
       children: [_jsx("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.numberInput,
+        css: styles?.numberInput,
         children: _jsx(NumberInput, {
           renderLabel: this.renderScreenReaderLabel(),
           onBlur: this.handleBlur,
@@ -179,8 +189,6 @@ let PaginationPageInput = (_dec = withStyle(generateStyle, generateComponentThem
       }), this.renderLabel()]
     });
   }
-}, _PaginationPageInput.displayName = "PaginationPageInput", _PaginationPageInput.componentId = 'Pagination.PageInput', _PaginationPageInput.allowedProps = allowedProps, _PaginationPageInput.defaultProps = {
-  disabled: false
-}, _PaginationPageInput)) || _class);
+}) || _class);
 export default PaginationPageInput;
 export { PaginationPageInput };

package/es/Pagination/v1/PaginationPageInput/theme.js

@@ -28,13 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const spacing = theme.spacing,
-    colors = theme.colors;
+  const {
+    spacing,
+    colors
+  } = theme;
   const componentVariables = {
     inputSpacing: spacing.xSmall,
     inputWidth: '4.5rem',
-    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125
+    labelColor: colors?.contrasts?.grey125125
   };
   return {
     ...componentVariables