feat: use class sticky-top instead of react-stickup

Co-authored-by: sabato-galasso <[email protected]>
Co-authored-by: sabato.galasso <[email protected]>

Author: 3 people

package.json

@@ -140,7 +140,6 @@
     "classnames": "^2.3.1",
     "is-number": "^7.0.0",
     "react-bootstrap": "^2.10.6",
-    "react-stickup": "^1.12.1",
     "react-toastify": "^7.0.4",
     "react-transition-group": "^4.4.5",
     "reactstrap": "9.2.2",

src/Header/Headers.tsx

@@ -1,7 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { Sticky, StickyProvider } from 'react-stickup';
-
 export interface HeadersProps extends HTMLAttributes<HTMLElement> {
   /** Aggiunge un ombra per enfatizzare il componente rispetto alla pagina in cui è contenuto */
   shadow?: boolean;
@@ -17,18 +15,11 @@ export const Headers: FC<HeadersProps> = ({ className, shadow = false, sticky =
     'it-header-wrapper',
     {
       'it-shadow': shadow,
-      'it-header-sticky': sticky
+      'it-header-sticky': sticky,
+      'sticky-top': sticky
+
     },
     className
   );
-  if (!sticky) {
-    return <div className={classes} {...attributes} data-testid={testId}></div>;
-  }
-  return (
-    <StickyProvider>
-      <Sticky style={{ position: 'sticky', zIndex: 2 }} data-testid={testId}>
-        <div className={classes} {...attributes}></div>
-      </Sticky>
-    </StickyProvider>
-  );
+  return <div className={classes} {...attributes} data-testid={testId}></div>;
 };

stories/Components/Header/CompleteHeader.stories.tsx

@@ -294,6 +294,9 @@ export const CompleteHeaderStory: Story = {
     theme: {
       control: 'radio',
       options: ['', 'light', 'dark']
+    },
+    sticky: {
+      control: 'boolean'
     }
   }
 };

yarn.lock

@@ -5836,11 +5836,6 @@ mdast-util-to-string@^4.0.0:
   dependencies:
     "@types/mdast" "^4.0.0"
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -6882,13 +6877,6 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-stickup@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/react-stickup/-/react-stickup-1.12.1.tgz#35eed24c21fe9be52b4f56cb9b9830e134eb693f"
-  integrity sha512-YVLPzj/QlxuRLi4IMzCqU0OY9bol8TwPVCoXKpe4uQzOTazqa9s7TiELlBIjEUk+8sxc+cnZQd+7M09l8RrhHw==
-  dependencies:
-    react-viewport-utils "^1.12.1"
-
 react-toastify@^7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-7.0.4.tgz#7d0b743f2b96f65754264ca6eae31911a82378db"
@@ -6906,13 +6894,6 @@ react-transition-group@^4.4.2, react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-viewport-utils@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/react-viewport-utils/-/react-viewport-utils-1.12.1.tgz#7e2cf3f4818f96132d9327c1142a67704cbc5f69"
-  integrity sha512-sjj8rNIKSlzwhVf3mJJJl3Z+34ILFrMxCdP2jmzkAGtwXjdvKm2my9lZMV54oh837bUGx3k6XZlF/988Up3GZg==
-  dependencies:
-    memoize-one "^5.1.1"
-
 "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"