@ssa-ui-kit/core 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -141,6 +141,68 @@ describe('Dropdown', () => {
     }
   });
 
+  it('Selected item changed successfully', async () => {
+    const selectedItem = items[2];
+    const {
+      user,
+      mockOnChange,
+      getByRole,
+      queryByRole,
+      getByTestId,
+      rerender,
+    } = setup({
+      selectedItem,
+    });
+
+    expect(mockOnChange).not.toBeCalled();
+
+    let dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+
+    await user.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await within(dropdownToggleEl).findByTitle('Carrot up');
+
+    for (let i = 0; i < items.length; ++i) {
+      const listItem = items[i];
+      const listItemEl = listItemEls[i];
+
+      const itemListValue = getListItemValue(listItem);
+
+      await within(listItemEl).findByText(itemListValue);
+      expect(within(listItemEl).getByRole('button')).toHaveTextContent(
+        itemListValue,
+      );
+
+      if (listItem.id === selectedItem.id) {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'true');
+        expect(listItemEl).toHaveStyle('background: #DEE1EC');
+      } else {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+      }
+    }
+
+    rerender(
+      <Dropdown onChange={mockOnChange} selectedItem={items[0]}>
+        {items.map((item, index) => (
+          <DropdownOption key={index} value={item.value} />
+        ))}
+      </Dropdown>,
+    );
+
+    dropdownEl = getByTestId('dropdown');
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent(getListItemValue(items[0]));
+  });
+
   it('Renders with an empty items array', async () => {
     const mockOnChange = jest.fn();
     const { getByTestId, queryByRole, getByRole } = render(

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
 import DropdownOption from '@components/DropdownOption';
-
+import Button from '@components/Button';
 import Dropdown from './Dropdown';
 import { DropdownProps } from './types';
 import { DropdownOptionProps } from '../..';
@@ -153,3 +153,28 @@ export const Custom: StoryObj = (args: Args) => {
 Custom.args = {
   isDisabled: false,
 };
+
+export const DynamicallyChangedSelectedItem: StoryObj = (args: Args) => {
+  const [selectedIndex, setSelectedIndex] = useState(1);
+
+  const handleUpdate = () => {
+    const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
+    setSelectedIndex(newIndex);
+  };
+  return (
+    <div>
+      <Dropdown
+        isDisabled={args.isDisabled}
+        selectedItem={items[selectedIndex]}>
+        {items.map((item) => (
+          <DropdownOption key={item.id} value={item.value} />
+        ))}
+      </Dropdown>
+      <Button variant="info" css={{ marginLeft: 10 }} onClick={handleUpdate}>
+        Update selected item
+      </Button>
+    </div>
+  );
+};
+
+DynamicallyChangedSelectedItem.args = { isDisabled: false };

package/src/components/Dropdown/Dropdown.tsx

@@ -77,6 +77,10 @@ const Dropdown = <T extends DropdownOptionProps>({
     }
   }, [isOpen, isDisabled, isFocused]);
 
+  useEffect(() => {
+    setActiveItem(selectedItem);
+  }, [selectedItem]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);

package/src/components/Pagination/Pagination.spec.tsx

@@ -43,6 +43,7 @@ const testCases = {
 
 const checkPages = (range: number[], selected?: number) => {
   const navigation = screen.getByRole('navigation');
+  const buttonsWrapper = navigation.querySelector('div') as HTMLDivElement;
   const withinNavigation = within(navigation);
 
   const prevPageBtn = within(
@@ -54,7 +55,7 @@ const checkPages = (range: number[], selected?: number) => {
   );
   nextPageBtn.getByTitle('Carrot right');
 
-  const buttonsAndBreaks = Array.from(navigation.children).slice(1, -1);
+  const buttonsAndBreaks = Array.from(buttonsWrapper.children).slice(1, -1);
 
   for (let i = 0; i < range.length; ++i) {
     const page = range[i];

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react';
+import { StoryAnnotations } from '@storybook/types';
 import { Pagination, PaginationContextProvider } from './index';
 
 export default {
@@ -6,9 +7,8 @@ export default {
   component: Pagination,
   decorators: [
     (Story, { parameters, args }) => {
-      const { selectedPage } = parameters;
       return (
-        <PaginationContextProvider selectedPage={selectedPage}>
+        <PaginationContextProvider {...parameters}>
           {Story(args)}
         </PaginationContextProvider>
       );
@@ -58,3 +58,17 @@ export const Disabled = {
     selectedPage: 5,
   },
 };
+
+export const WithManualPageSettingAndPerPage: StoryAnnotations = {
+  args: {
+    pagesCount: 10,
+    isPageSettingVisible: true,
+    isRowPerPageVisible: true,
+  },
+  parameters: {
+    selectedPage: 1,
+  },
+};
+
+WithManualPageSettingAndPerPage.storyName =
+  'With records per page and page number setting';

package/src/components/Pagination/Pagination.tsx

@@ -1,13 +1,13 @@
-import styled from '@emotion/styled';
+import { KeyboardEvent, useState } from 'react';
 import { usePaginationRange } from '@ssa-ui-kit/hooks';
-
+import { InputProps } from '@components/Input/types';
+import Wrapper from '@components/Wrapper';
 import { ArrowButton } from './ArrowButton';
 import { PaginationButtons } from './PaginationButtons';
-
 import { PaginationProps } from './types';
 import { usePaginationContext } from './PaginationContext';
-
-const Nav = styled.nav``;
+import { RowsPerPageDropdown } from './components';
+import * as S from './styles';
 
 const Pagination = ({
   pagesCount,
@@ -15,51 +15,93 @@ const Pagination = ({
   as,
   ariaLabel,
   isDisabled,
+  pageNumberPlaceholder = 'Page №',
+  isPageSettingVisible = false,
+  isRowPerPageVisible = false,
+  rowPerPageProps,
+  manualPageNumberProps,
 }: PaginationProps) => {
   const { page, setPage } = usePaginationContext();
   const range = usePaginationRange({ pagesCount, selectedPage: page });
+  const [inputStatus, setInputStatus] = useState<InputProps['status']>('basic');
+  const handlePageNumberChange = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.code === 'Enter') {
+      const { value: inputValue } = event.currentTarget;
+      const newPageNumber = Number(inputValue);
+      if (newPageNumber > 0 && newPageNumber <= pagesCount) {
+        setInputStatus('basic');
+        setPage(Number(inputValue));
+      } else {
+        setInputStatus('error');
+      }
+    }
+  };
 
   return (
-    <Nav className={className} as={as} aria-label={ariaLabel || 'Pagination'}>
-      <ArrowButton
-        direction="left"
-        onClick={() => {
-          if (page) {
-            setPage(page - 1);
+    <S.PaginationNav
+      className={className}
+      as={as}
+      aria-label={ariaLabel || 'Pagination'}>
+      {isRowPerPageVisible && <RowsPerPageDropdown {...rowPerPageProps} />}
+      {isPageSettingVisible && (
+        <Wrapper css={{ width: 'auto', marginRight: 32 }}>
+          <S.PageNumberInput
+            name="page-number"
+            placeholder={pageNumberPlaceholder}
+            onKeyUp={handlePageNumberChange}
+            status={inputStatus}
+            type="number"
+            inputProps={{
+              autoComplete: 'off',
+            }}
+            {...manualPageNumberProps}
+          />
+          <span css={{ textWrap: 'nowrap', fontSize: 14 }}>
+            {page || 0} / {pagesCount}
+          </span>
+        </Wrapper>
+      )}
+      <Wrapper>
+        <ArrowButton
+          direction="left"
+          onClick={() => {
+            if (page) {
+              setPage(page - 1);
+            }
+          }}
+          isDisabled={
+            isDisabled ||
+            pagesCount == null ||
+            pagesCount <= 1 ||
+            page == null ||
+            page === 1
           }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === 1
-        }
-        css={{ marginRight: '12px' }}
-      />
-      <PaginationButtons
-        range={range}
-        selectedPage={page}
-        onClick={setPage}
-        isDisabled={isDisabled}
-      />
-      <ArrowButton
-        direction="right"
-        onClick={() => {
-          if (page) {
-            setPage(page + 1);
+          css={{ marginRight: '12px' }}
+        />
+        <PaginationButtons
+          range={range}
+          selectedPage={page}
+          onClick={setPage}
+          isDisabled={isDisabled}
+        />
+        <ArrowButton
+          direction="right"
+          onClick={() => {
+            if (page) {
+              setPage(page + 1);
+            }
+          }}
+          isDisabled={
+            isDisabled ||
+            pagesCount == null ||
+            pagesCount <= 1 ||
+            page == null ||
+            page === pagesCount
           }
-        }}
-        isDisabled={
-          isDisabled ||
-          pagesCount == null ||
-          pagesCount <= 1 ||
-          page == null ||
-          page === pagesCount
-        }
-        css={{ marginLeft: '7px' }}
-      />
-    </Nav>
+          css={{ marginLeft: '7px' }}
+        />
+      </Wrapper>
+    </S.PaginationNav>
   );
 };
 

package/src/components/Pagination/PaginationContext.tsx

@@ -3,6 +3,7 @@ import {
   PaginationContextProps,
   PaginationContextProviderProps,
 } from './types';
+import { DEFAULT_PER_PAGE_VALUE } from './constants';
 
 export const PaginationContext = createContext<PaginationContextProps>(
   {} as PaginationContextProps,
@@ -12,11 +13,13 @@ export const usePaginationContext = () => useContext(PaginationContext);
 
 export const PaginationContextProvider = ({
   selectedPage,
+  defaultPerPage = DEFAULT_PER_PAGE_VALUE,
   children,
 }: PaginationContextProviderProps) => {
+  const [perPage, setPerPage] = useState<number>(defaultPerPage);
   const [page, setPage] = useState(selectedPage);
   return (
-    <PaginationContext.Provider value={{ page, setPage }}>
+    <PaginationContext.Provider value={{ page, perPage, setPage, setPerPage }}>
       {children}
     </PaginationContext.Provider>
   );

package/src/components/Pagination/components/RowsPerPageDropdown/RowsPerPageDropdown.tsx

@@ -0,0 +1,70 @@
+import { useTheme } from '@emotion/react';
+import {
+  DropdownOption,
+  Typography,
+  Wrapper,
+  Dropdown,
+  usePaginationContext,
+} from '@components';
+import { RowsPerPageDropdownProps } from './types';
+import { DEFAULT_PER_PAGE_VALUE, ROWS_PER_PAGE_LIST } from '../../constants';
+
+export const RowsPerPageDropdown = ({
+  selectedItem = DEFAULT_PER_PAGE_VALUE,
+  rowsPerPageList = ROWS_PER_PAGE_LIST,
+  rowsPerPageText = 'Rows per page',
+  ...rest
+}: RowsPerPageDropdownProps) => {
+  const theme = useTheme();
+  const { setPerPage } = usePaginationContext();
+
+  const selectedItemForDropdown =
+    rowsPerPageList.find(({ value }) => value === selectedItem) ||
+    rowsPerPageList[0];
+
+  const onChange: Parameters<typeof Dropdown>[0]['onChange'] = ({ value }) => {
+    setPerPage(value as number);
+  };
+
+  return (
+    <Wrapper css={{ width: 'auto', ul: { width: 'auto' } }}>
+      <Typography
+        variant="subtitle"
+        css={{
+          fontSize: 14,
+          lineHeight: 1,
+          textWrap: 'nowrap',
+        }}>
+        {rowsPerPageText}:
+      </Typography>
+      <Dropdown
+        selectedItem={selectedItemForDropdown}
+        onChange={onChange}
+        css={{
+          marginLeft: 10,
+          marginRight: 37,
+          background: 'none',
+          color: '#070821',
+          gap: 5,
+          padding: 0,
+          '&:focus': {
+            color: '#070821',
+            background: 'none',
+            '&::before': {
+              display: 'none',
+            },
+          },
+          '& svg path': {
+            stroke: theme.colors.greyDarker,
+          },
+        }}
+        {...rest}>
+        {rowsPerPageList.map((item) => (
+          <DropdownOption key={item.id} value={item.value}>
+            {item.value}
+          </DropdownOption>
+        ))}
+      </Dropdown>
+    </Wrapper>
+  );
+};

package/src/components/Pagination/components/RowsPerPageDropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './RowsPerPageDropdown';
+export * from '../../constants';

package/src/components/Pagination/components/RowsPerPageDropdown/types.ts

@@ -0,0 +1,7 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface RowsPerPageDropdownProps extends CommonProps {
+  selectedItem?: number;
+  rowsPerPageText?: string;
+  rowsPerPageList?: Array<{ id: number; value: number }>;
+}

package/src/components/Pagination/components/index.ts

@@ -0,0 +1 @@
+export * from './RowsPerPageDropdown';

package/src/components/Pagination/constants.ts

@@ -0,0 +1,18 @@
+export const ROWS_PER_PAGE_LIST = [
+  {
+    id: 1,
+    value: 10,
+  },
+  {
+    id: 2,
+    value: 25,
+  },
+  {
+    id: 3,
+    value: 50,
+  },
+];
+
+export const DEFAULT_SELECTED_INDEX = 1;
+export const DEFAULT_PER_PAGE_VALUE =
+  ROWS_PER_PAGE_LIST[DEFAULT_SELECTED_INDEX].value;

package/src/components/Pagination/styles.tsx

@@ -1,4 +1,6 @@
+import Input from '@components/Input';
 import { css, Theme } from '@emotion/react';
+import styled from '@emotion/styled';
 
 const baseBtnStyles = (theme: Theme) => css`
   height: 30px;
@@ -96,3 +98,26 @@ export const arrowBtnStyles = (theme: Theme) => css`
     cursor: pointer;
   }
 `;
+
+export const PaginationNav = styled.nav`
+  display: flex;
+`;
+
+export const PageNumberInput = styled(Input)`
+  width: 80px;
+  margin-right: 16px;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &:focus,
+  &:hover {
+    border-width: 1px !important;
+  }
+  & + div {
+    right: 24px;
+  }
+`;

package/src/components/Pagination/types.ts

@@ -1,9 +1,16 @@
 import { CommonProps } from '@global-types/emotion';
+import { InputProps } from '@components/Input/types';
+import { RowsPerPageDropdownProps } from './components/RowsPerPageDropdown/types';
 
 export interface PaginationProps extends CommonProps {
   pagesCount: number;
   ariaLabel?: string;
   isDisabled?: boolean;
+  pageNumberPlaceholder?: string;
+  isPageSettingVisible?: boolean;
+  isRowPerPageVisible?: boolean;
+  rowPerPageProps?: RowsPerPageDropdownProps;
+  manualPageNumberProps?: InputProps;
 }
 
 export interface PaginationButtonsProps {
@@ -29,10 +36,13 @@ export interface PageButtonProps {
 
 export interface PaginationContextProps {
   page?: number;
+  perPage: number;
   setPage: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setPerPage: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export interface PaginationContextProviderProps {
   selectedPage?: number;
+  defaultPerPage?: number;
   children: React.ReactNode;
 }