gbs-add-block 0.0.66 → 0.0.68

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.65)
+# GBS Building Blocks 2.0 (v0.0.68)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.65)
+## What's New 🎉 (Ver 0.0.68)
 
 - Updated for bug fixes.
 - New component "Skeleton", "Breadcrumb" & "Navbar" Added.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/modal/index.tsx

@@ -13,18 +13,19 @@ import { ModalProps } from "./types";
 
 const defaultClasses = {
   modal:
-    "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 transition-opacity",
+    "fixed z-10 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:
     "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 dark:stroke-white",
+  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,
@@ -33,7 +34,6 @@ export const Modal = memo(
     classModalTitle = "",
     children,
     showCloseButton = false,
-    onClose,
     dismissible = false,
     titleId = "modal-title",
     closeButtonContent,
@@ -45,23 +45,28 @@ export const Modal = memo(
     // Handle ESC key press to close modal
     const handleEscKey = useCallback(
       (event: KeyboardEvent) => {
-        if (event.key === "Escape" && showModal && onClose) {
-          onClose();
+        if (event.key === "Escape" && showModal && dismissible) {
+          setShowModal(false);
         }
       },
-      [showModal, onClose]
+      [showModal, dismissible, setShowModal]
     );
 
     // Handle click outside modal to close
     const handleOutsideClick = useCallback(
       (e: React.MouseEvent<HTMLDivElement>) => {
-        if (onClose && e.target === e.currentTarget && dismissible) {
-          onClose();
+        if (e.target === e.currentTarget && dismissible) {
+          setShowModal(false);
         }
       },
-      [onClose, dismissible]
+      [dismissible, setShowModal]
     );
 
+    // Handle close button click
+    const handleClose = useCallback(() => {
+      setShowModal(false);
+    }, [setShowModal]);
+
     // Manage focus trap and keyboard events
     useEffect(() => {
       if (showModal) {
@@ -110,9 +115,9 @@ export const Modal = memo(
         >
           <div className={twMerge(modalTitleClass, classModalTitle)}>
             <h2 id={titleId}>{modalTitle}</h2>
-            {showCloseButton && onClose && (
+            {showCloseButton && (
               <button
-                onClick={onClose}
+                onClick={handleClose}
                 className={defaultClasses.closeButton}
                 aria-label="Close modal"
                 type="button"

package/source/components/modal/types.ts

@@ -1,5 +1,6 @@
 export type ModalProps = {
   showModal?: boolean;
+  setShowModal: (show: boolean) => void;
   modalTitle?: string;
   modalClass?: string;
   modalContentClass?: string;
@@ -8,7 +9,6 @@ export type ModalProps = {
   classModalTitle?: string;
   children: React.ReactNode;
   showCloseButton?: boolean;
-  onClose?: () => void;
   dismissible?: boolean;
   titleId?: string;
   closeButtonContent?: React.ReactNode;