gbs-add-block 1.2.5 → 1.2.7

package/source/components/input/index.tsx

@@ -1,144 +1,142 @@
-/**
- * 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, { useState, useRef } from "react";
-import { twMerge } from "tailwind-merge";
-import Icon from "../icon/Icon";
-import { eye, search } from "../icon/iconPaths";
-import type { InputProps } from "./types";
-import { iconClass, inputStyles, primary } from "../globalStyle";
-
-export const Input = ({
-  OTPField = false,
-  OTPValue = "",
-  OTPLength = 4,
-  OTPClass = inputStyles.otp,
-  onOTPValueChange,
-  error = undefined,
-  ...props
-}: InputProps) => {
-  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
-  const [showPassword, setShowPassword] = useState(false);
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  const updateOtpValue = (
-    index: number,
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    e.preventDefault();
-    const input = e.target;
-    if (input) {
-      const newOtpValues = [...otpValues];
-      newOtpValues[index] = input.value;
-      setOtpValues(newOtpValues);
-      if (index < OTPLength - 1 && input.value) {
-        inputRefs.current[index + 1]?.focus();
-      }
-      OTPValue = newOtpValues.join("");
-      if (onOTPValueChange) onOTPValueChange(OTPValue);
-    }
-  };
-
-  const handleKeydown = (
-    index: number,
-    e: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    } else if (e.key === "ArrowLeft" && index > 0) {
-      e.preventDefault();
-      inputRefs.current[index - 1]?.focus();
-      setTimeout(() => {
-        if (inputRefs.current[index - 1]) {
-          const inputEl = inputRefs.current[index - 1];
-          if (inputEl) {
-            const length = inputEl.value.length;
-            inputEl.setSelectionRange(length, length);
-          }
-        }
-      }, 0);
-    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
-      e.preventDefault();
-      inputRefs.current[index + 1]?.focus();
-      setTimeout(() => {
-        if (inputRefs.current[index + 1]) {
-          const inputEl = inputRefs.current[index + 1];
-          if (inputEl) {
-            const length = inputEl.value.length;
-            inputEl.setSelectionRange(length, length);
-          }
-        }
-      }, 0);
-    }
-  };
-
-  const toggleTypeForPassword = () => {
-    setShowPassword(!showPassword);
-  };
-
-  return (
-    <div>
-      {!OTPField ? (
-        <div className="text-input-container w-full relative flex flex-col">
-          <div className="relative">
-            <input
-              className={twMerge(
-                inputStyles.default,
-                error ? inputStyles.error : "",
-                "w-full text-black pr-10"
-              )}
-              {...props}
-              type={
-                props.type === "password" && showPassword ? "text" : props.type
-              }
-            />
-            {props.type === "search" && (
-              <div className="absolute inset-y-0 right-2 flex items-center">
-                <Icon elements={search} svgClass={iconClass["grey-common"]} />
-              </div>
-            )}
-            {props.type === "password" && (
-              <button
-                type="button"
-                className="absolute inset-y-0 right-2 flex items-center"
-                onClick={toggleTypeForPassword}
-              >
-                <Icon
-                  elements={eye}
-                  svgClass={
-                    error ? iconClass["error-icon"] : iconClass["grey-common"]
-                  }
-                />
-              </button>
-            )}
-          </div>
-          {error && <div className={primary["error-primary"]}>{error}</div>}
-        </div>
-      ) : (
-        <div className={inputStyles.otpContainer}>
-          {Array(OTPLength)
-            .fill("")
-            .map((_, index) => (
-              <input
-                key={index}
-                type="text"
-                maxLength={1}
-                pattern="[0-9]*"
-                value={otpValues[index]}
-                onChange={(e) => updateOtpValue(index, e)}
-                onKeyDown={(e) => handleKeydown(index, e)}
-                ref={(ref) => {
-                  inputRefs.current[index] = ref;
-                }}
-                className={OTPClass}
-              />
-            ))}
-        </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, { useState, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Icon from "../icon/Icon";
+import { eye, search } from "../icon/iconPaths";
+import type { InputProps } from "./types";
+import { iconClass, inputStyles, primary } from "../globalStyle";
+
+export const Input = ({
+  OTPField = false,
+  OTPValue = "",
+  OTPLength = 4,
+  OTPClass = inputStyles.otp,
+  onOTPValueChange,
+  error = undefined,
+  className,
+  ...props
+}: InputProps) => {
+  const [otpValues, setOtpValues] = useState(new Array(OTPLength).fill(""));
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const updateOtpValue = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    e.preventDefault();
+    const input = e.target;
+    if (input) {
+      const newOtpValues = [...otpValues];
+      newOtpValues[index] = input.value;
+      setOtpValues(newOtpValues);
+      if (index < OTPLength - 1 && input.value) {
+        inputRefs.current[index + 1]?.focus();
+      }
+      OTPValue = newOtpValues.join("");
+      if (onOTPValueChange) onOTPValueChange(OTPValue);
+    }
+  };
+
+  const handleKeydown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === "Backspace" && otpValues[index] === "" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      inputRefs.current[index - 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index - 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    } else if (e.key === "ArrowRight" && index < OTPLength - 1) {
+      e.preventDefault();
+      inputRefs.current[index + 1]?.focus();
+      setTimeout(() => {
+        const inputEl = inputRefs.current[index + 1];
+        if (inputEl) {
+          const length = inputEl.value.length;
+          inputEl.setSelectionRange(length, length);
+        }
+      }, 0);
+    }
+  };
+
+  const toggleTypeForPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div>
+      {!OTPField ? (
+        <div className="text-input-container relative flex w-full flex-col">
+          <div className="relative">
+            <input
+              className={twMerge(
+                inputStyles.default,
+                error ? inputStyles.error : "",
+                "w-full pr-10",
+                className
+              )}
+              {...props}
+              type={
+                props.type === "password" && showPassword ? "text" : props.type
+              }
+            />
+            {props.type === "search" && (
+              <div className="absolute inset-y-0 right-2 flex items-center">
+                <Icon elements={search} svgClass={iconClass["grey-common"]} />
+              </div>
+            )}
+            {props.type === "password" && (
+              <button
+                type="button"
+                className="absolute inset-y-0 right-2 flex items-center rounded-md p-1"
+                onClick={toggleTypeForPassword}
+              >
+                <Icon
+                  elements={eye}
+                  svgClass={
+                    error ? iconClass["error-icon"] : iconClass["grey-common"]
+                  }
+                />
+              </button>
+            )}
+          </div>
+          {error && <div className={primary["error-primary"]}>{error}</div>}
+        </div>
+      ) : (
+        <div className={inputStyles.otpContainer}>
+          {Array(OTPLength)
+            .fill("")
+            .map((_, index) => (
+              <input
+                key={index}
+                type="text"
+                maxLength={1}
+                pattern="[0-9]*"
+                value={otpValues[index]}
+                onChange={(e) => updateOtpValue(index, e)}
+                onKeyDown={(e) => handleKeydown(index, e)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
+                className={OTPClass}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
 };

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

@@ -41,3 +41,4 @@ export const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
     document.body
   );
 };
+