@elliemae/ds-form-combobox 3.49.0-rc.20 → 3.49.0-rc.22
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 +8 -1
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +9 -3
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +8 -1
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +9 -3
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +3 -3
- package/dist/types/parts/multi-selected-values-container/RemovableSelectedValuePill.d.ts +1 -0
- package/package.json +14 -14
|
@@ -53,7 +53,14 @@ const MultiSelectedValuesContainer = () => {
|
|
|
53
53
|
style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
|
|
54
54
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
|
|
55
55
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { innerRef: pillGroupRef, children: [
|
|
56
|
-
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
|
+
import_RemovableSelectedValuePill.RemovableSelectedValuePill,
|
|
58
|
+
{
|
|
59
|
+
pill,
|
|
60
|
+
trailingComma: (disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
61
|
+
},
|
|
62
|
+
pill.dsId
|
|
63
|
+
)),
|
|
57
64
|
multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
65
|
import_ds_pills_v2.DSPillV2,
|
|
59
66
|
{
|
|
@@ -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';\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) => <RemovableSelectedValuePill
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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,6BAA6B;AAAA,IACnF;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,iCAAiC,MAAM,IAAI,sBACxD,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;AAAA,YAJf;AAAA,UAKN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,4BAA4B;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -33,12 +33,12 @@ __export(RemovableSelectedValuePill_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(RemovableSelectedValuePill_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
|
|
38
38
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
39
39
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
40
40
|
const RemovableSelectedValuePill = (props) => {
|
|
41
|
-
const { pill } = props;
|
|
41
|
+
const { pill, trailingComma } = props;
|
|
42
42
|
const {
|
|
43
43
|
props: {
|
|
44
44
|
onChange,
|
|
@@ -50,14 +50,20 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
50
50
|
},
|
|
51
51
|
internalRef
|
|
52
52
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
53
|
+
const type = import_react.default.useMemo(() => {
|
|
54
|
+
if (disabled || isNonClearable) return "value";
|
|
55
|
+
if (applyAriaDisabledToContainer) return "labelOnly";
|
|
56
|
+
return "removable";
|
|
57
|
+
}, [disabled, isNonClearable, applyAriaDisabledToContainer]);
|
|
53
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
59
|
import_ds_pills_v2.DSPillV2,
|
|
55
60
|
{
|
|
56
61
|
size: "s",
|
|
57
62
|
label: pill.label,
|
|
58
63
|
disabled,
|
|
59
|
-
type
|
|
64
|
+
type,
|
|
60
65
|
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled || readOnly,
|
|
66
|
+
trailingComma,
|
|
61
67
|
tabIndex: -1,
|
|
62
68
|
onRemove: (e) => {
|
|
63
69
|
if (readOnly) return;
|
|
@@ -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';\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n}> = (props) => {\n const { pill } = 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 return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": ["ComboBoxContext"]
|
|
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 || 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,6BAA8B,QAAO;AACzC,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,4BAA4B,CAAC;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK,qBAAqB;AAAA,MAC7E;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,IAbK,KAAK;AAAA,EAcZ;AAEJ;",
|
|
6
|
+
"names": ["ComboBoxContext", "React"]
|
|
7
7
|
}
|
|
@@ -20,7 +20,14 @@ const MultiSelectedValuesContainer = () => {
|
|
|
20
20
|
style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
|
|
21
21
|
"data-testid": ComboboxDataTestid.SELECTED_VALUES,
|
|
22
22
|
children: /* @__PURE__ */ jsxs(DSPillGroupV2, { innerRef: pillGroupRef, children: [
|
|
23
|
-
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill) => /* @__PURE__ */ jsx(
|
|
23
|
+
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill, idx) => /* @__PURE__ */ jsx(
|
|
24
|
+
RemovableSelectedValuePill,
|
|
25
|
+
{
|
|
26
|
+
pill,
|
|
27
|
+
trailingComma: (disabled || applyAriaDisabledToContainer) && idx + 1 < correctPillsToShow || multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length
|
|
28
|
+
},
|
|
29
|
+
pill.dsId
|
|
30
|
+
)),
|
|
24
31
|
multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ jsx(
|
|
25
32
|
DSPillV2,
|
|
26
33
|
{
|
|
@@ -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';\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) => <RemovableSelectedValuePill
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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,6BAA6B;AAAA,IACnF;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,iCAAiC,MAAM,IAAI,sBACxD,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;AAAA,YAJf;AAAA,UAKN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,UAAU,4BAA4B;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
3
|
+
import React2, { useContext } from "react";
|
|
4
4
|
import { DSPillV2 } from "@elliemae/ds-pills-v2";
|
|
5
5
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
6
6
|
import { getSuggestedValueOnChange } from "../../utils/listHelper.js";
|
|
7
7
|
const RemovableSelectedValuePill = (props) => {
|
|
8
|
-
const { pill } = props;
|
|
8
|
+
const { pill, trailingComma } = props;
|
|
9
9
|
const {
|
|
10
10
|
props: {
|
|
11
11
|
onChange,
|
|
@@ -17,14 +17,20 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
17
17
|
},
|
|
18
18
|
internalRef
|
|
19
19
|
} = useContext(ComboBoxContext);
|
|
20
|
+
const type = React2.useMemo(() => {
|
|
21
|
+
if (disabled || isNonClearable) return "value";
|
|
22
|
+
if (applyAriaDisabledToContainer) return "labelOnly";
|
|
23
|
+
return "removable";
|
|
24
|
+
}, [disabled, isNonClearable, applyAriaDisabledToContainer]);
|
|
20
25
|
return /* @__PURE__ */ jsx(
|
|
21
26
|
DSPillV2,
|
|
22
27
|
{
|
|
23
28
|
size: "s",
|
|
24
29
|
label: pill.label,
|
|
25
30
|
disabled,
|
|
26
|
-
type
|
|
31
|
+
type,
|
|
27
32
|
applyAriaDisabled: applyAriaDisabledToContainer || pill.applyAriaDisabled || readOnly,
|
|
33
|
+
trailingComma,
|
|
28
34
|
tabIndex: -1,
|
|
29
35
|
onRemove: (e) => {
|
|
30
36
|
if (readOnly) return;
|
|
@@ -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';\nexport const RemovableSelectedValuePill: React.ComponentType<{\n pill: DSComboboxT.ItemOption;\n applyAriaDisabled?: boolean;\n}> = (props) => {\n const { pill } = 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 return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": []
|
|
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 || 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,6BAA8B,QAAO;AACzC,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,gBAAgB,4BAA4B,CAAC;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAmB,gCAAgC,KAAK,qBAAqB;AAAA,MAC7E;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,IAbK,KAAK;AAAA,EAcZ;AAEJ;",
|
|
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.22",
|
|
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-floating-context": "3.49.0-rc.
|
|
43
|
-
"@elliemae/ds-circular-progress-indicator": "3.49.0-rc.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-system": "3.49.0-rc.
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-button-v2": "3.49.0-rc.22",
|
|
42
|
+
"@elliemae/ds-floating-context": "3.49.0-rc.22",
|
|
43
|
+
"@elliemae/ds-circular-progress-indicator": "3.49.0-rc.22",
|
|
44
|
+
"@elliemae/ds-grid": "3.49.0-rc.22",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.49.0-rc.22",
|
|
46
|
+
"@elliemae/ds-menu-items": "3.49.0-rc.22",
|
|
47
|
+
"@elliemae/ds-pills-v2": "3.49.0-rc.22",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.49.0-rc.22",
|
|
49
|
+
"@elliemae/ds-system": "3.49.0-rc.22",
|
|
50
|
+
"@elliemae/ds-icons": "3.49.0-rc.22",
|
|
51
|
+
"@elliemae/ds-truncated-tooltip-text": "3.49.0-rc.22"
|
|
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-
|
|
61
|
-
"@elliemae/ds-
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.49.0-rc.22",
|
|
61
|
+
"@elliemae/ds-monorepo-devops": "3.49.0-rc.22"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@elliemae/pui-theme": "~2.10.0",
|