@bolttech/molecules-dropdown 0.22.0 → 0.22.2

package/index.cjs

@@ -2459,9 +2459,11 @@ const ReusableDropdownComponent = _a => {
       inputRef,
       placeholder,
       onBlur,
-      onFocus
+      onFocus,
+      onKeyUp,
+      onKeyDown
     } = _a,
-    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus"]);
+    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus", "onKeyUp", "onKeyDown"]);
   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();
@@ -2516,8 +2518,10 @@ const ReusableDropdownComponent = _a => {
               setSelectedOptionOnInputValue();
               setShowSelectComponent(false);
               onBlur && onBlur(event);
-            }
-          }, props, uiUtils.applyDataAttributes(props, 'input')))
+            },
+            onKeyUp: onKeyUp,
+            onKeyDown: onKeyDown
+          }, uiUtils.applyDataAttributes(props, 'input')))
         })]
       }), jsxRuntime.jsx(ClickableElement, {
         onClick: () => {
@@ -2682,9 +2686,11 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onChange,
       onBlur,
       onFocus,
-      placeholder
+      placeholder,
+      onKeyUp,
+      onKeyDown
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2727,12 +2733,14 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       const foundOption = optionList === null || optionList === void 0 ? void 0 : optionList.find(option => option.id === value);
       setInternalSelectedOption(foundOption);
       setInputValue((foundOption === null || foundOption === void 0 ? void 0 : foundOption.value) || '');
-      setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+      if (!onKeyUp && !onKeyDown) {
+        setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+      }
     }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
-  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender]);
+  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     id: `${id}-container`,
@@ -2764,7 +2772,9 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
       onChangeInputLabel: setInputLabel,
       onBlur: onBlur,
-      onFocus: onFocus
+      onFocus: onFocus,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown
     }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.Select, Object.assign({
         id: `${id}-select`,
@@ -2801,9 +2811,11 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onChange,
       onBlur,
       onFocus,
-      placeholder
+      placeholder,
+      onKeyUp,
+      onKeyDown
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2850,7 +2862,9 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       })[0]) || undefined;
       setInternalSelectedOption(option);
       setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
-      setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      if (!onKeyUp && !onKeyDown) {
+        setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      }
       return;
     }
     if (!isFirstRender || currentOptionList.length === 0) return;
@@ -2885,7 +2899,9 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onChangeInputLabel: setInputLabel,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
       onBlur: onBlur,
-      onFocus: onFocus
+      onFocus: onFocus,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown
     }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, Object.assign({
         dataTestId: `${dataTestId}-select`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { OptionWithHeaderType, OptionType } from '@bolttech/atoms-select';
-export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<HTMLInputElement>, "children" | "dangerouslySetInnerHTML" | "onChange" | "onBlur" | "onFocus"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string | undefined;
     disabled?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { OptionType } from '@bolttech/atoms-select';
-export declare const Dropdown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<HTMLInputElement>, "children" | "dangerouslySetInnerHTML" | "onChange" | "onBlur" | "onFocus"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string | undefined;
     disabled?: boolean | undefined;

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

@@ -40,7 +40,7 @@ type DefaultDropdownProps = {
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
   */
-export type DropdownProps = Omit<DOMAttributes<HTMLInputElement>, 'children' | 'dangerouslySetInnerHTML' | 'onChange' | 'onBlur' | 'onFocus'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionType[];
     /**
      * An optional function that filters the option list based on input value
@@ -100,7 +100,7 @@ export type DropdownProps = Omit<DOMAttributes<HTMLInputElement>, 'children' | '
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
   */
-export type DropdownWithHeadersProps = Omit<DOMAttributes<HTMLInputElement>, 'children' | 'dangerouslySetInnerHTML' | 'onChange' | 'onBlur' | 'onFocus'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionWithHeaderType[];
     /**
      * An optional function that filters the option list based on input value
@@ -170,7 +170,7 @@ export type DropdownWithHeadersProps = Omit<DOMAttributes<HTMLInputElement>, 'ch
   @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 & Omit<DOMAttributes<HTMLInputElement>, 'children' | 'dangerouslySetInnerHTML' | 'onChange' | 'onBlur' | 'onFocus'> & DefaultDropdownProps & {
+export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
     setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;

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

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