widenarrow-ui 1.0.47 → 1.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/components/Button/Button.types.d.ts +1 -1
  2. package/lib/components/DropDownItem/DropDownItem.types.d.ts +1 -1
  3. package/lib/components/Pagination/Pagination.types.d.ts +18 -7
  4. package/lib/index.d.ts +74 -64
  5. package/lib/index.esm.js +26 -31
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +26 -31
  8. package/lib/index.js.map +1 -1
  9. package/lib/types/styling.types.d.ts +1 -1
  10. package/package.json +1 -1
  11. package/src/components/Button/Button.types.ts +1 -1
  12. package/src/components/DropDownItem/DropDownItem.types.ts +1 -1
  13. package/src/components/Pagination/Pagination.stories.tsx +3 -1
  14. package/src/components/Pagination/Pagination.tsx +95 -82
  15. package/src/components/Pagination/Pagination.types.ts +12 -7
  16. package/src/types/styling.types.ts +1 -1
package/lib/components/Button/Button.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, MouseEvent, ReactNode } from 'react';
2
- import { HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
2
+ import { HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
3
3
  export interface ButtonProps {
4
4
  text?: string;
5
5
  onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
package/lib/components/DropDownItem/DropDownItem.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { MouseEvent, ReactNode } from 'react';
2
- import { ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
2
+ import { ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
3
3
  export interface DropDownItemProps {
4
4
  text?: string;
5
5
  onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
package/lib/components/Pagination/Pagination.types.d.ts CHANGED
@@ -1,14 +1,25 @@
1
+ import { HierarchyTypes } from 'src/constants';
1
2
  import { SearchResultInterface } from '../../types/common.types';
2
3
  export interface PaginationProps {
3
- i18n: {
4
- t: (value: string, config?: object) => string;
5
- };
6
4
  pagination: SearchResultInterface;
7
- onPaginate: (page: number) => void;
8
- onPageSizeChange?: (pageSize: number) => void;
5
+ onChange: (searchResult: SearchResultInterface) => void;
9
6
  slim?: boolean;
10
- tablePagination?: boolean;
7
+ withPageSizeChange?: boolean;
8
+ withTablePagination?: boolean;
9
+ withFastForwardButtons: boolean;
10
+ pageSizeOptions?: Array<number>;
11
+ buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
11
12
  className?: string;
12
13
  nextPageTitle?: string;
13
- previousPageTitle: string;
14
+ previousPageTitle?: string;
15
+ firstPageTitle?: string;
16
+ lastPageTitle?: string;
17
+ pageSizeTitleCallback?: (args: {
18
+ pageSize: number;
19
+ }) => string;
20
+ tableIntervalTitleCallback?: (args: {
21
+ start: number;
22
+ end: number;
23
+ total: number;
24
+ }) => string;
14
25
  }
package/lib/index.d.ts CHANGED
@@ -1,52 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import react__default, { CSSProperties, MouseEvent, ReactNode, FC, ChangeEvent, RefObject, FocusEvent, KeyboardEvent } from 'react';
3
- import { HierarchyTypes as HierarchyTypes$1, ColorTypes as ColorTypes$1, SizeTypes as SizeTypes$1, IconTypes as IconTypes$1 } from 'src/constants';
4
3
  import { Placement, PositioningStrategy } from '@popperjs/core';
5
-
6
- interface MarginInterface {
7
- margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
8
- marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
9
- marginY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
10
- marginTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
11
- marginBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
12
- marginRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
13
- marginLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
14
- }
15
- interface PaddingInterface {
16
- padding?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
17
- paddingX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
18
- paddingY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
19
- paddingTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
20
- paddingBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
21
- paddingRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
22
- paddingLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
23
- }
24
- interface FlexStylingInterface {
25
- alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
26
- alignSelf?: 'center' | 'flexStart' | 'flexEnd';
27
- displayFlex?: boolean;
28
- displayFlexCenter?: boolean;
29
- displayFlexCenterSpaceBetween?: boolean;
30
- flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
31
- flexGrow?: '0' | '1' | 'auto';
32
- flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
33
- justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
34
- }
35
- interface HierarchyInterface {
36
- type: Partial<HierarchyTypes$1>;
37
- }
38
- interface ColorStyleInterface {
39
- color?: Partial<ColorTypes$1>;
40
- }
41
- interface SizeStyleInterface {
42
- size?: Partial<SizeTypes$1>;
43
- }
44
- interface IconStyleInterface {
45
- icon?: Partial<IconTypes$1>;
46
- }
47
- interface SearchResultInterface$1 {
48
- icon?: Partial<IconTypes$1>;
49
- }
4
+ import { HierarchyTypes as HierarchyTypes$1 } from 'src/constants';
50
5
 
51
6
  declare enum IconTypes {
52
7
  ACCOUNT_SETTINGS = "iconAccountSettings",
@@ -318,6 +273,51 @@ declare enum AppColors {
318
273
  CUSTOM = "custom"
319
274
  }
320
275
 
276
+ interface MarginInterface {
277
+ margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
278
+ marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
279
+ marginY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
280
+ marginTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
281
+ marginBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
282
+ marginRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
283
+ marginLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
284
+ }
285
+ interface PaddingInterface {
286
+ padding?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
287
+ paddingX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
288
+ paddingY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
289
+ paddingTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
290
+ paddingBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
291
+ paddingRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
292
+ paddingLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
293
+ }
294
+ interface FlexStylingInterface {
295
+ alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
296
+ alignSelf?: 'center' | 'flexStart' | 'flexEnd';
297
+ displayFlex?: boolean;
298
+ displayFlexCenter?: boolean;
299
+ displayFlexCenterSpaceBetween?: boolean;
300
+ flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
301
+ flexGrow?: '0' | '1' | 'auto';
302
+ flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
303
+ justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
304
+ }
305
+ interface HierarchyInterface {
306
+ type: Partial<HierarchyTypes>;
307
+ }
308
+ interface ColorStyleInterface {
309
+ color?: Partial<ColorTypes>;
310
+ }
311
+ interface SizeStyleInterface {
312
+ size?: Partial<SizeTypes>;
313
+ }
314
+ interface IconStyleInterface {
315
+ icon?: Partial<IconTypes>;
316
+ }
317
+ interface SearchResultInterface$1 {
318
+ icon?: Partial<IconTypes>;
319
+ }
320
+
321
321
  interface BoxProps extends MarginInterface, PaddingInterface, FlexStylingInterface {
322
322
  children?: react__default.ReactNode;
323
323
  className?: string;
@@ -346,10 +346,10 @@ declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttribute
346
346
  interface ButtonProps {
347
347
  text?: string;
348
348
  onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
349
- type?: Partial<HierarchyTypes$1>;
350
- size?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
351
- icon?: Partial<IconTypes$1>;
352
- iconSize?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE | SizeTypes$1.AUTO;
349
+ type?: Partial<HierarchyTypes>;
350
+ size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
351
+ icon?: Partial<IconTypes>;
352
+ iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO;
353
353
  withIconRight?: boolean;
354
354
  disabled?: boolean;
355
355
  className?: string;
@@ -454,20 +454,20 @@ declare const DropDown: FC<DropDownProps>;
454
454
  interface DropDownItemProps {
455
455
  text?: string;
456
456
  onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
457
- size?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
457
+ size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
458
458
  active?: boolean;
459
459
  withEllipsis?: boolean;
460
460
  disabled?: boolean;
461
461
  wrapperElement?: 'div' | 'li';
462
462
  className?: string;
463
- type?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
464
- leftIcon?: Partial<IconTypes$1>;
465
- rightIcon?: Partial<IconTypes$1>;
463
+ type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
464
+ leftIcon?: Partial<IconTypes>;
465
+ rightIcon?: Partial<IconTypes>;
466
466
  rightComponent?: ReactNode;
467
467
  children?: ReactNode | ReactNode[];
468
- iconSize?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
469
- iconColor?: Partial<ColorTypes$1>;
470
- textColor?: Partial<ColorTypes$1>;
468
+ iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
469
+ iconColor?: Partial<ColorTypes>;
470
+ textColor?: Partial<ColorTypes>;
471
471
  fontSize?: string;
472
472
  textAlign?: string;
473
473
  fontWeight?: string;
@@ -509,17 +509,27 @@ interface SearchResultInterface {
509
509
  }
510
510
 
511
511
  interface PaginationProps {
512
- i18n: {
513
- t: (value: string, config?: object) => string;
514
- };
515
512
  pagination: SearchResultInterface;
516
- onPaginate: (page: number) => void;
517
- onPageSizeChange?: (pageSize: number) => void;
513
+ onChange: (searchResult: SearchResultInterface) => void;
518
514
  slim?: boolean;
519
- tablePagination?: boolean;
515
+ withPageSizeChange?: boolean;
516
+ withTablePagination?: boolean;
517
+ withFastForwardButtons: boolean;
518
+ pageSizeOptions?: Array<number>;
519
+ buttonType?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
520
520
  className?: string;
521
521
  nextPageTitle?: string;
522
- previousPageTitle: string;
522
+ previousPageTitle?: string;
523
+ firstPageTitle?: string;
524
+ lastPageTitle?: string;
525
+ pageSizeTitleCallback?: (args: {
526
+ pageSize: number;
527
+ }) => string;
528
+ tableIntervalTitleCallback?: (args: {
529
+ start: number;
530
+ end: number;
531
+ total: number;
532
+ }) => string;
523
533
  }
524
534
 
525
535
  declare const Pagination: FC<PaginationProps>;
package/lib/index.esm.js CHANGED
@@ -2608,9 +2608,7 @@ var styles$b = {"body":"Pagination-module_WRLv5h","container":"Pagination-module
2608
2608
  var s$b = classNames.bind(styles$b);
2609
2609
  var Pagination = function (_a) {
2610
2610
  var _b;
2611
- var className = _a.className, pagination = _a.pagination, onPaginate = _a.onPaginate, slim = _a.slim, onPageSizeChange = _a.onPageSizeChange, tablePagination = _a.tablePagination, _c = _a.i18n, i18n = _c === void 0 ? {
2612
- t: function (value) { return value; }
2613
- } : _c;
2611
+ var className = _a.className, pagination = _a.pagination, slim = _a.slim, onChange = _a.onChange, _c = _a.buttonType, buttonType = _c === void 0 ? HierarchyTypes.SECONDARY : _c, _d = _a.pageSizeOptions, pageSizeOptions = _d === void 0 ? [10, 20, 30, 40, 50, 80, 100] : _d, firstPageTitle = _a.firstPageTitle, previousPageTitle = _a.previousPageTitle, nextPageTitle = _a.nextPageTitle, lastPageTitle = _a.lastPageTitle, pageSizeTitleCallback = _a.pageSizeTitleCallback, tableIntervalTitleCallback = _a.tableIntervalTitleCallback, withTablePagination = _a.withTablePagination, withFastForwardButtons = _a.withFastForwardButtons, withPageSizeChange = _a.withPageSizeChange;
2614
2612
  if (!pagination) {
2615
2613
  return null;
2616
2614
  }
@@ -2626,53 +2624,50 @@ var Pagination = function (_a) {
2626
2624
  var _a;
2627
2625
  return s$b('button', (_a = { button_slim: slim }, _a[additionalClassName] = additionalClassName, _a));
2628
2626
  };
2629
- if (numberOfPages < 2) {
2630
- return null;
2631
- }
2632
2627
  if (pagination.fetching && !numberOfPages) {
2633
- return (jsx("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: times(function (i) { return (jsx("li", { className: itemClassName, children: jsx("div", { className: buttonClassName(undefined) }) }, i)); }, 5) }));
2628
+ return (jsx("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: times(function (i) { return (jsx("li", { className: itemClassName, children: jsx("div", { className: buttonClassName() }) }, i)); }, 5) }));
2634
2629
  }
2635
2630
  var getPageInfoText = function () {
2636
2631
  var start = (pagination.currentPage - 1) * pagination.pageSize + 1;
2637
2632
  var end = pagination.currentPage * pagination.pageSize;
2638
- return (jsx(Fragment, { children: jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: i18n.t('{{start}} - {{end}} of {{total}}', {
2639
- start: start,
2640
- end: end,
2641
- total: pagination.numberOfHits
2642
- }) }) }));
2633
+ return (jsx(Fragment, { children: jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: tableIntervalTitleCallback
2634
+ ? tableIntervalTitleCallback({ start: start, end: end, total: pagination.numberOfHits })
2635
+ : "".concat(start, " - ").concat(end, " of ").concat(pagination.numberOfHits) }) }));
2643
2636
  };
2637
+ var firstPageButton = withFastForwardButtons ? (jsx("li", { children: jsx("button", { title: firstPageTitle || 'First page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
2638
+ onChange(__assign(__assign({}, pagination), { currentPage: 1 }));
2639
+ }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.ARROW_FIRST_PAGE }) }) })) : null;
2640
+ var previousPageButton = (jsx("li", { className: itemClassName, children: jsx("button", { title: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
2641
+ !isFirstPage && onChange(__assign(__assign({}, pagination), { currentPage: pagination.currentPage - 1 }));
2642
+ }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }));
2643
+ var nextPageButton = (jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
2644
+ onChange(__assign(__assign({}, pagination), { currentPage: pagination.currentPage + 1 }));
2645
+ }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) }));
2646
+ var lastPageButton = withFastForwardButtons ? (jsx("li", { children: jsx("button", { title: lastPageTitle || 'Last page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
2647
+ onChange(__assign(__assign({}, pagination), { currentPage: pagination.numberOfPages }));
2648
+ }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.ARROW_LAST_PAGE }) }) })) : null;
2644
2649
  /*
2645
2650
  paginationMarkup
2646
2651
  */
2647
2652
  var paginationMarkup = function () {
2648
2653
  var _a, _b;
2649
- if (tablePagination) {
2650
- return (jsxs(Box, { alignItems: 'center', children: [jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Previous page'), className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
2651
- !isFirstPage && onPaginate(pagination.currentPage - 1);
2652
- }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Next page'), className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
2653
- onPaginate(pagination.currentPage + 1);
2654
- }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }), getPageInfoText()] }));
2654
+ if (withTablePagination) {
2655
+ return (jsxs(Box, { alignItems: 'center', children: [jsxs("ul", { className: s$b('container', (_a = {}, _a[className] = className, _a)), children: [firstPageButton, previousPageButton, nextPageButton, lastPageButton] }), getPageInfoText()] }));
2655
2656
  }
2656
- return (jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Previous page'), className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
2657
- !isFirstPage && onPaginate(pagination.currentPage - 1);
2658
- }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), getPaginationArray(pagination).map(function (pageObject, index) {
2657
+ return (jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [firstPageButton, previousPageButton, getPaginationArray(pagination).map(function (pageObject, index) {
2659
2658
  if (pageObject.type === 'dots') {
2660
2659
  return (jsx("li", { className: itemClassName, children: jsx("div", { className: s$b('dots', { dots_slim: slim }), children: "..." }) }, "".concat(pageObject.type, "-").concat(index)));
2661
2660
  }
2662
- return (jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Go to page {{page}}', { page: pageObject.page }), className: buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined), onClick: function () {
2663
- onPaginate(pageObject.page);
2661
+ return (jsx("li", { className: itemClassName, children: jsx("button", { title: "Go to page ".concat(pageObject.page), className: buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined), onClick: function () {
2662
+ onChange(__assign(__assign({}, pagination), { currentPage: pageObject.page }));
2664
2663
  }, children: pageObject.page }) }, "".concat(pageObject.type, "-").concat(index)));
2665
- }), jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Next page'), className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
2666
- onPaginate(pagination.currentPage + 1);
2667
- }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }));
2664
+ }), nextPageButton, lastPageButton] }));
2668
2665
  };
2669
- /*
2670
- pageSizeMarkup
2671
- */
2666
+ var sizeTitle = pageSizeTitleCallback ? pageSizeTitleCallback({ pageSize: pagination.pageSize }) : "Page size: ".concat(pagination.pageSize);
2672
2667
  var pageSizeMarkup = function () {
2673
- return onPageSizeChange ? (jsxs(Fragment, { children: [jsx(Separator, { marginX: '15' }), jsx(DropDown, { buttonComponent: jsx(InlineButton, { type: HierarchyTypes.SECONDARY, text: i18n.t('Page size{{colon}} {{pageSize}}', { pageSize: pagination.pageSize, colon: ':' }) }), title: i18n.t('Page size'), children: [10, 20, 30, 40, 50, 80, 100]
2668
+ return withPageSizeChange ? (jsxs(Fragment, { children: [jsx(Separator, { marginX: '15' }), jsx(DropDown, { buttonComponent: jsx(InlineButton, { type: buttonType, text: sizeTitle }), title: sizeTitle, children: pageSizeOptions
2674
2669
  .filter(function (pageSize) { return pageSize < pagination.numberOfHits; })
2675
- .map(function (pageSize) { return (jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onPageSizeChange(pageSize); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
2670
+ .map(function (pageSize) { return (jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onChange(__assign(__assign({}, pagination), { pageSize: pageSize })); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
2676
2671
  };
2677
2672
  return (jsxs(Box, { alignItems: 'center', children: [paginationMarkup(), pageSizeMarkup()] }));
2678
2673
  };