@elliemae/ds-form-layout-autocomplete 3.46.0-rc.7 → 3.46.0-rc.9

package/dist/cjs/parts/menu-list/MenuList.js

@@ -38,6 +38,7 @@ var import_styled = require("./styled.js");
 var import_AutocompleteDataTestids = require("../../AutocompleteDataTestids.js");
 var import_AutocompleteCTX = __toESM(require("../../AutocompleteCTX.js"));
 var import_useItemRenderer = require("./useItemRenderer.js");
+var import_useOnElementResize = require("../../utils/useOnElementResize.js");
 const MenuList = () => {
   const {
     props: { options },
@@ -45,15 +46,19 @@ const MenuList = () => {
     inputRef,
     listRef,
     autoCompleteId,
-    virtualListHelpers: { totalSize }
+    virtualListHelpers: { totalSize, measure }
   } = (0, import_react.useContext)(import_AutocompleteCTX.default);
   const ItemRenderer = (0, import_useItemRenderer.useItemRenderer)();
+  const { width } = (0, import_useOnElementResize.useOnElementResize)(referenceElement);
   const handleOnFocus = (0, import_react.useCallback)(() => {
     inputRef.current?.focus();
   }, [inputRef]);
   const preventMouseDown = (0, import_react.useCallback)((e) => {
     e.preventDefault();
   }, []);
+  (0, import_react.useLayoutEffect)(() => {
+    if (measure) measure();
+  }, [width]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledList,
     {

package/dist/cjs/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bb;AA9BV,mBAA+C;AAC/C,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AAErC,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCb;AArCV,mBAAgE;AAChE,oBAAwE;AACxE,qCAAuC;AACvC,6BAAgC;AAChC,6BAAgC;AAChC,gCAAmC;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,QAAI,yBAAW,uBAAAA,OAAmB;AAElC,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,8CAAmB,gBAAgB;AAErD,QAAM,oBAAgB,0BAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,uBAA4D,0BAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,4CAAC,mCAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,4CAAC,0CAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,sDAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
   "names": ["AutocompleteContext"]
 }

package/dist/cjs/utils/useOnElementResize.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useOnElementResize_exports = {};
+__export(useOnElementResize_exports, {
+  useOnElementResize: () => useOnElementResize
+});
+module.exports = __toCommonJS(useOnElementResize_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useOnElementResize = (targetRef) => {
+  const [width, setWidth] = (0, import_react.useState)(targetRef?.offsetWidth ?? 0);
+  const [height, setHeight] = (0, import_react.useState)(targetRef?.offsetHeight ?? 0);
+  const observer = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    function outputsize() {
+      setWidth(targetRef?.offsetWidth ?? 0);
+      setHeight(targetRef?.offsetHeight ?? 0);
+    }
+    observer.current = new ResizeObserver(outputsize);
+    const el = targetRef;
+    if (el) observer.current.observe(el);
+    return () => {
+      if (el && observer.current) observer.current.disconnect();
+    };
+  }, [targetRef]);
+  return (0, import_react.useMemo)(
+    () => ({
+      width,
+      height
+    }),
+    [width, height]
+  );
+};
+//# sourceMappingURL=useOnElementResize.js.map

package/dist/cjs/utils/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/useOnElementResize.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = (targetRef: HTMLElement | null): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef?.offsetWidth ?? 0);\n      setHeight(targetRef?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el && observer.current) observer.current.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AAI9C,MAAM,qBAAqB,CAAC,cAAsE;AACvG,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,WAAW,eAAe,CAAC;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,WAAW,gBAAgB,CAAC;AACjE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,WAAW,eAAe,CAAC;AACpC,gBAAU,WAAW,gBAAgB,CAAC;AAAA,IACxC;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK;AACX,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,MAAM,SAAS,QAAS,UAAS,QAAQ,WAAW;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "names": []
+}

package/dist/esm/parts/menu-list/MenuList.js

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import { useContext, useCallback, useLayoutEffect } from "react";
 import { StyledListWrapper, StyledList, StyledVirtualListWrapper } from "./styled.js";
 import { AutocompleteDataTestid } from "../../AutocompleteDataTestids.js";
 import AutocompleteContext from "../../AutocompleteCTX.js";
 import { useItemRenderer } from "./useItemRenderer.js";
+import { useOnElementResize } from "../../utils/useOnElementResize.js";
 const MenuList = () => {
   const {
     props: { options },
@@ -12,15 +13,19 @@ const MenuList = () => {
     inputRef,
     listRef,
     autoCompleteId,
-    virtualListHelpers: { totalSize }
+    virtualListHelpers: { totalSize, measure }
   } = useContext(AutocompleteContext);
   const ItemRenderer = useItemRenderer();
+  const { width } = useOnElementResize(referenceElement);
   const handleOnFocus = useCallback(() => {
     inputRef.current?.focus();
   }, [inputRef]);
   const preventMouseDown = useCallback((e) => {
     e.preventDefault();
   }, []);
+  useLayoutEffect(() => {
+    if (measure) measure();
+  }, [width]);
   return /* @__PURE__ */ jsx(StyledListWrapper, { onMouseDown: preventMouseDown, minWidth: referenceElement?.offsetWidth, children: options.length > 0 && /* @__PURE__ */ jsx(StyledVirtualListWrapper, { tabIndex: -1, innerRef: listRef, children: /* @__PURE__ */ jsx(
     StyledList,
     {

package/dist/esm/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8Bb;AA9BV,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,UAAU;AAAA,EAClC,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AAErC,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useLayoutEffect } from 'react';\nimport { StyledListWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';\nimport AutocompleteContext from '../../AutocompleteCTX.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props: { options },\n    referenceElement,\n    inputRef,\n    listRef,\n    autoCompleteId,\n    virtualListHelpers: { totalSize, measure },\n  } = useContext(AutocompleteContext);\n\n  const ItemRenderer = useItemRenderer();\n  const { width } = useOnElementResize(referenceElement);\n\n  const handleOnFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, [inputRef]);\n\n  const preventMouseDown: React.MouseEventHandler<HTMLDivElement> = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (measure) measure();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [width]);\n\n  return (\n    <StyledListWrapper onMouseDown={preventMouseDown} minWidth={referenceElement?.offsetWidth}>\n      {options.length > 0 && (\n        <StyledVirtualListWrapper tabIndex={-1} innerRef={listRef}>\n          <StyledList\n            // recalculate the key to force the re-render of the list and update virtualization\n            key={options.length}\n            role=\"listbox\"\n            id={`menu-list-${autoCompleteId}`}\n            // default aria label until we integrate the aria props on autocomplete\n            // this is for the axe core to pass\n            aria-label=\"autocomplete option lists\"\n            onFocus={handleOnFocus}\n            data-testid={AutocompleteDataTestid.LIST}\n            style={{ height: totalSize, margin: '8px 0px' }}\n          >\n            {ItemRenderer}\n          </StyledList>\n        </StyledVirtualListWrapper>\n      )}\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCb;AArCV,SAAgB,YAAY,aAAa,uBAAuB;AAChE,SAAS,mBAAmB,YAAY,gCAAgC;AACxE,SAAS,8BAA8B;AACvC,OAAO,yBAAyB;AAChC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,QAAQ;AAAA,EAC3C,IAAI,WAAW,mBAAmB;AAElC,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,MAAM,IAAI,mBAAmB,gBAAgB;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAA4D,YAAY,CAAC,MAAM;AACnF,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,QAAI,QAAS,SAAQ;AAAA,EAEvB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,qBAAkB,aAAa,kBAAkB,UAAU,kBAAkB,aAC3E,kBAAQ,SAAS,KAChB,oBAAC,4BAAyB,UAAU,IAAI,UAAU,SAChD;AAAA,IAAC;AAAA;AAAA,MAGC,MAAK;AAAA,MACL,IAAI,aAAa,cAAc;AAAA,MAG/B,cAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAa,uBAAuB;AAAA,MACpC,OAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU;AAAA,MAE7C;AAAA;AAAA,IAVI,QAAQ;AAAA,EAWf,GACF,GAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/utils/useOnElementResize.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
+const useOnElementResize = (targetRef) => {
+  const [width, setWidth] = useState(targetRef?.offsetWidth ?? 0);
+  const [height, setHeight] = useState(targetRef?.offsetHeight ?? 0);
+  const observer = useRef();
+  useEffect(() => {
+    function outputsize() {
+      setWidth(targetRef?.offsetWidth ?? 0);
+      setHeight(targetRef?.offsetHeight ?? 0);
+    }
+    observer.current = new ResizeObserver(outputsize);
+    const el = targetRef;
+    if (el) observer.current.observe(el);
+    return () => {
+      if (el && observer.current) observer.current.disconnect();
+    };
+  }, [targetRef]);
+  return useMemo(
+    () => ({
+      width,
+      height
+    }),
+    [width, height]
+  );
+};
+export {
+  useOnElementResize
+};
+//# sourceMappingURL=useOnElementResize.js.map

package/dist/esm/utils/useOnElementResize.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/useOnElementResize.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = (targetRef: HTMLElement | null): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef?.offsetWidth ?? 0);\n      setHeight(targetRef?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el && observer.current) observer.current.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,WAAW,QAAQ,eAAe;AAI9C,MAAM,qBAAqB,CAAC,cAAsE;AACvG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,WAAW,eAAe,CAAC;AAC9D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW,gBAAgB,CAAC;AACjE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,WAAW,eAAe,CAAC;AACpC,gBAAU,WAAW,gBAAgB,CAAC;AAAA,IACxC;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK;AACX,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,MAAM,SAAS,QAAS,UAAS,QAAQ,WAAW;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "names": []
+}

package/dist/types/utils/useOnElementResize.d.ts

@@ -0,0 +1 @@
+export declare const useOnElementResize: (targetRef: HTMLElement | null) => Record<'width' | 'height', number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-layout-autocomplete",
-  "version": "3.46.0-rc.7",
+  "version": "3.46.0-rc.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Layout - Autocomplete",
   "files": [
@@ -39,20 +39,20 @@
     "react-virtual": "~2.10.4",
     "styled-components": "~5.3.9",
     "uid": "~2.0.1",
-    "@elliemae/ds-form-input-text": "3.46.0-rc.7",
-    "@elliemae/ds-grid": "3.46.0-rc.7",
-    "@elliemae/ds-menu-items": "3.46.0-rc.7",
-    "@elliemae/ds-popperjs": "3.46.0-rc.7",
-    "@elliemae/ds-system": "3.46.0-rc.7",
-    "@elliemae/ds-props-helpers": "3.46.0-rc.7"
+    "@elliemae/ds-form-input-text": "3.46.0-rc.9",
+    "@elliemae/ds-grid": "3.46.0-rc.9",
+    "@elliemae/ds-menu-items": "3.46.0-rc.9",
+    "@elliemae/ds-popperjs": "3.46.0-rc.9",
+    "@elliemae/ds-props-helpers": "3.46.0-rc.9",
+    "@elliemae/ds-system": "3.46.0-rc.9"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
     "styled-components": "~5.3.9",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-form-input-text": "3.46.0-rc.7",
-    "@elliemae/ds-monorepo-devops": "3.46.0-rc.7"
+    "@elliemae/ds-monorepo-devops": "3.46.0-rc.9",
+    "@elliemae/ds-form-input-text": "3.46.0-rc.9"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",