AlphadayHQ · elcharitas · Nov 13, 2023 · Nov 10, 2023 · Nov 10, 2023 · Nov 13, 2023
diff --git a/packages/frontend/src/components/calendar/CalendarList.tsx b/packages/frontend/src/components/calendar/CalendarList.tsx
@@ -30,58 +30,58 @@ const CalendarList: FC<ICalendarBaseProps> = ({
     isLoadingEvents,
 }) => {
     const scrollRef = useRef<HTMLElement>();
-
-    const noEvents = events === undefined || events?.length === 0;
     const noEventsMsg = isLoadingEvents ? "" : calendarMessages.noEvents;
 
     return (
-        <span
+        <div
             className={`border-none block min-h-[50px] relative ${
                 showFullSize ? "calendar-list-full-size-wrap" : ""
             }`}
             style={
                 !showFullSize ? { height: widgetHeight ?? WIDGET_HEIGHT } : {}
             }
         >
+            {!showFullSize && (
+                <div
+                    className="flex absolute top-3 left-[10px] single-col:left-4 two-col:left-5"
+                    style={{
+                        zIndex: Z_INDEX_REGISTRY.CALENDAR_LIST_SWITCH,
+                    }}
+                >
+                    <Switch
+                        options={["Calendar", "List"]}
+                        onChange={switchCalendarType}
+                        checked={calendarType === ECalendarType.List}
+                    />
+                </div>
+            )}
             <ScrollBar
                 containerRef={(el) => {
                     scrollRef.current = el;
                 }}
-                className="relative"
+                style={
+                    !showFullSize
+                        ? { height: widgetHeight ?? WIDGET_HEIGHT }
+                        : {}
+                }
             >
-                <div className={noEvents ? "mb-0" : "mb-5"}>
-                    {!showFullSize && (
-                        <div
-                            className="flex absolute top-3 left-[10px] single-col:left-4 two-col:left-5"
-                            style={{
-                                zIndex: Z_INDEX_REGISTRY.CALENDAR_LIST_SWITCH,
-                            }}
-                        >
-                            <Switch
-                                options={["Calendar", "List"]}
-                                onChange={switchCalendarType}
-                                checked={calendarType === ECalendarType.List}
-                            />
-                        </div>
-                    )}
-                    <CalList
-                        eventClickHandler={(e: EventClickArg) =>
-                            eventClickHandler(e, events, onClickEvent)
-                        }
-                        handleHeaderTooltips={handleHeaderTooltips}
-                        noEventsMsg={noEventsMsg}
-                        getEventCategoryByColor={getEventCategoryByColor}
-                        events={events}
-                        onDatesSet={onDatesSet}
-                        selectedEventDetails={selectedEventDetails}
-                        catFilters={catFilters}
-                        showFullSize={showFullSize}
-                        selectedDate={selectedDate}
-                        widgetHash={widgetHash}
-                    />
-                </div>
+                <CalList
+                    eventClickHandler={(e: EventClickArg) =>
+                        eventClickHandler(e, events, onClickEvent)
+                    }
+                    handleHeaderTooltips={handleHeaderTooltips}
+                    noEventsMsg={noEventsMsg}
+                    getEventCategoryByColor={getEventCategoryByColor}
+                    events={events}
+                    onDatesSet={onDatesSet}
+                    selectedEventDetails={selectedEventDetails}
+                    catFilters={catFilters}
+                    showFullSize={showFullSize}
+                    selectedDate={selectedDate}
+                    widgetHash={widgetHash}
+                />
             </ScrollBar>
-        </span>
+        </div>
     );
 };
 

diff --git a/packages/frontend/src/components/calendar/CalendarModule.tsx b/packages/frontend/src/components/calendar/CalendarModule.tsx
@@ -140,7 +140,7 @@ const CalendarModule: FC<ICalendarBaseProps> = ({
         );
     };
 
-    return <span id={`cal-${widgetHash}`}>{renderCalendar()}</span>;
+    return <div id={`cal-${widgetHash}`}>{renderCalendar()}</div>;
 };
 
 export default CalendarModule;
diff --git a/packages/frontend/src/components/widget-library/WidgetLibrary.module.scss b/packages/frontend/src/components/widget-library/WidgetLibrary.module.scss
diff --git a/packages/frontend/src/components/widget-library/WidgetLibrary.tsx b/packages/frontend/src/components/widget-library/WidgetLibrary.tsx
diff --git a/packages/ui-kit/index.ts b/packages/ui-kit/index.ts
@@ -44,6 +44,7 @@ import {
     DropdownItem,
     DropdownMenu,
 } from "./src/components/dropdown/dropdown";
+import { FadeIn } from "./src/components/fade-in-out/FadeIn";
 import { Input } from "./src/components/input/Input";
 import Footer from "./src/components/layout/Footer";
 import {
@@ -65,7 +66,6 @@ import { Modal } from "./src/components/modal/Modal";
 import { ModulePreview } from "./src/components/module-preview/ModulePreview";
 import { ModuleLoader } from "./src/components/moduleLoader/ModuleLoader";
 import { Overlay } from "./src/components/overlay/Overlay";
-import { FadeIn } from "./src/components/fade-in-out/FadeIn";
 import { ScrollBar } from "./src/components/scrollbar/ScrollBar";
 import { SearchBar } from "./src/components/search/Searchbar";
 import { ChannelSkeleton } from "./src/components/skeletons/ChannelSkeleton";

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -26,7 +26,6 @@
     "react-laag": "2.0.5",
     "react-loading-skeleton": "3.3.1",
     "react-markdown": "8.0.7",
-    "react-perfect-scrollbar": "1.5.8",
     "react-quick-pinch-zoom": "4.9.0",
     "react-router-dom": "5.3.4",
     "react-select": "5.7.0",
@@ -40,9 +39,10 @@
     "postcss": "8.4.25",
     "prettier-plugin-tailwindcss": "0.4.1",
     "sass": "1.63.6",
+    "tailwind-scrollbar": "3.0.5",
     "tailwindcss": "3.3.2",
     "tailwindcss-theme-swapper": "0.7.3",
     "tw-colors": "1.2.6",
     "vite-plugin-svgr": "3.2.0"
   }
-}
+}
diff --git a/packages/ui-kit/src/components/listItem/ListItem.tsx b/packages/ui-kit/src/components/listItem/ListItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import { FC } from "react";
 import { ReactComponent as PauseSVG } from "src/assets/svg/pause.svg";
 import { ReactComponent as PlaySVG } from "src/assets/svg/play2.svg";
@@ -195,7 +194,7 @@ export const ListItem: FC<IList> = ({
 
         return (
             <>
-                <li
+                <div
                     role="button"
                     tabIndex={0}
                     onClick={onClick}
@@ -247,7 +246,7 @@ export const ListItem: FC<IList> = ({
                             className="self-center"
                         />
                     </p>
-                </li>
+                </div>
                 <HRElement />
             </>
         );
@@ -256,7 +255,7 @@ export const ListItem: FC<IList> = ({
         const variantStyle = listItemVariants("video");
         return (
             <>
-                <li
+                <div
                     role="button"
                     tabIndex={0}
                     onClick={onClick}
@@ -289,7 +288,7 @@ export const ListItem: FC<IList> = ({
                             />
                         </p>
                     </div>
-                </li>
+                </div>
                 <HRElement />
             </>
         );

diff --git a/packages/ui-kit/src/components/moduleLoader/ModuleLoader.tsx b/packages/ui-kit/src/components/moduleLoader/ModuleLoader.tsx
@@ -14,7 +14,7 @@ export const ModuleLoader: FC<IModuleLoaderProps> = ({
 }) => (
     <div
         className={twMerge(
-            "`flex h-full w-full items-center justify-center",
+            "h-full w-full items-center justify-center",
             collapse ? "hidden" : "flex"
         )}
         style={{

diff --git a/packages/ui-kit/src/components/scrollbar/ScrollBar.tsx b/packages/ui-kit/src/components/scrollbar/ScrollBar.tsx
@@ -1,25 +1,47 @@
-import { FC } from "react";
-import PerfectScrollbar, { ScrollBarProps } from "react-perfect-scrollbar";
-import "react-perfect-scrollbar/dist/css/styles.css";
+import { FC, HTMLProps } from "react";
 import { twMerge } from "tailwind-merge";
 
+export interface ScrollBarProps extends HTMLProps<HTMLDivElement> {
+    /**
+     * get the container ref
+     */
+    containerRef?: (container: HTMLElement) => void;
+
+    /**
+     * fires when the y-axis reaches the end of the scroll container.
+     */
+    onYReachEnd?: (container: HTMLElement) => void;
+}
+
 export const ScrollBar: FC<ScrollBarProps> = ({
     children,
     onScroll,
     containerRef,
     onYReachEnd,
     className,
+    style,
     ...rest
 }) => {
     return (
-        <PerfectScrollbar
-            className={twMerge(`unique-widget-scrollbar`, className)}
-            containerRef={containerRef}
-            onYReachEnd={onYReachEnd}
-            onScroll={onScroll}
+        <div
+            ref={(ref) => ref && containerRef?.(ref)}
+            className={twMerge(
+                "overflow-hidden hover:overflow-y-auto scrollbar-track-backgroundVariant1800 scrollbar-thumb-primaryVariant800 scrollbar scrollbar-w-[5px] overscroll-contain h-full",
+                className
+            )}
+            style={{ scrollbarGutter: "stable", ...style }}
+            onScroll={(e) => {
+                if (
+                    e.currentTarget.scrollTop + e.currentTarget.clientHeight ===
+                    e.currentTarget.scrollHeight
+                ) {
+                    onYReachEnd?.(e.currentTarget);
+                }
+                onScroll?.(e);
+            }}
             {...rest}
         >
             {children}
-        </PerfectScrollbar>
+        </div>
     );
 };
diff --git a/packages/ui-kit/src/components/tooltip/CalendarTooltip.tsx b/packages/ui-kit/src/components/tooltip/CalendarTooltip.tsx
@@ -1,8 +1,8 @@
 import { FC, RefObject } from "react";
 import moment from "moment";
 import { createPortal } from "react-dom";
-import ScrollBar from "react-perfect-scrollbar";
 import { TDatePos, TEvent, TEventCategory } from "../calendar/event";
+import { ScrollBar } from "../scrollbar/ScrollBar";
 
 export interface ITooltipProps {
     disabled?: boolean;

diff --git a/packages/ui-kit/src/globalStyles/custom.scss b/packages/ui-kit/src/globalStyles/custom.scss
@@ -1,8 +1,5 @@
 // file for all css styles not found in tailwind's library
 
-/* custom css for scrollbars */
-@import "./scrollbar.scss";
-
 /* custom css for charts */
 @import "./charts.scss";
 

diff --git a/packages/ui-kit/src/globalStyles/scrollbar.scss b/packages/ui-kit/src/globalStyles/scrollbar.scss
diff --git a/packages/ui-kit/tailwind.config.js b/packages/ui-kit/tailwind.config.js
@@ -4,6 +4,7 @@ import { tailwindBreakpoints } from "./src/globalStyles/breakpoints";
 import typography from "@tailwindcss/typography";
 import plugin from "tailwindcss/plugin";
 import themeSwapper from "tailwindcss-theme-swapper";
+import tailwindScrollbar from "tailwind-scrollbar";
 import { fontUtilities } from "./src/globalStyles/fontGroups";
 
 export default {
@@ -31,5 +32,6 @@ export default {
                 ...fontUtilities,
             });
         }),
+        tailwindScrollbar({ nocompatible: true }),
     ],
 };