@instructure/ui-pagination 11.6.0 → 11.6.1-snapshot-129

package/es/Pagination/v2/index.js

@@ -0,0 +1,481 @@
+var _dec, _dec2, _class, _Pagination;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { cloneElement, Children, Component } from 'react';
+import { Text } from '@instructure/ui-text/latest';
+import { View } from '@instructure/ui-view/latest';
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
+import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils';
+import { withStyle } from '@instructure/emotion';
+import { PaginationButton } from "./PaginationButton/index.js";
+import { PaginationArrowButton } from "./PaginationArrowButton/index.js";
+import { PaginationPageInput } from "./PaginationPageInput/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** 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) {
+  if (props.children) return props.variant === 'compact' && childrenArray(props).length > 5;
+  return props.variant === 'compact' && props.totalPageNumber > 5;
+}
+/**
+---
+category: components
+---
+**/
+let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Pagination = class Pagination extends Component {
+  constructor(props) {
+    super(props);
+    this._labelId = void 0;
+    this._firstButton = null;
+    this._prevButton = null;
+    this._nextButton = null;
+    this._lastButton = null;
+    this.ref = null;
+    this.currentPageRef = 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.renderDefaultPageInput = () => {
+      const _this$props = this.props,
+        currentPage = _this$props.currentPage,
+        totalPageNumber = _this$props.totalPageNumber;
+      return _jsx(PaginationPageInput, {
+        numberOfPages: totalPageNumber,
+        currentPageIndex: currentPage - 1,
+        onChange: (_e, nextPageIndex) => {
+          var _this$props$onPageCha, _this$props2;
+          return (_this$props$onPageCha = (_this$props2 = this.props).onPageChange) === null || _this$props$onPageCha === void 0 ? void 0 : _this$props$onPageCha.call(_this$props2, nextPageIndex + 1, currentPage);
+        },
+        screenReaderLabel: this.props.screenReaderLabelNumberInput,
+        label: this.props.labelNumberInput,
+        disabled: this.props.disabled,
+        inputRef: this.handleInputRef
+      });
+    };
+    this.handleNavigation = (nextIndex, previousIndex) => {
+      const onPageChange = this.props.onPageChange;
+      if (typeof onPageChange === 'function') {
+        onPageChange(nextIndex, previousIndex);
+      }
+    };
+    this.renderPagesInInterval = (from, to, currentPage) => {
+      if (to - from > 1000) throw new Error('Pagination: too many pages (more than 1000)');
+      const pages = [];
+      for (let i = from; i <= to; i++) {
+        var _this$props$renderPag, _this$props3;
+        pages.push(_jsx(Pagination.Page, {
+          ref: e => {
+            if (i === currentPage) {
+              this.currentPageRef = e;
+            }
+          },
+          onClick: () => this.handleNavigation(i, currentPage),
+          onMouseEnter: () => this.handleOnMouseEnter(i),
+          current: i === currentPage,
+          ...(this.props.screenReaderLabelPageButton ? {
+            screenReaderLabel: this.props.screenReaderLabelPageButton(i, this.props.totalPageNumber)
+          } : {}),
+          children: (_this$props$renderPag = (_this$props3 = this.props).renderPageIndicator) === null || _this$props$renderPag === void 0 ? void 0 : _this$props$renderPag.call(_this$props3, i, currentPage)
+        }, i));
+      }
+      return pages;
+    };
+    this.renderDefaultPages = () => {
+      var _this$props$styles3;
+      const _this$props4 = this.props,
+        ellipsis = _this$props4.ellipsis,
+        currentPage = _this$props4.currentPage,
+        totalPageNumber = _this$props4.totalPageNumber,
+        siblingCount = _this$props4.siblingCount,
+        boundaryCount = _this$props4.boundaryCount,
+        variant = _this$props4.variant;
+      const pages = [];
+      if (totalPageNumber <= 2 * boundaryCount || totalPageNumber <= 1 + siblingCount + boundaryCount || variant === 'full') {
+        var _this$props$styles;
+        return _jsx("ul", {
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pageIndicatorList,
+          children: this.renderPagesInInterval(1, totalPageNumber, currentPage)
+        });
+      }
+      if (currentPage > boundaryCount + siblingCount + 1) {
+        pages.push(this.renderPagesInInterval(1, boundaryCount, currentPage));
+        pages.push(_jsx("li", {
+          style: {
+            all: 'unset'
+          },
+          children: _jsx(Text, {
+            children: ellipsis
+          })
+        }, "ellipsis1"));
+        if (currentPage - siblingCount > totalPageNumber - boundaryCount + 1) {
+          var _this$props$styles2;
+          pages.push(this.renderPagesInInterval(totalPageNumber - boundaryCount + 1, totalPageNumber, currentPage));
+          return _jsx("ul", {
+            css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pageIndicatorList,
+            children: pages
+          });
+        }
+        pages.push(this.renderPagesInInterval(currentPage - siblingCount, currentPage, currentPage));
+      } else {
+        pages.push(this.renderPagesInInterval(1, Math.max(currentPage, boundaryCount), currentPage));
+      }
+      if (currentPage < totalPageNumber - (siblingCount + boundaryCount)) {
+        pages.push(this.renderPagesInInterval(Math.max(currentPage, boundaryCount) + 1, currentPage + siblingCount, currentPage));
+        pages.push(_jsx("li", {
+          style: {
+            all: 'unset'
+          },
+          children: _jsx(Text, {
+            children: ellipsis
+          })
+        }, "ellipsis2"));
+        pages.push(this.renderPagesInInterval(totalPageNumber - boundaryCount + 1, totalPageNumber, currentPage));
+      } else {
+        pages.push(this.renderPagesInInterval(currentPage + 1, totalPageNumber, currentPage));
+      }
+      return _jsx("ul", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pageIndicatorList,
+        children: pages
+      });
+    };
+    this.renderDefaultArrowButton = direction => {
+      if (!this.withFirstAndLastButton && (direction === 'first' || direction === 'last')) {
+        return null;
+      }
+      // We don't display the arrows in "compact" variant under 6 items
+      if (!(propsHaveCompactView(this.props) || this.inputMode)) {
+        return null;
+      }
+      const _this$props5 = this.props,
+        totalPageNumber = _this$props5.totalPageNumber,
+        currentPage = _this$props5.currentPage;
+      const _this$getArrowVariant = this.getArrowVariant(direction, currentPage - 1, totalPageNumber),
+        label = _this$getArrowVariant.label,
+        shouldEnableIcon = _this$getArrowVariant.shouldEnableIcon,
+        handleButtonRef = _this$getArrowVariant.handleButtonRef;
+      const disabled = this.props.disabled || !shouldEnableIcon;
+      const onClick = () => {
+        if (direction === 'first') {
+          this.handleNavigation(1, currentPage);
+        }
+        if (direction === 'prev') {
+          this.handleNavigation(Math.max(currentPage - 1, 1), currentPage);
+        }
+        if (direction === 'next') {
+          this.handleNavigation(Math.min(currentPage + 1, totalPageNumber), currentPage);
+        }
+        if (direction === 'last') {
+          this.handleNavigation(totalPageNumber, currentPage);
+        }
+      };
+      return shouldEnableIcon || this.showDisabledButtons ? _jsx(PaginationArrowButton, {
+        direction: direction,
+        "data-direction": direction,
+        label: label,
+        onClick: onClick,
+        disabled: disabled,
+        buttonRef: handleButtonRef
+      }) : null;
+    };
+    this.handleOnMouseEnter = page => {
+      if (typeof this.props.onMouseEnter === 'function') {
+        this.props.onMouseEnter(page);
+      }
+    };
+    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
+      };
+    } else {
+      return {
+        lastFocusedButton: void 0
+      };
+    }
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props6;
+    (_this$props$makeStyle = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props6);
+  }
+  componentDidUpdate(prevProps, _prevState, snapshot) {
+    var _this$props$makeStyle2, _this$props7;
+    (_this$props$makeStyle2 = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props7);
+
+    // set focus on the currently active page
+    if (this.props.currentPage !== prevProps.currentPage && document.activeElement !== this._firstButton && document.activeElement !== this._prevButton && document.activeElement !== this._nextButton && document.activeElement !== this._lastButton) {
+      var _this$currentPageRef, _this$currentPageRef$, _this$currentPageRef$2;
+      // @ts-expect-error fix typing
+      (_this$currentPageRef = this.currentPageRef) === null || _this$currentPageRef === void 0 ? void 0 : (_this$currentPageRef$ = _this$currentPageRef.ref) === null || _this$currentPageRef$ === void 0 ? void 0 : (_this$currentPageRef$2 = _this$currentPageRef$.focus) === null || _this$currentPageRef$2 === void 0 ? void 0 : _this$currentPageRef$2.call(_this$currentPageRef$);
+    }
+    if (!this.props.shouldHandleFocus || !propsHaveCompactView(prevProps) && !propsHaveCompactView(this.props)) {
+      return;
+    } else {
+      this.focusElementAfterUpdate(snapshot);
+    }
+  }
+  focusElementAfterUpdate(snapshot) {
+    const lastFocusedButton = snapshot.lastFocusedButton;
+    if (lastFocusedButton) {
+      var _nextFocusElement;
+      const focusable = findTabbable(this.ref);
+      const direction = lastFocusedButton.dataset.direction;
+
+      // 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 = nextFocusElement) === null || _nextFocusElement === void 0 ? void 0 : _nextFocusElement.focus();
+    }
+  }
+  get compactView() {
+    return propsHaveCompactView(this.props);
+  }
+  transferDisabledPropToChildren(children) {
+    return children && this.props.disabled ? Children.map(children, page => /*#__PURE__*/cloneElement(page, {
+      disabled: this.props.disabled
+    })) : children;
+  }
+  renderLabel() {
+    const display = this.props.variant === 'full' ? 'inline-block' : 'block';
+    const visibleLabel = hasVisibleChildren(this.props.label);
+    return _jsx(View, {
+      padding: visibleLabel ? 'small' : '0',
+      display: visibleLabel ? display : 'auto',
+      id: this._labelId,
+      children: _jsx(Text, {
+        variant: "content",
+        children: this.props.label
+      })
+    });
+  }
+  renderPageInput(currentPageIndex) {
+    if (!this.props.children) return this.renderDefaultPageInput();
+    return _jsx(PaginationPageInput, {
+      numberOfPages: this.childPages.length,
+      currentPageIndex: currentPageIndex,
+      onChange: this.handleInputChange.bind(this),
+      screenReaderLabel: this.props.screenReaderLabelNumberInput,
+      label: this.props.labelNumberInput,
+      disabled: this.props.disabled,
+      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) {
+    if (!this.props.children) return this.renderDefaultPages();
+    const allPages = this.childPages;
+    let visiblePages = allPages;
+    if (this.compactView) {
+      const firstIndex = 0;
+      const lastIndex = allPages.length - 1;
+      const sliceStart = Math.min(lastIndex - 3, Math.max(currentPageIndex - 1, firstIndex));
+      const sliceEnd = Math.min(currentPageIndex + 4, lastIndex);
+      visiblePages = allPages.slice(sliceStart, sliceEnd);
+      const firstPage = allPages[firstIndex];
+      const lastPage = allPages[lastIndex];
+      if (sliceStart - firstIndex > 1) visiblePages.unshift(_jsx("li", {
+        style: {
+          all: 'unset'
+        },
+        "aria-hidden": "true",
+        children: _jsx(Text, {
+          children: this.props.ellipsis
+        })
+      }, "first"));
+      if (sliceStart - firstIndex > 0) visiblePages.unshift(firstPage);
+      if (lastIndex - sliceEnd + 1 > 1) visiblePages.push(_jsx("li", {
+        style: {
+          all: 'unset'
+        },
+        "aria-hidden": "true",
+        children: _jsx(Text, {
+          children: this.props.ellipsis
+        })
+      }, "last"));
+      if (lastIndex - sliceEnd + 1 > 0) visiblePages.push(lastPage);
+    }
+    return _jsx(View, {
+      display: "inline-block",
+      as: "ul",
+      margin: "0",
+      padding: "0",
+      children: this.transferDisabledPropToChildren(visiblePages)
+    });
+  }
+  getArrowVariant(direction, currentPageIndex, pagesCount) {
+    switch (direction) {
+      case 'first':
+        return {
+          pageIndex: 0,
+          label: this.props.labelFirst || 'First Page',
+          shouldEnableIcon: currentPageIndex > 1,
+          handleButtonRef: el => {
+            this._firstButton = el;
+          }
+        };
+      case 'prev':
+        return {
+          pageIndex: currentPageIndex - 1,
+          label: this.props.labelPrev || 'Previous Page',
+          shouldEnableIcon: currentPageIndex > 0,
+          handleButtonRef: el => {
+            this._prevButton = el;
+          }
+        };
+      case 'next':
+        return {
+          pageIndex: currentPageIndex + 1,
+          label: this.props.labelNext || 'Next Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 1,
+          handleButtonRef: el => {
+            this._nextButton = el;
+          }
+        };
+      case 'last':
+        return {
+          pageIndex: pagesCount - 1,
+          label: this.props.labelLast || 'Last Page',
+          shouldEnableIcon: currentPageIndex < pagesCount - 2,
+          handleButtonRef: el => {
+            this._lastButton = el;
+          }
+        };
+    }
+  }
+  renderArrowButton(direction, currentPageIndex) {
+    var _page$props, _page$props2;
+    if (!this.props.children) return this.renderDefaultArrowButton(direction);
+    const childPages = this.childPages;
+    // 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$getArrowVariant2 = this.getArrowVariant(direction, currentPageIndex, childPages.length),
+      pageIndex = _this$getArrowVariant2.pageIndex,
+      label = _this$getArrowVariant2.label,
+      shouldEnableIcon = _this$getArrowVariant2.shouldEnableIcon,
+      handleButtonRef = _this$getArrowVariant2.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;
+    return shouldEnableIcon || this.showDisabledButtons ? _jsx(PaginationArrowButton, {
+      direction: direction,
+      "data-direction": direction,
+      label: label,
+      onClick: onClick,
+      disabled: disabled,
+      buttonRef: handleButtonRef
+    }) : null;
+  }
+  render() {
+    var _this$props$styles4, _this$props$styles5;
+    const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);
+    const passthroughProps = View.omitViewProps(omitProps(this.props, Pagination.allowedProps), Pagination);
+    return _jsxs(View, {
+      ...passthroughProps,
+      role: "navigation",
+      as: this.props.as,
+      elementRef: this.handleElementRef,
+      margin: this.props.margin,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.pagination,
+      "aria-labelledby": this.props.label ? this._labelId : void 0,
+      "data-cid": "Pagination",
+      children: [this.props.label && this.renderLabel(), _jsxs(View, {
+        display: "inline-block",
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.pages,
+        children: [this.renderArrowButton('first', currentPageIndex), this.renderArrowButton('prev', currentPageIndex), this.inputMode ? this.renderPageInput(currentPageIndex) : this.renderPages(currentPageIndex), this.renderArrowButton('next', currentPageIndex), this.renderArrowButton('last', currentPageIndex)]
+      })]
+    });
+  }
+}, _Pagination.displayName = "Pagination", _Pagination.componentId = 'Pagination', _Pagination.allowedProps = allowedProps, _Pagination.defaultProps = {
+  disabled: false,
+  withFirstAndLastButton: false,
+  showDisabledButtons: false,
+  variant: 'full',
+  as: 'div',
+  labelNumberInput: numberOfPages => `of ${numberOfPages}`,
+  screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
+  shouldHandleFocus: true,
+  totalPageNumber: 0,
+  currentPage: 1,
+  siblingCount: 1,
+  boundaryCount: 1,
+  ellipsis: '…',
+  renderPageIndicator: page => page,
+  margin: 'space8'
+}, _Pagination.Page = PaginationButton, _Pagination.Navigation = PaginationArrowButton, _Pagination.PageInput = PaginationPageInput, _Pagination)) || _class) || _class);
+export default Pagination;
+export { Pagination, PaginationButton };

package/es/Pagination/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'disabled', 'withFirstAndLastButton', 'showDisabledButtons', 'label', 'labelNext', 'labelPrev', 'labelFirst', 'labelLast', 'labelNumberInput', 'screenReaderLabelNumberInput', 'screenReaderLabelPageButton', 'variant', 'margin', 'as', 'elementRef', 'inputRef', 'shouldHandleFocus', 'totalPageNumber', 'currentPage', 'onPageChange', 'siblingCount', 'boundaryCount', 'renderPageIndicator', 'ellipsis', 'onMouseEnter'];
+export { allowedProps };

package/es/Pagination/v2/styles.js

@@ -0,0 +1,58 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    pageIndicatorList: {
+      all: 'unset',
+      display: 'flex',
+      alignItems: 'center',
+      gap: componentTheme.pageIndicatorGap,
+      flexWrap: 'wrap',
+      justifyContent: 'center'
+    },
+    pagination: {
+      label: 'pagination',
+      textAlign: 'center'
+    },
+    pages: {
+      label: 'pagination__pages',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: componentTheme.pageIndicatorGap
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

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

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Pagination, PaginationButton } from "../Pagination/v2/index.js";

package/lib/Pagination/{PaginationArrowButton → v1/PaginationArrowButton}/index.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.PaginationArrowButton = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
+var _v11_ = require("@instructure/ui-buttons/v11_6");
 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 _v11_2 = require("@instructure/ui-tooltip/v11_6");
+var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/generated/IconArrowOpenStartSolid.js");
+var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/generated/IconArrowOpenEndSolid.js");
+var _IconArrowDoubleStartSolid = require("@instructure/ui-icons/lib/generated/IconArrowDoubleStartSolid.js");
+var _IconArrowDoubleEndSolid = require("@instructure/ui-icons/lib/generated/IconArrowDoubleEndSolid.js");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["label", "direction", "buttonRef"];
@@ -84,13 +84,13 @@ class PaginationArrowButton extends _react.Component {
       direction = _this$props.direction,
       buttonRef = _this$props.buttonRef,
       props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-    return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+    return (0, _jsxRuntime.jsx)(_v11_2.Tooltip, {
       elementRef: this.handleRef,
       on: ['hover', 'focus'],
       renderTip: (0, _jsxRuntime.jsx)(_PresentationContent.PresentationContent, {
         children: label
       }),
-      children: (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      children: (0, _jsxRuntime.jsx)(_v11_.IconButton, {
         ...props,
         size: "small",
         withBackground: false,

package/lib/Pagination/{PaginationButton → v1/PaginationButton}/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.PaginationButton = void 0;
 var _react = require("react");
-var _BaseButton = require("@instructure/ui-buttons/lib/BaseButton");
+var _v11_ = require("@instructure/ui-buttons/v11_6");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -57,7 +57,7 @@ class PaginationButton extends _react.Component {
       style: {
         all: 'unset'
       },
-      children: (0, _jsxRuntime.jsx)(_BaseButton.BaseButton, {
+      children: (0, _jsxRuntime.jsx)(_v11_.BaseButton, {
         color: "primary",
         "data-cid": "PaginationButton",
         withBackground: this.props.current,

package/lib/Pagination/{PaginationPageInput → v1/PaginationPageInput}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.PaginationPageInput = void 0;
 var _react = require("react");
 var _emotion = require("@instructure/emotion");
-var _NumberInput = require("@instructure/ui-number-input/lib/NumberInput");
+var _v11_ = require("@instructure/ui-number-input/v11_6");
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -168,7 +168,7 @@ let PaginationPageInput = exports.PaginationPageInput = (_dec = (0, _emotion.wit
       "data-cid": "PaginationPageInput",
       children: [(0, _jsxRuntime.jsx)("span", {
         css: styles === null || styles === void 0 ? void 0 : styles.numberInput,
-        children: (0, _jsxRuntime.jsx)(_NumberInput.NumberInput, {
+        children: (0, _jsxRuntime.jsx)(_v11_.NumberInput, {
           renderLabel: this.renderScreenReaderLabel(),
           onBlur: this.handleBlur,
           onChange: this.handleChange,