@bolttech/molecules-dropdown 0.1.8 → 0.1.9

package/index.cjs

@@ -2252,7 +2252,7 @@ const ClickableElement = /*#__PURE__*/styled__default["default"].div.withConfig(
 const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__ContainerDropdown",
   componentId: "sc-3wugi4-1"
-})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";border:", ";border-radius:", ";box-shadow:", ";.fieldLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}svg{fill:", ";}&:focus-within{background-color:", ";border:", ";", "}", " ", ""], ({
+})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";border:", ";border-radius:", ";box-shadow:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}svg{fill:", ";}&:focus-within{background-color:", ";border:", ";", "}", " ", ""], ({
   theme
 }) => theme.components.dropdown.paddingVertical, ({
   theme
@@ -2374,7 +2374,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
-})(["width:fit-content;.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+})([".errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
   theme
 }) => theme.components.dropdown.paddingHorizontal, ({
   theme
@@ -2399,7 +2399,7 @@ const InputAndIconDropdown = /*#__PURE__*/styled__default["default"].div.withCon
 const ContentDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "molecules-dropdownstyles__ContentDropdown",
   componentId: "sc-3wugi4-4"
-})(["display:flex;flex-direction:column;gap:", ";"], ({
+})(["flex:1;display:flex;flex-direction:column;gap:", ";"], ({
   theme
 }) => theme.components.dropdown.contentGap);
 const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -2414,10 +2414,12 @@ const ReusableDropdownComponent = ({
   variant: _variant = 'grey',
   required,
   inputValue,
+  inputLabel,
   hasError,
   disabled,
   errorMessage,
   onChangeInputValue,
+  onChangeInputLabel,
   setShowSelectComponent,
   showSelectComponent,
   setSelectedOptionOnInputValue,
@@ -2458,16 +2460,18 @@ const ReusableDropdownComponent = ({
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
             disabled: disabled,
-            value: inputValue,
+            value: inputLabel,
             variant: _variant,
             placeholder: placeholder,
             onChange: e => {
-              var _a;
+              var _a, _b;
               onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
+              onChangeInputLabel(((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) || '');
               setShowSelectComponent(true);
             },
             onFocus: () => {
               onChangeInputValue('');
+              onChangeInputLabel('');
               setShowSelectComponent(true);
             },
             onBlur: () => {
@@ -2638,9 +2642,11 @@ const Dropdown = ({
   setSelectedOption,
   placeholder
 }) => {
+  var _a;
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
+  const [inputLabel, setInputLabel] = react.useState('');
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2651,11 +2657,15 @@ const Dropdown = ({
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
       return;
     }
     if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
       const isValidValue = currentOptionList.some(currentOption => currentOption.value === inputValue);
-      if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      if (!isValidValue) {
+        setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+        setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
+      }
     }
   }, [currentOptionList, inputValue, selectedOption]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
@@ -2664,13 +2674,17 @@ const Dropdown = ({
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     variant: _variant,
-    "data-testid": `${dataTestId}-container`
+    "data-testid": `${dataTestId}-container`,
+    style: {
+      maxWidth: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.style.width
+    }
   }, {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
       required: required,
       inputValue: inputValue,
+      inputLabel: inputLabel,
       dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
@@ -2680,12 +2694,14 @@ const Dropdown = ({
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
-      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
+      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
+      onChangeInputLabel: setInputLabel
     }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
       children: jsxRuntime.jsx(atomsSelect.Select, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           setInputValue(selectedValue.value);
+          setInputLabel(selectedValue.label);
           setSelectedOption(selectedValue);
         },
         active: selectedOption,
@@ -2713,6 +2729,7 @@ const DropdownOptionsWithHeaders = ({
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
+  const [inputLabel, setInputLabel] = react.useState('');
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2723,6 +2740,7 @@ const DropdownOptionsWithHeaders = ({
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
       return;
     }
     if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
@@ -2731,7 +2749,10 @@ const DropdownOptionsWithHeaders = ({
         isValidValue = currentOptionsGroup.options.some(currentOption => currentOption.value === inputValue);
         if (isValidValue) return;
       });
-      if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      if (!isValidValue) {
+        setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
+        setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      }
     }
   }, [currentOptionList, inputValue, selectedOption]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
@@ -2747,6 +2768,7 @@ const DropdownOptionsWithHeaders = ({
       variant: _variant,
       required: required,
       inputValue: inputValue,
+      inputLabel: inputLabel,
       dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
@@ -2756,11 +2778,13 @@ const DropdownOptionsWithHeaders = ({
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
+      onChangeInputLabel: setInputLabel,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
     }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
+          setInputLabel(selectedValue.label);
           setInputValue(selectedValue.value);
           setSelectedOption(selectedValue);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "dependencies": {
     "@bolttech/atoms-icon": "0.0.1",
     "@bolttech/atoms-input": "0.0.1"
@@ -9,7 +9,8 @@
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "peerDependencies": {
-    "@bolttech/atoms-select": "0.1.5",
+    "@bolttech/atoms-select": "0.1.6",
+    "@edirect/frontend-foundations": "0.0.36",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "styled-components": "5.3.6"

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, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder, }: DropdownProps) => JSX.Element;

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

@@ -160,7 +160,9 @@ export type DropdownOptionsWithHeadersProps = 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
   */
@@ -168,7 +170,9 @@ 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>;
 };

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, hasError, disabled, errorMessage, onChangeInputValue, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, dataTestId, placeholder, }: ReusableDropdownComponentProps) => JSX.Element;
+export declare const ReusableDropdownComponent: ({ label, variant, required, inputValue, inputLabel, hasError, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, dataTestId, placeholder, }: ReusableDropdownComponentProps) => JSX.Element;