widenarrow-ui 1.0.47 → 1.0.48

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

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEvent, ReactNode } from 'react';
-import { HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
+import { HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
 export interface ButtonProps {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;

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

@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
+import { ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
 export interface DropDownItemProps {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;

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

@@ -1,14 +1,21 @@
+import { HierarchyTypes } from 'src/constants';
 import { SearchResultInterface } from '../../types/common.types';
 export interface PaginationProps {
-    i18n: {
-        t: (value: string, config?: object) => string;
-    };
     pagination: SearchResultInterface;
     onPaginate: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     slim?: boolean;
     tablePagination?: boolean;
+    buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     className?: string;
     nextPageTitle?: string;
-    previousPageTitle: string;
+    previousPageTitle?: string;
+    pageSizeTitleCallback?: (args: {
+        pageSize: number;
+    }) => string;
+    tableIntervalTitleCallback?: (args: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
 }

package/lib/index.d.ts

@@ -1,52 +1,7 @@
 import * as react from 'react';
 import react__default, { CSSProperties, MouseEvent, ReactNode, FC, ChangeEvent, RefObject, FocusEvent, KeyboardEvent } from 'react';
-import { HierarchyTypes as HierarchyTypes$1, ColorTypes as ColorTypes$1, SizeTypes as SizeTypes$1, IconTypes as IconTypes$1 } from 'src/constants';
 import { Placement, PositioningStrategy } from '@popperjs/core';
-
-interface MarginInterface {
-    margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-    marginLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-}
-interface PaddingInterface {
-    padding?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-    paddingLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
-}
-interface FlexStylingInterface {
-    alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
-    alignSelf?: 'center' | 'flexStart' | 'flexEnd';
-    displayFlex?: boolean;
-    displayFlexCenter?: boolean;
-    displayFlexCenterSpaceBetween?: boolean;
-    flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
-    flexGrow?: '0' | '1' | 'auto';
-    flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
-    justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
-}
-interface HierarchyInterface {
-    type: Partial<HierarchyTypes$1>;
-}
-interface ColorStyleInterface {
-    color?: Partial<ColorTypes$1>;
-}
-interface SizeStyleInterface {
-    size?: Partial<SizeTypes$1>;
-}
-interface IconStyleInterface {
-    icon?: Partial<IconTypes$1>;
-}
-interface SearchResultInterface$1 {
-    icon?: Partial<IconTypes$1>;
-}
+import { HierarchyTypes as HierarchyTypes$1 } from 'src/constants';
 
 declare enum IconTypes {
     ACCOUNT_SETTINGS = "iconAccountSettings",
@@ -318,6 +273,51 @@ declare enum AppColors {
     CUSTOM = "custom"
 }
 
+interface MarginInterface {
+    margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+    marginLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+}
+interface PaddingInterface {
+    padding?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingY?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingTop?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingBottom?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingRight?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+    paddingLeft?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25';
+}
+interface FlexStylingInterface {
+    alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
+    alignSelf?: 'center' | 'flexStart' | 'flexEnd';
+    displayFlex?: boolean;
+    displayFlexCenter?: boolean;
+    displayFlexCenterSpaceBetween?: boolean;
+    flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
+    flexGrow?: '0' | '1' | 'auto';
+    flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
+    justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
+}
+interface HierarchyInterface {
+    type: Partial<HierarchyTypes>;
+}
+interface ColorStyleInterface {
+    color?: Partial<ColorTypes>;
+}
+interface SizeStyleInterface {
+    size?: Partial<SizeTypes>;
+}
+interface IconStyleInterface {
+    icon?: Partial<IconTypes>;
+}
+interface SearchResultInterface$1 {
+    icon?: Partial<IconTypes>;
+}
+
 interface BoxProps extends MarginInterface, PaddingInterface, FlexStylingInterface {
     children?: react__default.ReactNode;
     className?: string;
@@ -346,10 +346,10 @@ declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttribute
 interface ButtonProps {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    type?: Partial<HierarchyTypes$1>;
-    size?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
-    icon?: Partial<IconTypes$1>;
-    iconSize?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE | SizeTypes$1.AUTO;
+    type?: Partial<HierarchyTypes>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    icon?: Partial<IconTypes>;
+    iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO;
     withIconRight?: boolean;
     disabled?: boolean;
     className?: string;
@@ -454,20 +454,20 @@ declare const DropDown: FC<DropDownProps>;
 interface DropDownItemProps {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    size?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     active?: boolean;
     withEllipsis?: boolean;
     disabled?: boolean;
     wrapperElement?: 'div' | 'li';
     className?: string;
-    type?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
-    leftIcon?: Partial<IconTypes$1>;
-    rightIcon?: Partial<IconTypes$1>;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    leftIcon?: Partial<IconTypes>;
+    rightIcon?: Partial<IconTypes>;
     rightComponent?: ReactNode;
     children?: ReactNode | ReactNode[];
-    iconSize?: SizeTypes$1.SMALL | SizeTypes$1.MEDIUM | SizeTypes$1.LARGE;
-    iconColor?: Partial<ColorTypes$1>;
-    textColor?: Partial<ColorTypes$1>;
+    iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    iconColor?: Partial<ColorTypes>;
+    textColor?: Partial<ColorTypes>;
     fontSize?: string;
     textAlign?: string;
     fontWeight?: string;
@@ -509,17 +509,23 @@ interface SearchResultInterface {
 }
 
 interface PaginationProps {
-    i18n: {
-        t: (value: string, config?: object) => string;
-    };
     pagination: SearchResultInterface;
     onPaginate: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     slim?: boolean;
     tablePagination?: boolean;
+    buttonType?: HierarchyTypes$1.PRIMARY | HierarchyTypes$1.SECONDARY;
     className?: string;
     nextPageTitle?: string;
-    previousPageTitle: string;
+    previousPageTitle?: string;
+    pageSizeTitleCallback?: (args: {
+        pageSize: number;
+    }) => string;
+    tableIntervalTitleCallback?: (args: {
+        start: number;
+        end: number;
+        total: number;
+    }) => string;
 }
 
 declare const Pagination: FC<PaginationProps>;

package/lib/index.esm.js

@@ -2608,9 +2608,7 @@ var styles$b = {"body":"Pagination-module_WRLv5h","container":"Pagination-module
 var s$b = classNames.bind(styles$b);
 var Pagination = function (_a) {
     var _b;
-    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 ? {
-        t: function (value) { return value; }
-    } : _c;
+    var className = _a.className, pagination = _a.pagination, onPaginate = _a.onPaginate, slim = _a.slim, onPageSizeChange = _a.onPageSizeChange, _c = _a.buttonType, buttonType = _c === void 0 ? HierarchyTypes.SECONDARY : _c, tablePagination = _a.tablePagination, previousPageTitle = _a.previousPageTitle, nextPageTitle = _a.nextPageTitle, pageSizeTitleCallback = _a.pageSizeTitleCallback, tableIntervalTitleCallback = _a.tableIntervalTitleCallback;
     if (!pagination) {
         return null;
     }
@@ -2630,16 +2628,14 @@ var Pagination = function (_a) {
         return null;
     }
     if (pagination.fetching && !numberOfPages) {
-        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) }));
+        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) }));
     }
     var getPageInfoText = function () {
         var start = (pagination.currentPage - 1) * pagination.pageSize + 1;
         var end = pagination.currentPage * pagination.pageSize;
-        return (jsx(Fragment, { children: jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: i18n.t('{{start}} - {{end}} of {{total}}', {
-                    start: start,
-                    end: end,
-                    total: pagination.numberOfHits
-                }) }) }));
+        return (jsx(Fragment, { children: jsx(Paragraph, { marginBottom: '0', marginLeft: '2', children: tableIntervalTitleCallback
+                    ? tableIntervalTitleCallback({ start: start, end: end, total: pagination.numberOfHits })
+                    : "".concat(start, " - ").concat(end, " of ").concat(pagination.numberOfHits) }) }));
     };
     /*
         paginationMarkup
@@ -2647,30 +2643,31 @@ var Pagination = function (_a) {
     var paginationMarkup = function () {
         var _a, _b;
         if (tablePagination) {
-            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 () {
+            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: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
                                         !isFirstPage && onPaginate(pagination.currentPage - 1);
-                                    }, 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 () {
+                                    }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
                                         onPaginate(pagination.currentPage + 1);
                                     }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }), getPageInfoText()] }));
         }
-        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 () {
+        return (jsxs("ul", { className: s$b('container', (_b = {}, _b[className] = className, _b)), children: [jsx("li", { className: itemClassName, children: jsx("button", { title: previousPageTitle || 'Previous page', className: buttonClassName(isFirstPage ? 'button_disabled' : undefined), onClick: function () {
                             !isFirstPage && onPaginate(pagination.currentPage - 1);
                         }, disabled: isFirstPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_LEFT }) }) }), getPaginationArray(pagination).map(function (pageObject, index) {
                     if (pageObject.type === 'dots') {
                         return (jsx("li", { className: itemClassName, children: jsx("div", { className: s$b('dots', { dots_slim: slim }), children: "..." }) }, "".concat(pageObject.type, "-").concat(index)));
                     }
-                    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 () {
+                    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 () {
                                 onPaginate(pageObject.page);
                             }, children: pageObject.page }) }, "".concat(pageObject.type, "-").concat(index)));
-                }), jsx("li", { className: itemClassName, children: jsx("button", { title: i18n.t('Next page'), className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
+                }), jsx("li", { className: itemClassName, children: jsx("button", { title: nextPageTitle || 'Next page', className: buttonClassName(isLastPage ? 'button_disabled' : undefined), onClick: function () {
                             onPaginate(pagination.currentPage + 1);
                         }, disabled: isLastPage, children: jsx(Icon, { icon: IconTypes.CHEVRON_RIGHT }) }) })] }));
     };
     /*
     pageSizeMarkup
     */
+    var sizeTitle = pageSizeTitleCallback ? pageSizeTitleCallback({ pageSize: pagination.pageSize }) : "Page size: ".concat(pagination.pageSize);
     var pageSizeMarkup = function () {
-        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]
+        return onPageSizeChange ? (jsxs(Fragment, { children: [jsx(Separator, { marginX: '15' }), jsx(DropDown, { buttonComponent: jsx(InlineButton, { type: buttonType, text: sizeTitle }), title: sizeTitle, children: [10, 20, 30, 40, 50, 80, 100]
                         .filter(function (pageSize) { return pageSize < pagination.numberOfHits; })
                         .map(function (pageSize) { return (jsx(DropDownItem, { text: pageSize.toString(), onClickCallback: function () { return onPageSizeChange(pageSize); }, active: pagination.pageSize === pageSize, closeDropDownOnClick: true, withEllipsis: true })); }) })] })) : null;
     };