@decisiv/ui-components 2.0.1-alpha.207 → 2.0.1-alpha.209

package/lib/atoms/InputField/HelpMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6BhE;kBA7BQ,WAAW;;;;;;;;;;;;;;AA8CpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6ChE;kBA7CQ,WAAW;;;;;;;;;;;;;;AA8DpB,eAAe,WAAW,CAAC"}

package/lib/atoms/InputField/HelpMessage.js

@@ -31,14 +31,29 @@ function HelpMessage(props) {
       _props$contentLength = props.contentLength,
       contentLength = _props$contentLength === void 0 ? 0 : _props$contentLength;
   var translate = (0, _useTranslations.default)();
-  var showCount = Boolean(maxLength && showCharacterCount); // You have {remaining} characters left ({max} max).
+  var showCount = Boolean(maxLength && showCharacterCount);
+  var countSurpassed = maxLength && contentLength > maxLength;
+
+  var countMessage = _react.default.useMemo(function () {
+    if (!showCount) {
+      return null;
+    }
+
+    if (countSurpassed) {
+      return translate(undefined, 'textArea.countMessageOver', {
+        surplus: _react.default.createElement(RemainingCount, null, contentLength - maxLength),
+        max: "".concat(maxLength)
+      });
+    }
+
+    return translate(undefined, 'textArea.countMessage', {
+      remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
+      max: "".concat(maxLength)
+    });
+  }, [contentLength, countSurpassed, maxLength, showCount, translate]);
 
-  var countMessage = showCount && translate(undefined, 'textArea.countMessage', {
-    remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
-    max: "".concat(maxLength)
-  });
   return helpMessage || showCount ? _react.default.createElement(_Message.default, {
-    intent: "help"
+    intent: countSurpassed ? 'warning' : 'help'
   }, helpMessage, helpMessage && showCount && _react.default.createElement("br", null), countMessage) : null;
 }
 

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}

package/lib/atoms/InputField/index.js

@@ -159,6 +159,7 @@ function InputField(props, targetRef) {
   var labelId = labelIdProp || "".concat(targetId, "-label");
   var translate = (0, _useTranslations.default)();
   var requiredMessage = translate(requiredMessageProp, 'textField.requiredMessage');
+  var isCountOverflow = !!maxLength && contentLength > maxLength;
   return _react.default.createElement(_Containers.InputFieldContainer, {
     overflow: overflow,
     style: style
@@ -166,7 +167,7 @@ function InputField(props, targetRef) {
     cursor: cursor,
     hiddenLabel: hideLabel,
     disabled: disabled,
-    hasWarning: !!warningMessage || withWarningIntent,
+    hasWarning: !!warningMessage || withWarningIntent || isCountOverflow,
     isFocused: isFocused,
     readOnly: readOnly,
     ref: inputContainerRef,

package/lib/atoms/InputField/index.test.js

@@ -113,5 +113,32 @@ describe('InputField', function () {
       }));
       expect(getByText(textFinder("You have ".concat(100 - (initialValue.length + 3), " characters left (100 max).")))).toBeTruthy();
     });
+    it('shows overflow message when values is larger than maxLength', function () {
+      var label = 'label';
+      var initialValue = 'Initial text';
+
+      var _render3 = render(_react.default.createElement(_.default, {
+        label: label,
+        value: initialValue,
+        showCharacterCount: true,
+        maxLength: 15
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      })),
+          getByText = _render3.getByText,
+          rerender = _render3.rerender;
+
+      expect(getByText(textFinder("You have ".concat(15 - initialValue.length, " characters left (15 max).")))).toBeTruthy();
+      var newValue = "".concat(initialValue, " with some additional text");
+      rerender(_react.default.createElement(_.default, {
+        label: label,
+        value: newValue,
+        showCharacterCount: true,
+        maxLength: 15
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      }));
+      expect(getByText(textFinder("You are ".concat(newValue.length - 15, " characters over the limit (15 max).")))).toBeTruthy();
+    });
   });
 });

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"}

package/lib/providers/ConfigProvider/utils/translations.d.ts

@@ -76,6 +76,7 @@ declare const translations: {
     pagination: {
         readonly previous: "Previous";
         readonly next: "Next";
+        readonly page: "Page {page}";
         aria: {
             readonly label: "Pagination";
             readonly previous: "Go to previous page, page {page}";
@@ -129,6 +130,7 @@ declare const translations: {
     };
     textArea: {
         readonly countMessage: "You have {remaining} characters left ({max} max).";
+        readonly countMessageOver: "You are {surplus} characters over the limit ({max} max).";
     };
     textField: {
         readonly requiredMessage: "Required";

package/lib/providers/ConfigProvider/utils/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}

package/lib/providers/ConfigProvider/utils/translations.js

@@ -82,6 +82,7 @@ var translations = {
   pagination: {
     previous: 'Previous',
     next: 'Next',
+    page: 'Page {page}',
     aria: {
       label: 'Pagination',
       previous: 'Go to previous page, page {page}',
@@ -134,7 +135,8 @@ var translations = {
     }
   },
   textArea: {
-    countMessage: 'You have {remaining} characters left ({max} max).'
+    countMessage: 'You have {remaining} characters left ({max} max).',
+    countMessageOver: 'You are {surplus} characters over the limit ({max} max).'
   },
   textField: {
     requiredMessage: 'Required'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.207+7ba6abc",
+  "version": "2.0.1-alpha.209+1b20040",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "7ba6abc7838c58aa2cbe7a117b03d3a308528738"
+  "gitHead": "1b200404a9270e9b1bf1b0d106c1173cd90fe309"
 }