@elliemae/ds-tabs 2.0.0-rc.1 → 2.0.0-rc.10

package/cjs/TabBar.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
@@ -17,7 +16,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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RequiredMark__default = /*#__PURE__*/_interopDefaultLegacy(RequiredMark);
 var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
@@ -72,7 +70,7 @@ class TabBar extends React.Component {
   constructor(_props) {
     super(_props);
 
-    _defineProperty__default["default"](this, "handleTabClick", (tabId, e) => {
+    this.handleTabClick = (tabId, e) => {
       const {
         tabListRef,
         props
@@ -107,9 +105,9 @@ class TabBar extends React.Component {
 
       e.preventDefault();
       onTabClick(tabId);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleKeyPress", (tabId, e, index) => {
+    this.handleKeyPress = (tabId, e, index) => {
       const {
         tabs,
         handleDownArrow,
@@ -146,9 +144,9 @@ class TabBar extends React.Component {
       if (e.keyCode === 38 && handleUpArrow) {
         handleUpArrow(e);
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleTabsHeadersHorizontalScroll", lodash.debounce(() => {
+    this.handleTabsHeadersHorizontalScroll = lodash.debounce(() => {
       const {
         tabListRef,
         props
@@ -172,9 +170,8 @@ class TabBar extends React.Component {
           withRightGradients
         });
       }
-    }, 50));
-
-    _defineProperty__default["default"](this, "renderTabs", memoizeOne__default["default"]((activeTab, tabs) => {
+    }, 50);
+    this.renderTabs = memoizeOne__default["default"]((activeTab, tabs) => {
       const {
         showSeparator
       } = this.props;
@@ -223,8 +220,7 @@ class TabBar extends React.Component {
           })]
         }, tabId)];
       }, null);
-    }));
-
+    });
     this.tabListRef = /*#__PURE__*/React__default["default"].createRef();
     this.resizeObserver = new resizeObserver.ResizeObserver(() => this.setIndicatorStyle());
     this.state = {

package/cjs/TabsPanels.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
@@ -14,7 +13,6 @@ var PanelContainer = require('./PanelContainer.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
 var SwipeableViews__default = /*#__PURE__*/_interopDefaultLegacy(SwipeableViews);
@@ -29,8 +27,7 @@ const getIdByIndex = (children, index) => children && children[index].props.tabI
 class TabsPanels extends React.Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty__default["default"](this, "renderPanels", memoizeOne__default["default"]((activeTab, tabsComponents) => {
+    this.renderPanels = memoizeOne__default["default"]((activeTab, tabsComponents) => {
       const {
         animated,
         onlyRenderActiveTab,
@@ -61,7 +58,7 @@ class TabsPanels extends React.Component {
           style: style
         }, panelId, shouldRender && content);
       }, null);
-    }));
+    });
   }
 
   render() {

package/esm/TabBar.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import React, { Component } from 'react';
@@ -61,7 +60,7 @@ class TabBar extends Component {
   constructor(_props) {
     super(_props);
 
-    _defineProperty(this, "handleTabClick", (tabId, e) => {
+    this.handleTabClick = (tabId, e) => {
       const {
         tabListRef,
         props
@@ -96,9 +95,9 @@ class TabBar extends Component {
 
       e.preventDefault();
       onTabClick(tabId);
-    });
+    };
 
-    _defineProperty(this, "handleKeyPress", (tabId, e, index) => {
+    this.handleKeyPress = (tabId, e, index) => {
       const {
         tabs,
         handleDownArrow,
@@ -135,9 +134,9 @@ class TabBar extends Component {
       if (e.keyCode === 38 && handleUpArrow) {
         handleUpArrow(e);
       }
-    });
+    };
 
-    _defineProperty(this, "handleTabsHeadersHorizontalScroll", debounce(() => {
+    this.handleTabsHeadersHorizontalScroll = debounce(() => {
       const {
         tabListRef,
         props
@@ -161,9 +160,8 @@ class TabBar extends Component {
           withRightGradients
         });
       }
-    }, 50));
-
-    _defineProperty(this, "renderTabs", memoizeOne((activeTab, tabs) => {
+    }, 50);
+    this.renderTabs = memoizeOne((activeTab, tabs) => {
       const {
         showSeparator
       } = this.props;
@@ -212,8 +210,7 @@ class TabBar extends Component {
           })]
         }, tabId)];
       }, null);
-    }));
-
+    });
     this.tabListRef = /*#__PURE__*/React.createRef();
     this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());
     this.state = {

package/esm/TabsPanels.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
@@ -19,8 +18,7 @@ const getIdByIndex = (children, index) => children && children[index].props.tabI
 class TabsPanels extends Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty(this, "renderPanels", memoizeOne((activeTab, tabsComponents) => {
+    this.renderPanels = memoizeOne((activeTab, tabsComponents) => {
       const {
         animated,
         onlyRenderActiveTab,
@@ -51,7 +49,7 @@ class TabsPanels extends Component {
           style: style
         }, panelId, shouldRender && content);
       }, null);
-    }));
+    });
   }
 
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -72,20 +72,27 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-classnames": "2.0.0-rc.1",
-    "@elliemae/ds-form": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
+    "@elliemae/ds-button": "2.0.0-rc.10",
+    "@elliemae/ds-classnames": "2.0.0-rc.10",
+    "@elliemae/ds-form": "2.0.0-rc.10",
+    "@elliemae/ds-icons": "2.0.0-rc.10",
     "memoize-one": "~5.1.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-swipeable-views": "~0.13.9",
     "resize-observer": "~1.0.2"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3"
+  },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSTab.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSTab: {
     ({ tabId, title, required }: {
@@ -8,15 +9,43 @@ declare const DSTab: {
     displayName: string;
     propTypes: {
         /** unique id for tab */
-        tabId: any;
+        tabId: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** tab title */
-        title: any;
+        title: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Show a required mark next to the title */
-        required: any;
+        required: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
+        isDSMobile: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSTabWithSchema: any;
+declare const DSTabWithSchema: {
+    (props?: {
+        tabId?: string | undefined;
+        title?: string | undefined;
+        required?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSTab, DSTabWithSchema };
 export default DSTab;

package/types/DSTabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSTabs: {
     ({ containerProps, innerRef, animated, enableMouseEvents, allowTextSelection, onTabChange, tabsListAriaLabel, type, tabBarExtraContent, children: tabs, onlyRenderActiveTab, activeTab, withCarousel, firstSubtabRef, lastTabRef, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, }: {
@@ -22,43 +23,151 @@ declare const DSTabs: {
     }): JSX.Element;
     propTypes: {
         /** Whether the tab transition should animate or not */
-        animated: any;
+        animated: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Enables tab transition with mouse drag events */
-        enableMouseEvents: any;
+        enableMouseEvents: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Allow text selection when mouse drag events are active */
-        allowTextSelection: any;
+        allowTextSelection: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Handler when a user clicks on a different tab */
-        onTabChange: any;
+        onTabChange: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Tab type */
-        type: any;
+        type: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Extra content next to the tabs pills */
-        tabBarExtraContent: any;
+        tabBarExtraContent: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Only renders the active tab in the DOM */
-        onlyRenderActiveTab: any;
+        onlyRenderActiveTab: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Mobile only flexible tabs mode */
-        flexibleTabsHeaders: any;
+        flexibleTabsHeaders: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Mobile only fixed tabs mode */
-        fixedTabsHeaders: any;
+        fixedTabsHeaders: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
+        isDSMobile: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Activate carousel behavior */
-        withCarousel: any;
+        withCarousel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** The active tabId */
-        activeTab: any;
+        activeTab: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** tabs children */
         children: any;
         /** Aria label for the list */
-        tabsListAriaLabel: any;
+        tabsListAriaLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** Additional properties for the container */
-        containerProps: any;
+        containerProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** REF */
-        innerRef: any;
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** internal ref to handle keyboard a11y behavior */
-        firstSubtabRef: any;
+        firstSubtabRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         /** internal ref to handle keyboard a11y behavior */
-        lastTabRef: any;
+        lastTabRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSTabsWithSchema: any;
+declare const DSTabsWithSchema: {
+    (props?: {
+        containerProps?: {} | undefined;
+        innerRef: any;
+        animated?: boolean | undefined;
+        enableMouseEvents?: boolean | undefined;
+        allowTextSelection?: boolean | undefined;
+        onTabChange?: (() => null) | undefined;
+        tabsListAriaLabel?: string | undefined;
+        type?: string | undefined;
+        tabBarExtraContent?: undefined;
+        children: any;
+        onlyRenderActiveTab?: boolean | undefined;
+        activeTab: any;
+        withCarousel?: boolean | undefined;
+        firstSubtabRef: any;
+        lastTabRef: any;
+        flexibleTabsHeaders: any;
+        fixedTabsHeaders: any;
+        isDSMobile?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema; /** Handler when a user clicks on a different tab */
+};
 export { DSTabs, DSTabsWithSchema };
 export default DSTabs;