@elliemae/ds-form-combobox 3.50.0-rc.3 → 3.50.0-rc.5
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/ComboBoxCTX.js +0 -1
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +11 -12
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +31 -35
- package/dist/cjs/parts/container/Container.js.map +3 -3
- package/dist/cjs/parts/controls/Controls.js +1 -1
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +18 -26
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js +3 -15
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +24 -38
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +0 -1
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/config/useComboBox.js +11 -12
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/parts/container/Container.js +32 -36
- package/dist/esm/parts/container/Container.js.map +3 -3
- package/dist/esm/parts/controls/Controls.js +1 -1
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +21 -29
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js +3 -15
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +24 -38
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/types/parts/menu-list/styled.d.ts +2 -6
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +9 -1
- package/dist/types/react-desc-prop-types.d.ts +7 -0
- package/dist/types/sharedTypes.d.ts +3 -6
- package/package.json +15 -14
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useMemo, useCallback
|
|
4
|
-
import {
|
|
3
|
+
import { useContext, useMemo, useCallback } from "react";
|
|
4
|
+
import { DSFastList } from "@elliemae/ds-fast-list";
|
|
5
|
+
import { styled } from "@elliemae/ds-system";
|
|
6
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
7
|
+
import { StyledListWrapper, StyledNoResultsWrapper } from "./styled.js";
|
|
5
8
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
6
9
|
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
7
|
-
import {
|
|
10
|
+
import { ItemRenderer } from "./useItemRenderer.js";
|
|
8
11
|
import { LoadingContainer } from "./LoadingContainer.js";
|
|
9
12
|
import { SkeletonContainer } from "./SkeletonContainer.js";
|
|
10
13
|
import { useOnElementResize } from "../../utils/useOnElementResize.js";
|
|
14
|
+
const StyledItemsWrapper = styled(Grid)`
|
|
15
|
+
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
16
|
+
`;
|
|
17
|
+
const estimatedSize = () => 32;
|
|
11
18
|
const MenuList = () => {
|
|
12
19
|
const {
|
|
13
20
|
props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },
|
|
14
21
|
controlsWrapperRef,
|
|
15
22
|
listRef,
|
|
16
23
|
wrapperListRef,
|
|
17
|
-
virtualListHelpers,
|
|
18
24
|
correctOptions: filteredOptions,
|
|
19
25
|
instanceUid
|
|
20
26
|
} = useContext(ComboBoxContext);
|
|
21
|
-
const ItemRenderer = useItemRenderer();
|
|
22
27
|
const { width } = useOnElementResize(controlsWrapperRef);
|
|
23
28
|
const preventLoseInputFocus = useCallback((e) => {
|
|
24
29
|
e.preventDefault();
|
|
@@ -27,15 +32,17 @@ const MenuList = () => {
|
|
|
27
32
|
if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid });
|
|
28
33
|
if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, {});
|
|
29
34
|
if (filteredOptions && filteredOptions.length > 0 || onCreate) {
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
-
|
|
35
|
+
return /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
|
|
36
|
+
DSFastList,
|
|
32
37
|
{
|
|
33
|
-
"aria-label": "listbox",
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
dsFastlistWrapperList: { role: "listbox", "data-testid": ComboboxDataTestid.LIST, "aria-label": "listbox" },
|
|
39
|
+
dsFastlistItem: { role: "none" },
|
|
40
|
+
actionRef: listRef,
|
|
41
|
+
count: filteredOptions.length,
|
|
42
|
+
ItemRenderer,
|
|
43
|
+
extraItemProps: { itemList: filteredOptions },
|
|
44
|
+
getId: (index) => filteredOptions[index].dsId,
|
|
45
|
+
estimateSize: estimatedSize
|
|
39
46
|
}
|
|
40
47
|
) });
|
|
41
48
|
}
|
|
@@ -48,22 +55,7 @@ const MenuList = () => {
|
|
|
48
55
|
children: noOptionsMessage
|
|
49
56
|
}
|
|
50
57
|
);
|
|
51
|
-
}, [
|
|
52
|
-
instanceUid,
|
|
53
|
-
isSkeleton,
|
|
54
|
-
isLoading,
|
|
55
|
-
filteredOptions,
|
|
56
|
-
onCreate,
|
|
57
|
-
inline,
|
|
58
|
-
menuMaxHeight,
|
|
59
|
-
listRef,
|
|
60
|
-
virtualListHelpers?.totalSize,
|
|
61
|
-
ItemRenderer,
|
|
62
|
-
noOptionsMessage
|
|
63
|
-
]);
|
|
64
|
-
useLayoutEffect(() => {
|
|
65
|
-
virtualListHelpers?.measure();
|
|
66
|
-
}, [width]);
|
|
58
|
+
}, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);
|
|
67
59
|
return /* @__PURE__ */ jsx(
|
|
68
60
|
StyledListWrapper,
|
|
69
61
|
{
|
|
@@ -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,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 { 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';\n\nconst StyledItemsWrapper = styled(Grid)<{ maxHeight: SizingProps['maxHeight'] }>`\n max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n const {\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 // 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} />;\n\n if (isLoading) return <LoadingContainer />;\n\n if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n return (\n <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n <DSFastList\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 />\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 }, [isSkeleton, instanceUid, isLoading, filteredOptions, onCreate, noOptionsMessage, menuMaxHeight, listRef]);\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;ACmCI;AAnC3B,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBACtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,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;AAI9B,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;AAEpE,QAAI,UAAW,QAAO,oBAAC,oBAAiB;AAExC,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;AAAA,MAChB,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,CAAC,YAAY,aAAa,WAAW,iBAAiB,UAAU,kBAAkB,eAAe,OAAO,CAAC;AAE5G,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,22 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
|
-
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
const StyledListWrapper = styled(Grid)`
|
|
4
5
|
min-width: ${({ inline, minWidth }) => inline ? "100%" : `${String(minWidth)}px`};
|
|
5
6
|
width: ${({ width }) => `${width}px`};
|
|
6
7
|
background-color: #ffffff;
|
|
7
|
-
max-height: ${({ maxHeight }) => `${String(maxHeight)}px`};
|
|
8
8
|
z-index: 100;
|
|
9
9
|
`;
|
|
10
|
-
const StyledList = styled.ul`
|
|
11
|
-
position: relative;
|
|
12
|
-
padding: 0;
|
|
13
|
-
background-color: #ffffff;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
`;
|
|
16
|
-
const StyledVirtualListWrapper = styled.div`
|
|
17
|
-
overflow-y: auto;
|
|
18
|
-
max-height: ${({ maxHeight }) => maxHeight ? `${String(maxHeight)}px` : "300px"};
|
|
19
|
-
`;
|
|
20
10
|
const StyledCreatableLabel = styled.span`
|
|
21
11
|
font-weight: bold;
|
|
22
12
|
font-style: italic;
|
|
@@ -30,9 +20,7 @@ const StyledNoResultsWrapper = styled.div`
|
|
|
30
20
|
export {
|
|
31
21
|
StyledCreatableLabel,
|
|
32
22
|
StyledCreatableValue,
|
|
33
|
-
StyledList,
|
|
34
23
|
StyledListWrapper,
|
|
35
|
-
StyledNoResultsWrapper
|
|
36
|
-
StyledVirtualListWrapper
|
|
24
|
+
StyledNoResultsWrapper
|
|
37
25
|
};
|
|
38
26
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n minWidth: SizingProps['minWidth'];\n maxHeight?: SizingProps['maxHeight'];\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n width: ${({ width }) => `${width}px`};\n background-color: #ffffff;\n z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n font-weight: bold;\n font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n padding: 16px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AAQd,MAAM,oBAAoB,OAAO,IAAI;AAAA,eAC7B,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,16 +9,16 @@ import { StyledCreatableLabel, StyledCreatableValue } from "./styled.js";
|
|
|
9
9
|
import { isSelected, getSuggestedValueOnChange } from "../../utils/listHelper.js";
|
|
10
10
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
11
11
|
import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants.js";
|
|
12
|
-
const
|
|
12
|
+
const ItemRenderer = ({ index, extraItemProps }) => {
|
|
13
13
|
const {
|
|
14
14
|
props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
|
|
15
15
|
setMenuState,
|
|
16
16
|
inputValue,
|
|
17
17
|
focusOptionIdx,
|
|
18
18
|
setInputValue,
|
|
19
|
-
virtualListHelpers,
|
|
20
19
|
optionsPerSection
|
|
21
20
|
} = useContext(ComboBoxContext);
|
|
21
|
+
const option = extraItemProps?.itemList[index];
|
|
22
22
|
const multiple = Array.isArray(selectedValues);
|
|
23
23
|
const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
|
|
24
24
|
const handleOnCreateClick = useCallback(() => {
|
|
@@ -29,16 +29,16 @@ const useItemRenderer = () => {
|
|
|
29
29
|
}
|
|
30
30
|
}, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
|
|
31
31
|
const handleClick = useCallback(
|
|
32
|
-
(
|
|
32
|
+
(currentOption, e) => {
|
|
33
33
|
if (readOnly) return;
|
|
34
|
-
if (
|
|
35
|
-
if (!
|
|
34
|
+
if (currentOption.type === MENU_OPTION_TYPES.OPTION) {
|
|
35
|
+
if (!currentOption.disabled) {
|
|
36
36
|
if (onFilter) onFilter(allOptions, inputValue);
|
|
37
37
|
setInputValue("");
|
|
38
38
|
if (!multiple) {
|
|
39
39
|
setMenuState(false, "selectOption", e);
|
|
40
40
|
}
|
|
41
|
-
onChange(getSuggestedValueOnChange(
|
|
41
|
+
onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
e.stopPropagation();
|
|
@@ -50,24 +50,12 @@ const useItemRenderer = () => {
|
|
|
50
50
|
e.preventDefault();
|
|
51
51
|
}, []);
|
|
52
52
|
return useMemo(() => {
|
|
53
|
-
if (
|
|
54
|
-
return null;
|
|
55
|
-
}
|
|
56
|
-
return virtualListHelpers.virtualItems.map((vItem) => {
|
|
57
|
-
const option = optionsPerSection[vItem.index];
|
|
53
|
+
if (option) {
|
|
58
54
|
const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;
|
|
59
55
|
const generalProps = {
|
|
60
|
-
wrapperStyles: {
|
|
61
|
-
position: "absolute",
|
|
62
|
-
top: 0,
|
|
63
|
-
left: 0,
|
|
64
|
-
width: "100%",
|
|
65
|
-
transform: `translateY(${vItem.start}px)`
|
|
66
|
-
},
|
|
67
56
|
// 'aria-setsize': `${allOptions.length}`,
|
|
68
57
|
// 'aria-posinset': `${vItem.index + 1}`,
|
|
69
58
|
key: `${dsId}`,
|
|
70
|
-
innerRef: vItem.measureRef,
|
|
71
59
|
dsId: dsId.toString(),
|
|
72
60
|
...rest
|
|
73
61
|
};
|
|
@@ -113,29 +101,27 @@ const useItemRenderer = () => {
|
|
|
113
101
|
);
|
|
114
102
|
}
|
|
115
103
|
if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
|
|
116
|
-
return (
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
onClick: handleOnCreateClick
|
|
130
|
-
}
|
|
131
|
-
)
|
|
104
|
+
return /* @__PURE__ */ jsx(
|
|
105
|
+
SingleMenuItem,
|
|
106
|
+
{
|
|
107
|
+
dataTestid: ComboboxDataTestid.OPTION,
|
|
108
|
+
isActive: dsId === focusOptionIdx,
|
|
109
|
+
...generalProps,
|
|
110
|
+
render: ({ label: labelCreatable }) => /* @__PURE__ */ jsxs(Grid, { p: "8px", cols: ["min-content", "auto"], gutter: "xxs", alignItems: "center", children: [
|
|
111
|
+
/* @__PURE__ */ jsx(StyledCreatableLabel, { children: "Add:" }),
|
|
112
|
+
/* @__PURE__ */ jsx(StyledCreatableValue, { children: `"${labelCreatable}"` })
|
|
113
|
+
] }),
|
|
114
|
+
label: option.label,
|
|
115
|
+
onClick: handleOnCreateClick
|
|
116
|
+
}
|
|
132
117
|
);
|
|
133
118
|
}
|
|
134
119
|
return null;
|
|
135
|
-
}
|
|
136
|
-
|
|
120
|
+
}
|
|
121
|
+
return null;
|
|
122
|
+
}, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);
|
|
137
123
|
};
|
|
138
124
|
export {
|
|
139
|
-
|
|
125
|
+
ItemRenderer
|
|
140
126
|
};
|
|
141
127
|
//# sourceMappingURL=useItemRenderer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nexport const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\n\ninterface ItemRendererT {\n extraItemProps?: {\n itemList: DSComboboxT.OptionTypes[];\n };\n index: number;\n}\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n const {\n props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n optionsPerSection,\n } = useContext(ComboBoxContext);\n\n const option = extraItemProps?.itemList[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n const handleClick = useCallback(\n (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (readOnly) return;\n if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n if (!currentOption.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n return useMemo(() => {\n if (option) {\n const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n const generalProps = {\n // 'aria-setsize': `${allOptions.length}`,\n // 'aria-posinset': `${vItem.index + 1}`,\n key: `${dsId}`,\n dsId: dsId.toString(),\n ...rest,\n };\n if (type === MENU_OPTION_TYPES.SECTION) {\n return (\n <Section\n label={option.label}\n {...generalProps}\n // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n options={option.options}\n handleClick={handleClick}\n focusOptionIdx={focusOptionIdx}\n handleOnMouseDown={handleOnMouseDown}\n selectedValues={selectedValues}\n />\n );\n }\n if (type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} render={undefined} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n onClick={(e: React.MouseEvent) => {\n if (applyAriaDisabled) return;\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label?: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return null;\n }\n return null;\n }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,8 @@ const ComboboxPropTypes = {
|
|
|
34
34
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
35
35
|
).defaultValue(false),
|
|
36
36
|
readOnly: PropTypes.bool.description("Makes the component non-editable while remaining accessible.").defaultValue(false),
|
|
37
|
-
onSelectAll: PropTypes.func.description("function triggered when user select all the options").defaultValue("() => {}").deprecated({ version: "25.2" })
|
|
37
|
+
onSelectAll: PropTypes.func.description("function triggered when user select all the options").defaultValue("() => {}").deprecated({ version: "25.2" }),
|
|
38
|
+
popperProps: PropTypes.object.description("props to be passed to the FloatingWrapper component").defaultValue(void 0)
|
|
38
39
|
};
|
|
39
40
|
export {
|
|
40
41
|
ComboboxPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n inputMinWidth?: number;\n menuMinWidth?: SizingProps['minWidth'];\n menuMaxHeight?: SizingProps['maxHeight'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: SelectedOptionsT,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: DSPopperJST.PopperPlacementsT;\n placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible.')\n .defaultValue(false),\n onSelectAll: PropTypes.func\n .description('function triggered when user select all the options')\n .defaultValue('() => {}')\n .deprecated({ version: '25.2' }),\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport type { DSFastListT } from '@elliemae/ds-fast-list';\n\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n inputMinWidth?: number;\n menuMinWidth?: SizingProps['minWidth'];\n menuMaxHeight?: SizingProps['maxHeight'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n popperProps?: DSFloatingWrapperT.Props;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: SelectedOptionsT,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: DSPopperJST.PopperPlacementsT;\n placementOrderPreference: DSPopperJST.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n PropsOptional,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>,\n XstyledProps {}\n\n type ActionRefVirtualized = {\n scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;\n };\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n isSkeleton: PropTypes.bool.description('whether or not the component is in skeleton state').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n readOnly: PropTypes.bool\n .description('Makes the component non-editable while remaining accessible.')\n .defaultValue(false),\n onSelectAll: PropTypes.func\n .description('function triggered when user select all the options')\n .defaultValue('() => {}')\n .deprecated({ version: '25.2' }),\n popperProps: PropTypes.object\n .description('props to be passed to the FloatingWrapper component')\n .defaultValue(undefined),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,2BAA2B,iBAAiB;AAO9C,SAAS,QAA6B,OAAgB;AAAC;AAoGvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,UAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,GAAG,UAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,UAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,UAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,UAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,UAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,UAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,UAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,UAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,UAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,KAAK,YAAY,uBAAuB;AAAA,EAClE,YAAY,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,KAAK;AAAA,EAC9G,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,8DAA8D,EAC1E,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KACpB,YAAY,qDAAqD,EACjE,aAAa,UAAU,EACvB,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,aAAa,UAAU,OACpB,YAAY,qDAAqD,EACjE,aAAa,MAAS;AAC3B;",
|
|
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 {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 }\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
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,yBAAyB;AA+B3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import type { SizingProps } from '@elliemae/ds-system';
|
|
2
3
|
interface StyledListWrapperT {
|
|
3
4
|
minWidth: SizingProps['minWidth'];
|
|
@@ -5,12 +6,7 @@ interface StyledListWrapperT {
|
|
|
5
6
|
width: number | string;
|
|
6
7
|
inline?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const StyledListWrapper: import("styled-components").StyledComponent<"
|
|
9
|
-
export declare const StyledList: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
|
|
10
|
-
export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
11
|
-
inline: boolean | undefined;
|
|
12
|
-
maxHeight: SizingProps['maxHeight'];
|
|
13
|
-
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
9
|
+
export declare const StyledListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledListWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
14
10
|
export declare const StyledCreatableLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
15
11
|
export declare const StyledCreatableValue: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
16
12
|
export declare const StyledNoResultsWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
@@ -1,2 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
import type { DSComboboxT } from '../../react-desc-prop-types.js';
|
|
3
|
+
interface ItemRendererT {
|
|
4
|
+
extraItemProps?: {
|
|
5
|
+
itemList: DSComboboxT.OptionTypes[];
|
|
6
|
+
};
|
|
7
|
+
index: number;
|
|
8
|
+
}
|
|
9
|
+
export declare const ItemRenderer: ({ index, extraItemProps }: ItemRendererT) => JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
3
|
+
import type { DSFloatingWrapperT } from '@elliemae/ds-floating-context';
|
|
3
4
|
import type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';
|
|
4
5
|
import type { SizingProps } from '@elliemae/ds-system';
|
|
5
6
|
import type { DSPopperJST } from '@elliemae/ds-popperjs';
|
|
7
|
+
import type { DSFastListT } from '@elliemae/ds-fast-list';
|
|
6
8
|
export declare function noop<T extends unknown[]>(..._args: T): void;
|
|
7
9
|
export declare namespace DSComboboxT {
|
|
8
10
|
interface CommonItemOptions extends GlobalAttributesT {
|
|
@@ -45,6 +47,7 @@ export declare namespace DSComboboxT {
|
|
|
45
47
|
onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
|
|
46
48
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
|
|
47
49
|
isLoading?: boolean;
|
|
50
|
+
popperProps?: DSFloatingWrapperT.Props;
|
|
48
51
|
}
|
|
49
52
|
interface RequiredProps {
|
|
50
53
|
allOptions: OptionTypes[];
|
|
@@ -71,6 +74,9 @@ export declare namespace DSComboboxT {
|
|
|
71
74
|
}
|
|
72
75
|
interface InternalProps extends DefaultProps, RequiredProps, PropsOptional, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof PropsOptional>, XstyledProps {
|
|
73
76
|
}
|
|
77
|
+
type ActionRefVirtualized = {
|
|
78
|
+
scrollTo: (index: number, opts?: DSFastListT.ScrollToOptions) => void;
|
|
79
|
+
};
|
|
74
80
|
}
|
|
75
81
|
export declare const ComboboxPropTypes: {
|
|
76
82
|
placeholder: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
@@ -96,6 +102,7 @@ export declare const ComboboxPropTypes: {
|
|
|
96
102
|
applyAriaDisabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
97
103
|
readOnly: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
98
104
|
onSelectAll: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
105
|
+
popperProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
99
106
|
'aria-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
100
107
|
'on-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
101
108
|
'data-*': import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { DSFastListT } from '@elliemae/ds-fast-list';
|
|
3
3
|
import type { DSComboboxT } from './react-desc-prop-types.js';
|
|
4
4
|
export declare namespace DSComboboxInternalsT {
|
|
5
5
|
interface ComboBoxContextT {
|
|
6
6
|
props: DSComboboxT.InternalProps;
|
|
7
7
|
internalRef: React.RefObject<HTMLInputElement>;
|
|
8
|
-
virtualListHelpers?: ReturnType<typeof useVirtual>;
|
|
9
8
|
menuState: boolean;
|
|
10
9
|
setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
|
|
11
|
-
referenceElement: HTMLElement | null;
|
|
12
|
-
setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
|
|
13
10
|
pillGroupRef: React.RefObject<HTMLDivElement>;
|
|
14
|
-
scrollOptionIntoView: (dsId: string) => void;
|
|
11
|
+
scrollOptionIntoView: (dsId: string, opts: DSFastListT.ScrollToOptions) => void;
|
|
15
12
|
setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
|
|
16
13
|
hasFocus: boolean;
|
|
17
|
-
listRef: React.
|
|
14
|
+
listRef: React.MutableRefObject<DSComboboxT.ActionRefVirtualized>;
|
|
18
15
|
wrapperListRef: React.RefObject<HTMLDivElement>;
|
|
19
16
|
inputValue: string;
|
|
20
17
|
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.50.0-rc.
|
|
3
|
+
"version": "3.50.0-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,18 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.50.0-rc.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.50.0-rc.5",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.50.0-rc.5",
|
|
43
|
+
"@elliemae/ds-fast-list": "3.50.0-rc.5",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.50.0-rc.5",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.50.0-rc.5",
|
|
46
|
+
"@elliemae/ds-grid": "3.50.0-rc.5",
|
|
47
|
+
"@elliemae/ds-icons": "3.50.0-rc.5",
|
|
48
|
+
"@elliemae/ds-menu-items": "3.50.0-rc.5",
|
|
49
|
+
"@elliemae/ds-pills-v2": "3.50.0-rc.5",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.50.0-rc.5",
|
|
51
|
+
"@elliemae/ds-system": "3.50.0-rc.5",
|
|
52
|
+
"@elliemae/ds-truncated-tooltip-text": "3.50.0-rc.5"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -57,8 +58,8 @@
|
|
|
57
58
|
"jest-cli": "~29.7.0",
|
|
58
59
|
"styled-components": "~5.3.9",
|
|
59
60
|
"styled-system": "~5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.50.0-rc.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.50.0-rc.
|
|
61
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.50.0-rc.5",
|
|
62
|
+
"@elliemae/ds-monorepo-devops": "3.50.0-rc.5"
|
|
62
63
|
},
|
|
63
64
|
"peerDependencies": {
|
|
64
65
|
"@elliemae/pui-theme": "~2.10.0",
|