@elliemae/ds-form-combobox 3.5.0-rc.5 → 3.5.0-rc.6
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/A11ySelectedValues.js +13 -15
- package/dist/cjs/parts/A11ySelectedValues.js.map +2 -2
- package/dist/cjs/parts/controls/Controls.js +1 -1
- package/dist/cjs/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/A11ySelectedValues.js +13 -15
- package/dist/esm/parts/A11ySelectedValues.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js +1 -1
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/package.json +12 -12
|
@@ -36,22 +36,20 @@ const A11ySelectedValues = () => {
|
|
|
36
36
|
const {
|
|
37
37
|
props: { selectedValues }
|
|
38
38
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
if (selectedValues.length > 0) {
|
|
43
|
-
msg = `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
|
|
44
|
-
}
|
|
45
|
-
} else if (selectedValues) {
|
|
46
|
-
msg = `Option selected: ${selectedValues?.label}`;
|
|
39
|
+
const msg = (0, import_react.useMemo)(() => {
|
|
40
|
+
if (Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
41
|
+
return `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
|
|
47
42
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"aria-atomic": "false",
|
|
53
|
-
"aria-relevant": "additions text"
|
|
54
|
-
}, msg);
|
|
43
|
+
if (selectedValues) {
|
|
44
|
+
return `Option selected: ${selectedValues?.label}`;
|
|
45
|
+
}
|
|
46
|
+
return "No Option Selected";
|
|
55
47
|
}, [selectedValues]);
|
|
48
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledA11ySelectedValues, {
|
|
49
|
+
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.ALLY_SELECTED_VALUES,
|
|
50
|
+
"aria-live": "polite",
|
|
51
|
+
"aria-atomic": "false",
|
|
52
|
+
"aria-relevant": "additions text"
|
|
53
|
+
}, msg);
|
|
56
54
|
};
|
|
57
55
|
//# sourceMappingURL=A11ySelectedValues.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/A11ySelectedValues.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,iCAAmC;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n const msg = useMemo(() => {\n if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n }\n if (selectedValues) {\n return `Option selected: ${selectedValues?.label}`;\n }\n return 'No Option Selected';\n }, [selectedValues]);\n\n return (\n <StyledA11ySelectedValues\n data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {msg}\n </StyledA11ySelectedValues>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,iCAAmC;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,UAAM,sBAAQ,MAAM;AACxB,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,6BAAAC,QAAA,cAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,KAEb,GACH;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext", "React"]
|
|
7
7
|
}
|
|
@@ -101,7 +101,7 @@ const Controls = () => {
|
|
|
101
101
|
}, !inline && /* @__PURE__ */ import_react.default.createElement(import_styled.StyledSelection, {
|
|
102
102
|
ref: selectedOptionsRef,
|
|
103
103
|
onClick: handleOnPillsClick
|
|
104
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_A11ySelectedValues.A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ import_react.default.createElement(import_multi_selected_values_container.MultiSelectedValuesContainer, null) : /* @__PURE__ */ import_react.default.createElement("div", {
|
|
104
|
+
}, hasFocus && /* @__PURE__ */ import_react.default.createElement(import_A11ySelectedValues.A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ import_react.default.createElement(import_multi_selected_values_container.MultiSelectedValuesContainer, null) : /* @__PURE__ */ import_react.default.createElement("div", {
|
|
105
105
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
|
|
106
106
|
}, selectedValues && /* @__PURE__ */ import_react.default.createElement(import_RemovableSelectedValuePill.RemovableSelectedValuePill, {
|
|
107
107
|
pill: selectedValues
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n innerRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, innerRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === innerRef.current || inline) {\n e.preventDefault();\n }\n },\n [innerRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n {hasFocus && <A11ySelectedValues />}\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6BAAAC,QAAA,cAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,KAE/B,CAAC,UACA,6BAAAA,QAAA,cAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KAChD,YAAY,6BAAAA,QAAA,cAAC,kDAAmB,GAChC,MAAM,QAAQ,cAAc,IAC3B,6BAAAA,QAAA,cAAC,yEAA6B,IAE9B,6BAAAA,QAAA,cAAC;AAAA,IAAI,eAAa,8CAAmB;AAAA,KAClC,kBAAkB,6BAAAA,QAAA,cAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,6BAAAA,QAAA,cAAC,gDAAkB,GAEnB,6BAAAA,QAAA,cAAC,wCAAc,GACd,CAAC,UACA,6BAAAA,QAAA,cAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,6BAAAA,QAAA,cAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,6BAAAA,QAAA,cAAC,gDAAkB,CACrB,CAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext", "React"]
|
|
7
7
|
}
|
|
@@ -7,23 +7,21 @@ const A11ySelectedValues = () => {
|
|
|
7
7
|
const {
|
|
8
8
|
props: { selectedValues }
|
|
9
9
|
} = useContext(ComboBoxContext);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (selectedValues.length > 0) {
|
|
14
|
-
msg = `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
|
|
15
|
-
}
|
|
16
|
-
} else if (selectedValues) {
|
|
17
|
-
msg = `Option selected: ${selectedValues?.label}`;
|
|
10
|
+
const msg = useMemo(() => {
|
|
11
|
+
if (Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
12
|
+
return `Options selected: ${selectedValues.map((item) => item.label).join(", ")}`;
|
|
18
13
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
"aria-atomic": "false",
|
|
24
|
-
"aria-relevant": "additions text"
|
|
25
|
-
}, msg);
|
|
14
|
+
if (selectedValues) {
|
|
15
|
+
return `Option selected: ${selectedValues?.label}`;
|
|
16
|
+
}
|
|
17
|
+
return "No Option Selected";
|
|
26
18
|
}, [selectedValues]);
|
|
19
|
+
return /* @__PURE__ */ React2.createElement(StyledA11ySelectedValues, {
|
|
20
|
+
"data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
|
|
21
|
+
"aria-live": "polite",
|
|
22
|
+
"aria-atomic": "false",
|
|
23
|
+
"aria-relevant": "additions text"
|
|
24
|
+
}, msg);
|
|
27
25
|
};
|
|
28
26
|
export {
|
|
29
27
|
A11ySelectedValues
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11ySelectedValues.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,IAAI,WAAW,eAAe;AAE9B,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n const msg = useMemo(() => {\n if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n }\n if (selectedValues) {\n return `Option selected: ${selectedValues?.label}`;\n }\n return 'No Option Selected';\n }, [selectedValues]);\n\n return (\n <StyledA11ySelectedValues\n data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {msg}\n </StyledA11ySelectedValues>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,IAAI,WAAW,eAAe;AAE9B,QAAM,MAAM,QAAQ,MAAM;AACxB,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,SACE,gBAAAA,OAAA,cAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,KAEb,GACH;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -77,7 +77,7 @@ const Controls = () => {
|
|
|
77
77
|
}, !inline && /* @__PURE__ */ React2.createElement(StyledSelection, {
|
|
78
78
|
ref: selectedOptionsRef,
|
|
79
79
|
onClick: handleOnPillsClick
|
|
80
|
-
}, /* @__PURE__ */ React2.createElement(A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ React2.createElement(MultiSelectedValuesContainer, null) : /* @__PURE__ */ React2.createElement("div", {
|
|
80
|
+
}, hasFocus && /* @__PURE__ */ React2.createElement(A11ySelectedValues, null), Array.isArray(selectedValues) ? /* @__PURE__ */ React2.createElement(MultiSelectedValuesContainer, null) : /* @__PURE__ */ React2.createElement("div", {
|
|
81
81
|
"data-testid": ComboboxDataTestid.SELECTED_VALUES
|
|
82
82
|
}, selectedValues && /* @__PURE__ */ React2.createElement(RemovableSelectedValuePill, {
|
|
83
83
|
pill: selectedValues
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,UAAS,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues, innerRef },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n innerRef.current?.blur();\n return;\n }\n innerRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n innerRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, innerRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === innerRef.current || inline) {\n e.preventDefault();\n }\n },\n [innerRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n {hasFocus && <A11ySelectedValues />}\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,OAAOA,UAAS,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,gBAAgB,SAAS;AAAA,IAC7E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,eAAS,SAAS,KAAK;AACvB;AAAA,IACF;AACA,aAAS,SAAS,MAAM;AACxB,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,UAAU,cAAc,cAAc,CAAC;AAG3F,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,iBAAS,SAAS,MAAM;AACxB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,UAAU,YAAY;AAAA,EAC9C;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,SAAS,WAAW,QAAQ;AACzD,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,gBAAAA,OAAA,cAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,KAE/B,CAAC,UACA,gBAAAA,OAAA,cAAC;AAAA,IAAgB,KAAK;AAAA,IAAoB,SAAS;AAAA,KAChD,YAAY,gBAAAA,OAAA,cAAC,wBAAmB,GAChC,MAAM,QAAQ,cAAc,IAC3B,gBAAAA,OAAA,cAAC,kCAA6B,IAE9B,gBAAAA,OAAA,cAAC;AAAA,IAAI,eAAa,mBAAmB;AAAA,KAClC,kBAAkB,gBAAAA,OAAA,cAAC;AAAA,IAA2B,MAAM;AAAA,GAAgB,CACvE,CAEJ,GAEF,gBAAAA,OAAA,cAAC,uBAAkB,GAEnB,gBAAAA,OAAA,cAAC,mBAAc,GACd,CAAC,UACA,gBAAAA,OAAA,cAAC;AAAA,IAA2B,gBAAe;AAAA,IAAS,MAAM,CAAC,eAAe,aAAa;AAAA,KACrF,gBAAAA,OAAA,cAAC;AAAA,IAA4B;AAAA,GAAoB,GACjD,gBAAAA,OAAA,cAAC,uBAAkB,CACrB,CAEJ;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.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,21 +35,21 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.5.0-rc.
|
|
39
|
-
"@elliemae/ds-common": "3.5.0-rc.
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.5.0-rc.
|
|
41
|
-
"@elliemae/ds-grid": "3.5.0-rc.
|
|
42
|
-
"@elliemae/ds-icons": "3.5.0-rc.
|
|
43
|
-
"@elliemae/ds-pills": "3.5.0-rc.
|
|
44
|
-
"@elliemae/ds-popperjs": "3.5.0-rc.
|
|
45
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
46
|
-
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.
|
|
47
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.5.0-rc.6",
|
|
39
|
+
"@elliemae/ds-common": "3.5.0-rc.6",
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.5.0-rc.6",
|
|
41
|
+
"@elliemae/ds-grid": "3.5.0-rc.6",
|
|
42
|
+
"@elliemae/ds-icons": "3.5.0-rc.6",
|
|
43
|
+
"@elliemae/ds-pills": "3.5.0-rc.6",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.5.0-rc.6",
|
|
45
|
+
"@elliemae/ds-system": "3.5.0-rc.6",
|
|
46
|
+
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.6",
|
|
47
|
+
"@elliemae/ds-utilities": "3.5.0-rc.6",
|
|
48
48
|
"react-virtual": "~2.10.4",
|
|
49
49
|
"uid": "~2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.5.0-rc.
|
|
52
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.5.0-rc.6",
|
|
53
53
|
"@elliemae/pui-theme": "~2.6.0",
|
|
54
54
|
"@testing-library/dom": "~8.13.0",
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|