@elliemae/ds-form-layout-autocomplete 3.51.0-next.1 → 3.51.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useAutocomplete.js +2 -6
- package/dist/cjs/config/useAutocomplete.js.map +3 -3
- package/dist/cjs/config/usePopoverLogic.js +8 -2
- package/dist/cjs/config/usePopoverLogic.js.map +2 -2
- package/dist/cjs/parts/container/Container.js.map +2 -2
- package/dist/cjs/utils/listHelper.js +1 -1
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/config/useAutocomplete.js +2 -6
- package/dist/esm/config/useAutocomplete.js.map +3 -3
- package/dist/esm/config/usePopoverLogic.js +8 -2
- package/dist/esm/config/usePopoverLogic.js.map +2 -2
- package/dist/esm/parts/container/Container.js.map +2 -2
- package/dist/esm/utils/listHelper.js +1 -1
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/types/config/useAutocomplete.d.ts +1 -1
- package/dist/types/config/usePopoverLogic.d.ts +1 -1
- package/package.json +9 -9
- package/dist/cjs/parts/A11yFocusedOption.js +0 -73
- package/dist/cjs/parts/A11yFocusedOption.js.map +0 -7
- package/dist/esm/parts/A11yFocusedOption.js +0 -43
- package/dist/esm/parts/A11yFocusedOption.js.map +0 -7
- package/dist/types/parts/A11yFocusedOption.d.ts +0 -5
|
@@ -32,12 +32,11 @@ __export(useAutocomplete_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(useAutocomplete_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_react =
|
|
35
|
+
var import_react = require("react");
|
|
36
36
|
var import_uid = require("uid");
|
|
37
37
|
var import_lodash = require("lodash");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
39
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
40
|
-
var import_listHelper = require("../utils/listHelper.js");
|
|
41
40
|
var import_DSAutocompleteDefinitions = require("../DSAutocompleteDefinitions.js");
|
|
42
41
|
var import_useRefs = require("./useRefs.js");
|
|
43
42
|
var import_useVirtualization = require("./useVirtualization.js");
|
|
@@ -79,10 +78,7 @@ const useAutocomplete = (props) => {
|
|
|
79
78
|
options: optionsPerSection
|
|
80
79
|
});
|
|
81
80
|
const autoCompleteId = (0, import_react.useMemo)(() => (0, import_uid.uid)(4), []);
|
|
82
|
-
const popoverManager = (0, import_usePopoverLogic.usePopoverLogic)(propsWithDefault);
|
|
83
|
-
import_react.default.useEffect(() => {
|
|
84
|
-
setCurrentOption((0, import_listHelper.getFirstOption)(options));
|
|
85
|
-
}, [options]);
|
|
81
|
+
const popoverManager = (0, import_usePopoverLogic.usePopoverLogic)(propsWithDefault, setCurrentOption);
|
|
86
82
|
const ctx = (0, import_react.useMemo)(
|
|
87
83
|
() => ({
|
|
88
84
|
props: { ...propsWithDefault },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useAutocomplete.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef } from 'react';\nimport { uid } from 'uid';\nimport { cloneDeep } from 'lodash';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\nimport { usePopoverLogic } from './usePopoverLogic.js';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n ReturnType<typeof useVirtualization> &\n ReturnType<typeof usePopoverLogic> & {\n props: DSAutocompleteT.InternalProps;\n referenceElement: HTMLElement | null;\n focusOptionIdx: string;\n autoCompleteId: string;\n optionsPerSection: DSAutocompleteT.InternalProps['options'];\n setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n };\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): AutocompleteContextT => {\n const defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n\n const { options } = propsWithDefault;\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n const references = useRefs();\n\n const clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n // we need to group the options by sections to render them in the correct HTML sementic order\n const optionsPerSection = useMemo(() => {\n const result: DSAutocompleteT.OptionTypes[] = [];\n let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n clonedOptions.forEach((item) => {\n if (item.type === 'section') {\n // Start a new section\n currentSection = {\n dsId: item.dsId,\n type: item.type,\n label: item.label,\n options: [],\n };\n result.push(currentSection);\n } else if (item.type === 'option' && currentSection) {\n // Add option to the current section's options array\n currentSection.options.push(item);\n } else if (item.type === 'option') {\n // If we encounter an option without a section, push it to the result array\n result.push(item);\n }\n });\n return result;\n }, [clonedOptions]);\n\n const virtualizationManager = useVirtualization({\n references,\n options: optionsPerSection,\n });\n\n const autoCompleteId = useMemo(() => uid(4), []);\n const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefault },\n referenceElement,\n focusOptionIdx,\n setCurrentOption,\n setReferenceElement,\n autoCompleteId,\n optionsPerSection,\n ...references,\n ...popoverManager,\n ...virtualizationManager,\n }),\n [\n propsWithDefault,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n popoverManager,\n references,\n virtualizationManager,\n optionsPerSection,\n ],\n );\n\n return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA0C;AAC1C,iBAAoB;AACpB,oBAA0B;AAC1B,8BAA6E;AAE7E,mCAAwC;AACxC,uCAAmC;AACnC,qBAAwB;AACxB,+BAAkC;AAClC,6BAAgC;AAczB,MAAM,kBAAkB,CAAC,UAAuD;AACrF,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,cAAU,qBAAO,IAAI;AAAA,EACvB;AACA,QAAM,uBAAmB,sDAA6B,OAAO,wBAAwB;AACrF,8DAA+B,kBAAkB,wCAAW,mDAAkB;AAE9E,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,QAAI,uBAAiB,EAAE;AAE9D,QAAM,iBAAa,wBAAQ;AAE3B,QAAM,oBAAgB,sBAAQ,UAAM,yBAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,UAAM,SAAwC,CAAC;AAC/C,QAAI,iBAA4D;AAEhE,kBAAc,QAAQ,CAAC,SAAS;AAC9B,UAAI,KAAK,SAAS,WAAW;AAE3B,yBAAiB;AAAA,UACf,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,SAAS,CAAC;AAAA,QACZ;AACA,eAAO,KAAK,cAAc;AAAA,MAC5B,WAAW,KAAK,SAAS,YAAY,gBAAgB;AAEnD,uBAAe,QAAQ,KAAK,IAAI;AAAA,MAClC,WAAW,KAAK,SAAS,UAAU;AAEjC,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,4BAAwB,4CAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,qBAAiB,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,qBAAiB,wCAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(usePopoverLogic_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(usePopoverLogic_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
const usePopoverLogic = (propsWithDefault) => {
|
|
36
|
+
const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
|
|
37
37
|
const { options, filter } = propsWithDefault;
|
|
38
38
|
const [forceClosePopover, setForceClosePopover] = (0, import_react.useState)(false);
|
|
39
39
|
const [userTypedSomething, setUserTypedSomething] = (0, import_react.useState)(false);
|
|
@@ -90,12 +90,18 @@ const usePopoverLogic = (propsWithDefault) => {
|
|
|
90
90
|
(0, import_react.useEffect)(() => {
|
|
91
91
|
const closePopper = () => {
|
|
92
92
|
setForceClosePopover(true);
|
|
93
|
+
setCurrentOption("");
|
|
93
94
|
};
|
|
94
95
|
window.addEventListener("blur", closePopper);
|
|
95
96
|
return () => {
|
|
96
97
|
window.removeEventListener("blur", closePopper);
|
|
97
98
|
};
|
|
98
|
-
}, []);
|
|
99
|
+
}, [setCurrentOption]);
|
|
100
|
+
(0, import_react.useEffect)(() => {
|
|
101
|
+
if (!isShowingPopover) {
|
|
102
|
+
setCurrentOption("");
|
|
103
|
+
}
|
|
104
|
+
}, [isShowingPopover, setCurrentOption]);
|
|
99
105
|
return import_react.default.useMemo(
|
|
100
106
|
() => ({
|
|
101
107
|
isShowingPopover,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/usePopoverLogic.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (propsWithDefault: DSAutocompleteT.InternalProps) => {\n const { options, filter } = propsWithDefault;\n\n const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n const isShowingPopover =\n !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n popoverHasAnythingToShow && // nothing to show --> hide popover\n !userSelectedAndDidNotType && // user just selected an option --> hide popover\n (userTypedSomething || // user typed something --> show popover\n userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n setUserTypedSomething(true);\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n } else {\n setUserTypedSomething(false);\n }\n },\n [setUserTypedSomething],\n );\n const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (isShowingPopover && (key === 'ArrowUp' || key === 'ArrowDown')) {\n setUserIsNavigatingWithArrows(true);\n } else {\n setUserIsNavigatingWithArrows(false);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (key === 'Enter' && isShowingPopover) {\n setUserJustSelectedAnOption(true);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n trackUserTyping(e);\n trackUserNavigatingWithArrows(e);\n trackUserSelectingAnOption(e);\n },\n [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n );\n\n // when the webpage is blurred, we want to close the popover\n // should be fixing iframes interactions?\n useEffect(() => {\n const closePopper = () => {\n setForceClosePopover(true);\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, []);\n\n return React.useMemo(\n () => ({\n isShowingPopover,\n forceClosePopover,\n setForceClosePopover,\n userTypedSomething,\n setUserTypedSomething,\n setUserJustSelectedAnOption,\n userIsNavigatingWithArrows,\n setUserIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n }),\n [\n isShowingPopover,\n forceClosePopover,\n userTypedSomething,\n userIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAgBpC,MAAM,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (\n propsWithDefault: DSAutocompleteT.InternalProps,\n setCurrentOption: React.Dispatch<React.SetStateAction<string>>,\n) => {\n const { options, filter } = propsWithDefault;\n\n const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n const isShowingPopover =\n !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n popoverHasAnythingToShow && // nothing to show --> hide popover\n !userSelectedAndDidNotType && // user just selected an option --> hide popover\n (userTypedSomething || // user typed something --> show popover\n userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n setUserTypedSomething(true);\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n } else {\n setUserTypedSomething(false);\n }\n },\n [setUserTypedSomething],\n );\n const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (isShowingPopover && (key === 'ArrowUp' || key === 'ArrowDown')) {\n setUserIsNavigatingWithArrows(true);\n } else {\n setUserIsNavigatingWithArrows(false);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (key === 'Enter' && isShowingPopover) {\n setUserJustSelectedAnOption(true);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n trackUserTyping(e);\n trackUserNavigatingWithArrows(e);\n trackUserSelectingAnOption(e);\n },\n [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n );\n\n // when the webpage is blurred, we want to close the popover\n // should be fixing iframes interactions?\n useEffect(() => {\n const closePopper = () => {\n setForceClosePopover(true);\n setCurrentOption('');\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, [setCurrentOption]);\n\n useEffect(() => {\n if (!isShowingPopover) {\n setCurrentOption('');\n }\n }, [isShowingPopover, setCurrentOption]);\n\n return React.useMemo(\n () => ({\n isShowingPopover,\n forceClosePopover,\n setForceClosePopover,\n userTypedSomething,\n setUserTypedSomething,\n setUserJustSelectedAnOption,\n userIsNavigatingWithArrows,\n setUserIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n }),\n [\n isShowingPopover,\n forceClosePopover,\n userTypedSomething,\n userIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAgBpC,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,QAAI,uBAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,QAAI,uBAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAC/D,QAAM,2BAA2B,QAAQ,SAAS,KAAK,OAAO,SAAS;AAEvE,QAAM,mBACJ,CAAC;AAAA,EACD;AAAA,EACA,CAAC;AAAA,GACA;AAAA,EACC;AAEJ,QAAM,kBAAgE,aAAAA,QAAM;AAAA,IAC1E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,QAAQ,eAAe,QAAQ,UAAU;AACtE,8BAAsB,IAAI;AAC1B,6BAAqB,KAAK;AAC1B,oCAA4B,KAAK;AAAA,MACnC,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AACA,QAAM,gCAA8E,aAAAA,QAAM;AAAA,IACxF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,qBAAqB,QAAQ,aAAa,QAAQ,cAAc;AAClE,sCAA8B,IAAI;AAAA,MACpC,OAAO;AACL,sCAA8B,KAAK;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,6BAA2E,aAAAA,QAAM;AAAA,IACrF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,WAAW,kBAAkB;AACvC,oCAA4B,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,kCAAgF,aAAAA,QAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AAIA,8BAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,2BAAqB,IAAI;AACzB,uBAAiB,EAAE;AAAA,IACrB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AACrB,uBAAiB,EAAE;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,kBAAkB,gBAAgB,CAAC;AAEvC,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/*
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDnB;AApDJ,mBAA+C;AAC/C,yBAA2B;AAE3B,gCAA4B;AAC5B,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n {/* Fix for PUI-11627 */}\n {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n // aria-owns={`menu-list-${autoCompleteId}`}\n data-testid={AutocompleteDataTestid.CONTAINER}\n {...globalsAttrs}\n {...xStyledProps}\n >\n {input ||\n (renderInput &&\n renderInput({\n value: filter,\n role: 'combobox',\n 'aria-expanded': isShowingPopover,\n 'aria-controls': `menu-list-${autoCompleteId}`,\n 'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n 'aria-autocomplete': 'list',\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n ...inputProps,\n })) || (\n <DSInputText\n onValueChange={onValueChange}\n value={filter}\n role=\"combobox\"\n aria-expanded={isShowingPopover}\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n aria-autocomplete=\"list\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...inputProps}\n />\n )}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement as HTMLElement}\n showPopover={isShowingPopover}\n startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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;ADsDnB;AApDJ,mBAA+C;AAC/C,yBAA2B;AAE3B,gCAA4B;AAC5B,8BAA2D;AAC3D,6BAAgC;AAChC,oBAAqD;AACrD,uBAAyB;AACzB,mCAAsC;AACtC,qCAAuC;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,sBAAkB,0BAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,QAAI,gDAAuB,SAAS;AAC1E,QAAM,mBAAe,4CAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAc,aAAAC,QAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,+BAA2B,0BAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,sDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
|
|
6
6
|
"names": ["AutocompleteContext", "React"]
|
|
7
7
|
}
|
|
@@ -42,7 +42,7 @@ const getOptions = (options) => options ? options.filter((option) => option.type
|
|
|
42
42
|
const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
|
|
43
43
|
const isSelectedValueMultiple = (value) => Array.isArray(value);
|
|
44
44
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
45
|
-
for (let i = (from + step + list.length) % list.length; i !== from && from
|
|
45
|
+
for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
|
|
46
46
|
if (criteria(list[i])) return i;
|
|
47
47
|
}
|
|
48
48
|
return from;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n list: DSAutocompleteT.OptionTypes[],\n from: number,\n criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,
|
|
4
|
+
"sourcesContent": ["import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n list: DSAutocompleteT.OptionTypes[],\n from: number,\n criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from >= -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type)) {\n return options[i].dsId;\n }\n return '';\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { useMemo, useState, useRef } from "react";
|
|
3
3
|
import { uid } from "uid";
|
|
4
4
|
import { cloneDeep } from "lodash";
|
|
5
5
|
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { propTypes, defaultProps } from "../react-desc-prop-types.js";
|
|
7
|
-
import { getFirstOption } from "../utils/listHelper.js";
|
|
8
7
|
import { DSAutocompleteName } from "../DSAutocompleteDefinitions.js";
|
|
9
8
|
import { useRefs } from "./useRefs.js";
|
|
10
9
|
import { useVirtualization } from "./useVirtualization.js";
|
|
@@ -46,10 +45,7 @@ const useAutocomplete = (props) => {
|
|
|
46
45
|
options: optionsPerSection
|
|
47
46
|
});
|
|
48
47
|
const autoCompleteId = useMemo(() => uid(4), []);
|
|
49
|
-
const popoverManager = usePopoverLogic(propsWithDefault);
|
|
50
|
-
React2.useEffect(() => {
|
|
51
|
-
setCurrentOption(getFirstOption(options));
|
|
52
|
-
}, [options]);
|
|
48
|
+
const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);
|
|
53
49
|
const ctx = useMemo(
|
|
54
50
|
() => ({
|
|
55
51
|
props: { ...propsWithDefault },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAutocomplete.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState, useRef } from 'react';\nimport { uid } from 'uid';\nimport { cloneDeep } from 'lodash';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\nimport { propTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { DSAutocompleteName } from '../DSAutocompleteDefinitions.js';\nimport { useRefs } from './useRefs.js';\nimport { useVirtualization } from './useVirtualization.js';\nimport { usePopoverLogic } from './usePopoverLogic.js';\n\nexport type AutocompleteContextT = ReturnType<typeof useRefs> &\n ReturnType<typeof useVirtualization> &\n ReturnType<typeof usePopoverLogic> & {\n props: DSAutocompleteT.InternalProps;\n referenceElement: HTMLElement | null;\n focusOptionIdx: string;\n autoCompleteId: string;\n optionsPerSection: DSAutocompleteT.InternalProps['options'];\n setCurrentOption: React.Dispatch<React.SetStateAction<string>>;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n };\n\nexport const useAutocomplete = (props: DSAutocompleteT.Props): AutocompleteContextT => {\n const defaultPropsWithInnerRef = {\n ...defaultProps,\n innerRef: useRef(null),\n };\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSAutocompleteName);\n\n const { options } = propsWithDefault;\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const [focusOptionIdx, setCurrentOption] = useState<string>('');\n\n const references = useRefs();\n\n const clonedOptions = useMemo(() => cloneDeep(options), [options]);\n\n // we need to group the options by sections to render them in the correct HTML sementic order\n const optionsPerSection = useMemo(() => {\n const result: DSAutocompleteT.OptionTypes[] = [];\n let currentSection: DSAutocompleteT.ItemSectionOptions | null = null;\n\n clonedOptions.forEach((item) => {\n if (item.type === 'section') {\n // Start a new section\n currentSection = {\n dsId: item.dsId,\n type: item.type,\n label: item.label,\n options: [],\n };\n result.push(currentSection);\n } else if (item.type === 'option' && currentSection) {\n // Add option to the current section's options array\n currentSection.options.push(item);\n } else if (item.type === 'option') {\n // If we encounter an option without a section, push it to the result array\n result.push(item);\n }\n });\n return result;\n }, [clonedOptions]);\n\n const virtualizationManager = useVirtualization({\n references,\n options: optionsPerSection,\n });\n\n const autoCompleteId = useMemo(() => uid(4), []);\n const popoverManager = usePopoverLogic(propsWithDefault, setCurrentOption);\n\n const ctx = useMemo(\n () => ({\n props: { ...propsWithDefault },\n referenceElement,\n focusOptionIdx,\n setCurrentOption,\n setReferenceElement,\n autoCompleteId,\n optionsPerSection,\n ...references,\n ...popoverManager,\n ...virtualizationManager,\n }),\n [\n propsWithDefault,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n popoverManager,\n references,\n virtualizationManager,\n optionsPerSection,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AACpB,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B,sCAAsC;AAE7E,SAAS,WAAW,oBAAoB;AACxC,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAczB,MAAM,kBAAkB,CAAC,UAAuD;AACrF,QAAM,2BAA2B;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,OAAO,IAAI;AAAA,EACvB;AACA,QAAM,mBAAmB,6BAA6B,OAAO,wBAAwB;AACrF,iCAA+B,kBAAkB,WAAW,kBAAkB;AAE9E,QAAM,EAAE,QAAQ,IAAI;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAA6B,IAAI;AACjF,QAAM,CAAC,gBAAgB,gBAAgB,IAAI,SAAiB,EAAE;AAE9D,QAAM,aAAa,QAAQ;AAE3B,QAAM,gBAAgB,QAAQ,MAAM,UAAU,OAAO,GAAG,CAAC,OAAO,CAAC;AAGjE,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,SAAwC,CAAC;AAC/C,QAAI,iBAA4D;AAEhE,kBAAc,QAAQ,CAAC,SAAS;AAC9B,UAAI,KAAK,SAAS,WAAW;AAE3B,yBAAiB;AAAA,UACf,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,SAAS,CAAC;AAAA,QACZ;AACA,eAAO,KAAK,cAAc;AAAA,MAC5B,WAAW,KAAK,SAAS,YAAY,gBAAgB;AAEnD,uBAAe,QAAQ,KAAK,IAAI;AAAA,MAClC,WAAW,KAAK,SAAS,UAAU;AAEjC,eAAO,KAAK,IAAI;AAAA,MAClB;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,wBAAwB,kBAAkB;AAAA,IAC9C;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,QAAM,iBAAiB,gBAAgB,kBAAkB,gBAAgB;AAEzE,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,iBAAiB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { useState, useEffect } from "react";
|
|
3
|
-
const usePopoverLogic = (propsWithDefault) => {
|
|
3
|
+
const usePopoverLogic = (propsWithDefault, setCurrentOption) => {
|
|
4
4
|
const { options, filter } = propsWithDefault;
|
|
5
5
|
const [forceClosePopover, setForceClosePopover] = useState(false);
|
|
6
6
|
const [userTypedSomething, setUserTypedSomething] = useState(false);
|
|
@@ -57,12 +57,18 @@ const usePopoverLogic = (propsWithDefault) => {
|
|
|
57
57
|
useEffect(() => {
|
|
58
58
|
const closePopper = () => {
|
|
59
59
|
setForceClosePopover(true);
|
|
60
|
+
setCurrentOption("");
|
|
60
61
|
};
|
|
61
62
|
window.addEventListener("blur", closePopper);
|
|
62
63
|
return () => {
|
|
63
64
|
window.removeEventListener("blur", closePopper);
|
|
64
65
|
};
|
|
65
|
-
}, []);
|
|
66
|
+
}, [setCurrentOption]);
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
if (!isShowingPopover) {
|
|
69
|
+
setCurrentOption("");
|
|
70
|
+
}
|
|
71
|
+
}, [isShowingPopover, setCurrentOption]);
|
|
66
72
|
return React2.useMemo(
|
|
67
73
|
() => ({
|
|
68
74
|
isShowingPopover,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePopoverLogic.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (propsWithDefault: DSAutocompleteT.InternalProps) => {\n const { options, filter } = propsWithDefault;\n\n const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n const isShowingPopover =\n !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n popoverHasAnythingToShow && // nothing to show --> hide popover\n !userSelectedAndDidNotType && // user just selected an option --> hide popover\n (userTypedSomething || // user typed something --> show popover\n userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n setUserTypedSomething(true);\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n } else {\n setUserTypedSomething(false);\n }\n },\n [setUserTypedSomething],\n );\n const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (isShowingPopover && (key === 'ArrowUp' || key === 'ArrowDown')) {\n setUserIsNavigatingWithArrows(true);\n } else {\n setUserIsNavigatingWithArrows(false);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (key === 'Enter' && isShowingPopover) {\n setUserJustSelectedAnOption(true);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n trackUserTyping(e);\n trackUserNavigatingWithArrows(e);\n trackUserSelectingAnOption(e);\n },\n [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n );\n\n // when the webpage is blurred, we want to close the popover\n // should be fixing iframes interactions?\n useEffect(() => {\n const closePopper = () => {\n setForceClosePopover(true);\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, []);\n\n return React.useMemo(\n () => ({\n isShowingPopover,\n forceClosePopover,\n setForceClosePopover,\n userTypedSomething,\n setUserTypedSomething,\n setUserJustSelectedAnOption,\n userIsNavigatingWithArrows,\n setUserIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n }),\n [\n isShowingPopover,\n forceClosePopover,\n userTypedSomething,\n userIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n ],\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,iBAAiB;AAgBpC,MAAM,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\n// we want to own all the popover logic in a single place\n// we handle global events via window.addEventListener/RemoveEventListener\n// the logic to show/hide the popover accounts for\n// show:\n// - the user just typed something (excluding special keys like arrows, enter, etc)\n// - any options are available\n// - the user did not just select an option\n// N.B. this must react to options.length changing in an async way\n// hide:\n// - the user just selected an option and did not type anything after\n// - no options are available\n// - the focus is not on the input\n// - the user pressed the escape key\nexport const usePopoverLogic = (\n propsWithDefault: DSAutocompleteT.InternalProps,\n setCurrentOption: React.Dispatch<React.SetStateAction<string>>,\n) => {\n const { options, filter } = propsWithDefault;\n\n const [forceClosePopover, setForceClosePopover] = useState<boolean>(false);\n\n const [userTypedSomething, setUserTypedSomething] = useState<boolean>(false);\n const [userIsNavigatingWithArrows, setUserIsNavigatingWithArrows] = useState<boolean>(false);\n const [userJustSelectedAnOption, setUserJustSelectedAnOption] = useState<boolean>(false);\n\n const userSelectedAndDidNotType = userJustSelectedAnOption && !userTypedSomething;\n const popoverHasAnythingToShow = options.length > 0 && filter.length > 0;\n\n const isShowingPopover =\n !forceClosePopover && // user pressed escape (or other interaction that forces close) --> hide popover\n popoverHasAnythingToShow && // nothing to show --> hide popover\n !userSelectedAndDidNotType && // user just selected an option --> hide popover\n (userTypedSomething || // user typed something --> show popover\n userIsNavigatingWithArrows); // user is navigating with arrows --> show popover\n\n const trackUserTyping: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n // [...e.key].length === 1 -> \"printable\" characters including https://mathiasbynens.be/notes/javascript-unicode\n if ([...e.key].length === 1 || key === 'Backspace' || key === 'Delete') {\n setUserTypedSomething(true);\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n } else {\n setUserTypedSomething(false);\n }\n },\n [setUserTypedSomething],\n );\n const trackUserNavigatingWithArrows: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (isShowingPopover && (key === 'ArrowUp' || key === 'ArrowDown')) {\n setUserIsNavigatingWithArrows(true);\n } else {\n setUserIsNavigatingWithArrows(false);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserSelectingAnOption: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n const { key } = e;\n if (key === 'Enter' && isShowingPopover) {\n setUserJustSelectedAnOption(true);\n }\n },\n [isShowingPopover],\n );\n\n const trackUserInteractingViaKeyboard: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n trackUserTyping(e);\n trackUserNavigatingWithArrows(e);\n trackUserSelectingAnOption(e);\n },\n [trackUserTyping, trackUserNavigatingWithArrows, trackUserSelectingAnOption],\n );\n\n // when the webpage is blurred, we want to close the popover\n // should be fixing iframes interactions?\n useEffect(() => {\n const closePopper = () => {\n setForceClosePopover(true);\n setCurrentOption('');\n };\n window.addEventListener('blur', closePopper);\n\n return () => {\n window.removeEventListener('blur', closePopper);\n };\n }, [setCurrentOption]);\n\n useEffect(() => {\n if (!isShowingPopover) {\n setCurrentOption('');\n }\n }, [isShowingPopover, setCurrentOption]);\n\n return React.useMemo(\n () => ({\n isShowingPopover,\n forceClosePopover,\n setForceClosePopover,\n userTypedSomething,\n setUserTypedSomething,\n setUserJustSelectedAnOption,\n userIsNavigatingWithArrows,\n setUserIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n }),\n [\n isShowingPopover,\n forceClosePopover,\n userTypedSomething,\n userIsNavigatingWithArrows,\n trackUserInteractingViaKeyboard,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,iBAAiB;AAgBpC,MAAM,kBAAkB,CAC7B,kBACA,qBACG;AACH,QAAM,EAAE,SAAS,OAAO,IAAI;AAE5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAkB,KAAK;AAEzE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAC3E,QAAM,CAAC,4BAA4B,6BAA6B,IAAI,SAAkB,KAAK;AAC3F,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAkB,KAAK;AAEvF,QAAM,4BAA4B,4BAA4B,CAAC;AAC/D,QAAM,2BAA2B,QAAQ,SAAS,KAAK,OAAO,SAAS;AAEvE,QAAM,mBACJ,CAAC;AAAA,EACD;AAAA,EACA,CAAC;AAAA,GACA;AAAA,EACC;AAEJ,QAAM,kBAAgEA,OAAM;AAAA,IAC1E,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAEhB,UAAI,CAAC,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,QAAQ,eAAe,QAAQ,UAAU;AACtE,8BAAsB,IAAI;AAC1B,6BAAqB,KAAK;AAC1B,oCAA4B,KAAK;AAAA,MACnC,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AACA,QAAM,gCAA8EA,OAAM;AAAA,IACxF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,qBAAqB,QAAQ,aAAa,QAAQ,cAAc;AAClE,sCAA8B,IAAI;AAAA,MACpC,OAAO;AACL,sCAA8B,KAAK;AAAA,MACrC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,6BAA2EA,OAAM;AAAA,IACrF,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,WAAW,kBAAkB;AACvC,oCAA4B,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,kCAAgFA,OAAM;AAAA,IAC1F,CAAC,MAAM;AACL,sBAAgB,CAAC;AACjB,oCAA8B,CAAC;AAC/B,iCAA2B,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB,+BAA+B,0BAA0B;AAAA,EAC7E;AAIA,YAAU,MAAM;AACd,UAAM,cAAc,MAAM;AACxB,2BAAqB,IAAI;AACzB,uBAAiB,EAAE;AAAA,IACrB;AACA,WAAO,iBAAiB,QAAQ,WAAW;AAE3C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,WAAW;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AACrB,uBAAiB,EAAE;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,kBAAkB,gBAAgB,CAAC;AAEvC,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/*
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsDnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\n\nexport const Container = (): JSX.Element => {\n const {\n props: {\n startPlacementPreference,\n onValueChange,\n inputProps,\n children,\n filter,\n placementOrderPreference,\n renderInput,\n ...restProps\n },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n focusOptionIdx,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onSelect, id, ...globalsAttrs } = useGetGlobalAttributes(restProps);\n const xStyledProps = useGetXstyledProps(restProps);\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = !onValueChange && !renderInput ? React.Children.only(children) : null;\n\n const onFocusPopoverStatusSync = useCallback(() => {\n setForceClosePopover(false);\n setUserJustSelectedAnOption(false);\n setUserTypedSomething(false);\n setUserIsNavigatingWithArrows(false);\n }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);\n\n return (\n <>\n {/* The purpose of this div is to always have the 'menu-list-{autoCompleteId}' present in the DOM */}\n {/* Fix for PUI-11627 */}\n {/* {isShowingPopover === false ? <StyledHiddenDiv id={`menu-list-${autoCompleteId}`} /> : null} */}\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n // aria-owns={`menu-list-${autoCompleteId}`}\n data-testid={AutocompleteDataTestid.CONTAINER}\n {...globalsAttrs}\n {...xStyledProps}\n >\n {input ||\n (renderInput &&\n renderInput({\n value: filter,\n role: 'combobox',\n 'aria-expanded': isShowingPopover,\n 'aria-controls': `menu-list-${autoCompleteId}`,\n 'aria-activedescendant': isShowingPopover ? focusOptionIdx : undefined,\n 'aria-autocomplete': 'list',\n autoComplete: 'off',\n autoCorrect: 'off',\n spellCheck: 'false',\n ...inputProps,\n })) || (\n <DSInputText\n onValueChange={onValueChange}\n value={filter}\n role=\"combobox\"\n aria-expanded={isShowingPopover}\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-activedescendant={isShowingPopover ? focusOptionIdx : undefined}\n aria-autocomplete=\"list\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...inputProps}\n />\n )}\n {filter && (\n <DSPopperJS\n customOffset={[0, 5]}\n closeContextMenu={handleCloseMenu}\n referenceElement={referenceElement as HTMLElement}\n showPopover={isShowingPopover}\n startPlacementPreference={startPlacementPreference as DSPopperJST.PopperPlacementsT}\n placementOrderPreference={placementOrderPreference as DSPopperJST.PopperPlacementsT[]}\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;ACsDnB,mBA6BQ,KAxBN,YALF;AApDJ,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,0BAA0B;AAC3D,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,2BAA2B;AACrD,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAEhC,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,kBAAkB,YAAY,MAAM;AACxC,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,oBAAoB,CAAC;AAEzB,QAAM,EAAE,UAAU,IAAI,GAAG,aAAa,IAAI,uBAAuB,SAAS;AAC1E,QAAM,eAAe,mBAAmB,SAAS;AACjD,QAAM,EAAE,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQ,CAAC,iBAAiB,CAAC,cAAcA,OAAM,SAAS,KAAK,QAAQ,IAAI;AAE/E,QAAM,2BAA2B,YAAY,MAAM;AACjD,yBAAqB,KAAK;AAC1B,gCAA4B,KAAK;AACjC,0BAAsB,KAAK;AAC3B,kCAA8B,KAAK;AAAA,EACrC,GAAG,CAAC,sBAAsB,+BAA+B,6BAA6B,qBAAqB,CAAC;AAE5G,SACE,gCAKE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MAET,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,iBACE,eACC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,iBAAiB,aAAa,cAAc;AAAA,UAC5C,yBAAyB,mBAAmB,iBAAiB;AAAA,UAC7D,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,GAAG;AAAA,QACL,CAAC,KACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,YACP,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,aAAa,cAAc;AAAA,YAC1C,yBAAuB,mBAAmB,iBAAiB;AAAA,YAC3D,qBAAkB;AAAA,YAClB,cAAa;AAAA,YACb,aAAY;AAAA,YACZ,YAAW;AAAA,YACV,GAAG;AAAA;AAAA,QACN;AAAA,QAEH,UACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB,kBAAkB;AAAA,YAClB;AAAA,YACA,aAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,kBAAgB;AAAA,YAChB,QAAQ;AAAA,YAER,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ const getOptions = (options) => options ? options.filter((option) => option.type
|
|
|
4
4
|
const isSelectedValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : !value;
|
|
5
5
|
const isSelectedValueMultiple = (value) => Array.isArray(value);
|
|
6
6
|
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
7
|
-
for (let i = (from + step + list.length) % list.length; i !== from && from
|
|
7
|
+
for (let i = (from + step + list.length) % list.length; i !== from && from >= -1; i = (i + step + list.length) % list.length) {
|
|
8
8
|
if (criteria(list[i])) return i;
|
|
9
9
|
}
|
|
10
10
|
return from;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n list: DSAutocompleteT.OptionTypes[],\n from: number,\n criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const getSelectableOptions = (\n options: Array<DSAutocompleteT.OptionTypes>,\n): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option' && !option.disabled) : [];\n\nexport const getOptions = (options: Array<DSAutocompleteT.OptionTypes>): Array<DSAutocompleteT.OptionTypes> =>\n options ? options.filter((option) => option.type === 'option') : [];\n\nexport const isSelectedValueEmpty = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => (Array.isArray(value) ? value.length === 0 : !value);\n\nexport const isSelectedValueMultiple = (\n value: DSAutocompleteT.OptionTypes | Array<DSAutocompleteT.OptionTypes>,\n): boolean => Array.isArray(value);\n\nexport const findInCircularList = (\n list: DSAutocompleteT.OptionTypes[],\n from: number,\n criteria: (item: DSAutocompleteT.OptionTypes) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from >= -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n};\n\nexport const getFirstOption = (options: DSAutocompleteT.OptionTypes[]) => {\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type)) {\n return options[i].dsId;\n }\n return '';\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,uBAAuB,CAClC,YAEA,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ,IAAI,CAAC;AAEjF,MAAM,aAAa,CAAC,YACzB,UAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,QAAQ,IAAI,CAAC;AAE7D,MAAM,uBAAuB,CAClC,UACa,MAAM,QAAQ,KAAK,IAAI,MAAM,WAAW,IAAI,CAAC;AAErD,MAAM,0BAA0B,CACrC,UACY,MAAM,QAAQ,KAAK;AAE1B,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,QAAQ,IACtB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK,CAAC,CAAC,EAAG,QAAO;AAAA,EAChC;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,YAA2C;AACxE,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,QAAQ,CAAC,EAAE,IAAI,GAAG;AACvD,aAAO,QAAQ,CAAC,EAAE;AAAA,IACpB;AACF,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DSAutocompleteT } from '../react-desc-prop-types.js';
|
|
3
|
-
export declare const usePopoverLogic: (propsWithDefault: DSAutocompleteT.InternalProps) => {
|
|
3
|
+
export declare const usePopoverLogic: (propsWithDefault: DSAutocompleteT.InternalProps, setCurrentOption: React.Dispatch<React.SetStateAction<string>>) => {
|
|
4
4
|
isShowingPopover: boolean;
|
|
5
5
|
forceClosePopover: boolean;
|
|
6
6
|
setForceClosePopover: React.Dispatch<React.SetStateAction<boolean>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-autocomplete",
|
|
3
|
-
"version": "3.51.0-next.
|
|
3
|
+
"version": "3.51.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form Layout - Autocomplete",
|
|
6
6
|
"files": [
|
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"styled-components": "~5.3.9",
|
|
41
41
|
"uid": "~2.0.1",
|
|
42
|
-
"@elliemae/ds-form-input-text": "3.51.0-next.
|
|
43
|
-
"@elliemae/ds-menu-items": "3.51.0-next.
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-system": "3.51.0-next.
|
|
42
|
+
"@elliemae/ds-form-input-text": "3.51.0-next.3",
|
|
43
|
+
"@elliemae/ds-menu-items": "3.51.0-next.3",
|
|
44
|
+
"@elliemae/ds-grid": "3.51.0-next.3",
|
|
45
|
+
"@elliemae/ds-popperjs": "3.51.0-next.3",
|
|
46
|
+
"@elliemae/ds-props-helpers": "3.51.0-next.3",
|
|
47
|
+
"@elliemae/ds-system": "3.51.0-next.3"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"jest": "~29.7.0",
|
|
53
53
|
"styled-components": "~5.3.9",
|
|
54
54
|
"styled-system": "^5.1.5",
|
|
55
|
-
"@elliemae/ds-form-input-text": "3.51.0-next.
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-next.
|
|
55
|
+
"@elliemae/ds-form-input-text": "3.51.0-next.3",
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-next.3"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@elliemae/pui-theme": "~2.10.0",
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var A11yFocusedOption_exports = {};
|
|
30
|
-
__export(A11yFocusedOption_exports, {
|
|
31
|
-
A11yFocusedOption: () => A11yFocusedOption,
|
|
32
|
-
StyledA11ySelectedValues: () => StyledA11ySelectedValues,
|
|
33
|
-
isSeparator: () => isSeparator
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(A11yFocusedOption_exports);
|
|
36
|
-
var React = __toESM(require("react"));
|
|
37
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var import_react = require("react");
|
|
39
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
-
var import_lodash = require("lodash");
|
|
41
|
-
var import_AutocompleteCTX = __toESM(require("../AutocompleteCTX.js"));
|
|
42
|
-
var import_listHelper = require("../utils/listHelper.js");
|
|
43
|
-
const isSeparator = (el) => el?.type === "separator";
|
|
44
|
-
const StyledA11ySelectedValues = import_ds_system.styled.span`
|
|
45
|
-
width: 1px;
|
|
46
|
-
height: 1px;
|
|
47
|
-
position: absolute;
|
|
48
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
49
|
-
`;
|
|
50
|
-
const A11yFocusedOption = () => {
|
|
51
|
-
const [status, setStatus] = (0, import_react.useState)("");
|
|
52
|
-
const {
|
|
53
|
-
props: { options, filter },
|
|
54
|
-
focusOptionIdx,
|
|
55
|
-
isShowingPopover,
|
|
56
|
-
userIsNavigatingWithArrows
|
|
57
|
-
} = (0, import_react.useContext)(import_AutocompleteCTX.default);
|
|
58
|
-
const msg = (0, import_react.useMemo)(() => {
|
|
59
|
-
const selectabledOptions = (0, import_listHelper.getSelectableOptions)(options);
|
|
60
|
-
const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);
|
|
61
|
-
const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
|
|
62
|
-
return !isSeparator(focusOption) && isShowingPopover && focusOption ? `${!userIsNavigatingWithArrows ? `${filter}.` : ""} Option ${focusOption.label} focused. ${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}.` : "";
|
|
63
|
-
}, [options, isShowingPopover, focusOptionIdx, filter, userIsNavigatingWithArrows]);
|
|
64
|
-
const debouncedStatusUpdate = (0, import_react.useMemo)(
|
|
65
|
-
() => (0, import_lodash.debounce)(setStatus, 900, { leading: userIsNavigatingWithArrows }),
|
|
66
|
-
[userIsNavigatingWithArrows]
|
|
67
|
-
);
|
|
68
|
-
(0, import_react.useEffect)(() => {
|
|
69
|
-
debouncedStatusUpdate(msg);
|
|
70
|
-
}, [msg, filter, debouncedStatusUpdate]);
|
|
71
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledA11ySelectedValues, { "aria-live": "polite", children: status });
|
|
72
|
-
};
|
|
73
|
-
//# sourceMappingURL=A11yFocusedOption.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/parts/A11yFocusedOption.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useEffect, useState, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { debounce } from 'lodash';\nimport AutocompleteContext from '../AutocompleteCTX.js';\nimport { getSelectableOptions } from '../utils/listHelper.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const isSeparator = (el: unknown): el is DSAutocompleteT.ItemSeparatorOptions =>\n (el as { type?: unknown })?.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 [status, setStatus] = useState('');\n const {\n props: { options, filter },\n focusOptionIdx,\n isShowingPopover,\n userIsNavigatingWithArrows,\n } = useContext(AutocompleteContext);\n\n const msg = 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 return !isSeparator(focusOption) && isShowingPopover && focusOption\n ? `${!userIsNavigatingWithArrows ? `${filter}.` : ''} Option ${focusOption.label} focused. ${\n focusSelectableOptionIdx + 1\n } of ${selectabledOptions.length}.`\n : '';\n }, [options, isShowingPopover, focusOptionIdx, filter, userIsNavigatingWithArrows]);\n\n const debouncedStatusUpdate = useMemo(\n () => debounce(setStatus, 900, { leading: userIsNavigatingWithArrows }),\n [userIsNavigatingWithArrows],\n );\n\n useEffect(() => {\n // If the 'filter' prop changes it means that the user is typing so we need\n // to call the debouncedStatusUpdate function again to restart the tracker\n debouncedStatusUpdate(msg);\n }, [msg, filter, debouncedStatusUpdate]);\n\n return <StyledA11ySelectedValues aria-live=\"polite\">{status}</StyledA11ySelectedValues>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDd;AAhDT,mBAAgE;AAChE,uBAAuB;AACvB,oBAAyB;AACzB,6BAAgC;AAChC,wBAAqC;AAG9B,MAAM,cAAc,CAAC,OACzB,IAA2B,SAAS;AAEhC,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,OAAO;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,UAAM,sBAAQ,MAAM;AACxB,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;AACxG,WAAO,CAAC,YAAY,WAAW,KAAK,oBAAoB,cACpD,GAAG,CAAC,6BAA6B,GAAG,MAAM,MAAM,EAAE,WAAW,YAAY,KAAK,aAC5E,2BAA2B,CAC7B,OAAO,mBAAmB,MAAM,MAChC;AAAA,EACN,GAAG,CAAC,SAAS,kBAAkB,gBAAgB,QAAQ,0BAA0B,CAAC;AAElF,QAAM,4BAAwB;AAAA,IAC5B,UAAM,wBAAS,WAAW,KAAK,EAAE,SAAS,2BAA2B,CAAC;AAAA,IACtE,CAAC,0BAA0B;AAAA,EAC7B;AAEA,8BAAU,MAAM;AAGd,0BAAsB,GAAG;AAAA,EAC3B,GAAG,CAAC,KAAK,QAAQ,qBAAqB,CAAC;AAEvC,SAAO,4CAAC,4BAAyB,aAAU,UAAU,kBAAO;AAC9D;",
|
|
6
|
-
"names": ["AutocompleteContext"]
|
|
7
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext, useEffect, useState, useMemo } from "react";
|
|
4
|
-
import { styled } from "@elliemae/ds-system";
|
|
5
|
-
import { debounce } from "lodash";
|
|
6
|
-
import AutocompleteContext from "../AutocompleteCTX.js";
|
|
7
|
-
import { getSelectableOptions } from "../utils/listHelper.js";
|
|
8
|
-
const isSeparator = (el) => el?.type === "separator";
|
|
9
|
-
const StyledA11ySelectedValues = styled.span`
|
|
10
|
-
width: 1px;
|
|
11
|
-
height: 1px;
|
|
12
|
-
position: absolute;
|
|
13
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
14
|
-
`;
|
|
15
|
-
const A11yFocusedOption = () => {
|
|
16
|
-
const [status, setStatus] = useState("");
|
|
17
|
-
const {
|
|
18
|
-
props: { options, filter },
|
|
19
|
-
focusOptionIdx,
|
|
20
|
-
isShowingPopover,
|
|
21
|
-
userIsNavigatingWithArrows
|
|
22
|
-
} = useContext(AutocompleteContext);
|
|
23
|
-
const msg = useMemo(() => {
|
|
24
|
-
const selectabledOptions = getSelectableOptions(options);
|
|
25
|
-
const focusOption = options.find((option) => !isSeparator(option) && option.dsId === focusOptionIdx);
|
|
26
|
-
const focusSelectableOptionIdx = selectabledOptions.findIndex((option) => option.dsId === focusOptionIdx);
|
|
27
|
-
return !isSeparator(focusOption) && isShowingPopover && focusOption ? `${!userIsNavigatingWithArrows ? `${filter}.` : ""} Option ${focusOption.label} focused. ${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}.` : "";
|
|
28
|
-
}, [options, isShowingPopover, focusOptionIdx, filter, userIsNavigatingWithArrows]);
|
|
29
|
-
const debouncedStatusUpdate = useMemo(
|
|
30
|
-
() => debounce(setStatus, 900, { leading: userIsNavigatingWithArrows }),
|
|
31
|
-
[userIsNavigatingWithArrows]
|
|
32
|
-
);
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
debouncedStatusUpdate(msg);
|
|
35
|
-
}, [msg, filter, debouncedStatusUpdate]);
|
|
36
|
-
return /* @__PURE__ */ jsx(StyledA11ySelectedValues, { "aria-live": "polite", children: status });
|
|
37
|
-
};
|
|
38
|
-
export {
|
|
39
|
-
A11yFocusedOption,
|
|
40
|
-
StyledA11ySelectedValues,
|
|
41
|
-
isSeparator
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=A11yFocusedOption.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/A11yFocusedOption.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useState, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { debounce } from 'lodash';\nimport AutocompleteContext from '../AutocompleteCTX.js';\nimport { getSelectableOptions } from '../utils/listHelper.js';\nimport type { DSAutocompleteT } from '../react-desc-prop-types.js';\n\nexport const isSeparator = (el: unknown): el is DSAutocompleteT.ItemSeparatorOptions =>\n (el as { type?: unknown })?.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 [status, setStatus] = useState('');\n const {\n props: { options, filter },\n focusOptionIdx,\n isShowingPopover,\n userIsNavigatingWithArrows,\n } = useContext(AutocompleteContext);\n\n const msg = 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 return !isSeparator(focusOption) && isShowingPopover && focusOption\n ? `${!userIsNavigatingWithArrows ? `${filter}.` : ''} Option ${focusOption.label} focused. ${\n focusSelectableOptionIdx + 1\n } of ${selectabledOptions.length}.`\n : '';\n }, [options, isShowingPopover, focusOptionIdx, filter, userIsNavigatingWithArrows]);\n\n const debouncedStatusUpdate = useMemo(\n () => debounce(setStatus, 900, { leading: userIsNavigatingWithArrows }),\n [userIsNavigatingWithArrows],\n );\n\n useEffect(() => {\n // If the 'filter' prop changes it means that the user is typing so we need\n // to call the debouncedStatusUpdate function again to restart the tracker\n debouncedStatusUpdate(msg);\n }, [msg, filter, debouncedStatusUpdate]);\n\n return <StyledA11ySelectedValues aria-live=\"polite\">{status}</StyledA11ySelectedValues>;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgDd;AAhDT,SAAgB,YAAY,WAAW,UAAU,eAAe;AAChE,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAG9B,MAAM,cAAc,CAAC,OACzB,IAA2B,SAAS;AAEhC,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAyC,MAAM;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,OAAO;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,mBAAmB;AAElC,QAAM,MAAM,QAAQ,MAAM;AACxB,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;AACxG,WAAO,CAAC,YAAY,WAAW,KAAK,oBAAoB,cACpD,GAAG,CAAC,6BAA6B,GAAG,MAAM,MAAM,EAAE,WAAW,YAAY,KAAK,aAC5E,2BAA2B,CAC7B,OAAO,mBAAmB,MAAM,MAChC;AAAA,EACN,GAAG,CAAC,SAAS,kBAAkB,gBAAgB,QAAQ,0BAA0B,CAAC;AAElF,QAAM,wBAAwB;AAAA,IAC5B,MAAM,SAAS,WAAW,KAAK,EAAE,SAAS,2BAA2B,CAAC;AAAA,IACtE,CAAC,0BAA0B;AAAA,EAC7B;AAEA,YAAU,MAAM;AAGd,0BAAsB,GAAG;AAAA,EAC3B,GAAG,CAAC,KAAK,QAAQ,qBAAqB,CAAC;AAEvC,SAAO,oBAAC,4BAAyB,aAAU,UAAU,kBAAO;AAC9D;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { DSAutocompleteT } from '../react-desc-prop-types.js';
|
|
3
|
-
export declare const isSeparator: (el: unknown) => el is DSAutocompleteT.ItemSeparatorOptions;
|
|
4
|
-
export declare const StyledA11ySelectedValues: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
5
|
-
export declare const A11yFocusedOption: React.ComponentType;
|