@elliemae/ds-mobile 3.1.4-rc.0 → 3.1.4-rc.1

package/dist/cjs/InfiniteLoader/Infiniteloader.js

@@ -29,40 +29,51 @@ var import_react = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_Loader = require("./Loader");
-const InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {
-  const callback = (entries) => {
+const InfiniteLoader = ({ isFetching, fetchData, children, height }) => {
+  const [viewportHeight, setViewportHeight] = (0, import_react.useState)(height);
+  const baselineRef = (0, import_react.useRef)(null);
+  const observerRef = (0, import_react.useRef)(null);
+  const callback = (0, import_react.useCallback)((entries) => {
     const { isIntersecting } = entries[0];
     if (isIntersecting && !isFetching) {
       fetchData();
-      observer.current.disconnect();
-      observer.current = void 0;
+      observerRef.current?.disconnect();
     }
-  };
-  const target = (0, import_react.useRef)(null);
-  const observer = (0, import_react.useRef)(null);
+  }, [fetchData, isFetching]);
   (0, import_react.useEffect)(() => {
-    if (observer.current) {
-      observer.current.disconnect();
+    if (!isFetching) {
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(callback, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+      if (baselineRef.current)
+        observerRef.current.observe(baselineRef.current);
     }
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 0.25
-    });
-    if (target.current) {
-      observer.current.observe(target.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = (0, import_react.useCallback)(() => {
+    setViewportHeight(window.innerHeight);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!height) {
+      window.addEventListener("resize", handleResize);
+      handleResize();
     }
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      if (!height)
+        window.removeEventListener("resize", handleResize);
     };
-  }, [target, observer, fetchData]);
+  }, [handleResize, height]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { position: "relative", height, overflow: "hidden" }
+    style: { position: "relative", overflow: "hidden", height: viewportHeight }
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    style: { overflow: isFetching ? "hidden" : "auto", height }
+    style: { overflow: isFetching ? "hidden" : "auto", height: viewportHeight }
   }, children, /* @__PURE__ */ import_react.default.createElement("div", {
-    ref: target,
+    ref: baselineRef,
     style: { height: 1 }
   })), /* @__PURE__ */ import_react.default.createElement(import_Loader.Loader, {
     isOpen: isFetching
@@ -72,10 +83,8 @@ const listProps = {
   isFetching: import_ds_utilities.PropTypes.bool.description("toggle loading state"),
   fetchData: import_ds_utilities.PropTypes.func.description("callback to fetch new items"),
   children: import_ds_utilities.PropTypes.element.description("row items for infinite loader"),
-  height: import_ds_utilities.PropTypes.number.isRequired.description("infinite loader list height")
+  height: import_ds_utilities.PropTypes.number.description("infinite loader list height")
 };
-InfiniteLoader.propTypes = listProps;
-InfiniteLoader.displayName = "InfiniteLoader";
 const InfiniteLoaderWithSchema = (0, import_ds_utilities.describe)(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 //# sourceMappingURL=Infiniteloader.js.map

package/dist/cjs/InfiniteLoader/Infiniteloader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/Infiniteloader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AAEvB,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AAEV,eAAS,QAAQ,WAAW;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,SAAS,yBAAO,IAAI;AAC1B,QAAM,WAAW,yBAAO,IAAI;AAE5B,8BAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,WAAW;AAAA,IAC9B;AACA,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb,CAAC;AACD,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACzC;AACA,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO,OAAO;AAC1C,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,SAAS,CAAC;AAEhC,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,8BAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,kCAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n  isFetching: boolean;\n  fetchData: () => void;\n  children: React.ReactNode;\n  height?: number | string;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height }: Props) => {\n  const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n  const baselineRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const callback = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const { isIntersecting } = entries[0];\n      if (isIntersecting && !isFetching) {\n        fetchData();\n        observerRef.current?.disconnect();\n      }\n    },\n    [fetchData, isFetching],\n  );\n\n  useEffect(() => {\n    if (!isFetching) {\n      observerRef.current?.disconnect();\n      observerRef.current = new IntersectionObserver(callback, {\n        root: null,\n        rootMargin: '0px',\n        threshold: 0.1,\n      });\n      if (baselineRef.current) observerRef.current.observe(baselineRef.current);\n    }\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [baselineRef, observerRef, fetchData, callback, isFetching]);\n\n  const handleResize = useCallback(() => {\n    setViewportHeight(window.innerHeight);\n  }, []);\n\n  useEffect(() => {\n    if (!height) {\n      window.addEventListener('resize', handleResize);\n      handleResize();\n    }\n    return () => {\n      if (!height) window.removeEventListener('resize', handleResize);\n    };\n  }, [handleResize, height]);\n\n  return (\n    <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n        {children}\n        <div ref={baselineRef} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  children: PropTypes.element.description('row items for infinite loader'),\n  height: PropTypes.number.description('infinite loader list height'),\n};\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgE;AAChE,0BAAoC;AACpC,qBAAqB;AACrB,oBAAuB;AASvB,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,aAAoB;AAC7E,QAAM,CAAC,gBAAgB,qBAAqB,2BAAsC,MAAM;AACxF,QAAM,cAAc,yBAA8B,IAAI;AACtD,QAAM,cAAc,yBAAoC,IAAI;AAE5D,QAAM,WAAW,8BACf,CAAC,YAAyC;AACxC,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AACV,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GACA,CAAC,WAAW,UAAU,CACxB;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf,kBAAY,SAAS,WAAW;AAChC,kBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,QACvD,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AACD,UAAI,YAAY;AAAS,oBAAY,QAAQ,QAAQ,YAAY,OAAO;AAAA,IAC1E;AACA,WAAO,MAAM;AACX,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,WAAW,UAAU,UAAU,CAAC;AAE9D,QAAM,eAAe,8BAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,mDAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,mDAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,8BAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,8BAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,8BAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/InfiniteLoader/Loader.js

@@ -29,7 +29,7 @@ var import_prop_types = __toESM(require("prop-types"));
 var import_ds_indeterminate_progress_indicator = __toESM(require("@elliemae/ds-indeterminate-progress-indicator"));
 var import_styled = require("./styled");
 const Loader = ({ isOpen }) => /* @__PURE__ */ import_react.default.createElement(import_styled.LoaderBox, {
-  className: isOpen && "opened"
+  className: isOpen ? "opened" : ""
 }, /* @__PURE__ */ import_react.default.createElement(import_ds_indeterminate_progress_indicator.default, {
   processing: true,
   title: "Loading"

package/dist/cjs/InfiniteLoader/Loader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InfiniteLoader/Loader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\nexport const Loader = ({ isOpen }) => (\n  <LoaderBox className={isOpen && 'opened'}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,iDAA6C;AAC7C,oBAA0B;AAEnB,MAAM,SAAS,CAAC,EAAE,aACvB,mDAAC;AAAA,EAAU,WAAW,UAAU;AAAA,GAC9B,mDAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,0BAAU;AACpB;",
+  "sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\ninterface Props {\n  isOpen: boolean;\n}\n\nexport const Loader = ({ isOpen }: Props) => (\n  <LoaderBox className={isOpen ? 'opened' : ''}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAsB;AACtB,iDAA6C;AAC7C,oBAA0B;AAMnB,MAAM,SAAS,CAAC,EAAE,aACvB,mDAAC;AAAA,EAAU,WAAW,SAAS,WAAW;AAAA,GACxC,mDAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,0BAAU;AACpB;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Infiniteloader.js

@@ -1,42 +1,53 @@
 import * as React from "react";
-import React2, { useEffect, useRef } from "react";
+import React2, { useEffect, useRef, useCallback, useState } from "react";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 import { Loader } from "./Loader";
-const InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {
-  const callback = (entries) => {
+const InfiniteLoader = ({ isFetching, fetchData, children, height }) => {
+  const [viewportHeight, setViewportHeight] = useState(height);
+  const baselineRef = useRef(null);
+  const observerRef = useRef(null);
+  const callback = useCallback((entries) => {
     const { isIntersecting } = entries[0];
     if (isIntersecting && !isFetching) {
       fetchData();
-      observer.current.disconnect();
-      observer.current = void 0;
+      observerRef.current?.disconnect();
     }
-  };
-  const target = useRef(null);
-  const observer = useRef(null);
+  }, [fetchData, isFetching]);
   useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
+    if (!isFetching) {
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(callback, {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      });
+      if (baselineRef.current)
+        observerRef.current.observe(baselineRef.current);
     }
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 0.25
-    });
-    if (target.current) {
-      observer.current.observe(target.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = useCallback(() => {
+    setViewportHeight(window.innerHeight);
+  }, []);
+  useEffect(() => {
+    if (!height) {
+      window.addEventListener("resize", handleResize);
+      handleResize();
     }
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      if (!height)
+        window.removeEventListener("resize", handleResize);
     };
-  }, [target, observer, fetchData]);
+  }, [handleResize, height]);
   return /* @__PURE__ */ React2.createElement(Grid, {
-    style: { position: "relative", height, overflow: "hidden" }
+    style: { position: "relative", overflow: "hidden", height: viewportHeight }
   }, /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: isFetching ? "hidden" : "auto", height }
+    style: { overflow: isFetching ? "hidden" : "auto", height: viewportHeight }
   }, children, /* @__PURE__ */ React2.createElement("div", {
-    ref: target,
+    ref: baselineRef,
     style: { height: 1 }
   })), /* @__PURE__ */ React2.createElement(Loader, {
     isOpen: isFetching
@@ -46,10 +57,8 @@ const listProps = {
   isFetching: PropTypes.bool.description("toggle loading state"),
   fetchData: PropTypes.func.description("callback to fetch new items"),
   children: PropTypes.element.description("row items for infinite loader"),
-  height: PropTypes.number.isRequired.description("infinite loader list height")
+  height: PropTypes.number.description("infinite loader list height")
 };
-InfiniteLoader.propTypes = listProps;
-InfiniteLoader.displayName = "InfiniteLoader";
 const InfiniteLoaderWithSchema = describe(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;
 export {

package/dist/esm/InfiniteLoader/Infiniteloader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Infiniteloader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height = window.innerHeight }) => {\n  const callback = (entries) => {\n    const { isIntersecting } = entries[0];\n    if (isIntersecting && !isFetching) {\n      fetchData();\n      // observer.current.unobserve(target.current);\n      observer.current.disconnect();\n      observer.current = undefined;\n    }\n  };\n  // const [target, setTarget] = useState(null);\n  const target = useRef(null);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    if (observer.current) {\n      observer.current.disconnect();\n    }\n    observer.current = new IntersectionObserver(callback, {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.25,\n    });\n    if (target.current) {\n      observer.current.observe(target.current);\n    }\n    return () => {\n      observer.current?.unobserve(target.current);\n      observer.current?.disconnect();\n    };\n  }, [target, observer, fetchData]);\n\n  return (\n    <Grid style={{ position: 'relative', height, overflow: 'hidden' }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height }}>\n        {children}\n        <div ref={target} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  /** toggle loading state */\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  /** callback to fetch new items */\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  /** row items for infinite loader */\n  children: PropTypes.element.description('row items for infinite loader'),\n  /** infinite loader list height */\n  height: PropTypes.number.isRequired.description('infinite loader list height'),\n};\n\nInfiniteLoader.propTypes = listProps;\nInfiniteLoader.displayName = 'InfiniteLoader';\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\n\nInfiniteLoaderWithSchema.propTypes = listProps;\n\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,SAAS,OAAO,kBAAkB;AAC3F,QAAM,WAAW,CAAC,YAAY;AAC5B,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AAEV,eAAS,QAAQ,WAAW;AAC5B,eAAS,UAAU;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,WAAW,OAAO,IAAI;AAE5B,YAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,WAAW;AAAA,IAC9B;AACA,aAAS,UAAU,IAAI,qBAAqB,UAAU;AAAA,MACpD,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb,CAAC;AACD,QAAI,OAAO,SAAS;AAClB,eAAS,QAAQ,QAAQ,OAAO,OAAO;AAAA,IACzC;AACA,WAAO,MAAM;AACX,eAAS,SAAS,UAAU,OAAO,OAAO;AAC1C,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,SAAS,CAAC;AAEhC,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,QAAQ,UAAU,SAAS;AAAA,KAC9D,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,OAAO;AAAA,KAC7D,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAQ,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC1C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAEhB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAE7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAEnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EAEvE,QAAQ,UAAU,OAAO,WAAW,YAAY,6BAA6B;AAC/E;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AAExD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Loader } from './Loader';\n\ninterface Props {\n  isFetching: boolean;\n  fetchData: () => void;\n  children: React.ReactNode;\n  height?: number | string;\n}\n\nconst InfiniteLoader = ({ isFetching, fetchData, children, height }: Props) => {\n  const [viewportHeight, setViewportHeight] = useState<number | undefined | string>(height);\n  const baselineRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const callback = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const { isIntersecting } = entries[0];\n      if (isIntersecting && !isFetching) {\n        fetchData();\n        observerRef.current?.disconnect();\n      }\n    },\n    [fetchData, isFetching],\n  );\n\n  useEffect(() => {\n    if (!isFetching) {\n      observerRef.current?.disconnect();\n      observerRef.current = new IntersectionObserver(callback, {\n        root: null,\n        rootMargin: '0px',\n        threshold: 0.1,\n      });\n      if (baselineRef.current) observerRef.current.observe(baselineRef.current);\n    }\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [baselineRef, observerRef, fetchData, callback, isFetching]);\n\n  const handleResize = useCallback(() => {\n    setViewportHeight(window.innerHeight);\n  }, []);\n\n  useEffect(() => {\n    if (!height) {\n      window.addEventListener('resize', handleResize);\n      handleResize();\n    }\n    return () => {\n      if (!height) window.removeEventListener('resize', handleResize);\n    };\n  }, [handleResize, height]);\n\n  return (\n    <Grid style={{ position: 'relative', overflow: 'hidden', height: viewportHeight }}>\n      <Grid style={{ overflow: isFetching ? 'hidden' : 'auto', height: viewportHeight }}>\n        {children}\n        <div ref={baselineRef} style={{ height: 1 }} />\n      </Grid>\n      <Loader isOpen={isFetching} />\n    </Grid>\n  );\n};\n\nconst listProps = {\n  isFetching: PropTypes.bool.description('toggle loading state'),\n  fetchData: PropTypes.func.description('callback to fetch new items'),\n  children: PropTypes.element.description('row items for infinite loader'),\n  height: PropTypes.number.description('infinite loader list height'),\n};\n\nconst InfiniteLoaderWithSchema = describe(InfiniteLoader);\nInfiniteLoaderWithSchema.propTypes = listProps;\nexport { InfiniteLoader, InfiniteLoaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AASA,MAAM,iBAAiB,CAAC,EAAE,YAAY,WAAW,UAAU,aAAoB;AAC7E,QAAM,CAAC,gBAAgB,qBAAqB,SAAsC,MAAM;AACxF,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,cAAc,OAAoC,IAAI;AAE5D,QAAM,WAAW,YACf,CAAC,YAAyC;AACxC,UAAM,EAAE,mBAAmB,QAAQ;AACnC,QAAI,kBAAkB,CAAC,YAAY;AACjC,gBAAU;AACV,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GACA,CAAC,WAAW,UAAU,CACxB;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf,kBAAY,SAAS,WAAW;AAChC,kBAAY,UAAU,IAAI,qBAAqB,UAAU;AAAA,QACvD,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,WAAW;AAAA,MACb,CAAC;AACD,UAAI,YAAY;AAAS,oBAAY,QAAQ,QAAQ,YAAY,OAAO;AAAA,IAC1E;AACA,WAAO,MAAM;AACX,kBAAY,SAAS,WAAW;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,WAAW,UAAU,UAAU,CAAC;AAE9D,QAAM,eAAe,YAAY,MAAM;AACrC,sBAAkB,OAAO,WAAW;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,aAAO,iBAAiB,UAAU,YAAY;AAC9C,mBAAa;AAAA,IACf;AACA,WAAO,MAAM;AACX,UAAI,CAAC;AAAQ,eAAO,oBAAoB,UAAU,YAAY;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,cAAc,MAAM,CAAC;AAEzB,SACE,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,QAAQ,eAAe;AAAA,KAC9E,qCAAC;AAAA,IAAK,OAAO,EAAE,UAAU,aAAa,WAAW,QAAQ,QAAQ,eAAe;AAAA,KAC7E,UACD,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAa,OAAO,EAAE,QAAQ,EAAE;AAAA,GAAG,CAC/C,GACA,qCAAC;AAAA,IAAO,QAAQ;AAAA,GAAY,CAC9B;AAEJ;AAEA,MAAM,YAAY;AAAA,EAChB,YAAY,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC7D,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,UAAU,UAAU,QAAQ,YAAY,+BAA+B;AAAA,EACvE,QAAQ,UAAU,OAAO,YAAY,6BAA6B;AACpE;AAEA,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/InfiniteLoader/Loader.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
 import { LoaderBox } from "./styled";
 const Loader = ({ isOpen }) => /* @__PURE__ */ React2.createElement(LoaderBox, {
-  className: isOpen && "opened"
+  className: isOpen ? "opened" : ""
 }, /* @__PURE__ */ React2.createElement(DSIndeterminateProgressIndicator, {
   processing: true,
   title: "Loading"

package/dist/esm/InfiniteLoader/Loader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InfiniteLoader/Loader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\nexport const Loader = ({ isOpen }) => (\n  <LoaderBox className={isOpen && 'opened'}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAEO,MAAM,SAAS,CAAC,EAAE,aACvB,qCAAC;AAAA,EAAU,WAAW,UAAU;AAAA,GAC9B,qCAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,UAAU;AACpB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport { LoaderBox } from './styled';\n\ninterface Props {\n  isOpen: boolean;\n}\n\nexport const Loader = ({ isOpen }: Props) => (\n  <LoaderBox className={isOpen ? 'opened' : ''}>\n    <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n  </LoaderBox>\n);\n\nLoader.propTypes = {\n  isOpen: PropTypes.bool,\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAMO,MAAM,SAAS,CAAC,EAAE,aACvB,qCAAC;AAAA,EAAU,WAAW,SAAS,WAAW;AAAA,GACxC,qCAAC;AAAA,EAAiC,YAAU;AAAA,EAAC,OAAM;AAAA,CAAU,CAC/D;AAGF,OAAO,YAAY;AAAA,EACjB,QAAQ,UAAU;AACpB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "3.1.4-rc.0",
+  "version": "3.1.4-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "files": [
@@ -435,20 +435,20 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "3.1.4-rc.0",
-    "@elliemae/ds-backdrop": "3.1.4-rc.0",
-    "@elliemae/ds-button": "3.1.4-rc.0",
-    "@elliemae/ds-circular-progress-indicator": "3.1.4-rc.0",
-    "@elliemae/ds-form": "3.1.4-rc.0",
-    "@elliemae/ds-grid": "3.1.4-rc.0",
-    "@elliemae/ds-icon": "3.1.4-rc.0",
-    "@elliemae/ds-icons": "3.1.4-rc.0",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.1.4-rc.0",
-    "@elliemae/ds-shared": "3.1.4-rc.0",
-    "@elliemae/ds-system": "3.1.4-rc.0",
-    "@elliemae/ds-tabs": "3.1.4-rc.0",
-    "@elliemae/ds-truncated-expandable-text": "3.1.4-rc.0",
-    "@elliemae/ds-utilities": "3.1.4-rc.0",
+    "@elliemae/ds-accordion": "3.1.4-rc.1",
+    "@elliemae/ds-backdrop": "3.1.4-rc.1",
+    "@elliemae/ds-button": "3.1.4-rc.1",
+    "@elliemae/ds-circular-progress-indicator": "3.1.4-rc.1",
+    "@elliemae/ds-form": "3.1.4-rc.1",
+    "@elliemae/ds-grid": "3.1.4-rc.1",
+    "@elliemae/ds-icon": "3.1.4-rc.1",
+    "@elliemae/ds-icons": "3.1.4-rc.1",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.1.4-rc.1",
+    "@elliemae/ds-shared": "3.1.4-rc.1",
+    "@elliemae/ds-system": "3.1.4-rc.1",
+    "@elliemae/ds-tabs": "3.1.4-rc.1",
+    "@elliemae/ds-truncated-expandable-text": "3.1.4-rc.1",
+    "@elliemae/ds-utilities": "3.1.4-rc.1",
     "polished": "~3.6.7",
     "prop-types": "~15.8.1",
     "react-window": "~1.8.6",