@bolttech/molecules-dropdown 0.5.1 → 0.7.0

package/index.cjs

@@ -2282,7 +2282,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
       shadow
     }
   }
-}) => `${shadow.lvl0.x} ${shadow.lvl0.y} ${shadow.lvl0.blur} ${shadow.lvl0.spread} ${shadow.lvl0.color}`, ({
+}) => shadow.lvl0, ({
   theme,
   variant,
   hasValue
@@ -2438,32 +2438,28 @@ const ReusableDropdownComponent = ({
   const theme = /*#__PURE__*/styled.useTheme();
   const sizeIcon = Number(theme.components.dropdown.icon.size.replace(/[^\d.-]+/g, ''));
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs(ContainerDropdown, Object.assign({
+    children: [jsxRuntime.jsxs(ContainerDropdown, {
       variant: _variant,
       hasValue: inputValue,
       hasError: hasError,
       disabled: disabled,
-      "data-testid": `${dataTestId}-dropdown-container`
-    }, {
+      "data-testid": `${dataTestId}-dropdown-container`,
       children: [jsxRuntime.jsxs(ContentDropdown, {
-        children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
+        children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, {
           onClick: () => {
             setShowSelectComponent(disabled ? false : !showSelectComponent);
-          }
-        }, {
-          children: [jsxRuntime.jsx("label", Object.assign({
+          },
+          children: [jsxRuntime.jsx("label", {
             htmlFor: `${id}-input`,
             className: "fieldLabel",
-            "data-testid": `${dataTestId}-label`
-          }, {
+            "data-testid": `${dataTestId}-label`,
             children: label
-          })), required && jsxRuntime.jsx("span", Object.assign({
+          }), required && jsxRuntime.jsx("span", {
             className: "requiredLabel",
-            "data-testid": `${dataTestId}-label-required`
-          }, {
+            "data-testid": `${dataTestId}-label-required`,
             children: "*"
-          }))]
-        })), jsxRuntime.jsx(InputAndIconDropdown, {
+          })]
+        }), jsxRuntime.jsx(InputAndIconDropdown, {
           children: jsxRuntime.jsx(atomsInput.InputStyled, {
             id: `${id}-input`,
             "data-testid": `${dataTestId}-input`,
@@ -2491,26 +2487,23 @@ const ReusableDropdownComponent = ({
             }
           })
         })]
-      }), jsxRuntime.jsx(ClickableElement, Object.assign({
+      }), jsxRuntime.jsx(ClickableElement, {
         onClick: () => {
           if (!disabled) setShowSelectComponent(!showSelectComponent);
-        }
-      }, {
+        },
         children: jsxRuntime.jsx(atomsIcon.Icon, {
           dataTestId: `${dataTestId}-icon`,
           size: sizeIcon,
           icon: !showSelectComponent ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
         })
-      }))]
-    })), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", Object.assign({
-      className: "errorMessage"
-    }, {
-      children: jsxRuntime.jsx("label", Object.assign({
-        "data-testid": `${dataTestId}-label-error-message`
-      }, {
+      })]
+    }), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", {
+      className: "errorMessage",
+      children: jsxRuntime.jsx("label", {
+        "data-testid": `${dataTestId}-label-error-message`,
         children: errorMessage
-      }))
-    }))]
+      })
+    })]
   });
 };
 
@@ -2692,7 +2685,7 @@ const Dropdown = ({
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
   }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
-  return jsxRuntime.jsxs(SectionContainer, Object.assign({
+  return jsxRuntime.jsxs(SectionContainer, {
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2702,8 +2695,7 @@ const Dropdown = ({
     "data-testid": `${_dataTestId}-container`,
     style: {
       maxWidth: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.style.width
-    }
-  }, {
+    },
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       id: _id,
       dataTestId: _dataTestId,
@@ -2741,7 +2733,7 @@ const Dropdown = ({
         options: currentOptionList
       })
     })]
-  }));
+  });
 };
 
 const DropdownWithHeaders = ({
@@ -2802,14 +2794,13 @@ const DropdownWithHeaders = ({
     })[0] || undefined);
     setIsFirstRender(false);
   }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
-  return jsxRuntime.jsxs(SectionContainer, Object.assign({
+  return jsxRuntime.jsxs(SectionContainer, {
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     variant: _variant,
-    "data-testid": `${dataTestId}-container`
-  }, {
+    "data-testid": `${dataTestId}-container`,
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
@@ -2845,7 +2836,7 @@ const DropdownWithHeaders = ({
         options: currentOptionList
       })
     })]
-  }));
+  });
 };
 
 exports.Dropdown = Dropdown;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.5.1",
-    "@bolttech/atoms-input": "0.5.0",
-    "@bolttech/atoms-select": "0.5.1",
-    "@edirect/frontend-foundations": "0.0.55",
+    "@bolttech/atoms-icon": "0.1.0",
+    "@bolttech/atoms-input": "0.7.0",
+    "@bolttech/atoms-select": "0.7.0",
+    "@edirect/frontend-foundations": "0.0.56",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/index.d.ts

@@ -1,3 +1,3 @@
-export { Dropdown } from './lib/molecules-dropdown';
-export { DropdownWithHeaders } from './lib/molecules-dropdown-with-header-options';
-export type { DropdownProps, DropdownWithHeadersProps, } from './lib/molecules-dropdown.type';
+export { Dropdown } from './lib/molecules-dropdown';
+export { DropdownWithHeaders } from './lib/molecules-dropdown-with-header-options';
+export type { DropdownProps, DropdownWithHeadersProps, } from './lib/molecules-dropdown.type';

package/src/lib/molecules-dropdown-with-header-options.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { DropdownWithHeadersProps } from './molecules-dropdown.type';
-export declare const DropdownWithHeaders: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownWithHeadersProps) => JSX.Element;
+/// <reference types="react" />
+import { DropdownWithHeadersProps } from './molecules-dropdown.type';
+export declare const DropdownWithHeaders: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownWithHeadersProps) => JSX.Element;

package/src/lib/molecules-dropdown.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { DropdownProps } from './molecules-dropdown.type';
-export declare const Dropdown: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, id, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownProps) => JSX.Element;
+/// <reference types="react" />
+import { DropdownProps } from './molecules-dropdown.type';
+export declare const Dropdown: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, id, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownProps) => JSX.Element;

package/src/lib/molecules-dropdown.styles.d.ts

@@ -1,15 +1,15 @@
-import { StyleVariants } from './molecules-dropdown.type';
-type DropdownStyledProps = {
-    variant: StyleVariants;
-    hasValue: string;
-    hasError?: boolean;
-    disabled?: boolean;
-};
-export declare const ClickableElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ContainerDropdown: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, DropdownStyledProps, never>;
-export declare const SectionContainer: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, Omit<DropdownStyledProps, "hasValue">, never>;
-export declare const InputAndIconDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ContentDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldLabelAndRequiredLabelDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const DropdownOptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export {};
+import { StyleVariants } from './molecules-dropdown.type';
+type DropdownStyledProps = {
+    variant: StyleVariants;
+    hasValue: string;
+    hasError?: boolean;
+    disabled?: boolean;
+};
+export declare const ClickableElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContainerDropdown: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, DropdownStyledProps, never>;
+export declare const SectionContainer: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, Omit<DropdownStyledProps, "hasValue">, never>;
+export declare const InputAndIconDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContentDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FieldLabelAndRequiredLabelDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DropdownOptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/src/lib/molecules-dropdown.type.d.ts

@@ -1,180 +1,180 @@
-/// <reference types="react" />
-import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
-/**
- * @typedef {StyleVariants}
- The string value possibilities to affect the theme
- */
-export type StyleVariants = 'grey' | 'border';
-/**
+/// <reference types="react" />
+import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
+/**
+ * @typedef {StyleVariants}
+ The string value possibilities to affect the theme
+ */
+export type StyleVariants = 'grey' | 'border';
+/**
 
-Default props for Dropdown component
-@property label - A string to display as the label of the dropdown
-@property placeholder - An optional string to display as the placeholder of the dropdown
-@property disabled - An optional boolean to disable the dropdown
-@property dataTestId - An optional string to use as the data-testid attribute for the dropdown
-@property errorMessage - An optional string to display as an error message for the dropdown
-@property required - An optional boolean to indicate if the dropdown is required
-@property variant - An optional string to set the variant of the dropdown
-*/
-type DefaultProps = {
-    label: string;
-    placeholder?: string;
-    disabled?: boolean;
-    id?: string;
-    dataTestId?: string;
-    errorMessage?: string;
-    required?: boolean;
-    variant?: StyleVariants;
-    onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
-    onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
-};
-/**
-  Props for Dropdown component
-  @extends DefaultProps
-  @property optionList - An optional array of option objects to display in the dropdown
-  @property filterOptionsParam - An optional function that filters the option list based on input value
-  @property urlFilterOptions - An optional string representing the url to fetch options
-  @property setSelectedOption - A function to set the selected option
-  @property selectedOption - An optional object representing the currently selected option
-  */
-export type DropdownProps = DefaultProps & {
-    optionList?: OptionType[];
-    /**
-     * An optional function that filters the option list based on input value
-     * The function can be get by the current optionList or can get by url from server side
-     * @example
-     * // Filter by current optionList
-     * function filterOptions(inputValue: string, optionList?: OptionType[]) {
-     *  if (!optionList) return [];
-     *  if (!inputValue) return optionList;
-     *  return optionList.filter(
-     *    (opt) =>
-     *      opt.label.toLowerCase().search(inputValue.trim().toLowerCase()) !== -1
-     *    );
-     *  }
-     * @example
-     * // Filter by url
-     * function filterOptions(inputValue: string, optionList?: OptionType[], urlValue?: string) {
-     *  if (!inputValue || !urlValue) return [];
-     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
-     *    .then(response => {
-     *      if (!response.ok) {
-     *        throw new Error('Network response was not ok');
-     *      }
-     *      return response.json();
-     *    })
-     *    .then(data => {
-     *      const options: OptionType[] = data.map(option => ({
-     *        label: option.name,
-     *        value: option.id
-     *     }));
-     *     return options;
-     *  });
-     * }
-     */
-    filterOptionsParam?: (inputValue: string, optionList?: OptionType[], urlValue?: string) => OptionType[] | Promise<OptionType[]>;
-    urlFilterOptions?: string;
-    /**
-     * A function to set the selected option it's possible to use a void function or useStateFunction
-     * @example useStateFunction
-     * const [selectedOption, setSelectedOption] = useState<OptionType>();
-     * <Dropdown setSelectedOption={setSelectedOption} />
-     * @example void
-     * const manipulateData = (selectedOption?: OptionType) => {
-     *  console.log(selectedOption);
-     * }
-     * <Dropdown setSelectedOption={manipulateData} />
-     */
-    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
-    value?: string;
-};
-/**
-  Props for DropdownOptionsWithHeaders component
-  @extends DefaultProps
-  @property optionList - An optional array of option objects to display in the dropdown with headers
-  @property filterOptionsParam - An optional function that filters the option list based on input value
-  @property urlFilterOptions - An optional string representing the url to fetch options
-  @property setSelectedOption - A function to set the selected option
-  @property selectedOption - An optional object representing the currently selected option
-  */
-export type DropdownWithHeadersProps = DefaultProps & {
-    optionList?: OptionWithHeaderType[];
-    /**
-     * An optional function that filters the option list based on input value
-     * The function can be get by the current optionList or can get by url from server side
-     * @example
-     * // Filter by current optionList
-     * function filterOptionsWithHeaders(
-     *  inputValue: string,
-     *  optionList?: OptionWithHeaderType[]
-     * ) {
-     *  if (!optionList) return [];
-     *  if (!inputValue) return optionList;
-     *  return optionList.map((element) => {
-     *    return {
-     *    ...element,
-     *    options: element.options.filter(
-     *     (subElement) =>
-     *       subElement.label
-     *         .toLowerCase()
-     *         .search(inputValue.trim().toLowerCase()) !== -1
-     *    ),
-     *   };
-     *  });
-     * }
-     * @example
-     * // Filter by url
-     * function filterOptions(inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) {
-     *  if (!inputValue || !urlValue) return [];
-     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
-     *    .then(response => {
-     *      if (!response.ok) {
-     *        throw new Error('Network response was not ok');
-     *      }
-     *      return response.json();
-     *    })
-     *    .then(data => {
-     *     return options as OptionWithHeaderType[];
-     *  });
-     * }
-     */
-    filterOptionsParam?: (inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) => OptionWithHeaderType[] | Promise<OptionWithHeaderType[]>;
-    urlFilterOptions?: string;
-    /**
-     * A function to set the selected option it's possible to use a void function or useStateFunction
-     * @example useStateFunction
-     * const [selectedOption, setSelectedOption] = useState<OptionType>();
-     * <Dropdown setSelectedOption={setSelectedOption} />
-     * @example void
-     * const manipulateData = (selectedOption?: OptionType) => {
-     *  console.log(selectedOption);
-     * }
-     * <Dropdown setSelectedOption={manipulateData} />
-     */
-    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
-    value?: string;
-};
-/**
-  Props for ReusableDropdownComponent component
-  This type will be private, it will be use by only by our ReusableDropdownComponent
-  @extends DefaultProps
-  @property setShowSelectComponent - A function to set the visibility of the dropdown
-  @property showSelectComponent - A boolean indicating the visibility of the dropdown
-  @property onChangeInputValue - A function to set the input value of the dropdown
-  @property onChangeInputLabel - A function to set the input label of the dropdown
-  @property inputValue - A string representing the input value of the dropdown
-  @property inputLabel - A string representing the input value of the dropdown that will show on field
-  @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
-  @property inputRef - A ref to the input element of the dropdown
-  */
-export type ReusableDropdownComponentProps = DefaultProps & {
-    setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
-    showSelectComponent: boolean;
-    onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;
-    onChangeInputLabel: React.Dispatch<React.SetStateAction<string>>;
-    inputValue: string;
-    inputLabel: string;
-    setSelectedOptionOnInputValue: () => void;
-    inputRef: React.RefObject<HTMLInputElement>;
-};
-export {};
+Default props for Dropdown component
+@property label - A string to display as the label of the dropdown
+@property placeholder - An optional string to display as the placeholder of the dropdown
+@property disabled - An optional boolean to disable the dropdown
+@property dataTestId - An optional string to use as the data-testid attribute for the dropdown
+@property errorMessage - An optional string to display as an error message for the dropdown
+@property required - An optional boolean to indicate if the dropdown is required
+@property variant - An optional string to set the variant of the dropdown
+*/
+type DefaultProps = {
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    dataTestId?: string;
+    errorMessage?: string;
+    required?: boolean;
+    variant?: StyleVariants;
+    onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
+    onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
+};
+/**
+  Props for Dropdown component
+  @extends DefaultProps
+  @property optionList - An optional array of option objects to display in the dropdown
+  @property filterOptionsParam - An optional function that filters the option list based on input value
+  @property urlFilterOptions - An optional string representing the url to fetch options
+  @property setSelectedOption - A function to set the selected option
+  @property selectedOption - An optional object representing the currently selected option
+  */
+export type DropdownProps = DefaultProps & {
+    optionList?: OptionType[];
+    /**
+     * An optional function that filters the option list based on input value
+     * The function can be get by the current optionList or can get by url from server side
+     * @example
+     * // Filter by current optionList
+     * function filterOptions(inputValue: string, optionList?: OptionType[]) {
+     *  if (!optionList) return [];
+     *  if (!inputValue) return optionList;
+     *  return optionList.filter(
+     *    (opt) =>
+     *      opt.label.toLowerCase().search(inputValue.trim().toLowerCase()) !== -1
+     *    );
+     *  }
+     * @example
+     * // Filter by url
+     * function filterOptions(inputValue: string, optionList?: OptionType[], urlValue?: string) {
+     *  if (!inputValue || !urlValue) return [];
+     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
+     *    .then(response => {
+     *      if (!response.ok) {
+     *        throw new Error('Network response was not ok');
+     *      }
+     *      return response.json();
+     *    })
+     *    .then(data => {
+     *      const options: OptionType[] = data.map(option => ({
+     *        label: option.name,
+     *        value: option.id
+     *     }));
+     *     return options;
+     *  });
+     * }
+     */
+    filterOptionsParam?: (inputValue: string, optionList?: OptionType[], urlValue?: string) => OptionType[] | Promise<OptionType[]>;
+    urlFilterOptions?: string;
+    /**
+     * A function to set the selected option it's possible to use a void function or useStateFunction
+     * @example useStateFunction
+     * const [selectedOption, setSelectedOption] = useState<OptionType>();
+     * <Dropdown setSelectedOption={setSelectedOption} />
+     * @example void
+     * const manipulateData = (selectedOption?: OptionType) => {
+     *  console.log(selectedOption);
+     * }
+     * <Dropdown setSelectedOption={manipulateData} />
+     */
+    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    value?: string;
+};
+/**
+  Props for DropdownOptionsWithHeaders component
+  @extends DefaultProps
+  @property optionList - An optional array of option objects to display in the dropdown with headers
+  @property filterOptionsParam - An optional function that filters the option list based on input value
+  @property urlFilterOptions - An optional string representing the url to fetch options
+  @property setSelectedOption - A function to set the selected option
+  @property selectedOption - An optional object representing the currently selected option
+  */
+export type DropdownWithHeadersProps = DefaultProps & {
+    optionList?: OptionWithHeaderType[];
+    /**
+     * An optional function that filters the option list based on input value
+     * The function can be get by the current optionList or can get by url from server side
+     * @example
+     * // Filter by current optionList
+     * function filterOptionsWithHeaders(
+     *  inputValue: string,
+     *  optionList?: OptionWithHeaderType[]
+     * ) {
+     *  if (!optionList) return [];
+     *  if (!inputValue) return optionList;
+     *  return optionList.map((element) => {
+     *    return {
+     *    ...element,
+     *    options: element.options.filter(
+     *     (subElement) =>
+     *       subElement.label
+     *         .toLowerCase()
+     *         .search(inputValue.trim().toLowerCase()) !== -1
+     *    ),
+     *   };
+     *  });
+     * }
+     * @example
+     * // Filter by url
+     * function filterOptions(inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) {
+     *  if (!inputValue || !urlValue) return [];
+     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
+     *    .then(response => {
+     *      if (!response.ok) {
+     *        throw new Error('Network response was not ok');
+     *      }
+     *      return response.json();
+     *    })
+     *    .then(data => {
+     *     return options as OptionWithHeaderType[];
+     *  });
+     * }
+     */
+    filterOptionsParam?: (inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) => OptionWithHeaderType[] | Promise<OptionWithHeaderType[]>;
+    urlFilterOptions?: string;
+    /**
+     * A function to set the selected option it's possible to use a void function or useStateFunction
+     * @example useStateFunction
+     * const [selectedOption, setSelectedOption] = useState<OptionType>();
+     * <Dropdown setSelectedOption={setSelectedOption} />
+     * @example void
+     * const manipulateData = (selectedOption?: OptionType) => {
+     *  console.log(selectedOption);
+     * }
+     * <Dropdown setSelectedOption={manipulateData} />
+     */
+    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    value?: string;
+};
+/**
+  Props for ReusableDropdownComponent component
+  This type will be private, it will be use by only by our ReusableDropdownComponent
+  @extends DefaultProps
+  @property setShowSelectComponent - A function to set the visibility of the dropdown
+  @property showSelectComponent - A boolean indicating the visibility of the dropdown
+  @property onChangeInputValue - A function to set the input value of the dropdown
+  @property onChangeInputLabel - A function to set the input label of the dropdown
+  @property inputValue - A string representing the input value of the dropdown
+  @property inputLabel - A string representing the input value of the dropdown that will show on field
+  @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
+  @property inputRef - A ref to the input element of the dropdown
+  */
+export type ReusableDropdownComponentProps = DefaultProps & {
+    setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
+    showSelectComponent: boolean;
+    onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;
+    onChangeInputLabel: React.Dispatch<React.SetStateAction<string>>;
+    inputValue: string;
+    inputLabel: string;
+    setSelectedOptionOnInputValue: () => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+};
+export {};

package/src/lib/molecules-dropdown.utils.d.ts

@@ -1,3 +1,3 @@
-import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
-export declare function filterOptions(inputValue: string, optionList?: OptionType[]): OptionType[];
-export declare function filterOptionsWithHeaders(inputValue: string, optionList?: OptionWithHeaderType[]): OptionWithHeaderType[];
+import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
+export declare function filterOptions(inputValue: string, optionList?: OptionType[]): OptionType[];
+export declare function filterOptionsWithHeaders(inputValue: string, optionList?: OptionWithHeaderType[]): OptionWithHeaderType[];

package/src/lib/molecules-reusable-dropdown-component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
-export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, }: ReusableDropdownComponentProps) => JSX.Element;
+import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
+export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;