@elliemae/ds-form-combobox 3.22.0-rc.0 → 3.22.0-rc.10
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/controls/Controls.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +9 -3
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +3 -3
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +2 -2
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +2 -2
- package/dist/esm/parts/controls/Controls.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +9 -3
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +1 -1
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +1 -1
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js +1 -1
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +1 -1
- package/package.json +15 -15
|
@@ -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.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, 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 {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\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;ADyFX;AAvFZ,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;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,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;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;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,8CAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,4CAAC,iCAAgB,KAAK,oBAAoB,SAAS,oBAChD,gBAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC,SAAI,eAAa,8CAAmB,iBAClC,4BAAkB,4CAAC,gEAA2B,MAAM,gBAAgB,GACvE,GAEJ;AAAA,QAGF,4CAAC,sCAAc;AAAA,QACd,CAAC,UACA,6CAAC,4CAA2B,gBAAe,UAAS,MAAM,CAAC,eAAe,aAAa,GACrF;AAAA,sDAAC,6CAA4B,UAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -65,10 +65,16 @@ const ControlsInput = () => {
|
|
|
65
65
|
});
|
|
66
66
|
const actualAriaDescribedBy = (0, import_react.useMemo)(() => {
|
|
67
67
|
if (id) {
|
|
68
|
-
return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;
|
|
68
|
+
return `${ariaDescribedBy ?? ""} ${id}_feedback_message ${id}_error_message`;
|
|
69
69
|
}
|
|
70
70
|
return ariaDescribedBy;
|
|
71
71
|
}, [ariaDescribedBy, id]);
|
|
72
|
+
const activeDescendant = (0, import_react.useMemo)(() => {
|
|
73
|
+
if (!isLoading && hasFocus && menuState) {
|
|
74
|
+
return focusOptionIdx;
|
|
75
|
+
}
|
|
76
|
+
return void 0;
|
|
77
|
+
}, [focusOptionIdx, hasFocus, isLoading, menuState]);
|
|
72
78
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, { children: [
|
|
73
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
74
80
|
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 }) }),
|
|
@@ -83,8 +89,8 @@ const ControlsInput = () => {
|
|
|
83
89
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
|
|
84
90
|
autoFocus,
|
|
85
91
|
placeholder,
|
|
86
|
-
"aria-controls":
|
|
87
|
-
"aria-activedescendant":
|
|
92
|
+
"aria-controls": "combo-listbox",
|
|
93
|
+
"aria-activedescendant": activeDescendant,
|
|
88
94
|
"aria-expanded": menuState,
|
|
89
95
|
"aria-haspopup": "true",
|
|
90
96
|
"aria-describedby": actualAriaDescribedBy,
|
|
@@ -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, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n focusOptionIdx,\n hasFocus,\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={placeholder}\n aria-controls
|
|
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 { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n focusOptionIdx,\n hasFocus,\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 const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\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={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={activeDescendant}\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;ADiDnB;AAjDJ,mBAA2C;AAC3C,uCAA2C;AAC3C,0BAA0B;AAC1B,8BAAuC;AACvC,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7F;AAAA,IACA;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,IACpB,GAAG;AAAA,EACL,QAAI,gDAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,QAAI,IAAI;AACN,aAAO,GAAG,mBAAmB,MAAM,uBAAuB;AAAA,IAC5D;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,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,QACA,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
|
}
|
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(MultiSelectedValuesContainer_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
|
|
38
38
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
39
39
|
var import_useGroupPills = require("./useGroupPills.js");
|
|
40
40
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids.js");
|
|
@@ -52,10 +52,10 @@ const MultiSelectedValuesContainer = () => {
|
|
|
52
52
|
{
|
|
53
53
|
style: { width: multiSelectedValue.length > 0 ? "max-content" : "0px" },
|
|
54
54
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES,
|
|
55
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
55
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_pills_v2.DSPillGroupV2, { innerRef: pillGroupRef, children: [
|
|
56
56
|
multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((pill) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RemovableSelectedValuePill.RemovableSelectedValuePill, { pill }, pill.dsId)),
|
|
57
57
|
multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
|
-
|
|
58
|
+
import_ds_pills_v2.DSPillV2,
|
|
59
59
|
{
|
|
60
60
|
size: "s",
|
|
61
61
|
labelTruncated: false,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBf;AAvBR,mBAA2C;AAC3C,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBf;AAvBR,mBAA2C;AAC3C,yBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AACpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,oCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,SAAS,4CAAC,gEAA2C,QAAX,KAAK,IAAkB,CAAE;AAAA,UAC5E,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS;AAAA,cACvC,MAAK;AAAA,cACL;AAAA;AAAA,YAHI;AAAA,UAIN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,QAAQ;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(RemovableSelectedValuePill_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
-
var
|
|
37
|
+
var import_ds_pills_v2 = require("@elliemae/ds-pills-v2");
|
|
38
38
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
39
39
|
var import_listHelper = require("../../utils/listHelper.js");
|
|
40
40
|
const RemovableSelectedValuePill = (props) => {
|
|
@@ -44,7 +44,7 @@ const RemovableSelectedValuePill = (props) => {
|
|
|
44
44
|
internalRef
|
|
45
45
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
46
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
|
-
|
|
47
|
+
import_ds_pills_v2.DSPillV2,
|
|
48
48
|
{
|
|
49
49
|
size: "s",
|
|
50
50
|
label: pill.label,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkC;AAClC,yBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,MAC7C,UAAU;AAAA,MACV,UAAU,CAAC,MAA2B;AAEpC,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAVK,KAAK;AAAA,EAWZ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -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.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled.js';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container/index.js';\nimport { ControlsInput } from '../controls-input/ControlsInput.js';\nimport { useOnPillsNavigation } from './useOnPillsNavigation.js';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill.js';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, 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 internalRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, internalRef, 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 === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, 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 {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\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;ACyFX,cAWJ,YAXI;AAvFZ,SAAgB,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,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;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,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;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;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,eAAa,mBAAmB;AAAA,MAE/B;AAAA,SAAC,UACA,oBAAC,mBAAgB,KAAK,oBAAoB,SAAS,oBAChD,gBAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC,SAAI,eAAa,mBAAmB,iBAClC,4BAAkB,oBAAC,8BAA2B,MAAM,gBAAgB,GACvE,GAEJ;AAAA,QAGF,oBAAC,iBAAc;AAAA,QACd,CAAC,UACA,qBAAC,8BAA2B,gBAAe,UAAS,MAAM,CAAC,eAAe,aAAa,GACrF;AAAA,8BAAC,+BAA4B,UAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA,WACrB;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,10 +32,16 @@ const ControlsInput = () => {
|
|
|
32
32
|
});
|
|
33
33
|
const actualAriaDescribedBy = useMemo(() => {
|
|
34
34
|
if (id) {
|
|
35
|
-
return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;
|
|
35
|
+
return `${ariaDescribedBy ?? ""} ${id}_feedback_message ${id}_error_message`;
|
|
36
36
|
}
|
|
37
37
|
return ariaDescribedBy;
|
|
38
38
|
}, [ariaDescribedBy, id]);
|
|
39
|
+
const activeDescendant = useMemo(() => {
|
|
40
|
+
if (!isLoading && hasFocus && menuState) {
|
|
41
|
+
return focusOptionIdx;
|
|
42
|
+
}
|
|
43
|
+
return void 0;
|
|
44
|
+
}, [focusOptionIdx, hasFocus, isLoading, menuState]);
|
|
39
45
|
return /* @__PURE__ */ jsxs(StyledInputWrapper, { children: [
|
|
40
46
|
/* @__PURE__ */ jsx(StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
41
47
|
showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: showPlaceholder }) }),
|
|
@@ -50,8 +56,8 @@ const ControlsInput = () => {
|
|
|
50
56
|
"data-testid": ComboboxDataTestid.INPUT,
|
|
51
57
|
autoFocus,
|
|
52
58
|
placeholder,
|
|
53
|
-
"aria-controls":
|
|
54
|
-
"aria-activedescendant":
|
|
59
|
+
"aria-controls": "combo-listbox",
|
|
60
|
+
"aria-activedescendant": activeDescendant,
|
|
55
61
|
"aria-expanded": menuState,
|
|
56
62
|
"aria-haspopup": "true",
|
|
57
63
|
"aria-describedby": actualAriaDescribedBy,
|
|
@@ -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, useMemo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n focusOptionIdx,\n hasFocus,\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={placeholder}\n aria-controls
|
|
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 { mergeRefs } from '@elliemae/ds-utilities';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, isLoading, onlySelectable, ...restProps },\n focusOptionIdx,\n hasFocus,\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 const activeDescendant = useMemo(() => {\n if (!isLoading && hasFocus && menuState) {\n return focusOptionIdx;\n }\n return undefined;\n }, [focusOptionIdx, hasFocus, isLoading, menuState]);\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={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={activeDescendant}\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;ACiDnB,SACE,KADF;AAjDJ,SAAgB,YAAY,eAAe;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AACvC,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,WAAW,gBAAgB,GAAG,UAAU;AAAA,IAC7F;AAAA,IACA;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,IACpB,GAAG;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,MAAM,uBAAuB;AAAA,IAC5D;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,aAAa,YAAY,WAAW;AACvC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,UAAU,WAAW,SAAS,CAAC;AAEnD,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,QACA,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useContext } from "react";
|
|
4
|
-
import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills";
|
|
4
|
+
import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills-v2";
|
|
5
5
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
6
6
|
import { useGroupPills } from "./useGroupPills.js";
|
|
7
7
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACuBf,SAIqB,KAJrB;AAvBR,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,eAAe,gBAAgB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AAEzC,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,mBAAmB;AAAA,QAEhC,+BAAC,iBAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,SAAS,oBAAC,8BAA2C,QAAX,KAAK,IAAkB,CAAE;AAAA,UAC5E,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS;AAAA,cACvC,MAAK;AAAA,cACL;AAAA;AAAA,YAHI;AAAA,UAIN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,QAAQ;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useContext } from "react";
|
|
4
|
-
import { DSPillV2 } from "@elliemae/ds-pills";
|
|
4
|
+
import { DSPillV2 } from "@elliemae/ds-pills-v2";
|
|
5
5
|
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
6
6
|
import { getSuggestedValueOnChange } from "../../utils/listHelper.js";
|
|
7
7
|
const RemovableSelectedValuePill = (props) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills-v2';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACanB;AAbJ,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,MAC7C,UAAU;AAAA,MACV,UAAU,CAAC,MAA2B;AAEpC,UAAE,gBAAgB;AAClB,iBAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAVK,KAAK;AAAA,EAWZ;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.22.0-rc.
|
|
3
|
+
"version": "3.22.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"react-virtual": "~2.10.4",
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.22.0-rc.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-form-checkbox": "3.22.0-rc.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-menu-items": "3.22.0-rc.
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-button-v2": "3.22.0-rc.10",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.22.0-rc.10",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.22.0-rc.10",
|
|
43
|
+
"@elliemae/ds-grid": "3.22.0-rc.10",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.22.0-rc.10",
|
|
45
|
+
"@elliemae/ds-pills-v2": "3.22.0-rc.10",
|
|
46
|
+
"@elliemae/ds-popperjs": "3.22.0-rc.10",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.22.0-rc.10",
|
|
48
|
+
"@elliemae/ds-system": "3.22.0-rc.10",
|
|
49
|
+
"@elliemae/ds-truncated-tooltip-text": "3.22.0-rc.10",
|
|
50
|
+
"@elliemae/ds-utilities": "3.22.0-rc.10",
|
|
51
|
+
"@elliemae/ds-icons": "3.22.0-rc.10"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
"jest-axe": "^7.0.1",
|
|
61
61
|
"styled-components": "~5.3.9",
|
|
62
62
|
"styled-system": "~5.1.5",
|
|
63
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.22.0-rc.
|
|
64
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-rc.
|
|
63
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.22.0-rc.10",
|
|
64
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-rc.10"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"@elliemae/pui-theme": "~2.7.0",
|