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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.3-alpha",
+  "version": "0.0.5-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/core": "^0.0.3-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.4-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

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

@@ -1,6 +1,6 @@
+import { within, fireEvent } from '@testing-library/dom';
 import { mockIntersectionObserver } from 'jsdom-testing-mocks';
 import { StoryComponent } from './stories/StoryComponent';
-import { within, fireEvent } from '@testing-library/dom';
 
 describe('Filters', () => {
   mockIntersectionObserver();
@@ -30,9 +30,18 @@ describe('Filters', () => {
     const listItemEls = within(listboxEl).getAllByRole('listitem');
     expect(listItemEls.length).toBe(5);
 
+    const logSpy = jest.spyOn(console, 'log');
     await fireEvent.click(listItemEls[0]);
 
     dropdownToggleEl = within(dropdownElement).getByRole('combobox');
     expect(dropdownToggleEl).toHaveTextContent('Strategy: checkbox4Carrot up');
+    expect(logSpy).toHaveBeenCalledWith('>>>Filters onSubmit', {
+      exchange: ['binance'],
+      pairs: ['btcfdusd'],
+      status: ['running'],
+      strategy: ['checkbox4'],
+      strategy2: ['strategy2Checkbox1'],
+      strategy3: [],
+    });
   });
 });

package/src/components/Filters/Filters.tsx

@@ -19,11 +19,12 @@ export const Filters = ({
   handleSubmit,
   handleCancel,
   handleClear,
+  handleDropdownChange,
 }: Pick<UseTableDataResult, 'checkboxData'> & {
   updatedCheckboxData?: TableFilterConfig;
 } & Pick<
     UseTableDataParameters,
-    'handleSubmit' | 'handleCancel' | 'handleClear'
+    'handleSubmit' | 'handleCancel' | 'handleClear' | 'handleDropdownChange'
   >) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [hiddenCheckboxData, setHiddenCheckboxData] =
@@ -38,6 +39,7 @@ export const Filters = ({
     handleSubmit,
     handleCancel,
     handleClear,
+    handleDropdownChange,
   });
 
   const { checkboxData, refsList } = useTableDataResult;

package/src/components/Filters/FiltersBlock.tsx

@@ -1,12 +1,11 @@
-import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
 import React, { useEffect, useState } from 'react';
+import { DropdownOption, MultipleDropdown } from '@ssa-ui-kit/core';
 import { useFiltersContext } from './FiltersContext';
 
 export const FiltersBlock = () => {
-  const { setElementRef, handleCheckboxToggle, checkboxData } =
-    useFiltersContext();
+  const { setElementRef, onDropdownChange, checkboxData } = useFiltersContext();
   const handleOnChange = (groupName: string) => (item: string | number) => {
-    handleCheckboxToggle(groupName, item);
+    onDropdownChange(groupName, item);
   };
 
   const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<

package/src/components/Filters/FiltersContext.tsx

@@ -10,7 +10,10 @@ import {
 export const FiltersContext = createContext<UseTableDataResult>({
   checkboxData: mockData,
   selectedItemsByGroup: {},
-  handleCheckboxToggle: (groupName: string, name: string | number) => () => {
+  onCheckboxToggle: (groupName: string, name: string | number) => () => {
+    // no action
+  },
+  onDropdownChange: (groupName: string, name: string | number) => () => {
     // no action
   },
   onClear: () => {

package/src/components/Filters/FiltersWrapper.tsx

@@ -8,8 +8,11 @@ export const FiltersWrapper = styled.div<{ isMoreButtonVisible?: boolean }>`
   flex-direction: ${({ isMoreButtonVisible }) =>
     isMoreButtonVisible ? 'row' : 'row-reverse'};
 
-  & > div:first-child > div:last-child {
+  & > div:first-of-type > div:last-child {
     margin-right: ${({ isMoreButtonVisible }) =>
       isMoreButtonVisible ? '10px' : 0};
+    ul: {
+      right: ${({ isMoreButtonVisible }) => (isMoreButtonVisible ? 'auto' : 0)};
+    }
   }
 `;

package/src/components/Filters/stories/StoryComponent.tsx

@@ -3,8 +3,9 @@ import { Filters } from '..';
 
 export const StoryComponent = () => {
   const handleSubmit = (submitData: Record<string, string[]>) => {
-    console.log('>>>onSubmit', submitData);
+    console.log('>>>Filters onSubmit', submitData);
   };
+
   return (
     <div
       css={{

package/src/components/TableFilters/TableFilters.spec.tsx

@@ -8,7 +8,8 @@ import { createRef } from 'react';
 
 const mockTableFiltersProps: UseTableDataResult = {
   checkboxData: mockData,
-  handleCheckboxToggle: jest.fn(),
+  onCheckboxToggle: jest.fn(),
+  onDropdownChange: jest.fn(),
   setElementRef: jest.fn(),
   onSubmit: jest.fn((e) => {
     e?.preventDefault();
@@ -27,6 +28,10 @@ const mockTableFiltersProps: UseTableDataResult = {
 describe('TableFilters', () => {
   mockIntersectionObserver();
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('Should be correctly rendered', () => {
     const { getByText, getByRole, queryByText } = render(<StoryComponent />);
 
@@ -126,7 +131,7 @@ describe('TableFilters', () => {
 
     const logSpy = jest.spyOn(console, 'log');
     fireEvent.click(getByText('Apply'));
-    expect(logSpy).toHaveBeenCalledWith('>>>onSubmit', {
+    expect(logSpy).toHaveBeenCalledWith('>>>TableFilters onSubmit', {
       exchange: ['binance'],
       pairs: ['btcfdusd'],
       status: ['running'],

package/src/components/TableFilters/TableFilters.tsx

@@ -38,8 +38,8 @@ export const TableFilters = ({
   onReset,
   onSubmit,
   onClear,
+  onCheckboxToggle,
   handleMoreButtonVisibleChange,
-  handleCheckboxToggle,
 }: TableFiltersView) => {
   const [localCheckboxData, setLocalCheckboxData] =
     useState<TableFilterConfig>(checkboxData);
@@ -87,7 +87,7 @@ export const TableFilters = ({
       name,
     );
     setLocalCheckboxData(assocPath(path, items));
-    handleCheckboxToggle?.(groupName, name);
+    onCheckboxToggle?.(groupName, name);
   };
 
   const handleSubmit = (event: BaseSyntheticEvent) => {

package/src/components/TableFilters/hooks/useTableData.ts

@@ -15,6 +15,11 @@ export interface UseTableDataParameters {
   handleCancel?: () => void;
   handleClear?: () => void;
   handleSubmit?: (data: Record<string, string[]>) => void;
+  handleDropdownChange?: (data: {
+    groupName: string;
+    name: string | number;
+    checked: boolean;
+  }) => void;
 }
 
 export const useTableData = ({
@@ -24,6 +29,7 @@ export const useTableData = ({
   handleCancel,
   handleSubmit,
   handleClear,
+  handleDropdownChange,
 }: UseTableDataParameters) => {
   const [checkboxData, setCheckboxData] = useState<TableFilterConfig>(
     {} as TableFilterConfig,
@@ -64,7 +70,7 @@ export const useTableData = ({
     proceedSettingCheckboxData(updatedCheckboxData);
   }, [updatedCheckboxData]);
 
-  const handleCheckboxToggle = (groupName: string, name: string | number) => {
+  const onCheckboxToggle = (groupName: string, name: string | number) => {
     const { items, path } = getCheckboxChangedItems(
       checkboxData,
       groupName,
@@ -73,6 +79,29 @@ export const useTableData = ({
     setCheckboxData(assocPath(path, items));
   };
 
+  const onDropdownChange = (groupName: string, name: string | number) => {
+    const { items, path } = getCheckboxChangedItems(
+      checkboxData,
+      groupName,
+      name,
+    );
+    const newCheckboxData = assocPath<TableFilterConfig>(
+      path,
+      items,
+    )(checkboxData);
+    handleDropdownChange?.({
+      groupName,
+      name,
+      checked: items.includes(name),
+    });
+
+    const { submitCheckboxData, dataForSubmit } =
+      getSubmitData(newCheckboxData);
+
+    setCheckboxData(submitCheckboxData);
+    handleSubmit?.(dataForSubmit);
+  };
+
   const onSubmit = (event?: BaseSyntheticEvent) => {
     event?.preventDefault();
     const { submitCheckboxData, dataForSubmit } = getSubmitData(checkboxData);
@@ -97,7 +126,8 @@ export const useTableData = ({
     wrapperRef,
     refsList,
     setElementRef,
-    handleCheckboxToggle,
+    onCheckboxToggle,
+    onDropdownChange,
     onSubmit,
     onReset,
     onClear,

package/src/components/TableFilters/stories/StoryComponent.tsx

@@ -1,13 +1,13 @@
+import { useRef } from 'react';
+import { Wrapper } from '@ssa-ui-kit/core';
+import { FiltersContextProvider } from '@components/Filters/FiltersContext';
 import { mockData } from './mockData';
 import { useTableData } from '../hooks/useTableData';
-import { FiltersContextProvider } from '@components/Filters/FiltersContext';
 import { TableFiltersWrapper } from './TableFiltersWrapper';
-import { useRef } from 'react';
-import { Wrapper } from '@ssa-ui-kit/core';
 
 export const StoryComponent = () => {
   const handleSubmit = (submitData: Record<string, string[]>) => {
-    console.log('>>>onSubmit', submitData);
+    console.log('>>>TableFilters onSubmit', submitData);
   };
 
   const wrapperRef = useRef<HTMLDivElement>(null);

package/src/components/TableFilters/types.ts

@@ -28,7 +28,7 @@ export interface TableFiltersView {
   onReset?: () => void;
   onClear?: () => void;
   onSubmit?: () => void;
-  handleCheckboxToggle?: (groupName: string, name: string) => void;
+  onCheckboxToggle?: (groupName: string, name: string) => void;
   handleMoreButtonVisibleChange?: (isVisible: boolean) => void;
   checkboxData?: TableFilterConfig;
 }

package/src/components/UserProfile/UserProfile.spec.tsx

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';
 import { UserProfile } from './UserProfile';
 
 describe('UserProfile', () => {
-  it('Renders with a user name and email values', async () => {
+  it('Renders with a user name and email values via mouse click', async () => {
     const user = userEvent.setup();
     const { getByText, getByTestId } = render(
       <UserProfile
@@ -18,6 +18,22 @@ describe('UserProfile', () => {
     getByText(/Josh@gmail.com/i);
   });
 
+  it('Renders with a user name and email values via mouse hover', async () => {
+    const user = userEvent.setup();
+    const { getByText, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.hover(getByTestId('trigger-button'));
+
+    getByText(/Josh Li/i);
+    getByText(/Josh@gmail.com/i);
+  });
+
   it('Renders with a Log out button', async () => {
     const user = userEvent.setup();
     const { getByRole, getByTestId } = render(

package/src/components/UserProfile/UserProfile.tsx

@@ -27,7 +27,7 @@ export const UserProfile = ({
 }: UserProfileProps) => {
   const theme = useTheme();
   return (
-    <Popover placement="bottom-end">
+    <Popover placement="bottom-end" interactionsEnabled="both">
       <PopoverTrigger css={ResetBtnStyles}>{trigger}</PopoverTrigger>
       <PopoverContent css={ContentWrapper} className={className}>
         <div css={UserInfo}>