@elliemae/ds-mobile 2.4.21 → 2.4.22

package/cjs/InfiniteLoader/Infiniteloader.js

@@ -12,7 +12,6 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const InfiniteLoader = _ref => {
   let {
@@ -21,49 +20,43 @@ const InfiniteLoader = _ref => {
     children,
     height
   } = _ref;
-  const [wh, setHeight] = React__default["default"].useState(height);
-
-  const callback = entries => {
+  const [viewportHeight, setViewportHeight] = React.useState(height);
+  const baselineRef = React.useRef(null);
+  const observerRef = React.useRef(null);
+  const callback = React.useCallback(entries => {
     const {
       isIntersecting
     } = entries[0];
 
     if (isIntersecting && !isFetching) {
-      fetchData(); // observer.current.unobserve(target.current);
-
-      observer.current.disconnect();
-      observer.current = undefined;
+      fetchData();
+      observerRef.current?.disconnect();
     }
-  }; // const [target, setTarget] = useState(null);
-
-
-  const target = React.useRef(null);
-  const observer = React.useRef(null);
+  }, [fetchData, isFetching]);
   React.useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
-    }
-
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.25
-    });
-
-    if (target.current) {
-      observer.current.observe(target.current);
+    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);
     }
 
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      observerRef.current?.disconnect();
     };
-  }, [target, observer, fetchData]);
-  const handleResize = React__default["default"].useCallback(() => {
-    setHeight(window.innerHeight);
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = React.useCallback(() => {
+    setViewportHeight(window.innerHeight);
   }, []);
   React.useEffect(() => {
-    if (!height) window.addEventListener('resize', handleResize);
+    if (!height) {
+      window.addEventListener('resize', handleResize);
+      handleResize();
+    }
+
     return () => {
       if (!height) window.removeEventListener('resize', handleResize);
     };
@@ -71,16 +64,16 @@ const InfiniteLoader = _ref => {
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       position: 'relative',
-      height: wh,
-      overflow: 'hidden'
+      overflow: 'hidden',
+      height: viewportHeight
     }
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       overflow: isFetching ? 'hidden' : 'auto',
-      height: wh
+      height: viewportHeight
     }
   }, void 0, children, /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: target,
+    ref: baselineRef,
     style: {
       height: 1
     }
@@ -90,17 +83,10 @@ const InfiniteLoader = _ref => {
 };
 
 const listProps = {
-  /** toggle loading state */
   isFetching: reactDesc.PropTypes.bool.description('toggle loading state'),
-
-  /** callback to fetch new items */
   fetchData: reactDesc.PropTypes.func.description('callback to fetch new items'),
-
-  /** row items for infinite loader */
   children: reactDesc.PropTypes.element.description('row items for infinite loader'),
-
-  /** infinite loader list height */
-  height: reactDesc.PropTypes.number.isRequired.description('infinite loader list height')
+  height: reactDesc.PropTypes.number.description('infinite loader list height')
 };
 const InfiniteLoaderWithSchema = reactDesc.describe(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;

package/cjs/InfiniteLoader/Loader.js

@@ -18,7 +18,7 @@ const Loader = _ref => {
     isOpen
   } = _ref;
   return /*#__PURE__*/_jsx__default["default"](styled.LoaderBox, {
-    className: isOpen && 'opened'
+    className: isOpen ? 'opened' : ''
   }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
     processing: true,
     title: "Loading"

package/cjs/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -86,6 +86,7 @@ const listProps = {
   /** flag for virtualized list */
   hasNextPage: reactDesc.PropTypes.bool.description('flag for virtualized list')
 };
+VirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';
 const VirtualizedInfiniteLoaderWithSchema = reactDesc.describe(VirtualizedInfiniteLoader);
 VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 

package/cjs/InfiniteLoader/styled.js

@@ -10,6 +10,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const LoaderBox = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ejumr4-0"
-})(["position:fixed;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
+})(["position:absolute;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
 
 exports.LoaderBox = LoaderBox;

package/cjs/MobileContextMenu/MobileContextMenu.js

@@ -6,6 +6,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/es.array.includes.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -6,6 +6,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/es.array.includes.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');

package/cjs/MobileSelectList/MobileSelectList.js

@@ -9,6 +9,7 @@ require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/es.array.includes.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');

package/esm/InfiniteLoader/Infiniteloader.js

@@ -1,5 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useRef, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { Grid } from '@elliemae/ds-grid';
 import { Loader } from './Loader.js';
@@ -12,49 +12,43 @@ const InfiniteLoader = _ref => {
     children,
     height
   } = _ref;
-  const [wh, setHeight] = React.useState(height);
-
-  const callback = entries => {
+  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.unobserve(target.current);
-
-      observer.current.disconnect();
-      observer.current = undefined;
+      fetchData();
+      observerRef.current?.disconnect();
     }
-  }; // const [target, setTarget] = useState(null);
-
-
-  const target = useRef(null);
-  const observer = useRef(null);
+  }, [fetchData, isFetching]);
   useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
-    }
-
-    observer.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.25
-    });
-
-    if (target.current) {
-      observer.current.observe(target.current);
+    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);
     }
 
     return () => {
-      observer.current?.unobserve(target.current);
-      observer.current?.disconnect();
+      observerRef.current?.disconnect();
     };
-  }, [target, observer, fetchData]);
-  const handleResize = React.useCallback(() => {
-    setHeight(window.innerHeight);
+  }, [baselineRef, observerRef, fetchData, callback, isFetching]);
+  const handleResize = useCallback(() => {
+    setViewportHeight(window.innerHeight);
   }, []);
   useEffect(() => {
-    if (!height) window.addEventListener('resize', handleResize);
+    if (!height) {
+      window.addEventListener('resize', handleResize);
+      handleResize();
+    }
+
     return () => {
       if (!height) window.removeEventListener('resize', handleResize);
     };
@@ -62,16 +56,16 @@ const InfiniteLoader = _ref => {
   return /*#__PURE__*/_jsx(Grid, {
     style: {
       position: 'relative',
-      height: wh,
-      overflow: 'hidden'
+      overflow: 'hidden',
+      height: viewportHeight
     }
   }, void 0, /*#__PURE__*/_jsx(Grid, {
     style: {
       overflow: isFetching ? 'hidden' : 'auto',
-      height: wh
+      height: viewportHeight
     }
   }, void 0, children, /*#__PURE__*/jsx("div", {
-    ref: target,
+    ref: baselineRef,
     style: {
       height: 1
     }
@@ -81,17 +75,10 @@ const InfiniteLoader = _ref => {
 };
 
 const listProps = {
-  /** toggle loading state */
   isFetching: PropTypes.bool.description('toggle loading state'),
-
-  /** callback to fetch new items */
   fetchData: PropTypes.func.description('callback to fetch new items'),
-
-  /** row items for infinite loader */
   children: PropTypes.element.description('row items for infinite loader'),
-
-  /** infinite loader list height */
-  height: PropTypes.number.isRequired.description('infinite loader list height')
+  height: PropTypes.number.description('infinite loader list height')
 };
 const InfiniteLoaderWithSchema = describe(InfiniteLoader);
 InfiniteLoaderWithSchema.propTypes = listProps;

package/esm/InfiniteLoader/Loader.js

@@ -9,7 +9,7 @@ const Loader = _ref => {
     isOpen
   } = _ref;
   return /*#__PURE__*/_jsx(LoaderBox, {
-    className: isOpen && 'opened'
+    className: isOpen ? 'opened' : ''
   }, void 0, _DSIndeterminateProgr || (_DSIndeterminateProgr = /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
     processing: true,
     title: "Loading"

package/esm/InfiniteLoader/VirtualizedInfiniteLoader.js

@@ -77,6 +77,7 @@ const listProps = {
   /** flag for virtualized list */
   hasNextPage: PropTypes.bool.description('flag for virtualized list')
 };
+VirtualizedInfiniteLoader.displayName = 'VirtualizedInfiniteLoader';
 const VirtualizedInfiniteLoaderWithSchema = describe(VirtualizedInfiniteLoader);
 VirtualizedInfiniteLoaderWithSchema.propTypes = listProps;
 

package/esm/InfiniteLoader/styled.js

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 
 const LoaderBox = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ejumr4-0"
-})(["position:fixed;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
+})(["position:absolute;width:100%;z-index:10;background-color:white;height:50px;bottom:-50px;border-top:1px solid #e0e3e8;align-items:center;transition:400ms cubic-bezier(0,0,0.42,1);&.opened{transition:400ms cubic-bezier(0.36,0,1,1);bottom:0;}"]);
 
 export { LoaderBox };

package/esm/MobileContextMenu/MobileContextMenu.js

@@ -2,6 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/MobileContextMenu/MobileContextMenuGroup.js

@@ -2,6 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/MobileSelectList/MobileSelectList.js

@@ -5,6 +5,7 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { useState, useEffect } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mobile",
-  "version": "2.4.21",
+  "version": "2.4.22",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -433,19 +433,19 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.4.21",
-    "@elliemae/ds-backdrop": "2.4.21",
-    "@elliemae/ds-button": "2.4.21",
-    "@elliemae/ds-circular-progress-indicator": "2.4.21",
-    "@elliemae/ds-form": "2.4.21",
-    "@elliemae/ds-grid": "2.4.21",
-    "@elliemae/ds-icon": "2.4.21",
-    "@elliemae/ds-icons": "2.4.21",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.4.21",
-    "@elliemae/ds-shared": "2.4.21",
-    "@elliemae/ds-system": "2.4.21",
-    "@elliemae/ds-tabs": "2.4.21",
-    "@elliemae/ds-truncated-expandable-text": "2.4.21",
+    "@elliemae/ds-accordion": "2.4.22",
+    "@elliemae/ds-backdrop": "2.4.22",
+    "@elliemae/ds-button": "2.4.22",
+    "@elliemae/ds-circular-progress-indicator": "2.4.22",
+    "@elliemae/ds-form": "2.4.22",
+    "@elliemae/ds-grid": "2.4.22",
+    "@elliemae/ds-icon": "2.4.22",
+    "@elliemae/ds-icons": "2.4.22",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.22",
+    "@elliemae/ds-shared": "2.4.22",
+    "@elliemae/ds-system": "2.4.22",
+    "@elliemae/ds-tabs": "2.4.22",
+    "@elliemae/ds-truncated-expandable-text": "2.4.22",
     "@xstyled/styled-components": "~3.1.1",
     "polished": "~3.6.7",
     "prop-types": "~15.7.2",

package/types/InfiniteLoader/Infiniteloader.d.ts

@@ -1,37 +1,12 @@
 /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-declare const InfiniteLoader: {
-    ({ isFetching, fetchData, children, height }: {
-        isFetching: any;
-        fetchData: any;
-        children: any;
-        height: any;
-    }): JSX.Element;
-    propTypes: {
-        /** toggle loading state */
-        isFetching: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** callback to fetch new items */
-        fetchData: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** row items for infinite loader */
-        children: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        /** infinite loader list height */
-        height: any;
-    };
-};
+import React from 'react';
+interface Props {
+    isFetching: boolean;
+    fetchData: () => void;
+    children: React.ReactNode;
+    height?: number | string;
+}
+declare const InfiniteLoader: ({ isFetching, fetchData, children, height }: Props) => JSX.Element;
 declare const InfiniteLoaderWithSchema: {
     (props?: unknown): JSX.Element;
     propTypes: unknown;

package/types/InfiniteLoader/Loader.d.ts

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
+interface Props {
+    isOpen: boolean;
+}
 export declare const Loader: {
-    ({ isOpen }: {
-        isOpen: any;
-    }): JSX.Element;
+    ({ isOpen }: Props): JSX.Element;
     propTypes: {
         isOpen: PropTypes.Requireable<boolean>;
     };
 };
+export {};

package/types/InfiniteLoader/VirtualizedInfiniteLoader.d.ts

@@ -60,6 +60,7 @@ declare const VirtualizedInfiniteLoader: {
             isRequired: import("react-desc").PropTypesDescValue;
         };
     };
+    displayName: string;
 };
 declare const VirtualizedInfiniteLoaderWithSchema: {
     (props?: unknown): JSX.Element;