@bolttech/molecules-dropdown 0.34.2 → 0.37.0

package/README.md

@@ -71,6 +71,7 @@ The **Dropdown** component accepts the following props:
 | `onKeyDown`      | `boolean`      | Onkeydown is an event handler in Javascript that gets called when a key is pressed on the keyboard |
 | `asyncOptionList`      | `boolean`      | A boolean prop that controls a different behavior when OptionList are set by an API request |
 | `helperMessage`     | `string`   | An optional string to display as a helper message for the dropdown                                                    |
+| `usePortal`         | `boolean`  | Renders the dropdown options in a portal (`document.body`), useful when inside overflow containers like modals. Defaults to `false`. |
 
 ## Functionality
 

package/index.cjs.js

@@ -2678,7 +2678,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:", ";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:", ";", "}", " ", ""], ({
+})(["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:", ";margin:0;}.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
@@ -2758,7 +2758,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default.default.section.withConfi
 }) => theme.components.dropdown[$variant].icon.color.focus), ({
   $hasError,
   $hasValue
-}) => $hasError && styled.css(["outline:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}label.material-symbols-sharp{color:", ";}"], ({
+}) => $hasError && styled.css(["outline:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}span.material-symbols-sharp,label.material-symbols-sharp{color:", ";}"], ({
   theme,
   $variant
 }) => `${theme.components.dropdown.borderWidth.default} solid ${theme.components.dropdown[$variant].container.border[$hasValue ? 'errorFilled' : 'error']}`, ({
@@ -2802,7 +2802,7 @@ const ContainerDropdown = /*#__PURE__*/styled__default.default.section.withConfi
 const SectionContainer = /*#__PURE__*/styled__default.default.section.withConfig({
   displayName: "molecules-dropdownstyles__SectionContainer",
   componentId: "sc-3wugi4-2"
-})(["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:", ";}}"], ({
+})(["position:relative;.top{top:-", ";transform:translateY(-100%);}.bottom{top:", ";}.errorMessage{padding-right:", ";padding-left:", ";p{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}.helperMessage{padding-right:", ";padding-left:", ";margin-top:", ";p{color:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
   theme
 }) => theme.components.dropdown.borderWidth.default, ({
   theme
@@ -2856,6 +2856,16 @@ const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default.default.
 })(["gap:", ";display:flex;"], ({
   theme
 }) => theme.components.dropdown.requiredGap);
+const PortalContainer = /*#__PURE__*/styled__default.default.div.withConfig({
+  displayName: "molecules-dropdownstyles__PortalContainer",
+  componentId: "sc-3wugi4-6"
+})(["position:fixed;top:", ";left:", ";width:", ";z-index:10;"], ({
+  portalPosition
+}) => portalPosition.top, ({
+  portalPosition
+}) => portalPosition.left, ({
+  portalPosition
+}) => portalPosition.width);
 
 const ReusableDropdownComponent = _a => {
   var {
@@ -2906,8 +2916,8 @@ const ReusableDropdownComponent = _a => {
       },
       children: [jsxRuntime.jsxs(ContentDropdown, {
         children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, {
-          children: [jsxRuntime.jsx("label", {
-            htmlFor: `${id}-input`,
+          children: [jsxRuntime.jsx("p", {
+            id: `${id}-label`,
             className: "fieldLabel",
             "data-testid": `${dataTestId}-label`,
             children: label
@@ -2918,6 +2928,14 @@ const ReusableDropdownComponent = _a => {
           })]
         }), jsxRuntime.jsx(InputAndIconDropdown, {
           children: jsxRuntime.jsx(atomsInput.InputStyled, Object.assign({
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-owns": `${id}-listbox`,
+            "aria-disabled": disabled,
+            "aria-invalid": hasError,
+            "aria-required": required,
+            "aria-describedby": hasError ? `${id}-error` : helperMessage ? `${id}-helper` : undefined,
+            "aria-expanded": showSelectComponent,
             id: `${id}-input`,
             "data-testid": `${dataTestId}-input`,
             ref: inputRef,
@@ -2955,20 +2973,25 @@ const ReusableDropdownComponent = _a => {
         })]
       }), jsxRuntime.jsx(ClickableElement, {
         children: jsxRuntime.jsx(atomsIcon.Icon, {
+          ariaHidden: true,
           dataTestId: `${dataTestId}-icon`,
           size: sizeIcon,
           icon: showSelectComponent ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
         })
       })]
     }), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", {
+      id: `${id}-error`,
+      role: "alert",
       className: "errorMessage",
-      children: jsxRuntime.jsx("label", {
+      children: jsxRuntime.jsx("p", {
         "data-testid": `${dataTestId}-label-error-message`,
         children: errorMessage
       })
     }), !showSelectComponent && !errorMessage && helperMessage && jsxRuntime.jsx("div", {
+      id: `${id}-helper`,
+      role: "status",
       className: "helperMessage",
-      children: jsxRuntime.jsx("label", {
+      children: jsxRuntime.jsx("p", {
         "data-testid": `${dataTestId}-label-helper-message`,
         children: helperMessage
       })
@@ -3341,9 +3364,10 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onKeyUp,
       onKeyDown,
       disableSearch,
-      asyncOptionList = false
+      asyncOptionList = false,
+      usePortal = false
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList", "usePortal"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -3357,6 +3381,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     addOpenPositionClass,
     resetPositionClass
   } = uiUtils.useOpenPosition(selectRef, containerRef, ['top', 'bottom'], 'bottom');
+  const portalPosition = uiUtils.usePortalPosition(containerRef, showSelectComponent, usePortal, 'bottom');
   react.useEffect(() => {
     if (!showSelectComponent) {
       setCurrentOptionList(optionList || []);
@@ -3410,6 +3435,35 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
   }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown, asyncOptionList]);
+  const [focusedIndex, setFocusedIndex] = react.useState(0);
+  const flatOptions = currentOptionList;
+  const handleKeyDown = event => {
+    var _a;
+    const total = flatOptions.length;
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setFocusedIndex(prev => (prev + 1) % total);
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setFocusedIndex(prev => (prev - 1 + total) % total);
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const selected = flatOptions[focusedIndex];
+      if (selected && !selected.disabled) {
+        setInputValue(selected.value);
+        setInputLabel(selected.label);
+        setInternalSelectedOption(selected);
+        reactDom.flushSync(() => {
+          onChange(selected);
+        });
+        setShowSelectComponent(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     id: `${id}-container`,
@@ -3451,27 +3505,38 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onBlur: onBlur,
       onFocus: onFocus,
       onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown,
+      onKeyDown: onKeyDown ? onKeyDown : handleKeyDown,
       disableSearch: disableSearch
-    }, 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')))]
+    }, props)), showSelectComponent && !disabled && (() => {
+      const selectElement = 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));
+            const selectedIndex = flatOptions.findIndex(flatOption => flatOption.id === selectedValue.id);
+            setFocusedIndex(selectedIndex);
+            reactDom.flushSync(() => {
+              onChange(selectedValue);
+            });
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+          }
+        },
+        ref: selectRef,
+        active: flatOptions[focusedIndex],
+        options: currentOptionList
+      }, uiUtils.applyDataAttributes(props, 'select')));
+      if (usePortal && typeof document !== 'undefined') {
+        return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx(PortalContainer, {
+          portalPosition: portalPosition,
+          children: selectElement
+        }), document.body);
+      }
+      return selectElement;
+    })()]
   }));
 });
 
@@ -3526,9 +3591,10 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onKeyUp,
       onKeyDown,
       disableSearch,
-      asyncOptionList = false
+      asyncOptionList = false,
+      usePortal = false
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList", "usePortal"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -3542,6 +3608,7 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
     addOpenPositionClass,
     resetPositionClass
   } = uiUtils.useOpenPosition(selectRef, containerRef, ['top', 'bottom'], 'bottom');
+  const portalPosition = uiUtils.usePortalPosition(containerRef, showSelectComponent, usePortal, 'bottom');
   react.useEffect(() => {
     if (!showSelectComponent) {
       setCurrentOptionList(optionList || []);
@@ -3642,22 +3709,31 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onKeyUp: onKeyUp,
       onKeyDown: onKeyDown,
       disableSearch: disableSearch
-    }, 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')))]
+    }, props)), showSelectComponent && !disabled && (() => {
+      const selectElement = 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')));
+      if (usePortal && typeof document !== 'undefined') {
+        return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx(PortalContainer, {
+          portalPosition: portalPosition,
+          children: selectElement
+        }), document.body);
+      }
+      return selectElement;
+    })()]
   }));
 });
 

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.34.2",
+  "version": "0.37.0",
   "dependencies": {
-    "react": "19.1.1",
-    "@bolttech/atoms-select": "0.25.1",
-    "react-dom": "19.1.1",
-    "@bolttech/ui-utils": "0.6.0",
+    "react": "19.1.2",
+    "@bolttech/atoms-select": "0.27.1",
+    "react-dom": "19.1.2",
+    "@bolttech/ui-utils": "0.6.4",
     "styled-components": "6.1.1",
-    "@bolttech/atoms-icon": "0.24.2",
-    "@bolttech/atoms-input": "0.28.2",
-    "@bolttech/default-theme": "0.15.0"
+    "@bolttech/atoms-icon": "0.24.7",
+    "@bolttech/atoms-input": "0.30.2",
+    "@bolttech/default-theme": "0.18.1"
   },
   "main": "./index.cjs.js",
   "type": "commonjs",

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

@@ -1,5 +1,5 @@
 import { OptionWithHeaderType, OptionType } from '@bolttech/atoms-select';
-export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<Element>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string;
     disabled?: boolean;
@@ -10,6 +10,7 @@ export declare const DropdownWithHeaders: import("react").ForwardRefExoticCompon
     required?: boolean;
     variant?: import("./molecules-dropdown.type").StyleVariants;
     disableSearch?: boolean;
+    usePortal?: boolean;
     onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
 } & {

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

@@ -1,5 +1,5 @@
 import { OptionType } from '@bolttech/atoms-select';
-export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<HTMLInputElement>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
+export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<import("react").DOMAttributes<Element>, "onKeyUp" | "onKeyDown"> & import("@bolttech/ui-utils").DefaultProps & {
     label: string;
     placeholder?: string;
     disabled?: boolean;
@@ -10,6 +10,7 @@ export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<im
     required?: boolean;
     variant?: import("./molecules-dropdown.type").StyleVariants;
     disableSearch?: boolean;
+    usePortal?: boolean;
     onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
 } & {

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

@@ -1,4 +1,5 @@
 import { StyleVariants } from './molecules-dropdown.type';
+import { PortalPosition } from '@bolttech/ui-utils';
 type DropdownStyledProps = {
     $variant: StyleVariants;
     $hasValue: boolean;
@@ -1144,288 +1145,7 @@ export declare const FieldLabelAndRequiredLabelDropdown: import("styled-componen
     onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
-export declare const DropdownOptionsContainer: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").Ref<HTMLDivElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
-    style?: import("react").CSSProperties | undefined;
-    tabIndex?: number | undefined | undefined;
-    title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    children?: import("react").ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
-    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-}>;
+export declare const PortalContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    portalPosition: PortalPosition;
+}>>;
 export {};

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

@@ -30,6 +30,7 @@ type DefaultDropdownProps = {
     required?: boolean;
     variant?: StyleVariants;
     disableSearch?: boolean;
+    usePortal?: boolean;
     onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
 };
@@ -43,7 +44,7 @@ type DefaultDropdownProps = {
   @property selectedOption - An optional object representing the currently selected option
   @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
-export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownProps = Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionType[];
     /**
      * An optional function that filters the option list based on input value
@@ -108,7 +109,7 @@ export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'o
   @property selectedOption - An optional object representing the currently selected option
   @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
-export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
+export type DropdownWithHeadersProps = Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionWithHeaderType[];
     /**
      * An optional function that filters the option list based on input value
@@ -182,7 +183,7 @@ export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'on
   @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 & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
+export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<Element>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
     setShowSelectComponent: (show: boolean) => void;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;