gbs-add-block 0.0.48 → 0.0.50

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.48)
+# GBS Building Blocks 2.0 (v0.0.50)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ 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.48)
+## What's New 🎉 (Ver 0.0.50)
 
+- Update on form renderer
 - Refactored Code for Better Readability
-- Code Reusablity and hook update
 
 ## Authors
 

package/package.json

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

package/source/components/formrenderer/componentHandles/CheckBoxHandles.tsx

@@ -11,6 +11,8 @@ const CheckboxHandles = ({
 }: CheckboxHandlesProps) => {
   const [checked, setChecked] = useState<boolean>(!!item?.value);
 
+  // We Need this to set the value of the checkbox in the form
+  // if the value is not set in the form
   useEffect(() => {
     if (item?.name) {
       handleSelect(checked, item.name);
@@ -40,6 +42,7 @@ const CheckboxHandles = ({
       <input
         type="checkbox"
         checked={checked}
+        name={item?.name}
         onChange={(e) => {
           const newValue = e.target.checked;
           setChecked(newValue);

package/source/components/formrenderer/componentHandles/DatePickerHandles.tsx

@@ -1,14 +1,6 @@
 import React from "react";
 import { DatePicker } from "../../datepicker";
-import { FormItem } from "../types";
-
-interface DatePickerHandlesProps {
-  item?: FormItem;
-  requirementError: string[];
-  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
-  formRef?: React.RefObject<HTMLFormElement | null>;
-  onChangeEvent?: (event: any) => void;
-}
+import { DatePickerHandlesProps } from "../types";
 
 export default function DatePickerHandles({
   item,

package/source/components/formrenderer/componentHandles/InputHandles.tsx

@@ -1,81 +1,81 @@
-import React, { useEffect, useState } from "react";
-import { validateEmail, validatePhoneNumber } from "../helperFunctions";
+import React, { useEffect, useState, useCallback } from "react";
+import { validateInput } from "../helperFunctions";
 import { Input } from "../../input";
-import { FieldValue, FormContext, FormItem } from "../types";
+import { InputHandlesProps } from "../types";
 import { evaluateExpression } from "@grampro/headless-helpers";
 import { twMerge } from "tailwind-merge";
 
-interface InputHandlesProps {
-  item?: FormItem;
-  requirementError: string[];
-  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
-  onChangeEvent?: (event: any) => void;
-  formRef: React.RefObject<HTMLFormElement | null>;
-  context: FormContext;
-  updateContext: (
-    componentName: string,
-    fieldName: string,
-    value: FieldValue
-  ) => void;
-}
-
-const InputHandles = ({
+const InputHandles: React.FC<InputHandlesProps> = ({
   item,
   requirementError,
   setRequirementError,
   onChangeEvent,
   context,
   updateContext,
-}: InputHandlesProps) => {
+}) => {
   const [inputError, setInputError] = useState<string | null>(null);
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isRequired, setIsRequired] = useState<boolean>(false);
 
-  // Initialize context with default values
+  // Evaluate expression with memoization
+  const evaluateCondition = useCallback(
+    (expression: string | boolean | undefined): boolean => {
+      if (typeof expression === "string") {
+        return evaluateExpression(expression, context);
+      }
+      return !!expression;
+    },
+    [context]
+  );
+
+  // Initialize context and handle dynamic states
   useEffect(() => {
     if (item?.name && item?.value !== undefined) {
       updateContext("input", item.name, item.value);
     }
-  }, [item?.name, item?.value, updateContext]);
 
-  // Handle dynamic disabled/required states expressions
-  useEffect(() => {
-    if (typeof item?.disabled === "string") {
-      setIsDisabled(evaluateExpression(item.disabled, context));
-    } else if (typeof item?.disabled === "boolean") {
-      setIsDisabled(item.disabled);
-    }
+    const disabled = evaluateCondition(item?.disabled);
+    setIsDisabled(disabled);
 
-    if (typeof item?.required === "string") {
-      setIsRequired(evaluateExpression(item.required, context));
-    } else if (typeof item?.required === "boolean") {
-      setIsRequired(item.required);
-    }
-  }, [item, context]);
+    // Only set required if not disabled
+    const required = disabled ? false : evaluateCondition(item?.required);
+    setIsRequired(required);
+  }, [item, context, evaluateCondition, updateContext]);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target;
 
-    if (item?.name) {
-      updateContext("input", item.name, value);
+      if (item?.name) {
+        updateContext("input", item.name, value);
+        setRequirementError?.((prev) =>
+          prev.filter((error) => error !== item.name)
+        );
+      }
 
-      setRequirementError?.((prevErrors) =>
-        prevErrors.filter((error) => error !== item.name)
-      );
-    }
+      const validationError = validateInput(value, item?.type);
+      setInputError(validationError);
 
-    // Validation based on input type
-    if (item?.type === "email" && !validateEmail(value)) {
-      setInputError("Invalid email format");
-    } else if (item?.type === "tel" && !validatePhoneNumber(value)) {
-      setInputError("Invalid phone number. Must be 10 digits.");
-    } else {
-      setInputError(null);
-    }
+      onChangeEvent?.(event);
+    },
+    [
+      item?.name,
+      item?.type,
+      updateContext,
+      setRequirementError,
+      onChangeEvent,
+      validateInput,
+    ]
+  );
 
-    // Trigger onChange event
-    onChangeEvent?.(event);
-  };
+  // Merge input classes
+  const inputClassName = twMerge(
+    "border rounded-md px-4 py-[6px] w-full text-black",
+    inputError || (item?.name && requirementError.includes(item?.name))
+      ? "border-red-500"
+      : "border-gray-300",
+    item?.stepProperty?.customClass?.inputClass
+  );
 
   return (
     <div className="w-full">
@@ -88,22 +88,15 @@ const InputHandles = ({
       <Input
         type={item?.type}
         name={item?.name}
-        placeholder={item?.placeholder || ""}
+        placeholder={item?.placeholder ?? ""}
         onChange={handleChange}
-        className={twMerge(
-          `border rounded-md px-4 py-[6px] w-full text-black ${
-            inputError || (item?.name && requirementError.includes(item?.name))
-              ? "border-red-500"
-              : "border-gray-300"
-          }`,
-          item?.stepProperty?.customClass?.inputClass
-        )}
+        className={inputClassName}
         defaultValue={item?.value ?? ""}
         disabled={isDisabled}
         required={isRequired}
       />
       {item?.name && requirementError.includes(item.name) && (
-        <p className="text-red-500 text-xs">{`${item?.name} is required`}</p>
+        <p className="text-red-500 text-xs">{`${item.name} is required`}</p>
       )}
       {inputError && <p className="text-red-500 text-xs">{inputError}</p>}
     </div>

package/source/components/formrenderer/componentHandles/MultiHandles.tsx

@@ -1,14 +1,7 @@
-import React from "react";
-import { FormItem } from "../types";
+import React, { useCallback, useEffect, useState } from "react";
+import { MultiSelectHandlesProps } from "../types";
 import { MultiSelect } from "../../multiselect";
-
-interface MultiSelectHandlesProps {
-  item?: FormItem;
-  requirementError: string[];
-  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
-  formRef?: React.RefObject<HTMLFormElement | null>;
-  onChangeEvent?: (event: any) => void;
-}
+import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function MultiHandles({
   item,
@@ -16,7 +9,39 @@ export default function MultiHandles({
   setRequirementError,
   formRef,
   onChangeEvent,
+  context,
+  updateContext,
 }: MultiSelectHandlesProps) {
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Evaluate expression with memoization
+  const evaluateCondition = useCallback(
+    (expression: string | boolean | undefined): boolean => {
+      if (typeof expression === "string") {
+        return evaluateExpression(expression, context);
+      }
+      return !!expression;
+    },
+    [context]
+  );
+
+  // Initialize context and handle dynamic states
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("select", item.name, item.value);
+    }
+
+    const disabled = evaluateCondition(item?.disabled);
+    console.log("disabled", disabled);
+
+    setIsDisabled(disabled);
+
+    // Only set required if not disabled
+    const required = disabled ? false : evaluateCondition(item?.required);
+    setIsRequired(required);
+  }, [item, context, evaluateCondition, updateContext]);
+
   const handleSelect = (value: string[], key: string) => {
     if (formRef && formRef.current) {
       const hiddenInput = formRef.current.querySelector(
@@ -42,7 +67,7 @@ export default function MultiHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
-          {item.required && <span className="text-red-500">*</span>}
+          {isRequired && <span className="text-red-500">*</span>}
         </label>
       )}
       <MultiSelect
@@ -62,6 +87,7 @@ export default function MultiHandles({
             ? `${item.name} is required`
             : undefined
         }
+        disabled={isDisabled}
       />
     </div>
   );

package/source/components/formrenderer/componentHandles/SelectHandles.tsx

@@ -1,24 +1,7 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Select } from "../../select";
-
-interface Option {
-  value: string;
-  label: string;
-}
-
-interface SelectHandlesProps {
-  item?: {
-    name?: string;
-    label?: string;
-    options?: Option[];
-    value?: string;
-    required?: boolean;
-  };
-  requirementError: string[];
-  setRequirementError: React.Dispatch<React.SetStateAction<string[]>>;
-  formRef: React.RefObject<HTMLFormElement | null>;
-  onChangeEvent?: (event: any) => void;
-}
+import { Option, SelectHandlesProps } from "../types";
+import { evaluateExpression } from "@grampro/headless-helpers";
 
 export default function SelectHandles({
   item,
@@ -26,9 +9,41 @@ export default function SelectHandles({
   setRequirementError,
   formRef,
   onChangeEvent,
+  context,
+  updateContext,
 }: SelectHandlesProps) {
   const [options] = useState<Option[]>(item?.options || []);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [isRequired, setIsRequired] = useState<boolean>(false);
+
+  // Evaluate expression with memoization
+  const evaluateCondition = useCallback(
+    (expression: string | boolean | undefined): boolean => {
+      if (typeof expression === "string") {
+        return evaluateExpression(expression, context);
+      }
+      return !!expression;
+    },
+    [context]
+  );
+
+  // Initialize context and handle dynamic states
+  useEffect(() => {
+    if (item?.name && item?.value !== undefined) {
+      updateContext("select", item.name, item.value);
+    }
+
+    const disabled = evaluateCondition(item?.disabled);
+    console.log("disabled", disabled);
+
+    setIsDisabled(disabled);
+
+    // Only set required if not disabled
+    const required = disabled ? false : evaluateCondition(item?.required);
+    setIsRequired(required);
+  }, [item, context, evaluateCondition, updateContext]);
 
+  // Handle select change event
   const handleSelect = (value: string | undefined, key: string) => {
     if (!formRef?.current) return;
 
@@ -55,7 +70,7 @@ export default function SelectHandles({
       {item?.label && (
         <label htmlFor={item.name} className="font-medium text-sm">
           {item.label}
-          {item.required && <span className="text-red-500">*</span>}
+          {isRequired && <span className="text-red-500">*</span>}
         </label>
       )}
       <Select
@@ -74,6 +89,7 @@ export default function SelectHandles({
             ? `${item.name} is required`
             : undefined
         }
+        disabled={isDisabled}
       />
     </div>
   );

package/source/components/formrenderer/helperFunctions.ts

@@ -20,3 +20,18 @@ export const formDataToObject = (formData: FormData) => {
   });
   return obj;
 };
+
+export const validateInput = (value: string, type?: string): string | null => {
+  if (!value) return null;
+
+  switch (type) {
+    case "email":
+      return validateEmail(value) ? null : "Invalid email format";
+    case "tel":
+      return validatePhoneNumber(value)
+        ? null
+        : "Invalid phone number. Must be 10 digits.";
+    default:
+      return null;
+  }
+};

package/source/components/formrenderer/index.tsx

@@ -1,151 +1,111 @@
-/**
- * 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, { useRef, useState } from "react";
+import React, { useRef, useState, FormEvent } from "react";
 import { useFormContext } from "@grampro/headless-helpers";
-import { FormElement, FormItem, FormRendererProps } from "./types";
 import InputHandles from "./componentHandles/InputHandles";
 import SelectHandles from "./componentHandles/SelectHandles";
 import MultiHandles from "./componentHandles/MultiHandles";
 import DatePickerHandles from "./componentHandles/DatePickerHandles";
 import CheckboxHandles from "./componentHandles/CheckBoxHandles";
+import { FormItem, FormRendererProps } from "./types";
+
+// Component mapping
+const COMPONENT_MAP = {
+  input: InputHandles,
+  select: SelectHandles,
+  "multi-select": MultiHandles,
+  datepicker: DatePickerHandles,
+  checkbox: CheckboxHandles,
+} as const;
+
+const validateField = (
+  field: HTMLInputElement | null,
+  item: FormItem
+): boolean => {
+  if (!item.required || !item.name || field?.disabled) {
+    return true;
+  }
+  // Explicitly check for null and empty value
+  if (!field) {
+    return false;
+  }
+  return field.value.trim() !== "";
+};
 
-const FormRenderer = ({
+const FormRenderer: React.FC<FormRendererProps> = ({
   onSubmit,
-  sourceData,
+  sourceData = [],
   formFormationClass = "grid grid-cols-1 text-left gap-4",
   formParentClass = "w-96",
-}: FormRendererProps) => {
-  const formRef = useRef<FormElement>(null);
+}) => {
+  const formRef = useRef<HTMLFormElement>(null);
   const [requirementError, setRequirementError] = useState<string[]>([]);
-
   const { context, updateContext } = useFormContext();
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  // Handle form submission
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const requirementErrorItems: string[] = [];
 
-    sourceData?.forEach((item: FormItem) => {
-      if (item.required && item.name) {
+    const requirementErrorItems = sourceData
+      .filter((item) => item.required && item.name)
+      .reduce((errors: string[], item) => {
         const field = formRef.current?.querySelector(
           `[name="${item.name}"]`
         ) as HTMLInputElement | null;
 
-        if (!field || !field.value.trim()) {
-          requirementErrorItems.push(item.name);
+        if (!validateField(field, item)) {
+          errors.push(item.name!);
         }
-      }
-    });
+        return errors;
+      }, []);
 
     setRequirementError(requirementErrorItems);
 
-    if (requirementErrorItems.length > 0) return;
+    if (requirementErrorItems.length === 0 && onSubmit && formRef.current) {
+      onSubmit(new FormData(formRef.current));
+    }
+  };
 
-    const formData = new FormData(formRef.current as HTMLFormElement);
-    if (onSubmit) onSubmit(formData);
+  // Render form component based on the type
+  const renderFormComponent = (item: FormItem, index: number) => {
+    if (item.component === "button") {
+      return (
+        <div key={index} className="w-full mt-1">
+          <button
+            type={item.button_type}
+            className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800"
+          >
+            {item.value}
+          </button>
+        </div>
+      );
+    }
+
+    const Component = item.component && COMPONENT_MAP[item.component];
+    if (!Component) return null;
+
+    return (
+      <Component
+        key={index}
+        item={item}
+        requirementError={requirementError}
+        setRequirementError={setRequirementError}
+        formRef={formRef}
+        onChangeEvent={item.onChangeEvent}
+        context={context}
+        updateContext={updateContext}
+      />
+    );
   };
 
+  // If no source data is found, return a message
+  if (!sourceData.length) {
+    return <div>No Source Data Found</div>;
+  }
+
   return (
     <form ref={formRef} onSubmit={handleSubmit} className={formParentClass}>
-      {sourceData && sourceData?.length > 0 ? (
-        <div className={formFormationClass}>
-          {sourceData.map((item: FormItem, index: number) => {
-            switch (item.component) {
-              case "input":
-                return (
-                  <InputHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    onChangeEvent={item.onChangeEvent}
-                    formRef={formRef}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "select":
-                return (
-                  <SelectHandles
-                    key={index}
-                    item={{
-                      name: item.name,
-                      label: item.label,
-                      options: item.options,
-                      value: item.value,
-                      required: Boolean(item.required),
-                    }}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                  />
-                );
-
-              case "multi-select":
-                return (
-                  <MultiHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                  />
-                );
-
-              case "datepicker":
-                return (
-                  <DatePickerHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                  />
-                );
-
-              case "checkbox":
-                return (
-                  <CheckboxHandles
-                    key={index}
-                    item={item}
-                    requirementError={requirementError}
-                    setRequirementError={setRequirementError}
-                    formRef={formRef}
-                    onChangeEvent={item.onChangeEvent}
-                    sourceData={sourceData}
-                    context={context}
-                    updateContext={updateContext}
-                  />
-                );
-
-              case "button":
-                return (
-                  <div key={index} className="w-full mt-1">
-                    <button
-                      type={item.button_type}
-                      className="w-full bg-black text-white py-2 rounded-xl hover:bg-gray-800 dark:hover:bg-gray-300 dark:bg-white dark:text-black"
-                    >
-                      {item.value}
-                    </button>
-                  </div>
-                );
-
-              default:
-                return null;
-            }
-          })}
-        </div>
-      ) : (
-        <div>No Source Data Found</div>
-      )}
+      <div className={formFormationClass}>
+        {sourceData.map(renderFormComponent)}
+      </div>
     </form>
   );
 };

package/source/components/formrenderer/types.ts

@@ -1,3 +1,7 @@
+export type Option = {
+  value: string;
+  label: string;
+};
 export interface FormElement extends HTMLFormElement {
   [key: string]: any;
 }
@@ -5,7 +9,13 @@ export interface FormElement extends HTMLFormElement {
 export type FormItem = {
   id?: string;
   name?: string;
-  component?: string;
+  component?:
+    | "input"
+    | "select"
+    | "multi-select"
+    | "datepicker"
+    | "checkbox"
+    | "button";
   type?: string;
   required?: boolean | string;
   placeholder?: string;
@@ -26,39 +36,15 @@ export type FormItem = {
   };
 };
 
-interface DependencyConfig {
-  source: string;
-  parent?: string;
-  dataStructure: any;
-}
-
 export type FormRendererProps = {
   onSubmit?: (formData: FormData) => void;
   sourceData?: FormItem[] | undefined;
   formFormationClass?: string;
   formParentClass?: string;
-  dependencyConfig?: Record<string, DependencyConfig>;
-};
-
-export type SelectHandlesProps = {
-  item?: FormItem;
-  requirementError: string[];
-  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
-  formRef?: React.RefObject<HTMLFormElement | null>;
-  dependencyMap?: Record<
-    string,
-    {
-      source: string;
-      parent?: string;
-      dataStructure: any;
-    }
-  >;
 };
 
-export type Option = {
-  value: string;
-  label: string;
-};
+// Handler Props Starts here
+export type FieldValue = string | boolean | number | null;
 
 export type CheckboxHandlesProps = {
   item?: FormItem;
@@ -77,10 +63,59 @@ export type CheckboxHandlesProps = {
   ) => void;
 };
 
-export type FieldValue = string | boolean | number | null;
-
 export interface FormContext {
   [componentName: string]: {
     [fieldName: string]: FieldValue;
   };
 }
+
+export type InputHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  onChangeEvent?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export type DatePickerHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+};
+
+export type SelectHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+
+export type MultiSelectHandlesProps = {
+  item?: FormItem;
+  requirementError: string[];
+  setRequirementError?: React.Dispatch<React.SetStateAction<string[]>>;
+  formRef?: React.RefObject<HTMLFormElement | null>;
+  onChangeEvent?: (event: any) => void;
+  context: FormContext;
+  updateContext: (
+    componentName: string,
+    fieldName: string,
+    value: FieldValue
+  ) => void;
+};
+// Handler Props Ends here

package/source/components/multiselect/index.tsx

@@ -17,6 +17,7 @@ import type { MultiSelectHandle, MultiSelectProps } from "./types";
 import {
   useMultiSelectState,
   useClickOutside,
+  applyScrollbarStyles,
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
@@ -34,8 +35,11 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       selectedItems = [],
       name,
       error,
+      disabled = false,
     } = props;
 
+    applyScrollbarStyles();
+
     const inputRef = useRef<HTMLInputElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
 
@@ -78,6 +82,12 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       return display;
     }, [selected, workingDataSource, placeholder, truncate]);
 
+    const handleClear = () => {
+      if (disabled) return;
+      clearSelected();
+      if (onSelect) onSelect([]);
+    };
+
     useImperativeHandle(
       ref,
       () => ({
@@ -109,8 +119,11 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         >
           <button
             onClick={togglePopover}
-            className="flex-grow text-sm text-left font-medium"
+            className={`flex-grow text-sm text-left font-medium ${
+              disabled ? "opacity-50 cursor-not-allowed" : ""
+            }`}
             type="button"
+            disabled={disabled}
           >
             {getSelectedDisplay()}
           </button>
@@ -118,14 +131,19 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             {selected.length > 0 && (
               <button
                 className="flex items-center px-2"
-                onClick={clearSelected}
+                onClick={handleClear}
                 type="button"
               >
                 <Icon elements={x} svgClass={iconClass["grey-common"]} />
               </button>
             )}
             <button onClick={togglePopover} type="button">
-              <Icon elements={upDown} svgClass={iconClass["grey-common"]} />
+              <Icon
+                elements={upDown}
+                svgClass={`${iconClass["grey-common"]} ${
+                  disabled ? "opacity-50" : ""
+                }`}
+              />
             </button>
           </div>
         </div>
@@ -138,7 +156,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           readOnly
         />
 
-        {showPopover && (
+        {showPopover && !disabled && (
           <div className={popUp["pop-up-style"]}>
             {showSearch && (
               <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">

package/source/components/multiselect/types.ts

@@ -8,11 +8,12 @@ export type MultiSelectProps = {
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
-  onSelect?: (selectedItem: string[]) => void;
+  onSelect?: (selectedItem: string[]) => void | [];
   truncate?: boolean;
   selectedItems?: string[];
   name?: string;
   error?: string;
+  disabled?: boolean;
 };
 
 export type MultiSelectHandle = {

package/source/components/select/index.tsx

@@ -22,6 +22,7 @@ import {
   useSelectState,
   useSelectData,
   useClickOutside,
+  applyScrollbarStyles,
 } from "@grampro/headless-helpers";
 
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
@@ -36,8 +37,11 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     selectedItem: initialSelectedItem,
     error = undefined,
     onFiltering,
+    disabled = false,
   } = props;
 
+  applyScrollbarStyles();
+
   const {
     showPopover,
     setShowPopover,
@@ -90,6 +94,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   );
 
   const handleClear = () => {
+    if (disabled) return;
     clearSelected();
     if (onSelect) onSelect(undefined);
   };
@@ -110,14 +115,20 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
         <button
           className={`${error ? primary["error-border"] : "border"} ${
             selectStyle["select-button"]
-          }`}
+          } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
           onClick={togglePopover}
           type="button"
+          disabled={disabled}
         >
           {selectedDisplay || placeholder}
-          <Icon elements={upDown} svgClass={iconClass["grey-common"]} />
+          <Icon
+            elements={upDown}
+            svgClass={`${iconClass["grey-common"]} ${
+              disabled ? "opacity-50" : ""
+            }`}
+          />
         </button>
-        {selectedDisplay && (
+        {selectedDisplay && !disabled && (
           <button
             className={selectStyle["selectedDisplay-Button"]}
             onClick={handleClear}
@@ -130,7 +141,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
 
       <input type="hidden" name={name} value={selectedItem || ""} readOnly />
 
-      {showPopover && (
+      {showPopover && !disabled && (
         <div className={popUp["pop-up-style"]}>
           {showSearch && (
             <div className={selectStyle["input-parent"]}>
@@ -141,7 +152,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 name="search"
                 id="search"
                 placeholder="Search a value"
-                className="w-full outline-none dark:bg-black"
+                className="w-full outline-none"
                 ref={inputRef}
                 value={searchTerm}
                 onChange={(e) => {

package/source/components/select/style.ts

@@ -1,10 +1,9 @@
 export const selectStyle = {
   "select-button":
-    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm dark:bg-black dark:border-white dark:text-white",
+    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm",
   "filter-button":
     "flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600",
-  "input-parent":
-    "flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black",
+  "input-parent": "flex p-2 gap-1 items-center sticky top-0 bg-white border-b",
   "selectedDisplay-Button":
     "absolute right-8 top-0 h-full flex items-center px-2 z-20",
 };

package/source/components/select/types.ts

@@ -14,6 +14,7 @@ export type SelectProps = {
   onSelect?: (selectedItem: string | undefined) => void;
   selectedItem?: string;
   onFiltering?: (searchTerm: string) => void;
+  disabled?: boolean;
 };
 
 export type SelectHandle = {