@elliemae/ds-form-combobox 3.55.0-next.1 → 3.55.0-next.3
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 +14 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/index.js +15 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/menu-list/useItemRenderer.js +6 -1
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/esm/constants/index.js +14 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/index.js +15 -4
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/menu-list/useItemRenderer.js +6 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +2 -2
- package/dist/types/constants/index.d.ts +20 -10
- package/dist/types/index.d.ts +4 -3
- package/dist/types/tests/DSCombobox.exports.test.d.ts +1 -0
- package/dist/types/tests/DSCombobox.get-owner-props.test.d.ts +1 -0
- package/package.json +16 -16
|
@@ -46,8 +46,21 @@ const FORM_COMBOBOX_SLOTS = {
|
|
|
46
46
|
SECTION_WRAPPER: "section-wrapper",
|
|
47
47
|
SECTION_LABEL: "section-label",
|
|
48
48
|
SINGLE_MENU_ITEM: "single-menu-item",
|
|
49
|
+
MULTI_MENU_ITEM: "multi-menu-item",
|
|
49
50
|
LOADING_INDICATOR: "loading-indicator",
|
|
50
51
|
SKELETON_MENU_ITEM: "skeleton-menu-item"
|
|
51
52
|
};
|
|
52
|
-
const FORM_COMBOBOX_DATA_TESTID =
|
|
53
|
+
const FORM_COMBOBOX_DATA_TESTID = {
|
|
54
|
+
...(0, import_ds_system.slotObjectToDataTestIds)(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
|
|
55
|
+
// legacy data-testid
|
|
56
|
+
CONTROLS_WRAPPER: "combobox-controls-wrapper",
|
|
57
|
+
CONTAINER: "combobox-container",
|
|
58
|
+
INPUT: "combobox-input",
|
|
59
|
+
LIST: "combobox-menu-list",
|
|
60
|
+
NO_MATCHES_FOUND: "combobox-no-matches-found",
|
|
61
|
+
SELECTED_VALUES: "combobox-selected-values",
|
|
62
|
+
DROPDOWN: "combobox-dropdown-btn",
|
|
63
|
+
OPTION: "combobox-option",
|
|
64
|
+
ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
|
|
65
|
+
};
|
|
53
66
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n MULTI_MENU_ITEM: 'multi-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n // legacy data-testid\n CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n CONTAINER: 'combobox-container',\n INPUT: 'combobox-input',\n LIST: 'combobox-menu-list',\n NO_MATCHES_FOUND: 'combobox-no-matches-found',\n SELECTED_VALUES: 'combobox-selected-values',\n DROPDOWN: 'combobox-dropdown-btn',\n OPTION: 'combobox-option',\n ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
21
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
22
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -29,12 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
29
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
29
|
var index_exports = {};
|
|
31
30
|
__export(index_exports, {
|
|
32
|
-
|
|
31
|
+
ComboboxDataTestid: () => import_ComboboxDataTestids.ComboboxDataTestid,
|
|
32
|
+
ComboboxPropTypes: () => import_react_desc_prop_types.ComboboxPropTypes,
|
|
33
|
+
DSComboBox: () => import_ComboBox.DSComboBox,
|
|
34
|
+
DSComboBoxName: () => import_theming.DSComboBoxName,
|
|
35
|
+
DSComboBoxV3: () => import_ComboBox.DSComboBoxV3,
|
|
36
|
+
DSComboBoxWithSchema: () => import_ComboBox.DSComboBoxWithSchema,
|
|
37
|
+
DSComboboxSlots: () => import_theming.DSComboboxSlots,
|
|
38
|
+
DSFormComboboxName: () => import_constants.DSFormComboboxName,
|
|
39
|
+
FORM_COMBOBOX_DATA_TESTID: () => import_constants.FORM_COMBOBOX_DATA_TESTID,
|
|
40
|
+
FORM_COMBOBOX_SLOTS: () => import_constants.FORM_COMBOBOX_SLOTS,
|
|
41
|
+
offScreenStyle: () => import_ComboBox.offScreenStyle
|
|
33
42
|
});
|
|
34
43
|
module.exports = __toCommonJS(index_exports);
|
|
35
44
|
var React = __toESM(require("react"));
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
var import_ComboBox = require("./ComboBox.js");
|
|
46
|
+
var import_theming = require("./theming.js");
|
|
47
|
+
var import_constants = require("./constants/index.js");
|
|
48
|
+
var import_ComboboxDataTestids = require("./ComboboxDataTestids.js");
|
|
39
49
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
50
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from './ComboBox.js';\nexport { DSComboBoxName, DSComboboxSlots } from './theming.js';\nexport { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from './constants/index.js';\nexport { ComboboxDataTestid } from './ComboboxDataTestids.js';\nexport { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAA+E;AAC/E,qBAAgD;AAChD,uBAAmF;AACnF,iCAAmC;AACnC,mCAAoD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,6 +50,11 @@ const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.S
|
|
|
50
50
|
slot: import_constants2.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
|
|
51
51
|
preserveLegacyDataTestId: true
|
|
52
52
|
})``;
|
|
53
|
+
const StyledMultiMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.MultiMenuItem, {
|
|
54
|
+
name: import_constants2.DSFormComboboxName,
|
|
55
|
+
slot: import_constants2.FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
|
|
56
|
+
preserveLegacyDataTestId: true
|
|
57
|
+
})``;
|
|
53
58
|
const ItemRenderer = ({ index, extraItemProps }) => {
|
|
54
59
|
const {
|
|
55
60
|
props,
|
|
@@ -69,7 +74,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
|
|
|
69
74
|
);
|
|
70
75
|
const option = extraItemProps?.itemList?.[index];
|
|
71
76
|
const multiple = Array.isArray(selectedValues);
|
|
72
|
-
const CBItem = multiple ?
|
|
77
|
+
const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;
|
|
73
78
|
const handleOnCreateClick = (0, import_react.useCallback)(() => {
|
|
74
79
|
if (inputValue && onCreate) {
|
|
75
80
|
onCreate(inputValue);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n }),\n [index],\n );\n\n const option = extraItemProps?.itemList?.[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ?
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* 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\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.MULTI_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 const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n }),\n [index],\n );\n\n const option = extraItemProps?.itemList?.[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? StyledMultiMenuItem : 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 getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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 getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <StyledSingleMenuItem\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -11,10 +11,23 @@ const FORM_COMBOBOX_SLOTS = {
|
|
|
11
11
|
SECTION_WRAPPER: "section-wrapper",
|
|
12
12
|
SECTION_LABEL: "section-label",
|
|
13
13
|
SINGLE_MENU_ITEM: "single-menu-item",
|
|
14
|
+
MULTI_MENU_ITEM: "multi-menu-item",
|
|
14
15
|
LOADING_INDICATOR: "loading-indicator",
|
|
15
16
|
SKELETON_MENU_ITEM: "skeleton-menu-item"
|
|
16
17
|
};
|
|
17
|
-
const FORM_COMBOBOX_DATA_TESTID =
|
|
18
|
+
const FORM_COMBOBOX_DATA_TESTID = {
|
|
19
|
+
...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),
|
|
20
|
+
// legacy data-testid
|
|
21
|
+
CONTROLS_WRAPPER: "combobox-controls-wrapper",
|
|
22
|
+
CONTAINER: "combobox-container",
|
|
23
|
+
INPUT: "combobox-input",
|
|
24
|
+
LIST: "combobox-menu-list",
|
|
25
|
+
NO_MATCHES_FOUND: "combobox-no-matches-found",
|
|
26
|
+
SELECTED_VALUES: "combobox-selected-values",
|
|
27
|
+
DROPDOWN: "combobox-dropdown-btn",
|
|
28
|
+
OPTION: "combobox-option",
|
|
29
|
+
ALLY_SELECTED_VALUES: "combobox-ally-selected-values"
|
|
30
|
+
};
|
|
18
31
|
export {
|
|
19
32
|
DSFormComboboxName,
|
|
20
33
|
FORM_COMBOBOX_DATA_TESTID,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B,wBAAwB,oBAAoB,mBAAmB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFormComboboxName = 'DSCombobox';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_SLOTS = {\n // Same as old container\n ROOT: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n DROPDOWN_BUTTON: 'dropdown-button',\n FAST_LIST: 'fast-list',\n SECTION_WRAPPER: 'section-wrapper',\n SECTION_LABEL: 'section-label',\n SINGLE_MENU_ITEM: 'single-menu-item',\n MULTI_MENU_ITEM: 'multi-menu-item',\n LOADING_INDICATOR: 'loading-indicator',\n SKELETON_MENU_ITEM: 'skeleton-menu-item',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FORM_COMBOBOX_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n // legacy data-testid\n CONTROLS_WRAPPER: 'combobox-controls-wrapper',\n CONTAINER: 'combobox-container',\n INPUT: 'combobox-input',\n LIST: 'combobox-menu-list',\n NO_MATCHES_FOUND: 'combobox-no-matches-found',\n SELECTED_VALUES: 'combobox-selected-values',\n DROPDOWN: 'combobox-dropdown-btn',\n OPTION: 'combobox-option',\n ALLY_SELECTED_VALUES: 'combobox-ally-selected-values',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA;AAAA,EAEjC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,oBAAoB;AACtB;AAGO,MAAM,4BAA4B;AAAA,EACvC,GAAG,wBAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,sBAAsB;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from "./ComboBox.js";
|
|
3
|
+
import { DSComboBoxName, DSComboboxSlots } from "./theming.js";
|
|
4
|
+
import { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from "./constants/index.js";
|
|
5
|
+
import { ComboboxDataTestid } from "./ComboboxDataTestids.js";
|
|
5
6
|
import { ComboboxPropTypes } from "./react-desc-prop-types.js";
|
|
6
7
|
export {
|
|
7
|
-
|
|
8
|
+
ComboboxDataTestid,
|
|
9
|
+
ComboboxPropTypes,
|
|
10
|
+
DSComboBox,
|
|
11
|
+
DSComboBoxName,
|
|
12
|
+
DSComboBoxV3,
|
|
13
|
+
DSComboBoxWithSchema,
|
|
14
|
+
DSComboboxSlots,
|
|
15
|
+
DSFormComboboxName,
|
|
16
|
+
FORM_COMBOBOX_DATA_TESTID,
|
|
17
|
+
FORM_COMBOBOX_SLOTS,
|
|
18
|
+
offScreenStyle
|
|
8
19
|
};
|
|
9
20
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from './ComboBox.js';\nexport { DSComboBoxName, DSComboboxSlots } from './theming.js';\nexport { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from './constants/index.js';\nexport { ComboboxDataTestid } from './ComboboxDataTestids.js';\nexport { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,cAAc,sBAAsB,sBAAsB;AAC/E,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,oBAAoB,2BAA2B,2BAA2B;AACnF,SAAS,0BAA0B;AACnC,SAA2B,yBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,6 +17,11 @@ const StyledSingleMenuItem = styled(SingleMenuItem, {
|
|
|
17
17
|
slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
|
|
18
18
|
preserveLegacyDataTestId: true
|
|
19
19
|
})``;
|
|
20
|
+
const StyledMultiMenuItem = styled(MultiMenuItem, {
|
|
21
|
+
name: DSFormComboboxName,
|
|
22
|
+
slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
|
|
23
|
+
preserveLegacyDataTestId: true
|
|
24
|
+
})``;
|
|
20
25
|
const ItemRenderer = ({ index, extraItemProps }) => {
|
|
21
26
|
const {
|
|
22
27
|
props,
|
|
@@ -36,7 +41,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
|
|
|
36
41
|
);
|
|
37
42
|
const option = extraItemProps?.itemList?.[index];
|
|
38
43
|
const multiple = Array.isArray(selectedValues);
|
|
39
|
-
const CBItem = multiple ?
|
|
44
|
+
const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;
|
|
40
45
|
const handleOnCreateClick = useCallback(() => {
|
|
41
46
|
if (inputValue && onCreate) {
|
|
42
47
|
onCreate(inputValue);
|
|
@@ -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 { 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 const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n }),\n [index],\n );\n\n const option = extraItemProps?.itemList?.[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ?
|
|
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\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n name: DSFormComboboxName,\n slot: FORM_COMBOBOX_SLOTS.MULTI_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 const getOwnerPropsArguments = useCallback(\n () => ({\n index,\n }),\n [index],\n );\n\n const option = extraItemProps?.itemList?.[index];\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? StyledMultiMenuItem : 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 getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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 getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <StyledSingleMenuItem\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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": "AAAA,YAAY,WAAW;AC0Gb,cAiDI,YAjDJ;AAvGV,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,gBAAgB,eAAe,iBAAiB;AACzD,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB,4BAA4B;AAC3D,SAAS,YAAY,iCAAiC;AACtD,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB,kCAAkC;AAC9D,SAAS,oBAAoB,2BAA2B;AASxD,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAED,MAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,OAAO,eAAe,MAAkC;AACrF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,UAAU,gBAAgB,gBAAgB,UAAU,YAAY,SAAS;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,SAAS,gBAAgB,WAAW,KAAK;AAE/C,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,SAAS,WAAW,sBAAsB;AAEhD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,cAAc,UAAU;AAC1B,eAAS,UAAU;AACnB,oBAAc,EAAE;AAChB,UAAI,SAAU,UAAS,YAAY,UAAU;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,YAAY,YAAY,aAAa,CAAC;AAE9D,QAAM,cAAc;AAAA,IAClB,CAAC,eAAuC,MAAwB;AAC9D,UAAI,SAAU;AACd,UAAI,cAAc,SAAS,kBAAkB,QAAQ;AACnD,YAAI,CAAC,cAAc,UAAU;AAC3B,cAAI,SAAU,UAAS,YAAY,UAAU;AAC7C,wBAAc,EAAE;AAChB,cAAI,CAAC,UAAU;AACb,yBAAa,OAAO,gBAAgB,CAAC;AAAA,UACvC;AACA,mBAAS,0BAA0B,eAAe,gBAAgB,cAAc,GAAG,eAAe,CAAC;AAAA,QACrG;AAAA,MACF;AAEA,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,gBAAgB,YAAY,UAAU,cAAc,QAAQ;AAAA,EACzE;AAGA,QAAM,oBAAoB,YAAY,CAAC,MAAuC;AAC5E,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAGL,SAAO,QAAQ,MAAM;AACnB,QAAI,QAAQ;AACV,YAAM,EAAE,MAAM,MAAM,UAAU,mBAAmB,UAAU,cAAc,GAAG,KAAK,IAAI;AACrF,YAAM,eAAe;AAAA;AAAA;AAAA,QAGnB,KAAK,GAAG,IAAI;AAAA,QACZ,MAAM,KAAK,SAAS;AAAA,QACpB,GAAG;AAAA,MACL;AACA,UAAI,SAAS,kBAAkB,SAAS;AACtC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO;AAAA,YACb,GAAG;AAAA,YAEJ,SAAS,OAAO;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,MAEJ;AACA,UAAI,SAAS,kBAAkB,WAAW;AACxC,eAAO,oBAAC,aAAW,GAAG,cAAc,QAAQ,QAAW;AAAA,MACzD;AACA,UAAI,OAAO,SAAS,kBAAkB,QAAQ;AAC5C;AAAA;AAAA,UAEE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,OAAO,OAAO;AAAA,cACd,OAAO,OAAO;AAAA,cACd,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAAwB;AAChC,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,WAAW,gBAAgB,MAAM;AAAA,cAC7C,UAAU;AAAA,cACV;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AACA,UAAI,SAAS,2BAA2B,WAAW;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,YAAY,mBAAmB;AAAA,YAC/B,UAAU,SAAS;AAAA,YAClB,GAAG;AAAA,YACJ,QAAQ,CAAC,EAAE,OAAO,eAAe,MAC/B,qBAAC,QAAK,GAAE,OAAM,MAAM,CAAC,eAAe,MAAM,GAAG,QAAO,OAAM,YAAW,UACnE;AAAA,kCAAC,wBAAqB,kBAAI;AAAA,cAC1B,oBAAC,wBAAsB,cAAI,cAAc,KAAI;AAAA,eAC/C;AAAA,YAEF,OAAO,OAAO;AAAA,YACd,SAAS;AAAA;AAAA,QACX;AAAA,MAEJ;AACA,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,gBAAgB,YAAY,UAAU,YAAY,QAAQ,CAAC;AACpG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,18 +8,28 @@ export declare const FORM_COMBOBOX_SLOTS: {
|
|
|
8
8
|
readonly SECTION_WRAPPER: "section-wrapper";
|
|
9
9
|
readonly SECTION_LABEL: "section-label";
|
|
10
10
|
readonly SINGLE_MENU_ITEM: "single-menu-item";
|
|
11
|
+
readonly MULTI_MENU_ITEM: "multi-menu-item";
|
|
11
12
|
readonly LOADING_INDICATOR: "loading-indicator";
|
|
12
13
|
readonly SKELETON_MENU_ITEM: "skeleton-menu-item";
|
|
13
14
|
};
|
|
14
15
|
export declare const FORM_COMBOBOX_DATA_TESTID: {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
16
|
+
CONTROLS_WRAPPER: string;
|
|
17
|
+
CONTAINER: string;
|
|
18
|
+
INPUT: string;
|
|
19
|
+
LIST: string;
|
|
20
|
+
NO_MATCHES_FOUND: string;
|
|
21
|
+
SELECTED_VALUES: string;
|
|
22
|
+
DROPDOWN: string;
|
|
23
|
+
OPTION: string;
|
|
24
|
+
ALLY_SELECTED_VALUES: string;
|
|
25
|
+
ROOT: "ds-combobox-root";
|
|
26
|
+
INPUT_WRAPPER: "ds-combobox-input-wrapper";
|
|
27
|
+
DROPDOWN_BUTTON: "ds-combobox-dropdown-button";
|
|
28
|
+
FAST_LIST: "ds-combobox-fast-list";
|
|
29
|
+
SECTION_WRAPPER: "ds-combobox-section-wrapper";
|
|
30
|
+
SECTION_LABEL: "ds-combobox-section-label";
|
|
31
|
+
SINGLE_MENU_ITEM: "ds-combobox-single-menu-item";
|
|
32
|
+
MULTI_MENU_ITEM: "ds-combobox-multi-menu-item";
|
|
33
|
+
LOADING_INDICATOR: "ds-combobox-loading-indicator";
|
|
34
|
+
SKELETON_MENU_ITEM: "ds-combobox-skeleton-menu-item";
|
|
25
35
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export { DSComboBox, DSComboBoxV3, DSComboBoxWithSchema, offScreenStyle } from './ComboBox.js';
|
|
2
|
+
export { DSComboBoxName, DSComboboxSlots } from './theming.js';
|
|
3
|
+
export { DSFormComboboxName, FORM_COMBOBOX_DATA_TESTID, FORM_COMBOBOX_SLOTS } from './constants/index.js';
|
|
4
|
+
export { ComboboxDataTestid } from './ComboboxDataTestids.js';
|
|
4
5
|
export { type DSComboboxT, ComboboxPropTypes } from './react-desc-prop-types.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.55.0-next.
|
|
3
|
+
"version": "3.55.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.55.0-next.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.55.0-next.
|
|
43
|
-
"@elliemae/ds-fast-list": "3.55.0-next.
|
|
44
|
-
"@elliemae/ds-floating-context": "3.55.0-next.
|
|
45
|
-
"@elliemae/ds-form-checkbox": "3.55.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-pills-v2": "3.55.0-next.
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.55.0-next.
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.55.0-next.3",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.55.0-next.3",
|
|
43
|
+
"@elliemae/ds-fast-list": "3.55.0-next.3",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.55.0-next.3",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.55.0-next.3",
|
|
46
|
+
"@elliemae/ds-grid": "3.55.0-next.3",
|
|
47
|
+
"@elliemae/ds-icons": "3.55.0-next.3",
|
|
48
|
+
"@elliemae/ds-menu-items": "3.55.0-next.3",
|
|
49
|
+
"@elliemae/ds-pills-v2": "3.55.0-next.3",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.55.0-next.3",
|
|
51
|
+
"@elliemae/ds-system": "3.55.0-next.3",
|
|
52
|
+
"@elliemae/ds-truncated-tooltip-text": "3.55.0-next.3"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"jest": "~29.7.0",
|
|
58
58
|
"styled-components": "~5.3.9",
|
|
59
59
|
"styled-system": "^5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.55.0-next.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.55.0-next.
|
|
62
|
-
"@elliemae/ds-test-utils": "3.55.0-next.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.55.0-next.3",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.55.0-next.3",
|
|
62
|
+
"@elliemae/ds-test-utils": "3.55.0-next.3"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@elliemae/pui-theme": "~2.13.0",
|