@elliemae/ds-form-combobox 3.11.0-next.6 → 3.11.0-next.8
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.map +1 -1
- package/dist/cjs/parts/A11yFocusedOption.js.map +1 -1
- package/dist/cjs/parts/A11ySelectedValues.js.map +1 -1
- package/dist/cjs/parts/DropdownIndicator.js.map +1 -1
- package/dist/cjs/parts/container/Container.js.map +1 -1
- package/dist/cjs/parts/controls/Controls.js.map +1 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/cjs/parts/header-list/HeaderList.js.map +1 -1
- package/dist/cjs/parts/menu-list/MenuList.js.map +1 -1
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +1 -1
- package/dist/esm/ComboBox.js.map +1 -1
- package/dist/esm/parts/A11yFocusedOption.js.map +1 -1
- package/dist/esm/parts/A11ySelectedValues.js.map +1 -1
- package/dist/esm/parts/DropdownIndicator.js.map +1 -1
- package/dist/esm/parts/container/Container.js.map +1 -1
- package/dist/esm/parts/controls/Controls.js.map +1 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/esm/parts/header-list/HeaderList.js.map +1 -1
- package/dist/esm/parts/menu-list/MenuList.js.map +1 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/esm/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +1 -1
- package/dist/esm/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +1 -1
- package/package.json +16 -13
package/dist/cjs/ComboBox.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ComboBox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport { DSComboboxT, 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;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWjB;AAVN,0BAAyB;AACzB,yBAA4B;AAC5B,uBAA0B;AAC1B,yBAAgC;AAChC,mCAA+C;AAE/C,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,UAAM,gCAAY,KAAK;AAC7B,SACE,4CAAC,mCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,sDAAC,8BAAU;AAAA,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU;AAEhD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/A11yFocusedOption.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { getSelectableOptions, isSelected } from '../utils/listHelper';\nimport { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n const {\n props: { filteredOptions, selectedValues },\n focusOptionIdx,\n menuState,\n } = useContext(ComboBoxContext);\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 return useMemo(() => {\n if (!isSeparator(focusOption) && 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBf;AAtBR,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,wBAAiD;AACjD,yBAA4B;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe;AAAA,IACzC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAC9B,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,aAAO,sBAAQ,MAAM;AACnB,QAAI,KAAC,gCAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,4CAAC;AAAA,QAAyC,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,QAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW;AAAA,SAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,4CAAC;AAAA,QAEC,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,QAEb,6DAAmD;AAAA,SAL/C,SAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/A11ySelectedValues.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { StyledA11ySelectedValues } from './styled';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n const msg = 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 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 {msg}\n </StyledA11ySelectedValues>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AApBJ,mBAA2C;AAC3C,yBAA4B;AAC5B,oBAAyC;AACzC,iCAAmC;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,UAAM,sBAAQ,MAAM;AACxB,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,SACE,4CAAC;AAAA,IACC,eAAa,8CAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,IAEb;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\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;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6CjB;AA3CN,mBAA+C;AAC/C,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAiC;AACjC,yBAA4B;AAC5B,iCAAmC;AAEnC,MAAM,2BAAuB,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASlC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,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,4CAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,8CAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,IAEV,sDAAC,oCAAiB;AAAA,GACpB;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, 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 {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : (\n <>\n <Controls />\n <DSPopperJS\n customOffset={[0, 5]}\n referenceElement={referenceElement}\n showPopover={menuState}\n closeContextMenu={handleCloseMenu}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal={withoutPortal}\n withoutArrow\n withoutAnimation\n zIndex={zIndex}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n </>\n )}\n </StyledContainer>\n ),\n [\n inline,\n setReferenceElement,\n containerGlobals,\n referenceElement,\n menuState,\n xStyledProps,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDb;AAhDV,mBAAmE;AACnE,0BAA2D;AAC3D,yBAA2B;AAC3B,yBAA4B;AAC5B,oBAAqD;AACrD,sBAAyB;AACzB,uBAAyB;AACzB,iCAAmC;AAE5B,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,4CAAuB,KAAK;AACrD,QAAM,mBAAe,wCAAmB,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,4CAAC;AAAA,MACC,eAAa,cAAc,8CAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC,6BAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,sDAAC,4BAAS;AAAA,UACV,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;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,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls/Controls.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n {hasFocus && <A11ySelectedValues />}\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyFf;AAvFR,mBAAwD;AACxD,+BAAkC;AAClC,iCAAmC;AACnC,yBAA4B;AAC5B,oBAKO;AACP,6CAA6C;AAC7C,2BAA8B;AAC9B,kCAAqC;AACrC,+BAAkC;AAClC,gCAAmC;AACnC,wCAA2C;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,yBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,wBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,QAAI,kDAAqB;AAEhD,QAAM,WAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,8CAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,6CAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,4CAAC,gDAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,4CAAC,uEAA6B,IAE9B,4CAAC;AAAA,YAAI,eAAa,8CAAmB;AAAA,YAClC,4BAAkB,4CAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,4CAAC,8CAAkB;AAAA,MAEnB,4CAAC,sCAAc;AAAA,MACd,CAAC,UACA,6CAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,sDAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,4CAAC,8CAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n className,\n tabIndex,\n 'data-testid': dataTestId,\n id,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,mBAA+C;AAC/C,uCAA2C;AAC3C,0BAAkD;AAElD,iCAAmC;AACnC,oBAAmG;AACnG,mCAAsC;AACtC,8BAAiC;AACjC,yBAAgC;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAC9B,QAAM,EAAE,eAAe,QAAI,oDAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,QAC5G,0CAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,OACG;AAAA,EACL,QAAI,4CAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,4CAAC;AAAA,QACC,sDAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,4CAAC;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,8CAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,SAAK,+BAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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';\n\nimport { 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;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCnB;AAnCJ,mBAAkC;AAClC,uBAA2C;AAC3C,8BAAqC;AACrC,yBAAgC;AAChC,oBAMO;AAGP,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,6CAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,8CAAmB,YAAY;AAAA,IAE5C;AAAA,kDAAC;AAAA,QACE,yBACC,4CAAC;AAAA,UACC,SAAS;AAAA,UACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,UAChE,MAAK;AAAA,UACL,cAAW;AAAA,UACX,IAAG;AAAA,UACH,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAO;AAAA,SACT;AAAA,OAEJ;AAAA,MACA,4CAAC;AAAA,QACE,8BAAoB,SAAS,IAC5B,4CAAC;AAAA,UACC,WAAW;AAAA,UACX,YAAY,8BAAa;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,8BAAa;AAAA,UACnB,eAAa,8CAAmB,YAAY;AAAA,UAC5C,UAAU;AAAA,UAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA,SAC5E,IAEA,4CAAC;AAAA,UAAwB;AAAA,SAAU;AAAA,OAEvC;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\n\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useItemRenderer } from './useItemRenderer';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, filteredOptions, selectedValues },\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 return useMemo(\n () => (\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 {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 </StyledListWrapper>\n ),\n [\n wrapperListRef,\n inline,\n preventLoseInputFocus,\n width,\n menuMinWidth,\n withHeader,\n filteredOptions.length,\n onCreate,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA9BN,mBAAwD;AACxD,0BAAmC;AAEnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,kBAAkB,eAAe,UAAU,QAAQ,iBAAiB,eAAe;AAAA,IAC1G;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,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAKT;AAAA,sBAAc,4CAAC,iCAAW;AAAA,QAC1B,gBAAgB,SAAS,KAAK,WAC7B,4CAAC;AAAA,UAAyB;AAAA,UAAgB,WAAW;AAAA,UAAe,KAAK;AAAA,UAAS;AAAA,UAChF,sDAAC;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAa,8CAAmB;AAAA,YAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,YAElF;AAAA,WACH;AAAA,SACF,IAEA,4CAAC;AAAA,UAAuB,MAAK;AAAA,UAAS;AAAA,SAAiB;AAAA;AAAA,OAfpD,KAiBP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-menu-items';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n const handleClick = useCallback(\n (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n if (!option.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n return useMemo(() => {\n if (!virtualListHelpers) {\n return null;\n }\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = filteredOptions[vItem.index];\n const { dsId, type, disabled } = option;\n const generalProps = {\n wrapperStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${vItem.start}px)`,\n },\n\n key: `${dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n onClick={(e: React.MouseEvent) => {\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return <></>;\n });\n }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { useGroupPills } from './useGroupPills';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBf;AAvBR,mBAA2C;AAC3C,sBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AACpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,MACtE,eAAa,8CAAmB;AAAA,MAEhC,uDAAC;AAAA,QAAc,UAAU;AAAA,QACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,SAAS,4CAAC;AAAA,YAA2C;AAAA,aAAX,KAAK,IAAkB,CAAE;AAAA,UAC5E,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E,4CAAC;AAAA,YACC,MAAK;AAAA,YACL,gBAAgB;AAAA,YAEhB,OAAO,IAAI,mBAAmB,SAAS;AAAA,YACvC,MAAK;AAAA,YACL;AAAA,aAHI,SAIN;AAAA;AAAA,OAEJ;AAAA,KACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,QAAQ;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkC;AAClC,sBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE,4CAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,mBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,kBAAY,SAAS,MAAM;AAAA,IAC7B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
package/dist/esm/ComboBox.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ComboBox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { useComboBox } from './config/useComboBox';\nimport { Container } from './parts/container';\nimport { ComboBoxContext } from './ComboBoxCTX';\nimport { DSComboboxT, 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
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWjB;AAVN,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAsB,yBAAyB;AAE/C,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,MAAM,YAAY,KAAK;AAC7B,SACE,oBAAC,gBAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,8BAAC,aAAU;AAAA,GACb;AAEJ;AACA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11yFocusedOption.tsx"],
|
|
4
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 { isSeparator } from '../sharedTypes';\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n const {\n props: { filteredOptions, selectedValues },\n focusOptionIdx,\n menuState,\n } = useContext(ComboBoxContext);\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 return useMemo(() => {\n if (!isSeparator(focusOption) && 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsBf;AAtBR,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,kBAAkB;AACjD,SAAS,mBAAmB;AAErB,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe;AAAA,IACzC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,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,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,YAAY,WAAW,KAAK,aAAa,eAAe,YAAY,SAAS;AAChF,aACE,oBAAC;AAAA,QAAyC,aAAU;AAAA,QAAS,eAAY;AAAA,QAAQ,iBAAc;AAAA,QAC5F,oBAAU,aAAa,SAAS,wBAAwB,kBAAkB,cACzE,2BAA2B,QACtB,mBAAmB,WAAW;AAAA,SAHR,SAI/B;AAEJ,QAAI,aAAa,SAAS;AACxB,aACE,oBAAC;AAAA,QAEC,aAAU;AAAA,QACV,eAAY;AAAA,QACZ,iBAAc;AAAA,QAEb,6DAAmD;AAAA,SAL/C,SAMP;AAEJ,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,WAAW,uBAAuB,0BAA0B,mBAAmB,MAAM,CAAC;AACzG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11ySelectedValues.tsx"],
|
|
4
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 { ComboboxDataTestid } from '../ComboboxDataTestids';\nexport const A11ySelectedValues = (): JSX.Element => {\n const {\n props: { selectedValues },\n } = useContext(ComboBoxContext);\n\n const msg = 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 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 {msg}\n </StyledA11ySelectedValues>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoBnB;AApBJ,SAAgB,YAAY,eAAe;AAC3C,OAAO,qBAAqB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAC5B,MAAM,qBAAqB,MAAmB;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,EAC1B,IAAI,WAAW,eAAe;AAE9B,QAAM,MAAM,QAAQ,MAAM;AACxB,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,SACE,oBAAC;AAAA,IACC,eAAa,mBAAmB;AAAA,IAChC,aAAU;AAAA,IACV,eAAY;AAAA,IACZ,iBAAc;AAAA,IAEb;AAAA,GACH;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
|
|
4
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';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport ComboBoxContext from '../ComboBoxCTX';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids';\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;
|
|
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,SAAS,MAAM,OAAO,MAAM;AAAA;AAAA;AAI3F,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,oBAAC;AAAA,IACC,SAAS;AAAA,IACT,eAAa,mBAAmB;AAAA,IAChC,iBAAc;AAAA,IACd,mBAAgB;AAAA,IAChB;AAAA,IACA,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,eAAW;AAAA,IACX,YAAW;AAAA,IACX,UAAU;AAAA,IAEV,8BAAC,oBAAiB;AAAA,GACpB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useEffect, useMemo, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { Controls } from '../controls';\nimport { MenuList } from '../menu-list';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\n\nexport const Container = (): JSX.Element => {\n const { props, 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 {inline ? (\n <>\n <Controls />\n <MenuList />\n </>\n ) : (\n <>\n <Controls />\n <DSPopperJS\n customOffset={[0, 5]}\n referenceElement={referenceElement}\n showPopover={menuState}\n closeContextMenu={handleCloseMenu}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal={withoutPortal}\n withoutArrow\n withoutAnimation\n zIndex={zIndex}\n >\n <StyledPopperWrapper tabIndex={-1} onMouseDown={handleMouseDown}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n </>\n )}\n </StyledContainer>\n ),\n [\n inline,\n setReferenceElement,\n containerGlobals,\n referenceElement,\n menuState,\n xStyledProps,\n handleCloseMenu,\n startPlacementPreference,\n placementOrderPreference,\n withoutPortal,\n zIndex,\n handleMouseDown,\n ],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiDb,mBACE,KADF;AAhDV,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;AAE5B,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,oBAAC;AAAA,MACC,eAAa,cAAc,mBAAmB;AAAA,MAC9C,KAAK;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEH,mBACC;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,YAAS;AAAA;AAAA,OACZ,IAEA;AAAA,QACE;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB;AAAA,YAEA,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAAI,aAAa;AAAA,cAC9C,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OACF;AAAA,KAEJ;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,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/Controls.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport { DropdownIndicator } from '../DropdownIndicator';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport {\n StyledControlsWrapper,\n StyleHeaderActionsSeparator,\n StyledHeaderActionsWrapper,\n StyledSelection,\n} from './styled';\nimport { MultiSelectedValuesContainer } from '../multi-selected-values-container';\nimport { ControlsInput } from '../controls-input/ControlsInput';\nimport { useOnPillsNavigation } from './useOnPillsNavigation';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nimport { A11ySelectedValues } from '../A11ySelectedValues';\nimport { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill';\nexport const Controls = (): JSX.Element => {\n const {\n props: { inline, disabled, inputMinWidth, hasError, selectedValues },\n selectedOptionsRef,\n setMenuState,\n setFocusOptionIdx,\n hasFocus,\n listRef,\n focusOptionIdx,\n menuState,\n controlsWrapperRef,\n internalRef,\n } = useContext(ComboBoxContext);\n\n const handleOnClick = useCallback(() => {\n if (disabled) return;\n if (hasFocus && menuState && !inline) {\n setMenuState(false);\n setFocusOptionIdx('');\n internalRef.current?.blur();\n return;\n }\n internalRef.current?.focus();\n setMenuState(true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [disabled, listRef, hasFocus, menuState, inline, setMenuState, focusOptionIdx]);\n\n // this callback prevent to toggle the menu when clicking or removing pills\n const handleOnPillsClick: React.MouseEventHandler = useCallback(\n (e) => {\n if (menuState || disabled) {\n e.stopPropagation();\n } else {\n internalRef.current?.focus();\n setMenuState(true);\n }\n },\n [menuState, internalRef, disabled, setMenuState],\n );\n\n // callback to prevent onBlur on the input when clicking in all the wrapper\n const handleOnMouseDown: React.MouseEventHandler = useCallback(\n (e) => {\n if (document.activeElement === internalRef.current || inline) {\n e.preventDefault();\n }\n },\n [internalRef, inline],\n );\n\n const { onKeyDownPills } = useOnPillsNavigation();\n\n const cols = useMemo(\n () => (!inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)']),\n [inline],\n );\n return (\n <StyledControlsWrapper\n ref={controlsWrapperRef}\n cols={cols}\n disabled={disabled}\n minWidth={inputMinWidth}\n hasError={hasError}\n inline={inline}\n onClick={handleOnClick}\n onMouseDown={handleOnMouseDown}\n onKeyDown={onKeyDownPills}\n data-testid={ComboboxDataTestid.CONTROLS_WRAPPER}\n >\n {!inline && (\n <StyledSelection ref={selectedOptionsRef} onClick={handleOnPillsClick}>\n {hasFocus && <A11ySelectedValues />}\n {Array.isArray(selectedValues) ? (\n <MultiSelectedValuesContainer />\n ) : (\n <div data-testid={ComboboxDataTestid.SELECTED_VALUES}>\n {selectedValues && <RemovableSelectedValuePill pill={selectedValues} />}\n </div>\n )}\n </StyledSelection>\n )}\n <A11yFocusedOption />\n\n <ControlsInput />\n {!inline && (\n <StyledHeaderActionsWrapper justifyContent=\"center\" cols={['min-content', 'min-content']}>\n <StyleHeaderActionsSeparator disabled={disabled} />\n <DropdownIndicator />\n </StyledHeaderActionsWrapper>\n )}\n </StyledControlsWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyFf,SACe,KADf;AAvFR,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,UAAU,eAAe,UAAU,eAAe;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI;AAAU;AACd,QAAI,YAAY,aAAa,CAAC,QAAQ;AACpC,mBAAa,KAAK;AAClB,wBAAkB,EAAE;AACpB,kBAAY,SAAS,KAAK;AAC1B;AAAA,IACF;AACA,gBAAY,SAAS,MAAM;AAC3B,iBAAa,IAAI;AAAA,EAGnB,GAAG,CAAC,UAAU,SAAS,UAAU,WAAW,QAAQ,cAAc,cAAc,CAAC;AAGjF,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,UAAI,aAAa,UAAU;AACzB,UAAE,gBAAgB;AAAA,MACpB,OAAO;AACL,oBAAY,SAAS,MAAM;AAC3B,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,aAAa,UAAU,YAAY;AAAA,EACjD;AAGA,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,SAAS,kBAAkB,YAAY,WAAW,QAAQ;AAC5D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,eAAe,IAAI,qBAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,MAAO,CAAC,SAAS,CAAC,2BAA2B,sBAAsB,MAAM,IAAI,CAAC,mBAAmB;AAAA,IACjG,CAAC,MAAM;AAAA,EACT;AACA,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,eAAa,mBAAmB;AAAA,IAE/B;AAAA,OAAC,UACA,qBAAC;AAAA,QAAgB,KAAK;AAAA,QAAoB,SAAS;AAAA,QAChD;AAAA,sBAAY,oBAAC,sBAAmB;AAAA,UAChC,MAAM,QAAQ,cAAc,IAC3B,oBAAC,gCAA6B,IAE9B,oBAAC;AAAA,YAAI,eAAa,mBAAmB;AAAA,YAClC,4BAAkB,oBAAC;AAAA,cAA2B,MAAM;AAAA,aAAgB;AAAA,WACvE;AAAA;AAAA,OAEJ;AAAA,MAEF,oBAAC,qBAAkB;AAAA,MAEnB,oBAAC,iBAAc;AAAA,MACd,CAAC,UACA,qBAAC;AAAA,QAA2B,gBAAe;AAAA,QAAS,MAAM,CAAC,eAAe,aAAa;AAAA,QACrF;AAAA,8BAAC;AAAA,YAA4B;AAAA,WAAoB;AAAA,UACjD,oBAAC,qBAAkB;AAAA;AAAA,OACrB;AAAA;AAAA,GAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useGetGlobalAttributes, mergeRefs } from '@elliemae/ds-utilities';\n\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { StyledInput, StyledInputWrapper, StyledInputPlaceHolder, StyledInputWidthReference } from './styled';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { useControlsInput } from './useControlsInput';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\n\nexport const ControlsInput = (): JSX.Element => {\n const {\n props: { autoFocus, placeholder, disabled, innerRef, onlySelectable, ...restProps },\n focusOptionIdx,\n internalRef,\n inputValue,\n menuState,\n } = useContext(ComboBoxContext);\n const { onInputKeyDown } = useKeyboardNavigation();\n const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n useControlsInput();\n\n const {\n className,\n tabIndex,\n 'data-testid': dataTestId,\n id,\n ...globalAttrs\n } = useGetGlobalAttributes(restProps, {\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n return (\n <StyledInputWrapper>\n <StyledInputWidthReference ref={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder>\n <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n </StyledInputPlaceHolder>\n )}\n\n <StyledInput\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n {...globalAttrs}\n id={id}\n data-testid={ComboboxDataTestid.INPUT}\n autoFocus={autoFocus}\n placeholder={showPlaceholder ? placeholder : ''}\n aria-controls=\"combo-listbox\"\n aria-activedescendant={focusOptionIdx}\n aria-expanded={menuState}\n aria-haspopup=\"listbox\"\n aria-describedby={`combobox-selected-items ${id !== undefined ? `${id}_feedback_message` : ''}`}\n role=\"combobox\"\n disabled={disabled}\n style={{ width }}\n ref={mergeRefs(innerRef, internalRef)}\n value={inputValue}\n type=\"text\"\n onKeyDown={onInputKeyDown}\n onChange={handleOnChange}\n tabIndex={tabIndex}\n withoutCaret={onlySelectable}\n />\n </StyledInputWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCnB,SACE,KADF;AAlCJ,SAAgB,kBAA+B;AAC/C,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB,iBAAiB;AAElD,SAAS,0BAA0B;AACnC,SAAS,aAAa,oBAAoB,wBAAwB,iCAAiC;AACnG,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAmB;AAC9C,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW,aAAa,UAAU,UAAU,mBAAmB,UAAU;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,eAAe,IAAI,sBAAsB;AACjD,QAAM,EAAE,eAAe,OAAO,mBAAmB,iBAAiB,cAAc,gBAAgB,cAAc,IAC5G,iBAAiB;AAEnB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,OACG;AAAA,EACL,IAAI,uBAAuB,WAAW;AAAA,IACpC,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAA0B,KAAK;AAAA,QAAgB;AAAA,OAAkB;AAAA,MACjE,mBACC,oBAAC;AAAA,QACC,8BAAC;AAAA,UAA2B,OAAO;AAAA,SAAiB;AAAA,OACtD;AAAA,MAGF,oBAAC;AAAA,QACC,QAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QACA,eAAa,mBAAmB;AAAA,QAChC;AAAA,QACA,aAAa,kBAAkB,cAAc;AAAA,QAC7C,iBAAc;AAAA,QACd,yBAAuB;AAAA,QACvB,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,oBAAkB,2BAA2B,OAAO,SAAY,GAAG,wBAAwB;AAAA,QAC3F,MAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,MAAM;AAAA,QACf,KAAK,UAAU,UAAU,WAAW;AAAA,QACpC,OAAO;AAAA,QACP,MAAK;AAAA,QACL,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA,cAAc;AAAA,OAChB;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/HeaderList.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nimport { 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsCnB,SAOM,KAPN;AAnCJ,SAAgB,kBAAkB;AAClC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAE1B,SACE,qBAAC;AAAA,IACC,WAAW;AAAA,IACX,aAAa;AAAA,IACb,eAAa,mBAAmB,YAAY;AAAA,IAE5C;AAAA,0BAAC;AAAA,QACE,yBACC,oBAAC;AAAA,UACC,SAAS;AAAA,UACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,UAChE,MAAK;AAAA,UACL,cAAW;AAAA,UACX,IAAG;AAAA,UACH,UAAU;AAAA,UACV,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAO;AAAA,SACT;AAAA,OAEJ;AAAA,MACA,oBAAC;AAAA,QACE,8BAAoB,SAAS,IAC5B,oBAAC;AAAA,UACC,WAAW;AAAA,UACX,YAAY,aAAa;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,aAAa;AAAA,UACnB,eAAa,mBAAmB,YAAY;AAAA,UAC5C,UAAU;AAAA,UAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA,SAC5E,IAEA,oBAAC;AAAA,UAAwB;AAAA,SAAU;AAAA,OAEvC;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\n\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { HeaderList } from '../header-list';\nimport { useItemRenderer } from './useItemRenderer';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, filteredOptions, selectedValues },\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 return useMemo(\n () => (\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 {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 </StyledListWrapper>\n ),\n [\n wrapperListRef,\n inline,\n preventLoseInputFocus,\n width,\n menuMinWidth,\n withHeader,\n filteredOptions.length,\n onCreate,\n menuMaxHeight,\n listRef,\n virtualListHelpers?.totalSize,\n ItemRenderer,\n noOptionsMessage,\n ],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BjB,SAUiB,KAVjB;AA9BN,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,0BAA0B;AAEnC,SAAS,mBAAmB,wBAAwB,YAAY,gCAAgC;AAChG,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,kBAAkB,eAAe,UAAU,QAAQ,iBAAiB,eAAe;AAAA,IAC1G;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,gBAAgB,SAAS,KAAK,CAAC;AACzE,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,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAKT;AAAA,sBAAc,oBAAC,cAAW;AAAA,QAC1B,gBAAgB,SAAS,KAAK,WAC7B,oBAAC;AAAA,UAAyB;AAAA,UAAgB,WAAW;AAAA,UAAe,KAAK;AAAA,UAAS;AAAA,UAChF,8BAAC;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,eAAa,mBAAmB;AAAA,YAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,YAElF;AAAA,WACH;AAAA,SACF,IAEA,oBAAC;AAAA,UAAuB,MAAK;AAAA,UAAS;AAAA,SAAiB;AAAA;AAAA,OAfpD,KAiBP;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-menu-items';\nimport { ComboBoxContext } from '../../ComboBoxCTX';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n const handleClick = useCallback(\n (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n if (!option.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n return useMemo(() => {\n if (!virtualListHelpers) {\n return null;\n }\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = filteredOptions[vItem.index];\n const { dsId, type, disabled } = option;\n const generalProps = {\n wrapperStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${vItem.start}px)`,\n },\n\n key: `${dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n onClick={(e: React.MouseEvent) => {\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return <></>;\n });\n }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { useGroupPills } from './useGroupPills';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuBf,SAIqB,KAJrB;AAvBR,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,eAAe,gBAAgB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,kCAAkC;AACpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,qBAAqB,cAAc;AAEzC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,MACtE,eAAa,mBAAmB;AAAA,MAEhC,+BAAC;AAAA,QAAc,UAAU;AAAA,QACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,SAAS,oBAAC;AAAA,YAA2C;AAAA,aAAX,KAAK,IAAkB,CAAE;AAAA,UAC5E,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E,oBAAC;AAAA,YACC,MAAK;AAAA,YACL,gBAAgB;AAAA,YAEhB,OAAO,IAAI,mBAAmB,SAAS;AAAA,YACvC,MAAK;AAAA,YACL;AAAA,aAHI,SAIN;AAAA;AAAA,OAEJ;AAAA,KACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,QAAQ;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX';\nimport { DSComboboxT } from '../../react-desc-prop-types';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACanB;AAbJ,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAE5B,SAAS,iCAAiC;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,SACE,oBAAC;AAAA,IACC,MAAK;AAAA,IAEL,OAAO,KAAK;AAAA,IACZ;AAAA,IACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,IAC7C,UAAU;AAAA,IACV,UAAU,CAAC,MAA2B;AAEpC,QAAE,gBAAgB;AAClB,eAAS,0BAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,kBAAY,SAAS,MAAM;AAAA,IAC7B;AAAA,KAVK,KAAK,KAWZ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.11.0-next.
|
|
3
|
+
"version": "3.11.0-next.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -35,23 +35,23 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.11.0-next.
|
|
39
|
-
"@elliemae/ds-form-checkbox": "3.11.0-next.
|
|
40
|
-
"@elliemae/ds-grid": "3.11.0-next.
|
|
41
|
-
"@elliemae/ds-icons": "3.11.0-next.
|
|
42
|
-
"@elliemae/ds-menu-items": "3.11.0-next.
|
|
43
|
-
"@elliemae/ds-pills": "3.11.0-next.
|
|
44
|
-
"@elliemae/ds-popperjs": "3.11.0-next.
|
|
45
|
-
"@elliemae/ds-system": "3.11.0-next.
|
|
46
|
-
"@elliemae/ds-truncated-tooltip-text": "3.11.0-next.
|
|
47
|
-
"@elliemae/ds-utilities": "3.11.0-next.
|
|
38
|
+
"@elliemae/ds-button": "3.11.0-next.8",
|
|
39
|
+
"@elliemae/ds-form-checkbox": "3.11.0-next.8",
|
|
40
|
+
"@elliemae/ds-grid": "3.11.0-next.8",
|
|
41
|
+
"@elliemae/ds-icons": "3.11.0-next.8",
|
|
42
|
+
"@elliemae/ds-menu-items": "3.11.0-next.8",
|
|
43
|
+
"@elliemae/ds-pills": "3.11.0-next.8",
|
|
44
|
+
"@elliemae/ds-popperjs": "3.11.0-next.8",
|
|
45
|
+
"@elliemae/ds-system": "3.11.0-next.8",
|
|
46
|
+
"@elliemae/ds-truncated-tooltip-text": "3.11.0-next.8",
|
|
47
|
+
"@elliemae/ds-utilities": "3.11.0-next.8",
|
|
48
48
|
"react-virtual": "~2.10.4",
|
|
49
49
|
"uid": "~2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.11.0-next.
|
|
52
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.11.0-next.8",
|
|
53
53
|
"@elliemae/pui-theme": "~2.6.0",
|
|
54
|
-
"@testing-library/dom": "~8.
|
|
54
|
+
"@testing-library/dom": "~8.19.0",
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|
|
56
56
|
"@testing-library/react": "~12.1.3",
|
|
57
57
|
"@testing-library/user-event": "~13.5.0",
|
|
@@ -73,8 +73,11 @@
|
|
|
73
73
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
74
74
|
"test": "node ../../scripts/testing/test.mjs",
|
|
75
75
|
"lint": "node ../../scripts/lint.mjs",
|
|
76
|
+
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
76
77
|
"dts": "node ../../scripts/dts.mjs",
|
|
77
78
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
79
|
+
"dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
|
|
80
|
+
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
78
81
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
79
82
|
}
|
|
80
83
|
}
|