From f1f9aaa9057eb10e7800ea32553e9a7734f9e758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= <patrik.matiasko@gmail.com>
Date: Tue, 30 Apr 2024 09:26:21 +0200
Subject: [PATCH] removed deprecated defaultProps

---
 package.json                                  |  2 +-
 .../Button/__snapshots__/Button.test.tsx.snap | 22 +++++++++++--
 .../__snapshots__/ConfirmModal.test.tsx.snap  |  2 +-
 .../Atomic/ContentMenu/ContentMenu.styles.ts  |  5 ++-
 .../Atomic/ContentMenu/ContentMenu.test.tsx   | 12 ++++---
 .../Atomic/ContentMenu/ContentMenu.tsx        | 25 +++++++++++----
 .../__snapshots__/ContentMenu.test.tsx.snap   | 11 +++----
 .../Icon/__snapshots__/Icon.test.tsx.snap     |  5 +++
 .../Modal/__snapshots__/Modal.test.tsx.snap   |  2 +-
 .../__snapshots__/SplitButton.test.tsx.snap   | 32 ++++++++++++++-----
 src/components/Atomic/TreeTable/TreeTable.tsx | 14 ++++++--
 11 files changed, 96 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index eb1bf7f2..555b8dcb 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "test": "jest -c ./config/jest.config.js",
-    "test:watch": "jest -c ./config/jest.config.js --watchAll",
+    "test:uwatch": "jest -c ./config/jest.config.js --watchAll",
     "build": "npm-run-all prebuild build:legacy build:modern build:node build:stable build:copy-files",
     "build:legacy": "node ./scripts/build legacy",
     "build:modern": "node ./scripts/build modern",
diff --git a/src/components/Atomic/Button/__snapshots__/Button.test.tsx.snap b/src/components/Atomic/Button/__snapshots__/Button.test.tsx.snap
index 0a6d41b0..3b34d249 100644
--- a/src/components/Atomic/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Atomic/Button/__snapshots__/Button.test.tsx.snap
@@ -157,6 +157,24 @@ exports[`<Button> render correctly - loading 1`] = `
   margin-right: 8px;
 }
 
+.emotion-21 {
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  display: block;
+  -webkit-animation: 0.75s linear 0s infinite normal both running animation-0;
+  animation: 0.75s linear 0s infinite normal both running animation-0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: 8px;
+}
+
 <div>
     <button
       class="emotion-0"
@@ -332,7 +350,7 @@ exports[`<Button> render correctly - loading 1`] = `
           class="emotion-2"
         >
           <span
-            class="emotion-3"
+            class="emotion-21"
           >
             <svg
               fill="none"
@@ -354,7 +372,7 @@ exports[`<Button> render correctly - loading 1`] = `
           class="emotion-4"
         >
           <span
-            class="emotion-3"
+            class="emotion-21"
           >
             <svg
               fill="none"
diff --git a/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
index e6b78b2b..a066e052 100644
--- a/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
+++ b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`<ConfirmModal> renders without crashing 1`] = `
     <div
       class="emotion-1"
       role="dialog"
-      style="opacity: 1; transform: translateY(0) translateZ(0);"
+      style="opacity: 1; transform: none;"
     >
       <div
         class="emotion-2"
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.styles.ts b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts
index 0f5c0ee4..8b875298 100644
--- a/src/components/Atomic/ContentMenu/ContentMenu.styles.ts
+++ b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts
@@ -139,9 +139,9 @@ export const activeArrow = css`
 `
 
 export const subItems = css`
-    max-height: 0;
+    // max-height: 0;
     overflow: hidden;
-    transition: all 0.45s;
+    //transition: all 0.45s;
 `
 
 export const subItemsList = css`
@@ -155,7 +155,6 @@ export const subItemLink = (theme: ThemeType) => css`
     position: relative;
     padding: 8px 8px 8px 20px;
     white-space: nowrap;
-    margin: 4px 0 4px 0;
     color: ${get(theme, `ContentMenu.subItem.color`)};
 
     &:hover {
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.test.tsx b/src/components/Atomic/ContentMenu/ContentMenu.test.tsx
index 9b2ae7bd..0b587d12 100644
--- a/src/components/Atomic/ContentMenu/ContentMenu.test.tsx
+++ b/src/components/Atomic/ContentMenu/ContentMenu.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import ContentMenu from './ContentMenu'
 
 describe('<ContentMenu>', () => {
@@ -53,10 +53,14 @@ describe('<ContentMenu>', () => {
         expect(mockHandleSubItemClick).not.toHaveBeenCalled()
     })
 
-    it('filters menu items based on search input', () => {
+    it('filters menu items based on search input', async () => {
+        window.scrollTo = jest.fn()
         const { getByText, getByRole } = render(<ContentMenu {...defaultProps} menuSearch />)
         fireEvent.change(getByRole('search'), { target: { value: 'Item 2' } })
-        expect(getByText('Item 2')).toBeInTheDocument()
-        expect(() => getByText('Item 1')).toThrow()
+
+        await waitFor(() => {
+            expect(getByText('Item 2')).toBeInTheDocument()
+            expect(() => getByText('Item 1')).toThrow()
+        })
     })
 })
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.tsx b/src/components/Atomic/ContentMenu/ContentMenu.tsx
index 0f2ba234..114ff9f7 100644
--- a/src/components/Atomic/ContentMenu/ContentMenu.tsx
+++ b/src/components/Atomic/ContentMenu/ContentMenu.tsx
@@ -1,5 +1,5 @@
 import React, { cloneElement, FC, ReactElement, useEffect, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
+import { AnimatePresence, motion } from 'framer-motion'
 import isFunction from 'lodash/isFunction'
 
 import * as styles from './ContentMenu.styles'
@@ -74,9 +74,20 @@ const ContentMenu: FC<Props> = (props) => {
                                     </span>
                                 )}
                             </a>
-                            {item.children && isItemActive && (
-                                <CSSTransition appear={true} classNames='item' in={isItemActive} key={item.id} timeout={0}>
-                                    <div css={styles.subItems}>
+                            <AnimatePresence initial={false}>
+                                {item.children && isItemActive && (
+                                    <motion.section
+                                        animate='open'
+                                        css={styles.subItems}
+                                        exit='collapsed'
+                                        initial='collapsed'
+                                        key='content'
+                                        transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }}
+                                        variants={{
+                                            open: { opacity: 1, height: 'auto' },
+                                            collapsed: { opacity: 0, height: 0 },
+                                        }}
+                                    >
                                         <ul css={styles.subItemsList}>
                                             {item.children?.map((subItem, key) => (
                                                 <li key={key}>
@@ -97,9 +108,9 @@ const ContentMenu: FC<Props> = (props) => {
                                                 </li>
                                             ))}
                                         </ul>
-                                    </div>
-                                </CSSTransition>
-                            )}
+                                    </motion.section>
+                                )}
+                            </AnimatePresence>
                         </li>
                     )
                 })}
diff --git a/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap b/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap
index c1ee1975..37592901 100644
--- a/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap
+++ b/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap
@@ -111,10 +111,7 @@ exports[`<ContentMenu> renders without crashing 1`] = `
 }
 
 .emotion-5 {
-  max-height: 0;
   overflow: hidden;
-  -webkit-transition: all 0.45s;
-  transition: all 0.45s;
 }
 
 .emotion-6 {
@@ -128,7 +125,6 @@ exports[`<ContentMenu> renders without crashing 1`] = `
   position: relative;
   padding: 8px 8px 8px 20px;
   white-space: nowrap;
-  margin: 4px 0 4px 0;
 }
 
 .emotion-8 {
@@ -203,8 +199,9 @@ exports[`<ContentMenu> renders without crashing 1`] = `
             </svg>
           </span>
         </a>
-        <div
-          class="emotion-5 item-appear item-appear-active"
+        <section
+          class="emotion-5"
+          style="opacity: 1; height: auto;"
         >
           <ul
             class="emotion-6"
@@ -223,7 +220,7 @@ exports[`<ContentMenu> renders without crashing 1`] = `
               </a>
             </li>
           </ul>
-        </div>
+        </section>
       </li>
       <li>
         <a
diff --git a/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap
index ab581e3f..a2b34704 100644
--- a/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/src/components/Atomic/Icon/__snapshots__/Icon.test.tsx.snap
@@ -308,6 +308,11 @@ exports[`<Icon> render correctly - snapshot 1`] = `
       data-icon=""
       style="width: 16px; height: 16px;"
     />
+    <div
+      class="emotion-0"
+      data-icon=""
+      style="width: 16px; height: 16px;"
+    />
   </div>
 </DocumentFragment>
 `;
diff --git a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
index bb3ca387..5177b8b5 100644
--- a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`<Modal> render correctly - snapshot 1`] = `
       <div
         class="emotion-1"
         role="dialog"
-        style="opacity: 1; transform: translateY(0) translateZ(0);"
+        style="opacity: 1; transform: none;"
       >
         <div
           class="emotion-2"
diff --git a/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap b/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
index 04fd418c..5ed5c562 100644
--- a/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
+++ b/src/components/Atomic/SplitButton/__snapshots__/SplitButton.test.tsx.snap
@@ -235,7 +235,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -268,7 +270,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -301,7 +305,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -334,7 +340,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -383,7 +391,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -432,7 +442,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -482,7 +494,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
@@ -532,7 +546,9 @@ exports[`<SimpleStripTable> render correctly - snapshot 1`] = `
           tabindex="1"
           type="submit"
         >
-          <div>
+          <div
+            style="transform: none;"
+          >
             <svg
               fill="none"
               height="16"
diff --git a/src/components/Atomic/TreeTable/TreeTable.tsx b/src/components/Atomic/TreeTable/TreeTable.tsx
index 8c2f7a21..a8330854 100644
--- a/src/components/Atomic/TreeTable/TreeTable.tsx
+++ b/src/components/Atomic/TreeTable/TreeTable.tsx
@@ -75,12 +75,13 @@ const TreeTable: FC<Props> = (props) => {
                 <table {...getTableProps()} className={className} css={styles.table}>
                     <thead>
                         {headerGroups.map((headerGroup: any) => (
-                            <tr {...headerGroup.getHeaderGroupProps()}>
+                            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key}>
                                 {headerGroup.headers.map((column: any, key: number) => (
                                     <th
                                         {...column.getHeaderProps(column.getSortByToggleProps())}
                                         className={classNames(column.getHeaderProps(column.getSortByToggleProps()).className, column.className)}
                                         css={tableStyles.headerTh}
+                                        key={column.getHeaderProps(column.getSortByToggleProps()).key}
                                         style={{
                                             ...column.getHeaderProps().style,
                                             ...column.style,
@@ -122,9 +123,10 @@ const TreeTable: FC<Props> = (props) => {
                         {rows.map((row: any, key: number) => {
                             prepareRow(row)
                             const _isLastFromExpanded = isLastFromExpanded(row)
+                            const rowProps = row.getRowProps(getRowProps!(row))
 
                             return (
-                                <tr {...row.getRowProps(getRowProps!(row))} css={[tableStyles.row, styles.row]}>
+                                <tr {...rowProps} css={[tableStyles.row, styles.row]} key={rowProps.key}>
                                     {row.cells.map((cell: any, cellKey: number) => (
                                         <td
                                             {...cell.getCellProps([
@@ -134,6 +136,14 @@ const TreeTable: FC<Props> = (props) => {
                                                 },
                                             ])}
                                             data-row={row.id}
+                                            key={
+                                                cell.getCellProps([
+                                                    {
+                                                        className: cell.column.className,
+                                                        style: cell.column.style,
+                                                    },
+                                                ]).key
+                                            }
                                         >
                                             <Cell
                                                 css={(theme) => [