@elliemae/ds-form-combobox 3.60.0-next.13 → 3.60.0-next.15
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.
- package/dist/cjs/parts/menu-list/MenuList.js +37 -36
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/esm/parts/menu-list/MenuList.js +37 -36
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +1 -1
- package/dist/types/sharedTypes.d.ts +1 -1
- package/package.json +17 -18
|
@@ -54,47 +54,20 @@ const StyledItemsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
54
54
|
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
55
55
|
`;
|
|
56
56
|
const estimatedSize = () => 32;
|
|
57
|
-
const
|
|
57
|
+
const ContentComp = () => {
|
|
58
58
|
const {
|
|
59
59
|
props,
|
|
60
|
-
props: { isLoading,
|
|
61
|
-
controlsWrapperRef,
|
|
60
|
+
props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton },
|
|
62
61
|
listRef,
|
|
63
|
-
wrapperListRef,
|
|
64
62
|
correctOptions: filteredOptions,
|
|
65
63
|
instanceUid
|
|
66
64
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
67
65
|
const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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)(
|
|
66
|
+
if (isSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonContainer.SkeletonContainer, { instanceUid, getOwnerProps });
|
|
67
|
+
if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingContainer.LoadingContainer, { getOwnerProps });
|
|
68
|
+
const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
|
|
69
|
+
if (shouldShowNoResults)
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
71
|
import_styled.StyledNoResultsWrapper,
|
|
99
72
|
{
|
|
100
73
|
id: `combo-listbox-${instanceUid}`,
|
|
@@ -103,7 +76,35 @@ const MenuList = () => {
|
|
|
103
76
|
children: noOptionsMessage
|
|
104
77
|
}
|
|
105
78
|
);
|
|
106
|
-
}
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
|
+
StyledFastList,
|
|
81
|
+
{
|
|
82
|
+
dsFastlistWrapperList: {
|
|
83
|
+
role: "listbox",
|
|
84
|
+
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.LIST,
|
|
85
|
+
"aria-label": "listbox"
|
|
86
|
+
},
|
|
87
|
+
dsFastlistItem: { role: "none" },
|
|
88
|
+
actionRef: listRef,
|
|
89
|
+
count: filteredOptions.length,
|
|
90
|
+
ItemRenderer: import_useItemRenderer.ItemRenderer,
|
|
91
|
+
extraItemProps: { itemList: filteredOptions },
|
|
92
|
+
getId: (index) => filteredOptions[index].dsId,
|
|
93
|
+
estimateSize: estimatedSize,
|
|
94
|
+
getOwnerProps
|
|
95
|
+
}
|
|
96
|
+
) });
|
|
97
|
+
};
|
|
98
|
+
const MenuList = () => {
|
|
99
|
+
const {
|
|
100
|
+
props: { menuMinWidth, inline },
|
|
101
|
+
controlsWrapperRef,
|
|
102
|
+
wrapperListRef
|
|
103
|
+
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
104
|
+
const { width } = (0, import_useOnElementResize.useOnElementResize)(controlsWrapperRef);
|
|
105
|
+
const preventLoseInputFocus = (0, import_react.useCallback)((e) => {
|
|
106
|
+
e.preventDefault();
|
|
107
|
+
}, []);
|
|
107
108
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
109
|
import_styled.StyledListWrapper,
|
|
109
110
|
{
|
|
@@ -112,7 +113,7 @@ const MenuList = () => {
|
|
|
112
113
|
onMouseDown: preventLoseInputFocus,
|
|
113
114
|
width,
|
|
114
115
|
minWidth: menuMinWidth,
|
|
115
|
-
children:
|
|
116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentComp, {})
|
|
116
117
|
}
|
|
117
118
|
);
|
|
118
119
|
};
|
|
@@ -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, 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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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\nconst ContentComp = () => {\n const {\n props,\n props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton },\n listRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n\n if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n if (shouldShowNoResults)\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 return (\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};\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { menuMinWidth, inline },\n controlsWrapperRef,\n wrapperListRef,\n } = useContext(ComboBoxContext);\n\n const { width } = useOnElementResize(controlsWrapperRef);\n\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n <ContentComp />\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCE;AAtCzB,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;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,WAAW;AAAA,IAC1E;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,MAAI,WAAY,QAAO,4CAAC,8CAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,4CAAC,4CAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,8CAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAGJ,SACE,4CAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,eAAe,8CAAmB;AAAA,QAClC,cAAc;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB,cAAc;AAAA,MACd,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,EAAE,MAAM,QAAI,8CAAmB,kBAAkB;AAEvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAEV,sDAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string, opts
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string, opts?: DSFastListT.ScrollToOptions) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n optionsPerSection: DSComboboxT.OptionTypes[];\n shouldPreventContextMenuOpening: boolean;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,uBAAkC;AAgC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,47 +21,20 @@ const StyledItemsWrapper = styled(Grid)`
|
|
|
21
21
|
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
22
22
|
`;
|
|
23
23
|
const estimatedSize = () => 32;
|
|
24
|
-
const
|
|
24
|
+
const ContentComp = () => {
|
|
25
25
|
const {
|
|
26
26
|
props,
|
|
27
|
-
props: { isLoading,
|
|
28
|
-
controlsWrapperRef,
|
|
27
|
+
props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton },
|
|
29
28
|
listRef,
|
|
30
|
-
wrapperListRef,
|
|
31
29
|
correctOptions: filteredOptions,
|
|
32
30
|
instanceUid
|
|
33
31
|
} = useContext(ComboBoxContext);
|
|
34
32
|
const { getOwnerProps } = useOwnerProps(props);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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(
|
|
33
|
+
if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
|
|
34
|
+
if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
|
|
35
|
+
const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;
|
|
36
|
+
if (shouldShowNoResults)
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
65
38
|
StyledNoResultsWrapper,
|
|
66
39
|
{
|
|
67
40
|
id: `combo-listbox-${instanceUid}`,
|
|
@@ -70,7 +43,35 @@ const MenuList = () => {
|
|
|
70
43
|
children: noOptionsMessage
|
|
71
44
|
}
|
|
72
45
|
);
|
|
73
|
-
}
|
|
46
|
+
return /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
|
|
47
|
+
StyledFastList,
|
|
48
|
+
{
|
|
49
|
+
dsFastlistWrapperList: {
|
|
50
|
+
role: "listbox",
|
|
51
|
+
"data-testid": ComboboxDataTestid.LIST,
|
|
52
|
+
"aria-label": "listbox"
|
|
53
|
+
},
|
|
54
|
+
dsFastlistItem: { role: "none" },
|
|
55
|
+
actionRef: listRef,
|
|
56
|
+
count: filteredOptions.length,
|
|
57
|
+
ItemRenderer,
|
|
58
|
+
extraItemProps: { itemList: filteredOptions },
|
|
59
|
+
getId: (index) => filteredOptions[index].dsId,
|
|
60
|
+
estimateSize: estimatedSize,
|
|
61
|
+
getOwnerProps
|
|
62
|
+
}
|
|
63
|
+
) });
|
|
64
|
+
};
|
|
65
|
+
const MenuList = () => {
|
|
66
|
+
const {
|
|
67
|
+
props: { menuMinWidth, inline },
|
|
68
|
+
controlsWrapperRef,
|
|
69
|
+
wrapperListRef
|
|
70
|
+
} = useContext(ComboBoxContext);
|
|
71
|
+
const { width } = useOnElementResize(controlsWrapperRef);
|
|
72
|
+
const preventLoseInputFocus = useCallback((e) => {
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
}, []);
|
|
74
75
|
return /* @__PURE__ */ jsx(
|
|
75
76
|
StyledListWrapper,
|
|
76
77
|
{
|
|
@@ -79,7 +80,7 @@ const MenuList = () => {
|
|
|
79
80
|
onMouseDown: preventLoseInputFocus,
|
|
80
81
|
width,
|
|
81
82
|
minWidth: menuMinWidth,
|
|
82
|
-
children:
|
|
83
|
+
children: /* @__PURE__ */ jsx(ContentComp, {})
|
|
83
84
|
}
|
|
84
85
|
);
|
|
85
86
|
};
|
|
@@ -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, 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\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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\nconst ContentComp = () => {\n const {\n props,\n props: { isLoading, noOptionsMessage, menuMaxHeight, onCreate, isSkeleton },\n listRef,\n correctOptions: filteredOptions,\n instanceUid,\n } = useContext(ComboBoxContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n\n if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n const shouldShowNoResults = !onCreate && (filteredOptions?.length ?? 0) === 0;\n if (shouldShowNoResults)\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 return (\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};\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { menuMinWidth, inline },\n controlsWrapperRef,\n wrapperListRef,\n } = useContext(ComboBoxContext);\n\n const { width } = useOnElementResize(controlsWrapperRef);\n\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledListWrapper\n innerRef={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n >\n <ContentComp />\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCE;AAtCzB,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;AAE5B,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,kBAAkB,eAAe,UAAU,WAAW;AAAA,IAC1E;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAE7C,MAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAClG,MAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAM,sBAAsB,CAAC,aAAa,iBAAiB,UAAU,OAAO;AAC5E,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAGJ,SACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB;AAAA,QACrB,MAAM;AAAA,QACN,eAAe,mBAAmB;AAAA,QAClC,cAAc;AAAA,MAChB;AAAA,MACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,MAC/B,WAAW;AAAA,MACX,OAAO,gBAAgB;AAAA,MACvB;AAAA,MACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,MAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,MACjD,cAAc;AAAA,MACd;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,OAAO;AAAA,IAC9B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAEV,8BAAC,eAAY;AAAA;AAAA,EACf;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string, opts
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\n\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string, opts?: DSFastListT.ScrollToOptions) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n setMenuState: (\n newState: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n correctOptions: DSComboboxT.OptionTypes[];\n instanceUid: string;\n optionsPerSection: DSComboboxT.OptionTypes[];\n shouldPreventContextMenuOpening: boolean;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AAgC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,7 +8,7 @@ export declare namespace DSComboboxInternalsT {
|
|
|
8
8
|
menuState: boolean;
|
|
9
9
|
setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
|
|
10
10
|
pillGroupRef: React.RefObject<HTMLDivElement>;
|
|
11
|
-
scrollOptionIntoView: (dsId: string, opts
|
|
11
|
+
scrollOptionIntoView: (dsId: string, opts?: DSFastListT.ScrollToOptions) => void;
|
|
12
12
|
setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
13
|
hasFocus: boolean;
|
|
14
14
|
listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.15",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,27 +37,26 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.60.0-next.
|
|
41
|
-
"@elliemae/ds-circular-progress-indicator": "3.60.0-next.
|
|
42
|
-
"@elliemae/ds-fast-list": "3.60.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-menu-items": "3.60.0-next.
|
|
46
|
-
"@elliemae/ds-icons": "3.60.0-next.
|
|
47
|
-
"@elliemae/ds-pills-v2": "3.60.0-next.
|
|
48
|
-
"@elliemae/ds-props-helpers": "3.60.0-next.
|
|
49
|
-
"@elliemae/ds-system": "3.60.0-next.
|
|
50
|
-
"@elliemae/ds-truncated-tooltip-text": "3.60.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.60.0-next.15",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.60.0-next.15",
|
|
42
|
+
"@elliemae/ds-fast-list": "3.60.0-next.15",
|
|
43
|
+
"@elliemae/ds-grid": "3.60.0-next.15",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.60.0-next.15",
|
|
45
|
+
"@elliemae/ds-menu-items": "3.60.0-next.15",
|
|
46
|
+
"@elliemae/ds-icons": "3.60.0-next.15",
|
|
47
|
+
"@elliemae/ds-pills-v2": "3.60.0-next.15",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.15",
|
|
49
|
+
"@elliemae/ds-system": "3.60.0-next.15",
|
|
50
|
+
"@elliemae/ds-truncated-tooltip-text": "3.60.0-next.15"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
54
53
|
"@elliemae/pui-theme": "~2.13.0",
|
|
55
|
-
"jest": "
|
|
54
|
+
"jest": "^30.0.0",
|
|
56
55
|
"styled-components": "~5.3.9",
|
|
57
56
|
"styled-system": "^5.1.5",
|
|
58
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.
|
|
59
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
60
|
-
"@elliemae/ds-test-utils": "3.60.0-next.
|
|
57
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.15",
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.15",
|
|
59
|
+
"@elliemae/ds-test-utils": "3.60.0-next.15"
|
|
61
60
|
},
|
|
62
61
|
"peerDependencies": {
|
|
63
62
|
"@elliemae/pui-theme": "~2.13.0",
|
|
@@ -72,7 +71,7 @@
|
|
|
72
71
|
},
|
|
73
72
|
"scripts": {
|
|
74
73
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
75
|
-
"test": "
|
|
74
|
+
"test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
|
|
76
75
|
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
77
76
|
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
78
77
|
"dts": "node ../../../scripts/dts.mjs",
|