@bolttech/molecules-dropdown 0.31.0 → 0.32.0

package/index.cjs

@@ -135,10 +135,10 @@ var SHARED = '__core-js_shared__';
 var store$3 = sharedStore.exports = globalThis$e[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.38.1',
+  version: '3.39.0',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.38.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -237,9 +237,9 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$e(func
 /* eslint-disable es/no-symbol -- required for testing */
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 
-var useSymbolAsUid = NATIVE_SYMBOL$1
-  && !Symbol.sham
-  && typeof Symbol.iterator == 'symbol';
+var useSymbolAsUid = NATIVE_SYMBOL$1 &&
+  !Symbol.sham &&
+  typeof Symbol.iterator == 'symbol';
 
 var globalThis$a = globalThis_1;
 var shared$3 = shared$4;
@@ -2390,7 +2390,11 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
 const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
-})(["position:relative;.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";margin-top:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+})(["position:relative;.top{top:-", ";transform:translateY(-100%);}.bottom{top:", ";}.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";margin-top:", ";label{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+  theme
+}) => theme.components.dropdown.borderWidth.default, ({
+  theme
+}) => `calc(100% +  ${theme.components.dropdown.borderWidth.default})`, ({
   theme
 }) => theme.components.dropdown.paddingHorizontal, ({
   theme
@@ -2440,10 +2444,6 @@ const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default["default
 })(["gap:", ";display:flex;"], ({
   theme
 }) => theme.components.dropdown.requiredGap);
-const DropdownOptionsContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "molecules-dropdownstyles__DropdownOptionsContainer",
-  componentId: "sc-3wugi4-6"
-})(["position:absolute;inset:0;top:calc(100% + 1px);"]);
 
 const ReusableDropdownComponent = _a => {
   var {
@@ -2519,17 +2519,21 @@ const ReusableDropdownComponent = _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: event => {
+              setShowSelectComponent(true);
               onChangeInputValue('');
               onChangeInputLabel('');
-              setShowSelectComponent(true);
               onFocus && onFocus(event);
             },
             onBlur: event => {
-              setSelectedOptionOnInputValue();
+              var _a, _b;
+              if ((_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.contains(event.currentTarget)) {
+                (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                return;
+              }
               setShowSelectComponent(false);
+              setSelectedOptionOnInputValue();
               onBlur && onBlur(event);
             },
             onKeyUp: onKeyUp,
@@ -2714,7 +2718,17 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
   const inputRef = react.useRef(null);
+  const selectRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const {
+    addOpenPositionClass,
+    resetPositionClass
+  } = uiUtils.useOpenPosition(selectRef, containerRef, ['top', 'bottom'], 'bottom');
   react.useEffect(() => {
+    if (!showSelectComponent) {
+      setCurrentOptionList(optionList || []);
+      return;
+    }
     if ((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) === inputValue) {
       setCurrentOptionList([]);
     } else {
@@ -2725,7 +2739,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
         setCurrentOptionList([...optionsResponse]);
       }).catch(error => console.error('An error happens when trying to normalize options', error));
     }
-  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
+  }, [showSelectComponent, filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
@@ -2764,7 +2778,14 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     style: {
       maxWidth: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.style.width
     },
-    ref: ref
+    ref: instance => {
+      containerRef.current = instance;
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (typeof ref === 'object' && ref) {
+        ref.current = instance;
+      }
+    }
   }, uiUtils.applyDataAttributes(props), {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
       id: id,
@@ -2779,7 +2800,12 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       showSelectComponent: showSelectComponent,
       inputRef: inputRef,
       placeholder: placeholder,
-      setShowSelectComponent: setShowSelectComponent,
+      setShowSelectComponent: show => {
+        reactDom.flushSync(() => {
+          setShowSelectComponent(show);
+        });
+        show ? addOpenPositionClass() : resetPositionClass();
+      },
       onChangeInputValue: setInputValue,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
       onChangeInputLabel: setInputLabel,
@@ -2788,26 +2814,25 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onKeyUp: onKeyUp,
       onKeyDown: onKeyDown,
       disableSearch: disableSearch
-    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
-      children: jsxRuntime.jsx(atomsSelect.Select, Object.assign({
-        id: `${id}-select`,
-        dataTestId: `${dataTestId}-select`,
-        onChange: selectedValue => {
-          var _a;
-          if (!selectedValue.disabled) {
-            setInputValue(selectedValue.value);
-            setInputLabel(selectedValue.label);
-            setInternalSelectedOption(Object.assign({}, selectedValue));
-            reactDom.flushSync(() => {
-              onChange(selectedValue);
-            });
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-          }
-        },
-        active: internalSelectedOption,
-        options: currentOptionList
-      }, uiUtils.applyDataAttributes(props, 'select')))
-    })]
+    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(atomsSelect.Select, Object.assign({
+      id: `${id}-select`,
+      dataTestId: `${dataTestId}-select`,
+      onChange: selectedValue => {
+        var _a;
+        if (!selectedValue.disabled) {
+          setInputValue(selectedValue.value);
+          setInputLabel(selectedValue.label);
+          setInternalSelectedOption(Object.assign({}, selectedValue));
+          reactDom.flushSync(() => {
+            onChange(selectedValue);
+          });
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+      },
+      ref: selectRef,
+      active: internalSelectedOption,
+      options: currentOptionList
+    }, uiUtils.applyDataAttributes(props, 'select')))]
   }));
 });
 
@@ -2840,7 +2865,17 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
   const inputRef = react.useRef(null);
+  const selectRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const {
+    addOpenPositionClass,
+    resetPositionClass
+  } = uiUtils.useOpenPosition(selectRef, containerRef, ['top', 'bottom'], 'bottom');
   react.useEffect(() => {
+    if (!showSelectComponent) {
+      setCurrentOptionList(optionList || []);
+      return;
+    }
     if ((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) === inputValue) {
       setCurrentOptionList([]);
     } else {
@@ -2851,7 +2886,7 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
         setCurrentOptionList([...optionsResponse]);
       }).catch(error => console.error('An error happens when trying to normalize options', error));
     }
-  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
+  }, [showSelectComponent, filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
@@ -2895,7 +2930,14 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     "data-testid": `${dataTestId}-container`,
-    ref: ref
+    ref: instance => {
+      containerRef.current = instance;
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (typeof ref === 'object' && ref) {
+        ref.current = instance;
+      }
+    }
   }, uiUtils.applyDataAttributes(props), {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
       label: label,
@@ -2909,7 +2951,12 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       showSelectComponent: showSelectComponent,
       inputRef: inputRef,
       placeholder: placeholder,
-      setShowSelectComponent: setShowSelectComponent,
+      setShowSelectComponent: show => {
+        reactDom.flushSync(() => {
+          setShowSelectComponent(show);
+        });
+        show ? addOpenPositionClass() : resetPositionClass();
+      },
       onChangeInputValue: setInputValue,
       onChangeInputLabel: setInputLabel,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
@@ -2918,23 +2965,22 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onKeyUp: onKeyUp,
       onKeyDown: onKeyDown,
       disableSearch: disableSearch
-    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
-      children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, Object.assign({
-        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: internalSelectedOption,
-        options: currentOptionList
-      }, uiUtils.applyDataAttributes(props, 'select')))
-    })]
+    }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(atomsSelect.SelectWithHeaders, Object.assign({
+      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: internalSelectedOption,
+      ref: selectRef,
+      options: currentOptionList
+    }, uiUtils.applyDataAttributes(props, 'select')))]
   }));
 });
 

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@bolttech/atoms-icon": "0.23.0",
-    "@bolttech/atoms-input": "0.26.0",
+    "@bolttech/atoms-input": "0.26.1",
     "@bolttech/atoms-select": "0.22.0",
-    "@bolttech/default-theme": "0.8.0",
-    "@bolttech/form-engine": "3.0.1-beta.7",
-    "@bolttech/frontend-foundations": "0.9.3",
-    "@bolttech/ui-utils": "0.4.0",
+    "@bolttech/default-theme": "0.9.0",
+    "@bolttech/form-engine": "3.1.0-beta.13",
+    "@bolttech/frontend-foundations": "0.10.0",
+    "@bolttech/ui-utils": "0.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "6.1.1"

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

@@ -183,7 +183,7 @@ export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'on
   @property inputRef - A ref to the input element of the dropdown
   */
 export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
-    setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowSelectComponent: (show: boolean) => void;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;
     onChangeInputLabel: React.Dispatch<React.SetStateAction<string>>;