@elliemae/ds-form-combobox 3.15.0-rc.7 → 3.15.0-rc.9
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.
|
@@ -34,14 +34,14 @@ var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
|
|
|
34
34
|
var import_listHelper = require("../../utils/listHelper");
|
|
35
35
|
const useControlsInput = () => {
|
|
36
36
|
const {
|
|
37
|
-
props: { selectedValues, allOptions, placeholder, onFilter },
|
|
37
|
+
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
38
38
|
setHasFocus,
|
|
39
39
|
inputValue,
|
|
40
40
|
setInputValue
|
|
41
41
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
42
42
|
const [width, setWidth] = (0, import_react.useState)(1);
|
|
43
43
|
const spanReference = (0, import_react.useRef)(null);
|
|
44
|
-
const showPlaceholder = !inputValue && (0, import_listHelper.isSelectedValueEmpty)(selectedValues) ? placeholder : null;
|
|
44
|
+
const showPlaceholder = !inputValue && (inline || (0, import_listHelper.isSelectedValueEmpty)(selectedValues)) ? placeholder : null;
|
|
45
45
|
const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
|
|
46
46
|
(0, import_react.useEffect)(() => {
|
|
47
47
|
if (spanReference.current) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,
|
|
4
|
+
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAE9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,QAAM,oBAAgB,qBAAwB,IAAI;AAGlD,QAAM,kBAAkB,CAAC,eAAe,cAAU,wCAAqB,cAAc,KAAK,cAAc;AACxG,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,8BAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,qBAAiB,4CAAkB;AAEzC,QAAM,mBAAe,0BAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -5,14 +5,14 @@ import ComboBoxContext from "../../ComboBoxCTX";
|
|
|
5
5
|
import { isSelectedValueEmpty } from "../../utils/listHelper";
|
|
6
6
|
const useControlsInput = () => {
|
|
7
7
|
const {
|
|
8
|
-
props: { selectedValues, allOptions, placeholder, onFilter },
|
|
8
|
+
props: { selectedValues, allOptions, placeholder, onFilter, inline },
|
|
9
9
|
setHasFocus,
|
|
10
10
|
inputValue,
|
|
11
11
|
setInputValue
|
|
12
12
|
} = useContext(ComboBoxContext);
|
|
13
13
|
const [width, setWidth] = useState(1);
|
|
14
14
|
const spanReference = useRef(null);
|
|
15
|
-
const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
|
|
15
|
+
const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;
|
|
16
16
|
const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
if (spanReference.current) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAE9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\n\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter, inline },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n // if user type we remove the placeholder\n // else if there is a selection we dont show it unless is inline combobox\n const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAE9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,gBAAgB,OAAwB,IAAI;AAGlD,QAAM,kBAAkB,CAAC,eAAe,UAAU,qBAAqB,cAAc,KAAK,cAAc;AACxG,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,YAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
|
|
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.15.0-rc.
|
|
3
|
+
"version": "3.15.0-rc.9",
|
|
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.15.0-rc.
|
|
41
|
-
"@elliemae/ds-circular-progress-indicator": "3.15.0-rc.
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-system": "3.15.0-rc.
|
|
48
|
-
"@elliemae/ds-truncated-tooltip-text": "3.15.0-rc.
|
|
49
|
-
"@elliemae/ds-utilities": "3.15.0-rc.
|
|
50
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button": "3.15.0-rc.9",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.15.0-rc.9",
|
|
42
|
+
"@elliemae/ds-grid": "3.15.0-rc.9",
|
|
43
|
+
"@elliemae/ds-form-checkbox": "3.15.0-rc.9",
|
|
44
|
+
"@elliemae/ds-icons": "3.15.0-rc.9",
|
|
45
|
+
"@elliemae/ds-menu-items": "3.15.0-rc.9",
|
|
46
|
+
"@elliemae/ds-pills": "3.15.0-rc.9",
|
|
47
|
+
"@elliemae/ds-system": "3.15.0-rc.9",
|
|
48
|
+
"@elliemae/ds-truncated-tooltip-text": "3.15.0-rc.9",
|
|
49
|
+
"@elliemae/ds-utilities": "3.15.0-rc.9",
|
|
50
|
+
"@elliemae/ds-popperjs": "3.15.0-rc.9"
|
|
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.15.0-rc.
|
|
60
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.15.0-rc.9"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@elliemae/pui-theme": "~2.6.0",
|