@bolttech/molecules-dropdown 0.1.13 → 0.2.0

package/index.cjs

@@ -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"
-})([".errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+})(["position:relative;.errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
   theme
 }) => theme.components.dropdown.paddingHorizontal, ({
   theme
@@ -2408,6 +2408,10 @@ 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:100%;"]);
 
 const ReusableDropdownComponent = ({
   label,
@@ -2439,7 +2443,7 @@ const ReusableDropdownComponent = ({
       "data-testid": `${dataTestId}-dropdown-container`
     }, {
       children: [jsxRuntime.jsxs(ContentDropdown, {
-        children: [jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
+        children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
           onClick: () => {
             setShowSelectComponent(disabled ? false : !showSelectComponent);
           }
@@ -2696,7 +2700,7 @@ const Dropdown = ({
       onChangeInputValue: setInputValue,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
       onChangeInputLabel: setInputLabel
-    }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
+    }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.Select, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
@@ -2780,7 +2784,7 @@ const DropdownOptionsWithHeaders = ({
       onChangeInputValue: setInputValue,
       onChangeInputLabel: setInputLabel,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
-    }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
+    }), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "dependencies": {
     "@bolttech/atoms-icon": "0.1.8",
     "@bolttech/atoms-input": "0.0.1",
-    "@bolttech/atoms-select": "0.1.8",
-    "@edirect/frontend-foundations": "0.0.37",
+    "@bolttech/atoms-select": "0.2.0",
+    "@edirect/frontend-foundations": "0.0.49",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "styled-components": "5.3.6"

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;
+export declare const DropdownOptionsWithHeaders: ({ label, variant, required, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder, }: DropdownOptionsWithHeadersProps) => JSX.Element;

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

@@ -11,4 +11,5 @@ export declare const SectionContainer: import("styled-components").StyledCompone
 export declare const InputAndIconDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ContentDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FieldLabelAndRequiredLabelDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DropdownOptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};