@elliemae/ds-form-combobox 3.12.0-next.1 → 3.12.0-rc.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.
- package/dist/cjs/parts/container/styled.js +1 -1
- package/dist/cjs/parts/container/styled.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +1 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/esm/parts/container/styled.js +2 -2
- package/dist/esm/parts/container/styled.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +1 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/package.json +13 -13
|
@@ -31,7 +31,7 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_ds_system = require("@elliemae/ds-system");
|
|
33
33
|
var import_theming = require("../../theming");
|
|
34
|
-
const StyledContainer = (0, import_ds_system.styled)(
|
|
34
|
+
const StyledContainer = (0, import_ds_system.styled)(import_ds_system.XStyledWrapper, {
|
|
35
35
|
name: import_theming.DSComboBoxName,
|
|
36
36
|
slot: import_theming.DSComboboxSlots.CONTAINER
|
|
37
37
|
})`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled(XStyledWrapper, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n`;\n\nexport const StyledPopperWrapper = styled('div')`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuC;AACvC,qBAAgD;AAEzC,MAAM,sBAAkB,yBAAO,iCAAgB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAGnD,MAAM,0BAAsB,yBAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -70,7 +70,7 @@ const ControlsInput = () => {
|
|
|
70
70
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInput, {
|
|
71
71
|
onBlur: handleOnBlur,
|
|
72
72
|
onFocus: handleOnFocus,
|
|
73
|
-
|
|
73
|
+
readOnly: onlySelectable,
|
|
74
74
|
...globalAttrs,
|
|
75
75
|
id,
|
|
76
76
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
|
|
@@ -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, 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
|
|
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=\"listbox\"\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
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;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;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,OAChB;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
|
|
|
33
33
|
var import_listHelper = require("../../utils/listHelper");
|
|
34
34
|
const useMaskedOnChange = () => {
|
|
35
35
|
const {
|
|
36
|
-
props: { useMask,
|
|
36
|
+
props: { useMask, onFilter, allOptions },
|
|
37
37
|
setMenuState,
|
|
38
38
|
setInputValue,
|
|
39
39
|
setShowSelectedOptions
|
|
@@ -42,13 +42,12 @@ const useMaskedOnChange = () => {
|
|
|
42
42
|
(e) => {
|
|
43
43
|
setShowSelectedOptions(false);
|
|
44
44
|
setMenuState(true, "filter", e);
|
|
45
|
-
if (onFilter
|
|
45
|
+
if (onFilter) {
|
|
46
46
|
onFilter((0, import_listHelper.filterOptions)(e.currentTarget.value, allOptions), e.currentTarget.value);
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
setInputValue(e.currentTarget.value);
|
|
48
|
+
setInputValue(e.currentTarget.value);
|
|
50
49
|
},
|
|
51
|
-
[allOptions,
|
|
50
|
+
[allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions]
|
|
52
51
|
);
|
|
53
52
|
const handleOnChangeMask = (0, import_react.useCallback)(
|
|
54
53
|
(e, mask) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask, onFilter, allOptions },\n setMenuState,\n setInputValue,\n setShowSelectedOptions,\n } = useContext(ComboBoxContext);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setInputValue(e.currentTarget.value);\n },\n [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions],\n );\n\n // onchange used when mask is provided\n const handleOnChangeMask = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n else if (!mask && onFilter) onFilter(allOptions, '');\n },\n [allOptions, onFilter, setMenuState, setShowSelectedOptions],\n );\n\n const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,YAAY,UAAU,eAAe,cAAc,sBAAsB;AAAA,EAC5E;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ;AAAU,qBAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ;AAAU,iBAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,sBAAsB;AAAA,EAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, XStyledWrapper } from "@elliemae/ds-system";
|
|
3
3
|
import { DSComboBoxName, DSComboboxSlots } from "../../theming";
|
|
4
|
-
const StyledContainer = styled(
|
|
4
|
+
const StyledContainer = styled(XStyledWrapper, {
|
|
5
5
|
name: DSComboBoxName,
|
|
6
6
|
slot: DSComboboxSlots.CONTAINER
|
|
7
7
|
})`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled(
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, XStyledWrapper } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming';\n\nexport const StyledContainer = styled(XStyledWrapper, {\n name: DSComboBoxName,\n slot: DSComboboxSlots.CONTAINER,\n})`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n`;\n\nexport const StyledPopperWrapper = styled('div')`\n position: relative;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'default')};\n overflow: auto;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,kBAAkB,OAAO,gBAAgB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAGnD,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,YAEnC,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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, 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
|
|
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=\"listbox\"\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
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;AAAA,IACC;AAAA,0BAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,oBAAC;AAAA,QACC,8BAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,oBAAC;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,OAChB;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import ComboBoxContext from "../../ComboBoxCTX";
|
|
|
4
4
|
import { filterOptions } from "../../utils/listHelper";
|
|
5
5
|
const useMaskedOnChange = () => {
|
|
6
6
|
const {
|
|
7
|
-
props: { useMask,
|
|
7
|
+
props: { useMask, onFilter, allOptions },
|
|
8
8
|
setMenuState,
|
|
9
9
|
setInputValue,
|
|
10
10
|
setShowSelectedOptions
|
|
@@ -13,13 +13,12 @@ const useMaskedOnChange = () => {
|
|
|
13
13
|
(e) => {
|
|
14
14
|
setShowSelectedOptions(false);
|
|
15
15
|
setMenuState(true, "filter", e);
|
|
16
|
-
if (onFilter
|
|
16
|
+
if (onFilter) {
|
|
17
17
|
onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
setInputValue(e.currentTarget.value);
|
|
19
|
+
setInputValue(e.currentTarget.value);
|
|
21
20
|
},
|
|
22
|
-
[allOptions,
|
|
21
|
+
[allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions]
|
|
23
22
|
);
|
|
24
23
|
const handleOnChangeMask = useCallback(
|
|
25
24
|
(e, mask) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useMaskedOnChange.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { filterOptions } from '../../utils/listHelper';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask, onFilter, allOptions },\n setMenuState,\n setInputValue,\n setShowSelectedOptions,\n } = useContext(ComboBoxContext);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setInputValue(e.currentTarget.value);\n },\n [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions],\n );\n\n // onchange used when mask is provided\n const handleOnChangeMask = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n else if (!mask && onFilter) onFilter(allOptions, '');\n },\n [allOptions, onFilter, setMenuState, setShowSelectedOptions],\n );\n\n const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,iBAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,YAAY,UAAU,eAAe,cAAc,sBAAsB;AAAA,EAC5E;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ;AAAU,iBAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ;AAAU,iBAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,sBAAsB;AAAA,EAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
|
|
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-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.12.0-
|
|
39
|
-
"@elliemae/ds-circular-progress-indicator": "3.12.0-
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.12.0-
|
|
41
|
-
"@elliemae/ds-grid": "3.12.0-
|
|
42
|
-
"@elliemae/ds-icons": "3.12.0-
|
|
43
|
-
"@elliemae/ds-menu-items": "3.12.0-
|
|
44
|
-
"@elliemae/ds-pills": "3.12.0-
|
|
45
|
-
"@elliemae/ds-popperjs": "3.12.0-
|
|
46
|
-
"@elliemae/ds-system": "3.12.0-
|
|
47
|
-
"@elliemae/ds-truncated-tooltip-text": "3.12.0-
|
|
48
|
-
"@elliemae/ds-utilities": "3.12.0-
|
|
38
|
+
"@elliemae/ds-button": "3.12.0-rc.0",
|
|
39
|
+
"@elliemae/ds-circular-progress-indicator": "3.12.0-rc.0",
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.12.0-rc.0",
|
|
41
|
+
"@elliemae/ds-grid": "3.12.0-rc.0",
|
|
42
|
+
"@elliemae/ds-icons": "3.12.0-rc.0",
|
|
43
|
+
"@elliemae/ds-menu-items": "3.12.0-rc.0",
|
|
44
|
+
"@elliemae/ds-pills": "3.12.0-rc.0",
|
|
45
|
+
"@elliemae/ds-popperjs": "3.12.0-rc.0",
|
|
46
|
+
"@elliemae/ds-system": "3.12.0-rc.0",
|
|
47
|
+
"@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.0",
|
|
48
|
+
"@elliemae/ds-utilities": "3.12.0-rc.0",
|
|
49
49
|
"react-virtual": "~2.10.4",
|
|
50
50
|
"uid": "~2.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.12.0-
|
|
53
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.12.0-rc.0",
|
|
54
54
|
"@elliemae/pui-theme": "~2.6.0",
|
|
55
55
|
"@testing-library/dom": "~8.19.0",
|
|
56
56
|
"@testing-library/jest-dom": "~5.16.4",
|