@elliemae/ds-form-combobox 3.24.1-rc.0 → 3.24.1-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -41,6 +41,6 @@ const Wrapper = import_ds_system.styled.div`
41
41
  justify-content: center;
42
42
  height: 56px;
43
43
  `;
44
- const LoadingContainer = ({ isLoading }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { id: "combobox-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularProgressIndicator, { size: "m", loading: isLoading }) });
44
+ const LoadingContainer = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrapper, { id: "combobox-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, { size: "m" }) });
45
45
  var LoadingContainer_default = LoadingContainer;
46
46
  //# sourceMappingURL=LoadingContainer.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = ({ isLoading }: { isLoading: boolean }) => (\n <Wrapper id=\"combobox-list\">\n <DSCircularProgressIndicator size=\"m\" loading={isLoading} />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,uBAAuB;AACvB,4CAA4C;AAE5C,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC,4CAAC,WAAQ,IAAG,iBACV,sDAAC,qEAA4B,MAAK,KAAI,SAAS,WAAW,GAC5D;AAIF,IAAO,2BAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = () => (\n <Wrapper id=\"combobox-list\">\n <DSCircularIndeterminateIndicator size=\"m\" />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,uBAAuB;AACvB,4CAAiD;AAEjD,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,MACvB,4CAAC,WAAQ,IAAG,iBACV,sDAAC,0EAAiC,MAAK,KAAI,GAC7C;AAIF,IAAO,2BAAQ;",
6
6
  "names": []
7
7
  }
@@ -64,7 +64,7 @@ const MenuList = () => {
64
64
  if (isSkeleton)
65
65
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, {});
66
66
  if (isLoading)
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { isLoading });
67
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, {});
68
68
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
69
69
  withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_header_list.HeaderList, {}),
70
70
  filteredOptions && filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer isLoading={isLoading} />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id={`combo-listbox-${instanceUid}`}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,4CAAC,8CAAkB;AAE1C,QAAI;AAAW,aAAO,4CAAC,4CAAiB,WAAsB;AAE9D,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAI,iBAAiB;AAAA,MAEpB;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id={`combo-listbox-${instanceUid}`}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCI;AAhC3B,mBAAyE;AACzE,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,4CAAC,8CAAkB;AAE1C,QAAI;AAAW,aAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAI,iBAAiB;AAAA,MAEpB;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,13 +1,13 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import { styled } from "@elliemae/ds-system";
4
- import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
4
+ import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
5
5
  const Wrapper = styled.div`
6
6
  display: flex;
7
7
  justify-content: center;
8
8
  height: 56px;
9
9
  `;
10
- const LoadingContainer = ({ isLoading }) => /* @__PURE__ */ jsx(Wrapper, { id: "combobox-list", children: /* @__PURE__ */ jsx(DSCircularProgressIndicator, { size: "m", loading: isLoading }) });
10
+ const LoadingContainer = () => /* @__PURE__ */ jsx(Wrapper, { id: "combobox-list", children: /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { size: "m" }) });
11
11
  var LoadingContainer_default = LoadingContainer;
12
12
  export {
13
13
  LoadingContainer,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/LoadingContainer.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = ({ isLoading }: { isLoading: boolean }) => (\n <Wrapper id=\"combobox-list\">\n <DSCircularProgressIndicator size=\"m\" loading={isLoading} />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACYnB;AAXJ,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAE5C,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC,oBAAC,WAAQ,IAAG,iBACV,8BAAC,+BAA4B,MAAK,KAAI,SAAS,WAAW,GAC5D;AAIF,IAAO,2BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = () => (\n <Wrapper id=\"combobox-list\">\n <DSCircularIndeterminateIndicator size=\"m\" />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACYnB;AAXJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AAEjD,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,MACvB,oBAAC,WAAQ,IAAG,iBACV,8BAAC,oCAAiC,MAAK,KAAI,GAC7C;AAIF,IAAO,2BAAQ;",
6
6
  "names": []
7
7
  }
@@ -31,7 +31,7 @@ const MenuList = () => {
31
31
  if (isSkeleton)
32
32
  return /* @__PURE__ */ jsx(SkeletonContainer, {});
33
33
  if (isLoading)
34
- return /* @__PURE__ */ jsx(LoadingContainer, { isLoading });
34
+ return /* @__PURE__ */ jsx(LoadingContainer, {});
35
35
  return /* @__PURE__ */ jsxs(Fragment, { children: [
36
36
  withHeader && /* @__PURE__ */ jsx(HeaderList, {}),
37
37
  filteredOptions && filteredOptions.length > 0 || onCreate ? /* @__PURE__ */ jsx(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer isLoading={isLoading} />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id={`combo-listbox-${instanceUid}`}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,oBAAC,qBAAkB;AAE1C,QAAI;AAAW,aAAO,oBAAC,oBAAiB,WAAsB;AAE9D,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAI,iBAAiB;AAAA,MAEpB;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, selectedValues, isSkeleton },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id={`combo-listbox-${instanceUid}`}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgCI,SAKrB,UALqB,KAKrB,YALqB;AAhC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,gBAAgB,WAAW;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,oBAAC,qBAAkB;AAE1C,QAAI;AAAW,aAAO,oBAAC,oBAAiB;AAExC,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAI,iBAAiB;AAAA,MAEpB;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,3 @@
1
- declare const LoadingContainer: ({ isLoading }: {
2
- isLoading: boolean;
3
- }) => import("react/jsx-runtime").JSX.Element;
1
+ declare const LoadingContainer: () => import("react/jsx-runtime").JSX.Element;
4
2
  export { LoadingContainer };
5
3
  export default LoadingContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.24.1-rc.0",
3
+ "version": "3.24.1-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -37,26 +37,26 @@
37
37
  "dependencies": {
38
38
  "react-virtual": "~2.10.4",
39
39
  "uid": "~2.0.1",
40
- "@elliemae/ds-button-v2": "3.24.1-rc.0",
41
- "@elliemae/ds-circular-progress-indicator": "3.24.1-rc.0",
42
- "@elliemae/ds-form-checkbox": "3.24.1-rc.0",
43
- "@elliemae/ds-grid": "3.24.1-rc.0",
44
- "@elliemae/ds-icons": "3.24.1-rc.0",
45
- "@elliemae/ds-menu-items": "3.24.1-rc.0",
46
- "@elliemae/ds-pills-v2": "3.24.1-rc.0",
47
- "@elliemae/ds-popperjs": "3.24.1-rc.0",
48
- "@elliemae/ds-props-helpers": "3.24.1-rc.0",
49
- "@elliemae/ds-system": "3.24.1-rc.0",
50
- "@elliemae/ds-truncated-tooltip-text": "3.24.1-rc.0",
51
- "@elliemae/ds-utilities": "3.24.1-rc.0"
40
+ "@elliemae/ds-circular-progress-indicator": "3.24.1-rc.2",
41
+ "@elliemae/ds-form-checkbox": "3.24.1-rc.2",
42
+ "@elliemae/ds-icons": "3.24.1-rc.2",
43
+ "@elliemae/ds-grid": "3.24.1-rc.2",
44
+ "@elliemae/ds-menu-items": "3.24.1-rc.2",
45
+ "@elliemae/ds-pills-v2": "3.24.1-rc.2",
46
+ "@elliemae/ds-popperjs": "3.24.1-rc.2",
47
+ "@elliemae/ds-props-helpers": "3.24.1-rc.2",
48
+ "@elliemae/ds-system": "3.24.1-rc.2",
49
+ "@elliemae/ds-truncated-tooltip-text": "3.24.1-rc.2",
50
+ "@elliemae/ds-button-v2": "3.24.1-rc.2",
51
+ "@elliemae/ds-utilities": "3.24.1-rc.2"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@elliemae/pui-cli": "~9.0.0-next.31",
55
55
  "@elliemae/pui-theme": "~2.7.0",
56
56
  "styled-components": "~5.3.9",
57
57
  "styled-system": "~5.1.5",
58
- "@elliemae/ds-form-helpers-mask-hooks": "3.24.1-rc.0",
59
- "@elliemae/ds-monorepo-devops": "3.24.1-rc.0"
58
+ "@elliemae/ds-monorepo-devops": "3.24.1-rc.2",
59
+ "@elliemae/ds-form-helpers-mask-hooks": "3.24.1-rc.2"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@elliemae/pui-theme": "~2.7.0",