@elliemae/ds-form-combobox 3.12.1 → 3.13.0-next.1
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,18 +51,11 @@ const ControlsInput = () => {
|
|
|
51
51
|
tabIndex,
|
|
52
52
|
"data-testid": dataTestId,
|
|
53
53
|
id,
|
|
54
|
-
"aria-describedby": ariaDescribedBy,
|
|
55
54
|
...globalAttrs
|
|
56
55
|
} = (0, import_ds_utilities.useGetGlobalAttributes)(restProps, {
|
|
57
56
|
onFocus: handleOnFocus,
|
|
58
57
|
onBlur: handleOnBlur
|
|
59
58
|
});
|
|
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]);
|
|
66
59
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, { children: [
|
|
67
60
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
68
61
|
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 }) }),
|
|
@@ -81,7 +74,7 @@ const ControlsInput = () => {
|
|
|
81
74
|
"aria-activedescendant": focusOptionIdx,
|
|
82
75
|
"aria-expanded": menuState,
|
|
83
76
|
"aria-haspopup": "true",
|
|
84
|
-
"aria-describedby":
|
|
77
|
+
"aria-describedby": `combobox-selected-items ${id !== void 0 ? `${id}_feedback_message` : ""}`,
|
|
85
78
|
role: "combobox",
|
|
86
79
|
disabled,
|
|
87
80
|
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, useCallback } 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 ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\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={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\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;ADiCnB;AAjCJ,mBAA+C;AAC/C,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,OACG;AAAA,EACL,QAAI,4CAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,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,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,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
|
|
3
|
+
import { useContext } 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,18 +22,11 @@ const ControlsInput = () => {
|
|
|
22
22
|
tabIndex,
|
|
23
23
|
"data-testid": dataTestId,
|
|
24
24
|
id,
|
|
25
|
-
"aria-describedby": ariaDescribedBy,
|
|
26
25
|
...globalAttrs
|
|
27
26
|
} = useGetGlobalAttributes(restProps, {
|
|
28
27
|
onFocus: handleOnFocus,
|
|
29
28
|
onBlur: handleOnBlur
|
|
30
29
|
});
|
|
31
|
-
const actualAriaDescribedBy = useMemo(() => {
|
|
32
|
-
if (id) {
|
|
33
|
-
return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;
|
|
34
|
-
}
|
|
35
|
-
return ariaDescribedBy;
|
|
36
|
-
}, [ariaDescribedBy, id]);
|
|
37
30
|
return /* @__PURE__ */ jsxs(StyledInputWrapper, { children: [
|
|
38
31
|
/* @__PURE__ */ jsx(StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
39
32
|
showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: showPlaceholder }) }),
|
|
@@ -52,7 +45,7 @@ const ControlsInput = () => {
|
|
|
52
45
|
"aria-activedescendant": focusOptionIdx,
|
|
53
46
|
"aria-expanded": menuState,
|
|
54
47
|
"aria-haspopup": "true",
|
|
55
|
-
"aria-describedby":
|
|
48
|
+
"aria-describedby": `combobox-selected-items ${id !== void 0 ? `${id}_feedback_message` : ""}`,
|
|
56
49
|
role: "combobox",
|
|
57
50
|
disabled,
|
|
58
51
|
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, useCallback } 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 ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\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={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\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;ACiCnB,SACE,KADF;AAjCJ,SAAgB,kBAA+B;AAC/C,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,OACG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,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,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,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.
|
|
3
|
+
"version": "3.13.0-next.1",
|
|
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-button": "3.
|
|
41
|
-
"@elliemae/ds-circular-progress-indicator": "3.
|
|
42
|
-
"@elliemae/ds-form-checkbox": "3.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-popperjs": "3.
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button": "3.13.0-next.1",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.13.0-next.1",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.13.0-next.1",
|
|
43
|
+
"@elliemae/ds-grid": "3.13.0-next.1",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.13.0-next.1",
|
|
45
|
+
"@elliemae/ds-pills": "3.13.0-next.1",
|
|
46
|
+
"@elliemae/ds-popperjs": "3.13.0-next.1",
|
|
47
|
+
"@elliemae/ds-icons": "3.13.0-next.1",
|
|
48
|
+
"@elliemae/ds-system": "3.13.0-next.1",
|
|
49
|
+
"@elliemae/ds-truncated-tooltip-text": "3.13.0-next.1",
|
|
50
|
+
"@elliemae/ds-utilities": "3.13.0-next.1"
|
|
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.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.13.0-next.1"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@elliemae/pui-theme": "~2.6.0",
|