@elliemae/ds-form-combobox 3.1.5-rc.9 → 3.2.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useCorrectOptions.js +7 -6
- package/dist/cjs/config/useCorrectOptions.js.map +2 -2
- package/dist/cjs/parts/container/Container.js +3 -3
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +21 -3
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/config/useCorrectOptions.js +7 -6
- package/dist/esm/config/useCorrectOptions.js.map +2 -2
- package/dist/esm/parts/container/Container.js +3 -3
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +22 -3
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/package.json +18 -18
|
@@ -31,20 +31,21 @@ var import_listHelper = require("../utils/listHelper");
|
|
|
31
31
|
const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
|
|
32
32
|
const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
|
|
33
33
|
return (0, import_react.useMemo)(() => {
|
|
34
|
-
|
|
35
|
-
return (0, import_listHelper.filterOptions)(inputValue, allOptions);
|
|
36
|
-
}
|
|
34
|
+
const correctFilterOptions = filteredOptions ?? allOptions;
|
|
37
35
|
if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
38
|
-
return (0, import_listHelper.selectedValuesWithSections)(
|
|
36
|
+
return (0, import_listHelper.selectedValuesWithSections)(correctFilterOptions ?? allOptions, selectedValues);
|
|
39
37
|
}
|
|
40
|
-
if (onCreate && inputValue &&
|
|
38
|
+
if (onCreate && inputValue && correctFilterOptions.findIndex((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
|
|
41
39
|
const creatableUuid = (0, import_uid.uid)();
|
|
42
40
|
const creatableItem = {
|
|
43
41
|
dsId: `creatable-${creatableUuid}`,
|
|
44
42
|
label: inputValue,
|
|
45
43
|
type: "creatable"
|
|
46
44
|
};
|
|
47
|
-
return [creatableItem, ...
|
|
45
|
+
return [creatableItem, ...correctFilterOptions];
|
|
46
|
+
}
|
|
47
|
+
if (!filteredOptions) {
|
|
48
|
+
return (0, import_listHelper.filterOptions)(inputValue, allOptions);
|
|
48
49
|
}
|
|
49
50
|
return filteredOptions;
|
|
50
51
|
}, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useCorrectOptions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,iBAAoB;AAEpB,uBAAkC;AAClC,wBAA0D;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,aAAa;AAElE,SAAO,0BAAQ,MAAM;
|
|
4
|
+
"sourcesContent": ["import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n const correctFilterOptions = filteredOptions ?? allOptions;\n // when show selected toggle is on we return the selected value only as filteredOptions prop\n if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n return selectedValuesWithSections(correctFilterOptions ?? allOptions, selectedValues);\n }\n\n // whether oncreate is passed we add as first option the creatable action based on input value string\n if (\n onCreate &&\n inputValue &&\n correctFilterOptions.findIndex(\n (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n ) === -1\n ) {\n const creatableUuid = uid();\n const creatableItem: DSComboboxT.ItemCreatableOption = {\n dsId: `creatable-${creatableUuid}`,\n label: inputValue,\n type: 'creatable',\n };\n return [creatableItem, ...correctFilterOptions];\n }\n\n // if filteredOptions is not passed we copy allOptions into the prop as default\n // this is useful when the user wants a combo with out filtering and only pass allOptions as its required\n if (!filteredOptions) {\n return filterOptions(inputValue, allOptions);\n }\n return filteredOptions;\n }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,iBAAoB;AAEpB,uBAAkC;AAClC,wBAA0D;AAC1D,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,aAAa;AAElE,SAAO,0BAAQ,MAAM;AACnB,UAAM,uBAAuB,mBAAmB;AAEhD,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,aAAO,kDAA2B,wBAAwB,YAAY,cAAc;AAAA,IACtF;AAGA,QACE,YACA,cACA,qBAAqB,UACnB,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,OAAO,UAAU,UAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,oBAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AACA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAIA,QAAI,CAAC,iBAAiB;AACpB,aAAO,qCAAc,YAAY,UAAU;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -63,7 +63,7 @@ const Container = () => {
|
|
|
63
63
|
const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
|
|
64
64
|
const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(props);
|
|
65
65
|
const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
|
|
66
|
-
const _a = globalAttributes, { placeholder, onKeyDown, onChange } = _a,
|
|
66
|
+
const _a = globalAttributes, { placeholder, onKeyDown, onChange, disabled, tabIndex } = _a, containerGlobals = __objRest(_a, ["placeholder", "onKeyDown", "onChange", "disabled", "tabIndex"]);
|
|
67
67
|
const handleMouseDown = (0, import_react.useCallback)((e) => {
|
|
68
68
|
e.preventDefault();
|
|
69
69
|
}, []);
|
|
@@ -84,7 +84,7 @@ const Container = () => {
|
|
|
84
84
|
return (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_styled.StyledContainer, __spreadValues(__spreadValues({
|
|
85
85
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
|
|
86
86
|
ref: setReferenceElement
|
|
87
|
-
},
|
|
87
|
+
}, containerGlobals), xStyledProps), inline ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_controls.Controls, null), /* @__PURE__ */ import_react.default.createElement(import_menu_list.MenuList, null)) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_controls.Controls, null), /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
|
|
88
88
|
customOffset: [0, 5],
|
|
89
89
|
referenceElement,
|
|
90
90
|
showPopover: menuState,
|
|
@@ -101,7 +101,7 @@ const Container = () => {
|
|
|
101
101
|
}, /* @__PURE__ */ import_react.default.createElement(import_menu_list.MenuList, null))))), [
|
|
102
102
|
inline,
|
|
103
103
|
setReferenceElement,
|
|
104
|
-
|
|
104
|
+
containerGlobals,
|
|
105
105
|
referenceElement,
|
|
106
106
|
menuState,
|
|
107
107
|
xStyledProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { placeholder, onKeyDown, onChange, ...
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,qBAAqB,6BAAW,0BAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,WAAW;AACxG,QAAM,mBAAmB,gDAAuB,KAAK;AACrD,QAAM,eAAe,4CAAmB,KAAK;AAE7C,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { placeholder, onKeyDown, onChange, disabled, tabIndex, ...containerGlobals } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (innerRef?.current) innerRef.current.blur();\n }, [innerRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [setMenuState]);\n\n return useMemo(\n () => (\n <StyledContainer\n data-testid={ComboboxDataTestid.CONTAINER}\n ref={setReferenceElement}\n {...containerGlobals}\n {...xStyledProps}\n >\n {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : (\n <>\n <Controls />\n <DSPopperJS\n customOffset={[0, 5]}\n referenceElement={referenceElement}\n showPopover={menuState}\n closeContextMenu={handleCloseMenu}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal={withoutPortal}\n withoutArrow\n withoutAnimation\n zIndex={zIndex}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n </>\n )}\n </StyledContainer>\n ),\n [\n inline,\n setReferenceElement,\n containerGlobals,\n referenceElement,\n menuState,\n xStyledProps,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,qBAAqB,6BAAW,0BAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,WAAW;AACxG,QAAM,mBAAmB,gDAAuB,KAAK;AACrD,QAAM,eAAe,4CAAmB,KAAK;AAE7C,QAAsF,uBAA9E,eAAa,WAAW,UAAU,UAAU,aAAkC,IAArB,6BAAqB,IAArB,CAAzD,eAAa,aAAW,YAAU,YAAU;AACpD,QAAM,kBAAkB,8BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,8BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,8BAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,0BACL,MACE,mDAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,KAAK;AAAA,KACD,mBACA,eAEH,SACC,wFACE,mDAAC,8BAAS,GACV,mDAAC,+BAAS,CACZ,IAEA,wFACE,mDAAC,8BAAS,GACV,mDAAC;AAAA,IACC,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAY;AAAA,IACZ,kBAAgB;AAAA,IAChB;AAAA,KAEA,mDAAC;AAAA,IAAoB,UAAU;AAAA,IAAI,aAAa;AAAA,KAC9C,mDAAC,+BAAS,CACZ,CACF,CACF,CAEJ,GAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __objRest = (source, exclude) => {
|
|
10
|
+
var target = {};
|
|
11
|
+
for (var prop in source)
|
|
12
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
13
|
+
target[prop] = source[prop];
|
|
14
|
+
if (source != null && __getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
16
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
17
|
+
target[prop] = source[prop];
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
7
21
|
var __export = (target, all) => {
|
|
8
22
|
for (var name in all)
|
|
9
23
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -26,20 +40,23 @@ module.exports = __toCommonJS(ControlsInput_exports);
|
|
|
26
40
|
var React = __toESM(require("react"));
|
|
27
41
|
var import_react = __toESM(require("react"));
|
|
28
42
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
43
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
29
44
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
|
|
30
45
|
var import_styled = require("./styled");
|
|
31
46
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation");
|
|
32
47
|
var import_useControlsInput = require("./useControlsInput");
|
|
33
48
|
var import_ComboBoxCTX = require("../../ComboBoxCTX");
|
|
34
49
|
const ControlsInput = () => {
|
|
35
|
-
const {
|
|
36
|
-
props:
|
|
50
|
+
const _a = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext), {
|
|
51
|
+
props: _b
|
|
52
|
+
} = _a, _c = _b, { autoFocus, placeholder, disabled, innerRef, onlySelectable } = _c, restProps = __objRest(_c, ["autoFocus", "placeholder", "disabled", "innerRef", "onlySelectable"]), {
|
|
37
53
|
focusOptionIdx,
|
|
38
54
|
inputValue,
|
|
39
55
|
menuState
|
|
40
|
-
} =
|
|
56
|
+
} = _a;
|
|
41
57
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
42
58
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
|
|
59
|
+
const { tabIndex } = (0, import_ds_utilities.useGetGlobalAttributes)(restProps);
|
|
43
60
|
return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputWidthReference, {
|
|
44
61
|
ref: spanReference
|
|
45
62
|
}, spanReferenceText), showPlaceholder && /* @__PURE__ */ import_react.default.createElement(import_styled.StyledInputPlaceHolder, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
@@ -63,6 +80,7 @@ const ControlsInput = () => {
|
|
|
63
80
|
onChange: handleOnChange,
|
|
64
81
|
onBlur: handleOnBlur,
|
|
65
82
|
onFocus: handleOnFocus,
|
|
83
|
+
tabIndex,
|
|
66
84
|
withoutCaret: onlySelectable
|
|
67
85
|
}));
|
|
68
86
|
};
|
|
@@ -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 } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\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 },\n focusOptionIdx,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\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 data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby=\"combobox-selected-items\"\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={innerRef}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes } 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 inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const { tabIndex } = useGetGlobalAttributes(restProps);\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 data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby=\"combobox-selected-items\"\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={innerRef}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\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;ADAvB,mBAAkC;AAClC,uCAA2C;AAC3C,0BAAuC;AAEvC,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAKI,kCAAW,kCAAe,GAJrB;AAAA,IAAP,OAAO;AAAA,MAIL,IAJK,SAAE,aAAW,aAAa,UAAU,UAAU,mBAA9C,IAAiE,sBAAjE,IAAiE,CAA/D,aAAW,eAAa,YAAU,YAAU,oBAA9C;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,EAAE,mBAAmB,wDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,8CAAiB;AAEnB,QAAM,EAAE,aAAa,gDAAuB,SAAS;AAErD,SACE,mDAAC,wCACC,mDAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GACjE,mBACC,mDAAC,4CACC,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAGF,mDAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,IACf,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,GAChB,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,20 +6,21 @@ import { selectedValuesWithSections, filterOptions } from "../utils/listHelper";
|
|
|
6
6
|
const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
|
|
7
7
|
const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;
|
|
8
8
|
return useMemo(() => {
|
|
9
|
-
|
|
10
|
-
return filterOptions(inputValue, allOptions);
|
|
11
|
-
}
|
|
9
|
+
const correctFilterOptions = filteredOptions ?? allOptions;
|
|
12
10
|
if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
|
|
13
|
-
return selectedValuesWithSections(
|
|
11
|
+
return selectedValuesWithSections(correctFilterOptions ?? allOptions, selectedValues);
|
|
14
12
|
}
|
|
15
|
-
if (onCreate && inputValue &&
|
|
13
|
+
if (onCreate && inputValue && correctFilterOptions.findIndex((option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
|
|
16
14
|
const creatableUuid = uid();
|
|
17
15
|
const creatableItem = {
|
|
18
16
|
dsId: `creatable-${creatableUuid}`,
|
|
19
17
|
label: inputValue,
|
|
20
18
|
type: "creatable"
|
|
21
19
|
};
|
|
22
|
-
return [creatableItem, ...
|
|
20
|
+
return [creatableItem, ...correctFilterOptions];
|
|
21
|
+
}
|
|
22
|
+
if (!filteredOptions) {
|
|
23
|
+
return filterOptions(inputValue, allOptions);
|
|
23
24
|
}
|
|
24
25
|
return filteredOptions;
|
|
25
26
|
}, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCorrectOptions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,aAAa;AAElE,SAAO,QAAQ,MAAM;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { selectedValuesWithSections, filterOptions } from '../utils/listHelper';\nconst useCorrectOptions = (propsWithDefaults: DSComboboxT.Props, inputValue: string, showSelectedOptions: boolean) => {\n const { filteredOptions, allOptions, selectedValues, onCreate } = propsWithDefaults;\n\n return useMemo(() => {\n const correctFilterOptions = filteredOptions ?? allOptions;\n // when show selected toggle is on we return the selected value only as filteredOptions prop\n if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {\n return selectedValuesWithSections(correctFilterOptions ?? allOptions, selectedValues);\n }\n\n // whether oncreate is passed we add as first option the creatable action based on input value string\n if (\n onCreate &&\n inputValue &&\n correctFilterOptions.findIndex(\n (option) => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue,\n ) === -1\n ) {\n const creatableUuid = uid();\n const creatableItem: DSComboboxT.ItemCreatableOption = {\n dsId: `creatable-${creatableUuid}`,\n label: inputValue,\n type: 'creatable',\n };\n return [creatableItem, ...correctFilterOptions];\n }\n\n // if filteredOptions is not passed we copy allOptions into the prop as default\n // this is useful when the user wants a combo with out filtering and only pass allOptions as its required\n if (!filteredOptions) {\n return filterOptions(inputValue, allOptions);\n }\n return filteredOptions;\n }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);\n};\n\nexport { useCorrectOptions };\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA,MAAM,oBAAoB,CAAC,mBAAsC,YAAoB,wBAAiC;AACpH,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,aAAa;AAElE,SAAO,QAAQ,MAAM;AACnB,UAAM,uBAAuB,mBAAmB;AAEhD,QAAI,uBAAuB,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AACrF,aAAO,2BAA2B,wBAAwB,YAAY,cAAc;AAAA,IACtF;AAGA,QACE,YACA,cACA,qBAAqB,UACnB,CAAC,WAAW,OAAO,SAAS,kBAAkB,UAAU,OAAO,UAAU,UAC3E,MAAM,IACN;AACA,YAAM,gBAAgB,IAAI;AAC1B,YAAM,gBAAiD;AAAA,QACrD,MAAM,aAAa;AAAA,QACnB,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AACA,aAAO,CAAC,eAAe,GAAG,oBAAoB;AAAA,IAChD;AAIA,QAAI,CAAC,iBAAiB;AACpB,aAAO,cAAc,YAAY,UAAU;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,YAAY,qBAAqB,gBAAgB,UAAU,UAAU,CAAC;AAC7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,7 +40,7 @@ const Container = () => {
|
|
|
40
40
|
const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
|
|
41
41
|
const globalAttributes = useGetGlobalAttributes(props);
|
|
42
42
|
const xStyledProps = useGetXstyledProps(props);
|
|
43
|
-
const _a = globalAttributes, { placeholder, onKeyDown, onChange } = _a,
|
|
43
|
+
const _a = globalAttributes, { placeholder, onKeyDown, onChange, disabled, tabIndex } = _a, containerGlobals = __objRest(_a, ["placeholder", "onKeyDown", "onChange", "disabled", "tabIndex"]);
|
|
44
44
|
const handleMouseDown = useCallback((e) => {
|
|
45
45
|
e.preventDefault();
|
|
46
46
|
}, []);
|
|
@@ -61,7 +61,7 @@ const Container = () => {
|
|
|
61
61
|
return useMemo(() => /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues(__spreadValues({
|
|
62
62
|
"data-testid": ComboboxDataTestid.CONTAINER,
|
|
63
63
|
ref: setReferenceElement
|
|
64
|
-
},
|
|
64
|
+
}, containerGlobals), xStyledProps), inline ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Controls, null), /* @__PURE__ */ React2.createElement(MenuList, null)) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Controls, null), /* @__PURE__ */ React2.createElement(DSPopperJS, {
|
|
65
65
|
customOffset: [0, 5],
|
|
66
66
|
referenceElement,
|
|
67
67
|
showPopover: menuState,
|
|
@@ -78,7 +78,7 @@ const Container = () => {
|
|
|
78
78
|
}, /* @__PURE__ */ React2.createElement(MenuList, null))))), [
|
|
79
79
|
inline,
|
|
80
80
|
setReferenceElement,
|
|
81
|
-
|
|
81
|
+
containerGlobals,
|
|
82
82
|
referenceElement,
|
|
83
83
|
menuState,
|
|
84
84
|
xStyledProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { placeholder, onKeyDown, onChange, ...
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,qBAAqB,WAAW,eAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,WAAW;AACxG,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, setMenuState, menuState, setReferenceElement, referenceElement } = useContext(ComboBoxContext);\n\n const { inline, innerRef, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { placeholder, onKeyDown, onChange, disabled, tabIndex, ...containerGlobals } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (innerRef?.current) innerRef.current.blur();\n }, [innerRef, setMenuState]);\n\n useEffect(() => {\n const closeMenuOnWindowBlur = () => {\n setMenuState(false, 'blur');\n };\n\n window.addEventListener('blur', closeMenuOnWindowBlur);\n\n return () => {\n window.removeEventListener('blur', closeMenuOnWindowBlur);\n };\n }, [setMenuState]);\n\n return useMemo(\n () => (\n <StyledContainer\n data-testid={ComboboxDataTestid.CONTAINER}\n ref={setReferenceElement}\n {...containerGlobals}\n {...xStyledProps}\n >\n {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : (\n <>\n <Controls />\n <DSPopperJS\n customOffset={[0, 5]}\n referenceElement={referenceElement}\n showPopover={menuState}\n closeContextMenu={handleCloseMenu}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal={withoutPortal}\n withoutArrow\n withoutAnimation\n zIndex={zIndex}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n </>\n )}\n </StyledContainer>\n ),\n [\n inline,\n setReferenceElement,\n containerGlobals,\n referenceElement,\n menuState,\n xStyledProps,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,cAAc,WAAW,qBAAqB,qBAAqB,WAAW,eAAe;AAE5G,QAAM,EAAE,QAAQ,UAAU,0BAA0B,0BAA0B,eAAe,WAAW;AACxG,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAsF,uBAA9E,eAAa,WAAW,UAAU,UAAU,aAAkC,IAArB,6BAAqB,IAArB,CAAzD,eAAa,aAAW,YAAU,YAAU;AACpD,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,UAAU;AAAS,eAAS,QAAQ,KAAK;AAAA,EAC/C,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,UAAM,wBAAwB,MAAM;AAClC,mBAAa,OAAO,MAAM;AAAA,IAC5B;AAEA,WAAO,iBAAiB,QAAQ,qBAAqB;AAErD,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,qBAAqB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,QACL,MACE,qCAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,KAAK;AAAA,KACD,mBACA,eAEH,SACC,4DACE,qCAAC,cAAS,GACV,qCAAC,cAAS,CACZ,IAEA,4DACE,qCAAC,cAAS,GACV,qCAAC;AAAA,IACC,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAY;AAAA,IACZ,kBAAgB;AAAA,IAChB;AAAA,KAEA,qCAAC;AAAA,IAAoB,UAAU;AAAA,IAAI,aAAa;AAAA,KAC9C,qCAAC,cAAS,CACZ,CACF,CACF,CAEJ,GAEF;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,20 +1,38 @@
|
|
|
1
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
2
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
3
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var __objRest = (source, exclude) => {
|
|
5
|
+
var target = {};
|
|
6
|
+
for (var prop in source)
|
|
7
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
8
|
+
target[prop] = source[prop];
|
|
9
|
+
if (source != null && __getOwnPropSymbols)
|
|
10
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
11
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
12
|
+
target[prop] = source[prop];
|
|
13
|
+
}
|
|
14
|
+
return target;
|
|
15
|
+
};
|
|
1
16
|
import * as React from "react";
|
|
2
17
|
import React2, { useContext } from "react";
|
|
3
18
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
19
|
+
import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
|
|
4
20
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids";
|
|
5
21
|
import { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from "./styled";
|
|
6
22
|
import { useKeyboardNavigation } from "./useKeyboardNavigation";
|
|
7
23
|
import { useControlsInput } from "./useControlsInput";
|
|
8
24
|
import { ComboBoxContext } from "../../ComboBoxCTX";
|
|
9
25
|
const ControlsInput = () => {
|
|
10
|
-
const {
|
|
11
|
-
props:
|
|
26
|
+
const _a = useContext(ComboBoxContext), {
|
|
27
|
+
props: _b
|
|
28
|
+
} = _a, _c = _b, { autoFocus, placeholder, disabled, innerRef, onlySelectable } = _c, restProps = __objRest(_c, ["autoFocus", "placeholder", "disabled", "innerRef", "onlySelectable"]), {
|
|
12
29
|
focusOptionIdx,
|
|
13
30
|
inputValue,
|
|
14
31
|
menuState
|
|
15
|
-
} =
|
|
32
|
+
} = _a;
|
|
16
33
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
17
34
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
|
|
35
|
+
const { tabIndex } = useGetGlobalAttributes(restProps);
|
|
18
36
|
return /* @__PURE__ */ React2.createElement(StyledInputWrapper, null, /* @__PURE__ */ React2.createElement(StyledInputWidthReference, {
|
|
19
37
|
ref: spanReference
|
|
20
38
|
}, spanReferenceText), showPlaceholder && /* @__PURE__ */ React2.createElement(StyledInputPlaceHolder, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
@@ -38,6 +56,7 @@ const ControlsInput = () => {
|
|
|
38
56
|
onChange: handleOnChange,
|
|
39
57
|
onBlur: handleOnBlur,
|
|
40
58
|
onFocus: handleOnFocus,
|
|
59
|
+
tabIndex,
|
|
41
60
|
withoutCaret: onlySelectable
|
|
42
61
|
}));
|
|
43
62
|
};
|
|
@@ -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 } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\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 },\n focusOptionIdx,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\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 data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby=\"combobox-selected-items\"\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={innerRef}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,gBAAgB,MAAmB;AAC9C,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes } 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 inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const { tabIndex } = useGetGlobalAttributes(restProps);\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 data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={placeholder}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby=\"combobox-selected-items\"\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={innerRef}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,gBAAgB,MAAmB;AAC9C,QAKI,gBAAW,eAAe,GAJrB;AAAA,IAAP,OAAO;AAAA,MAIL,IAJK,SAAE,aAAW,aAAa,UAAU,UAAU,mBAA9C,IAAiE,sBAAjE,IAAiE,CAA/D,aAAW,eAAa,YAAU,YAAU,oBAA9C;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,EAAE,mBAAmB,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,kBAC9F,iBAAiB;AAEnB,QAAM,EAAE,aAAa,uBAAuB,SAAS;AAErD,SACE,qCAAC,0BACC,qCAAC;AAAA,IAA0B,KAAK;AAAA,KAAgB,iBAAkB,GACjE,mBACC,qCAAC,8BACC,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,CACtD,GAGF,qCAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,iBAAc;AAAA,IACd,yBAAuB;AAAA,IACvB,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,oBAAiB;AAAA,IACjB,MAAK;AAAA,IACL;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,IACf,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAK;AAAA,IACL,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,GAChB,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,34 +35,34 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.
|
|
39
|
-
"@elliemae/ds-common": "3.
|
|
40
|
-
"@elliemae/ds-form-checkbox": "3.
|
|
41
|
-
"@elliemae/ds-grid": "3.
|
|
42
|
-
"@elliemae/ds-icons": "3.
|
|
43
|
-
"@elliemae/ds-pills": "3.
|
|
44
|
-
"@elliemae/ds-popperjs": "3.
|
|
45
|
-
"@elliemae/ds-system": "3.
|
|
46
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
47
|
-
"@elliemae/ds-utilities": "3.
|
|
48
|
-
"react-virtual": "~2.
|
|
38
|
+
"@elliemae/ds-button": "3.2.0-rc.1",
|
|
39
|
+
"@elliemae/ds-common": "3.2.0-rc.1",
|
|
40
|
+
"@elliemae/ds-form-checkbox": "3.2.0-rc.1",
|
|
41
|
+
"@elliemae/ds-grid": "3.2.0-rc.1",
|
|
42
|
+
"@elliemae/ds-icons": "3.2.0-rc.1",
|
|
43
|
+
"@elliemae/ds-pills": "3.2.0-rc.1",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.2.0-rc.1",
|
|
45
|
+
"@elliemae/ds-system": "3.2.0-rc.1",
|
|
46
|
+
"@elliemae/ds-truncated-tooltip-text": "3.2.0-rc.1",
|
|
47
|
+
"@elliemae/ds-utilities": "3.2.0-rc.1",
|
|
48
|
+
"react-virtual": "~2.10.4",
|
|
49
49
|
"uid": "~2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.
|
|
52
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.2.0-rc.1",
|
|
53
53
|
"@elliemae/pui-theme": "~2.6.0",
|
|
54
|
-
"@testing-library/dom": "~8.
|
|
55
|
-
"@testing-library/jest-dom": "~5.16.
|
|
56
|
-
"@testing-library/react": "~12.1.
|
|
54
|
+
"@testing-library/dom": "~8.13.0",
|
|
55
|
+
"@testing-library/jest-dom": "~5.16.4",
|
|
56
|
+
"@testing-library/react": "~12.1.3",
|
|
57
57
|
"@testing-library/user-event": "~13.5.0",
|
|
58
|
-
"styled-components": "~5.3.
|
|
58
|
+
"styled-components": "~5.3.5",
|
|
59
59
|
"styled-system": "~5.1.5"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@elliemae/pui-theme": "~2.6.0",
|
|
63
63
|
"react": "^17.0.2",
|
|
64
64
|
"react-dom": "^17.0.2",
|
|
65
|
-
"styled-components": "^5.3.
|
|
65
|
+
"styled-components": "^5.3.5",
|
|
66
66
|
"styled-system": "^5.1.5"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|