gbs-add-block 1.2.4 → 1.2.6

package/source/components/modal/index.tsx

@@ -1,140 +1,152 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useEffect, useCallback, memo, useRef } from "react";
-import { twMerge } from "tailwind-merge";
-import Icon from "../icon/Icon";
-import { x } from "../icon/iconPaths";
-import type { ModalProps } from "./types";
-
-const defaultClasses = {
-  modal:
-    "fixed z-50 overflow-y-auto inset-0 flex items-center justify-center bg-[#2b2426bd]",
-  modalContent: "bg-white m-10 md:w-[80vh] rounded-xl relative",
-  modalTitle:
-    "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between items-center",
-  closeButton:
-    "absolute top-2 right-2 p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-300",
-  closeIcon: "h-5 w-5 stroke-gray-500 fill-none",
-};
-
-export const Modal = memo(
-  ({
-    showModal = false,
-    setShowModal,
-    modalTitle = "Modal Title",
-    modalClass = defaultClasses.modal,
-    modalContentClass = defaultClasses.modalContent,
-    classModalContent = "",
-    modalTitleClass = defaultClasses.modalTitle,
-    classModalTitle = "",
-    children,
-    showCloseButton = false,
-    dismissible = false,
-    titleId = "modal-title",
-    closeButtonContent,
-    animationDuration = 200,
-    showTitle = true,
-  }: ModalProps) => {
-    const modalRef = useRef<HTMLDivElement>(null);
-    const previousActiveElement = useRef<HTMLElement | null>(null);
-
-    // Handle ESC key press to close modal
-    const handleEscKey = useCallback(
-      (event: KeyboardEvent) => {
-        if (event.key === "Escape" && showModal && dismissible) {
-          setShowModal(false);
-        }
-      },
-      [showModal, dismissible, setShowModal]
-    );
-
-    // Handle click outside modal to close
-    const handleOutsideClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.target === e.currentTarget && dismissible) {
-          setShowModal(false);
-        }
-      },
-      [dismissible, setShowModal]
-    );
-
-    // Handle close button click
-    const handleClose = useCallback(() => {
-      setShowModal(false);
-    }, [setShowModal]);
-
-    // Manage focus trap and keyboard events
-    useEffect(() => {
-      if (showModal) {
-        previousActiveElement.current = document.activeElement as HTMLElement;
-        document.addEventListener("keydown", handleEscKey);
-        document.body.style.overflow = "hidden";
-        modalRef.current?.focus();
-      } else {
-        document.removeEventListener("keydown", handleEscKey);
-        document.body.style.overflow = "";
-        previousActiveElement.current?.focus();
-      }
-
-      return () => {
-        document.removeEventListener("keydown", handleEscKey);
-        document.body.style.overflow = "";
-      };
-    }, [showModal, handleEscKey]);
-
-    // Animation styles
-    const modalStyles: React.CSSProperties = {
-      transition: `opacity ${animationDuration}ms ease-in-out`,
-      opacity: showModal ? 1 : 0,
-      visibility: showModal ? "visible" : "hidden",
-    };
-
-    if (!showModal) {
-      return null;
-    }
-
-    return (
-      <div
-        className={modalClass}
-        aria-labelledby={titleId}
-        role="dialog"
-        aria-modal="true"
-        onClick={handleOutsideClick}
-        style={modalStyles}
-      >
-        <div
-          ref={modalRef}
-          className={twMerge(modalContentClass, classModalContent)}
-          onClick={(e: React.MouseEvent) => e.stopPropagation()}
-          role="document"
-          tabIndex={-1}
-        >
-          <div className={twMerge(modalTitleClass, classModalTitle)}>
-            {showTitle && <h2 id={titleId}>{modalTitle}</h2>}
-            {showCloseButton && (
-              <button
-                onClick={handleClose}
-                className={defaultClasses.closeButton}
-                aria-label="Close modal"
-                type="button"
-              >
-                {closeButtonContent || (
-                  <Icon elements={x} svgClass={defaultClasses.closeIcon} />
-                )}
-              </button>
-            )}
-          </div>
-          {showTitle && <hr className="border-gray-200" />}
-          <div className="p-4">{children}</div>
-        </div>
-      </div>
-    );
-  }
-);
-
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useCallback, memo, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { x } from "../icon/iconPaths";
+import type { ModalProps } from "./types";
+
+const defaultClasses = {
+  modal:
+    "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-slate-950/55 p-4 backdrop-blur-sm",
+  modalContent:
+    "relative max-h-[90vh] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl shadow-slate-950/20 dark:border-slate-700 dark:bg-slate-950",
+  modalTitle:
+    "flex items-center justify-between gap-4 px-5 py-4 text-base font-semibold text-slate-950 dark:text-slate-50",
+  closeButton:
+    "absolute right-3 top-3 rounded-md p-2 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:hover:bg-slate-800 dark:hover:text-white",
+  closeIcon: "h-5 w-5 stroke-current fill-none",
+};
+
+const sizeClasses = {
+  sm: "w-full max-w-sm",
+  md: "w-full max-w-lg",
+  lg: "w-full max-w-2xl",
+  xl: "w-full max-w-4xl",
+};
+
+export const Modal = memo(
+  ({
+    showModal = false,
+    setShowModal,
+    modalTitle = "Modal Title",
+    modalClass = defaultClasses.modal,
+    modalContentClass = defaultClasses.modalContent,
+    classModalContent = "",
+    modalTitleClass = defaultClasses.modalTitle,
+    classModalTitle = "",
+    className = "",
+    size = "md",
+    children,
+    showCloseButton = false,
+    dismissible = false,
+    titleId = "modal-title",
+    closeButtonContent,
+    animationDuration = 200,
+    showTitle = true,
+  }: ModalProps) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const previousActiveElement = useRef<HTMLElement | null>(null);
+
+    const handleEscKey = useCallback(
+      (event: KeyboardEvent) => {
+        if (event.key === "Escape" && showModal && dismissible) {
+          setShowModal(false);
+        }
+      },
+      [showModal, dismissible, setShowModal]
+    );
+
+    const handleOutsideClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget && dismissible) {
+          setShowModal(false);
+        }
+      },
+      [dismissible, setShowModal]
+    );
+
+    const handleClose = useCallback(() => {
+      setShowModal(false);
+    }, [setShowModal]);
+
+    useEffect(() => {
+      if (showModal) {
+        previousActiveElement.current = document.activeElement as HTMLElement;
+        document.addEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "hidden";
+        modalRef.current?.focus();
+      } else {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+        previousActiveElement.current?.focus();
+      }
+
+      return () => {
+        document.removeEventListener("keydown", handleEscKey);
+        document.body.style.overflow = "";
+      };
+    }, [showModal, handleEscKey]);
+
+    const modalStyles: React.CSSProperties = {
+      transition: `opacity ${animationDuration}ms ease-in-out`,
+      opacity: showModal ? 1 : 0,
+      visibility: showModal ? "visible" : "hidden",
+    };
+
+    if (!showModal) {
+      return null;
+    }
+
+    return (
+      <div
+        className={modalClass}
+        aria-labelledby={titleId}
+        role="dialog"
+        aria-modal="true"
+        onClick={handleOutsideClick}
+        style={modalStyles}
+      >
+        <div
+          ref={modalRef}
+          className={twMerge(
+            modalContentClass,
+            sizeClasses[size],
+            className,
+            classModalContent
+          )}
+          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+          role="document"
+          tabIndex={-1}
+        >
+          <div className={twMerge(modalTitleClass, classModalTitle)}>
+            {showTitle && <h2 id={titleId}>{modalTitle}</h2>}
+            {showCloseButton && (
+              <button
+                onClick={handleClose}
+                className={defaultClasses.closeButton}
+                aria-label="Close modal"
+                type="button"
+              >
+                {closeButtonContent || (
+                  <Icon elements={x} svgClass={defaultClasses.closeIcon} />
+                )}
+              </button>
+            )}
+          </div>
+          {showTitle && <hr className="border-slate-200 dark:border-slate-700" />}
+          <div className="max-h-[calc(90vh-73px)] overflow-y-auto p-5 text-sm text-slate-700 dark:text-slate-200">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
 Modal.displayName = "Modal";

package/source/components/modal/types.ts

@@ -1,17 +1,19 @@
-export type ModalProps = {
-  showModal?: boolean;
-  setShowModal: (show: boolean) => void;
-  modalTitle?: string;
-  modalClass?: string;
-  modalContentClass?: string;
-  classModalContent?: string;
-  modalTitleClass?: string;
-  classModalTitle?: string;
-  children: React.ReactNode;
-  showCloseButton?: boolean;
-  dismissible?: boolean;
-  titleId?: string;
-  closeButtonContent?: React.ReactNode;
-  animationDuration?: number;
-  showTitle?: boolean;
+export type ModalProps = {
+  showModal?: boolean;
+  setShowModal: (show: boolean) => void;
+  modalTitle?: string;
+  modalClass?: string;
+  modalContentClass?: string;
+  classModalContent?: string;
+  modalTitleClass?: string;
+  classModalTitle?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl";
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  dismissible?: boolean;
+  titleId?: string;
+  closeButtonContent?: React.ReactNode;
+  animationDuration?: number;
+  showTitle?: boolean;
 };

package/source/components/multiselect/PortalDropDown.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { popUp } from "../globalStyle";
+import { popUp } from "../../globalStyle";
 
 export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
@@ -41,3 +41,4 @@ export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
     document.body
   );
 };
+

package/source/components/multiselect/index.tsx

@@ -21,8 +21,8 @@ import {
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
-import { iconClass, primary } from "../globalStyle";
-import { selectStyle } from "../globalStyle";
+import { iconClass, primary } from "../../globalStyle";
+import { selectStyle } from "../../globalStyle";
 import { PortalDropdown } from "./PortalDropDown";
 
 const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
@@ -266,3 +266,4 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
 
 const MemoizedMultiSelect = memo(MultiSelect);
 export { MemoizedMultiSelect as MultiSelect };
+

package/source/components/select/PortalDropDown.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { popUp } from "../globalStyle";
+import { popUp } from "../../globalStyle";
 
 export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
 
-  useEffect(() => {
-    if (isVisible && targetRef.current) {
+  const updatePosition = useCallback(() => {
+    if (targetRef && targetRef.current) {
       const rect = targetRef.current.getBoundingClientRect();
       const scrollTop =
         window.pageYOffset || document.documentElement.scrollTop;
@@ -19,7 +19,23 @@ export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
         width: rect.width,
       });
     }
-  }, [isVisible, targetRef]);
+  }, [targetRef]);
+
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+
+      // Listen to scroll events anywhere in the document (use capture to catch scroll inside elements)
+      window.addEventListener("scroll", updatePosition, true);
+      // Listen to window resizing
+      window.addEventListener("resize", updatePosition);
+    }
+
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isVisible, updatePosition]);
 
   if (!isVisible) return null;
 

package/source/components/select/index.tsx

@@ -16,8 +16,8 @@ import React, {
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import type { ItemsProps, SelectHandle, SelectProps } from "./types";
-import { selectStyle } from "../globalStyle";
-import { iconClass, primary } from "../globalStyle";
+import { selectStyle } from "../../globalStyle";
+import { iconClass, primary } from "../../globalStyle";
 import {
   useSelectState,
   useSelectData,
@@ -40,6 +40,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     error = undefined,
     onFiltering,
     disabled = false,
+    className = "",
   } = props;
 
   applyScrollbarStyles();
@@ -141,7 +142,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
               name="search"
               id="search"
               placeholder="Search a value"
-              className="w-full outline-none "
+              className="w-full bg-transparent outline-none text-slate-900 placeholder:text-slate-400 dark:text-slate-100"
               ref={inputRef}
               value={searchTerm}
               onChange={(e) => {
@@ -163,7 +164,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 }
               }}
               className={`${selectStyle["filter-button"]} ${
-                focusedIndex === index ? "bg-gray-100 dark:bg-gray-700" : ""
+                focusedIndex === index ? "bg-sky-50 text-sky-700 dark:bg-sky-950" : ""
               }`}
               onClick={() => handleSelect({ value, label })}
               onMouseEnter={() => setFocusedIndex(index)}
@@ -171,7 +172,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
               <Icon
                 elements={check}
                 svgClass={`h-4 w-4 fill-none ${
-                  selectedItem === value ? "stroke-gray-500" : ""
+                  selectedItem === value ? "stroke-sky-600" : ""
                 }`}
               />
               {label.length > 20 ? `${label.substring(0, 20)}...` : label}
@@ -186,7 +187,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
 
   return (
     <div
-      className="relative w-full"
+      className={`relative w-full ${className}`}
       ref={selectRef}
       id={id}
       onKeyDown={handleKeyDown}
@@ -245,3 +246,4 @@ Select.displayName = "Select";
 
 const MemoizedSelect = memo(Select);
 export { MemoizedSelect as Select };
+

package/source/components/select/types.ts

@@ -15,6 +15,7 @@ export type SelectProps = {
   selectedItem?: string;
   onFiltering?: (searchTerm: string) => void;
   disabled?: boolean;
+  className?: string;
 };
 
 export type SelectHandle = {
@@ -25,3 +26,4 @@ export type SelectHandle = {
   selectedDisplay: string;
   selected: string | undefined;
 };
+

package/source/components/tabs/index.tsx

@@ -1,52 +1,71 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { useState } from "react";
-import type { TabsProps } from "./types";
-
-export function Tabs({
-  tabs,
-  defaultTabId,
-  renderContent,
-  onChange,
-  className = "",
-}: TabsProps) {
-  const [activeTabId, setActiveTabId] = useState<string>(
-    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
-  );
-
-  const handleTabChange = (tabId: string) => {
-    setActiveTabId(tabId);
-    if (onChange) {
-      onChange(tabId);
-    }
-  };
-
-  return (
-    <div className={`w-full ${className}`}>
-      <nav className="flex border-b border-gray-200">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            disabled={tab.disabled}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              tab.disabled
-                ? "text-gray-300 cursor-not-allowed"
-                : activeTabId === tab.id
-                ? "border-b-2 border-black text-black"
-                : "text-gray-500 hover:text-gray-700 hover:border-gray-300"
-            }`}
-            onClick={() => !tab.disabled && handleTabChange(tab.id)}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
-      <div className="pt-4">{renderContent(activeTabId)}</div>
-    </div>
-  );
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TabsProps } from "./types";
+
+export function Tabs({
+  tabs,
+  defaultTabId,
+  renderContent,
+  onChange,
+  className = "",
+  variant = "line",
+}: TabsProps) {
+  const [activeTabId, setActiveTabId] = useState<string>(
+    defaultTabId || (tabs.length > 0 ? tabs[0].id : "")
+  );
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTabId(tabId);
+    if (onChange) {
+      onChange(tabId);
+    }
+  };
+
+  const isPills = variant === "pills";
+
+  return (
+    <div className={twMerge("w-full", className)}>
+      <nav
+        className={twMerge(
+          "flex gap-1",
+          isPills
+            ? "rounded-lg bg-slate-100 p-1 dark:bg-slate-900"
+            : "border-b border-slate-200 dark:border-slate-700"
+        )}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTabId === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              disabled={tab.disabled}
+              className={twMerge(
+                "min-h-9 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 disabled:cursor-not-allowed disabled:text-slate-300",
+                isPills ? "rounded-md" : "-mb-px border-b-2 border-transparent",
+                isActive && isPills
+                  ? "bg-white text-slate-950 shadow-sm dark:bg-slate-800 dark:text-white"
+                  : "",
+                isActive && !isPills
+                  ? "border-sky-600 text-sky-700"
+                  : "text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100"
+              )}
+              onClick={() => !tab.disabled && handleTabChange(tab.id)}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </nav>
+      <div className="pt-4">{renderContent(activeTabId)}</div>
+    </div>
+  );
 }

package/source/components/tabs/types.ts

@@ -1,15 +1,16 @@
-import type { ReactNode } from "react";
-
-export interface TabItem {
-  id: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  tabs: TabItem[];
-  defaultTabId?: string;
-  renderContent: (activeTabId: string) => ReactNode;
-  onChange?: (tabId: string) => void;
-  className?: string;
+import type { ReactNode } from "react";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  defaultTabId?: string;
+  renderContent: (activeTabId: string) => ReactNode;
+  onChange?: (tabId: string) => void;
+  className?: string;
+  variant?: "line" | "pills";
 }