@elliemae/ds-mobile 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/SwipeToRefresh/SwipeToRefresh.js

@@ -0,0 +1,65 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
+import { useTheme } from '@elliemae/ds-system';
+import { useSwipe } from './useSwipe.js';
+import { SwipeContainer, SwipeDrag, LoaderBox, PositionLoader } from './styled.js';
+import { ProgressIndicator } from './ProgressIndicator.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _DSCircularProgressIn;
+
+const SwipeToRefresh = _ref => {
+  let {
+    children,
+    loading,
+    onRefresh
+  } = _ref;
+  const breakpoint = 60;
+  const theme = useTheme();
+  const swipe = useSwipe({
+    onRefresh,
+    breakpoint
+  });
+  const progress = swipe.height > breakpoint ? 100 : swipe.height * 100 / breakpoint;
+  return /*#__PURE__*/_jsx(SwipeContainer, {}, void 0, /*#__PURE__*/jsxs(SwipeDrag, {
+    onTouchStart: swipe.touchStart,
+    onTouchEnd: swipe.touchEnd,
+    onTouchCancel: swipe.touchCancel,
+    onTouchMove: swipe.touchMove,
+    ref: swipe.ref,
+    children: [/*#__PURE__*/_jsx(LoaderBox, {
+      height: loading ? theme.space.m : "".concat(swipe.height, "px"),
+      alignItems: "flex-start",
+      "data-testid": "loader-box"
+    }, void 0, /*#__PURE__*/_jsx(PositionLoader, {
+      height: theme.space.m,
+      justifyContent: "center",
+      alignItems: "center",
+      mt: swipe.height > 40 || loading ? 0 : "".concat(swipe.height - 40, "px")
+    }, void 0, loading ? _DSCircularProgressIn || (_DSCircularProgressIn = /*#__PURE__*/_jsx(DSCircularProgressIndicator, {})) : /*#__PURE__*/_jsx(ProgressIndicator, {
+      progress: progress
+    }))), /*#__PURE__*/jsx("div", {
+      ref: swipe.target,
+      style: {
+        height: 1
+      }
+    }), children]
+  }));
+};
+
+const props = {
+  /** component inside swipe to refresh container */
+  children: PropTypes.element.isRequired.description('component inside swipe to refresh container'),
+
+  /** toggle loading state for swipe */
+  loading: PropTypes.bool.description('toggle loading state for swipe'),
+
+  /** callback on refresh swipe */
+  onRefresh: PropTypes.func.description('callback on refresh swipe')
+};
+const SwipeToRefreshWithSchema = describe(SwipeToRefresh);
+SwipeToRefreshWithSchema.propTypes = props;
+
+export { SwipeToRefresh, SwipeToRefreshWithSchema };

package/esm/SwipeToRefresh/styled.js

@@ -0,0 +1,17 @@
+import { Grid } from '@elliemae/ds-grid';
+import styled from 'styled-components';
+
+const SwipeContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-pbpd8a-0"
+})(["transition:height 0.2s;overscroll-behavior:none;height:100%;"]);
+const SwipeDrag = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pbpd8a-1"
+})(["border:none;overscroll-behavior:none;overflow:auto;max-height:100%;"]);
+const LoaderBox = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-pbpd8a-2"
+})(["transition:height 0.2s;overflow:hidden;"]);
+const PositionLoader = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-pbpd8a-3"
+})(["transition:margin 0.2s;"]);
+
+export { LoaderBox, PositionLoader, SwipeContainer, SwipeDrag };

package/{dist/esm → esm}/SwipeToRefresh/useSwipe.js

@@ -1,52 +1,69 @@
-import * as React from "react";
-import { useState, useRef } from "react";
-const useSwipe = ({ onRefresh, breakpoint }) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef } from 'react';
+
+const useSwipe = _ref => {
+  let {
+    onRefresh,
+    breakpoint
+  } = _ref;
   const [startingPoint, setStartingPoint] = useState(0);
   const [movingPoint, setMovingPoint] = useState(0);
   const ref = useRef();
   const height = movingPoint && startingPoint ? movingPoint - startingPoint : 0;
   const [allowRefresh, setAllowRefresh] = useState(false);
-  const callback = (entries) => {
-    const { isIntersecting } = entries[0];
+
+  const callback = entries => {
+    const {
+      isIntersecting
+    } = entries[0];
+
     if (isIntersecting) {
       setAllowRefresh(true);
     } else {
       setAllowRefresh(false);
     }
   };
+
   const target = useRef(null);
   const observer = useRef(null);
+
   if (observer.current) {
     observer.current.disconnect();
   }
+
   observer.current = new IntersectionObserver(callback, {
     root: null,
-    rootMargin: "0px",
+    rootMargin: '0px',
     threshold: 0.25
   });
+
   if (target.current) {
     observer.current.observe(target.current);
   }
-  const touchStart = (e) => {
-    const { scrollTop } = ref.current;
-    if (scrollTop < 5)
-      setStartingPoint(e.touches[0].clientY);
+
+  const touchStart = e => {
+    const {
+      scrollTop
+    } = ref.current;
+    if (scrollTop < 5) setStartingPoint(e.touches[0].clientY);
   };
+
   const touchEnd = () => {
-    if (height > breakpoint && allowRefresh && onRefresh)
-      onRefresh();
+    if (height > breakpoint && allowRefresh && onRefresh) onRefresh();
     setStartingPoint(0);
     setMovingPoint(0);
   };
+
   const touchCancel = () => {
-    if (height > breakpoint && onRefresh)
-      onRefresh();
+    if (height > breakpoint && onRefresh) onRefresh();
     setStartingPoint(0);
     setMovingPoint(0);
   };
-  const touchMove = (e) => {
+
+  const touchMove = e => {
     setMovingPoint(e.touches[0].clientY);
   };
+
   return {
     height,
     touchStart,
@@ -57,7 +74,5 @@ const useSwipe = ({ onRefresh, breakpoint }) => {
     target
   };
 };
-export {
-  useSwipe
-};
-//# sourceMappingURL=useSwipe.js.map
+
+export { useSwipe };

package/esm/Tabs/index.js

@@ -0,0 +1,45 @@
+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';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { describe } from 'react-desc';
+import { DSTabs, DSTab } from '@elliemae/ds-tabs';
+import { MobileTabsPropTypes, MobileTabPropTypes } from './propTypes.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children"],
+      _excluded2 = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DSMobileTabs = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(DSTabs, _objectSpread(_objectSpread({}, props), {}, {
+    isDSMobile: true,
+    children: children
+  }));
+};
+const DSMobileTab = _ref2 => {
+  let {
+    children
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/jsx(DSTab, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+};
+const DSMobileTabsWithSchema = describe(DSMobileTabs);
+DSMobileTabsWithSchema.propTypes = MobileTabsPropTypes;
+const DSMobileTabWithSchema = describe(DSMobileTab);
+DSMobileTabWithSchema.propTypes = MobileTabPropTypes;
+
+export { DSMobileTab, DSMobileTabWithSchema, DSMobileTabs, DSMobileTabsWithSchema };

package/esm/Tabs/propTypes.js

@@ -0,0 +1,23 @@
+import { PropTypes } from 'react-desc';
+
+const MobileTabPropTypes = {
+  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),
+  title: PropTypes.string.description('Tab title.').defaultValue(''),
+  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
+  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false)
+};
+const MobileTabsPropTypes = {
+  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
+  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tabs Bar.').defaultValue(undefined),
+  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
+  fixedTabsHeaders: PropTypes.bool.description('Enables fixed Tabs mode. Makes Tab Bar non scrollable and adds equal fixed widths.').defaultValue(false),
+  activeTab: PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
+  children: PropTypes.node.description('Use DSTab component as children.').isRequired,
+  tabsListAriaLabel: PropTypes.string.description('Aria label for the Tab list.').defaultValue('Tab list.'),
+  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('Ref to the container.').defaultValue(undefined)
+};
+
+export { MobileTabPropTypes, MobileTabsPropTypes };

package/esm/index.js

@@ -0,0 +1,44 @@
+export { DSMobilePageList, DSPageList } from './PageList/PageList.js';
+export { DSPageFilter } from './PageFilter/PageFilter.js';
+export { DSMobilePageForm, DSPageForm } from './PageForm/PageForm.js';
+export { DSPageSummary } from './PageSummary/PageSummary.js';
+export { DSMobileLoadingPage } from './LoadingPage/Page.js';
+export { DSMobilePageSearch, DSPageSearch } from './PageSearch/PageSearch.js';
+export { DSMobileAccordion, DSMobileAccordionItem, DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema } from './Accordion/Accordion.js';
+export { default as DSMobileSeparator, MobileSeparatorWithSchema } from './MobileSeparator/Separator.js';
+export { DSMobileListItem, ListItemWithSchema } from './MobileListItem/MobileListItem.js';
+export { DSMobileTouchable } from './MobileTouchable/MobileTouchable.js';
+export { DSMobileContextMenu, DSMobileContextMenuWithSchema } from './MobileContextMenu/MobileContextMenu.js';
+export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema } from './MobileContextMenu/MobileContextMenuItem.js';
+export { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema } from './MobileContextMenu/MobileContextMenuGroup.js';
+export { DSMobileFilterbar, FilterbarWithSchema } from './MobileFilterbar/Filterbar.js';
+export { DSMobileFilterbarSort, FilterbarSortWithSchema } from './MobileFilterbar/FilterbarSort.js';
+export { DSMobileFilterbarItem, FilterbarItemWithSchema } from './MobileFilterbar/FilterbarItem.js';
+export { default as DSMobileActionToolbar, DSMobileActionToolbarWithSchema } from './MobileActionToolbar/MobileActionToolbar.js';
+export { DSToolbarItemWithSchema, default as ToolbarItem } from './MobileActionToolbar/MobileActionToolbarItem.js';
+export { default as DSMobileFooter, MobileFooterWithSchema } from './MobileFooter/Footer.js';
+export { DSMobileFooterText, DSMobileFooterTextWithSchema } from './MobileFooter/Text.js';
+export { DSMobileFooterAction, DSMobileFooterActionWithSchema } from './MobileFooter/Action.js';
+export { DSMobilePageHeader, PageHeaderWithSchema } from './MobilePageHeader/MobilePageHeader.js';
+export { DSMobileSelectList } from './MobileSelectList/MobileSelectList.js';
+export { DSMobileDatePicker, DSMobileDatePickerWithSchema } from './MobileDatePicker/MobileDatePicker.js';
+export { DSMobileTimePicker, DSMobileTimePickerWithSchema } from './MobileTimePicker/MobileTimePicker.js';
+export { DSMobileEmptyState, DSMobileEmptyStateWithSchema } from './MobileEmtpyState/MobileEmptyState.js';
+export { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema } from './MobileDropdownMenu/MobileDropdownMenu.js';
+export { DSMobileDropdownTriggerInput } from './MobileDropdownMenu/MobileDropdownInput.js';
+export { DSMobileTab, DSMobileTabWithSchema, DSMobileTabs, DSMobileTabsWithSchema } from './Tabs/index.js';
+export { DSMobileCard } from './MobileCard/index.js';
+export { DSCollectionBox, DSCollectionBoxWithSchema } from './CollectionBox/CollectionBox.js';
+export { DSCategoryBox, DSCategoryBoxWithSchema } from './CategoryBox/CategoryBox.js';
+export { DSGroupBox, DSGroupBoxWithSchema } from './GroupBox/GroupBox.js';
+export { SwipeToRefresh, SwipeToRefreshWithSchema } from './SwipeToRefresh/SwipeToRefresh.js';
+export { DSGlobalHeader, DSGlobalHeaderWithSchema } from './GlobalHeader/MobileGlobalHeader.js';
+export { Modal, ModalWithSchema } from './Modal/Modal.js';
+export { DSSideNav, DSSideNavWithSchema } from './SideNav/SideNav.js';
+export { InfiniteLoader, InfiniteLoaderWithSchema } from './InfiniteLoader/Infiniteloader.js';
+export { VirtualizedInfiniteLoader, VirtualizedInfiniteLoaderWithSchema } from './InfiniteLoader/VirtualizedInfiniteLoader.js';
+export { DSMobileBanner, DSMobileBannerWithSchema } from './MobileBanner/MobileBanner.js';
+export { MOBILE_BANNER_TYPES } from './MobileBanner/utils/bannerTypes.js';
+export { DSMobileCardWithSchema } from './MobileCard/Card.js';
+export { DSMobileCardGroupWithSchema } from './MobileCard/Group.js';
+export { SubIcons } from './MobileCard/CardIcons.js';