@elliemae/ds-form-layout-autocomplete 3.25.0-rc.0 → 3.26.0-next.2

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.
@@ -67,6 +67,7 @@ const Container = () => {
67
67
  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);
68
68
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
69
69
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yFocusedOption.A11yFocusedOption, {}),
70
+ isShowingPopover === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHiddenDiv, { id: `menu-list-${autoCompleteId}` }) : null,
70
71
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
71
72
  import_styled.StyledContainer,
72
73
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/container/Container.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\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';\nimport { A11yFocusedOption } from '../A11yFocusedOption.js';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\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 <A11yFocusedOption />\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n role=\"combobox\"\n aria-label=\"autocomplete\"\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-expanded={isShowingPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {input}\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;ADyCnB;AAxCJ,mBAAwD;AACxD,yBAA2B;AAE3B,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,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,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,aAAAC,QAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,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,4EACE;AAAA,gDAAC,8CAAkB;AAAA,IAEnB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,iBAAe,aAAa;AAAA,QAC5B,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledHiddenDiv, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { A11yFocusedOption } from '../A11yFocusedOption.js';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\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 <A11yFocusedOption />\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 role=\"combobox\"\n aria-label=\"autocomplete\"\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-expanded={isShowingPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {input}\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;ADyCnB;AAxCJ,mBAAwD;AACxD,yBAA2B;AAE3B,6BAAgC;AAChC,oBAAsE;AACtE,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,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,eAAe,QAAI,oDAAsB;AAEjD,QAAM,QAAQ,aAAAC,QAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,aAAS,sBAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,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,4EACE;AAAA,gDAAC,8CAAkB;AAAA,IAIlB,qBAAqB,QAAQ,4CAAC,iCAAgB,IAAI,aAAa,kBAAkB,IAAK;AAAA,IAEvF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,iBAAe,aAAa;AAAA,QAC5B,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,sDAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,sDAAC,qCAAoB,UAAU,IAC7B,sDAAC,6BAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
6
6
  "names": ["AutocompleteContext", "React"]
7
7
  }
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
29
29
  var styled_exports = {};
30
30
  __export(styled_exports, {
31
31
  StyledContainer: () => StyledContainer,
32
+ StyledHiddenDiv: () => StyledHiddenDiv,
32
33
  StyledPopperWrapper: () => StyledPopperWrapper
33
34
  });
34
35
  module.exports = __toCommonJS(styled_exports);
@@ -44,4 +45,7 @@ const StyledPopperWrapper = import_ds_system.styled.div`
44
45
  overflow: auto;
45
46
  position: relative;
46
47
  `;
48
+ const StyledHiddenDiv = import_ds_system.styled.div`
49
+ display: none;
50
+ `;
47
51
  //# sourceMappingURL=styled.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/container/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n width: 100%;\n height: 28px;\n position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n background: #fff;\n overflow: auto;\n position: relative;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n width: 100%;\n height: 28px;\n position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n background: #fff;\n overflow: auto;\n position: relative;\n`;\n\nexport const StyledHiddenDiv = styled.div`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2, { useCallback, useMemo, useContext } from "react";
4
4
  import { DSPopperJS } from "@elliemae/ds-popperjs";
5
5
  import AutocompleteContext from "../../AutocompleteCTX.js";
6
- import { StyledContainer, StyledPopperWrapper } from "./styled.js";
6
+ import { StyledContainer, StyledHiddenDiv, StyledPopperWrapper } from "./styled.js";
7
7
  import { MenuList } from "../menu-list/index.js";
8
8
  import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
9
9
  import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
@@ -34,6 +34,7 @@ const Container = () => {
34
34
  }, [setForceClosePopover, setUserIsNavigatingWithArrows, setUserJustSelectedAnOption, setUserTypedSomething]);
35
35
  return /* @__PURE__ */ jsxs(Fragment, { children: [
36
36
  /* @__PURE__ */ jsx(A11yFocusedOption, {}),
37
+ isShowingPopover === false ? /* @__PURE__ */ jsx(StyledHiddenDiv, { id: `menu-list-${autoCompleteId}` }) : null,
37
38
  /* @__PURE__ */ jsxs(
38
39
  StyledContainer,
39
40
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/Container.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\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';\nimport { A11yFocusedOption } from '../A11yFocusedOption.js';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\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 <A11yFocusedOption />\n\n <StyledContainer\n id={id}\n innerRef={setReferenceElement}\n role=\"combobox\"\n aria-label=\"autocomplete\"\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-expanded={isShowingPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {input}\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;ACyCnB,mBACE,KAEA,YAHF;AAxCJ,OAAOA,UAAS,aAAa,SAAS,kBAAkB;AACxD,SAAS,kBAAkB;AAE3B,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,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,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQA,OAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,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,iCACE;AAAA,wBAAC,qBAAkB;AAAA,IAEnB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,iBAAe,aAAa;AAAA,QAC5B,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,uBAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useCallback, useMemo, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { StyledContainer, StyledHiddenDiv, StyledPopperWrapper } from './styled.js';\nimport { MenuList } from '../menu-list/index.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport { A11yFocusedOption } from '../A11yFocusedOption.js';\nexport const Container = (): JSX.Element => {\n const {\n props: { id, startPlacementPreference, children, filter, placementOrderPreference },\n isShowingPopover,\n setReferenceElement,\n setUserJustSelectedAnOption,\n setUserTypedSomething,\n setUserIsNavigatingWithArrows,\n setForceClosePopover,\n autoCompleteId,\n referenceElement,\n } = useContext(AutocompleteContext);\n\n const handleCloseMenu = useCallback(() => {\n setForceClosePopover(true);\n }, [setForceClosePopover]);\n\n const { onInputKeyDown } = useKeyboardNavigation();\n\n const input = React.Children.only(children);\n\n const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);\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 <A11yFocusedOption />\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 role=\"combobox\"\n aria-label=\"autocomplete\"\n aria-controls={`menu-list-${autoCompleteId}`}\n aria-expanded={isShowingPopover}\n aria-haspopup=\"listbox\"\n aria-owns={idList}\n onKeyDown={onInputKeyDown}\n onFocus={onFocusPopoverStatusSync}\n data-testid={AutocompleteDataTestid.CONTAINER}\n >\n {input}\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;ACyCnB,mBACE,KAMA,YAPF;AAxCJ,OAAOA,UAAS,aAAa,SAAS,kBAAkB;AACxD,SAAS,kBAAkB;AAE3B,OAAO,yBAAyB;AAChC,SAAS,iBAAiB,iBAAiB,2BAA2B;AACtE,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,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,eAAe,IAAI,sBAAsB;AAEjD,QAAM,QAAQA,OAAM,SAAS,KAAK,QAAQ;AAE1C,QAAM,SAAS,QAAQ,MAAM,GAAG,KAAK,GAAG,QAAQ,aAAa,CAAC,EAAE,CAAC;AAEjE,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,iCACE;AAAA,wBAAC,qBAAkB;AAAA,IAIlB,qBAAqB,QAAQ,oBAAC,mBAAgB,IAAI,aAAa,kBAAkB,IAAK;AAAA,IAEvF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,iBAAe,aAAa;AAAA,QAC5B,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,uBAAuB;AAAA,QAEnC;AAAA;AAAA,UACA,UACC;AAAA,YAAC;AAAA;AAAA,cACC,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB,kBAAkB;AAAA,cAClB;AAAA,cACA,aAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,eAAa;AAAA,cACb,cAAY;AAAA,cACZ,kBAAgB;AAAA,cAChB,QAAQ;AAAA,cAER,8BAAC,uBAAoB,UAAU,IAC7B,8BAAC,YAAS,GACZ;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
@@ -10,8 +10,12 @@ const StyledPopperWrapper = styled.div`
10
10
  overflow: auto;
11
11
  position: relative;
12
12
  `;
13
+ const StyledHiddenDiv = styled.div`
14
+ display: none;
15
+ `;
13
16
  export {
14
17
  StyledContainer,
18
+ StyledHiddenDiv,
15
19
  StyledPopperWrapper
16
20
  };
17
21
  //# sourceMappingURL=styled.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/container/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n width: 100%;\n height: 28px;\n position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n background: #fff;\n overflow: auto;\n position: relative;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainer = styled.div`\n width: 100%;\n height: 28px;\n position: relative;\n`;\n\nexport const StyledPopperWrapper = styled.div`\n background: #fff;\n overflow: auto;\n position: relative;\n`;\n\nexport const StyledHiddenDiv = styled.div`\n display: none;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,kBAAkB,OAAO;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,2 +1,3 @@
1
1
  export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
2
2
  export declare const StyledPopperWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
3
+ export declare const StyledHiddenDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-layout-autocomplete",
3
- "version": "3.25.0-rc.0",
3
+ "version": "3.26.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Form Layout - Autocomplete",
6
6
  "files": [
@@ -38,19 +38,19 @@
38
38
  "react-virtual": "~2.10.4",
39
39
  "styled-components": "~5.3.9",
40
40
  "uid": "~2.0.1",
41
- "@elliemae/ds-grid": "3.25.0-rc.0",
42
- "@elliemae/ds-popperjs": "3.25.0-rc.0",
43
- "@elliemae/ds-menu-items": "3.25.0-rc.0",
44
- "@elliemae/ds-props-helpers": "3.25.0-rc.0",
45
- "@elliemae/ds-system": "3.25.0-rc.0"
41
+ "@elliemae/ds-grid": "3.26.0-next.2",
42
+ "@elliemae/ds-popperjs": "3.26.0-next.2",
43
+ "@elliemae/ds-props-helpers": "3.26.0-next.2",
44
+ "@elliemae/ds-system": "3.26.0-next.2",
45
+ "@elliemae/ds-menu-items": "3.26.0-next.2"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@elliemae/pui-cli": "~9.0.0-next.31",
49
49
  "@elliemae/pui-theme": "~2.7.0",
50
50
  "styled-components": "~5.3.9",
51
51
  "styled-system": "~5.1.5",
52
- "@elliemae/ds-form-input-text": "3.25.0-rc.0",
53
- "@elliemae/ds-monorepo-devops": "3.25.0-rc.0"
52
+ "@elliemae/ds-monorepo-devops": "3.26.0-next.2",
53
+ "@elliemae/ds-form-input-text": "3.26.0-next.2"
54
54
  },
55
55
  "peerDependencies": {
56
56
  "@elliemae/pui-theme": "~2.7.0",