@elliemae/ds-form-layout-autocomplete 3.11.0-next.6 → 3.11.0-next.7
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/Autocomplete.js.map +1 -1
- package/dist/cjs/parts/A11yFocusedOption.js.map +1 -1
- package/dist/cjs/parts/container/Container.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/esm/Autocomplete.js.map +1 -1
- package/dist/esm/parts/A11yFocusedOption.js.map +1 -1
- package/dist/esm/parts/container/Container.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/package.json +10 -7
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Autocomplete.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext, defaultProps } from './AutocompleteCTX';\nimport { DSAutocompleteT, propTypes } from './react-desc-prop-types';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n const ctx = useAutocomplete(props);\n return (\n <AutocompleteContext.Provider value={ctx}>\n <Container />\n </AutocompleteContext.Provider>\n );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nDSAutocomplete.displayName = 'DSAutocomplete';\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAbN,0BAAuF;AACvF,6BAAgC;AAChC,uBAA0B;AAC1B,6BAAkD;AAClD,mCAA2C;AAE3C,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAA6B,OAAO,mCAAY;AAEzE,0DAA+B,kBAAkB,sCAAS;AAC1D,QAAM,UAAM,wCAAgB,KAAK;AACjC,SACE,4CAAC,2CAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IACnC,sDAAC,8BAAU;AAAA,GACb;AAEJ;AACA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,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 { styled } from '@elliemae/ds-system';\nimport AutocompleteContext from '../AutocompleteCTX';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport { DSAutocompleteT } from '../react-desc-prop-types';\nexport const isSeparator = (el: DSAutocompleteT.OptionTypes | undefined): el is DSAutocompleteT.ItemSeparatorOptions =>\n el?.type === 'separator';\n\nexport const StyledA11ySelectedValues = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n const {\n props: { options },\n focusOptionIdx,\n showPopover,\n } = useContext(AutocompleteContext);\n\n return useMemo(() => {\n const selectabledOptions = getSelectableOptions(options);\n const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n return (\n <StyledA11ySelectedValues aria-live=\"polite\">\n {!isSeparator(focusOption) &&\n showPopover &&\n focusOption &&\n `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}\n `}\n </StyledA11ySelectedValues>\n );\n }, [options, showPopover, focusOptionIdx]);\n};\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;AD4BjB;AA5BN,mBAA2C;AAC3C,uBAAuB;AACvB,6BAAgC;AAChC,wBAAqC;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,aAAO,sBAAQ,MAAM;AACnB,UAAM,yBAAqB,wCAAqB,OAAO;AACvD,UAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,YAAY,MAAM,KAAK,OAAO,SAAS,cAAc;AACnG,UAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,WACE,4CAAC;AAAA,MAAyB,aAAU;AAAA,MACjC,WAAC,YAAY,WAAW,KACvB,eACA,eACA,UAAU,YAAY,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAAA;AAAA,KAEjG;AAAA,EAEJ,GAAG,CAAC,SAAS,aAAa,cAAc,CAAC;AAC3C;",
|
|
6
6
|
"names": ["AutocompleteContext"]
|
|
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, useMemo, useEffect, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { MenuList } from '../menu-list';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n showPopover,\n setReferenceElement,\n setShowPopover,\n focusOptionIdx,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n useEffect(() => {\n const closePopper = () => {\n setShowPopover(false);\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, [setShowPopover]);\n\n const handleCloseMenu = useCallback(() => {\n setShowPopover(false);\n }, [setShowPopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const childrenWithProps = React.isValidElement(input)\n ? React.cloneElement(input, { 'aria-activedescendant': focusOptionIdx })\n : input;\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n\n return (\n <>\n <A11yFocusedOption />\n\n <StyledContainer\n id={id}\n ref={setReferenceElement}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-controls=\"autocomplete-listbox\"\n aria-expanded={showPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {childrenWithProps}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement}\n showPopover={showPopover}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal\n withoutArrow\n withoutAnimation\n zIndex={10}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n )}\n </StyledContainer>\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;AD6CnB;AA5CJ,mBAAmE;AACnE,yBAA2B;AAC3B,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AACvC,+BAAkC;AAC3B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO,EAAE,IAAI,0BAA0B,UAAU,QAAQ,yBAAyB;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,8BAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,qBAAe,KAAK;AAAA,IACtB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAkB,0BAAY,MAAM;AACxC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,aAAAC,QAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,oBAAoB,aAAAA,QAAM,eAAe,KAAK,IAChD,aAAAA,QAAM,aAAa,OAAO,EAAE,yBAAyB,eAAe,CAAC,IACrE;AAEJ,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,SACE;AAAA,IACE;AAAA,kDAAC,8CAAkB;AAAA,MAEnB,6CAAC;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,qBAAkB;AAAA,QAClB,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAa,sDAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC,4CAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,sDAAC;AAAA,cAAoB,UAAU;AAAA,cAC7B,sDAAC,6BAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext", "React"]
|
|
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 { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { useItemRenderer } from './useItemRenderer';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options, id },\n referenceElement,\n inputRef,\n listRef,\n showPopover,\n virtualListHelpers: { totalSize },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n return (\n <StyledListWrapper\n tabIndex={-1}\n onMouseDown={(e) => e.preventDefault()}\n minWidth={referenceElement?.offsetWidth}\n id={idList}\n role=\"listbox\"\n >\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} ref={listRef}>\n <StyledList\n tabIndex={-1}\n aria-expanded={showPopover}\n onFocus={handleOnFocus}\n data-testid={AutocompleteDataTestid.LIST}\n style={{ height: totalSize, margin: '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\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;ADkCb;AAlCV,mBAAwD;AACxD,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAGzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AAErC,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,SACE,4CAAC;AAAA,IACC,UAAU;AAAA,IACV,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC,UAAU,kBAAkB;AAAA,IAC5B,IAAI;AAAA,IACJ,MAAK;AAAA,IAEJ,kBAAQ,SAAS,KAChB,4CAAC;AAAA,MAAyB,UAAU;AAAA,MAAI,KAAK;AAAA,MAC3C,sDAAC;AAAA,QACC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAE7C;AAAA,OACH;AAAA,KACF;AAAA,GAEJ;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext"]
|
|
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 react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-menu-items';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { DSAutocompleteT } from '../../react-desc-prop-types';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { options, onSelect },\n inputRef,\n setShowPopover,\n focusOptionIdx,\n virtualListHelpers,\n } = useContext(AutocompleteContext);\n\n const handleClick = useCallback(\n (option: DSAutocompleteT.ItemOption, e: React.ChangeEvent<HTMLInputElement>) => {\n onSelect(option.label, e);\n setShowPopover(false);\n e.stopPropagation();\n e.preventDefault();\n },\n [onSelect, setShowPopover],\n );\n\n return useMemo(() => {\n if (virtualListHelpers) {\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = options[vItem.index];\n const generalProps = {\n wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n key: `${option.dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === 'section') {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === 'option') {\n return (\n <SingleMenuItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={AutocompleteDataTestid.OPTION}\n disabled={option.disabled}\n onClick={(e: React.ChangeEvent<HTMLInputElement>) => handleClick(option, e)}\n isActive={option.dsId === focusOptionIdx}\n />\n );\n }\n return <></>;\n });\n }\n return null;\n }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\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;ADoCN;AAnCjB,mBAAwD;AACxD,2BAAwC;AACxC,6BAAgC;AAChC,qCAAuC;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,kBAAc;AAAA,IAClB,CAAC,QAAoC,MAA2C;AAC9E,eAAS,OAAO,OAAO,CAAC;AACxB,qBAAe,KAAK;AACpB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM;AAC7B,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA,QAClB;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,4CAAC;AAAA,YAAQ,OAAO,OAAO;AAAA,YAAQ,GAAG;AAAA,WAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE,4CAAC;AAAA,YACE,GAAG;AAAA,YACJ,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd,YAAY,sDAAuB;AAAA,YACnC,UAAU,OAAO;AAAA,YACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ,CAAC;AAAA,YAC1E,UAAU,OAAO,SAAS;AAAA,WAC5B;AAAA,QAEJ;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
|
|
6
6
|
"names": ["AutocompleteContext"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Autocomplete.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext, defaultProps } from './AutocompleteCTX';\nimport { DSAutocompleteT, propTypes } from './react-desc-prop-types';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n const ctx = useAutocomplete(props);\n return (\n <AutocompleteContext.Provider value={ctx}>\n <Container />\n </AutocompleteContext.Provider>\n );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nDSAutocomplete.displayName = 'DSAutocomplete';\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACcjB;AAbN,SAAS,8BAA8B,UAAU,sCAAsC;AACvF,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB,oBAAoB;AAClD,SAA0B,iBAAiB;AAE3C,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AAEzE,iCAA+B,kBAAkB,SAAS;AAC1D,QAAM,MAAM,gBAAgB,KAAK;AACjC,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IACnC,8BAAC,aAAU;AAAA,GACb;AAEJ;AACA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,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 { styled } from '@elliemae/ds-system';\nimport AutocompleteContext from '../AutocompleteCTX';\nimport { getSelectableOptions } from '../utils/listHelper';\nimport { DSAutocompleteT } from '../react-desc-prop-types';\nexport const isSeparator = (el: DSAutocompleteT.OptionTypes | undefined): el is DSAutocompleteT.ItemSeparatorOptions =>\n el?.type === 'separator';\n\nexport const StyledA11ySelectedValues = styled.span`\n width: 1px;\n height: 1px;\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n`;\n\nexport const A11yFocusedOption: React.ComponentType = () => {\n const {\n props: { options },\n focusOptionIdx,\n showPopover,\n } = useContext(AutocompleteContext);\n\n return useMemo(() => {\n const selectabledOptions = getSelectableOptions(options);\n const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);\n const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);\n\n return (\n <StyledA11ySelectedValues aria-live=\"polite\">\n {!isSeparator(focusOption) &&\n showPopover &&\n focusOption &&\n `option ${focusOption.label} focused.${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}\n `}\n </StyledA11ySelectedValues>\n );\n }, [options, showPopover, focusOptionIdx]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,eAAe;AAC3C,SAAS,cAAc;AACvB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS;AAER,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,SAAO,QAAQ,MAAM;AACnB,UAAM,qBAAqB,qBAAqB,OAAO;AACvD,UAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,CAAC,YAAY,MAAM,KAAK,OAAO,SAAS,cAAc;AACnG,UAAM,2BAA2B,mBAAmB,UAAU,CAAC,WAAW,OAAO,SAAS,cAAc;AAExG,WACE,oBAAC;AAAA,MAAyB,aAAU;AAAA,MACjC,WAAC,YAAY,WAAW,KACvB,eACA,eACA,UAAU,YAAY,iBAAiB,2BAA2B,QAAQ,mBAAmB;AAAA;AAAA,KAEjG;AAAA,EAEJ,GAAG,CAAC,SAAS,aAAa,cAAc,CAAC;AAC3C;",
|
|
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, useMemo, useEffect, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { StyledContainer, StyledPopperWrapper } from './styled';\nimport { MenuList } from '../menu-list';\nimport { useKeyboardNavigation } from './useKeyboardNavigation';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n showPopover,\n setReferenceElement,\n setShowPopover,\n focusOptionIdx,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n useEffect(() => {\n const closePopper = () => {\n setShowPopover(false);\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, [setShowPopover]);\n\n const handleCloseMenu = useCallback(() => {\n setShowPopover(false);\n }, [setShowPopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const childrenWithProps = React.isValidElement(input)\n ? React.cloneElement(input, { 'aria-activedescendant': focusOptionIdx })\n : input;\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n\n return (\n <>\n <A11yFocusedOption />\n\n <StyledContainer\n id={id}\n ref={setReferenceElement}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-controls=\"autocomplete-listbox\"\n aria-expanded={showPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {childrenWithProps}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement}\n showPopover={showPopover}\n startPlacementPreference={startPlacementPreference}\n placementOrderPreference={placementOrderPreference}\n withoutPortal\n withoutArrow\n withoutAnimation\n zIndex={10}\n >\n <StyledPopperWrapper tabIndex={-1}>\n <MenuList />\n </StyledPopperWrapper>\n </DSPopperJS>\n )}\n </StyledContainer>\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6CnB,mBACE,KAEA,YAHF;AA5CJ,OAAOA,UAAS,aAAa,SAAS,WAAW,kBAAkB;AACnE,SAAS,kBAAkB;AAC3B,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAC3B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO,EAAE,IAAI,0BAA0B,UAAU,QAAQ,yBAAyB;AAAA,IAClF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,YAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,qBAAe,KAAK;AAAA,IACtB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAkB,YAAY,MAAM;AACxC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,EAAE,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQA,OAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,oBAAoBA,OAAM,eAAe,KAAK,IAChDA,OAAM,aAAa,OAAO,EAAE,yBAAyB,eAAe,CAAC,IACrE;AAEJ,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,SACE;AAAA,IACE;AAAA,0BAAC,qBAAkB;AAAA,MAEnB,qBAAC;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,qBAAkB;AAAA,QAClB,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAa,uBAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC,oBAAC;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,8BAAC;AAAA,cAAoB,UAAU;AAAA,cAC7B,8BAAC,YAAS;AAAA,aACZ;AAAA,WACF;AAAA;AAAA,OAEJ;AAAA;AAAA,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
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 { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { useItemRenderer } from './useItemRenderer';\nimport { A11yFocusedOption } from '../A11yFocusedOption';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: { options, id },\n referenceElement,\n inputRef,\n listRef,\n showPopover,\n virtualListHelpers: { totalSize },\n } = useContext(AutocompleteContext);\n\n const ItemRenderer = useItemRenderer();\n\n const handleOnFocus = useCallback(() => {\n inputRef.current?.focus();\n }, [inputRef]);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\n return (\n <StyledListWrapper\n tabIndex={-1}\n onMouseDown={(e) => e.preventDefault()}\n minWidth={referenceElement?.offsetWidth}\n id={idList}\n role=\"listbox\"\n >\n {options.length > 0 && (\n <StyledVirtualListWrapper tabIndex={-1} ref={listRef}>\n <StyledList\n tabIndex={-1}\n aria-expanded={showPopover}\n onFocus={handleOnFocus}\n data-testid={AutocompleteDataTestid.LIST}\n style={{ height: totalSize, margin: '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n )}\n </StyledListWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkCb;AAlCV,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAGzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AAErC,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AACjE,SACE,oBAAC;AAAA,IACC,UAAU;AAAA,IACV,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC,UAAU,kBAAkB;AAAA,IAC5B,IAAI;AAAA,IACJ,MAAK;AAAA,IAEJ,kBAAQ,SAAS,KAChB,oBAAC;AAAA,MAAyB,UAAU;AAAA,MAAI,KAAK;AAAA,MAC3C,8BAAC;AAAA,QACC,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,eAAa,uBAAuB;AAAA,QACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,QAE7C;AAAA,OACH;AAAA,KACF;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/menu-list/useItemRenderer.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { SingleMenuItem, Section } from '@elliemae/ds-menu-items';\nimport AutocompleteContext from '../../AutocompleteCTX';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids';\nimport { DSAutocompleteT } from '../../react-desc-prop-types';\n\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { options, onSelect },\n inputRef,\n setShowPopover,\n focusOptionIdx,\n virtualListHelpers,\n } = useContext(AutocompleteContext);\n\n const handleClick = useCallback(\n (option: DSAutocompleteT.ItemOption, e: React.ChangeEvent<HTMLInputElement>) => {\n onSelect(option.label, e);\n setShowPopover(false);\n e.stopPropagation();\n e.preventDefault();\n },\n [onSelect, setShowPopover],\n );\n\n return useMemo(() => {\n if (virtualListHelpers) {\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = options[vItem.index];\n const generalProps = {\n wrapperStyles: { position: 'absolute', top: vItem.start, left: 0, width: '100%' },\n key: `${option.dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === 'section') {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === 'option') {\n return (\n <SingleMenuItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={AutocompleteDataTestid.OPTION}\n disabled={option.disabled}\n onClick={(e: React.ChangeEvent<HTMLInputElement>) => handleClick(option, e)}\n isActive={option.dsId === focusOptionIdx}\n />\n );\n }\n return <></>;\n });\n }\n return null;\n }, [options, focusOptionIdx, inputRef, virtualListHelpers]);\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoCN,SAeF,UAfE;AAnCjB,SAAgB,SAAS,YAAY,mBAAmB;AACxD,SAAS,gBAAgB,eAAe;AACxC,OAAO,yBAAyB;AAChC,SAAS,8BAA8B;AAGhC,MAAM,kBAAkB,MAAiC;AAC9D,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,SAAS;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,cAAc;AAAA,IAClB,CAAC,QAAoC,MAA2C;AAC9E,eAAS,OAAO,OAAO,CAAC;AACxB,qBAAe,KAAK;AACpB,QAAE,gBAAgB;AAClB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,oBAAoB;AACtB,aAAO,mBAAmB,aAAa,IAAI,CAAC,UAAU;AACpD,cAAM,SAAS,QAAQ,MAAM;AAC7B,cAAM,eAAe;AAAA,UACnB,eAAe,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,UAChF,KAAK,GAAG,OAAO;AAAA,UACf,UAAU,MAAM;AAAA,QAClB;AACA,YAAI,OAAO,SAAS,WAAW;AAC7B,iBAAO,oBAAC;AAAA,YAAQ,OAAO,OAAO;AAAA,YAAQ,GAAG;AAAA,WAAc;AAAA,QACzD;AACA,YAAI,OAAO,SAAS,UAAU;AAC5B,iBACE,oBAAC;AAAA,YACE,GAAG;AAAA,YACJ,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd,YAAY,uBAAuB;AAAA,YACnC,UAAU,OAAO;AAAA,YACjB,SAAS,CAAC,MAA2C,YAAY,QAAQ,CAAC;AAAA,YAC1E,UAAU,OAAO,SAAS;AAAA,WAC5B;AAAA,QAEJ;AACA,eAAO,gCAAE;AAAA,MACX,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,gBAAgB,UAAU,kBAAkB,CAAC;AAC5D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.11.0-next.
|
|
3
|
+
"version": "3.11.0-next.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-menu-items": "3.11.0-next.
|
|
39
|
-
"@elliemae/ds-popperjs": "3.11.0-next.
|
|
40
|
-
"@elliemae/ds-system": "3.11.0-next.
|
|
41
|
-
"@elliemae/ds-utilities": "3.11.0-next.
|
|
38
|
+
"@elliemae/ds-menu-items": "3.11.0-next.7",
|
|
39
|
+
"@elliemae/ds-popperjs": "3.11.0-next.7",
|
|
40
|
+
"@elliemae/ds-system": "3.11.0-next.7",
|
|
41
|
+
"@elliemae/ds-utilities": "3.11.0-next.7",
|
|
42
42
|
"react-virtual": "~2.10.4",
|
|
43
43
|
"styled-components": "~5.3.5"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@elliemae/ds-form-input-text": "3.11.0-next.
|
|
46
|
+
"@elliemae/ds-form-input-text": "3.11.0-next.7",
|
|
47
47
|
"@elliemae/pui-theme": "~2.6.0",
|
|
48
|
-
"@testing-library/dom": "~8.
|
|
48
|
+
"@testing-library/dom": "~8.19.0",
|
|
49
49
|
"@testing-library/jest-dom": "~5.16.4",
|
|
50
50
|
"@testing-library/react": "~12.1.3",
|
|
51
51
|
"@testing-library/user-event": "~13.5.0",
|
|
@@ -67,8 +67,11 @@
|
|
|
67
67
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
68
68
|
"test": "node ../../scripts/testing/test.mjs",
|
|
69
69
|
"lint": "node ../../scripts/lint.mjs",
|
|
70
|
+
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
70
71
|
"dts": "node ../../scripts/dts.mjs",
|
|
71
72
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
73
|
+
"dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
|
|
74
|
+
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
72
75
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
73
76
|
}
|
|
74
77
|
}
|