@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/dist/Pagination/index.scss

@@ -1,12 +1,4 @@
-@import "pagination-bootstrap";
-
-.pagination {
-  align-items: center;
-
-  .dropdown {
-    z-index: 4;
-  }
-}
+@import "variables";
 
 %pagination-icon-button-right {
   border-top-right-radius: 50%;
@@ -18,291 +10,193 @@
   border-bottom-left-radius: 50%;
 }
 
-.pagination-icon-button-right {
-  @extend %pagination-icon-button-right;
-}
-
-.pagination-icon-button-left {
-  @extend %pagination-icon-button-left;
-}
+.pagination {
+  display: flex;
+  margin: 0;
 
-.pagination-default {
-  .page-link {
-    &.previous .pgn__icon {
-      margin-inline-start: 0;
-      margin-inline-end: var(--pgn-spacing-pagination-margin-x);
-    }
+  .dropdown {
+    z-index: 4;
+  }
 
-    &.next .pgn__icon {
-      margin-inline-start: var(--pgn-spacing-pagination-margin-x);
-      margin-inline-end: 0;
-    }
+  .page-of-count {
+    margin: 0 .5rem;
+    border: 0;
   }
 
   .page-item {
     &:first-child .page-link {
-      [dir="rtl"] & {
-        border-radius: 0 var(--pgn-size-pagination-border-radius-lg) var(--pgn-size-pagination-border-radius-lg) 0;
-      }
+      margin-left: 0;
+
+      @include border-left-radius($border-radius);
     }
 
     &:last-child .page-link {
-      [dir="rtl"] & {
-        border-radius: var(--pgn-size-pagination-border-radius-lg) 0 0 var(--pgn-size-pagination-border-radius-lg);
-      }
+      @include border-right-radius($border-radius);
     }
-  }
-}
 
-.page-link {
-  border: none;
-
-  &.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: var(--pgn-color-pagination-bg-base);
-    color: var(--pgn-color-pagination-focus-text);
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  &.btn-primary:focus::before {
-    border: var(--pgn-size-pagination-focus-border-width) solid var(--pgn-color-pagination-focus-base);
-
-    @include button-size(
-      var(--pgn-spacing-btn-padding-y-base),
-      var(--pgn-spacing-btn-padding-x-base),
-      var(--pgn-typography-btn-font-size-base),
-      var(--pgn-typography-btn-line-height-base),
-      var(--pgn-size-btn-border-radius-base)
-    );
-  }
-
-  div {
-    display: flex;
-  }
+    &:first-child .btn-icon.page-link {
+      @extend %pagination-icon-button-left;
+    }
 
-  [dir="rtl"] & {
-    svg {
-      transform: scale(-1);
+    &:last-child .btn-icon.page-link {
+      @extend %pagination-icon-button-right;
     }
-  }
 
-  &:focus::before,
-  &.focus::before {
-    border-radius: 0;
-  }
-}
+    &.active .page-link {
+      z-index: 3;
+    }
 
-.page-item {
-  > .btn {
-    transition: none;
-    line-height: var(--pgn-typography-pagination-line-height);
+    > .btn {
+      transition: none;
+      line-height: $pagination-line-height;
+    }
   }
 
-  &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: var(--pgn-color-pagination-focus-base);
-    color: var(--pgn-color-pagination-bg-base);
-  }
-}
+  @include list-unstyled();
+  @include border-radius();
 
-.pagination-small {
-  .page-link {
-    font-size: var(--pgn-typography-pagination-font-size-sm);
-    line-height: var(--pgn-typography-pagination-line-height);
-    padding: .375rem .78rem;
+  &-small {
+    .page-link {
+      font-size: $pagination-font-size-sm;
+      line-height: $pagination-line-height;
+      padding: .375rem .78rem;
 
-    &.previous,
-    &.next {
-      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-      line-height: var(--pgn-size-pagination-secondary-height-sm);
+      &.previous,
+      &.next {
+        padding: 0 $pagination-padding-y;
+        line-height: $pagination-secondary-height-sm;
 
-      div {
-        display: flex;
-        align-items: center;
+        div {
+          display: flex;
+          align-items: center;
+        }
       }
     }
-  }
 
-  &:not(.pagination-default) {
-    .page-link {
+    &:not(.pagination-default) .page-link {
       &.previous,
       &.next {
         padding: 0;
-        width: var(--pgn-size-pagination-icon-width);
+        width: $pagination-icon-width;
       }
     }
   }
-}
-
-.pagination-secondary {
-  button.next,
-  button.previous {
-    height: var(--pgn-size-pagination-secondary-height-base);
-    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-  }
 
-  &.pagination-small {
+  &-secondary {
     button.next,
     button.previous {
-      height: var(--pgn-size-pagination-secondary-height-sm);
-      line-height: var(--pgn-typography-pagination-line-height);
+      height: $pagination-secondary-height;
+      padding: 0 $pagination-padding-y;
     }
-  }
-
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
-  }
-
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
-  }
-}
 
-.pagination-inverse {
-  %dark-styles {
-    background-color: transparent;
-    color: var(--pgn-color-white);
+    &.pagination-small {
+      button.next,
+      button.previous {
+        height: $pagination-secondary-height-sm;
+        line-height: $pagination-line-height;
+      }
+    }
   }
 
-  .pgn__dark-styles {
-    @extend %dark-styles;
+  .ellipsis {
+    border: 0;
+    margin-left: 0;
   }
 
-  .page-item {
-    &.disabled .page-link {
-      @extend %dark-styles;
+  &-inverse {
+    .ellipsis {
+      color: $white;
     }
 
-    &.active button.page-link {
-      background-color: var(--pgn-color-pagination-bg-base);
-      color: var(--pgn-color-pagination-text-base);
+    .dropdown .dropdown-toggle::after {
+      border-top: $pagination-toggle-border solid $pagination-dropdown-color-inverse;
     }
+  }
 
-    button.page-link {
-      @extend %dark-styles;
+  &-reduced {
+    &-dropdown-menu {
+      overflow-y: auto;
+      max-height: $pagination-reduced-dropdown-max-height;
+      min-width: $pagination-reduced-dropdown-min-width;
 
-      &:focus {
-        box-shadow: none;
+      a {
+        text-align: center;
       }
     }
 
-    &:not(.active):focus {
-      box-shadow: var(--pgn-elevation-box-shadow-level-1);
+    .dropdown-toggle::after {
+      width: 0;
+      height: 0;
+      border-left: $pagination-toggle-border solid transparent;
+      border-right: $pagination-toggle-border solid transparent;
+      border-top: $pagination-toggle-border solid $gray-700;
+      transform: rotate(0);
+      inset-inline-start: .5rem;
+      top: 0;
+      margin-inline-end: 1rem;
     }
-  }
 
-  .page-link {
-    &:focus::before,
-    &.focus::before {
-      display: none;
+    button.next,
+    button.previous {
+      height: $pagination-secondary-height;
+      padding: 0 $pagination-padding-y;
     }
-  }
-
-  .dropdown {
-    .btn-tertiary {
-      color: var(--pgn-color-pagination-text-inverse);
 
-      &::after {
-        border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-text-inverse);
-      }
+    &.pagination-small {
+      .btn.dropdown-toggle {
+        font-size: $pagination-font-size-sm;
 
-      &:active,
-      &:hover {
-        background-color: transparent;
+        &::after {
+          border-left-width: $pagination-toggle-border-sm;
+          border-right-width: $pagination-toggle-border-sm;
+          border-top-width: $pagination-toggle-border-sm;
+        }
       }
 
-      &:not(:disabled):not(.disabled):active {
-        color: var(--pgn-color-pagination-text-inverse);
+      button.previous,
+      button.next {
+        line-height: $pagination-icon-height;
+        height: $pagination-icon-height;
       }
     }
   }
 
-  .show > .dropdown-toggle {
-    background-color: transparent;
-  }
-}
-
-.pgn__reduced-pagination-dropdown {
-  overflow-y: auto;
-  max-height: var(--pgn-size-pagination-reduced-dropdown-max-height);
-  min-width: var(--pgn-size-pagination-reduced-dropdown-min-width);
-
-  a {
-    text-align: center;
-  }
-}
-
-.pagination-reduced {
-  .dropdown-toggle::after {
-    width: 0;
-    height: 0;
-    border-left: var(--pgn-size-pagination-toggle-border-base) solid transparent;
-    border-right: var(--pgn-size-pagination-toggle-border-base) solid transparent;
-    border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-gray-700);
-    transform: rotate(0);
-    inset-inline-start: .5rem;
-    top: 0;
-    margin-inline-end: 1rem;
-  }
-
-  button.next,
-  button.previous {
-    height: var(--pgn-size-pagination-secondary-height-base);
-    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-  }
-
-  &.pagination-small {
-    .btn.dropdown-toggle {
-      font-size: var(--pgn-typography-pagination-font-size-sm);
-
-      &::after {
-        border-left-width: var(--pgn-size-pagination-toggle-border-sm);
-        border-right-width: var(--pgn-size-pagination-toggle-border-sm);
-        border-top-width: var(--pgn-size-pagination-toggle-border-sm);
-      }
+  &-minimal {
+    .page-item:first-child {
+      margin-inline-end: .3rem;
     }
 
-    button.previous,
-    button.next {
-      line-height: var(--pgn-size-pagination-icon-height);
-      height: var(--pgn-size-pagination-icon-height);
+    button.next,
+    button.previous {
+      padding: $pagination-padding-y;
+      height: $pagination-secondary-height;
     }
-  }
 
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
-  }
-
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
+    &.pagination-small {
+      button.next,
+      button.previous {
+        padding: 0 $pagination-padding-y;
+        height: $pagination-secondary-height-sm;
+      }
+    }
   }
 }
 
-.pagination-minimal {
-  .page-item:first-child {
-    margin-inline-end: .3rem;
-  }
-
-  button.next,
-  button.previous {
-    padding: var(--pgn-spacing-pagination-padding-y-base);
-    height: var(--pgn-size-pagination-secondary-height-base);
-  }
+.page-link {
+  border: none;
+  margin-left: -$pagination-border-width;
 
-  &.pagination-small {
-    button.next,
-    button.previous {
-      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-      height: var(--pgn-size-pagination-secondary-height-sm);
-    }
+  &:focus {
+    z-index: 3;
   }
 
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
+  div {
+    display: flex;
   }
 
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
+  [dir="rtl"] & {
+    svg {
+      transform: scale(-1);
+    }
   }
 }

package/dist/Pagination/subcomponents/Ellipsis.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ELLIPSIS } from '../constants';
+export default function Ellipsis() {
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames('page-item', 'disabled')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('btn', 'page-link', 'ellipsis')
+  }, ELLIPSIS));
+}
+//# sourceMappingURL=Ellipsis.js.map

package/dist/Pagination/subcomponents/Ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsis.js","names":["React","classNames","ELLIPSIS","Ellipsis","createElement","className"],"sources":["../../../src/Pagination/subcomponents/Ellipsis.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { ELLIPSIS } from '../constants';\n\nexport default function Ellipsis() {\n  return (\n    <li className={classNames('page-item', 'disabled')}>\n      <span className={classNames('btn', 'page-link', 'ellipsis')}>\n        {ELLIPSIS}\n      </span>\n    </li>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,QAAQ,cAAc;AAEvC,eAAe,SAASC,QAAQA,CAAA,EAAG;EACjC,oBACEH,KAAA,CAAAI,aAAA;IAAIC,SAAS,EAAEJ,UAAU,CAAC,WAAW,EAAE,UAAU;EAAE,gBACjDD,KAAA,CAAAI,aAAA;IAAMC,SAAS,EAAEJ,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU;EAAE,GACzDC,QACG,CACJ,CAAC;AAET"}

package/dist/Pagination/subcomponents/NextPageButton.js

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT } from '../constants';
+import PaginationContext from '../PaginationContext';
+import Button from '../../Button';
+import IconButton from '../../IconButton';
+import Icon from '../../Icon';
+export default function NextPageButton() {
+  var _useContext = useContext(PaginationContext),
+    invertColors = _useContext.invertColors,
+    getPageButtonVariant = _useContext.getPageButtonVariant,
+    isDefaultVariant = _useContext.isDefaultVariant,
+    isOnLastPage = _useContext.isOnLastPage,
+    getAriaLabelForNextButton = _useContext.getAriaLabelForNextButton,
+    handleNextButtonClick = _useContext.handleNextButtonClick,
+    getNextButtonIcon = _useContext.getNextButtonIcon,
+    buttonLabels = _useContext.buttonLabels,
+    nextButtonRef = _useContext.nextButtonRef;
+  var isDisabled = isOnLastPage();
+  var icon = getNextButtonIcon();
+  if (isDefaultVariant()) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames('page-item', {
+        disabled: isDisabled
+      })
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "previous page-link",
+      variant: getPageButtonVariant(),
+      "aria-label": getAriaLabelForNextButton(),
+      tabIndex: isDisabled ? '-1' : undefined,
+      onClick: handleNextButtonClick,
+      ref: nextButtonRef,
+      disabled: isDisabled,
+      iconAfter: icon
+    }, buttonLabels.next));
+  }
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames('page-item', {
+      disabled: isDisabled
+    })
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    invertColors: invertColors,
+    src: getNextButtonIcon(),
+    iconAs: Icon,
+    className: "previous page-link",
+    "aria-label": getAriaLabelForNextButton(),
+    tabIndex: isDisabled ? '-1' : undefined,
+    onClick: handleNextButtonClick,
+    ref: nextButtonRef,
+    disabled: isDisabled,
+    alt: PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT
+  }));
+}
+//# sourceMappingURL=NextPageButton.js.map

package/dist/Pagination/subcomponents/NextPageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextPageButton.js","names":["React","useContext","classNames","PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT","PaginationContext","Button","IconButton","Icon","NextPageButton","_useContext","invertColors","getPageButtonVariant","isDefaultVariant","isOnLastPage","getAriaLabelForNextButton","handleNextButtonClick","getNextButtonIcon","buttonLabels","nextButtonRef","isDisabled","icon","createElement","className","disabled","variant","tabIndex","undefined","onClick","ref","iconAfter","next","src","iconAs","alt"],"sources":["../../../src/Pagination/subcomponents/NextPageButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT } from '../constants';\nimport PaginationContext from '../PaginationContext';\nimport Button from '../../Button';\nimport IconButton from '../../IconButton';\nimport Icon from '../../Icon';\n\nexport default function NextPageButton() {\n  const {\n    invertColors,\n    getPageButtonVariant,\n    isDefaultVariant,\n    isOnLastPage,\n    getAriaLabelForNextButton,\n    handleNextButtonClick,\n    getNextButtonIcon,\n    buttonLabels,\n    nextButtonRef,\n  } = useContext(PaginationContext);\n\n  const isDisabled = isOnLastPage();\n  const icon = getNextButtonIcon();\n\n  if (isDefaultVariant()) {\n    return (\n      <li className={classNames('page-item', { disabled: isDisabled })}>\n        <Button\n          className=\"previous page-link\"\n          variant={getPageButtonVariant()}\n          aria-label={getAriaLabelForNextButton()}\n          tabIndex={isDisabled ? '-1' : undefined}\n          onClick={handleNextButtonClick}\n          ref={nextButtonRef}\n          disabled={isDisabled}\n          iconAfter={icon}\n        >\n          {buttonLabels.next}\n        </Button>\n      </li>\n    );\n  }\n\n  if (!icon) {\n    return null;\n  }\n\n  return (\n    <li className={classNames('page-item', { disabled: isDisabled })}>\n      <IconButton\n        invertColors={invertColors}\n        src={getNextButtonIcon()}\n        iconAs={Icon}\n        className=\"previous page-link\"\n        aria-label={getAriaLabelForNextButton()}\n        tabIndex={isDisabled ? '-1' : undefined}\n        onClick={handleNextButtonClick}\n        ref={nextButtonRef}\n        disabled={isDisabled}\n        alt={PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT}\n      />\n    </li>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,sCAAsC,QAAQ,cAAc;AACrE,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,IAAI,MAAM,YAAY;AAE7B,eAAe,SAASC,cAAcA,CAAA,EAAG;EACvC,IAAAC,WAAA,GAUIR,UAAU,CAACG,iBAAiB,CAAC;IAT/BM,YAAY,GAAAD,WAAA,CAAZC,YAAY;IACZC,oBAAoB,GAAAF,WAAA,CAApBE,oBAAoB;IACpBC,gBAAgB,GAAAH,WAAA,CAAhBG,gBAAgB;IAChBC,YAAY,GAAAJ,WAAA,CAAZI,YAAY;IACZC,yBAAyB,GAAAL,WAAA,CAAzBK,yBAAyB;IACzBC,qBAAqB,GAAAN,WAAA,CAArBM,qBAAqB;IACrBC,iBAAiB,GAAAP,WAAA,CAAjBO,iBAAiB;IACjBC,YAAY,GAAAR,WAAA,CAAZQ,YAAY;IACZC,aAAa,GAAAT,WAAA,CAAbS,aAAa;EAGf,IAAMC,UAAU,GAAGN,YAAY,CAAC,CAAC;EACjC,IAAMO,IAAI,GAAGJ,iBAAiB,CAAC,CAAC;EAEhC,IAAIJ,gBAAgB,CAAC,CAAC,EAAE;IACtB,oBACEZ,KAAA,CAAAqB,aAAA;MAAIC,SAAS,EAAEpB,UAAU,CAAC,WAAW,EAAE;QAAEqB,QAAQ,EAAEJ;MAAW,CAAC;IAAE,gBAC/DnB,KAAA,CAAAqB,aAAA,CAAChB,MAAM;MACLiB,SAAS,EAAC,oBAAoB;MAC9BE,OAAO,EAAEb,oBAAoB,CAAC,CAAE;MAChC,cAAYG,yBAAyB,CAAC,CAAE;MACxCW,QAAQ,EAAEN,UAAU,GAAG,IAAI,GAAGO,SAAU;MACxCC,OAAO,EAAEZ,qBAAsB;MAC/Ba,GAAG,EAAEV,aAAc;MACnBK,QAAQ,EAAEJ,UAAW;MACrBU,SAAS,EAAET;IAAK,GAEfH,YAAY,CAACa,IACR,CACN,CAAC;EAET;EAEA,IAAI,CAACV,IAAI,EAAE;IACT,OAAO,IAAI;EACb;EAEA,oBACEpB,KAAA,CAAAqB,aAAA;IAAIC,SAAS,EAAEpB,UAAU,CAAC,WAAW,EAAE;MAAEqB,QAAQ,EAAEJ;IAAW,CAAC;EAAE,gBAC/DnB,KAAA,CAAAqB,aAAA,CAACf,UAAU;IACTI,YAAY,EAAEA,YAAa;IAC3BqB,GAAG,EAAEf,iBAAiB,CAAC,CAAE;IACzBgB,MAAM,EAAEzB,IAAK;IACbe,SAAS,EAAC,oBAAoB;IAC9B,cAAYR,yBAAyB,CAAC,CAAE;IACxCW,QAAQ,EAAEN,UAAU,GAAG,IAAI,GAAGO,SAAU;IACxCC,OAAO,EAAEZ,qBAAsB;IAC/Ba,GAAG,EAAEV,aAAc;IACnBK,QAAQ,EAAEJ,UAAW;IACrBc,GAAG,EAAE9B;EAAuC,CAC7C,CACC,CAAC;AAET"}

package/dist/Pagination/subcomponents/PageButton.js

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from '../../Button';
+import PaginationContext from '../PaginationContext';
+export default function PageButton(_ref) {
+  var pageNum = _ref.pageNum;
+  var _useContext = useContext(PaginationContext),
+    isPageButtonActive = _useContext.isPageButtonActive,
+    getAriaLabelForPageButton = _useContext.getAriaLabelForPageButton,
+    getPageButtonVariant = _useContext.getPageButtonVariant,
+    handlePageSelect = _useContext.handlePageSelect,
+    getPageButtonRefHandler = _useContext.getPageButtonRefHandler;
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames('page-item', {
+      active: isPageButtonActive(pageNum)
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "page-link",
+    "aria-label": getAriaLabelForPageButton(pageNum),
+    variant: getPageButtonVariant(pageNum),
+    ref: getPageButtonRefHandler(pageNum),
+    onClick: function onClick() {
+      return handlePageSelect(pageNum);
+    }
+  }, pageNum));
+}
+PageButton.propTypes = {
+  pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+//# sourceMappingURL=PageButton.js.map

package/dist/Pagination/subcomponents/PageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageButton.js","names":["React","useContext","PropTypes","classNames","Button","PaginationContext","PageButton","_ref","pageNum","_useContext","isPageButtonActive","getAriaLabelForPageButton","getPageButtonVariant","handlePageSelect","getPageButtonRefHandler","createElement","className","active","variant","ref","onClick","propTypes","oneOfType","string","number","isRequired"],"sources":["../../../src/Pagination/subcomponents/PageButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Button from '../../Button';\nimport PaginationContext from '../PaginationContext';\n\nexport default function PageButton({ pageNum }) {\n  const {\n    isPageButtonActive,\n    getAriaLabelForPageButton,\n    getPageButtonVariant,\n    handlePageSelect,\n    getPageButtonRefHandler,\n  } = useContext(PaginationContext);\n\n  return (\n    <li className={classNames('page-item', { active: isPageButtonActive(pageNum) })}>\n      <Button\n        className=\"page-link\"\n        aria-label={getAriaLabelForPageButton(pageNum)}\n        variant={getPageButtonVariant(pageNum)}\n        ref={getPageButtonRefHandler(pageNum)}\n        onClick={() => handlePageSelect(pageNum)}\n      >\n        {pageNum}\n      </Button>\n    </li>\n  );\n}\n\nPageButton.propTypes = {\n  pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,iBAAiB,MAAM,sBAAsB;AAEpD,eAAe,SAASC,UAAUA,CAAAC,IAAA,EAAc;EAAA,IAAXC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAC1C,IAAAC,WAAA,GAMIR,UAAU,CAACI,iBAAiB,CAAC;IAL/BK,kBAAkB,GAAAD,WAAA,CAAlBC,kBAAkB;IAClBC,yBAAyB,GAAAF,WAAA,CAAzBE,yBAAyB;IACzBC,oBAAoB,GAAAH,WAAA,CAApBG,oBAAoB;IACpBC,gBAAgB,GAAAJ,WAAA,CAAhBI,gBAAgB;IAChBC,uBAAuB,GAAAL,WAAA,CAAvBK,uBAAuB;EAGzB,oBACEd,KAAA,CAAAe,aAAA;IAAIC,SAAS,EAAEb,UAAU,CAAC,WAAW,EAAE;MAAEc,MAAM,EAAEP,kBAAkB,CAACF,OAAO;IAAE,CAAC;EAAE,gBAC9ER,KAAA,CAAAe,aAAA,CAACX,MAAM;IACLY,SAAS,EAAC,WAAW;IACrB,cAAYL,yBAAyB,CAACH,OAAO,CAAE;IAC/CU,OAAO,EAAEN,oBAAoB,CAACJ,OAAO,CAAE;IACvCW,GAAG,EAAEL,uBAAuB,CAACN,OAAO,CAAE;IACtCY,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMP,gBAAgB,CAACL,OAAO,CAAC;IAAA;EAAC,GAExCA,OACK,CACN,CAAC;AAET;AAEAF,UAAU,CAACe,SAAS,GAAG;EACrBb,OAAO,EAAEN,SAAS,CAACoB,SAAS,CAAC,CAACpB,SAAS,CAACqB,MAAM,EAAErB,SAAS,CAACsB,MAAM,CAAC,CAAC,CAACC;AACrE,CAAC"}

package/dist/Pagination/subcomponents/PageOfCountButton.js

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import PaginationContext from '../PaginationContext';
+export default function PageOfCountButton() {
+  var _useContext = useContext(PaginationContext),
+    getAriaLabelForPageOfCountButton = _useContext.getAriaLabelForPageOfCountButton,
+    getPageOfText = _useContext.getPageOfText;
+  var ariaLabel = getAriaLabelForPageOfCountButton();
+  var label = getPageOfText();
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames('page-item', 'disabled')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('btn', 'page-link', 'page-of-count'),
+    "aria-label": ariaLabel
+  }, label));
+}
+//# sourceMappingURL=PageOfCountButton.js.map

package/dist/Pagination/subcomponents/PageOfCountButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageOfCountButton.js","names":["React","useContext","classNames","PaginationContext","PageOfCountButton","_useContext","getAriaLabelForPageOfCountButton","getPageOfText","ariaLabel","label","createElement","className"],"sources":["../../../src/Pagination/subcomponents/PageOfCountButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport PaginationContext from '../PaginationContext';\n\nexport default function PageOfCountButton() {\n  const { getAriaLabelForPageOfCountButton, getPageOfText } = useContext(PaginationContext);\n\n  const ariaLabel = getAriaLabelForPageOfCountButton();\n  const label = getPageOfText();\n\n  return (\n    <li className={classNames('page-item', 'disabled')}>\n      <span\n        className={classNames(\n          'btn',\n          'page-link',\n          'page-of-count',\n        )}\n        aria-label={ariaLabel}\n      >\n        {label}\n      </span>\n    </li>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,iBAAiB,MAAM,sBAAsB;AAEpD,eAAe,SAASC,iBAAiBA,CAAA,EAAG;EAC1C,IAAAC,WAAA,GAA4DJ,UAAU,CAACE,iBAAiB,CAAC;IAAjFG,gCAAgC,GAAAD,WAAA,CAAhCC,gCAAgC;IAAEC,aAAa,GAAAF,WAAA,CAAbE,aAAa;EAEvD,IAAMC,SAAS,GAAGF,gCAAgC,CAAC,CAAC;EACpD,IAAMG,KAAK,GAAGF,aAAa,CAAC,CAAC;EAE7B,oBACEP,KAAA,CAAAU,aAAA;IAAIC,SAAS,EAAET,UAAU,CAAC,WAAW,EAAE,UAAU;EAAE,gBACjDF,KAAA,CAAAU,aAAA;IACEC,SAAS,EAAET,UAAU,CACnB,KAAK,EACL,WAAW,EACX,eACF,CAAE;IACF,cAAYM;EAAU,GAErBC,KACG,CACJ,CAAC;AAET"}

package/dist/Pagination/subcomponents/PaginationDropdown.js

@@ -0,0 +1,34 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useContext } from 'react';
+import PaginationContext from '../PaginationContext';
+import Dropdown from '../../Dropdown';
+export default function PaginationDropdown() {
+  var _useContext = useContext(PaginationContext),
+    getPageOfText = _useContext.getPageOfText,
+    pageCount = _useContext.pageCount,
+    handlePageSelect = _useContext.handlePageSelect,
+    getPageButtonVariant = _useContext.getPageButtonVariant;
+  if (pageCount <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: getPageButtonVariant(),
+    id: "Pagination dropdown"
+  }, getPageOfText()), /*#__PURE__*/React.createElement(Dropdown.Menu, {
+    className: "pagination-reduced-dropdown-menu"
+  }, _toConsumableArray(Array(pageCount).keys()).map(function (pageNum) {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      onClick: function onClick() {
+        return handlePageSelect(pageNum + 1);
+      },
+      key: pageNum,
+      "data-testid": "pagination-dropdown-item"
+    }, pageNum + 1);
+  }))));
+}
+//# sourceMappingURL=PaginationDropdown.js.map

package/dist/Pagination/subcomponents/PaginationDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDropdown.js","names":["React","useContext","PaginationContext","Dropdown","PaginationDropdown","_useContext","getPageOfText","pageCount","handlePageSelect","getPageButtonVariant","createElement","Toggle","variant","id","Menu","className","_toConsumableArray","Array","keys","map","pageNum","Item","onClick","key"],"sources":["../../../src/Pagination/subcomponents/PaginationDropdown.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PaginationContext from '../PaginationContext';\nimport Dropdown from '../../Dropdown';\n\nexport default function PaginationDropdown() {\n  const {\n    getPageOfText,\n    pageCount,\n    handlePageSelect,\n    getPageButtonVariant,\n  } = useContext(PaginationContext);\n\n  if (pageCount <= 1) {\n    return null;\n  }\n\n  return (\n    <li>\n      <Dropdown>\n        <Dropdown.Toggle variant={getPageButtonVariant()} id=\"Pagination dropdown\">\n          {getPageOfText()}\n        </Dropdown.Toggle>\n        <Dropdown.Menu className=\"pagination-reduced-dropdown-menu\">\n          {[...Array(pageCount).keys()].map(pageNum => (\n            <Dropdown.Item\n              onClick={() => handlePageSelect(pageNum + 1)}\n              key={pageNum}\n              data-testid=\"pagination-dropdown-item\"\n            >\n              {pageNum + 1}\n            </Dropdown.Item>\n          ))}\n        </Dropdown.Menu>\n      </Dropdown>\n    </li>\n  );\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,QAAQ,MAAM,gBAAgB;AAErC,eAAe,SAASC,kBAAkBA,CAAA,EAAG;EAC3C,IAAAC,WAAA,GAKIJ,UAAU,CAACC,iBAAiB,CAAC;IAJ/BI,aAAa,GAAAD,WAAA,CAAbC,aAAa;IACbC,SAAS,GAAAF,WAAA,CAATE,SAAS;IACTC,gBAAgB,GAAAH,WAAA,CAAhBG,gBAAgB;IAChBC,oBAAoB,GAAAJ,WAAA,CAApBI,oBAAoB;EAGtB,IAAIF,SAAS,IAAI,CAAC,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,oBACEP,KAAA,CAAAU,aAAA,0BACEV,KAAA,CAAAU,aAAA,CAACP,QAAQ,qBACPH,KAAA,CAAAU,aAAA,CAACP,QAAQ,CAACQ,MAAM;IAACC,OAAO,EAAEH,oBAAoB,CAAC,CAAE;IAACI,EAAE,EAAC;EAAqB,GACvEP,aAAa,CAAC,CACA,CAAC,eAClBN,KAAA,CAAAU,aAAA,CAACP,QAAQ,CAACW,IAAI;IAACC,SAAS,EAAC;EAAkC,GACxDC,kBAAA,CAAIC,KAAK,CAACV,SAAS,CAAC,CAACW,IAAI,CAAC,CAAC,EAAEC,GAAG,CAAC,UAAAC,OAAO;IAAA,oBACvCpB,KAAA,CAAAU,aAAA,CAACP,QAAQ,CAACkB,IAAI;MACZC,OAAO,EAAE,SAAAA,QAAA;QAAA,OAAMd,gBAAgB,CAACY,OAAO,GAAG,CAAC,CAAC;MAAA,CAAC;MAC7CG,GAAG,EAAEH,OAAQ;MACb,eAAY;IAA0B,GAErCA,OAAO,GAAG,CACE,CAAC;EAAA,CACjB,CACY,CACP,CACR,CAAC;AAET"}