@elliemae/ds-tabs 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/TabsImpl.js

@@ -1,107 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import TabsPanels from './TabsPanels.js';
-import TabBar from './TabBar.js';
-import SubTabBar from './SubTabBar.js';
-import { TabTypes } from './TabTypes.js';
-import { jsxs } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const blockName = 'tabs';
-const StyledTabsContainer = aggregatedClasses('div')(blockName);
-const StyledTabBarContainer = aggregatedClasses('div')(blockName, 'tab-bar-container');
-const TabBarComponentsByType = {
-  [TabTypes.NORMAL]: TabBar,
-  [TabTypes.SUBTABS]: SubTabBar
-};
-
-const TabsImpl = props => {
-  var _tabs$, _tabs$$props, _TabsPanels, _StyledTabBarContaine;
-
-  const {
-    animated,
-    children: tabs,
-    type,
-    tabBarExtraContent,
-    onTabChange,
-    enableMouseEvents,
-    innerRef,
-    onlyRenderActiveTab,
-    containerProps,
-    allowTextSelection,
-    tabsListAriaLabel,
-    activeTab,
-    firstSubtabRef,
-    lastTabRef,
-    withCarousel,
-    flexibleTabsHeaders,
-    fixedTabsHeaders,
-    isDSMobile
-  } = props;
-  const [actualActiveTab, setActualActiveTab] = useState(activeTab || (tabs === null || tabs === void 0 ? void 0 : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : (_tabs$$props = _tabs$.props) === null || _tabs$$props === void 0 ? void 0 : _tabs$$props.tabId));
-  const firstTabRefByParent = useRef(null);
-  const lastTabRefByParent = useRef(null);
-  useEffect(() => {
-    if (activeTab) {
-      setActualActiveTab(activeTab);
-    }
-  }, [activeTab]);
-  const handleTabClick = useCallback(tab => {
-    setActualActiveTab(tab);
-    onTabChange(tab);
-  }, [onTabChange]);
-  const handleDownArrow = useCallback(e => {
-    var _firstTabRefByParent$;
-
-    e.preventDefault();
-    e.stopPropagation();
-    if (firstTabRefByParent !== null && firstTabRefByParent !== void 0 && firstTabRefByParent.current) (_firstTabRefByParent$ = firstTabRefByParent.current) === null || _firstTabRefByParent$ === void 0 ? void 0 : _firstTabRefByParent$.focus();
-  }, [firstTabRefByParent]);
-  const handleUpArrow = useCallback(e => {
-    var _lastTabRef$current;
-
-    e.preventDefault();
-    e.stopPropagation();
-    if (lastTabRef !== null && lastTabRef !== void 0 && lastTabRef.current) (_lastTabRef$current = lastTabRef.current) === null || _lastTabRef$current === void 0 ? void 0 : _lastTabRef$current.focus();
-  }, [lastTabRef]);
-  const PureTabBarComponent = useMemo(() => {
-    const TabBarComponent = TabBarComponentsByType[type] || TabBar;
-    return /*#__PURE__*/_jsx(TabBarComponent, {
-      withCarousel: withCarousel,
-      activeTab: actualActiveTab,
-      onTabClick: handleTabClick,
-      tabs: tabs,
-      firstSubtabRef: firstSubtabRef,
-      lastTabRef: lastTabRefByParent,
-      handleDownArrow: handleDownArrow,
-      handleUpArrow: handleUpArrow,
-      isDSMobile: isDSMobile,
-      flexibleTabsHeaders: flexibleTabsHeaders,
-      fixedTabsHeaders: fixedTabsHeaders
-    });
-  }, [type, withCarousel, actualActiveTab, handleTabClick, tabs, firstSubtabRef, lastTabRefByParent, handleDownArrow, handleUpArrow, isDSMobile]);
-  const PureTabsPanels = useMemo(() => _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx(TabsPanels, {
-    activeTab: actualActiveTab,
-    allowTextSelection: allowTextSelection,
-    animated: animated,
-    enableMouseEvents: enableMouseEvents,
-    onlyRenderActiveTab: onlyRenderActiveTab,
-    onTabChange: handleTabClick,
-    tabsComponents: tabs,
-    lastTabRef: lastTabRefByParent,
-    firstTabRefByParent: firstTabRefByParent
-  })), [actualActiveTab, allowTextSelection, animated, enableMouseEvents, onlyRenderActiveTab, handleTabClick, tabs, lastTabRefByParent, firstTabRefByParent]);
-  const PureTabsImpl = useMemo(() => /*#__PURE__*/jsxs(StyledTabsContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
-    "aria-label": tabsListAriaLabel,
-    innerRef: innerRef,
-    role: "tablist",
-    children: [_StyledTabBarContaine || (_StyledTabBarContaine = /*#__PURE__*/_jsx(StyledTabBarContainer, {}, void 0, PureTabBarComponent, tabBarExtraContent)), PureTabsPanels]
-  })), [containerProps, tabsListAriaLabel, innerRef, PureTabBarComponent, tabBarExtraContent, PureTabsPanels]);
-  return PureTabsImpl;
-};
-
-export { TabsImpl as default };

package/esm/TabsPanels.js

@@ -1,72 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import SwipeableViews from 'react-swipeable-views';
-import PanelContainer from './PanelContainer.js';
-
-const blockName = 'tabs-panels';
-const Panels = aggregatedClasses('div')(blockName);
-
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-
-const getIdByIndex = (children, index) => children && children[index].props.tabId;
-
-class TabsPanels extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "renderPanels", memoizeOne((activeTab, tabsComponents) => {
-      const {
-        animated,
-        onlyRenderActiveTab,
-        allowTextSelection
-      } = this.props;
-      return React.Children.map(tabsComponents, tab => {
-        const {
-          tabId: panelId,
-          style,
-          children: content
-        } = tab.props;
-        const isActive = activeTab === panelId;
-        const shouldRender = !onlyRenderActiveTab || isActive;
-        return /*#__PURE__*/_jsx(PanelContainer, {
-          "aria-labelledby": `${panelId}-label`,
-          lastTabRef: this.props.lastTabRef,
-          firstSubtabRef: this.props.firstTabRefByParent,
-          classProps: {
-            isActive
-          },
-          "data-panel-id": panelId,
-          hidden: !animated && !isActive,
-          onMouseDown: e => {
-            const role = e.target.getAttribute('role');
-            if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
-          },
-          role: "tabpanel",
-          style: style
-        }, panelId, shouldRender && content);
-      }, null);
-    }));
-  }
-
-  render() {
-    const {
-      activeTab,
-      tabsComponents,
-      animated,
-      onTabChange,
-      enableMouseEvents
-    } = this.props;
-    const panels = animated ? /*#__PURE__*/_jsx(SwipeableViews, {
-      enableMouseEvents: enableMouseEvents,
-      index: getIndexById(tabsComponents, activeTab),
-      onChangeIndex: index => onTabChange(getIdByIndex(tabsComponents, index))
-    }, void 0, this.renderPanels(activeTab, tabsComponents)) : this.renderPanels(activeTab, tabsComponents);
-    return /*#__PURE__*/_jsx(Panels, {}, void 0, panels);
-  }
-
-}
-
-export { TabsPanels as default };

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/useResize.js

@@ -1,20 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { debounce } from 'lodash';
-
-function useResize(ref, callback) {
-  var _ref$current;
-
-  const {
-    right,
-    left
-  } = (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect()) || {
-    right: null,
-    left: null
-  };
-  const handleResize = debounce(callback, 300);
-  useLayoutEffect(() => {
-    handleResize();
-  }, [right, left]);
-}
-
-export { useResize };

package/types/Carousel.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-declare const Carousel: {
-    ({ children, onScroll }: {
-        children: any;
-        onScroll: any;
-    }): JSX.Element;
-    defaultProps: {
-        onScroll: () => null;
-    };
-    propTypes: {
-        children: PropTypes.Validator<(PropTypes.ReactElementLike | null | undefined)[]>;
-        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
-export default Carousel;

package/types/DSTab.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-declare const DSTab: {
-    ({ tabId, title, required }: {
-        tabId?: string | undefined;
-        title?: string | undefined;
-        required?: boolean | undefined;
-    }): JSX.Element;
-    displayName: string;
-    propTypes: {
-        /** unique id for tab */
-        tabId: any;
-        /** tab title */
-        title: any;
-        /** Show a required mark next to the title */
-        required: any;
-        /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
-    };
-};
-declare const DSTabWithSchema: any;
-export { DSTab, DSTabWithSchema };
-export default DSTab;

package/types/PanelContainer.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-declare const PanelContainer: {
-    ({ children, lastTabRef, firstSubtabRef, ...rest }: {
-        [x: string]: any;
-        children: any;
-        lastTabRef: any;
-        firstSubtabRef: any;
-    }): JSX.Element;
-    propTypes: {
-        children: PropTypes.Requireable<any>;
-        firstSubtabRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-        lastTabRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-    };
-};
-export default PanelContainer;

package/types/SubTabBar.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-declare const SubTabBar: {
-    ({ withCarousel, tabs, activeTab, onTabClick, firstSubtabRef, handleUpArrow, }: {
-        withCarousel: any;
-        tabs?: never[] | undefined;
-        activeTab?: string | undefined;
-        onTabClick?: (() => null) | undefined;
-        firstSubtabRef: any;
-        handleUpArrow: any;
-    }): JSX.Element;
-    propTypes: {
-        tabs: PropTypes.Validator<(PropTypes.ReactElementLike | null | undefined)[]>;
-        activeTab: PropTypes.Requireable<string>;
-        onTabClick: PropTypes.Validator<(...args: any[]) => any>;
-        withCarousel: PropTypes.Requireable<boolean>;
-        handleUpArrow: PropTypes.Requireable<(...args: any[]) => any>;
-        firstSubtabRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-    };
-};
-export default SubTabBar;

package/types/TabBar.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="lodash" />
-import { Component } from 'react';
-declare class TabBar extends Component {
-    constructor(props: any);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    handleGradients(): void;
-    shouldHaveLeftGradient(scrollLeft: any, gWidth: any): boolean;
-    shouldHaveRightGradient(scrollLeft: any, gWidth: any, clientWidth: any, scrollWidth: any): boolean;
-    setIndicatorStyle(): void;
-    getActiveTabElement(activeTab: any): any;
-    isElementVisible(el: any, holder: any): boolean;
-    getVisibleDimensions(node: any, referenceNode: any): {
-        width: number;
-        height: number;
-    };
-    getIndicatorStyles(activeTab: any): {
-        height: any;
-        left: string;
-        top: string;
-        width: any;
-    } | null;
-    handleTabClick: (tabId: any, e: any) => void;
-    handleKeyPress: (tabId: any, e: any, index: any) => void;
-    handleTabsHeadersHorizontalScroll: import("lodash").DebouncedFunc<() => void>;
-    renderTabs: (this: any, activeTab: any, tabs: any) => any;
-    render(): any;
-}
-export default TabBar;

package/types/TabTypes.d.ts

@@ -1,5 +0,0 @@
-export declare const TabTypes: {
-    NORMAL: string;
-    SUBTABS: string;
-};
-export declare const getTabTypes: () => any[];

package/types/TabsImpl.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-declare const TabsImpl: {
-    (props: any): JSX.Element;
-    propTypes: {
-        animated: PropTypes.Requireable<boolean>;
-        enableMouseEvents: PropTypes.Requireable<boolean>;
-        allowTextSelection: PropTypes.Requireable<boolean>;
-        onTabChange: PropTypes.Requireable<(...args: any[]) => any>;
-        type: PropTypes.Requireable<string>;
-        tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        onlyRenderActiveTab: PropTypes.Requireable<boolean>;
-        withCarousel: PropTypes.Requireable<boolean>;
-        activeTab: PropTypes.Requireable<string>;
-        children: PropTypes.Validator<(PropTypes.InferProps<{
-            type: PropTypes.Requireable<any>;
-        }> | null | undefined)[]>;
-        tabsListAriaLabel: PropTypes.Requireable<string>;
-        containerProps: PropTypes.Requireable<object>;
-        innerRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-        firstSubtabRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-        lastTabRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
-            current: PropTypes.Requireable<any>;
-        }>>;
-        /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: PropTypes.Requireable<boolean>;
-        /** DSMobile only flexible tabs mode */
-        flexibleTabsHeaders: PropTypes.Requireable<boolean>;
-        /** DSMobile only fixed tabs mode */
-        fixedTabsHeaders: PropTypes.Requireable<boolean>;
-    };
-};
-export default TabsImpl;

package/types/TabsPanels.d.ts

@@ -1,5 +0,0 @@
-import { Component } from 'react';
-export default class TabsPanels extends Component {
-    renderPanels: (this: any, activeTab: any, tabsComponents: any) => any;
-    render(): JSX.Element;
-}

package/types/useResize.d.ts

@@ -1 +0,0 @@
-export declare function useResize(ref: any, callback: any): void;