@ssa-ui-kit/core 1.0.16 → 1.0.17

package/dist/styles/safari-focus-outline.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme, SerializedStyles } from '@emotion/react';
 type OutlineFn = (theme: Theme, color?: keyof Theme['colors'], borderRadius?: string, borderStyle?: React.CSSProperties['borderStyle']) => SerializedStyles;
 export declare const focusOutline: OutlineFn;

package/dist/types/emotion.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type RGBString = `rgb${string}`;
 type MakeColors<T extends Array<string>> = {
     [K in T[number]]?: RGBString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
     "@nivo/line": "0.83.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.48.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.6",
     "@types/uuid": "^9.0.3",
@@ -69,6 +69,7 @@
   "scripts": {
     "test": "jest -i --no-cache",
     "build": "webpack --mode=production --node-env=production && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
+    "build:watch": "webpack --mode=production --node-env=production --watch && tsc --build --force ./tsconfig.build.json && resolve-tspaths -p ./tsconfig.build.json",
     "sb:dev": "storybook dev -p 6006",
     "sb:build": "storybook build",
     "test:e2e": "pnpm exec playwright test --project=chromium",

package/src/components/Filters/FiltersBlock.tsx

@@ -1,42 +1,17 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTheme } from '@emotion/react';
 import DropdownOption from '@components/DropdownOption';
 import MultipleDropdown from '@components/MultipleDropdown';
 import { useFiltersContext } from './FiltersContext';
+import { useFiltersBlock } from './hooks/useFiltersBlock';
 
 export const FiltersBlock = () => {
-  const { setElementRef, onDropdownChange, checkboxData } = useFiltersContext();
-  const handleOnChange = (groupName: string) => (item: string | number) => {
-    onDropdownChange(groupName, item);
-  };
-
-  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
-    Record<string, Array<{ value: string }>>
-  >({});
-
   const theme = useTheme();
-
-  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]);
+  const { setElementRef, checkboxData } = useFiltersContext();
+  const { selectedItemsWithValue, handleOnChange } = useFiltersBlock();
 
   return (
-    <>
+    <React.Fragment>
       {Object.keys(checkboxData).map((groupName) => {
         const accordionInfo = checkboxData[groupName];
         const selectedItems = selectedItemsWithValue[groupName];
@@ -74,6 +49,6 @@ export const FiltersBlock = () => {
           </MultipleDropdown>
         );
       })}
-    </>
+    </React.Fragment>
   );
 };

package/src/components/Filters/hooks/useFiltersBlock.ts

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFiltersContext } from '../FiltersContext';
+
+export const useFiltersBlock = () => {
+  const { onDropdownChange, checkboxData } = useFiltersContext();
+
+  const handleOnChange = (groupName: string) => (item: string | number) => {
+    onDropdownChange(groupName, item);
+  };
+
+  const [selectedItemsWithValue, setSelectedItemsWithValue] = useState<
+    Record<string, Array<{ value: string }>>
+  >({});
+
+  const memoSelectedItemsWithValue = useMemo(
+    () => selectedItemsWithValue,
+    [JSON.stringify(selectedItemsWithValue)],
+  );
+
+  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 { selectedItemsWithValue: memoSelectedItemsWithValue, handleOnChange };
+};

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}