@ssa-ui-kit/widgets 0.0.1-alpha → 0.0.3-alpha

package/src/components/Filters/Filters.spec.tsx

@@ -1,38 +1,38 @@
-import { mockIntersectionObserver } from 'jsdom-testing-mocks';
-import { StoryComponent } from './stories/StoryComponent';
-import { within, fireEvent } from '@testing-library/dom';
-
-describe('Filters', () => {
-  mockIntersectionObserver();
-
-  it('Should be correctly rendered', () => {
-    const { queryByText, queryByTestId } = render(<StoryComponent />);
-
-    queryByText('strategy #3');
-    expect(queryByTestId('trigger-notification')).not.toBeInTheDocument();
-  });
-
-  it('Should be correctly changed the item', async () => {
-    const { queryByRole, getByRole, queryAllByTestId } = render(
-      <StoryComponent />,
-    );
-
-    const dropdownElements = queryAllByTestId('dropdown');
-    const dropdownElement = dropdownElements[0];
-    let dropdownToggleEl = within(dropdownElement).getByRole('combobox');
-
-    let listboxEl = queryByRole('listbox');
-    expect(listboxEl).not.toBeInTheDocument();
-
-    await fireEvent.click(dropdownToggleEl);
-
-    listboxEl = getByRole('listbox');
-    const listItemEls = within(listboxEl).getAllByRole('listitem');
-    expect(listItemEls.length).toBe(5);
-
-    await fireEvent.click(listItemEls[0]);
-
-    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
-    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
-  });
-});
+import { mockIntersectionObserver } from 'jsdom-testing-mocks';
+import { StoryComponent } from './stories/StoryComponent';
+import { within, fireEvent } from '@testing-library/dom';
+
+describe('Filters', () => {
+  mockIntersectionObserver();
+
+  it('Should be correctly rendered', () => {
+    const { queryByText, queryByTestId } = render(<StoryComponent />);
+
+    queryByText('strategy #3');
+    expect(queryByTestId('trigger-notification')).not.toBeInTheDocument();
+  });
+
+  it('Should be correctly changed the item', async () => {
+    const { queryByRole, getByRole, queryAllByTestId } = render(
+      <StoryComponent />,
+    );
+
+    const dropdownElements = queryAllByTestId('dropdown');
+    const dropdownElement = dropdownElements[0];
+    let dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+    expect(listboxEl).not.toBeInTheDocument();
+
+    await fireEvent.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+    expect(listItemEls.length).toBe(5);
+
+    await fireEvent.click(listItemEls[0]);
+
+    dropdownToggleEl = within(dropdownElement).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
+  });
+});

package/src/components/Filters/Filters.tsx

@@ -1,75 +1,85 @@
-import { Wrapper } from '@ssa-ui-kit/core';
-import { TableFilters } from '@components/TableFilters';
-import { TableFilterConfig } from '@components/TableFilters/types';
-import { useRef, useState } from 'react';
-import {
-  UseTableDataParameters,
-  UseTableDataResult,
-  useTableData,
-} from '@components/TableFilters/hooks/useTableData';
-import { FiltersContextProvider } from './FiltersContext';
-import { FiltersBlock } from './FiltersBlock';
-import { FilterBlockWrapper } from './FilterBlockWrapper';
-import { FiltersWrapper } from './FiltersWrapper';
-import { useVisibility } from './hooks/useVisibility';
-
-export const Filters = ({
-  checkboxData: initialState = {} as TableFilterConfig,
-  handleSubmit,
-  handleCancel,
-  handleClear,
-}: Pick<UseTableDataResult, 'checkboxData'> &
-  Pick<
-    UseTableDataParameters,
-    'handleSubmit' | 'handleCancel' | 'handleClear'
-  >) => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [hiddenCheckboxData, setHiddenCheckboxData] =
-    useState<TableFilterConfig>({});
-
-  const useTableDataResult = useTableData({
-    initialState,
-    wrapperRef,
-    handleSubmit,
-    handleCancel,
-    handleClear,
-  });
-
-  const { checkboxData, refsList } = useTableDataResult;
-
-  const handleVisibilityProcessed = () => {
-    const newHiddenCheckboxData: TableFilterConfig = {};
-    const groupNames = Object.keys(checkboxData);
-    refsList.forEach((currentRef, index) => {
-      const groupName = groupNames[index];
-      const isNotVisible = currentRef.current?.style.visibility === 'hidden';
-      if (isNotVisible) {
-        newHiddenCheckboxData[groupName] = checkboxData[groupName];
-      }
-    });
-    setHiddenCheckboxData(newHiddenCheckboxData);
-  };
-
-  useVisibility({
-    checkboxData,
-    refsList,
-    wrapperRef,
-    onVisibilityProcessed: handleVisibilityProcessed,
-  });
-
-  return (
-    <FiltersWrapper ref={wrapperRef}>
-      <FiltersContextProvider {...useTableDataResult}>
-        <FilterBlockWrapper>
-          <FiltersBlock />
-        </FilterBlockWrapper>
-        <Wrapper css={{ width: 110 }}>
-          <TableFilters
-            {...useTableDataResult}
-            checkboxData={hiddenCheckboxData}
-          />
-        </Wrapper>
-      </FiltersContextProvider>
-    </FiltersWrapper>
-  );
-};
+import { useRef, useState } from 'react';
+import { Wrapper } from '@ssa-ui-kit/core';
+import { TableFilters } from '@components/TableFilters';
+import { TableFilterConfig } from '@components/TableFilters/types';
+import {
+  UseTableDataParameters,
+  UseTableDataResult,
+  useTableData,
+} from '@components/TableFilters/hooks/useTableData';
+import { FiltersContextProvider } from './FiltersContext';
+import { FiltersBlock } from './FiltersBlock';
+import { FilterBlockWrapper } from './FilterBlockWrapper';
+import { FiltersWrapper } from './FiltersWrapper';
+import { useVisibility } from './hooks/useVisibility';
+
+export const Filters = ({
+  checkboxData: initialState = {} as TableFilterConfig,
+  updatedCheckboxData,
+  handleSubmit,
+  handleCancel,
+  handleClear,
+}: Pick<UseTableDataResult, 'checkboxData'> & {
+  updatedCheckboxData?: TableFilterConfig;
+} & Pick<
+    UseTableDataParameters,
+    'handleSubmit' | 'handleCancel' | 'handleClear'
+  >) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [hiddenCheckboxData, setHiddenCheckboxData] =
+    useState<TableFilterConfig>({});
+
+  const [isMoreButtonVisible, setIsMoreButtonVisible] = useState(false);
+
+  const useTableDataResult = useTableData({
+    initialState,
+    updatedCheckboxData,
+    wrapperRef,
+    handleSubmit,
+    handleCancel,
+    handleClear,
+  });
+
+  const { checkboxData, refsList } = useTableDataResult;
+
+  const handleVisibilityProcessed = () => {
+    const newHiddenCheckboxData: TableFilterConfig = {};
+    const groupNames = Object.keys(checkboxData);
+    refsList.forEach((currentRef, index) => {
+      const groupName = groupNames[index];
+      const isNotVisible = currentRef.current?.style.visibility === 'hidden';
+      if (isNotVisible) {
+        newHiddenCheckboxData[groupName] = checkboxData[groupName];
+      }
+    });
+    setHiddenCheckboxData(newHiddenCheckboxData);
+  };
+
+  const handleMoreButtonVisibleChange = (isVisible: boolean) => {
+    setIsMoreButtonVisible(isVisible);
+  };
+
+  useVisibility({
+    checkboxData,
+    refsList,
+    wrapperRef,
+    onVisibilityProcessed: handleVisibilityProcessed,
+  });
+
+  return (
+    <FiltersWrapper ref={wrapperRef} isMoreButtonVisible={isMoreButtonVisible}>
+      <FiltersContextProvider {...useTableDataResult}>
+        <FilterBlockWrapper>
+          <FiltersBlock />
+        </FilterBlockWrapper>
+        <Wrapper css={{ width: 110 }}>
+          <TableFilters
+            {...useTableDataResult}
+            checkboxData={hiddenCheckboxData}
+            handleMoreButtonVisibleChange={handleMoreButtonVisibleChange}
+          />
+        </Wrapper>
+      </FiltersContextProvider>
+    </FiltersWrapper>
+  );
+};

package/src/components/Filters/FiltersBlock.tsx

@@ -1,70 +1,70 @@
-import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
-import React, { useEffect, useState } from 'react';
-import { useFiltersContext } from './FiltersContext';
-
-export const FiltersBlock = () => {
-  const { setElementRef, handleCheckboxToggle, checkboxData } =
-    useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    handleCheckboxToggle(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
-  useEffect(() => {
-    const newData: Record<
-      string,
-      Array<{
-        value: string;
-      }>
-    > = {};
-    Object.keys(checkboxData).map((groupName) => {
-      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
-      if (selectedItems) {
-        newData[groupName] = selectedItems.map((item) => ({
-          value: item,
-        }));
-      }
-    });
-    setSelectedItemsWithValue(newData);
-  }, [checkboxData]);
-
-  return (
-    <>
-      {Object.keys(checkboxData).map((groupName) => {
-        const accordionInfo = checkboxData[groupName];
-        const selectedItems = selectedItemsWithValue[groupName];
-        return (
-          <MultipleDropdown
-            key={accordionInfo.id}
-            showPlaceholder={false}
-            label={accordionInfo.title}
-            ref={(element) => {
-              setElementRef(accordionInfo.id, element);
-            }}
-            onChange={handleOnChange(groupName)}
-            selectedItems={selectedItems}
-            css={{
-              '& + ul': {
-                minWidth: 150,
-              },
-            }}>
-            {Object.keys(accordionInfo.items).map((itemKey) => {
-              const item = accordionInfo.items[itemKey];
-              return (
-                <DropdownOption
-                  key={`${accordionInfo.id}${item.name}`}
-                  value={item.name}
-                  isDisabled={item.isDisabled}>
-                  {item.content.text}
-                </DropdownOption>
-              );
-            })}
-          </MultipleDropdown>
-        );
-      })}
-    </>
-  );
-};
+import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
+import React, { useEffect, useState } from 'react';
+import { useFiltersContext } from './FiltersContext';
+
+export const FiltersBlock = () => {
+  const { setElementRef, handleCheckboxToggle, checkboxData } =
+    useFiltersContext();
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    handleCheckboxToggle(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  useEffect(() => {
+    const newData: Record<
+      string,
+      Array<{
+        value: string;
+      }>
+    > = {};
+    Object.keys(checkboxData).map((groupName) => {
+      const selectedItems = checkboxData[groupName]['selectedItemsDraft'];
+      if (selectedItems) {
+        newData[groupName] = selectedItems.map((item) => ({
+          value: item,
+        }));
+      }
+    });
+    setSelectedItemsWithValue(newData);
+  }, [checkboxData]);
+
+  return (
+    <>
+      {Object.keys(checkboxData).map((groupName) => {
+        const accordionInfo = checkboxData[groupName];
+        const selectedItems = selectedItemsWithValue[groupName];
+        return (
+          <MultipleDropdown
+            key={accordionInfo.id}
+            showPlaceholder={false}
+            label={accordionInfo.title}
+            ref={(element) => {
+              setElementRef(accordionInfo.id, element);
+            }}
+            onChange={handleOnChange(groupName)}
+            selectedItems={selectedItems}
+            css={{
+              '& + ul': {
+                minWidth: 150,
+              },
+            }}>
+            {Object.keys(accordionInfo.items).map((itemKey) => {
+              const item = accordionInfo.items[itemKey];
+              return (
+                <DropdownOption
+                  key={`${accordionInfo.id}${item.name}`}
+                  value={item.name}
+                  isDisabled={item.isDisabled}>
+                  {item.content.text}
+                </DropdownOption>
+              );
+            })}
+          </MultipleDropdown>
+        );
+      })}
+    </>
+  );
+};

package/src/components/Filters/FiltersContext.tsx

@@ -1,41 +1,41 @@
-import { UseTableDataResult } from '@components/TableFilters/hooks/useTableData';
-import { mockData } from '@components/TableFilters/stories/mockData';
-import {
-  BaseSyntheticEvent,
-  createContext,
-  createRef,
-  useContext,
-} from 'react';
-
-export const FiltersContext = createContext<UseTableDataResult>({
-  checkboxData: mockData,
-  selectedItemsByGroup: {},
-  handleCheckboxToggle: (groupName: string, name: string | number) => () => {
-    // no action
-  },
-  onClear: () => {
-    // no action
-  },
-  onReset: () => {
-    // no action
-  },
-  onSubmit: (event?: BaseSyntheticEvent) => {
-    // no action
-  },
-  refsList: [],
-  setElementRef: (groupName: string, element: HTMLElement | null) => {
-    // no action
-  },
-  wrapperRef: createRef(),
-} as UseTableDataResult);
-
-export const useFiltersContext = () => useContext(FiltersContext);
-
-export const FiltersContextProvider = ({
-  children,
-  ...rest
-}: {
-  children: React.ReactNode;
-} & UseTableDataResult) => (
-  <FiltersContext.Provider value={rest}>{children}</FiltersContext.Provider>
-);
+import { UseTableDataResult } from '@components/TableFilters/hooks/useTableData';
+import { mockData } from '@components/TableFilters/stories/mockData';
+import {
+  BaseSyntheticEvent,
+  createContext,
+  createRef,
+  useContext,
+} from 'react';
+
+export const FiltersContext = createContext<UseTableDataResult>({
+  checkboxData: mockData,
+  selectedItemsByGroup: {},
+  handleCheckboxToggle: (groupName: string, name: string | number) => () => {
+    // no action
+  },
+  onClear: () => {
+    // no action
+  },
+  onReset: () => {
+    // no action
+  },
+  onSubmit: (event?: BaseSyntheticEvent) => {
+    // no action
+  },
+  refsList: [],
+  setElementRef: (groupName: string, element: HTMLElement | null) => {
+    // no action
+  },
+  wrapperRef: createRef(),
+} as UseTableDataResult);
+
+export const useFiltersContext = () => useContext(FiltersContext);
+
+export const FiltersContextProvider = ({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+} & UseTableDataResult) => (
+  <FiltersContext.Provider value={rest}>{children}</FiltersContext.Provider>
+);

package/src/components/Filters/FiltersWrapper.tsx

@@ -1,8 +1,15 @@
-import styled from '@emotion/styled';
-
-export const FiltersWrapper = styled.div`
-  width: 300;
-  display: flex;
-  justify-content: right;
-  flex: auto;
-`;
+import styled from '@emotion/styled';
+
+export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
+  width: 300px;
+  display: flex;
+  justify-content: right;
+  flex: auto;
+  flex-direction: ${({ isMoreButtonVisible }) =>
+    isMoreButtonVisible ? 'row' : 'row-reverse'};
+
+  & > div:first-child > div:last-child {
+    margin-right: ${({ isMoreButtonVisible }) =>
+      isMoreButtonVisible ? '10px' : 0};
+  }
+`;