@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

package/lib/components/Modal/index.test.js

@@ -4,14 +4,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _designTokens = require("@decisiv/design-tokens");
+
+var _polished = require("polished");
+
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
 var _constants = require("./constants");
 
 var _ = _interopRequireDefault(require("."));
 
+var _Combobox = _interopRequireDefault(require("../Combobox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -22,8 +32,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
 beforeAll(function () {
   var root = document.createElement('div');
   root.setAttribute('id', 'modal-root');
@@ -66,6 +92,16 @@ describe('Modal', function () {
       });
     });
   });
+  it('renders aria labelledby and its target correctly', function () {
+    render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      id: undefined
+    })));
+    var ariaLabelledByElement = document.querySelector("[aria-labelledby^=\"modal-header-modal-\"]");
+    expect(ariaLabelledByElement).toBeTruthy();
+    var ariaLabelledByAttribute = ariaLabelledByElement.getAttribute('aria-labelledby');
+    var modalHeader = document.getElementById(ariaLabelledByAttribute);
+    expect(modalHeader).toBeTruthy();
+  });
   it('renders the title in the header of the modal', function () {
     render(_react.default.createElement(_.default, defaultProps));
     var modalHeader = document.getElementById("modal-header-".concat(defaultProps.id));
@@ -180,6 +216,28 @@ describe('Modal', function () {
       expect(onClose).not.toHaveBeenCalled();
     });
   });
+  describe('size', function () {
+    describe('medium / default', function () {
+      it('renders the modal with a max-width of 650px', function () {
+        var _render3 = render(_react.default.createElement(_.default, defaultProps)),
+            getByRole = _render3.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle('max-width: 650px');
+      });
+    });
+    describe('large', function () {
+      it("renders the modal with a max-width of ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)), function () {
+        var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: "large"
+        }))),
+            getByRole = _render4.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
+      });
+    });
+  });
   describe('with invalid props', function () {
     beforeEach(function () {
       jest.spyOn(console, 'error').mockImplementation(function () {});
@@ -212,4 +270,45 @@ describe('Modal', function () {
       });
     });
   });
+  describe('with a Popover as its children', function () {
+    it('renders the Popover with the same zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render5, getByRole, getByLabelText, modal, combobox, modalZIndex, comboboxOptionsZIndex;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+                zIndex: 1234
+              }), _react.default.createElement(_Combobox.default, {
+                label: "Nested Combobox",
+                options: [{
+                  id: '1',
+                  value: '1',
+                  label: 'Combobox Opt 1'
+                }]
+              }))), getByRole = _render5.getByRole, getByLabelText = _render5.getByLabelText;
+              modal = getByRole('dialog');
+              combobox = getByLabelText('Nested Combobox');
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click(combobox);
+              });
+              _context.next = 6;
+              return (0, _react2.wait)(function () {
+                expect(getByRole('listbox')).toBeInTheDocument();
+              });
+
+            case 6:
+              modalZIndex = window.getComputedStyle(modal).zIndex;
+              comboboxOptionsZIndex = window.getComputedStyle(getByRole('listbox')).zIndex;
+              expect(modalZIndex).toEqual(comboboxOptionsZIndex);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  });
 });

package/lib/components/Modal/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAuDlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA0DlD,eAAe,MAAM,CAAC"}

package/lib/components/Modal/schema.js

@@ -17,13 +17,14 @@ schema.propTypes = {
   actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     onClick: _reactDesc.PropTypes.func.isRequired,
     text: _reactDesc.PropTypes.string.isRequired
-  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.'),
+  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `size` and `variant`.'),
   closeHint: _reactDesc.PropTypes.string.description('The text to present in the tooltip when hovering over the close button.'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The icon color; Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to display; Will override the default icon associated with any specified `intent`.'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger', 'help']).description('Shortcuts to the most common combinations of icon and color.'),
   onClose: _reactDesc.PropTypes.func.description('The event handler called to close the modal. If not provided, the modal will not include a close button and closing by clicking outside or pressing the "Esc" key will be disabled.'),
+  size: _reactDesc.PropTypes.oneOf(['medium', 'large']).description('Define the max width size of the modal').defaultValue('medium'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
   visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index value for the modal & overlay.')

package/lib/components/Modal/types.d.ts

@@ -3,7 +3,7 @@ import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { ButtonProps } from '../Button/types';
 import { intents } from './constants';
-declare type ActionProps = Exclude<ButtonProps, 'kind' | 'size' | 'variant'>;
+declare type ActionProps = Exclude<ButtonProps, 'size' | 'variant'>;
 export interface ModalProps {
     actions?: [ActionProps] | [ActionProps, ActionProps];
     children: React.ReactNode;
@@ -13,6 +13,7 @@ export interface ModalProps {
     id?: string;
     intent?: keyof typeof intents;
     onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
+    size?: 'medium' | 'large';
     title: string;
     visible?: boolean;
     zIndex?: number;

package/lib/components/Modal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAGrE,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAG5D,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}

package/lib/components/Modal/utils.d.ts

@@ -1,4 +1,4 @@
 export declare function useReturnFocus(returnFocus: boolean): void;
 export declare function useElement(): [HTMLElement | null, (node: HTMLElement | null) => void];
-export declare function useKeepFocusWithin(container: HTMLElement | null): void;
+export declare function useKeepFocusWithin(container: HTMLElement | null, hasCloseButton: boolean): void;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/Modal/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAyDtE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,cAAc,EAAE,OAAO,GACtB,IAAI,CA2DN"}

package/lib/components/Modal/utils.js

@@ -95,19 +95,21 @@ function useTabbableElements(container) {
  */
 
 
-function useKeepFocusWithin(container) {
+function useKeepFocusWithin(container, hasCloseButton) {
   var tabbableElements = useTabbableElements(container); // This effect should run only when the container changes from null to an element. Since
   // the component does not control the tabbable elements and they may be updated, we
   // don't want to automatically change the focus at any other time.
 
   (0, _react.useEffect)(function () {
     if (container && !(0, _isEmpty.default)(tabbableElements)) {
-      // The first tabbable element will be the close button, but that isn't where
-      // the user's focus should start. Instead, get the second tabbable element.
-      var secondTabbable = (0, _get.default)(tabbableElements, 1, {
+      // Determine where to set the initial focus within the modal:
+      // - If the modal includes a close button, it will be the first tabbable element. However, user focus should not start there. Instead, move the focus to the second tabbable element.
+      // - If there is no close button, set the focus to the first tabbable element.
+      var focusElementIndex = hasCloseButton ? 1 : 0;
+      var focusElement = (0, _get.default)(tabbableElements, focusElementIndex, {
         focus: function focus() {}
       });
-      secondTabbable.focus();
+      focusElement.focus();
     }
   }, [container]); // eslint-disable-line react-hooks/exhaustive-deps
 

package/lib/components/Pagination/Pages.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import { Page, PaginationVariant } from './types';
-export interface PagesProps {
-    variant?: PaginationVariant;
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: Page) => void;
-}
+import { PagesProps } from './types';
 export default function Pages({ variant, currentPage, totalPages, onPageChange, }: PagesProps): JSX.Element;
 //# sourceMappingURL=Pages.d.ts.map

package/lib/components/Pagination/Pages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pages.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pages.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkBlD,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,EACP,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAuB1B"}
+{"version":3,"file":"Pages.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pages.tsx"],"names":[],"mappings":";AAQA,OAAO,EAA2B,UAAU,EAAE,MAAM,SAAS,CAAC;AAoB9D,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,EACP,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAuC1B"}

package/lib/components/Pagination/Pages.js

@@ -17,6 +17,10 @@ var _PaginationItem = _interopRequireDefault(require("./PaginationItem"));
 
 var _paginate = _interopRequireDefault(require("./paginate"));
 
+var _Typography = require("../Typography");
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -37,6 +41,7 @@ function Pages(_ref2) {
       currentPage = _ref2.currentPage,
       totalPages = _ref2.totalPages,
       onPageChange = _ref2.onPageChange;
+  var translate = (0, _useTranslations.default)();
   var pages = (0, _react.useMemo)(function () {
     return (0, _paginate.default)(currentPage, totalPages);
   }, [currentPage, totalPages]); // for creating unique keys for the ellipses:
@@ -46,6 +51,18 @@ function Pages(_ref2) {
     variant: variant
   }, pages.map(function (page) {
     var key = page.ellipsis ? "ellipsis-".concat(ellipsisCount += 1) : "page-".concat(page.page);
+    var pageText = translate(undefined, 'pagination.page', {
+      page: "".concat(page.page)
+    }); // if its openEnded
+
+    if (!totalPages) {
+      return _react.default.createElement(_Typography.P, {
+        key: key,
+        shade: 1,
+        size: "small"
+      }, pageText);
+    }
+
     return _react.default.createElement(_PaginationItem.default, {
       page: page,
       key: key,

package/lib/components/Pagination/Pagination.d.ts

@@ -1,29 +1,28 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { PaginationVariant } from './types';
-interface DefaultPaginationProps {
-    variant: PaginationVariant;
-    defaultActivePage?: number;
-    activePage?: number;
-    onPageChange?: (newPage: number, oldPage: number) => void;
-    labelPrevious?: string;
-    labelNext?: string;
-}
-export interface PaginationProps extends DefaultPaginationProps {
-    totalPages: number;
-}
+import { PaginationProps } from './types';
 declare function Pagination(props: PaginationProps): JSX.Element | null;
 declare namespace Pagination {
     var propTypes: {
         variant: PropTypes.Requireable<string>;
+        openEnded: PropTypes.Requireable<boolean>;
         defaultActivePage: PropTypes.Requireable<number>;
         activePage: PropTypes.Requireable<number>;
-        totalPages: PropTypes.Validator<number>;
+        totalPages: PropTypes.Requireable<number>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         labelPrevious: PropTypes.Requireable<string>;
         labelNext: PropTypes.Requireable<string>;
     };
-    var defaultProps: DefaultPaginationProps;
+    var defaultProps: {
+        readonly variant: "comfortable";
+        readonly openEnded: false;
+        readonly hasNext: false;
+        readonly defaultActivePage: 1;
+        readonly activePage: undefined;
+        readonly onPageChange: undefined;
+        readonly labelPrevious: undefined;
+        readonly labelNext: undefined;
+    };
 }
 export default Pagination;
 //# sourceMappingURL=Pagination.d.ts.map

package/lib/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+E7E;kBA/EuB,UAAU;;;;;;;;;;;;eAAV,UAAU"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAA6B,eAAe,EAAE,MAAM,SAAS,CAAC;AAGrE,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAmG7E;kBAnGuB,UAAU;;;;;;;;;;;;;;;;;;;;;;eAAV,UAAU"}

package/lib/components/Pagination/Pagination.js

@@ -37,7 +37,6 @@ function Pagination(props) {
   var variant = props.variant,
       defaultActivePage = props.defaultActivePage,
       activePage = props.activePage,
-      totalPages = props.totalPages,
       onPageChange = props.onPageChange,
       labelPrevious = props.labelPrevious,
       labelNext = props.labelNext;
@@ -49,7 +48,16 @@ function Pagination(props) {
       currentPage = _useState2[0],
       setCurrentPage = _useState2[1];
 
-  if (totalPages <= 1) return null;
+  if (props.openEnded === false && !props.totalPages) {
+    // eslint-disable-next-line no-console
+    console.warn('totalPages prop must be defined when using a close-ended pagination');
+    return null;
+  }
+
+  if (props.openEnded === false && props.totalPages <= 1) {
+    return null;
+  }
+
   var activePageIsControlled = typeof activePage !== 'undefined';
 
   if (activePageIsControlled && activePage !== currentPage) {
@@ -59,9 +67,13 @@ function Pagination(props) {
   var prevPage = currentPage > 1 ? {
     page: currentPage - 1
   } : undefined;
-  var nextPage = currentPage < totalPages ? {
+  var openEndedNextPage = props.openEnded && props.hasNext ? {
+    page: currentPage + 1
+  } : undefined;
+  var fixedpaginationNextPage = props.openEnded === false && currentPage < props.totalPages ? {
     page: currentPage + 1
   } : undefined;
+  var nextPage = props.openEnded ? openEndedNextPage : fixedpaginationNextPage;
   var prevButtonAriaLabel = prevPage ? translate(labelPrevious, 'pagination.aria.previous', {
     page: "".concat(prevPage.page)
   }) : undefined;
@@ -94,7 +106,7 @@ function Pagination(props) {
   }), _react.default.createElement(_Pages.default, {
     variant: variant,
     currentPage: currentPage,
-    totalPages: totalPages,
+    totalPages: props.openEnded ? undefined : props.totalPages,
     onPageChange: pageChangeHandler
   }), _react.default.createElement(_NextPrevButton.default, {
     variant: variant,
@@ -109,15 +121,18 @@ function Pagination(props) {
 
 Pagination.propTypes = {
   variant: _propTypes.default.oneOf(['comfortable', 'compact']),
+  openEnded: _propTypes.default.bool,
   defaultActivePage: _propTypes.default.number,
   activePage: _propTypes.default.number,
-  totalPages: _propTypes.default.number.isRequired,
+  totalPages: _propTypes.default.number,
   onPageChange: _propTypes.default.func,
   labelPrevious: _propTypes.default.string,
   labelNext: _propTypes.default.string
 };
 var defaultProps = {
   variant: 'comfortable',
+  openEnded: false,
+  hasNext: false,
   defaultActivePage: 1,
   activePage: undefined,
   onPageChange: undefined,

package/lib/components/Pagination/Pagination.test.js

@@ -254,4 +254,18 @@ describe('Pagination', function () {
 
     expect(container).toBeEmpty();
   });
+  it('shows warning when totalPages is not defined and its not openEnded', function () {
+    jest.spyOn(console, 'warn').mockImplementation(function () {});
+
+    var _renderPagination18 = renderPagination(_objectSpread({}, defaultProps, {
+      openEnded: false,
+      totalPages: undefined
+    })),
+        container = _renderPagination18.container;
+
+    expect(container).toBeEmpty();
+    expect(console.warn).toHaveBeenCalled(); // @ts-ignore
+
+    console.warn.mockRestore();
+  });
 });

package/lib/components/Pagination/paginate.d.ts

@@ -1,3 +1,3 @@
 import { Page } from './types';
-export default function paginate(currentPage: number, totalPages: number): Page[];
+export default function paginate(currentPage: number, totalPages?: number): Page[];
 //# sourceMappingURL=paginate.d.ts.map

package/lib/components/Pagination/paginate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginate.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/paginate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AA4C/B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,GACjB,IAAI,EAAE,CA4CR"}
+{"version":3,"file":"paginate.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/paginate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AA4C/B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,WAAW,EAAE,MAAM,EACnB,UAAU,CAAC,EAAE,MAAM,GAClB,IAAI,EAAE,CAgDR"}

package/lib/components/Pagination/paginate.js

@@ -74,6 +74,10 @@ function paginate(currentPage, totalPages) {
     };
   };
 
+  if (!totalPages) {
+    return [currentPage].map(pageMaker);
+  }
+
   if (totalPages <= PAGE_SLOTS) {
     // no ellipses needed
     return (0, _range.default)(1, totalPages + 1).map(pageMaker);

package/lib/components/Pagination/paginate.test.js

@@ -42,10 +42,11 @@ var countEllipses = function countEllipses(pages) {
 };
 
 describe('paginate', function () {
-  describe('with 7 or less pages', function () {
+  // open ended pagination case
+  describe('with no total pages', function () {
     it('does not include any ellipses', function () {
       testAllPages({
-        maxTotal: 7
+        maxTotal: 1
       }, function (_ref2) {
         var pages = _ref2.pages;
         pages.forEach(function (page) {
@@ -53,20 +54,40 @@ describe('paginate', function () {
         });
       });
     });
-    it('renders only as many items as there are pages', function () {
+    it('only renders the current page', function () {
+      var result = (0, _paginate.default)(1, undefined);
+      expect(result).toEqual([{
+        active: true,
+        page: 1,
+        ellipsis: false
+      }]);
+    });
+  });
+  describe('with 7 or less pages', function () {
+    it('does not include any ellipses', function () {
       testAllPages({
         maxTotal: 7
       }, function (_ref3) {
-        var totalPages = _ref3.totalPages,
-            pages = _ref3.pages;
+        var pages = _ref3.pages;
+        pages.forEach(function (page) {
+          expect(page.ellipsis).toEqual(false);
+        });
+      });
+    });
+    it('renders only as many items as there are pages', function () {
+      testAllPages({
+        maxTotal: 7
+      }, function (_ref4) {
+        var totalPages = _ref4.totalPages,
+            pages = _ref4.pages;
         expect(pages.length).toEqual(totalPages);
       });
     });
   });
   describe('with 8 or more pages', function () {
-    function sharedTests(_ref4) {
-      var pages = _ref4.pages,
-          currentPage = _ref4.currentPage;
+    function sharedTests(_ref5) {
+      var pages = _ref5.pages,
+          currentPage = _ref5.currentPage;
       it('renders 7 items', function () {
         expect(pages).toHaveLength(7);
       });
@@ -88,9 +109,9 @@ describe('paginate', function () {
             lastCurrent: 4,
             minTotal: totalPages,
             maxTotal: totalPages
-          }, function (_ref5) {
-            var currentPage = _ref5.currentPage,
-                pages = _ref5.pages;
+          }, function (_ref6) {
+            var currentPage = _ref6.currentPage,
+                pages = _ref6.pages;
             describe("when on page ".concat(currentPage), function () {
               it("has one ellipsis at the end", function () {
                 expect(countEllipses(pages)).toEqual(1);
@@ -112,9 +133,9 @@ describe('paginate', function () {
               lastCurrent: rightBound - 1,
               minTotal: totalPages,
               maxTotal: totalPages
-            }, function (_ref6) {
-              var currentPage = _ref6.currentPage,
-                  pages = _ref6.pages;
+            }, function (_ref7) {
+              var currentPage = _ref7.currentPage,
+                  pages = _ref7.pages;
               describe("when on page ".concat(currentPage), function () {
                 it("has two ellipses", function () {
                   expect(countEllipses(pages)).toEqual(2);
@@ -136,9 +157,9 @@ describe('paginate', function () {
             firstCurrent: rightBound,
             minTotal: totalPages,
             maxTotal: totalPages
-          }, function (_ref7) {
-            var currentPage = _ref7.currentPage,
-                pages = _ref7.pages;
+          }, function (_ref8) {
+            var currentPage = _ref8.currentPage,
+                pages = _ref8.pages;
             describe("when on page ".concat(currentPage), function () {
               it("has one ellipsis at the start", function () {
                 expect(countEllipses(pages)).toEqual(1);

package/lib/components/Pagination/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA0C,CAAC;AA0BvD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA0C,CAAC;AAoCvD,eAAe,MAAM,CAAC"}

package/lib/components/Pagination/schema.js

@@ -15,7 +15,9 @@ schema.propTypes = {
   variant: _reactDesc.PropTypes.oneOf(['comfortable', 'compact']).description('Controls the padding size of the component').defaultValue('comfortable'),
   defaultActivePage: _reactDesc.PropTypes.number.description('When uncontrolled, specifies the default initially-active page').defaultValue('1'),
   activePage: _reactDesc.PropTypes.number.description('Sets the currently-active page. If specified, the component is "controlled".'),
-  totalPages: _reactDesc.PropTypes.number.isRequired.description('Sets the total number of pages'),
+  openEnded: _reactDesc.PropTypes.bool.description('Define if this is an open-ended pagination. Use hasNext to enable the next button').defaultValue('false'),
+  hasNext: _reactDesc.PropTypes.bool.description('Use with `openEnded` prop to define if the Next button is enabled').defaultValue('false'),
+  totalPages: _reactDesc.PropTypes.number.description('Sets the total number of pages. This is required when using a fixed pagination'),
   onPageChange: _reactDesc.PropTypes.func.description('A function called with two arguments (the newly-active page and the previously-active page) whenever the active page changes'),
   labelPrevious: _reactDesc.PropTypes.string.description('Override the "Previous" button label'),
   labelNext: _reactDesc.PropTypes.string.description('Override the "Next" button label')

package/lib/components/Pagination/types.d.ts

@@ -1,8 +1,31 @@
 export declare type PaginationVariant = 'comfortable' | 'compact';
 export interface Page {
-    active?: boolean;
     page?: number;
+    active?: boolean;
     ellipsis?: boolean;
 }
+export interface DefaultPaginationProps {
+    variant: PaginationVariant;
+    defaultActivePage?: number;
+    activePage?: number;
+    onPageChange?: (newPage: number, oldPage: number) => void;
+    labelPrevious?: string;
+    labelNext?: string;
+}
+declare type OpenEndedPaginationProps = {
+    openEnded: true;
+    hasNext: boolean;
+} & DefaultPaginationProps;
+declare type CloseEndedPaginationProps = {
+    openEnded: false;
+    totalPages: number;
+} & DefaultPaginationProps;
+export declare type PaginationProps = CloseEndedPaginationProps | OpenEndedPaginationProps;
+export declare type PagesProps = {
+    currentPage: number;
+    totalPages?: CloseEndedPaginationProps['totalPages'];
+    onPageChange: (page: Page) => void;
+} & Pick<PaginationProps, 'variant' | 'activePage'>;
 export declare type PageChangeHandlerFn = (page: Page) => void;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Pagination/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/types.ts"],"names":[],"mappings":"AAAA,oBAAY,iBAAiB,GAAG,aAAa,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,IAAI;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oBAAY,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/types.ts"],"names":[],"mappings":"AAAA,oBAAY,iBAAiB,GAAG,aAAa,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,IAAI;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,aAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB,GAAG,sBAAsB,CAAC;AAE3B,aAAK,yBAAyB,GAAG;IAC/B,SAAS,EAAE,KAAK,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,sBAAsB,CAAC;AAE3B,oBAAY,eAAe,GACvB,yBAAyB,GACzB,wBAAwB,CAAC;AAE7B,oBAAY,UAAU,GAAG;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAEpD,oBAAY,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC"}