@bolttech/molecules-dropdown 0.33.0 → 0.33.2

package/index.cjs

@@ -2272,7 +2272,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:", ";outline:", ";border-radius:", ";box-shadow:", ";margin-bottom:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}label.material-symbols-sharp{color:", ";}&:focus-within{background-color:", ";outline:", ";", "}", " ", ""], ({
+})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";outline:", ";outline-offset:calc(", "* -1);border-radius:", ";box-shadow:", ";margin-bottom:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}label.material-symbols-sharp{color:", ";}&:focus-within{background-color:", ";outline:", ";", "}", " ", ""], ({
   theme
 }) => theme.components.dropdown.paddingVertical, ({
   theme
@@ -2290,6 +2290,8 @@ const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withCo
   $variant
 }) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border.default}`, ({
   theme
+}) => theme.components.dropdown.borderWidth.default, ({
+  theme
 }) => theme.components.dropdown.borderRadius, ({
   theme: {
     effects: {
@@ -2764,12 +2766,18 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
-    if (value && value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
       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) || '');
-      if (!asyncOptionList) {
-        setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+      if (!value && internalSelectedOption) {
+        setInternalSelectedOption(undefined);
+        setInputValue('');
+        setInputLabel('');
+      } else if (foundOption) {
+        setInternalSelectedOption(foundOption);
+        setInputValue((foundOption === null || foundOption === void 0 ? void 0 : foundOption.value) || '');
+        if (!asyncOptionList) {
+          setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+        }
       }
     }
     if (!isFirstRender || currentOptionList.length === 0) return;
@@ -2915,14 +2923,20 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
-    if (value && value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
       const option = optionList === null || optionList === void 0 ? void 0 : optionList.map(currentOptionsList => {
         return currentOptionsList.options.find(option => option.id === value);
       }).find(item => !!item);
-      setInternalSelectedOption(option);
-      setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
-      if (!asyncOptionList) {
-        setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      if (!value && internalSelectedOption) {
+        setInternalSelectedOption(undefined);
+        setInputValue('');
+        setInputLabel('');
+      } else if (option) {
+        setInternalSelectedOption(option);
+        setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
+        if (!asyncOptionList) {
+          setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+        }
       }
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
@@ -9,7 +9,7 @@
     "@bolttech/atoms-input": "0.27.0",
     "@bolttech/atoms-select": "0.24.0",
     "@bolttech/default-theme": "0.10.0",
-    "@bolttech/form-engine": "3.1.0-beta.13",
+    "@bolttech/form-engine": "3.1.0-beta.21",
     "@bolttech/frontend-foundations": "0.10.0",
     "@bolttech/ui-utils": "0.5.0",
     "react": "18.2.0",