@elliemae/ds-form-combobox 3.23.1-rc.1 → 3.23.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/useComboBox.js +3 -7
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/DropdownIndicator.js +2 -3
- package/dist/cjs/parts/DropdownIndicator.js.map +2 -2
- package/dist/cjs/parts/controls-input/ControlsInput.js +2 -4
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/styled.js +0 -4
- package/dist/cjs/parts/controls-input/styled.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +2 -3
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/esm/config/useComboBox.js +3 -7
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/parts/DropdownIndicator.js +2 -3
- package/dist/esm/parts/DropdownIndicator.js.map +2 -2
- package/dist/esm/parts/controls-input/ControlsInput.js +3 -11
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/styled.js +0 -4
- package/dist/esm/parts/controls-input/styled.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +2 -3
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/types/parts/DropdownIndicator.d.ts +0 -1
- package/dist/types/parts/LiveRegion.d.ts +0 -1
- package/dist/types/parts/container/Container.d.ts +0 -1
- package/dist/types/parts/controls/Controls.d.ts +0 -1
- package/dist/types/parts/controls-input/ControlsInput.d.ts +0 -1
- package/dist/types/parts/controls-input/styled.d.ts +0 -1
- package/dist/types/parts/header-list/HeaderList.d.ts +0 -1
- package/dist/types/parts/menu-list/MenuList.d.ts +0 -1
- package/dist/types/parts/menu-list/useItemRenderer.d.ts +0 -1
- package/dist/types/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +0 -1
- package/dist/types/sharedTypes.d.ts +0 -1
- package/package.json +15 -15
|
@@ -34,7 +34,6 @@ module.exports = __toCommonJS(useComboBox_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_react_virtual = require("react-virtual");
|
|
37
|
-
var import_uid = require("uid");
|
|
38
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
38
|
var import_ComboBoxCTX = require("../ComboBoxCTX.js");
|
|
40
39
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
@@ -58,8 +57,7 @@ const useComboBox = (props) => {
|
|
|
58
57
|
const selectAllCheckboxRef = (0, import_react.useRef)(null);
|
|
59
58
|
const toggleSelectionButtonRef = (0, import_react.useRef)(null);
|
|
60
59
|
const pillGroupRef = (0, import_react.useRef)(null);
|
|
61
|
-
const {
|
|
62
|
-
const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
|
|
60
|
+
const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;
|
|
63
61
|
const menuState = (0, import_react.useMemo)(() => {
|
|
64
62
|
if (isMenuOpen !== void 0)
|
|
65
63
|
return isMenuOpen;
|
|
@@ -135,8 +133,7 @@ const useComboBox = (props) => {
|
|
|
135
133
|
scrollOptionIntoView,
|
|
136
134
|
setReferenceElement,
|
|
137
135
|
setShowPopover,
|
|
138
|
-
internalRef
|
|
139
|
-
instanceUid
|
|
136
|
+
internalRef
|
|
140
137
|
}),
|
|
141
138
|
[
|
|
142
139
|
scrollOptionIntoView,
|
|
@@ -157,8 +154,7 @@ const useComboBox = (props) => {
|
|
|
157
154
|
selectAllCheckboxRef,
|
|
158
155
|
toggleSelectionButtonRef,
|
|
159
156
|
listRef,
|
|
160
|
-
internalRef
|
|
161
|
-
instanceUid
|
|
157
|
+
internalRef
|
|
162
158
|
]
|
|
163
159
|
);
|
|
164
160
|
return ctx;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,2BAA2B;AAC3B,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n },\n [onMenuChange],\n );\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: correctOptions.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts = { align: 'center' }) => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n opts,\n );\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n useEffect(() => {\n // this code calculate the option to be focused when opening the menu\n // when losing focus we remove the focused one\n // when focus adquired again getFirstOption calculate the correct one\n if (!hasFocus) setFocusOptionIdx('');\n if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n const correctOptionsRef = useMakeMutable(correctOptions);\n\n // focus first option when typing\n useEffect(() => {\n setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n }, [correctOptionsRef, inputValue]);\n\n useEffect(() => {\n if (!showPopover) {\n setFocusOptionIdx('');\n setShowSelectedOptions(false);\n }\n }, [showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults, filteredOptions: correctOptions },\n virtualListHelpers,\n menuState,\n referenceElement,\n listRef,\n focusOptionIdx,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n inputValue,\n setInputValue,\n setMenuState,\n hasFocus,\n toggleSelectionButtonRef,\n pillGroupRef,\n showSelectedOptions,\n wrapperListRef,\n setShowSelectedOptions,\n setHasFocus,\n setFocusOptionIdx,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n internalRef,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n virtualListHelpers,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n showSelectedOptions,\n menuState,\n pillGroupRef,\n referenceElement,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n listRef,\n internalRef,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,8 +54,7 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DS
|
|
|
54
54
|
const DropdownIndicator = () => {
|
|
55
55
|
const {
|
|
56
56
|
props: { disabled },
|
|
57
|
-
menuState
|
|
58
|
-
instanceUid
|
|
57
|
+
menuState
|
|
59
58
|
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
60
59
|
const handleOnClick = (0, import_react.useCallback)((e) => {
|
|
61
60
|
e.preventDefault();
|
|
@@ -65,7 +64,7 @@ const DropdownIndicator = () => {
|
|
|
65
64
|
{
|
|
66
65
|
onClick: handleOnClick,
|
|
67
66
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
|
|
68
|
-
"aria-controls":
|
|
67
|
+
"aria-controls": "combo-listbox",
|
|
69
68
|
"aria-labelledby": "combo-label",
|
|
70
69
|
disabled,
|
|
71
70
|
"aria-expanded": menuState,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CjB;AA3CN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIhG,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAc;AAAA,MACd,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MAEV,sDAAC,oCAAiB;AAAA;AAAA,EACpB;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -49,8 +49,7 @@ const ControlsInput = () => {
|
|
|
49
49
|
hasFocus,
|
|
50
50
|
internalRef,
|
|
51
51
|
inputValue,
|
|
52
|
-
menuState
|
|
53
|
-
instanceUid
|
|
52
|
+
menuState
|
|
54
53
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
55
54
|
const { onInputKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
|
|
56
55
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = (0, import_useControlsInput.useControlsInput)();
|
|
@@ -79,7 +78,6 @@ const ControlsInput = () => {
|
|
|
79
78
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, { children: [
|
|
80
79
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
81
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 }) }),
|
|
82
|
-
menuState === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
|
|
83
81
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
84
82
|
import_styled.StyledInput,
|
|
85
83
|
{
|
|
@@ -91,7 +89,7 @@ const ControlsInput = () => {
|
|
|
91
89
|
"data-testid": import_ComboboxDataTestids.ComboboxDataTestid.INPUT,
|
|
92
90
|
autoFocus,
|
|
93
91
|
placeholder,
|
|
94
|
-
"aria-controls":
|
|
92
|
+
...menuState ? { "aria-controls": "combo-listbox" } : {},
|
|
95
93
|
"aria-activedescendant": activeDescendant,
|
|
96
94
|
"aria-expanded": menuState,
|
|
97
95
|
"aria-haspopup": "true",
|
|
@@ -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 {
|
|
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 {...(menuState ? { '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,QACC,GAAI,YAAY,EAAE,iBAAiB,gBAAgB,IAAI,CAAC;AAAA,QACzD,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
|
}
|
|
@@ -28,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styled_exports = {};
|
|
30
30
|
__export(styled_exports, {
|
|
31
|
-
StyledHiddenDiv: () => StyledHiddenDiv,
|
|
32
31
|
StyledInput: () => StyledInput,
|
|
33
32
|
StyledInputPlaceHolder: () => StyledInputPlaceHolder,
|
|
34
33
|
StyledInputWidthReference: () => StyledInputWidthReference,
|
|
@@ -86,7 +85,4 @@ const StyledInputWrapper = (0, import_ds_system.styled)("div")`
|
|
|
86
85
|
display: flex;
|
|
87
86
|
padding-right: 1px;
|
|
88
87
|
`;
|
|
89
|
-
const StyledHiddenDiv = (0, import_ds_system.styled)("div")`
|
|
90
|
-
display: none;
|
|
91
|
-
`;
|
|
92
88
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n font-size: 13px;\n line-height: 13px;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n height: 28px;\n font-size: 13px;\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n font-size: 13px;\n line-height: 13px;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n height: 28px;\n font-size: 13px;\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAgD;AAEzC,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,+BAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIhD,CAAC,EAAE,aAAa,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,wBAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,8 +59,7 @@ const MenuList = () => {
|
|
|
59
59
|
listRef,
|
|
60
60
|
inputValue,
|
|
61
61
|
wrapperListRef,
|
|
62
|
-
virtualListHelpers
|
|
63
|
-
instanceUid
|
|
62
|
+
virtualListHelpers
|
|
64
63
|
} = (0, import_react.useContext)(import_ComboBoxCTX.ComboBoxContext);
|
|
65
64
|
const multiple = Array.isArray(selectedValues);
|
|
66
65
|
const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
|
|
@@ -121,7 +120,7 @@ const MenuList = () => {
|
|
|
121
120
|
onMouseDown: preventLoseInputFocus,
|
|
122
121
|
width,
|
|
123
122
|
minWidth: menuMinWidth,
|
|
124
|
-
id:
|
|
123
|
+
id: "combo-listbox",
|
|
125
124
|
children: menuListRender
|
|
126
125
|
}
|
|
127
126
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: {\n isLoading,\n menuMinWidth,\n noOptionsMessage,\n menuMaxHeight,\n onCreate,\n inline,\n filteredOptions,\n selectedValues,\n isSkeleton,\n },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: {\n isLoading,\n menuMinWidth,\n noOptionsMessage,\n menuMaxHeight,\n onCreate,\n inline,\n filteredOptions,\n selectedValues,\n isSkeleton,\n },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer isLoading={isLoading} />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id=\"combo-listbox\"\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCI;AAxC3B,mBAAyE;AACzE,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AACjC,+BAAkC;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,4CAAC,8CAAkB;AAE1C,QAAI;AAAW,aAAO,4CAAC,4CAAiB,WAAsB;AAE9D,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,8CAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,oCAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason?: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason?: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useMemo, useState, useRef, useCallback, useEffect } from "react";
|
|
3
3
|
import { useVirtual } from "react-virtual";
|
|
4
|
-
import { uid } from "uid";
|
|
5
4
|
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
6
5
|
import { defaultProps } from "../ComboBoxCTX.js";
|
|
7
6
|
import { ComboboxPropTypes } from "../react-desc-prop-types.js";
|
|
@@ -25,8 +24,7 @@ const useComboBox = (props) => {
|
|
|
25
24
|
const selectAllCheckboxRef = useRef(null);
|
|
26
25
|
const toggleSelectionButtonRef = useRef(null);
|
|
27
26
|
const pillGroupRef = useRef(null);
|
|
28
|
-
const {
|
|
29
|
-
const instanceUid = useMemo(() => id || uid(5), [id]);
|
|
27
|
+
const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;
|
|
30
28
|
const menuState = useMemo(() => {
|
|
31
29
|
if (isMenuOpen !== void 0)
|
|
32
30
|
return isMenuOpen;
|
|
@@ -102,8 +100,7 @@ const useComboBox = (props) => {
|
|
|
102
100
|
scrollOptionIntoView,
|
|
103
101
|
setReferenceElement,
|
|
104
102
|
setShowPopover,
|
|
105
|
-
internalRef
|
|
106
|
-
instanceUid
|
|
103
|
+
internalRef
|
|
107
104
|
}),
|
|
108
105
|
[
|
|
109
106
|
scrollOptionIntoView,
|
|
@@ -124,8 +121,7 @@ const useComboBox = (props) => {
|
|
|
124
121
|
selectAllCheckboxRef,
|
|
125
122
|
toggleSelectionButtonRef,
|
|
126
123
|
listRef,
|
|
127
|
-
internalRef
|
|
128
|
-
instanceUid
|
|
124
|
+
internalRef
|
|
129
125
|
]
|
|
130
126
|
);
|
|
131
127
|
return ctx;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useComboBox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef, useCallback, useEffect } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { ComboboxPropTypes } from '../react-desc-prop-types.js';\nimport type { DSComboboxInternalsT } from '../sharedTypes.js';\nimport { useCorrectOptions } from './useCorrectOptions.js';\nimport { getFirstOption } from '../utils/listHelper.js';\nimport { DSComboBoxName } from '../theming.js';\nimport { useMakeMutable } from '@elliemae/ds-utilities';\n\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSComboboxT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, ComboboxPropTypes, DSComboBoxName);\n const [showPopover, setShowPopover] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const [showSelectedOptions, setShowSelectedOptions] = useState<boolean>(false);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperListRef = useRef<HTMLDivElement>(null);\n\n const selectedOptionsRef = useRef<HTMLDivElement>(null);\n const controlsWrapperRef = useRef<HTMLDivElement>(null);\n const selectAllCheckboxRef = useRef<HTMLInputElement>(null);\n const toggleSelectionButtonRef = useRef<HTMLButtonElement>(null);\n const pillGroupRef = useRef<HTMLDivElement>(null);\n\n const { selectedValues, isMenuOpen, onMenuChange } = propsWithDefaults;\n\n const menuState = useMemo(() => {\n if (isMenuOpen !== undefined) return isMenuOpen;\n return showPopover;\n }, [showPopover, isMenuOpen]);\n\n const setMenuState = useCallback(\n (\n newState: boolean,\n reason: string,\n e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (onMenuChange !== undefined) onMenuChange(newState, reason, e);\n setShowPopover(newState);\n },\n [onMenuChange],\n );\n // ---------------------------------------------------------------------------\n // Options with creatable option + filtered by selected\n // ---------------------------------------------------------------------------\n\n const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions);\n\n // ===========================================================================\n // Virtualization setup\n // ===========================================================================\n\n const virtualListHelpers: ReturnType<typeof useVirtual> = useVirtual({\n size: correctOptions.length,\n parentRef: listRef,\n overscan: 15,\n paddingStart: 0,\n });\n\n // ===========================================================================\n // Scroll into view function\n // ===========================================================================\n const scrollOptionIntoView = useCallback(\n (dsId: string, opts = { align: 'center' }) => {\n virtualListHelpers.scrollToIndex(\n correctOptions.findIndex((opt) => opt.dsId === dsId),\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n opts,\n );\n },\n [correctOptions, virtualListHelpers],\n );\n\n // ===========================================================================\n // Init focused option when opening the menu list\n // ===========================================================================\n\n const [focusOptionIdx, setFocusOptionIdx] = useState<string>('');\n\n useEffect(() => {\n // this code calculate the option to be focused when opening the menu\n // when losing focus we remove the focused one\n // when focus adquired again getFirstOption calculate the correct one\n if (!hasFocus) setFocusOptionIdx('');\n if (hasFocus && (!focusOptionIdx || showSelectedOptions)) {\n const focusedValue = getFirstOption(correctOptions, selectedValues);\n setFocusOptionIdx(focusedValue);\n scrollOptionIntoView(focusedValue, { align: 'center' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [showPopover, hasFocus, correctOptions, selectedValues]);\n\n const correctOptionsRef = useMakeMutable(correctOptions);\n\n // focus first option when typing\n useEffect(() => {\n setFocusOptionIdx(correctOptionsRef.current?.[0]?.dsId ?? '');\n }, [correctOptionsRef, inputValue]);\n\n useEffect(() => {\n if (!showPopover) {\n setFocusOptionIdx('');\n setShowSelectedOptions(false);\n }\n }, [showPopover]);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefaults, filteredOptions: correctOptions },\n virtualListHelpers,\n menuState,\n referenceElement,\n listRef,\n focusOptionIdx,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n inputValue,\n setInputValue,\n setMenuState,\n hasFocus,\n toggleSelectionButtonRef,\n pillGroupRef,\n showSelectedOptions,\n wrapperListRef,\n setShowSelectedOptions,\n setHasFocus,\n setFocusOptionIdx,\n scrollOptionIntoView,\n setReferenceElement,\n setShowPopover,\n internalRef,\n }),\n [\n scrollOptionIntoView,\n setMenuState,\n correctOptions,\n hasFocus,\n propsWithDefaults,\n virtualListHelpers,\n inputValue,\n focusOptionIdx,\n wrapperListRef,\n showSelectedOptions,\n menuState,\n pillGroupRef,\n referenceElement,\n selectedOptionsRef,\n controlsWrapperRef,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n listRef,\n internalRef,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -21,8 +21,7 @@ const StyledDropDownButton = styled(DSButtonV2)`
|
|
|
21
21
|
const DropdownIndicator = () => {
|
|
22
22
|
const {
|
|
23
23
|
props: { disabled },
|
|
24
|
-
menuState
|
|
25
|
-
instanceUid
|
|
24
|
+
menuState
|
|
26
25
|
} = useContext(ComboBoxContext);
|
|
27
26
|
const handleOnClick = useCallback((e) => {
|
|
28
27
|
e.preventDefault();
|
|
@@ -32,7 +31,7 @@ const DropdownIndicator = () => {
|
|
|
32
31
|
{
|
|
33
32
|
onClick: handleOnClick,
|
|
34
33
|
"data-testid": ComboboxDataTestid.DROPDOWN,
|
|
35
|
-
"aria-controls":
|
|
34
|
+
"aria-controls": "combo-listbox",
|
|
36
35
|
"aria-labelledby": "combo-label",
|
|
37
36
|
disabled,
|
|
38
37
|
"aria-expanded": menuState,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\n\nconst StyledDropDownButton = styled(DSButtonV2)`\n &:focus::after {\n border: none;\n }\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n\n & svg {\n fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'])};\n }\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n const {\n props: { disabled },\n menuState,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n return (\n <StyledDropDownButton\n onClick={handleOnClick}\n data-testid={ComboboxDataTestid.DROPDOWN}\n aria-controls=\"combo-listbox\"\n aria-labelledby=\"combo-label\"\n disabled={disabled}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-hidden\n buttonType=\"icon\"\n tabIndex={-1}\n >\n <ChevronSmallDown />\n </StyledDropDownButton>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6CjB;AA3CN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AAEnC,MAAM,uBAAuB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIhG,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAc;AAAA,MACd,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MAEV,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,13 +5,7 @@ import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text"
|
|
|
5
5
|
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
6
6
|
import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
7
7
|
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
8
|
-
import {
|
|
9
|
-
StyledInput,
|
|
10
|
-
StyledInputWrapper,
|
|
11
|
-
StyledInputPlaceHolder,
|
|
12
|
-
StyledInputWidthReference,
|
|
13
|
-
StyledHiddenDiv
|
|
14
|
-
} from "./styled.js";
|
|
8
|
+
import { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from "./styled.js";
|
|
15
9
|
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
16
10
|
import { useControlsInput } from "./useControlsInput.js";
|
|
17
11
|
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
@@ -22,8 +16,7 @@ const ControlsInput = () => {
|
|
|
22
16
|
hasFocus,
|
|
23
17
|
internalRef,
|
|
24
18
|
inputValue,
|
|
25
|
-
menuState
|
|
26
|
-
instanceUid
|
|
19
|
+
menuState
|
|
27
20
|
} = useContext(ComboBoxContext);
|
|
28
21
|
const { onInputKeyDown } = useKeyboardNavigation();
|
|
29
22
|
const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
|
|
@@ -52,7 +45,6 @@ const ControlsInput = () => {
|
|
|
52
45
|
return /* @__PURE__ */ jsxs(StyledInputWrapper, { children: [
|
|
53
46
|
/* @__PURE__ */ jsx(StyledInputWidthReference, { ref: spanReference, children: spanReferenceText }),
|
|
54
47
|
showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: showPlaceholder }) }),
|
|
55
|
-
menuState === false ? /* @__PURE__ */ jsx(StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
|
|
56
48
|
/* @__PURE__ */ jsx(
|
|
57
49
|
StyledInput,
|
|
58
50
|
{
|
|
@@ -64,7 +56,7 @@ const ControlsInput = () => {
|
|
|
64
56
|
"data-testid": ComboboxDataTestid.INPUT,
|
|
65
57
|
autoFocus,
|
|
66
58
|
placeholder,
|
|
67
|
-
"aria-controls":
|
|
59
|
+
...menuState ? { "aria-controls": "combo-listbox" } : {},
|
|
68
60
|
"aria-activedescendant": activeDescendant,
|
|
69
61
|
"aria-expanded": menuState,
|
|
70
62
|
"aria-haspopup": "true",
|
|
@@ -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 {
|
|
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 {...(menuState ? { '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,QACC,GAAI,YAAY,EAAE,iBAAiB,gBAAgB,IAAI,CAAC;AAAA,QACzD,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
|
}
|
|
@@ -49,11 +49,7 @@ const StyledInputWrapper = styled("div")`
|
|
|
49
49
|
display: flex;
|
|
50
50
|
padding-right: 1px;
|
|
51
51
|
`;
|
|
52
|
-
const StyledHiddenDiv = styled("div")`
|
|
53
|
-
display: none;
|
|
54
|
-
`;
|
|
55
52
|
export {
|
|
56
|
-
StyledHiddenDiv,
|
|
57
53
|
StyledInput,
|
|
58
54
|
StyledInputPlaceHolder,
|
|
59
55
|
StyledInputWidthReference,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n font-size: 13px;\n line-height: 13px;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n height: 28px;\n font-size: 13px;\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIhD,CAAC,EAAE,aAAa,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyledInput = styled('input', {\n name: DSComboBoxName,\n slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean }>`\n font-size: 13px;\n line-height: 13px;\n border: none;\n overflow: hidden;\n padding: 0;\n z-index: 2;\n outline: none;\n color: ${(props) => props.theme.colors.neutral[700]};\n &:focus {\n outline: none;\n }\n ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n &::placeholder {\n color: transparent;\n }\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n font-style: italic;\n color: ${(props) => props.theme.colors.neutral[500]};\n position: absolute;\n display: flex;\n align-items: center;\n width: 100%;\n user-select: none;\n height: 28px;\n font-size: 13px;\n & span::after {\n content: '';\n padding: 1px;\n // solve italic font style clipping issue with overflow hidden.\n }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n visibility: hidden;\n position: absolute;\n top: -9999px;\n z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n position: relative;\n align-items: center;\n display: flex;\n padding-right: 1px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIhD,CAAC,EAAE,aAAa,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,8 +26,7 @@ const MenuList = () => {
|
|
|
26
26
|
listRef,
|
|
27
27
|
inputValue,
|
|
28
28
|
wrapperListRef,
|
|
29
|
-
virtualListHelpers
|
|
30
|
-
instanceUid
|
|
29
|
+
virtualListHelpers
|
|
31
30
|
} = useContext(ComboBoxContext);
|
|
32
31
|
const multiple = Array.isArray(selectedValues);
|
|
33
32
|
const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;
|
|
@@ -88,7 +87,7 @@ const MenuList = () => {
|
|
|
88
87
|
onMouseDown: preventLoseInputFocus,
|
|
89
88
|
width,
|
|
90
89
|
minWidth: menuMinWidth,
|
|
91
|
-
id:
|
|
90
|
+
id: "combo-listbox",
|
|
92
91
|
children: menuListRender
|
|
93
92
|
}
|
|
94
93
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: {\n isLoading,\n menuMinWidth,\n noOptionsMessage,\n menuMaxHeight,\n onCreate,\n inline,\n filteredOptions,\n selectedValues,\n isSkeleton,\n },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: {\n isLoading,\n menuMinWidth,\n noOptionsMessage,\n menuMaxHeight,\n onCreate,\n inline,\n filteredOptions,\n selectedValues,\n isSkeleton,\n },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isSkeleton) return <SkeletonContainer />;\n\n if (isLoading) return <LoadingContainer isLoading={isLoading} />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {(filteredOptions && filteredOptions.length > 0) || onCreate ? (\n <StyledVirtualListWrapper\n // tabIndex 0 to satisfy axe core \"scroolabel region must have a focusable element\"\n tabIndex={0}\n inline={inline}\n maxHeight={menuMaxHeight}\n ref={listRef}\n withHeader={withHeader}\n >\n <StyledList\n aria-label=\"listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n isSkeleton,\n isLoading,\n withHeader,\n filteredOptions,\n onCreate,\n inline,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ]);\n\n useLayoutEffect(() => {\n virtualListHelpers?.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n id=\"combo-listbox\"\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwCI,SAKrB,UALqB,KAKrB,YALqB;AAxC3B,SAAgB,YAAY,SAAS,aAAa,uBAAuB;AACzE,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAE3B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,mBAAmB,gBAAgB,SAAS,KAAK,CAAC;AAC5F,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI;AAAY,aAAO,oBAAC,qBAAkB;AAE1C,QAAI;AAAW,aAAO,oBAAC,oBAAiB,WAAsB;AAE9D,WACE,iCACG;AAAA,oBAAc,oBAAC,cAAW;AAAA,MACzB,mBAAmB,gBAAgB,SAAS,KAAM,WAClD;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA,UACA,WAAW;AAAA,UACX,KAAK;AAAA,UACL;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,mBAAmB;AAAA,cAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,cAElF;AAAA;AAAA,UACH;AAAA;AAAA,MACF,IAEA,oBAAC,0BAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,wBAAoB,QAAQ;AAAA,EAE9B,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,IAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/sharedTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason?: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason?: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,yBAAyB;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,kBAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,4 +4,3 @@ export declare const StyledInput: import("styled-components").StyledComponent<"i
|
|
|
4
4
|
export declare const StyledInputPlaceHolder: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
5
5
|
export declare const StyledInputWidthReference: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
6
6
|
export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
7
|
-
export declare const StyledHiddenDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
@@ -27,7 +27,6 @@ export declare namespace DSComboboxInternalsT {
|
|
|
27
27
|
showSelectedOptions: boolean;
|
|
28
28
|
setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
|
|
29
29
|
setMenuState: (newState: boolean, reason?: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void;
|
|
30
|
-
instanceUid: string;
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
export declare const isSeparator: (el: DSComboboxT.OptionTypes | undefined) => el is DSComboboxT.ItemSeparatorOptions;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.23.1
|
|
3
|
+
"version": "3.23.1",
|
|
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-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
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.23.1",
|
|
41
|
+
"@elliemae/ds-form-checkbox": "3.23.1",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.23.1",
|
|
43
|
+
"@elliemae/ds-grid": "3.23.1",
|
|
44
|
+
"@elliemae/ds-menu-items": "3.23.1",
|
|
45
|
+
"@elliemae/ds-pills-v2": "3.23.1",
|
|
46
|
+
"@elliemae/ds-icons": "3.23.1",
|
|
47
|
+
"@elliemae/ds-popperjs": "3.23.1",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.23.1",
|
|
49
|
+
"@elliemae/ds-system": "3.23.1",
|
|
50
|
+
"@elliemae/ds-truncated-tooltip-text": "3.23.1",
|
|
51
|
+
"@elliemae/ds-utilities": "3.23.1"
|
|
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-
|
|
64
|
-
"@elliemae/ds-
|
|
63
|
+
"@elliemae/ds-monorepo-devops": "3.23.1",
|
|
64
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.23.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"@elliemae/pui-theme": "~2.7.0",
|