@elliemae/ds-form-combobox 3.55.0-next.10 → 3.55.0-next.11

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.
@@ -69,26 +69,32 @@ const MenuList = () => {
69
69
  const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
70
70
  e.preventDefault();
71
71
  }, []);
72
- const menuListRender = (0, import_react.useMemo)(() => {
73
- if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
74
- if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
75
- if (filteredOptions && filteredOptions.length > 0 || onCreate) {
76
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
- StyledFastList,
78
- {
79
- dsFastlistWrapperList: { role: "listbox", "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST, "aria-label": "listbox" },
80
- dsFastlistItem: { role: "none" },
81
- actionRef: listRef,
82
- count: filteredOptions.length,
83
- ItemRenderer: import_useItemRenderer.ItemRenderer,
84
- extraItemProps: { itemList: filteredOptions },
85
- getId: (index) => filteredOptions[index].dsId,
86
- estimateSize: estimatedSize,
87
- getOwnerProps
88
- }
89
- ) });
90
- }
91
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
72
+ let content;
73
+ if (isSkeleton) {
74
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
75
+ } else if (isLoading) {
76
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
77
+ } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
78
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ StyledFastList,
80
+ {
81
+ dsFastlistWrapperList: {
82
+ role: "listbox",
83
+ "data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
84
+ "aria-label": "listbox"
85
+ },
86
+ dsFastlistItem: { role: "none" },
87
+ actionRef: listRef,
88
+ count: filteredOptions.length,
89
+ ItemRenderer: import_useItemRenderer.ItemRenderer,
90
+ extraItemProps: { itemList: filteredOptions },
91
+ getId: (index) => filteredOptions[index].dsId,
92
+ estimateSize: estimatedSize,
93
+ getOwnerProps
94
+ }
95
+ ) });
96
+ } else {
97
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
98
  import_styled.StyledNoResultsWrapper,
93
99
  {
94
100
  id: `combo-listbox-${instanceUid}`,
@@ -97,17 +103,7 @@ const MenuList = () => {
97
103
  children: noOptionsMessage
98
104
  }
99
105
  );
100
- }, [
101
- isSkeleton,
102
- instanceUid,
103
- isLoading,
104
- filteredOptions,
105
- onCreate,
106
- noOptionsMessage,
107
- menuMaxHeight,
108
- listRef,
109
- getOwnerProps
110
- ]);
106
+ }
111
107
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
112
108
  import_styled.StyledListWrapper,
113
109
  {
@@ -116,7 +112,7 @@ const MenuList = () => {
116
112
  onMouseDown: preventLoseInputFocus,
117
113
  width,
118
114
  minWidth: menuMinWidth,
119
- children: menuListRender
115
+ children: content
120
116
  }
121
117
  );
122
118
  };
@@ -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 } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n maxHeight: SizingProps['maxHeight'];\n}>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n const {\n props,\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { getOwnerProps } = useOwnerProps(props);\n\n // removing the header list if we are filtering or is inline cb or we have no options to show\n\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 instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n return (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n getOwnerProps={getOwnerProps}\n />\n </StyledItemsWrapper>\n );\n }\n\n return (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }, [\n isSkeleton,\n instanceUid,\n isLoading,\n filteredOptions,\n onCreate,\n noOptionsMessage,\n menuMaxHeight,\n listRef,\n getOwnerProps,\n ]);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\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;AD8CI;AA9C3B,mBAAwD;AACxD,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,8CAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB,cAAc;AAAA,UACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n maxHeight: SizingProps['maxHeight'];\n}>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\n\nexport const MenuList = (): JSX.Element => {\n const {\n props,\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n const { width } = useOnElementResize(controlsWrapperRef);\n\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n let content: JSX.Element;\n\n if (isSkeleton) {\n content = <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n } else if (isLoading) {\n content = <LoadingContainer getOwnerProps={getOwnerProps} />;\n } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {\n content = (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{\n role: 'listbox',\n 'data-testid': ComboboxDataTestid.LIST,\n 'aria-label': 'listbox',\n }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n getOwnerProps={getOwnerProps}\n />\n </StyledItemsWrapper>\n );\n } else {\n content = (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {content}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDT;AAhDd,mBAA+C;AAC/C,0BAA2B;AAC3B,uBAAyC;AACzC,qBAAqB;AACrB,8BAA8B;AAC9B,oBAA0D;AAC1D,iCAAmC;AACnC,yBAAgC;AAChC,6BAA6B;AAC7B,8BAAiC;AACjC,+BAAkC;AAClC,gCAAmC;AACnC,uBAAwD;AAExD,MAAM,qBAAiB,yBAAO,gCAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,yBAAqB,yBAAO,mBAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAErB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,4CAAC,8CAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,4CAAC,4CAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,8CAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB,cAAc;AAAA,QACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,QAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,QACjD,cAAc;AAAA,QACd;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { useContext, useMemo, useCallback } from "react";
3
+ import { useContext, useCallback } from "react";
4
4
  import { DSFastList } from "@elliemae/ds-fast-list";
5
5
  import { styled } from "@elliemae/ds-system";
6
6
  import { Grid } from "@elliemae/ds-grid";
@@ -36,26 +36,32 @@ const MenuList = () => {
36
36
  const preventLoseInputFocus = useCallback((e) => {
37
37
  e.preventDefault();
38
38
  }, []);
39
- const menuListRender = useMemo(() => {
40
- if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
41
- if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
42
- if (filteredOptions && filteredOptions.length > 0 || onCreate) {
43
- return /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
44
- StyledFastList,
45
- {
46
- dsFastlistWrapperList: { role: "listbox", "data-testid": ComboboxDataTestid.LIST, "aria-label": "listbox" },
47
- dsFastlistItem: { role: "none" },
48
- actionRef: listRef,
49
- count: filteredOptions.length,
50
- ItemRenderer,
51
- extraItemProps: { itemList: filteredOptions },
52
- getId: (index) => filteredOptions[index].dsId,
53
- estimateSize: estimatedSize,
54
- getOwnerProps
55
- }
56
- ) });
57
- }
58
- return /* @__PURE__ */ jsx(
39
+ let content;
40
+ if (isSkeleton) {
41
+ content = /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
42
+ } else if (isLoading) {
43
+ content = /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
44
+ } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
45
+ content = /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
46
+ StyledFastList,
47
+ {
48
+ dsFastlistWrapperList: {
49
+ role: "listbox",
50
+ "data-testid": ComboboxDataTestid.LIST,
51
+ "aria-label": "listbox"
52
+ },
53
+ dsFastlistItem: { role: "none" },
54
+ actionRef: listRef,
55
+ count: filteredOptions.length,
56
+ ItemRenderer,
57
+ extraItemProps: { itemList: filteredOptions },
58
+ getId: (index) => filteredOptions[index].dsId,
59
+ estimateSize: estimatedSize,
60
+ getOwnerProps
61
+ }
62
+ ) });
63
+ } else {
64
+ content = /* @__PURE__ */ jsx(
59
65
  StyledNoResultsWrapper,
60
66
  {
61
67
  id: `combo-listbox-${instanceUid}`,
@@ -64,17 +70,7 @@ const MenuList = () => {
64
70
  children: noOptionsMessage
65
71
  }
66
72
  );
67
- }, [
68
- isSkeleton,
69
- instanceUid,
70
- isLoading,
71
- filteredOptions,
72
- onCreate,
73
- noOptionsMessage,
74
- menuMaxHeight,
75
- listRef,
76
- getOwnerProps
77
- ]);
73
+ }
78
74
  return /* @__PURE__ */ jsx(
79
75
  StyledListWrapper,
80
76
  {
@@ -83,7 +79,7 @@ const MenuList = () => {
83
79
  onMouseDown: preventLoseInputFocus,
84
80
  width,
85
81
  minWidth: menuMinWidth,
86
- children: menuListRender
82
+ children: content
87
83
  }
88
84
  );
89
85
  };
@@ -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 } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n maxHeight: SizingProps['maxHeight'];\n}>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n const {\n props,\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n const { getOwnerProps } = useOwnerProps(props);\n\n // removing the header list if we are filtering or is inline cb or we have no options to show\n\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 instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n return (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n getOwnerProps={getOwnerProps}\n />\n </StyledItemsWrapper>\n );\n }\n\n return (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }, [\n isSkeleton,\n instanceUid,\n isLoading,\n filteredOptions,\n onCreate,\n noOptionsMessage,\n menuMaxHeight,\n listRef,\n getOwnerProps,\n ]);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8CI;AA9C3B,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAI7C,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,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,mBAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB;AAAA,UACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n maxHeight: SizingProps['maxHeight'];\n}>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\n\nexport const MenuList = (): JSX.Element => {\n const {\n props,\n props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n controlsWrapperRef,\n listRef,\n wrapperListRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n const { width } = useOnElementResize(controlsWrapperRef);\n\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n let content: JSX.Element;\n\n if (isSkeleton) {\n content = <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n } else if (isLoading) {\n content = <LoadingContainer getOwnerProps={getOwnerProps} />;\n } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {\n content = (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <StyledFastList\n dsFastlistWrapperList={{\n role: 'listbox',\n 'data-testid': ComboboxDataTestid.LIST,\n 'aria-label': 'listbox',\n }}\n dsFastlistItem={{ role: 'none' }}\n actionRef={listRef}\n count={filteredOptions.length}\n ItemRenderer={ItemRenderer}\n extraItemProps={{ itemList: filteredOptions }}\n getId={(index: number) => filteredOptions[index].dsId}\n estimateSize={estimatedSize}\n getOwnerProps={getOwnerProps}\n />\n </StyledItemsWrapper>\n );\n } else {\n content = (\n <StyledNoResultsWrapper\n id={`combo-listbox-${instanceUid}`}\n data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n role=\"alert\"\n >\n {noOptionsMessage}\n </StyledNoResultsWrapper>\n );\n }\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n {content}\n </StyledListWrapper>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgDT;AAhDd,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAErB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,oBAAC,qBAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,oBAAC,oBAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,mBAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB;AAAA,QACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,QAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,QACjD,cAAc;AAAA,QACd;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-combobox",
3
- "version": "3.55.0-next.10",
3
+ "version": "3.55.0-next.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Combobox",
6
6
  "files": [
@@ -38,18 +38,18 @@
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-button-v2": "3.55.0-next.10",
42
- "@elliemae/ds-fast-list": "3.55.0-next.10",
43
- "@elliemae/ds-circular-progress-indicator": "3.55.0-next.10",
44
- "@elliemae/ds-floating-context": "3.55.0-next.10",
45
- "@elliemae/ds-form-checkbox": "3.55.0-next.10",
46
- "@elliemae/ds-grid": "3.55.0-next.10",
47
- "@elliemae/ds-menu-items": "3.55.0-next.10",
48
- "@elliemae/ds-icons": "3.55.0-next.10",
49
- "@elliemae/ds-pills-v2": "3.55.0-next.10",
50
- "@elliemae/ds-props-helpers": "3.55.0-next.10",
51
- "@elliemae/ds-system": "3.55.0-next.10",
52
- "@elliemae/ds-truncated-tooltip-text": "3.55.0-next.10"
41
+ "@elliemae/ds-circular-progress-indicator": "3.55.0-next.11",
42
+ "@elliemae/ds-button-v2": "3.55.0-next.11",
43
+ "@elliemae/ds-fast-list": "3.55.0-next.11",
44
+ "@elliemae/ds-floating-context": "3.55.0-next.11",
45
+ "@elliemae/ds-grid": "3.55.0-next.11",
46
+ "@elliemae/ds-pills-v2": "3.55.0-next.11",
47
+ "@elliemae/ds-form-checkbox": "3.55.0-next.11",
48
+ "@elliemae/ds-menu-items": "3.55.0-next.11",
49
+ "@elliemae/ds-icons": "3.55.0-next.11",
50
+ "@elliemae/ds-props-helpers": "3.55.0-next.11",
51
+ "@elliemae/ds-system": "3.55.0-next.11",
52
+ "@elliemae/ds-truncated-tooltip-text": "3.55.0-next.11"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@elliemae/pui-cli": "9.0.0-next.65",
@@ -57,9 +57,9 @@
57
57
  "jest": "~29.7.0",
58
58
  "styled-components": "~5.3.9",
59
59
  "styled-system": "^5.1.5",
60
- "@elliemae/ds-form-helpers-mask-hooks": "3.55.0-next.10",
61
- "@elliemae/ds-monorepo-devops": "3.55.0-next.10",
62
- "@elliemae/ds-test-utils": "3.55.0-next.10"
60
+ "@elliemae/ds-monorepo-devops": "3.55.0-next.11",
61
+ "@elliemae/ds-form-helpers-mask-hooks": "3.55.0-next.11",
62
+ "@elliemae/ds-test-utils": "3.55.0-next.11"
63
63
  },
64
64
  "peerDependencies": {
65
65
  "@elliemae/pui-theme": "~2.13.0",