@centreon/ui 25.3.4 → 25.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.3.4",
+  "version": "25.4.1",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/CollapsibleGroup.tsx

@@ -3,8 +3,8 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import ExpandMore from '@mui/icons-material/ExpandMore';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+
 import {
   Box,
   Collapse,
@@ -66,7 +66,7 @@ const CollapsibleGroup = ({
 
   const containerClassName = className || '';
 
-  const CollapseIcon = isOpen ? ExpandMore : ChevronRightIcon;
+  const CollapseIcon = isOpen ? ExpandLess : ExpandMore;
   const ContainerComponent = useCallback(
     ({
       children: containerComponentChildren

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -143,6 +143,8 @@ const ConnectedAutocomplete = ({
         value={value ?? null}
         onBlur={blur}
         onChange={changeAutocomplete}
+        disableSelectAll={connectedAutocomplete?.disableSelectAll}
+        limitTags={connectedAutocomplete?.limitTags}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -203,6 +203,8 @@ const Inputs = ({
           ? find(propEq(groupName, 'name'), groups)
           : ({} as Group);
 
+        const hasGroupDivider = !groups[index]?.isDividerHidden;
+
         const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
@@ -253,17 +255,19 @@ const Inputs = ({
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
-              <Divider
-                flexItem
-                className={classes.divider}
-                orientation={
-                  equals(groupDirection, GroupDirection.Horizontal)
-                    ? 'vertical'
-                    : 'horizontal'
-                }
-              />
-            )}
+            {hasGroupDivider &&
+              hasGroupTitle &&
+              not(equals(lastGroup, groupName as string)) && (
+                <Divider
+                  flexItem
+                  className={classes.divider}
+                  orientation={
+                    equals(groupDirection, GroupDirection.Horizontal)
+                      ? 'vertical'
+                      : 'horizontal'
+                  }
+                />
+              )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -59,6 +59,8 @@ export interface InputProps {
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
+    disableSelectAll?: boolean;
+    limitTags?: number;
   };
   file?: {
     multiple?: boolean;
@@ -133,4 +135,5 @@ export interface Group {
   name: string;
   order: number;
   titleAttributes?: TypographyProps;
+  isDividerHidden?: boolean;
 }

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -4,12 +4,40 @@ import {
   TestQueryProvider
 } from '@centreon/ui';
 
+import i18next from 'i18next';
+import { useState } from 'react';
+import { initReactI18next } from 'react-i18next';
+import { labelSelectAll, labelUnSelectAll } from '../../../../translatedLabels';
 import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
 
 const optionOne = 'My Option 1';
 
+const Component = () => {
+  const [values, setValues] = useState([]);
+  return (
+    <TestQueryProvider>
+      <div style={{ paddingTop: 20 }}>
+        <MultiConnectedAutocompleteField
+          field="host.name"
+          getEndpoint={getEndpoint}
+          label={label}
+          placeholder={placeholder}
+          value={values}
+          onChange={(_, item) => setValues(item)}
+          disableSelectAll={false}
+        />
+      </div>
+    </TestQueryProvider>
+  );
+};
+
 describe('Multi connected autocomplete', () => {
   beforeEach(() => {
+    i18next.use(initReactI18next).init({
+      lng: 'en',
+      resources: {}
+    });
+
     cy.fixture('inputField/listOptions').then((optionsData) => {
       cy.interceptAPIRequest({
         alias: 'getListOptions',
@@ -35,18 +63,7 @@ describe('Multi connected autocomplete', () => {
     });
 
     cy.mount({
-      Component: (
-        <TestQueryProvider>
-          <div style={{ paddingTop: 20 }}>
-            <MultiConnectedAutocompleteField
-              field="host.name"
-              getEndpoint={getEndpoint}
-              label={label}
-              placeholder={placeholder}
-            />
-          </div>
-        </TestQueryProvider>
-      )
+      Component: <Component />
     });
   });
 
@@ -98,7 +115,7 @@ describe('Multi connected autocomplete', () => {
     cy.waitForRequest('@getSearchedOption');
 
     cy.fixture('inputField/searchedOption').then(() => {
-      cy.get('@listOptions').find('li').should('have.length', 5);
+      cy.get('@listOptions').find('li').should('have.length', 6);
     });
 
     cy.get('[type="checkbox"]').eq(0).check();
@@ -115,7 +132,7 @@ describe('Multi connected autocomplete', () => {
     cy.fixture('inputField/listOptions').then((optionsData) => {
       cy.get('@listOptions')
         .find('li')
-        .should('have.length', optionsData.result.length);
+        .should('have.length', optionsData.result.length + 1);
 
       cy.get('@listOptions').within(() => {
         optionsData.result.forEach((option) => {
@@ -124,4 +141,41 @@ describe('Multi connected autocomplete', () => {
       });
     });
   });
+
+  it('checks all options when Select all button is clicked', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.contains('5 element(s) found');
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.contains(labelSelectAll).click();
+
+    cy.contains(labelUnSelectAll).should('be.visible');
+
+    cy.get('[data-testid="CancelIcon"]').should('have.length', 5);
+
+    cy.makeSnapshot('checks all options when Select all button is clicked');
+  });
+
+  it('unchecks all options when unSelect all button is clicked', () => {
+    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
+
+    cy.get('@input').click();
+
+    cy.contains('5 element(s) found');
+
+    cy.waitForRequest('@getListOptions');
+
+    cy.contains(labelSelectAll).click();
+    cy.contains(labelUnSelectAll).click();
+
+    cy.contains(labelSelectAll).should('be.visible');
+
+    cy.get('[data-testid="CancelIcon"]').should('have.length', 0);
+
+    cy.makeSnapshot('unchecks all options when unSelect all button is clicked');
+  });
 });

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -88,7 +88,7 @@ const ConnectedAutocompleteField = (
 
     const theme = useTheme();
 
-    const { fetchQuery, isFetching, prefetchNextPage } = useFetchQuery<
+    const { fetchQuery, isFetching, prefetchNextPage, data } = useFetchQuery<
       ListingModel<TData>
     >({
       baseEndpoint,
@@ -322,6 +322,7 @@ const ConnectedAutocompleteField = (
 
     return (
       <AutocompleteField
+        total={data?.meta.total}
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         options={

package/src/InputField/Select/Autocomplete/Multi/Listbox.tsx

@@ -0,0 +1,78 @@
+import { ListSubheader, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../../../components/Button';
+import { useListboxStyles } from './Multi.styles';
+
+import {
+  labelElementsFound,
+  labelSelectAll,
+  labelUnSelectAll
+} from '../../../translatedLabels';
+
+const CustomListbox = ({
+  children,
+  label,
+  labelTotal,
+  handleSelectAllToggle,
+  ...props
+}) => {
+  const { classes } = useListboxStyles();
+
+  return (
+    <ul {...props}>
+      <ListSubheader sx={{ padding: 0 }}>
+        <div className={classes.lisSubHeader}>
+          <Typography variant="body2">{labelTotal}</Typography>
+          <Button variant="ghost" size="small" onClick={handleSelectAllToggle}>
+            {label}
+          </Button>
+        </div>
+      </ListSubheader>
+      <div className={classes.dropdown}>{children}</div>
+    </ul>
+  );
+};
+
+const ListboxComponent = ({
+  disableSelectAll,
+  options,
+  isOptionSelected,
+  onChange,
+  total
+}) => {
+  if (disableSelectAll) {
+    return;
+  }
+
+  return (listboxProps): JSX.Element | undefined => {
+    const { t } = useTranslation();
+
+    const allSelected =
+      options.length > 0 && options.every((opt) => isOptionSelected(opt));
+
+    const handleSelectAllToggle = (): void => {
+      const syntheticEvent = {} as React.SyntheticEvent;
+
+      if (allSelected) {
+        onChange?.(syntheticEvent, [], 'selectOption');
+
+        return;
+      }
+
+      onChange?.(syntheticEvent, options, 'selectOption');
+    };
+
+    return (
+      <CustomListbox
+        {...listboxProps}
+        label={t(allSelected ? labelUnSelectAll : labelSelectAll)}
+        handleSelectAllToggle={handleSelectAllToggle}
+        labelTotal={t(labelElementsFound, {
+          total: total || options.length
+        })}
+      />
+    );
+  };
+};
+
+export default ListboxComponent;

package/src/InputField/Select/Autocomplete/Multi/Multi.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  deleteIcon: {
+    height: theme.spacing(1.5),
+    width: theme.spacing(1.5)
+  },
+  tag: {
+    fontSize: theme.typography.caption.fontSize
+  }
+}));
+
+export const useListboxStyles = makeStyles()((theme) => ({
+  lisSubHeader: {
+    width: '100%',
+    background: theme.palette.background.default,
+    padding: theme.spacing(0.5, 1, 0.5, 1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  dropdown: {
+    width: '100%',
+    background: theme.palette.background.paper
+  }
+}));

package/src/InputField/Select/Autocomplete/Multi/Multi.tsx

@@ -0,0 +1,124 @@
+import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
+import { JSX } from 'react';
+
+import { Chip, ChipProps, Tooltip } from '@mui/material';
+import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
+
+import Autocomplete, { Props as AutocompleteProps } from '..';
+import { SelectEntry } from '../..';
+import Option from '../../Option';
+import ListboxComponent from './Listbox';
+import { useStyles } from './Multi.styles';
+
+type Multiple = boolean;
+type DisableClearable = boolean;
+type FreeSolo = boolean;
+
+export interface Props
+  extends Omit<AutocompleteProps, 'renderTags' | 'renderOption' | 'multiple'>,
+    Omit<
+      UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
+      'multiple'
+    > {
+  chipProps?: ChipProps;
+  disableSortedOptions?: boolean;
+  disableSelectAll?: boolean;
+  getOptionTooltipLabel?: (option) => string;
+  getTagLabel?: (option) => string;
+  optionProperty?: string;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
+  total?: number;
+}
+
+const MultiAutocompleteField = ({
+  value,
+  options,
+  disableSortedOptions = false,
+  disableSelectAll = true,
+  optionProperty = 'name',
+  getOptionLabel = (option): string => option.name,
+  getTagLabel = (option): string => option[optionProperty],
+  getOptionTooltipLabel,
+  chipProps,
+  customRenderTags,
+  onChange,
+  total,
+  ...props
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
+    renderedValue.map((option, index) => {
+      return (
+        <Tooltip
+          key={option.id}
+          placement="top"
+          title={getOptionTooltipLabel?.(option)}
+        >
+          <Chip
+            classes={{
+              deleteIcon: classes.deleteIcon,
+              root: classes.tag
+            }}
+            data-testid={`tag-option-chip-${option.id}`}
+            label={getTagLabel(option)}
+            size="medium"
+            {...getTagProps({ index })}
+            {...chipProps}
+            onDelete={(event) => chipProps?.onDelete?.(event, option)}
+          />
+        </Tooltip>
+      );
+    });
+
+  const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
+
+  const values = (value as Array<SelectEntry>) || [];
+
+  const isOptionSelected = ({ id }): boolean => {
+    const valueIds = map(prop('id'), values);
+
+    return includes(id, valueIds);
+  };
+
+  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
+
+  const autocompleteOptions = disableSortedOptions
+    ? options
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
+
+  return (
+    <Autocomplete
+      disableCloseOnSelect
+      displayOptionThumbnail
+      multiple
+      getLimitTagsText={getLimitTagsText}
+      options={autocompleteOptions}
+      renderOption={(renderProps, option, { selected }): JSX.Element => (
+        <li
+          key={option.id}
+          {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
+        >
+          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
+        </li>
+      )}
+      value={values}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
+      ListboxComponent={ListboxComponent({
+        total,
+        onChange,
+        isOptionSelected,
+        disableSelectAll,
+        options
+      })}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};
+
+export default MultiAutocompleteField;

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,119 +1,3 @@
-import { compose, includes, map, prop, reject, sortBy, toLower } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { Chip, ChipProps, Tooltip } from '@mui/material';
-import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
-
-import Autocomplete, { Props as AutocompleteProps } from '..';
-import { SelectEntry } from '../..';
-import Option from '../../Option';
-
-const useStyles = makeStyles()((theme) => ({
-  deleteIcon: {
-    height: theme.spacing(1.5),
-    width: theme.spacing(1.5)
-  },
-  tag: {
-    fontSize: theme.typography.caption.fontSize
-  }
-}));
-
-type Multiple = boolean;
-type DisableClearable = boolean;
-type FreeSolo = boolean;
-
-export interface Props
-  extends Omit<AutocompleteProps, 'renderTags' | 'renderOption' | 'multiple'>,
-    Omit<
-      UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
-      'multiple'
-    > {
-  chipProps?: ChipProps;
-  disableSortedOptions?: boolean;
-  getOptionTooltipLabel?: (option) => string;
-  getTagLabel?: (option) => string;
-  optionProperty?: string;
-  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
-}
-
-const MultiAutocompleteField = ({
-  value,
-  options,
-  disableSortedOptions = false,
-  optionProperty = 'name',
-  getOptionLabel = (option): string => option.name,
-  getTagLabel = (option): string => option[optionProperty],
-  getOptionTooltipLabel,
-  chipProps,
-  customRenderTags,
-  ...props
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
-    renderedValue.map((option, index) => {
-      return (
-        <Tooltip
-          key={option.id}
-          placement="top"
-          title={getOptionTooltipLabel?.(option)}
-        >
-          <Chip
-            classes={{
-              deleteIcon: classes.deleteIcon,
-              root: classes.tag
-            }}
-            data-testid={`tag-option-chip-${option.id}`}
-            label={getTagLabel(option)}
-            size="medium"
-            {...getTagProps({ index })}
-            {...chipProps}
-            onDelete={(event) => chipProps?.onDelete?.(event, option)}
-          />
-        </Tooltip>
-      );
-    });
-
-  const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;
-
-  const values = (value as Array<SelectEntry>) || [];
-
-  const isOptionSelected = ({ id }): boolean => {
-    const valueIds = map(prop('id'), values);
-
-    return includes(id, valueIds);
-  };
-
-  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
-
-  const autocompleteOptions = disableSortedOptions
-    ? options
-    : sortByName([...values, ...reject(isOptionSelected, options)]);
-
-  return (
-    <Autocomplete
-      disableCloseOnSelect
-      displayOptionThumbnail
-      multiple
-      getLimitTagsText={getLimitTagsText}
-      options={autocompleteOptions}
-      renderOption={(renderProps, option, { selected }): JSX.Element => (
-        <li
-          key={option.id}
-          {...(renderProps as React.HTMLAttributes<HTMLLIElement>)}
-        >
-          <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
-        </li>
-      )}
-      renderTags={(renderedValue, getTagProps): React.ReactNode =>
-        customRenderTags
-          ? customRenderTags(renderTags(renderedValue, getTagProps))
-          : renderTags(renderedValue, getTagProps)
-      }
-      value={value}
-      {...props}
-    />
-  );
-};
+import MultiAutocompleteField from './Multi';
 
 export default MultiAutocompleteField;

package/src/InputField/translatedLabels.ts

@@ -1,3 +1,7 @@
 export const searchLabel = 'Search';
 export const labelOpen = 'Open';
 export const labelClear = 'Clear';
+
+export const labelSelectAll = 'Select all';
+export const labelUnSelectAll = 'Unselect all';
+export const labelElementsFound = '{{total}} element(s) found';

package/src/Pagination/Pagination.cypress.spec.tsx

@@ -0,0 +1,137 @@
+import { labelNextPage, labelPreviousPage } from '../Listing/translatedLabels';
+import TestQueryProvider from '../api/TestQueryProvider';
+import { Method } from '../api/useMutationQuery';
+import Pagination from './Pagination';
+import { generateItems } from './utils';
+
+const defaultTotalItems = 25;
+const itemsPerPage = 6;
+const totalPages = Math.ceil(defaultTotalItems / itemsPerPage);
+
+const initialize = ({
+  total = defaultTotalItems,
+  currentPage = 1
+}: { total?: number; currentPage?: number }) => {
+  cy.interceptAPIRequest({
+    alias: 'list',
+    method: Method.GET,
+    path: '**/listing**',
+    response: {
+      result: generateItems(itemsPerPage),
+      meta: {
+        page: currentPage,
+        total,
+        limit: itemsPerPage
+      }
+    }
+  });
+
+  cy.mount({
+    Component: (
+      <div
+        style={{
+          width: '100%',
+          height: '100vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
+        <div
+          style={{
+            height: '176px',
+            boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.2)'
+          }}
+        >
+          <TestQueryProvider>
+            <Pagination
+              api={{ baseEndpoint: '/test/listing', queryKey: ['test'] }}
+            />
+          </TestQueryProvider>
+        </div>
+      </div>
+    )
+  });
+};
+
+describe('Pagination Component', () => {
+  it('render with correct initial state', () => {
+    initialize({});
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('be.disabled');
+
+    cy.findByTestId(labelNextPage).should('not.be.disabled');
+
+    cy.contains(`Page 1/${totalPages}`);
+
+    cy.makeSnapshot();
+  });
+
+  it('hides pagination controls when only one page exists', () => {
+    initialize({ total: itemsPerPage });
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('not.exist');
+    cy.findByTestId(labelNextPage).should('not.exist');
+    cy.contains(/Page \d+\/\d+/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('navigates forward through pages correctly', () => {
+    initialize({});
+    cy.waitForRequest('@list');
+
+    cy.contains(`Page 1/${totalPages}`);
+
+    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
+      cy.findByTestId(labelNextPage).click();
+      cy.waitForRequest('@list');
+
+      cy.contains(`Page ${index + 2}/${totalPages}`);
+    });
+
+    cy.findByTestId(labelNextPage).should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('navigates backward through pages correctly', () => {
+    initialize({});
+
+    cy.waitForRequest('@list');
+
+    Array.from({ length: totalPages - 1 }).forEach(() => {
+      cy.findByTestId(labelNextPage).click();
+
+      cy.waitForRequest('@list');
+    });
+
+    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
+      cy.findByTestId(labelPreviousPage).click();
+      cy.waitForRequest('@list');
+
+      cy.contains(`Page ${totalPages - index - 1}/${totalPages}`);
+    });
+
+    cy.findByTestId(labelPreviousPage).should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('enables both buttons when on middle page', () => {
+    initialize({});
+
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelNextPage).click();
+
+    cy.waitForRequest('@list');
+
+    cy.findByTestId(labelPreviousPage).should('not.be.disabled');
+    cy.findByTestId(labelNextPage).should('not.be.disabled');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Pagination/Pagination.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { http, HttpResponse } from 'msw';
+import Pagination from '.';
+import { generateItems } from './utils';
+
+const mockedListing = {
+  result: generateItems(6),
+  meta: {
+    page: 1,
+    total: 35,
+    limit: 6
+  }
+};
+
+const meta: Meta<typeof Pagination> = {
+  args: {},
+  component: Pagination,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('**/listing**', () => {
+          return HttpResponse.json(mockedListing);
+        })
+      ]
+    }
+  },
+  render: (args) => {
+    return (
+      <div
+        style={{
+          width: '240px',
+          background: '#EDEDED'
+        }}
+      >
+        <Pagination {...args} />
+      </div>
+    );
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: { api: { baseEndpoint: '/test/listing', queryKey: ['pagination'] } }
+};

package/src/Pagination/Pagination.styles.ts

@@ -0,0 +1,56 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  container: {
+    height: theme.spacing(22),
+    width: theme.spacing(30),
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(2)
+  },
+  notFound: {
+    height: theme.spacing(10),
+    width: theme.spacing(30),
+    padding: theme.spacing(1)
+  },
+  body: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1)
+  },
+  content: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5)
+  },
+  page: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  arrowContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  icon: {
+    color: theme.palette.text.primary
+  },
+  arrow: {
+    fontSize: theme.spacing(2)
+  },
+  item: {
+    color: 'inherit',
+    textDecoration: 'none'
+  },
+  link: {
+    '&:hover': {
+      cursor: 'pointer',
+      color: theme.palette.primary.main
+    }
+  }
+}));

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,146 @@
+import { CircularProgress, Link, Typography } from '@mui/material';
+import { equals, isEmpty, isNil } from 'ramda';
+import { useMemo, useState } from 'react';
+
+import ArrowBackIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForwardIos';
+import { useTranslation } from 'react-i18next';
+import IconButton from '../Button/Icon';
+import {
+  labelNextPage,
+  labelNoResultFound,
+  labelPreviousPage
+} from '../Listing/translatedLabels';
+import buildListingEndpoint from '../api/buildListingEndpoint';
+import { Listing } from '../api/models';
+import useFetchQuery from '../api/useFetchQuery';
+import { truncate } from '../utils';
+import { useStyles } from './Pagination.styles';
+
+interface Props {
+  api: {
+    baseEndpoint: string;
+    queryKey: Array<string>;
+    searchConditions?;
+  };
+  labelHasNoElements?: string;
+  onItemClick?: ({ id }: { id: number }) => void;
+}
+
+const limit = 6;
+
+const Pagination = ({
+  api: { baseEndpoint, queryKey, searchConditions },
+  labelHasNoElements = labelNoResultFound,
+  onItemClick
+}: Props) => {
+  const { t } = useTranslation();
+  const { cx, classes } = useStyles();
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading } = useFetchQuery<
+    Listing<{ id: number; name: string }>
+  >({
+    getEndpoint: (parameters): string =>
+      buildListingEndpoint({
+        baseEndpoint: baseEndpoint,
+        parameters: {
+          ...parameters,
+          page,
+          limit,
+          ...(searchConditions
+            ? {
+                search: {
+                  conditions: searchConditions
+                }
+              }
+            : {}),
+          sort: { status: 'DESC' }
+        }
+      }),
+    getQueryKey: () => [...queryKey, page],
+    queryOptions: {
+      suspense: false
+    }
+  });
+
+  const pagesCount = Math.ceil(data?.meta.total / limit);
+  const arePaginationComponentsDisplayed = !equals(pagesCount, 1);
+
+  const hasNoElements = useMemo(
+    () => isEmpty(data?.result) || isNil(data?.result),
+    [data]
+  );
+
+  if (hasNoElements) {
+    return (
+      <div className={classes.notFound}>
+        <Typography color="disabled">{t(labelHasNoElements)}</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.body}>
+        {arePaginationComponentsDisplayed && (
+          <div className={classes.arrowContainer}>
+            <IconButton
+              onClick={() => setPage(page - 1)}
+              disabled={equals(page, 1)}
+              dataTestid={labelPreviousPage}
+              className={classes.icon}
+            >
+              <ArrowBackIcon className={classes.arrow} />
+            </IconButton>
+          </div>
+        )}
+
+        <div className={classes.content}>
+          {isLoading ? (
+            <CircularProgress color="inherit" size={25} />
+          ) : (
+            data?.result.map(({ id, name }) => (
+              <Link
+                key={id}
+                variant="body2"
+                className={cx({
+                  [classes.item]: true,
+                  [classes.link]: !!onItemClick
+                })}
+                onClick={() => onItemClick?.({ id })}
+              >
+                {truncate({
+                  content: name,
+                  maxLength: 25
+                })}
+              </Link>
+            ))
+          )}
+        </div>
+
+        {arePaginationComponentsDisplayed && (
+          <div className={classes.arrowContainer}>
+            <IconButton
+              onClick={() => setPage(page + 1)}
+              disabled={equals(pagesCount, page)}
+              className={classes.icon}
+              dataTestid={labelNextPage}
+            >
+              <ArrowForwardIcon className={classes.arrow} />
+            </IconButton>
+          </div>
+        )}
+      </div>
+
+      {arePaginationComponentsDisplayed && (
+        <Typography
+          className={classes.page}
+          variant="body2"
+        >{`Page ${page}/${pagesCount}`}</Typography>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;

package/src/Pagination/index.ts

@@ -0,0 +1,3 @@
+import Pagination from './Pagination';
+
+export default Pagination;

package/src/Pagination/utils.ts

@@ -0,0 +1,7 @@
+export const generateItems = (count: number) =>
+  Array(count)
+    .fill(0)
+    .map((_, idx) => ({
+      id: idx,
+      name: `Item Item Item ${idx}`
+    }));

package/src/index.ts

@@ -1,6 +1,7 @@
 import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/Autocomplete';
 
 export { default as IconButton } from './Button/Icon';
+export { default as Pagination } from './Pagination';
 
 export { Checkbox, CheckboxGroup } from './Checkbox';
 

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { equals, fromPairs, startsWith } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,7 +25,12 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
+      if (
+        startsWith('/', value) ||
+        (!equals('false', value) &&
+          !equals('true', value) &&
+          !equals(value.match(/^[a-zA-Z]/), null))
+      ) {
         return [key, value];
       }