@elliemae/ds-form-combobox 3.16.0-next.2 → 3.16.0-next.3
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/ComboBox.js +2 -2
- package/dist/cjs/ComboBox.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +3 -3
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/parts/LiveRegion.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 +2 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/cjs/parts/header-list/HeaderList.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +22 -22
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/ComboBox.js +1 -1
- package/dist/esm/ComboBox.js.map +1 -1
- package/dist/esm/config/useComboBox.js +1 -1
- package/dist/esm/config/useComboBox.js.map +1 -1
- package/dist/esm/parts/LiveRegion.js.map +2 -2
- package/dist/esm/parts/container/Container.js +1 -1
- package/dist/esm/parts/container/Container.js.map +1 -1
- package/dist/esm/parts/controls-input/ControlsInput.js +2 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/useControlsInput.js.map +2 -2
- package/dist/esm/parts/header-list/HeaderList.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/ComboBox.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +380 -380
- package/package.json +15 -14
package/dist/cjs/ComboBox.js
CHANGED
|
@@ -31,7 +31,7 @@ __export(ComboBox_exports, {
|
|
|
31
31
|
module.exports = __toCommonJS(ComboBox_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
-
var
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
35
|
var import_useComboBox = require("./config/useComboBox");
|
|
36
36
|
var import_container = require("./parts/container");
|
|
37
37
|
var import_ComboBoxCTX = require("./ComboBoxCTX");
|
|
@@ -42,6 +42,6 @@ const DSComboBox = (props) => {
|
|
|
42
42
|
};
|
|
43
43
|
DSComboBox.propTypes = import_react_desc_prop_types.ComboboxPropTypes;
|
|
44
44
|
DSComboBox.displayName = "DSComboBox";
|
|
45
|
-
const DSComboBoxWithSchema = (0,
|
|
45
|
+
const DSComboBoxWithSchema = (0, import_ds_props_helpers.describe)(DSComboBox);
|
|
46
46
|
DSComboBoxWithSchema.propTypes = import_react_desc_prop_types.ComboboxPropTypes;
|
|
47
47
|
//# sourceMappingURL=ComboBox.js.map
|
package/dist/cjs/ComboBox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ComboBox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAXN,
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport type { DSComboboxT } from './react-desc-prop-types';\nimport { ComboboxPropTypes } from './react-desc-prop-types';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n const ctx = useComboBox(props);\n return (\n <ComboBoxContext.Provider value={ctx}>\n <Container />\n </ComboBoxContext.Provider>\n );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAXN,8BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAEhC,mCAAkC;AAElC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B,sDAAC,8BAAU,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,15 +30,15 @@ module.exports = __toCommonJS(useComboBox_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_react = require("react");
|
|
32
32
|
var import_react_virtual = require("react-virtual");
|
|
33
|
-
var
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
34
|
var import_ComboBoxCTX = require("../ComboBoxCTX");
|
|
35
35
|
var import_react_desc_prop_types = require("../react-desc-prop-types");
|
|
36
36
|
var import_useCorrectOptions = require("./useCorrectOptions");
|
|
37
37
|
var import_listHelper = require("../utils/listHelper");
|
|
38
38
|
var import_theming = require("../theming");
|
|
39
39
|
const useComboBox = (props) => {
|
|
40
|
-
const propsWithDefaults = (0,
|
|
41
|
-
(0,
|
|
40
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_ComboBoxCTX.defaultProps);
|
|
41
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_react_desc_prop_types.ComboboxPropTypes, import_theming.DSComboBoxName);
|
|
42
42
|
const [showPopover, setShowPopover] = (0, import_react.useState)(false);
|
|
43
43
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
44
44
|
const [showSelectedOptions, setShowSelectedOptions] = (0, import_react.useState)(false);
|
|
@@ -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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-
|
|
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';\nimport type { DSComboboxT } from '../react-desc-prop-types';\nimport { ComboboxPropTypes } from '../react-desc-prop-types';\nimport type { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSComboBoxName } from '../theming';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault(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 // focus first option when typing\n useEffect(() => {\n setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n }, [correctOptions, 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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/LiveRegion.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const LiveRegion = (): JSX.Element => {\n const {\n props: { selectedValues, filteredOptions },\n hasFocus,\n focusOptionIdx,\n menuState,\n } = useContext(ComboBoxContext);\n\n const selectabledOptions = getSelectableOptions(filteredOptions);\n const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n const navigationContext =\n 'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n const ariaFocused = useMemo(() => {\n if (menuState && focusOption && focusOption.type === 'option')\n return (\n <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n focusSelectableOptionIdx + 1\n } of ${selectabledOptions.length}. ${navigationContext} `}\n </StyledA11ySelectedValues>\n );\n if (focusOption?.type === 'creatable')\n return (\n <StyledA11ySelectedValues\n key={menuState}\n aria-live=\"assertive\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {`Press enter to Add option written in input box. ${navigationContext}`}\n </StyledA11ySelectedValues>\n );\n return null;\n }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n\n const ariaSelected = useMemo(() => {\n if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n }\n if (selectedValues) {\n return `Option selected: ${selectedValues?.label}`;\n }\n return 'No Option Selected';\n }, [selectedValues]);\n\n const ScreenReaderText = (\n <>\n <span id=\"aria-selection\">{ariaSelected}</span>\n <span id=\"aria-context\">{ariaFocused}</span>\n </>\n );\n\n return (\n <StyledA11ySelectedValues\n data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {hasFocus && ScreenReaderText}\n </StyledA11ySelectedValues>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBf;AAvBR,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAiD;AACjD,iCAAmC;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,yBAAqB,wCAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,gBAAY,8BAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,aAAa,eAAe,YAAY,SAAS;AACnD,aACE,4CAAC,0CAAyC,aAAU,UAAS,eAAY,SAAQ,iBAAc,kBAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,wBAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,aAAU;AAAA,UACV,eAAY;AAAA,UACZ,iBAAc;AAAA,UAEb,6DAAmD;AAAA;AAAA,QAL/C;AAAA,MAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AAEvG,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,mBACJ,4EACE;AAAA,gDAAC,UAAK,IAAG,kBAAkB,wBAAa;AAAA,IACxC,4CAAC,UAAK,IAAG,gBAAgB,uBAAY;AAAA,KACvC;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,8CAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -30,7 +30,7 @@ module.exports = __toCommonJS(Container_exports);
|
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
31
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
32
|
var import_react = require("react");
|
|
33
|
-
var
|
|
33
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
34
|
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
35
35
|
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
|
|
36
36
|
var import_styled = require("./styled");
|
|
@@ -41,8 +41,8 @@ var import_LiveRegion = require("../LiveRegion");
|
|
|
41
41
|
const Container = () => {
|
|
42
42
|
const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
43
43
|
const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;
|
|
44
|
-
const globalAttributes = (0,
|
|
45
|
-
const xStyledProps = (0,
|
|
44
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
|
|
45
|
+
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
|
|
46
46
|
const { className, "data-testid": dataTestId, ...containerGlobals } = globalAttributes;
|
|
47
47
|
const handleMouseDown = (0, import_react.useCallback)((e) => {
|
|
48
48
|
e.preventDefault();
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDf;AAhDR,mBAAmE;AACnE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\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';\nimport { LiveRegion } from '../LiveRegion';\n\nexport const Container = (): JSX.Element => {\n const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, 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={dataTestId ?? ComboboxDataTestid.CONTAINER}\n ref={setReferenceElement}\n className={className}\n {...xStyledProps}\n >\n <LiveRegion />\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 dataTestId,\n setReferenceElement,\n className,\n xStyledProps,\n inline,\n referenceElement,\n menuState,\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;ADiDf;AAhDR,mBAAmE;AACnE,8BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AACnC,wBAA2B;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,QACzF,yBAAW,mBAAAA,OAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,uBAAmB,gDAAuB,KAAK;AACrD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,sBAAkB,0BAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,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,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,8CAAmB;AAAA,QAC9C,KAAK;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,sDAAC,gCAAW;AAAA,UACX,SACC,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACV,4CAAC,6BAAS;AAAA,aACZ,IAEA,4EACE;AAAA,wDAAC,4BAAS;AAAA,YACV;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB;AAAA,gBAEA,sDAAC,qCAAoB,UAAU,IAAI,aAAa,iBAC9C,sDAAC,6BAAS,GACZ;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
32
32
|
var import_react = require("react");
|
|
33
33
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
34
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
36
|
var import_ComboboxDataTestids = require("../../ComboboxDataTestids");
|
|
36
37
|
var import_styled = require("./styled");
|
|
37
38
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation");
|
|
@@ -53,7 +54,7 @@ const ControlsInput = () => {
|
|
|
53
54
|
id,
|
|
54
55
|
"aria-describedby": ariaDescribedBy,
|
|
55
56
|
...globalAttrs
|
|
56
|
-
} = (0,
|
|
57
|
+
} = (0, import_ds_props_helpers.useGetGlobalAttributes)(restProps, {
|
|
57
58
|
onFocus: handleOnFocus,
|
|
58
59
|
onBlur: handleOnBlur
|
|
59
60
|
});
|
|
@@ -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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAzCJ,mBAA2C;AAC3C,uCAA2C;AAC3C,
|
|
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';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n tabIndex,\n 'data-testid': dataTestId,\n id,\n 'aria-describedby': ariaDescribedBy,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const actualAriaDescribedBy = useMemo(() => {\n if (id) {\n return `${ariaDescribedBy} ${id}_feedback_message ${id}_error_message`;\n }\n return ariaDescribedBy;\n }, [ariaDescribedBy, id]);\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n readOnly={onlySelectable}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\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;ADyCnB;AAzCJ,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,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,oBAAoB;AAAA,OACjB;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,uBAAuB;AAAA,IACtD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,EAAE,CAAC;AAExB,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,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,SAAK,+BAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA;AAAA,IAChB;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;
|
|
4
|
+
"sourcesContent": ["import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { isSelectedValueEmpty } from '../../utils/listHelper';\n\ninterface UseControlsInputT {\n handleOnBlur: () => void;\n handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n showPlaceholder: string | null | undefined;\n spanReferenceText: string | undefined;\n width: number;\n spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = (): UseControlsInputT => {\n const {\n props: { selectedValues, allOptions, placeholder, onFilter },\n setHasFocus,\n inputValue,\n setInputValue,\n } = useContext(ComboBoxContext);\n\n const [width, setWidth] = useState(1);\n // use span reference to calculate the real width for the input\n const spanReference = useRef<HTMLSpanElement>(null);\n const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;\n const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n useEffect(() => {\n if (spanReference.current) {\n spanReference.current.style.display = 'block';\n setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n spanReference.current.style.display = 'none';\n }\n }, [inputValue]);\n\n // if we se an input mask we configure inside here the proper mask\n // or a stardard combobox onchange event\n const handleOnChange = useMaskedOnChange();\n\n const handleOnBlur = useCallback(() => {\n setInputValue('');\n if (onFilter) onFilter(allOptions);\n setHasFocus(false);\n }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n const handleOnFocus = useCallback(() => {\n setHasFocus(true);\n }, [setHasFocus]);\n\n return useMemo(\n () => ({\n handleOnBlur,\n handleOnChange,\n handleOnFocus,\n showPlaceholder,\n spanReferenceText,\n width,\n spanReference,\n }),\n [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n );\n};\n\nexport { useControlsInput };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8E;AAC9E,+BAAkC;AAClC,yBAA4B;AAC5B,wBAAqC;AAWrC,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,SAAS;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,QAAM,oBAAgB,qBAAwB,IAAI;AAClD,QAAM,kBAAkB,CAAC,kBAAc,wCAAqB,cAAc,IAAI,cAAc;AAC5F,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,8BAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,qBAAiB,4CAAkB;AAEzC,QAAM,mBAAe,0BAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI;AAAU,eAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n StyledHeaderListWrapper,\n StyledButtonSelection,\n StyledSelectedItems,\n StyledSelectAllCheckbox,\n StyledNoOptionsSelected,\n} from './styled';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport {\n StyledHeaderListWrapper,\n StyledButtonSelection,\n StyledSelectedItems,\n StyledSelectAllCheckbox,\n StyledNoOptionsSelected,\n} from './styled';\nimport type { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { useHeaderListHandlers } from './useHeaderListHandlers';\nexport const HeaderList = (): JSX.Element => {\n const {\n props: { selectedValues, filteredOptions, onSelectAll },\n showSelectedOptions,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const {\n handleKeyDown,\n handleOnMouseDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleCheckAllOnTab,\n checkboxStatus,\n handleSelectAllCheckboxChange,\n } = useHeaderListHandlers();\n\n return (\n <StyledHeaderListWrapper\n onKeyDown={handleKeyDown}\n onMouseDown={handleOnMouseDown}\n data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n >\n <StyledSelectAllCheckbox>\n {onSelectAll && (\n <DSControlledCheckbox\n checked={checkboxStatus}\n aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n name=\"select-all-checkbox\"\n aria-label=\"Select/Unselect All Items\"\n id=\"select-all-checkbox\"\n onChange={handleSelectAllCheckboxChange}\n onKeyDown={handleCheckAllOnTab}\n innerRef={selectAllCheckboxRef}\n device=\"desktop\"\n />\n )}\n </StyledSelectAllCheckbox>\n <StyledSelectedItems>\n {multiSelectedValues.length > 0 ? (\n <StyledButtonSelection\n onKeyDown={handleFilterSelectionBtnOnTab}\n buttonType={BUTTON_TYPES.TEXT}\n onClick={handleToggleSelectedValuesFilter}\n size={BUTTON_SIZES.S}\n data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n innerRef={toggleSelectionButtonRef}\n >\n {!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n </StyledButtonSelection>\n ) : (\n <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n )}\n </StyledSelectedItems>\n </StyledHeaderListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AAlCJ,mBAAkC;AAClC,uBAA2C;AAC3C,8BAAqC;AACrC,yBAAgC;AAChC,oBAMO;AAEP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,8CAAmB,YAAY;AAAA,MAE5C;AAAA,oDAAC,yCACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA,YACV,QAAO;AAAA;AAAA,QACT,GAEJ;AAAA,QACA,4CAAC,qCACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,8BAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,8BAAa;AAAA,YACnB,eAAa,8CAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA;AAAA,QAC5E,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useItemRenderer } from './useItemRenderer';\nimport { LoadingContainer } from './LoadingContainer';\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 },\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.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 (isLoading) return <LoadingContainer />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {filteredOptions.length > 0 || onCreate ? (\n <StyledVirtualListWrapper inline={inline} maxHeight={menuMaxHeight} ref={listRef} withHeader={withHeader}>\n <StyledList\n id=\"combo-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 onCreate,\n withHeader,\n filteredOptions,\n noOptionsMessage,\n ItemRenderer,\n virtualListHelpers,\n inline,\n menuMaxHeight,\n listRef,\n isLoading,\n ]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n // we use width as key to force react virtual re-render on window resize\n // and update the item height accordly\n key={width}\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;ADsCG;AAtC1B,mBAAwD;AACxD,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AAE1B,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,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,gBAAgB,SAAS,KAAK,CAAC;AACzE,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;AAAW,aAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MAC1B,gBAAgB,SAAS,KAAK,WAC7B,4CAAC,0CAAyB,QAAgB,WAAW,eAAe,KAAK,SAAS,YAChF;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,eAAa,8CAAmB;AAAA,UAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,UAElF;AAAA;AAAA,MACH,GACF,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;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAKT;AAAA;AAAA,IAFI;AAAA,EAGP;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,36 +29,36 @@ __export(react_desc_prop_types_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
function noop(..._args) {
|
|
34
34
|
}
|
|
35
35
|
const ComboboxPropTypes = {
|
|
36
|
-
...
|
|
37
|
-
placeholder:
|
|
38
|
-
allOptions:
|
|
39
|
-
filteredOptions:
|
|
40
|
-
selectedValues:
|
|
36
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
37
|
+
placeholder: import_ds_props_helpers.PropTypes.string.description("input's placeholder value").defaultValue(""),
|
|
38
|
+
allOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of original options").defaultValue([]),
|
|
39
|
+
filteredOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).description("List of filtered options to show in the menu based on the current internal input filter value").defaultValue([]),
|
|
40
|
+
selectedValues: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object), import_ds_props_helpers.PropTypes.object]).isRequired.description(
|
|
41
41
|
"Array of option or single option selected"
|
|
42
42
|
),
|
|
43
|
-
disabled:
|
|
44
|
-
autoFocus:
|
|
45
|
-
hasError:
|
|
46
|
-
noOptionsMessage:
|
|
47
|
-
onChange:
|
|
48
|
-
onFilter:
|
|
49
|
-
onCreate:
|
|
43
|
+
disabled: import_ds_props_helpers.PropTypes.bool.description("wheter or not the input is disabled").defaultValue("false"),
|
|
44
|
+
autoFocus: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),
|
|
45
|
+
hasError: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box has error or not").defaultValue("false"),
|
|
46
|
+
noOptionsMessage: import_ds_props_helpers.PropTypes.string.description("Custome message to be display when no matches found after filtering").defaultValue("No Matches Found"),
|
|
47
|
+
onChange: import_ds_props_helpers.PropTypes.func.isRequired.description("function triggered when an option is selected it will send the options selected").defaultValue("() => {}"),
|
|
48
|
+
onFilter: import_ds_props_helpers.PropTypes.func.description("function triggered when user type in the combobox input").defaultValue(""),
|
|
49
|
+
onCreate: import_ds_props_helpers.PropTypes.func.description(
|
|
50
50
|
'function triggered when user select "create" a new item whenever is not a match in the all option list'
|
|
51
51
|
).defaultValue(""),
|
|
52
|
-
onCancel:
|
|
53
|
-
onMenuChange:
|
|
54
|
-
inputMinWidth:
|
|
55
|
-
menuMinWidth:
|
|
56
|
-
menuMaxHeight:
|
|
57
|
-
withoutPortal:
|
|
58
|
-
zIndex:
|
|
59
|
-
innerRef:
|
|
52
|
+
onCancel: import_ds_props_helpers.PropTypes.func.description("function triggered when user press ESC key").defaultValue("() => {}"),
|
|
53
|
+
onMenuChange: import_ds_props_helpers.PropTypes.func.description("function triggered when user open or close the menu list").defaultValue("() => {}"),
|
|
54
|
+
inputMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the combo box input controller").defaultValue(void 0),
|
|
55
|
+
menuMinWidth: import_ds_props_helpers.PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
|
|
56
|
+
menuMaxHeight: import_ds_props_helpers.PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
|
|
57
|
+
withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether the combobox menu is rendered in a portal or not").defaultValue(false),
|
|
58
|
+
zIndex: import_ds_props_helpers.PropTypes.number.description("The z-index of the combobox menu").defaultValue(10),
|
|
59
|
+
innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description(
|
|
60
60
|
"reference to the component"
|
|
61
61
|
),
|
|
62
|
-
onlySelectable:
|
|
62
|
+
onlySelectable: import_ds_props_helpers.PropTypes.bool.description("filtering is disabled")
|
|
63
63
|
};
|
|
64
64
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n inputMinWidth?: number;\n menuMinWidth?: number;\n menuMaxHeight?: number;\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n zIndex?: number;\n isLoading?: boolean;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: ItemOption | OptionTypes[] | null,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.RefObject<HTMLInputElement>;\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n }\n\n export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAE9C,SAAS,QAA6B,OAAgB;AAAC;AAiFvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,kCAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,OAAO,YAAY,kCAAkC,EAAE,aAAa,EAAE;AAAA,EACxF,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/ComboBox.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { describe } from "@elliemae/ds-
|
|
3
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import { useComboBox } from "./config/useComboBox";
|
|
5
5
|
import { Container } from "./parts/container";
|
|
6
6
|
import { ComboBoxContext } from "./ComboBoxCTX";
|
package/dist/esm/ComboBox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport type { DSComboboxT } from './react-desc-prop-types';\nimport { ComboboxPropTypes } from './react-desc-prop-types';\n\nconst DSComboBox: React.ComponentType<DSComboboxT.Props> = (props) => {\n const ctx = useComboBox(props);\n return (\n <ComboBoxContext.Provider value={ctx}>\n <Container />\n </ComboBoxContext.Provider>\n );\n};\nDSComboBox.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\nDSComboBox.displayName = 'DSComboBox';\nconst DSComboBoxWithSchema = describe(DSComboBox);\n\nDSComboBoxWithSchema.propTypes = ComboboxPropTypes as WeakValidationMap<unknown>;\n\nexport { DSComboBox, DSComboBoxWithSchema, DSComboBox as DSComboBoxV3 };\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACajB;AAXN,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,8BAAC,aAAU,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-
|
|
4
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { defaultProps } from "../ComboBoxCTX";
|
|
6
6
|
import { ComboboxPropTypes } from "../react-desc-prop-types";
|
|
7
7
|
import { useCorrectOptions } from "./useCorrectOptions";
|
|
@@ -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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-
|
|
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';\nimport type { DSComboboxT } from '../react-desc-prop-types';\nimport { ComboboxPropTypes } from '../react-desc-prop-types';\nimport type { DSComboboxInternalsT } from '../sharedTypes';\nimport { useCorrectOptions } from './useCorrectOptions';\nimport { getFirstOption } from '../utils/listHelper';\nimport { DSComboBoxName } from '../theming';\nexport const useComboBox = (props: DSComboboxT.Props): DSComboboxInternalsT.ComboBoxContextT => {\n const propsWithDefaults = useMemoMergePropsWithDefault(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 // focus first option when typing\n useEffect(() => {\n setFocusOptionIdx(correctOptions?.[0]?.dsId ?? '');\n }, [correctOptions, 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
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,QAAQ,aAAa,iBAAiB;AAClE,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AACxB,MAAM,cAAc,CAAC,UAAoE;AAC9F,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,mBAAmB,cAAc;AACnF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAkB,KAAK;AAC7D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAkB,KAAK;AAE7E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,qBAAqB,OAAuB,IAAI;AACtD,QAAM,uBAAuB,OAAyB,IAAI;AAC1D,QAAM,2BAA2B,OAA0B,IAAI;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAEhD,QAAM,EAAE,gBAAgB,YAAY,aAAa,IAAI;AAErD,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,eAAe;AAAW,aAAO;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,eAAe;AAAA,IACnB,CACE,UACA,QACA,MACG;AACH,UAAI,iBAAiB;AAAW,qBAAa,UAAU,QAAQ,CAAC;AAChE,qBAAe,QAAQ;AAAA,IACzB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,QAAM,iBAAiB,kBAAkB,mBAAmB,YAAY,mBAAmB;AAM3F,QAAM,qBAAoD,WAAW;AAAA,IACnE,MAAM,eAAe;AAAA,IACrB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAKD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAO,EAAE,OAAO,SAAS,MAAM;AAC5C,yBAAmB;AAAA,QACjB,eAAe,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAAA,QAEnD;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAMA,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB,EAAE;AAE/D,YAAU,MAAM;AAId,QAAI,CAAC;AAAU,wBAAkB,EAAE;AACnC,QAAI,aAAa,CAAC,kBAAkB,sBAAsB;AACxD,YAAM,eAAe,eAAe,gBAAgB,cAAc;AAClE,wBAAkB,YAAY;AAC9B,2BAAqB,cAAc,EAAE,OAAO,SAAS,CAAC;AAAA,IACxD;AAAA,EAEF,GAAG,CAAC,aAAa,UAAU,gBAAgB,cAAc,CAAC;AAG1D,YAAU,MAAM;AACd,sBAAkB,iBAAiB,IAAI,QAAQ,EAAE;AAAA,EACnD,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,aAAa;AAChB,wBAAkB,EAAE;AACpB,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,mBAAmB,iBAAiB,eAAe;AAAA,MAC/D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/LiveRegion.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const LiveRegion = (): JSX.Element => {\n const {\n props: { selectedValues, filteredOptions },\n hasFocus,\n focusOptionIdx,\n menuState,\n } = useContext(ComboBoxContext);\n\n const selectabledOptions = getSelectableOptions(filteredOptions);\n const focusOption = filteredOptions.find((option) => option.dsId === focusOptionIdx);\n const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);\n const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n const navigationContext =\n 'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';\n const ariaFocused = useMemo(() => {\n if (menuState && focusOption && focusOption.type === 'option')\n return (\n <StyledA11ySelectedValues key={menuState} aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n {`option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${\n focusSelectableOptionIdx + 1\n } of ${selectabledOptions.length}. ${navigationContext} `}\n </StyledA11ySelectedValues>\n );\n if (focusOption?.type === 'creatable')\n return (\n <StyledA11ySelectedValues\n key={menuState}\n aria-live=\"assertive\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {`Press enter to Add option written in input box. ${navigationContext}`}\n </StyledA11ySelectedValues>\n );\n return null;\n }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);\n\n const ariaSelected = useMemo(() => {\n if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n return `Options selected: ${selectedValues.map((item) => item.label).join(', ')}`;\n }\n if (selectedValues) {\n return `Option selected: ${selectedValues?.label}`;\n }\n return 'No Option Selected';\n }, [selectedValues]);\n\n const ScreenReaderText = (\n <>\n <span id=\"aria-selection\">{ariaSelected}</span>\n <span id=\"aria-context\">{ariaFocused}</span>\n </>\n );\n\n return (\n <StyledA11ySelectedValues\n data-testid={ComboboxDataTestid.ALLY_SELECTED_VALUES}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n >\n {hasFocus && ScreenReaderText}\n </StyledA11ySelectedValues>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuBf,SA+BJ,UA/BI,KA+BJ,YA/BI;AAvBR,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,kBAAkB;AACjD,SAAS,0BAA0B;AAC5B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,qBAAqB,qBAAqB,eAAe;AAC/D,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,SAAS,cAAc;AACnF,QAAM,wBAAwB,aAAa,SAAS,YAAY,WAAW,gBAAgB,WAAW;AACtG,QAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,QAAM,oBACJ;AACF,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,aAAa,eAAe,YAAY,SAAS;AACnD,aACE,oBAAC,4BAAyC,aAAU,UAAS,eAAY,SAAQ,iBAAc,kBAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW,wBAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,aAAU;AAAA,UACV,eAAY;AAAA,UACZ,iBAAc;AAAA,UAEb,6DAAmD;AAAA;AAAA,QAL/C;AAAA,MAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AAEvG,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,MAAM,QAAQ,cAAc,KAAK,eAAe,SAAS,GAAG;AAC9D,aAAO,qBAAqB,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI;AAAA,IAChF;AACA,QAAI,gBAAgB;AAClB,aAAO,oBAAoB,gBAAgB;AAAA,IAC7C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,mBACJ,iCACE;AAAA,wBAAC,UAAK,IAAG,kBAAkB,wBAAa;AAAA,IACxC,oBAAC,UAAK,IAAG,gBAAgB,uBAAY;AAAA,KACvC;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,mBAAmB;AAAA,MAChC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,iBAAc;AAAA,MAEb,sBAAY;AAAA;AAAA,EACf;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useEffect, useMemo, useContext } from "react";
|
|
4
|
-
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-
|
|
4
|
+
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
6
6
|
import ComboBoxContext from "../../ComboBoxCTX";
|
|
7
7
|
import { StyledContainer, StyledPopperWrapper } from "./styled";
|
|
@@ -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-
|
|
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-props-helpers';\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';\nimport { LiveRegion } from '../LiveRegion';\n\nexport const Container = (): JSX.Element => {\n const { props, internalRef, setMenuState, menuState, setReferenceElement, referenceElement } =\n useContext(ComboBoxContext);\n\n const { inline, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex } = props;\n const globalAttributes = useGetGlobalAttributes(props);\n const xStyledProps = useGetXstyledProps(props);\n // Removing possible collisionable props\n const { className, 'data-testid': dataTestId, ...containerGlobals } = globalAttributes;\n const handleMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n }, []);\n\n const handleCloseMenu = useCallback(() => {\n setMenuState(false, 'blur');\n if (internalRef?.current) internalRef.current.blur();\n }, [internalRef, 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={dataTestId ?? ComboboxDataTestid.CONTAINER}\n ref={setReferenceElement}\n className={className}\n {...xStyledProps}\n >\n <LiveRegion />\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 dataTestId,\n setReferenceElement,\n className,\n xStyledProps,\n inline,\n referenceElement,\n menuState,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACiDf,SAEE,UAFF,KAEE,YAFF;AAhDR,SAAgB,aAAa,WAAW,SAAS,kBAAkB;AACnE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,OAAO,qBAAqB;AAC5B,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAmB;AAC1C,QAAM,EAAE,OAAO,aAAa,cAAc,WAAW,qBAAqB,iBAAiB,IACzF,WAAW,eAAe;AAE5B,QAAM,EAAE,QAAQ,0BAA0B,0BAA0B,eAAe,OAAO,IAAI;AAC9F,QAAM,mBAAmB,uBAAuB,KAAK;AACrD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IAAI;AACtE,QAAM,kBAAkB,YAAY,CAAC,MAAwB;AAC3D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,OAAO,MAAM;AAC1B,QAAI,aAAa;AAAS,kBAAY,QAAQ,KAAK;AAAA,EACrD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,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;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,cAAc,mBAAmB;AAAA,QAC9C,KAAK;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,cAAW;AAAA,UACX,SACC,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV,oBAAC,YAAS;AAAA,aACZ,IAEA,iCACE;AAAA,gCAAC,YAAS;AAAA,YACV;AAAA,cAAC;AAAA;AAAA,gBACC,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAa;AAAA,gBACb,kBAAkB;AAAA,gBAClB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY;AAAA,gBACZ,kBAAgB;AAAA,gBAChB;AAAA,gBAEA,8BAAC,uBAAoB,UAAU,IAAI,aAAa,iBAC9C,8BAAC,YAAS,GACZ;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|