@bolttech/molecules-dropdown 0.4.3 → 0.5.1

package/index.cjs

@@ -2414,12 +2414,13 @@ const DropdownOptionsContainer = /*#__PURE__*/styled__default["default"].div.wit
 })(["position:absolute;inset:0;top:100%;"]);
 
 const ReusableDropdownComponent = ({
+  id,
+  dataTestId,
   label,
   variant: _variant = 'grey',
   required,
   inputValue,
   inputLabel,
-  hasError,
   disabled,
   errorMessage,
   onChangeInputValue,
@@ -2428,9 +2429,11 @@ const ReusableDropdownComponent = ({
   showSelectComponent,
   setSelectedOptionOnInputValue,
   inputRef,
-  dataTestId,
-  placeholder
+  placeholder,
+  onBlur,
+  onFocus
 }) => {
+  const hasError = !!errorMessage;
   // we have to type cast because of jest. when testing it sets the type of useTheme to DefaultTheme
   const theme = /*#__PURE__*/styled.useTheme();
   const sizeIcon = Number(theme.components.dropdown.icon.size.replace(/[^\d.-]+/g, ''));
@@ -2449,11 +2452,12 @@ const ReusableDropdownComponent = ({
           }
         }, {
           children: [jsxRuntime.jsx("label", Object.assign({
+            htmlFor: `${id}-input`,
             className: "fieldLabel",
             "data-testid": `${dataTestId}-label`
           }, {
             children: label
-          })), required && jsxRuntime.jsx("label", Object.assign({
+          })), required && jsxRuntime.jsx("span", Object.assign({
             className: "requiredLabel",
             "data-testid": `${dataTestId}-label-required`
           }, {
@@ -2461,6 +2465,7 @@ const ReusableDropdownComponent = ({
           }))]
         })), jsxRuntime.jsx(InputAndIconDropdown, {
           children: jsxRuntime.jsx(atomsInput.InputStyled, {
+            id: `${id}-input`,
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
             disabled: disabled,
@@ -2473,14 +2478,16 @@ const ReusableDropdownComponent = ({
               onChangeInputLabel(((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) || '');
               setShowSelectComponent(true);
             },
-            onFocus: () => {
+            onFocus: event => {
               onChangeInputValue('');
               onChangeInputLabel('');
               setShowSelectComponent(true);
+              onFocus && onFocus(event);
             },
-            onBlur: () => {
+            onBlur: event => {
               setSelectedOptionOnInputValue();
               setShowSelectComponent(false);
+              onBlur && onBlur(event);
             }
           })
         })]
@@ -2635,15 +2642,17 @@ const Dropdown = ({
   label,
   variant: _variant = 'grey',
   required,
-  hasError,
   optionList,
   disabled,
   errorMessage,
   urlFilterOptions,
-  dataTestId,
+  id: _id = 'dropdown-id',
+  dataTestId: _dataTestId = 'dropdown-data-testid',
   filterOptionsParam: _filterOptionsParam = filterOptions,
-  selectedOption,
-  setSelectedOption,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
   placeholder
 }) => {
   var _a;
@@ -2651,7 +2660,8 @@ const Dropdown = ({
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
-  const [internalSelectedOption, setInternalSelectedOption] = react.useState(selectedOption);
+  const [internalSelectedOption, setInternalSelectedOption] = react.useState();
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2676,45 +2686,54 @@ const Dropdown = ({
   react.useEffect(() => {
     setSelectedOptionOnInputValue();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [internalSelectedOption]);
+  react.useEffect(() => {
+    if (!isFirstRender || currentOptionList.length === 0) return;
+    setInternalSelectedOption(currentOptionList.find(option => option.id === value));
+    setIsFirstRender(false);
+  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     variant: _variant,
-    "data-testid": `${dataTestId}-container`,
+    id: `${_id}-container`,
+    "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,
       label: label,
       variant: _variant,
       required: required,
       inputValue: inputValue,
       inputLabel: inputLabel,
-      dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
-      hasError: hasError,
       showSelectComponent: showSelectComponent,
       inputRef: inputRef,
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
-      onChangeInputLabel: setInputLabel
+      onChangeInputLabel: setInputLabel,
+      onBlur: onBlur,
+      onFocus: onFocus
     }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.Select, {
-        dataTestId: `${dataTestId}-select`,
+        id: `${_id}-select`,
+        dataTestId: `${_dataTestId}-select`,
         onChange: selectedValue => {
           var _a;
           setInputValue(selectedValue.value);
           setInputLabel(selectedValue.label);
           setInternalSelectedOption(Object.assign({}, selectedValue));
           reactDom.flushSync(() => {
-            setSelectedOption(selectedValue);
+            onChange(selectedValue);
           });
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         },
@@ -2725,34 +2744,29 @@ const Dropdown = ({
   }));
 };
 
-const DropdownOptionsWithHeaders = ({
+const DropdownWithHeaders = ({
   label,
   variant: _variant = 'grey',
   required,
-  hasError,
   optionList,
   disabled,
   errorMessage,
   urlFilterOptions,
   dataTestId,
   filterOptionsParam: _filterOptionsParam = filterOptionsWithHeaders,
-  selectedOption,
-  setSelectedOption,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
   placeholder
 }) => {
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
-  const [internalSelectedOption, setInternalSelectedOption] = react.useState(selectedOption);
+  const [internalSelectedOption, setInternalSelectedOption] = react.useState();
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
-  react.useEffect(() => {
-    var _a;
-    if (internalSelectedOption) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      setSelectedOption(internalSelectedOption);
-    }
-  }, [internalSelectedOption, setSelectedOption]);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
       return yield _filterOptionsParam(inputValue, optionList, urlFilterOptions);
@@ -2777,6 +2791,17 @@ const DropdownOptionsWithHeaders = ({
       }
     }
   }, [currentOptionList, inputValue, internalSelectedOption]);
+  react.useEffect(() => {
+    setSelectedOptionOnInputValue();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [internalSelectedOption]);
+  react.useEffect(() => {
+    if (!isFirstRender || currentOptionList.length === 0) return;
+    setInternalSelectedOption(currentOptionList.map(optionsList => {
+      return optionsList.options.find(option => option.id === value);
+    })[0] || undefined);
+    setIsFirstRender(false);
+  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
@@ -2794,23 +2819,29 @@ const DropdownOptionsWithHeaders = ({
       dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
-      hasError: hasError,
       showSelectComponent: showSelectComponent,
       inputRef: inputRef,
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
       onChangeInputLabel: setInputLabel,
-      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
+      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
+      onBlur: onBlur,
+      onFocus: onFocus
     }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
+          var _a;
           setInputLabel(selectedValue.label);
           setInputValue(selectedValue.value);
           setInternalSelectedOption(Object.assign({}, selectedValue));
+          reactDom.flushSync(() => {
+            onChange(selectedValue);
+          });
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         },
-        active: selectedOption,
+        active: internalSelectedOption,
         options: currentOptionList
       })
     })]
@@ -2818,4 +2849,4 @@ const DropdownOptionsWithHeaders = ({
 };
 
 exports.Dropdown = Dropdown;
-exports.DropdownOptionsWithHeaders = DropdownOptionsWithHeaders;
+exports.DropdownWithHeaders = DropdownWithHeaders;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.5.0",
-    "@bolttech/atoms-input": "0.0.1",
-    "@bolttech/atoms-select": "0.5.0",
-    "@edirect/frontend-foundations": "0.0.53",
+    "@bolttech/atoms-icon": "0.5.1",
+    "@bolttech/atoms-input": "0.5.0",
+    "@bolttech/atoms-select": "0.5.1",
+    "@edirect/frontend-foundations": "0.0.55",
     "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 { DropdownOptionsWithHeaders } from './lib/molecules-dropdown-with-header-options';
-export type { DropdownProps, DropdownOptionsWithHeadersProps } from './lib/molecules-dropdown.type';
+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 { DropdownOptionsWithHeadersProps } from './molecules-dropdown.type';
-export declare const DropdownOptionsWithHeaders: ({ label, variant, required, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder, }: DropdownOptionsWithHeadersProps) => JSX.Element;
+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, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder, }: DropdownProps) => JSX.Element;
+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.type.d.ts

@@ -13,7 +13,6 @@ Default props for Dropdown component
 @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 hasError - An optional boolean to indicate if the dropdown has an error
 @property required - An optional boolean to indicate if the dropdown is required
 @property variant - An optional string to set the variant of the dropdown
 */
@@ -21,11 +20,13 @@ type DefaultProps = {
     label: string;
     placeholder?: string;
     disabled?: boolean;
+    id?: string;
     dataTestId?: string;
     errorMessage?: string;
-    hasError?: boolean;
     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
@@ -84,8 +85,8 @@ export type DropdownProps = DefaultProps & {
      * }
      * <Dropdown setSelectedOption={manipulateData} />
      */
-    setSelectedOption: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
-    selectedOption?: OptionType;
+    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    value?: string;
 };
 /**
   Props for DropdownOptionsWithHeaders component
@@ -96,7 +97,7 @@ export type DropdownProps = DefaultProps & {
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
   */
-export type DropdownOptionsWithHeadersProps = DefaultProps & {
+export type DropdownWithHeadersProps = DefaultProps & {
     optionList?: OptionWithHeaderType[];
     /**
      * An optional function that filters the option list based on input value
@@ -150,8 +151,8 @@ export type DropdownOptionsWithHeadersProps = DefaultProps & {
      * }
      * <Dropdown setSelectedOption={manipulateData} />
      */
-    setSelectedOption: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
-    selectedOption?: OptionType;
+    onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    value?: string;
 };
 /**
   Props for ReusableDropdownComponent component

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

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