@eccenca/gui-elements 23.1.0-rc.2 → 23.1.0-rc.3

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -3,6 +3,7 @@ $reactflow-color-linking-node: #0097a7 !default;
 $reactflow-color-transform-node: #40a691 !default;
 $reactflow-color-task-node: #80b67b !default;
 $reactflow-color-workflow-node: #745a85 !default;
+$reactflow-color-replaceable-input: #faa854 !default;
 
 @function bright($color) {
     @return mix($color, #fff, 24%);
@@ -14,9 +15,11 @@ $reactflow-color-workflow-node: #745a85 !default;
     --transformNode: #{$reactflow-color-transform-node};
     --taskNode: #{$reactflow-color-task-node};
     --workflowNode: #{$reactflow-color-workflow-node};
+    --replaceableInput: #{$reactflow-color-replaceable-input};
     --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
     --linkingNodeBright: #{bright($reactflow-color-linking-node)};
     --transformNodeBright: #{bright($reactflow-color-transform-node)};
     --taskNodeBright: #{bright($reactflow-color-task-node)};
     --workflowNodeBright: #{bright($reactflow-color-workflow-node)};
+    --replaceableInputBright: #{bright($reactflow-color-replaceable-input)};
 }

package/src/common/Intent/index.ts

@@ -1,11 +1,12 @@
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type IntentTypes = "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
+export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
 
 export const Definitions: { [key: string]: IntentTypes; } = {
     PRIMARY: "primary",
     ACCENT: "accent",
     NEUTRAL: "neutral",
+    NONE: "none",
     SUCCESS: "success",
     INFO: "info",
     WARNING: "warning",

package/src/common/utils/CssCustomProperties.ts

@@ -90,7 +90,7 @@ export default class CssCustomProperties {
         const { propertyType = "all", ...otherFilters } = filter;
         return CssCustomProperties.listLocalCssStyleRules(otherFilters)
             .map((cssrule) => {
-                return [...(cssrule as CSSStyleRule).style]
+                return [...(cssrule as any).style]
                     .map((propertyname) => {
                         return [
                             propertyname.trim(),

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -1,5 +1,6 @@
 .#{$eccgui}-autosuggestion {
     position: relative;
+    width: 100%;
 
     &__dropdown {
         transition: all 300ms;

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -256,6 +256,15 @@ const AutoSuggestion = ({
         editorState.index = 0
     }, [suggestionResponse, editorState]);
 
+    const inputactionsDisplayed = React.useCallback((node) => {
+        if (!node) return;
+        const width = node.offsetWidth;
+        const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
+        if (slCodeEditor.length > 0) {
+            slCodeEditor[0].style.paddingRight = `${width}px`;
+        }
+    }, []);
+
     const asyncCheckInput = useMemo(() => async (inputString: string) => {
         if(!checkInput || inputString !== value.current || validationRequestData.current.requestId === inputString) {
             return
@@ -463,7 +472,7 @@ const AutoSuggestion = ({
                     />
                 </ContextOverlay>
                 {!!value.current && (
-                    <span className={BlueprintClassNames.INPUT_ACTION}>
+                    <span className={BlueprintClassNames.INPUT_ACTION} ref={inputactionsDisplayed}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}
                             name="operation-clear"

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -49,22 +49,21 @@ const SingleLineCodeEditor = ({
                                   placeholder,
                                   showScrollBar = true
                               }: IEditorProps) => {
+    const singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "))
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
             <UnControlledEditor
         editorDidMount={(editor: any) => {
           editor.on("beforeChange", (_: any, change: any) => {
             // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-            const newText = change.text.join("").replace(/\n/g, "");
-            //failing unexpectedly during undo and redo
-            if (change.update && typeof change.update === "function") {
-              change.update(change.from, change.to, [newText]);
+            if (change.update && typeof change.update === "function" && change.text.length > 1) {
+              change.update(change.from, change.to, [change.text.join("")]);
             }
             return true;
           });
           setEditorInstance(editor);
         }}
-        value={initialValue}
+        value={singleLineInitialContent.current}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         options={{
@@ -89,11 +88,10 @@ const SingleLineCodeEditor = ({
               editor.getScrollInfo()
           );
         }}
-        onBeforeChange={(_editor, _data, value, next) => {
-            // Remove entered new lines
-            const trimmedValue = value.replace(/[\r\n]/g, "");
-            if (trimmedValue !== value) {
-                _editor.setValue(trimmedValue)
+        onBeforeChange={(_editor, data, _, next) => {
+            // Reduce multiple lines to a single line
+            if (data.text.length > 1) {
+                _editor.setValue(data.text.join(""))
             }
             next()
         }}

package/src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx

@@ -53,4 +53,9 @@ describe("SingleLineCodeEditor", () => {
             .setValue("I'm entering a new line \n character");
         expect(codeMirrorEditorInstance.lineCount()).toBe(1);
     });
+
+    it("should convert multiple lines to a single line", () => {
+        render(<SingleLineEditor {...{...props, initialValue: "1\n2\n3"}} />);
+        expect(codeMirrorEditorInstance.lineCount()).toBe(1);
+    });
 });

package/src/components/Badge/badge.scss

@@ -14,11 +14,8 @@
 }
 
 .#{$eccgui}-badge--inline {
-    display: inline-block;
-
-    &.#{$eccgui}-badge--icon {
-        vertical-align: middle;
-    }
+    display: inline-flex;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-badge--bottom-right {

package/src/components/Card/Card.tsx

@@ -24,6 +24,10 @@ export interface CardProps extends BlueprintCardProps {
      * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport.
      */
     scrollinOnFocus?: "start" | "center" | "end";
+    /**
+     * Controls how much whitespace is displayed within the card subelements.
+     */
+    whitespaceAmount?: "none" | "small" | "medium" | "large";
 }
 
 /**
@@ -38,6 +42,7 @@ function Card({
     fullHeight=false,
     elevated=false,
     scrollinOnFocus,
+    whitespaceAmount="medium",
     interactive,
     ...otherProps
 }: CardProps) {
@@ -55,11 +60,12 @@ function Card({
     const cardElement = (
         <BlueprintCard
             className={
-                `${eccgui}-card ` +
-                (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
-                (elevated ? ` ${eccgui}-card--elevated ` : '') +
-                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus ` : '') +
-                className
+                `${eccgui}-card` +
+                (fullHeight ? ` ${eccgui}-card--fullheight` : '') +
+                (elevated ? ` ${eccgui}-card--elevated` : '') +
+                (!!scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : '') +
+                (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : '') +
+                (!!className ? ` ${className}` : "")
             }
             elevation={elevation}
             interactive={!!otherProps.onClick ? true : interactive}

package/src/components/Card/CardContent.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Usually `CardContent` uses all the remaining space inside a card.
+     * This behaviour can be changed by this option, so that the content section is not vertically grown or shrinked.
+     * You may use this then you have multiple content sections in one card but not all those sections should be grown or shrinked regarding the remaining space.
+     */
+    noFlexHeight?: boolean;
 }
 
 /**
@@ -11,12 +17,17 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 function CardContent({
     children,
     className='',
+    noFlexHeight,
     ...otherProps
 }: CardContentProps) {
     return (
         <div
             {...otherProps}
-            className={`${eccgui}-card__content ` + className}
+            className={
+                `${eccgui}-card__content` +
+                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
+                (!!className ? ` ${className}` : "")
+            }
         >
             {children}
         </div>

package/src/components/Card/CardHeader.tsx

@@ -5,8 +5,16 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import CardTitle from "./CardTitle";
 import CardOptions from "./CardOptions";
 
-interface CardHeaderProps extends OverviewItemProps {
+interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    /**
+     * @deprecated
+     */
+    densityHigh?: OverviewItemProps["densityHigh"];
+    /**
+     * @deprecated
+     */
+    hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
 function CardHeader({

package/src/components/Card/card.scss

@@ -53,6 +53,18 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
+
+    .#{$eccgui}-card--whitespace-none > header > & {
+        padding: 0
+    }
+
+    .#{$eccgui}-card--whitespace-small > header > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > header > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing * 2;
+    }
 }
 
 .#{$eccgui}-card__title {
@@ -82,28 +94,102 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 }
 
+.#{$eccgui}-card__options {
+    flex-shrink: 1;
+    max-width: calc(100% - #{$eccgui-size-card-spacing * 1.5});
+
+    & > .#{$eccgui}-button:not(.#{$eccgui}-button--icon) {
+        flex-shrink: 1;
+
+        .#{$ns}-button-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
 .#{$eccgui}-card__content {
     padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2;
+    }
+
     .#{$eccgui}-separation__divider-horizontal + &,
     &:first-child {
         padding-top: $eccgui-size-card-spacing;
+
+        .#{$eccgui}-card--whitespace-none > & {
+            padding-top: 0;
+        }
+
+        .#{$eccgui}-card--whitespace-small > & {
+            padding-top: $eccgui-size-card-spacing * 0.5;
+        }
+
+        .#{$eccgui}-card--whitespace-large > & {
+            padding-top: $eccgui-size-card-spacing * 2;
+        }
     }
 }
 
+.#{$eccgui}-card__content--noflexheight {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing * 0.25;
+    padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
 
+    .#{$eccgui}-card--whitespace-none > & {
+        padding: 0;
+    }
+
+    .#{$eccgui}-card--whitespace-small > & {
+        padding: $eccgui-size-card-spacing * 0.125 $eccgui-size-card-spacing * 0.5;
+    }
+
+    .#{$eccgui}-card--whitespace-large > & {
+        padding: $eccgui-size-card-spacing * 0.75 $eccgui-size-card-spacing * 2;
+    }
+
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -131,9 +217,28 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-flow: row wrap;
     justify-content: flex-end;
     align-items: center;
+    margin: 0;
 
     & > * {
-        margin: $eccgui-size-card-spacing * 0.25;
+        margin: $eccgui-size-card-spacing * 0.25 0;
+    }
+
+    &:not(.#{$eccgui}-card__actions--inversedirection) > * {
+        &:not(:first-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+    }
+
+    &.#{$eccgui}-card__actions--inversedirection > * {
+        &:not(:first-child) {
+            margin-right: $eccgui-size-card-spacing * 0.25;
+        }
+        &:not(:last-child) {
+            margin-left: $eccgui-size-card-spacing * 0.25;
+        }
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

package/src/components/Checkbox/checkbox.scss

@@ -28,6 +28,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
 .#{$ns}-control {
+    max-width: 100%;
+
     &.#{$ns}-checkbox {
         input ~ .#{$ns}-control-indicator,
         input:checked ~ .#{$ns}-control-indicator,
@@ -64,6 +66,8 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
     }
 }
 
-.#{$ns}-control-indicator + * {
-    margin-top: -1 * $eccgui-size-typo-text * $eccgui-size-typo-text-lineheight;
+.#{$ns}-control-indicator + *,
+.#{$ns}-control-indicator + .#{$eccgui}-typography__overflowtext {
+    display: inline-block;
+    vertical-align: text-top;
 }

package/src/components/Depiction/Depiction.tsx

@@ -92,18 +92,18 @@ export function Depiction({
 }: DepictionProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
-            let color = Color("#ffffff")
-            try {
-                color = Color(backgroundColor);
-            } catch(ex) {
-                console.warn("Received invalid background color for depiction: " + backgroundColor)
+    let styleDepictionColors = {};
+    if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
+        try {
+            const color = Color(backgroundColor);
+            styleDepictionColors = {
+                [`--${eccgui}-depiction-background`]: color.rgb().toString(),
+                [`--${eccgui}-depiction-color`]: decideContrastColorValue({testColor: color})
             }
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-background`, color.rgb().toString());
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-color`, decideContrastColorValue({testColor: color}));
+        } catch(ex) {
+            console.warn("Received invalid background color for depiction: " + backgroundColor)
         }
-    }, [backgroundColor]);
+    }
 
     const updateSvgResizing = React.useCallback((el: SVGElement) => {
         let preserveAspectRatio = "";
@@ -164,6 +164,7 @@ export function Depiction({
                 (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
                 (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
             }
+            style={styleDepictionColors as React.CSSProperties}
         >
             {depiction}
         </div>

package/src/components/Grid/Grid.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridProps extends Omit<GridDefaultProps, "fullWidth"> {
+interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

package/src/components/Grid/GridColumn.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridColumnProps extends ColumnDefaultProps {
+interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.

package/src/components/Grid/GridRow.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridRowProps extends RowDefaultProps {
+interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.

package/src/components/Icon/IconButton.tsx

@@ -5,7 +5,7 @@ import Icon from "./Icon";
 import { TestIconProps } from "./TestIcon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

package/src/components/Icon/canonicalIconNames.tsx

@@ -62,6 +62,7 @@ export type ValidIconName =
     | "item-save"
     | "item-settings"
     | "item-shuffle"
+    | "item-skip-forward"
     | "item-start"
     | "item-stop"
     | "item-upload"
@@ -116,15 +117,20 @@ export type ValidIconName =
     | "state-unchecked"
     | "state-warning"
     | "toggler-caret"
+    | "toggler-caretright"
+    | "toggler-caretdown"
     | "toggler-maximize"
     | "toggler-minimize"
     | "toggler-moveleft"
     | "toggler-moveright"
+    | "toggler-rowexpand"
+    | "toggler-rowcollapse"
     | "toggler-showless"
     | "toggler-showmore"
     | "toggler-star-empty"
     | "toggler-star-filled"
     | "toggler-tree"
+    | "form-template"
     | "undefined";
 
 export type CarbonIconType = React.ComponentType<CarbonIconProps>;
@@ -198,6 +204,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "item-save": icons.Save,
     "item-settings": icons.Settings,
     "item-shuffle": icons.Shuffle,
+    "item-skip-forward": icons.SkipForwardFilled,
     "item-start": icons.PlayFilledAlt,
     "item-stop": icons.StopFilledAlt,
     "item-upload": icons.Upload,
@@ -258,16 +265,22 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-caretright": icons.CaretRight,
+    "toggler-caretdown": icons.CaretDown,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
+    "toggler-rowexpand": icons.RowExpand,
+    "toggler-rowcollapse": icons.RowCollapse,
     "toggler-showless": icons.ChevronUp,
     "toggler-showmore": icons.ChevronDown,
     "toggler-star-empty": icons.Star,
     "toggler-star-filled": icons.StarFilled,
     "toggler-tree": icons.TreeViewAlt,
 
+    "form-template": icons.Parameter,
+
     undefined: icons.Undefined,
 };
 

package/src/components/Menu/menu.scss

@@ -55,6 +55,10 @@ $menu-background-color: transparent !default;
     }
 }
 
+span.#{$ns}-menu-item-icon:empty {
+    display: none;
+}
+
 .#{$prefix}--side-nav--rail {
     .#{$ns}-menu-item {
         white-space: nowrap;

package/src/components/OverviewItem/overviewitem.scss

@@ -176,9 +176,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     justify-content: flex-end;
     align-items: center;
 
-    //.#{$eccgui}-overviewitem__description + & {
+    &:not(:first-child) {
         margin-left: mini-units(1);
-    //}
+    }
 }
 
 .#{$eccgui}-overviewitem__actions--hiddeninteractions {

package/src/components/Pagination/Pagination.tsx

@@ -26,6 +26,10 @@ export interface PaginationProps extends CarbonPaginationProps {
      * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
+    /**
+     * Element is displayed with dividing borders.
+     */
+    hideBorders?: boolean;
 }
 
 function Pagination({
@@ -34,6 +38,7 @@ function Pagination({
     hideInfoText = false,
     hidePageSelect = false,
     hideNavigationArrows = false,
+    hideBorders = false,
     ...otherProps
 }: PaginationProps) {
     return (
@@ -45,7 +50,8 @@ function Pagination({
                 (hidePageSizeConfiguration ? ` ${eccgui}-pagination--hidepagesize` : "") +
                 (hideInfoText ? ` ${eccgui}-pagination--hideinfotext` : "") +
                 (hidePageSelect ? ` ${eccgui}-pagination--hidepageselect` : "") +
-                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "")
+                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "") +
+                (hideBorders ? ` ${eccgui}-pagination--hideborders` : "")
             }
         />
     );
@@ -74,19 +80,33 @@ export const usePagination = ({
     initialPageSize,
 }: IPaginationOptions) => {
     const minSize = Math.min(...pageSizes);
-    const [pagination, setPagination] = useState<IPaginationDetails>({
+    const _pagination = React.useRef<IPaginationDetails>({
         total: 0,
         current: 1,
         limit: initialPageSize ? initialPageSize : minSize,
         minPageSize: minSize,
-    });
-    const onPaginationChange = ({ page, pageSize }: {page: any, pageSize: any}) => {
-        setPagination({ ...pagination, current: page, limit: pageSize });
-    };
+    })
+    const [pagination, _setPagination] = useState<IPaginationDetails>(_pagination.current);
+    const setPagination = React.useCallback((newPagination: IPaginationDetails) => {
+        // Check if pagination has actually changed
+        const current = _pagination.current
+        if (newPagination.current !== current.current ||
+            newPagination.minPageSize !== current.minPageSize ||
+            newPagination.limit !== current.limit ||
+            newPagination.total !== current.total) {
+            _pagination.current = newPagination
+            _setPagination(newPagination)
+        }
+    }, [])
+    const onPaginationChange = React.useCallback(({ page, pageSize }: {page: any, pageSize: any}) => {
+        setPagination({ ..._pagination.current, current: page, limit: pageSize });
+    }, [setPagination]);
     // When the total number of pageable items changes, this function must be called
-    const onTotalChange = (total: number): void => {
-        setPagination({ ...pagination, total: total, current: 1 });
-    };
+    const onTotalChange = React.useCallback((total: number): void => {
+        if(_pagination.current.total !== total) {
+            setPagination({ ..._pagination.current, total: total, current: 1 });
+        }
+    }, [setPagination]);
     const paginationElement = (
         <Pagination
             onChange={onPaginationChange}