@elliemae/ds-form-combobox 3.4.2 → 3.4.3

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ComboBox';\nexport * from './theming';\nexport * from './ComboboxDataTestids';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/parts/A11yFocusedOption.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import ComboBoxContext from "../ComboBoxCTX";
 import { StyledA11ySelectedValues } from "./styled";
 import { getSelectableOptions, isSelected } from "../utils/listHelper";
@@ -17,19 +18,19 @@ const A11yFocusedOption = () => {
   const navigationContext = "Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu";
   return useMemo(() => {
     if (!isSeparator(focusOption) && menuState && focusOption && focusOption.type === "option")
-      return /* @__PURE__ */ React2.createElement(StyledA11ySelectedValues, {
-        key: menuState,
+      return /* @__PURE__ */ jsx(StyledA11ySelectedValues, {
         "aria-live": "polite",
         "aria-atomic": "false",
-        "aria-relevant": "additions text"
-      }, `option ${focusOption?.label} ${isFocusOptionSelected ? "selected and " : ""}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `);
+        "aria-relevant": "additions text",
+        children: `option ${focusOption?.label} ${isFocusOptionSelected ? "selected and " : ""}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `
+      }, menuState);
     if (focusOption?.type === "creatable")
-      return /* @__PURE__ */ React2.createElement(StyledA11ySelectedValues, {
-        key: menuState,
+      return /* @__PURE__ */ jsx(StyledA11ySelectedValues, {
         "aria-live": "assertive",
         "aria-atomic": "false",
-        "aria-relevant": "additions text"
-      }, `Press enter to Add option written in input box. ${navigationContext}`);
+        "aria-relevant": "additions text",
+        children: `Press enter to Add option written in input box. ${navigationContext}`
+      }, menuState);
     return null;
   }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };

package/dist/esm/parts/A11yFocusedOption.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11yFocusedOption.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\nimport { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n  const {\n    props: { filteredOptions, selectedValues },\n    focusOptionIdx,\n    menuState,\n  } = useContext(ComboBoxContext);\n  const selectabledOptions = getSelectableOptions(filteredOptions);\n  const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n  const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n  const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n  const navigationContext =\n    'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n  return useMemo(() => {\n    if (!isSeparator(focusOption) && menuState && focusOption && focusOption.type === 'option')\n      return (\n        <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n          {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n            focusSelectableOptionIdx + 1\n          } of ${selectabledOptions.length}. ${navigationContext} `}\n        </StyledA11ySelectedValues>\n      );\n    if (focusOption?.type === 'creatable')\n      return (\n        <StyledA11ySelectedValues\n          key={menuState}\n          aria-live=\"assertive\"\n          aria-atomic=\"false\"\n          aria-relevant=\"additions text\"\n        >\n          {`Press enter to Add option written in input box. ${navigationContext}`}\n        </StyledA11ySelectedValues>\n      );\n    return null;\n  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAC9B,QAAM,qBAAqB,qBAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,YAAY,WAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,YAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,qCAAC;AAAA,QAAyB,KAAK;AAAA,QAAW,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,SAC5F,UAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,oBACvC;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,qCAAC;AAAA,QACC,KAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,SAEb,mDAAmD,mBACtD;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,kBAAkB;AACjD,SAAS,mBAAmB;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe;AAAA,IACzC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,qBAAqB,qBAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,YAAY,WAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,YAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,oBAAC;AAAA,QAAyC,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,QAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW;AAAA,SAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,oBAAC;AAAA,QAEC,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,QAEb,6DAAmD;AAAA,SAL/C,SAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
   "names": []
 }

package/dist/esm/parts/A11ySelectedValues.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import ComboBoxContext from "../ComboBoxCTX";
 import { StyledA11ySelectedValues } from "./styled";
 import { ComboboxDataTestid } from "../ComboboxDataTestids";
@@ -7,23 +8,22 @@ const A11ySelectedValues = () => {
   const {
     props: { selectedValues }
   } = useContext(ComboBoxContext);
-  return useMemo(() => {
-    let msg = "No Option Selected";
-    if (Array.isArray(selectedValues)) {
-      if (selectedValues.length > 0) {
-        msg = `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
-      }
-    } else if (selectedValues) {
-      msg = `Option selected: ${selectedValues?.label}`;
+  const msg = useMemo(() => {
+    if (Array.isArray(selectedValues) && selectedValues.length > 0) {
+      return `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
     }
-    return /* @__PURE__ */ React2.createElement(StyledA11ySelectedValues, {
-      id: "combobox-selected-items",
-      "data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
-      "aria-live": "polite",
-      "aria-atomic": "false",
-      "aria-relevant": "additions text"
-    }, msg);
+    if (selectedValues) {
+      return `Option selected: ${selectedValues?.label}`;
+    }
+    return "No Option Selected";
   }, [selectedValues]);
+  return /* @__PURE__ */ jsx(StyledA11ySelectedValues, {
+    "data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
+    "aria-live": "polite",
+    "aria-atomic": "false",
+    "aria-relevant": "additions text",
+    children: msg
+  });
 };
 export {
   A11ySelectedValues

package/dist/esm/parts/A11ySelectedValues.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11ySelectedValues.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n  const {\n    props: { selectedValues },\n  } = useContext(ComboBoxContext);\n\n  return useMemo(() => {\n    let msg = 'No Option Selected';\n    if (Array.isArray(selectedValues)) {\n      if (selectedValues.length > 0) {\n        msg = `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n      }\n    } else if (selectedValues) {\n      msg = `Option selected: ${selectedValues?.label}`;\n    }\n\n    return (\n      <StyledA11ySelectedValues\n        id=\"combobox-selected-items\"\n        data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n        aria-live=\"polite\"\n        aria-atomic=\"false\"\n        aria-relevant=\"additions text\"\n      >\n        {msg}\n      </StyledA11ySelectedValues>\n    );\n  }, [selectedValues]);\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACO,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,MACP,WAAW,eAAe;AAE9B,SAAO,QAAQ,MAAM;AACnB,QAAI,MAAM;AACV,QAAI,MAAM,QAAQ,cAAc,GAAG;AACjC,UAAI,eAAe,SAAS,GAAG;AAC7B,cAAM,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,MAC/E;AAAA,IACF,WAAW,gBAAgB;AACzB,YAAM,oBAAoB,gBAAgB;AAAA,IAC5C;AAEA,WACE,qCAAC;AAAA,MACC,IAAG;AAAA,MACH,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,OAEb,GACH;AAAA,EAEJ,GAAG,CAAC,cAAc,CAAC;AACrB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n  const {\n    props: { selectedValues },\n  } = useContext(ComboBoxContext);\n\n  const msg = useMemo(() => {\n    if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n    }\n    if (selectedValues) {\n      return `Option selected: ${selectedValues?.label}`;\n    }\n    return 'No Option Selected';\n  }, [selectedValues]);\n\n  return (\n    <StyledA11ySelectedValues\n      data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n      aria-live=\"polite\"\n      aria-atomic=\"false\"\n      aria-relevant=\"additions text\"\n    >\n      {msg}\n    </StyledA11ySelectedValues>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,IAAI,WAAW,eAAe;AAE9B,QAAM,MAAM,QAAQ,MAAM;AACxB,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,oBAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,IAEb;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/DropdownIndicator.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useCallback, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
@@ -25,7 +26,7 @@ const DropdownIndicator = () => {
   const handleOnClick = useCallback((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ React2.createElement(StyledDropDownButton, {
+  return /* @__PURE__ */ jsx(StyledDropDownButton, {
     onClick: handleOnClick,
     "data-testid": ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
@@ -35,8 +36,9 @@ const DropdownIndicator = () => {
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",
-    tabIndex: -1
-  }, /* @__PURE__ */ React2.createElement(ChevronSmallDown, null));
+    tabIndex: -1,
+    children: /* @__PURE__ */ jsx(ChevronSmallDown, {})
+  });
 };
 export {
   DropdownIndicator

package/dist/esm/parts/DropdownIndicator.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n  }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props: { disabled },\n    menuState,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledDropDownButton\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls=\"combo-listbox\"\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n    >\n      <ChevronSmallDown />\n    </StyledDropDownButton>\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,sBAAiB,CACpB;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,IAEV,8BAAC,oBAAiB;AAAA,GACpB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/container/Container.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useCallback, useEffect, useMemo, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useContext } from "react";
 import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import ComboBoxContext from "../../ComboBoxCTX";
@@ -30,39 +31,55 @@ const Container = () => {
       window.removeEventListener("blur", closeMenuOnWindowBlur);
     };
   }, [setMenuState]);
-  return useMemo(() => /* @__PURE__ */ React2.createElement(StyledContainer, {
-    "data-testid": ComboboxDataTestid.CONTAINER,
-    ref: setReferenceElement,
-    ...containerGlobals,
-    ...xStyledProps
-  }, inline ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Controls, null), /* @__PURE__ */ React2.createElement(MenuList, null)) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Controls, null), /* @__PURE__ */ React2.createElement(DSPopperJS, {
-    customOffset: [0, 5],
-    referenceElement,
-    showPopover: menuState,
-    closeContextMenu: handleCloseMenu,
-    startPlacementPreference,
-    placementOrderPreference,
-    withoutPortal,
-    withoutArrow: true,
-    withoutAnimation: true,
-    zIndex
-  }, /* @__PURE__ */ React2.createElement(StyledPopperWrapper, {
-    tabIndex: -1,
-    onMouseDown: handleMouseDown
-  }, /* @__PURE__ */ React2.createElement(MenuList, null))))), [
-    inline,
-    setReferenceElement,
-    containerGlobals,
-    referenceElement,
-    menuState,
-    xStyledProps,
-    handleCloseMenu,
-    startPlacementPreference,
-    placementOrderPreference,
-    withoutPortal,
-    zIndex,
-    handleMouseDown
-  ]);
+  return useMemo(
+    () => /* @__PURE__ */ jsx(StyledContainer, {
+      "data-testid": ComboboxDataTestid.CONTAINER,
+      ref: setReferenceElement,
+      ...containerGlobals,
+      ...xStyledProps,
+      children: inline ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(Controls, {}),
+          /* @__PURE__ */ jsx(MenuList, {})
+        ]
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(Controls, {}),
+          /* @__PURE__ */ jsx(DSPopperJS, {
+            customOffset: [0, 5],
+            referenceElement,
+            showPopover: menuState,
+            closeContextMenu: handleCloseMenu,
+            startPlacementPreference,
+            placementOrderPreference,
+            withoutPortal,
+            withoutArrow: true,
+            withoutAnimation: true,
+            zIndex,
+            children: /* @__PURE__ */ jsx(StyledPopperWrapper, {
+              tabIndex: -1,
+              onMouseDown: handleMouseDown,
+              children: /* @__PURE__ */ jsx(MenuList, {})
+            })
+          })
+        ]
+      })
+    }),
+    [
+      inline,
+      setReferenceElement,
+      containerGlobals,
+      referenceElement,
+      menuState,
+      xStyledProps,
+      handleCloseMenu,
+      startPlacementPreference,
+      placementOrderPreference,
+      withoutPortal,
+      zIndex,
+      handleMouseDown
+    ]
+  );
 };
 export {
   Container

package/dist/esm/parts/container/Container.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n  const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n  const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n  const globalAttributes = useGetGlobalAttributes(props);\n  const xStyledProps = useGetXstyledProps(props);\n  // Removing possible collisionable props\n  const { placeholder, onKeyDown, onChange, disabled, tabIndex, ...containerGlobals } = globalAttributes;\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  const handleCloseMenu = useCallback(() => {\n    setMenuState(false, 'blur');\n    if (innerRef?.current) innerRef.current.blur();\n  }, [innerRef, setMenuState]);\n\n  useEffect(() => {\n    const closeMenuOnWindowBlur = () => {\n      setMenuState(false, 'blur');\n    };\n\n    window.addEventListener('blur', closeMenuOnWindowBlur);\n\n    return () => {\n      window.removeEventListener('blur', closeMenuOnWindowBlur);\n    };\n  }, [setMenuState]);\n\n  return useMemo(\n    () => (\n      <StyledContainer\n        data-testid={ComboboxDataTestid.CONTAINER}\n        ref={setReferenceElement}\n        {...containerGlobals}\n        {...xStyledProps}\n      >\n        {inline ? (\n          <>\n            <Controls />\n            <MenuList />\n          </>\n        ) : (\n          <>\n            <Controls />\n            <DSPopperJS\n              customOffset={[0, 5]}\n              referenceElement={referenceElement}\n              showPopover={menuState}\n              closeContextMenu={handleCloseMenu}\n              startPlacementPreference={startPlacementPreference}\n              placementOrderPreference={placementOrderPreference}\n              withoutPortal={withoutPortal}\n              withoutArrow\n              withoutAnimation\n              zIndex={zIndex}\n            >\n              <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n                <MenuList />\n              </StyledPopperWrapper>\n            </DSPopperJS>\n          </>\n        )}\n      </StyledContainer>\n    ),\n    [\n      inline,\n      setReferenceElement,\n      containerGlobals,\n      referenceElement,\n      menuState,\n      xStyledProps,\n      handleCloseMenu,\n      startPlacementPreference,\n      placementOrderPreference,\n      withoutPortal,\n      zIndex,\n      handleMouseDown,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,qBAAqB,WAAW,eAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,WAAW;AACxG,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,WAAW,UAAU,UAAU,aAAa,qBAAqB;AACtF,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,QACL,MACE,qCAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,KAAK;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,SACC,4DACE,qCAAC,cAAS,GACV,qCAAC,cAAS,CACZ,IAEA,4DACE,qCAAC,cAAS,GACV,qCAAC;AAAA,IACC,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAY;AAAA,IACZ,kBAAgB;AAAA,IAChB;AAAA,KAEA,qCAAC;AAAA,IAAoB,UAAU;AAAA,IAAI,aAAa;AAAA,KAC9C,qCAAC,cAAS,CACZ,CACF,CACF,CAEJ,GAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,aAAa,WAAW,SAAS,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,iBAAiB,IAAI,WAAW,eAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AACxG,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,aAAa,WAAW,UAAU,UAAU,aAAa,iBAAiB,IAAI;AACtF,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,KAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,YAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/container/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Container } from './Container';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;",
   "names": []
 }

package/dist/esm/parts/container/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled('div', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.CONTAINER,\n})`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n`;\n\nexport const StyledPopperWrapper = styled('div')`\n  position: relative;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n  overflow: auto;\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAGnD,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAGnD,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/controls/Controls.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useCallback } from "react";
 import { DropdownIndicator } from "../DropdownIndicator";
 import { ComboboxDataTestid } from "../../ComboboxDataTestids";
 import ComboBoxContext from "../../ComboBoxCTX";
@@ -39,22 +40,31 @@ const Controls = () => {
     innerRef.current?.focus();
     setMenuState(true);
   }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);
-  const handleOnPillsClick = useCallback((e) => {
-    if (menuState || disabled) {
-      e.stopPropagation();
-    } else {
-      innerRef.current?.focus();
-      setMenuState(true);
-    }
-  }, [menuState, innerRef, disabled, setMenuState]);
-  const handleOnMouseDown = useCallback((e) => {
-    if (document.activeElement === innerRef.current || inline) {
-      e.preventDefault();
-    }
-  }, [innerRef, inline]);
+  const handleOnPillsClick = useCallback(
+    (e) => {
+      if (menuState || disabled) {
+        e.stopPropagation();
+      } else {
+        innerRef.current?.focus();
+        setMenuState(true);
+      }
+    },
+    [menuState, innerRef, disabled, setMenuState]
+  );
+  const handleOnMouseDown = useCallback(
+    (e) => {
+      if (document.activeElement === innerRef.current || inline) {
+        e.preventDefault();
+      }
+    },
+    [innerRef, inline]
+  );
   const { onKeyDownPills } = useOnPillsNavigation();
-  const cols = useMemo(() => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "29px"] : ["minmax(0px, auto)"], [inline]);
-  return /* @__PURE__ */ React2.createElement(StyledControlsWrapper, {
+  const cols = useMemo(
+    () => !inline ? ["minmax(0px,max-content)", "minmax(20px, auto)", "29px"] : ["minmax(0px, auto)"],
+    [inline]
+  );
+  return /* @__PURE__ */ jsxs(StyledControlsWrapper, {
     ref: controlsWrapperRef,
     cols,
     disabled,
@@ -64,20 +74,35 @@ const Controls = () => {
     onClick: handleOnClick,
     onMouseDown: handleOnMouseDown,
     onKeyDown: onKeyDownPills,
-    "data-testid": ComboboxDataTestid.CONTROLS_WRAPPER
-  }, !inline && /* @__PURE__ */ React2.createElement(StyledSelection, {
-    ref: selectedOptionsRef,
-    onClick: handleOnPillsClick
-  }, /* @__PURE__ */ React2.createElement(A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ React2.createElement(MultiSelectedValuesContainer, null) : /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": ComboboxDataTestid.SELECTED_VALUES
-  }, selectedValues && /* @__PURE__ */ React2.createElement(RemovableSelectedValuePill, {
-    pill: selectedValues
-  }))), /* @__PURE__ */ React2.createElement(A11yFocusedOption, null), /* @__PURE__ */ React2.createElement(ControlsInput, null), !inline && /* @__PURE__ */ React2.createElement(StyledHeaderActionsWrapper, {
-    justifyContent: "center",
-    cols: ["min-content", "min-content"]
-  }, /* @__PURE__ */ React2.createElement(StyleHeaderActionsSeparator, {
-    disabled
-  }), /* @__PURE__ */ React2.createElement(DropdownIndicator, null)));
+    "data-testid": ComboboxDataTestid.CONTROLS_WRAPPER,
+    children: [
+      !inline && /* @__PURE__ */ jsxs(StyledSelection, {
+        ref: selectedOptionsRef,
+        onClick: handleOnPillsClick,
+        children: [
+          hasFocus && /* @__PURE__ */ jsx(A11ySelectedValues, {}),
+          Array.isArray(selectedValues) ? /* @__PURE__ */ jsx(MultiSelectedValuesContainer, {}) : /* @__PURE__ */ jsx("div", {
+            "data-testid": ComboboxDataTestid.SELECTED_VALUES,
+            children: selectedValues && /* @__PURE__ */ jsx(RemovableSelectedValuePill, {
+              pill: selectedValues
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(A11yFocusedOption, {}),
+      /* @__PURE__ */ jsx(ControlsInput, {}),
+      !inline && /* @__PURE__ */ jsxs(StyledHeaderActionsWrapper, {
+        justifyContent: "center",
+        cols: ["min-content", "min-content"],
+        children: [
+          /* @__PURE__ */ jsx(StyleHeaderActionsSeparator, {
+            disabled
+          }),
+          /* @__PURE__ */ jsx(DropdownIndicator, {})
+        ]
+      })
+    ]
+  });
 };
 export {
   Controls

package/dist/esm/parts/controls/Controls.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { scrollIfNeeded } from '../../utils/listHelper';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          <A11ySelectedValues />\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
-  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C,YAClD,CAAC,MAAM;AACL,QAAI,aAAa,UAAU;AACzB,QAAE,gBAAgB;AAAA,IACpB,OAAO;AACL,eAAS,SAAS,MAAM;AACxB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GACA,CAAC,WAAW,UAAU,UAAU,YAAY,CAC9C;AAGA,QAAM,oBAA6C,YACjD,CAAC,MAAM;AACL,QAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GACA,CAAC,UAAU,MAAM,CACnB;AAEA,QAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAM,OAAO,QACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB,GACjG,CAAC,MAAM,CACT;AACA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,KAE/B,CAAC,UACA,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KACjD,qCAAC,wBAAmB,GACnB,MAAM,QAAQ,cAAc,IAC3B,qCAAC,kCAA6B,IAE9B,qCAAC;AAAA,IAAI,eAAa,mBAAmB;AAAA,KAClC,kBAAkB,qCAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,qCAAC,uBAAkB,GAEnB,qCAAC,mBAAc,GACd,CAAC,UACA,qCAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,qCAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,qCAAC,uBAAkB,CACrB,CAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n  StyledControlsWrapper,\n  StyleHeaderActionsSeparator,\n  StyledHeaderActionsWrapper,\n  StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n  const {\n    props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n    selectedOptionsRef,\n    setMenuState,\n    setFocusOptionIdx,\n    hasFocus,\n    listRef,\n    focusOptionIdx,\n    menuState,\n    controlsWrapperRef,\n  } = useContext(ComboBoxContext);\n\n  const handleOnClick = useCallback(() => {\n    if (disabled) return;\n    if (hasFocus && menuState && !inline) {\n      setMenuState(false);\n      setFocusOptionIdx('');\n      innerRef.current?.blur();\n      return;\n    }\n    innerRef.current?.focus();\n    setMenuState(true);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n  // this callback prevent to toggle the menu when clicking or removing pills\n  const handleOnPillsClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (menuState || disabled) {\n        e.stopPropagation();\n      } else {\n        innerRef.current?.focus();\n        setMenuState(true);\n      }\n    },\n    [menuState, innerRef, disabled, setMenuState],\n  );\n\n  // callback to prevent onBlur on the input when clicking in all the wrapper\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (document.activeElement === innerRef.current || inline) {\n        e.preventDefault();\n      }\n    },\n    [innerRef, inline],\n  );\n\n  const { onKeyDownPills } = useOnPillsNavigation();\n\n  const cols = useMemo(\n    () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n    [inline],\n  );\n  return (\n    <StyledControlsWrapper\n      ref={controlsWrapperRef}\n      cols={cols}\n      disabled={disabled}\n      minWidth={inputMinWidth}\n      hasError={hasError}\n      inline={inline}\n      onClick={handleOnClick}\n      onMouseDown={handleOnMouseDown}\n      onKeyDown={onKeyDownPills}\n      data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n    >\n      {!inline && (\n        <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n          {hasFocus && <A11ySelectedValues />}\n          {Array.isArray(selectedValues) ? (\n            <MultiSelectedValuesContainer />\n          ) : (\n            <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n              {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n            </div>\n          )}\n        </StyledSelection>\n      )}\n      <A11yFocusedOption />\n\n      <ControlsInput />\n      {!inline && (\n        <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n          <StyleHeaderActionsSeparator disabled={disabled} />\n          <DropdownIndicator />\n        </StyledHeaderActionsWrapper>\n      )}\n    </StyledControlsWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,qBAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,oBAAC,sBAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC;AAAA,YAAI,eAAa,mBAAmB;AAAA,YAClC,4BAAkB,oBAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,oBAAC,qBAAkB;AAAA,MAEnB,oBAAC,iBAAc;AAAA,MACd,CAAC,UACA,qBAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,8BAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/parts/controls/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Controls } from './Controls';\n"],
-  "mappings": "AAAA;ACAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB;",
   "names": []
 }

package/dist/esm/parts/controls/styled.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSelection = styled.div`\n  font-size: 13px;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid)`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled.span<Partial<StyledControlsWrapperT>>`\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'])};\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAQA,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAE3G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzD,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAEjD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,aAAc,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,YAK5D,CAAC,EAAE,aAAc,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,eAAgB,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,sBAI5B,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,QAAQ;AAAA;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,gBAAgB,uBAAuB;AAQhD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAE3G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzD,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAEjD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA,eAGpE,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,YAK5D,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc;AAAA,IAChD;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,6BAA6B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,sBAI5B,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,QAAQ;AAAA;",
   "names": []
 }

package/dist/esm/parts/controls/useOnPillsNavigation.js

@@ -10,25 +10,28 @@ const useOnPillsNavigation = () => {
     selectedOptionsRef
   } = useContext(ComboBoxContext);
   const REMOVABLE_PILL_SELECTOR = ".ds-pill-wrapper-removable button";
-  const onKeyDownPills = useCallback((e) => {
-    if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
-      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        innerRef.current?.focus();
-        setMenuState(true, "open", e);
-        return;
-      }
-      if (e.key === "ArrowLeft") {
-        const removablePills = selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);
-        if (hasFocus && removablePills) {
-          removablePills[removablePills.length - 1]?.focus();
+  const onKeyDownPills = useCallback(
+    (e) => {
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && inputValue === "") {
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+          innerRef.current?.focus();
+          setMenuState(true, "open", e);
+          return;
+        }
+        if (e.key === "ArrowLeft") {
+          const removablePills = selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+          if (hasFocus && removablePills) {
+            removablePills[removablePills.length - 1]?.focus();
+          }
+        }
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          innerRef.current?.focus();
         }
       }
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        innerRef.current?.focus();
-      }
-    }
-  }, [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]);
+    },
+    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]
+  );
   return { onKeyDownPills };
 };
 export {

package/dist/esm/parts/controls/useOnPillsNavigation.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/useOnPillsNavigation.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useOnPillsNavigation = () => {\n  const {\n    props: { innerRef },\n    inputValue,\n    hasFocus,\n    setMenuState,\n    selectedOptionsRef,\n  } = useContext(ComboBoxContext);\n\n  // todo: constant must be defined on pills component\n  const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';\n\n  const onKeyDownPills: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (\n        (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') &&\n        inputValue === ''\n      ) {\n        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n          innerRef.current?.focus();\n          setMenuState(true, 'open', e);\n          return;\n        }\n        if (e.key === 'ArrowLeft') {\n          const removablePills: NodeListOf<HTMLButtonElement> | undefined =\n            selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);\n\n          if (hasFocus && removablePills) {\n            removablePills[removablePills.length - 1]?.focus();\n          }\n        }\n        if (e.key === 'ArrowRight') {\n          e.preventDefault();\n          innerRef.current?.focus();\n        }\n      }\n    },\n    [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus],\n  );\n\n  return { onKeyDownPills };\n};\n"],
-  "mappings": "AAAA;ACIA;AACA;AAEO,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW,eAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D,YACnE,CAAC,MAAM;AACL,QACG,GAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,UAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,iBAAS,SAAS,MAAM;AACxB,qBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,cAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,YAAI,YAAY,gBAAgB;AAC9B,yBAAe,eAAe,SAAS,IAAI,MAAM;AAAA,QACnD;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,cAAc;AAC1B,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAAA,EACF,GACA,CAAC,YAAY,UAAU,cAAc,oBAAoB,QAAQ,CACnE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAgB,aAAa,kBAAkB;AAC/C,OAAO,qBAAqB;AAErB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,0BAA0B;AAEhC,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,WACG,EAAE,QAAQ,eAAe,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa,EAAE,QAAQ,gBACrF,eAAe,IACf;AACA,YAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,mBAAS,SAAS,MAAM;AACxB,uBAAa,MAAM,QAAQ,CAAC;AAC5B;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,aAAa;AACzB,gBAAM,iBACJ,mBAAmB,SAAS,iBAAiB,uBAAuB;AAEtE,cAAI,YAAY,gBAAgB;AAC9B,2BAAe,eAAe,SAAS,IAAI,MAAM;AAAA,UACnD;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,cAAc;AAC1B,YAAE,eAAe;AACjB,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,oBAAoB,QAAQ;AAAA,EACnE;AAEA,SAAO,EAAE,eAAe;AAC1B;",
   "names": []
 }