From 79e111cc5c4d901e9cf6a7cab87a7baed1cb280f Mon Sep 17 00:00:00 2001
From: Adrien Denat <oi@adriendenat.com>
Date: Thu, 19 Jan 2023 13:34:14 +0000
Subject: [PATCH] fix(react): fix support for custom classNames

---
 packages/simplebar-react/index.tsx            | 29 +++---
 .../tests/__snapshots__/index.test.tsx.snap   | 89 +++++--------------
 2 files changed, 39 insertions(+), 79 deletions(-)

diff --git a/packages/simplebar-react/index.tsx b/packages/simplebar-react/index.tsx
index 6670e015..9d7edb67 100644
--- a/packages/simplebar-react/index.tsx
+++ b/packages/simplebar-react/index.tsx
@@ -54,6 +54,11 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
       }
     });
 
+    const classNames = {
+      ...SimpleBarCore.defaultOptions.classNames,
+      ...options.classNames,
+    };
+
     React.useEffect(() => {
       let instance: SimpleBarCore | null;
       scrollableNodeRef.current = scrollableNodeFullProps.ref
@@ -89,12 +94,12 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
 
     return (
       <div data-simplebar="init" ref={elRef} {...rest}>
-        <div className="simplebar-wrapper">
-          <div className="simplebar-height-auto-observer-wrapper">
-            <div className="simplebar-height-auto-observer" />
+        <div className={classNames.wrapper}>
+          <div className={classNames.heightAutoObserverWrapperEl}>
+            <div className={classNames.heightAutoObserverEl} />
           </div>
-          <div className="simplebar-mask">
-            <div className="simplebar-offset">
+          <div className={classNames.mask}>
+            <div className={classNames.offset}>
               {typeof children === 'function' ? (
                 children({
                   scrollableNodeRef,
@@ -104,24 +109,24 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
                   },
                   contentNodeRef,
                   contentNodeProps: {
-                    className: 'simplebar-content',
+                    className: classNames.contentEl,
                     ref: contentNodeRef,
                   },
                 })
               ) : (
                 <div {...scrollableNodeFullProps}>
-                  <div className="simplebar-content">{children}</div>
+                  <div className={classNames.contentEl}>{children}</div>
                 </div>
               )}
             </div>
           </div>
-          <div className="simplebar-placeholder" />
+          <div className={classNames.placeholder} />
         </div>
-        <div className="simplebar-track simplebar-horizontal">
-          <div className="simplebar-scrollbar" />
+        <div className={`${classNames.track} simplebar-horizontal`}>
+          <div className={classNames.scrollbar} />
         </div>
-        <div className="simplebar-track simplebar-vertical">
-          <div className="simplebar-scrollbar" />
+        <div className={`${classNames.track} simplebar-vertical`}>
+          <div className={classNames.scrollbar} />
         </div>
       </div>
     );
diff --git a/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap b/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap
index 70151665..78428540 100644
--- a/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders with object as option 1`] = `
-<div>
+<div
+  data-simplebar="init"
+>
   <div
     class="custom-class"
   >
@@ -29,69 +31,21 @@ exports[`renders with object as option 1`] = `
           <div
             class="simplebar-content"
           >
-            <div
-              class="simplebar-wrapper"
-              data-simplebar="init"
-            >
-              <div
-                class="simplebar-height-auto-observer-wrapper"
-              >
-                <div
-                  class="simplebar-height-auto-observer"
-                />
-              </div>
-              <div
-                class="simplebar-mask"
-              >
-                <div
-                  class="simplebar-offset"
-                >
-                  <div
-                    aria-label="scrollable content"
-                    class="simplebar-content-wrapper"
-                    role="region"
-                    tabindex="0"
-                  >
-                    <div
-                      class="simplebar-content"
-                    >
-                      <p>
-                        Some content
-                      </p>
-                      <p>
-                        Some content
-                      </p>
-                      <p>
-                        Some content
-                      </p>
-                      <p>
-                        Some content
-                      </p>
-                      <p>
-                        Some content
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="simplebar-placeholder"
-              />
-            </div>
-            <div
-              class="simplebar-track simplebar-horizontal"
-            >
-              <div
-                class="simplebar-scrollbar"
-              />
-            </div>
-            <div
-              class="simplebar-track simplebar-vertical"
-            >
-              <div
-                class="simplebar-scrollbar"
-              />
-            </div>
+            <p>
+              Some content
+            </p>
+            <p>
+              Some content
+            </p>
+            <p>
+              Some content
+            </p>
+            <p>
+              Some content
+            </p>
+            <p>
+              Some content
+            </p>
           </div>
         </div>
       </div>
@@ -125,10 +79,10 @@ exports[`renders with object as option 1`] = `
 exports[`renders with options 1`] = `
 <div
   class="simplebar-scrollable-y"
+  data-simplebar="init"
 >
   <div
     class="simplebar-wrapper"
-    data-simplebar="init"
   >
     <div
       class="simplebar-height-auto-observer-wrapper"
@@ -201,10 +155,11 @@ exports[`renders with options 1`] = `
 
 exports[`renders without crashing 1`] = `
 <div>
-  <div>
+  <div
+    data-simplebar="init"
+  >
     <div
       class="simplebar-wrapper"
-      data-simplebar="init"
     >
       <div
         class="simplebar-height-auto-observer-wrapper"