@elliemae/ds-form-combobox 3.49.0-rc.25 → 3.49.0-rc.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +5 -4
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +4 -3
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +5 -4
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +4 -3
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/package.json +14 -14
|
@@ -41,7 +41,7 @@ var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
|
41
41
|
var import_RemovableSelectedValuePill = require("./RemovableSelectedValuePill.js");
|
|
42
42
|
const MultiSelectedValuesContainer = () => {
|
|
43
43
|
const {
|
|
44
|
-
props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },
|
|
44
|
+
props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },
|
|
45
45
|
pillGroupRef
|
|
46
46
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
47
47
|
const multiSelectedValue = selectedValues;
|
|
@@ -57,7 +57,7 @@ const MultiSelectedValuesContainer = () => {
|
|
|
57
57
|
import_RemovableSelectedValuePill.RemovableSelectedValuePill,
|
|
58
58
|
{
|
|
59
59
|
pill,
|
|
60
|
-
trailingComma: (disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
60
|
+
trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
61
61
|
},
|
|
62
62
|
pill.dsId
|
|
63
63
|
)),
|
|
@@ -69,14 +69,15 @@ const MultiSelectedValuesContainer = () => {
|
|
|
69
69
|
label: `+${multiSelectedValue.length - correctPillsToShow}`,
|
|
70
70
|
type: "value",
|
|
71
71
|
disabled,
|
|
72
|
-
applyAriaDisabled: applyAriaDisabledToContainer
|
|
72
|
+
applyAriaDisabled: applyAriaDisabledToContainer,
|
|
73
|
+
readOnly
|
|
73
74
|
},
|
|
74
75
|
"grouped"
|
|
75
76
|
)
|
|
76
77
|
] })
|
|
77
78
|
}
|
|
78
79
|
),
|
|
79
|
-
[pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer]
|
|
80
|
+
[pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly]
|
|
80
81
|
);
|
|
81
82
|
};
|
|
82
83
|
//# sourceMappingURL=MultiSelectedValuesContainer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill, idx) => (\n <RemovableSelectedValuePill\n key={pill.dsId}\n pill={pill}\n trailingComma={\n ((disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow) ||\n (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n }\n />\n ))}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabledToContainer}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBf;AAxBR,mBAA2C;AAC3C,yBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill, idx) => (\n <RemovableSelectedValuePill\n key={pill.dsId}\n pill={pill}\n trailingComma={\n ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n }\n />\n ))}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabledToContainer}\n readOnly={readOnly}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBf;AAxBR,mBAA2C;AAC3C,yBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,oCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA;AAAA,YAJzE,KAAK;AAAA,UAMZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA;AAAA,YALI;AAAA,UAMN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,8BAA8B,QAAQ;AAAA,EACzG;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -52,9 +52,9 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
52
52
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
53
53
|
const type = import_react.default.useMemo(() => {
|
|
54
54
|
if (disabled || isNonClearable) return "value";
|
|
55
|
-
if (applyAriaDisabledToContainer) return "labelOnly";
|
|
55
|
+
if (applyAriaDisabledToContainer || readOnly) return "labelOnly";
|
|
56
56
|
return "removable";
|
|
57
|
-
}, [disabled, isNonClearable, applyAriaDisabledToContainer]);
|
|
57
|
+
}, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);
|
|
58
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
59
|
import_ds_pills_v2.DSPillV2,
|
|
60
60
|
{
|
|
@@ -62,7 +62,8 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
62
62
|
label: pill.label,
|
|
63
63
|
disabled,
|
|
64
64
|
type,
|
|
65
|
-
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled
|
|
65
|
+
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled,
|
|
66
|
+
readOnly,
|
|
66
67
|
trailingComma,
|
|
67
68
|
tabIndex: -1,
|
|
68
69
|
onRemove: (e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n}> = (props) => {\n const { pill, trailingComma } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer]);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={type}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n}> = (props) => {\n const { pill, trailingComma } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={type}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,OAAO,aAAAC,QAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAdK,KAAK;AAAA,EAeZ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext", "React"]
|
|
7
7
|
}
|
|
@@ -8,7 +8,7 @@ import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
|
8
8
|
import { RemovableSelectedValuePill } from "./RemovableSelectedValuePill.js";
|
|
9
9
|
const MultiSelectedValuesContainer = () => {
|
|
10
10
|
const {
|
|
11
|
-
props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },
|
|
11
|
+
props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },
|
|
12
12
|
pillGroupRef
|
|
13
13
|
} = useContext(ComboBoxContext);
|
|
14
14
|
const multiSelectedValue = selectedValues;
|
|
@@ -24,7 +24,7 @@ const MultiSelectedValuesContainer = () => {
|
|
|
24
24
|
RemovableSelectedValuePill,
|
|
25
25
|
{
|
|
26
26
|
pill,
|
|
27
|
-
trailingComma: (disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
27
|
+
trailingComma: (disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
28
28
|
},
|
|
29
29
|
pill.dsId
|
|
30
30
|
)),
|
|
@@ -36,14 +36,15 @@ const MultiSelectedValuesContainer = () => {
|
|
|
36
36
|
label: `+${multiSelectedValue.length - correctPillsToShow}`,
|
|
37
37
|
type: "value",
|
|
38
38
|
disabled,
|
|
39
|
-
applyAriaDisabled: applyAriaDisabledToContainer
|
|
39
|
+
applyAriaDisabled: applyAriaDisabledToContainer,
|
|
40
|
+
readOnly
|
|
40
41
|
},
|
|
41
42
|
"grouped"
|
|
42
43
|
)
|
|
43
44
|
] })
|
|
44
45
|
}
|
|
45
46
|
),
|
|
46
|
-
[pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer]
|
|
47
|
+
[pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly]
|
|
47
48
|
);
|
|
48
49
|
};
|
|
49
50
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill, idx) => (\n <RemovableSelectedValuePill\n key={pill.dsId}\n pill={pill}\n trailingComma={\n ((disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow) ||\n (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n }\n />\n ))}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabledToContainer}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACwBf,SAKQ,KALR;AAxBR,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,eAAe,gBAAgB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\n\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled, applyAriaDisabled: applyAriaDisabledToContainer, readOnly },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill, idx) => (\n <RemovableSelectedValuePill\n key={pill.dsId}\n pill={pill}\n trailingComma={\n ((disabled || applyAriaDisabledToContainer || readOnly) && idx + 1 < correctPillsToShow) ||\n (multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length)\n }\n />\n ))}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabledToContainer}\n readOnly={readOnly}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, applyAriaDisabledToContainer, readOnly],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwBf,SAKQ,KALR;AAxBR,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,eAAe,gBAAgB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AAEpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,8BAA8B,SAAS;AAAA,IAC7F;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AAEzC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,iBAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,MAAM,QACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,gBACI,YAAY,gCAAgC,aAAa,MAAM,IAAI,sBACpE,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB;AAAA;AAAA,YAJzE,KAAK;AAAA,UAMZ,CACD;AAAA,UACJ,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS,kBAAkB;AAAA,cACzD,MAAK;AAAA,cACL;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA;AAAA,YALI;AAAA,UAMN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,8BAA8B,QAAQ;AAAA,EACzG;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,9 +19,9 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
19
19
|
} = useContext(ComboBoxContext);
|
|
20
20
|
const type = React2.useMemo(() => {
|
|
21
21
|
if (disabled || isNonClearable) return "value";
|
|
22
|
-
if (applyAriaDisabledToContainer) return "labelOnly";
|
|
22
|
+
if (applyAriaDisabledToContainer || readOnly) return "labelOnly";
|
|
23
23
|
return "removable";
|
|
24
|
-
}, [disabled, isNonClearable, applyAriaDisabledToContainer]);
|
|
24
|
+
}, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);
|
|
25
25
|
return /* @__PURE__ */ jsx(
|
|
26
26
|
DSPillV2,
|
|
27
27
|
{
|
|
@@ -29,7 +29,8 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
29
29
|
label: pill.label,
|
|
30
30
|
disabled,
|
|
31
31
|
type,
|
|
32
|
-
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled
|
|
32
|
+
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled,
|
|
33
|
+
readOnly,
|
|
33
34
|
trailingComma,
|
|
34
35
|
tabIndex: -1,
|
|
35
36
|
onRemove: (e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n}> = (props) => {\n const { pill, trailingComma } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer]);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={type}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+BnB;AA/BJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\n\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n trailingComma?: boolean;\n}> = (props) => {\n const { pill, trailingComma } = props;\n const {\n props: {\n onChange,\n isNonClearable,\n disabled,\n selectedValues,\n applyAriaDisabled: applyAriaDisabledToContainer,\n readOnly,\n },\n internalRef,\n } = useContext(ComboBoxContext);\n\n const type = React.useMemo(() => {\n if (disabled || isNonClearable) return 'value';\n if (applyAriaDisabledToContainer || readOnly) return 'labelOnly';\n return 'removable';\n }, [disabled, isNonClearable, applyAriaDisabledToContainer, readOnly]);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={type}\n applyAriaDisabled={applyAriaDisabledToContainer || pill.applyAriaDisabled}\n readOnly={readOnly}\n trailingComma={trailingComma}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent | React.MouseEvent) => {\n if (readOnly) return;\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BnB;AA/BJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AAEnC,MAAM,6BAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,cAAc,IAAI;AAChC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,OAAOA,OAAM,QAAQ,MAAM;AAC/B,QAAI,YAAY,eAAgB,QAAO;AACvC,QAAI,gCAAgC,SAAU,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,8BAA8B,QAAQ,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK;AAAA,MACxD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,CAAC,MAA8C;AACvD,YAAI,SAAU;AAEd,UAAE,gBAAgB;AAClB,iBAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAdK,KAAK;AAAA,EAeZ;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.49.0-rc.
|
|
3
|
+
"version": "3.49.0-rc.27",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"@elliemae/ds-button-v2": "3.49.0-rc.
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.49.0-rc.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-grid": "3.49.0-rc.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.49.0-rc.27",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.49.0-rc.27",
|
|
43
|
+
"@elliemae/ds-form-checkbox": "3.49.0-rc.27",
|
|
44
|
+
"@elliemae/ds-floating-context": "3.49.0-rc.27",
|
|
45
|
+
"@elliemae/ds-grid": "3.49.0-rc.27",
|
|
46
|
+
"@elliemae/ds-pills-v2": "3.49.0-rc.27",
|
|
47
|
+
"@elliemae/ds-icons": "3.49.0-rc.27",
|
|
48
|
+
"@elliemae/ds-system": "3.49.0-rc.27",
|
|
49
|
+
"@elliemae/ds-menu-items": "3.49.0-rc.27",
|
|
50
|
+
"@elliemae/ds-truncated-tooltip-text": "3.49.0-rc.27",
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.49.0-rc.27"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"jest-cli": "~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.49.0-rc.
|
|
61
|
-
"@elliemae/ds-monorepo-devops": "3.49.0-rc.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.49.0-rc.27",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.49.0-rc.27"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@elliemae/pui-theme": "~2.10.0",
|