@elliemae/ds-form-combobox 3.53.0-next.10 → 3.53.0-next.12
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/constants/index.js +51 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/parts/DropdownIndicator.js +10 -1
- package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
- package/dist/cjs/parts/Section.js +20 -2
- package/dist/cjs/parts/Section.js.map +3 -3
- package/dist/cjs/parts/container/Container.js +3 -0
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +5 -0
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +4 -0
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/menu-list/LoadingContainer.js +6 -1
- package/dist/cjs/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +24 -5
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/SkeletonContainer.js +12 -2
- package/dist/cjs/parts/menu-list/SkeletonContainer.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +16 -4
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +3 -3
- package/dist/esm/constants/index.js +21 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/parts/DropdownIndicator.js +10 -1
- package/dist/esm/parts/DropdownIndicator.js.map +2 -2
- package/dist/esm/parts/Section.js +20 -2
- package/dist/esm/parts/Section.js.map +2 -2
- package/dist/esm/parts/container/Container.js +4 -1
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +5 -0
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +5 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/menu-list/LoadingContainer.js +6 -1
- package/dist/esm/parts/menu-list/LoadingContainer.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +24 -5
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/SkeletonContainer.js +12 -2
- package/dist/esm/parts/menu-list/SkeletonContainer.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +16 -4
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/types/constants/index.d.ts +12 -0
- package/dist/types/parts/menu-list/LoadingContainer.d.ts +3 -1
- package/dist/types/parts/menu-list/SkeletonContainer.d.ts +2 -1
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +1 -1
- package/package.json +15 -15
|
@@ -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 { 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)<{
|
|
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 { 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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,19 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { SkeletonMenuItem } from "@elliemae/ds-menu-items";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
-
|
|
5
|
+
import { styled } from "@elliemae/ds-system";
|
|
6
|
+
import { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from "../../constants/index.js";
|
|
7
|
+
const StyledSkeletonMenuItem = styled(SkeletonMenuItem, {
|
|
8
|
+
name: DSFormComboboxName,
|
|
9
|
+
slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,
|
|
10
|
+
preserveLegacyDataTestId: true
|
|
11
|
+
})``;
|
|
12
|
+
const SkeletonContainer = ({
|
|
13
|
+
instanceUid,
|
|
14
|
+
getOwnerProps
|
|
15
|
+
}) => {
|
|
6
16
|
const SKELETON_AMOUNT = [0, 1, 2, 3, 4];
|
|
7
|
-
return /* @__PURE__ */ jsx(Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(
|
|
17
|
+
return /* @__PURE__ */ jsx(Grid, { id: `combo-listbox-${instanceUid}`, children: SKELETON_AMOUNT.map((n, index) => /* @__PURE__ */ jsx(StyledSkeletonMenuItem, { dsId: index.toString(), role: "presentation", getOwnerProps }, n)) });
|
|
8
18
|
};
|
|
9
19
|
export {
|
|
10
20
|
SkeletonContainer
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/SkeletonContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const SkeletonContainer = ({
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nimport { FORM_COMBOBOX_SLOTS, DSFormComboboxName } from '../../constants/index.js';\n\nconst StyledSkeletonMenuItem = styled(SkeletonMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.SKELETON_MENU_ITEM,\n preserveLegacyDataTestId: true,\n})``;\n\nexport const SkeletonContainer = ({\n instanceUid,\n getOwnerProps,\n}: {\n instanceUid: string;\n getOwnerProps: () => object;\n}): JSX.Element => {\n const SKELETON_AMOUNT = [0, 1, 2, 3, 4] as const;\n\n return (\n <Grid id={`combo-listbox-${instanceUid}`}>\n {SKELETON_AMOUNT.map((n, index) => (\n <StyledSkeletonMenuItem key={n} dsId={index.toString()} role=\"presentation\" getOwnerProps={getOwnerProps} />\n ))}\n </Grid>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBf;AAxBR,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,SAAS,qBAAqB,0BAA0B;AAExD,MAAM,yBAAyB,OAAO,kBAAkB;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGmB;AACjB,QAAM,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC,SACE,oBAAC,QAAK,IAAI,iBAAiB,WAAW,IACnC,0BAAgB,IAAI,CAAC,GAAG,UACvB,oBAAC,0BAA+B,MAAM,MAAM,SAAS,GAAG,MAAK,gBAAe,iBAA/C,CAA6E,CAC3G,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,14 +3,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useMemo, useContext, useCallback } from "react";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { SingleMenuItem, MultiMenuItem, Separator } from "@elliemae/ds-menu-items";
|
|
6
|
+
import { styled } from "@elliemae/ds-system";
|
|
7
|
+
import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
6
8
|
import { Section } from "../Section.js";
|
|
7
9
|
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
8
10
|
import { StyledCreatableLabel, StyledCreatableValue } from "./styled.js";
|
|
9
11
|
import { isSelected, getSuggestedValueOnChange } from "../../utils/listHelper.js";
|
|
10
12
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
11
13
|
import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from "../../constants.js";
|
|
14
|
+
import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../../constants/index.js";
|
|
15
|
+
const StyledSingleMenuItem = styled(SingleMenuItem, {
|
|
16
|
+
name: DSFormComboboxName,
|
|
17
|
+
slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
|
|
18
|
+
preserveLegacyDataTestId: true
|
|
19
|
+
})``;
|
|
12
20
|
const ItemRenderer = ({ index, extraItemProps }) => {
|
|
13
21
|
const {
|
|
22
|
+
props,
|
|
14
23
|
props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },
|
|
15
24
|
setMenuState,
|
|
16
25
|
inputValue,
|
|
@@ -18,9 +27,10 @@ const ItemRenderer = ({ index, extraItemProps }) => {
|
|
|
18
27
|
setInputValue,
|
|
19
28
|
optionsPerSection
|
|
20
29
|
} = useContext(ComboBoxContext);
|
|
21
|
-
const
|
|
30
|
+
const { getOwnerProps } = useOwnerProps(props);
|
|
31
|
+
const option = extraItemProps?.itemList?.[index];
|
|
22
32
|
const multiple = Array.isArray(selectedValues);
|
|
23
|
-
const CBItem = multiple ? MultiMenuItem :
|
|
33
|
+
const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;
|
|
24
34
|
const handleOnCreateClick = useCallback(() => {
|
|
25
35
|
if (inputValue && onCreate) {
|
|
26
36
|
onCreate(inputValue);
|
|
@@ -95,15 +105,17 @@ const ItemRenderer = ({ index, extraItemProps }) => {
|
|
|
95
105
|
onMouseDown: handleOnMouseDown,
|
|
96
106
|
isActive: dsId === focusOptionIdx,
|
|
97
107
|
isSelected: isSelected(selectedValues, option),
|
|
98
|
-
tabIndex: -1
|
|
108
|
+
tabIndex: -1,
|
|
109
|
+
getOwnerProps
|
|
99
110
|
}
|
|
100
111
|
)
|
|
101
112
|
);
|
|
102
113
|
}
|
|
103
114
|
if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {
|
|
104
115
|
return /* @__PURE__ */ jsx(
|
|
105
|
-
|
|
116
|
+
StyledSingleMenuItem,
|
|
106
117
|
{
|
|
118
|
+
getOwnerProps,
|
|
107
119
|
dataTestid: ComboboxDataTestid.OPTION,
|
|
108
120
|
isActive: dsId === focusOptionIdx,
|
|
109
121
|
...generalProps,
|
|
@@ -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';\n\ninterface ItemRendererT {\n extraItemProps?: {\n itemList
|
|
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 { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\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';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n extraItemProps?: {\n itemList?: DSComboboxT.OptionTypes[];\n };\n index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n const {\n props,\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 { getOwnerProps } = useOwnerProps(props);\n\n const option = extraItemProps?.itemList?.[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;\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 getOwnerProps={getOwnerProps}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <StyledSingleMenuItem\n getOwnerProps={getOwnerProps}\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
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const DSFormComboboxName = "DSCombobox";
|
|
2
|
+
export declare const FORM_COMBOBOX_SLOTS: {
|
|
3
|
+
readonly ROOT: "root";
|
|
4
|
+
readonly INPUT_WRAPPER: "input-wrapper";
|
|
5
|
+
readonly INPUT: "input";
|
|
6
|
+
readonly DROPDOWN_BUTTON: "dropdown-button";
|
|
7
|
+
readonly FAST_LIST: "fast-list";
|
|
8
|
+
readonly SINGLE_MENU_ITEM: "single-menu-item";
|
|
9
|
+
readonly LOADING_INDICATOR: "loading-indicator";
|
|
10
|
+
readonly SKELETON_MENU_ITEM: "skeleton-menu-item";
|
|
11
|
+
};
|
|
12
|
+
export declare const FORM_COMBOBOX_DATA_TESTID: Record<string, string>;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
declare const LoadingContainer: (
|
|
1
|
+
declare const LoadingContainer: ({ getOwnerProps }: {
|
|
2
|
+
getOwnerProps: () => object;
|
|
3
|
+
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
2
4
|
export { LoadingContainer };
|
|
3
5
|
export default LoadingContainer;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.53.0-next.
|
|
3
|
+
"version": "3.53.0-next.12",
|
|
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.53.0-next.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-circular-progress-indicator": "3.53.0-next.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-system": "3.53.0-next.
|
|
52
|
-
"@elliemae/ds-truncated-tooltip-text": "3.53.0-next.
|
|
41
|
+
"@elliemae/ds-button-v2": "3.53.0-next.12",
|
|
42
|
+
"@elliemae/ds-fast-list": "3.53.0-next.12",
|
|
43
|
+
"@elliemae/ds-circular-progress-indicator": "3.53.0-next.12",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.53.0-next.12",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.53.0-next.12",
|
|
46
|
+
"@elliemae/ds-grid": "3.53.0-next.12",
|
|
47
|
+
"@elliemae/ds-menu-items": "3.53.0-next.12",
|
|
48
|
+
"@elliemae/ds-icons": "3.53.0-next.12",
|
|
49
|
+
"@elliemae/ds-pills-v2": "3.53.0-next.12",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.53.0-next.12",
|
|
51
|
+
"@elliemae/ds-system": "3.53.0-next.12",
|
|
52
|
+
"@elliemae/ds-truncated-tooltip-text": "3.53.0-next.12"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@elliemae/pui-cli": "9.0.0-next.63",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"jest": "~29.7.0",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "^5.1.5",
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.53.0-next.12",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.53.0-next.12"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@elliemae/pui-theme": "~2.13.0",
|