@elliemae/ds-controlled-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/controlled-combobox/parts/controls-input/useControlsInput.js

@@ -1,10 +1,18 @@
-import * as React from "react";
-import { useContext, useEffect, useMemo, useRef, useCallback, useState } from "react";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { isSelectedValueEmpty } from "../../utils/listHelper";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { isSelectedValueEmpty } from '../../utils/listHelper.js';
+
 const useControlsInput = () => {
+  var _inputRef$current, _inputRef$current2, _inputRef$current3;
+
   const {
-    props: { selectedValues, placeholder, onFilter },
+    props: {
+      selectedValues,
+      placeholder,
+      onFilter
+    },
     setShowPopover,
     setCurrentOption,
     inputRef,
@@ -15,30 +23,36 @@ const useControlsInput = () => {
   const [width, setWidth] = useState(1);
   const spanReference = useRef(null);
   useEffect(() => {
-    setWidth(spanReference.current?.offsetWidth || 1);
-  }, [inputRef.current?.value]);
-  const handleOnChange = useCallback((e) => {
+    var _spanReference$curren;
+
+    setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
+  }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]); // When writting open popover
+  // and refresh selected values and update filter outside value.
+
+  const handleOnChange = useCallback(e => {
     setShowSelectedOptions(false);
     setShowPopover(true);
     onFilter(e.currentTarget.value);
   }, [onFilter, setShowPopover, setShowSelectedOptions]);
   const handleOnBlur = useCallback(() => {
     setHasFocus(false);
-    if (inputRef.current)
-      inputRef.current.value = "";
+    if (inputRef.current) inputRef.current.value = '';
     setTimeout(() => {
-      if (!wrapperListRef?.current?.contains(document.activeElement)) {
+      var _wrapperListRef$curre;
+
+      if (!(wrapperListRef !== null && wrapperListRef !== void 0 && (_wrapperListRef$curre = wrapperListRef.current) !== null && _wrapperListRef$curre !== void 0 && _wrapperListRef$curre.contains(document.activeElement))) {
         setShowPopover(false);
       }
-      setCurrentOption("");
-      onFilter("");
+
+      setCurrentOption('');
+      onFilter('');
     });
   }, [setHasFocus, setCurrentOption, wrapperListRef, onFilter, inputRef, setShowPopover]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);
-  const showPlaceholder = !inputRef.current?.value && isSelectedValueEmpty(selectedValues) ? placeholder : null;
-  const spanReferenceText = inputRef.current?.value.replace(/\s/g, "\xA0");
+  const showPlaceholder = !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  const spanReferenceText = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.replace(/\s/g, '\u00a0');
   return useMemo(() => ({
     handleOnFocus,
     handleOnBlur,
@@ -49,7 +63,5 @@ const useControlsInput = () => {
     spanReference
   }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
 };
-export {
-  useControlsInput
-};
-//# sourceMappingURL=useControlsInput.js.map
+
+export { useControlsInput };

package/esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -1,12 +1,17 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { ChevronSmallDown } from "@elliemae/ds-icons";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { StyledDropDownButton } from "./styled";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledDropDownButton } from './styled.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+
+var _ChevronSmallDown;
+
 const DropdownIndicator = () => {
-  const { showPopover } = useContext(ComboBoxContext);
-  return /* @__PURE__ */ React2.createElement(StyledDropDownButton, {
+  const {
+    showPopover
+  } = useContext(ComboBoxContext);
+  return /*#__PURE__*/_jsx(StyledDropDownButton, {
     "data-testid": ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
@@ -14,13 +19,9 @@ const DropdownIndicator = () => {
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
     tabIndex: -1
   });
 };
-var DropdownIndicator_default = DropdownIndicator;
-export {
-  DropdownIndicator,
-  DropdownIndicator_default as default
-};
-//# sourceMappingURL=DropdownIndicator.js.map
+
+export { DropdownIndicator as default };

package/esm/controlled-combobox/parts/dropdown-indicator/index.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.js.map
+

package/esm/controlled-combobox/parts/dropdown-indicator/styled.js

@@ -1,14 +1,8 @@
-import * as React from "react";
-import styled from "styled-components";
-import { DSButton } from "@elliemae/ds-button";
-const StyledDropDownButton = styled(DSButton)`
-  box-sizing: border-box;
-  width: 100;
-  & svg {
-    fill: ${(props) => props.theme.colors.brand["700"]};
-  }
-`;
-export {
-  StyledDropDownButton
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
+
+const StyledDropDownButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-14dzwqd-0"
+})(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
+
+export { StyledDropDownButton };

package/esm/controlled-combobox/parts/empty-state/index.js

@@ -1,16 +1,15 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { StyledNoResults, StyledNoResultsWrapper } from "./styled";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledNoResultsWrapper, StyledNoResults } from './styled.js';
+
+var _StyledNoResults;
+
 const EmptyState = () => {
-  const {
-    props: { onCreate }
-  } = useContext(ComboBoxContext);
-  return /* @__PURE__ */ React2.createElement(StyledNoResultsWrapper, {
+  useContext(ComboBoxContext);
+  return /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
     id: "id-no-results"
-  }, /* @__PURE__ */ React2.createElement(StyledNoResults, null, "No matches found"));
+  }, void 0, _StyledNoResults || (_StyledNoResults = /*#__PURE__*/_jsx(StyledNoResults, {}, void 0, "No matches found")));
 };
-export {
-  EmptyState
-};
-//# sourceMappingURL=index.js.map
+
+export { EmptyState };

package/esm/controlled-combobox/parts/empty-state/styled.js

@@ -1,11 +1,10 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledNoResultsWrapper = styled.div`
-  padding: 16px;
-`;
-const StyledNoResults = styled.span``;
-export {
-  StyledNoResults,
-  StyledNoResultsWrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+
+const StyledNoResultsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1j46c03-0"
+})(["padding:16px;"]);
+const StyledNoResults = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1j46c03-1"
+})([""]);
+
+export { StyledNoResults, StyledNoResultsWrapper };

package/esm/controlled-combobox/parts/header-list/HeaderList.js

@@ -1,33 +1,42 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { noop } from "lodash";
-import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import {
-  StyledHeaderListWrapper,
-  StyledButtonSelection,
-  StyledSelectedItems,
-  StyledSelectAllCheckbox,
-  StyledNoOptionsSelected
-} from "./styled";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
-import { useHeaderListHandlers } from "./useHeaderListHandlers";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext } from 'react';
+import { noop } from 'lodash';
+import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledHeaderListWrapper, StyledSelectAllCheckbox, StyledSelectedItems, StyledButtonSelection, StyledNoOptionsSelected } from './styled.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { useHeaderListHandlers } from './useHeaderListHandlers.js';
+
+var _StyledNoOptionsSelec;
+
 const HeaderList = () => {
   const {
-    props: { onSelectAll, onClearAll, selectedValues },
+    props: {
+      onSelectAll,
+      onClearAll,
+      selectedValues
+    },
     showSelectedOptions,
     inputRef
   } = useContext(ComboBoxContext);
   const isSelectAllSupplied = onSelectAll !== noop;
   const isClearAllSupplied = onClearAll !== noop;
   const multiSelectedValues = selectedValues;
-  const { handleKeyDown, handleOnMouseDown, handleToggle, checkboxStatus, handleSelectAllCheckboxChange } = useHeaderListHandlers();
-  return /* @__PURE__ */ React2.createElement(StyledHeaderListWrapper, {
+  const {
+    handleKeyDown,
+    handleOnMouseDown,
+    handleToggle,
+    checkboxStatus,
+    handleSelectAllCheckboxChange
+  } = useHeaderListHandlers();
+  return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, /* @__PURE__ */ React2.createElement(StyledSelectAllCheckbox, null, isSelectAllSupplied && isClearAllSupplied && /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, isSelectAllSupplied && isClearAllSupplied && /*#__PURE__*/_jsx(DSControlledCheckbox, {
     checked: checkboxStatus,
-    ariaControls: checkboxStatus === "mixed" ? multiSelectedValues.map((item) => item.dsId).join(" ") : "",
+    ariaControls: checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
     name: "select-all-checkbox",
     ariaLabel: "Select/Unselect All Items",
     id: "select-all-checkbox",
@@ -35,21 +44,27 @@ const HeaderList = () => {
     "data-testid": ComboboxDataTestid.SELECT_ALL_CHECKBOX,
     onBlur: () => {
       if (multiSelectedValues.length === 0) {
-        setTimeout(() => inputRef.current?.focus());
+        setTimeout(() => {
+          var _inputRef$current;
+
+          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+        });
       }
     }
-  })), /* @__PURE__ */ React2.createElement(StyledSelectedItems, null, multiSelectedValues.length > 0 ? /* @__PURE__ */ React2.createElement(StyledButtonSelection, {
+  })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(StyledButtonSelection, {
     onBlur: () => {
-      setTimeout(() => inputRef.current?.focus());
+      setTimeout(() => {
+        var _inputRef$current2;
+
+        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+      });
     },
     buttonType: "text",
     onClick: handleToggle,
-    labelText: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL",
+    labelText: !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL',
     size: "s",
     "data-testid": ComboboxDataTestid.SHOW_SELECTED_OPTIONS_TOGGLE
-  }) : /* @__PURE__ */ React2.createElement(StyledNoOptionsSelected, null, "0 SELECTED")));
-};
-export {
-  HeaderList
+  }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
-//# sourceMappingURL=HeaderList.js.map
+
+export { HeaderList };

package/esm/controlled-combobox/parts/header-list/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { HeaderList } from "./HeaderList";
-export {
-  HeaderList
-};
-//# sourceMappingURL=index.js.map
+export { HeaderList } from './HeaderList.js';

package/esm/controlled-combobox/parts/header-list/styled.js

@@ -1,50 +1,21 @@
-import * as React from "react";
-import styled from "styled-components";
-import { DSButton } from "@elliemae/ds-button";
-const StyledHeaderListWrapper = styled.div`
-  display: flex;
-  position: fixed;
-  top: 0;
-  z-index: 10;
-  justify-content: space-between;
-  padding: 0px 12px 0px 16px;
-  width: 100%;
-  height: 28px;
-  background-color: #fff;
-  box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
-  overflow-x: hidden;
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
 
-  & button {
-    font-size: 13px;
-  }
-`;
-const StyledButtonSelection = styled(DSButton)`
-  border-radius: 0px;
-  padding: 0 ${(props) => props.theme.space.xxs};
-  margin: 0;
-  align-items: center;
-  transition: unset;
-  &:hover:not([disabled]) {
-    background-color: transparent;
-    color: ${(props) => props.theme.colors.brand["700"]};
-  }
-`;
-const StyledSelectedItems = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const StyledNoOptionsSelected = styled.div`
-  padding: 0 ${(props) => props.theme.space.xxs};
-`;
-const StyledSelectAllCheckbox = styled.div`
-  display: flex;
-  align-items: center;
-`;
-export {
-  StyledButtonSelection,
-  StyledHeaderListWrapper,
-  StyledNoOptionsSelected,
-  StyledSelectAllCheckbox,
-  StyledSelectedItems
-};
-//# sourceMappingURL=styled.js.map
+/* eslint-disable max-len */
+const StyledHeaderListWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1fb5jy1-0"
+})(["display:flex;position:fixed;top:0;z-index:10;justify-content:space-between;padding:0px 12px 0px 16px;width:100%;height:28px;background-color:#fff;box-shadow:0 4px 2px -4px ", ";overflow-x:hidden;& button{font-size:13px;}"], props => props.theme.colors.neutral[700]);
+const StyledButtonSelection = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-1fb5jy1-1"
+})(["border-radius:0px;padding:0 ", ";margin:0;align-items:center;transition:unset;&:hover:not([disabled]){background-color:transparent;color:", ";}"], props => props.theme.space.xxs, props => props.theme.colors.brand['700']);
+const StyledSelectedItems = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1fb5jy1-2"
+})(["display:flex;align-items:center;"]);
+const StyledNoOptionsSelected = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1fb5jy1-3"
+})(["padding:0 ", ";"], props => props.theme.space.xxs);
+const StyledSelectAllCheckbox = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1fb5jy1-4"
+})(["display:flex;align-items:center;"]);
+
+export { StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectAllCheckbox, StyledSelectedItems };

package/esm/controlled-combobox/parts/header-list/useHeaderListHandlers.js

@@ -1,10 +1,16 @@
-import * as React from "react";
-import { useMemo, useEffect, useContext, useCallback } from "react";
-import { getSelectableOptions } from "../../utils/listHelper";
-import { ComboBoxContext } from "../../ComboBoxCTX";
+import { useContext, useMemo, useCallback, useEffect } from 'react';
+import { getSelectableOptions } from '../../utils/listHelper.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+
 const useHeaderListHandlers = () => {
   const {
-    props: { onFilter, selectedValues, options, onSelectAll, onClearAll },
+    props: {
+      onFilter,
+      selectedValues,
+      options,
+      onSelectAll,
+      onClearAll
+    },
     inputRef,
     showSelectedOptions,
     setShowSelectedOptions,
@@ -13,32 +19,33 @@ const useHeaderListHandlers = () => {
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(options);
   const checkboxStatus = useMemo(() => {
-    if (selectableOptions?.length === multiSelectedValues?.length) {
+    if ((selectableOptions === null || selectableOptions === void 0 ? void 0 : selectableOptions.length) === (multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length)) {
       return true;
     }
-    if (multiSelectedValues?.length === 0) {
+
+    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
       return false;
     }
-    return "mixed";
+
+    return 'mixed';
   }, [multiSelectedValues, selectableOptions]);
-  const handleOnMouseDown = useCallback((e) => {
+  const handleOnMouseDown = useCallback(e => {
     e.preventDefault();
   }, []);
   const handleSelectAllCheckboxChange = useCallback(() => {
-    if (!checkboxStatus || checkboxStatus === "mixed") {
+    if (!checkboxStatus || checkboxStatus === 'mixed') {
       onSelectAll();
     } else {
       onClearAll();
     }
   }, [checkboxStatus, onSelectAll, onClearAll]);
   const handleToggle = useCallback(() => {
-    if (inputRef.current)
-      inputRef.current.value = "";
-    onFilter("");
+    if (inputRef.current) inputRef.current.value = '';
+    onFilter('');
     setShowSelectedOptions(!showSelectedOptions);
   }, [setShowSelectedOptions, inputRef, onFilter, showSelectedOptions]);
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Escape") {
+  const handleKeyDown = useCallback(e => {
+    if (e.key === 'Escape') {
       setShowPopover(false);
     }
   }, [setShowPopover]);
@@ -55,7 +62,5 @@ const useHeaderListHandlers = () => {
     checkboxStatus
   }), [handleKeyDown, handleToggle, handleOnMouseDown, checkboxStatus, handleSelectAllCheckboxChange]);
 };
-export {
-  useHeaderListHandlers
-};
-//# sourceMappingURL=useHeaderListHandlers.js.map
+
+export { useHeaderListHandlers };

package/esm/controlled-combobox/parts/menu-list/MenuList.js

@@ -1,17 +1,30 @@
-import * as React from "react";
-import React2, { useContext, useMemo, useCallback } from "react";
-import { noop } from "lodash";
-import { StyledListWrapper, StyledList, StyledVirtualListWrapper } from "./styled";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { HeaderList } from "../header-list";
-import { useOnElementResize } from "../../utils/hooks/useOnElementResize";
-import { EmptyState } from "../empty-state";
-import { useItemRenderer } from "./useItemRenderer";
-import { useMenuList } from "./useMenuList";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useMemo, useCallback } from 'react';
+import { noop } from 'lodash';
+import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { HeaderList } from '../header-list/HeaderList.js';
+import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
+import { EmptyState } from '../empty-state/index.js';
+import { useItemRenderer } from './useItemRenderer.js';
+import { useMenuList } from './useMenuList.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _HeaderList, _EmptyState;
+
 const MenuList = () => {
+  var _inputRef$current;
+
   const {
-    props: { menuMinWidth, menuMaxHeight, onCreate, inline, options, selectedValues },
+    props: {
+      menuMinWidth,
+      menuMaxHeight,
+      onCreate,
+      inline,
+      options,
+      selectedValues
+    },
     referenceElement,
     inputRef,
     listRef,
@@ -20,37 +33,45 @@ const MenuList = () => {
     controlsWrapperRef,
     virtualListHelpers
   } = useContext(ComboBoxContext);
-  const { totalSize } = virtualListHelpers;
+  const {
+    totalSize
+  } = virtualListHelpers;
   const isOnCreatedSupplied = onCreate !== noop;
   const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && inputRef.current?.value === "";
+  const withHeader = !inline && multiple && options.length > 0 && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '';
   const ItemRenderer = useItemRenderer();
   useMenuList();
-  const { width } = useOnElementResize(controlsWrapperRef);
-  const listWidth = useMemo(() => menuMinWidth || `${referenceElement?.offsetWidth}`, [menuMinWidth, referenceElement, width]);
-  const handleOnFocus = useCallback(() => {
+  const {
+    width
+  } = useOnElementResize(controlsWrapperRef);
+  const listWidth = useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [menuMinWidth, referenceElement, width]);
+  const handleOnFocus = useCallback(() => {// inputRef.current?.focus();
   }, [inputRef]);
-  return /* @__PURE__ */ React2.createElement(StyledListWrapper, {
+  return /*#__PURE__*/jsxs(StyledListWrapper, {
     ref: wrapperListRef,
-    inline,
-    onMouseDown: (e) => e.preventDefault(),
-    minWidth: listWidth
-  }, withHeader && /* @__PURE__ */ React2.createElement(HeaderList, null), options.length > 0 || isOnCreatedSupplied ? /* @__PURE__ */ React2.createElement(StyledVirtualListWrapper, {
-    inline,
-    maxHeight: menuMaxHeight,
-    ref: listRef,
-    withHeader
-  }, /* @__PURE__ */ React2.createElement(StyledList, {
-    id: "combo-listbox",
-    role: "listbox",
-    tabIndex: -1,
-    "aria-expanded": showPopover,
-    onFocus: handleOnFocus,
-    "data-testid": ComboboxDataTestid.LIST,
-    style: { height: totalSize, margin: inline ? "0px" : "8px 0px" }
-  }, ItemRenderer)) : /* @__PURE__ */ React2.createElement(EmptyState, null));
-};
-export {
-  MenuList
+    inline: inline,
+    onMouseDown: e => e.preventDefault(),
+    minWidth: listWidth,
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), options.length > 0 || isOnCreatedSupplied ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+      inline: inline,
+      maxHeight: menuMaxHeight,
+      ref: listRef,
+      withHeader: withHeader,
+      children: /*#__PURE__*/_jsx(StyledList, {
+        id: "combo-listbox",
+        role: "listbox",
+        tabIndex: -1,
+        "aria-expanded": showPopover,
+        onFocus: handleOnFocus,
+        "data-testid": ComboboxDataTestid.LIST,
+        style: {
+          height: totalSize,
+          margin: inline ? '0px' : '8px 0px'
+        }
+      }, void 0, ItemRenderer)
+    }) : _EmptyState || (_EmptyState = /*#__PURE__*/_jsx(EmptyState, {}))]
+  });
 };
-//# sourceMappingURL=MenuList.js.map
+
+export { MenuList };

package/esm/controlled-combobox/parts/menu-list/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { MenuList } from "./MenuList";
-export {
-  MenuList
-};
-//# sourceMappingURL=index.js.map
+export { MenuList } from './MenuList.js';

package/esm/controlled-combobox/parts/menu-list/styled.js

@@ -1,26 +1,26 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledListWrapper = styled.div`
-  min-width: ${(props) => props.inline ? "100%" : `${props.minWidth}px`};
-`;
-const StyledList = styled.ul`
-  position: relative;
-  padding: 0;
-`;
-const StyledVirtualListWrapper = styled.div`
-  overflow-y: auto;
-  margin-top: ${({ withHeader }) => withHeader ? "28px" : ""};
+import styled from 'styled-components';
 
-  max-height: ${({ maxHeight }) => !maxHeight ? "400px" : `${maxHeight}px`};
-`;
-const StyledCreatableLabel = styled.span`
-  font-weight: bold;
-  font-style: italic;
-`;
-export {
-  StyledCreatableLabel,
-  StyledList,
-  StyledListWrapper,
-  StyledVirtualListWrapper
-};
-//# sourceMappingURL=styled.js.map
+const StyledListWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-g2fmft-0"
+})(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
+const StyledList = /*#__PURE__*/styled.ul.withConfig({
+  componentId: "sc-g2fmft-1"
+})(["position:relative;padding:0;"]);
+const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-g2fmft-2"
+})(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
+  let {
+    withHeader
+  } = _ref;
+  return withHeader ? '28px' : '';
+}, _ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return !maxHeight ? '400px' : "".concat(maxHeight, "px");
+});
+const StyledCreatableLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-g2fmft-3"
+})(["font-weight:bold;font-style:italic;"]);
+
+export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledVirtualListWrapper };