@bolttech/molecules-dropdown 0.5.0 → 0.6.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.5.0",
+  "version": "0.6.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.6.0",
+    "@bolttech/atoms-input": "0.6.0",
+    "@bolttech/atoms-select": "0.6.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?: OptionType;
-};
-/**
-  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?: OptionType;
-};
-/**
-  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;