@elliemae/ds-form-combobox 3.12.0-rc.8 → 3.12.0
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.
|
@@ -51,11 +51,18 @@ const ControlsInput = () => {
|
|
|
51
51
|
tabIndex,
|
|
52
52
|
"data-testid": dataTestId,
|
|
53
53
|
id,
|
|
54
|
+
"aria-describedby": ariaDescribedBy,
|
|
54
55
|
...globalAttrs
|
|
55
56
|
} = (0, import_ds_utilities.useGetGlobalAttributes)(restProps, {
|
|
56
57
|
onFocus: handleOnFocus,
|
|
57
58
|
onBlur: handleOnBlur
|
|
58
59
|
});
|
|
60
|
+
const actualAriaDescribedBy = (0, import_react.useMemo)(() => {
|
|
61
|
+
if (id) {
|
|
62
|
+
return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;
|
|
63
|
+
}
|
|
64
|
+
return ariaDescribedBy;
|
|
65
|
+
}, [ariaDescribedBy, id]);
|
|
59
66
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, { children: [
|
|
60
67
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
61
68
|
showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputPlaceHolder, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: showPlaceholder }) }),
|
|
@@ -74,7 +81,7 @@ const ControlsInput = () => {
|
|
|
74
81
|
"aria-activedescendant": focusOptionIdx,
|
|
75
82
|
"aria-expanded": menuState,
|
|
76
83
|
"aria-haspopup": "true",
|
|
77
|
-
"aria-describedby":
|
|
84
|
+
"aria-describedby": actualAriaDescribedBy,
|
|
78
85
|
role: "combobox",
|
|
79
86
|
disabled,
|
|
80
87
|
style: { width },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n 'data-testid': dataTestId,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"true\"\n aria-describedby={actualAriaDescribedBy}\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAzCJ,mBAA2C;AAC3C,uCAA2C;AAC3C,0BAAkD;AAElD,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,oBAAoB;AAAA,OACjB;AAAA,EACL,QAAI,4CAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,uBAAuB;AAAA,IACtD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,SACE,6CAAC,oCACC;AAAA,gDAAC,2CAA0B,KAAK,eAAgB,6BAAkB;AAAA,IACjE,mBACC,4CAAC,wCACC,sDAAC,+DAA2B,OAAO,iBAAiB,GACtD;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,SAAK,+BAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
3
|
+
import { useContext, useMemo } from "react";
|
|
4
4
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
5
|
import { useGetGlobalAttributes, mergeRefs } from "@elliemae/ds-utilities";
|
|
6
6
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids";
|
|
@@ -22,11 +22,18 @@ const ControlsInput = () => {
|
|
|
22
22
|
tabIndex,
|
|
23
23
|
"data-testid": dataTestId,
|
|
24
24
|
id,
|
|
25
|
+
"aria-describedby": ariaDescribedBy,
|
|
25
26
|
...globalAttrs
|
|
26
27
|
} = useGetGlobalAttributes(restProps, {
|
|
27
28
|
onFocus: handleOnFocus,
|
|
28
29
|
onBlur: handleOnBlur
|
|
29
30
|
});
|
|
31
|
+
const actualAriaDescribedBy = useMemo(() => {
|
|
32
|
+
if (id) {
|
|
33
|
+
return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;
|
|
34
|
+
}
|
|
35
|
+
return ariaDescribedBy;
|
|
36
|
+
}, [ariaDescribedBy, id]);
|
|
30
37
|
return /* @__PURE__ */ jsxs(StyledInputWrapper, { children: [
|
|
31
38
|
/* @__PURE__ */ jsx(StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
32
39
|
showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: showPlaceholder }) }),
|
|
@@ -45,7 +52,7 @@ const ControlsInput = () => {
|
|
|
45
52
|
"aria-activedescendant": focusOptionIdx,
|
|
46
53
|
"aria-expanded": menuState,
|
|
47
54
|
"aria-haspopup": "true",
|
|
48
|
-
"aria-describedby":
|
|
55
|
+
"aria-describedby": actualAriaDescribedBy,
|
|
49
56
|
role: "combobox",
|
|
50
57
|
disabled,
|
|
51
58
|
style: { width },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n 'data-testid': dataTestId,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"true\"\n aria-describedby={actualAriaDescribedBy}\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyCnB,SACE,KADF;AAzCJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB,iBAAiB;AAElD,SAAS,0BAA0B;AACnC,SAAS,aAAa,oBAAoB,wBAAwB,iCAAiC;AACnG,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,oBAAoB;AAAA,OACjB;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,uBAAuB;AAAA,IACtD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,SACE,qBAAC,sBACC;AAAA,wBAAC,6BAA0B,KAAK,eAAgB,6BAAkB;AAAA,IACjE,mBACC,oBAAC,0BACC,8BAAC,8BAA2B,OAAO,iBAAiB,GACtD;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACT,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK,UAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.12.0
|
|
3
|
+
"version": "3.12.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-virtual": "~2.10.4",
|
|
39
39
|
"uid": "~2.0.0",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-menu-items": "3.12.0
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-system": "3.12.0
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button": "3.12.0",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.12.0",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.12.0",
|
|
43
|
+
"@elliemae/ds-grid": "3.12.0",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.12.0",
|
|
45
|
+
"@elliemae/ds-icons": "3.12.0",
|
|
46
|
+
"@elliemae/ds-pills": "3.12.0",
|
|
47
|
+
"@elliemae/ds-system": "3.12.0",
|
|
48
|
+
"@elliemae/ds-popperjs": "3.12.0",
|
|
49
|
+
"@elliemae/ds-truncated-tooltip-text": "3.12.0",
|
|
50
|
+
"@elliemae/ds-utilities": "3.12.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.6.0",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@testing-library/user-event": "~13.5.0",
|
|
58
58
|
"styled-components": "~5.3.6",
|
|
59
59
|
"styled-system": "~5.1.5",
|
|
60
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.12.0
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.12.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@elliemae/pui-theme": "~2.6.0",
|