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

package/esm/Carousel.js

@@ -1,186 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useRef, useState, useEffect } from 'react';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
-import styled from 'styled-components';
-import DSButton from '@elliemae/ds-button';
-import { useResize } from './useResize.js';
-import { jsx } from 'react/jsx-runtime';
-
-const CarouselBtn = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-1317h31-0"
-})(["position:absolute;z-index:1;margin:0;&:focus{& span{background-color:", ";background-size:90%;border-radius:2px;border-color:transparent;}}&&{width:16px;height:calc(100% - 2px);@media (min-width:", "){height:calc(100% - 4px);&:focus{& span{background-color:unset;}}}}", " && .em-ds-icon{height:16px;width:16px;}"], props => props.theme.colors.brand[200], ({
-  theme
-}) => theme.breakpoints.medium, props => props.right ? 'right: 0;' : 'left: 0;');
-const CarouselWrapper = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1317h31-1"
-})(["position:relative;padding:0 16px;width:100%;"]);
-const ChildrenWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1317h31-2"
-})(["display:flex;flex-wrap:nowrap;flex:1;overflow:hidden;"]);
-
-function isVisibleElement(el, container) {
-  const rect = el.getBoundingClientRect();
-  const cRect = container.getBoundingClientRect();
-  const elemLeft = rect.left + 3;
-  const elemRight = rect.right - 3; // Only completely visible elements return true:
-
-  const isVisible = elemLeft >= cRect.left && elemRight <= cRect.right;
-  return isVisible;
-}
-
-const Carousel = ({
-  children,
-  onScroll
-}) => {
-  const itemsRef = useRef([]);
-  const wrapRef = useRef(null);
-  const leftRef = useRef(null);
-  const rightRef = useRef(null);
-
-  const shouldShowLeft = () => children && children[0] && wrapRef.current && itemsRef.current[0] && !isVisibleElement(itemsRef.current[0], wrapRef.current);
-
-  const shouldShowRight = () => children && children[children.length - 1] && wrapRef.current && itemsRef.current[children.length - 1] && !isVisibleElement(itemsRef.current[children.length - 1], wrapRef.current);
-
-  const [{
-    right,
-    left,
-    CHEVRON_FOCUS_FLAG
-  }, setShow] = useState({
-    right: false,
-    left: false,
-    CHEVRON_FOCUS_FLAG: false // flag to replace lack of callback in useState hook
-
-  });
-
-  const recalcChevrons = () => setShow({
-    right: shouldShowRight(),
-    left: shouldShowLeft()
-  });
-
-  useEffect(() => {
-    recalcChevrons();
-  }, []);
-  useEffect(() => {
-    if (CHEVRON_FOCUS_FLAG) {
-      // focus opposite chevron when current one hides
-      if (!left && right && rightRef.current) {
-        rightRef.current.focus();
-      } else if (!right && left && leftRef.current) {
-        leftRef.current.focus();
-      }
-
-      setShow({
-        right,
-        left,
-        CHEVRON_FOCUS_FLAG: false
-      });
-    }
-  }, [CHEVRON_FOCUS_FLAG]);
-  useResize(wrapRef, recalcChevrons);
-
-  const getVisibleItemsOffset = () => itemsRef.current.reduce((acc, c) => {
-    if (isVisibleElement(c, wrapRef.current)) {
-      const styles = window.getComputedStyle(c);
-      const width = c.offsetWidth;
-      const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
-      return acc + (width + margin);
-    }
-
-    return acc;
-  }, 0);
-
-  const rightClick = () => {
-    wrapRef.current.scrollLeft += getVisibleItemsOffset();
-  };
-
-  const leftClick = () => {
-    wrapRef.current.scrollLeft -= getVisibleItemsOffset();
-  };
-
-  const handleScroll = e => {
-    // forces render when element.scrollTop is changed (out of react flow)
-    setShow({
-      right: shouldShowRight(),
-      left: shouldShowLeft(),
-      // to trigger focus logic at effect above
-      CHEVRON_FOCUS_FLAG: true
-    });
-    onScroll(e);
-  };
-
-  const handleClick = (e, onClick = () => {}) => {
-    const tabListDomEl = wrapRef.current;
-    const el = e.target;
-    const rect = el.getBoundingClientRect();
-    const cRect = tabListDomEl.getBoundingClientRect();
-
-    if (!isVisibleElement(el, tabListDomEl)) {
-      const containerWidth = cRect.width;
-      const halfContainer = containerWidth / 2;
-      const elementScrollPosition = rect.left - cRect.left;
-      const positionInContainer = elementScrollPosition % containerWidth;
-      const width = el.offsetWidth; // align to right
-
-      if (positionInContainer > halfContainer) {
-        wrapRef.current.scrollLeft += width + positionInContainer - containerWidth;
-      } else {
-        // align left
-        wrapRef.current.scrollLeft += positionInContainer;
-      }
-
-      recalcChevrons();
-    }
-
-    onClick(e);
-  };
-
-  return /*#__PURE__*/_jsx(CarouselWrapper, {}, void 0, left && /*#__PURE__*/_jsx(CarouselBtn, {
-    "data-testid": "chevron-left",
-    buttonType: "link",
-    innerRef: leftRef,
-    size: "s",
-    icon: /*#__PURE__*/_jsx(ChevronLeft, {
-      size: "s",
-      color: ['brand-primary', '600']
-    }),
-    onClick: leftClick,
-    tabIndex: -1
-  }), right && /*#__PURE__*/_jsx(CarouselBtn, {
-    "data-testid": "chevron-right",
-    innerRef: rightRef,
-    right: true,
-    size: "s",
-    buttonType: "link",
-    icon: /*#__PURE__*/_jsx(ChevronRight, {
-      size: "s",
-      color: ['brand-primary', '600']
-    }),
-    onClick: rightClick,
-    tabIndex: -1
-  }), /*#__PURE__*/jsx(ChildrenWrap, {
-    onScroll: handleScroll,
-    ref: wrapRef,
-    children: React.Children.map(children, (child, idx) => /*#__PURE__*/React.cloneElement(child, {
-      onClick: e => {
-        var _child$props;
-
-        return handleClick(e, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.onClick);
-      },
-      key: 'carousel'.concat(idx),
-      ref: el => {
-        itemsRef.current[idx] = el; // keep old refs
-
-        if (typeof child.ref === 'function') {
-          child.ref(el);
-        }
-      }
-    }))
-  }));
-};
-
-Carousel.defaultProps = {
-  onScroll: () => null
-};
-
-export { Carousel as default };

package/esm/DSTab.js

@@ -1,33 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-
-const DSTab = ({
-  tabId = '',
-  title = '',
-  required = false
-}) => /*#__PURE__*/_jsx("div", {
-  "aria-labelledby": `${tabId}-label`,
-  tabId: tabId,
-  title: title,
-  required: required
-});
-
-DSTab.displayName = 'DSTab';
-const props = {
-  /** unique id for tab */
-  tabId: PropTypes.string.description('unique id for tab'),
-
-  /** tab title */
-  title: PropTypes.string.description('tab title'),
-
-  /** Show a required mark next to the title */
-  required: PropTypes.bool.description('Show a required mark next to the title'),
-
-  /** Whether or not it's a ds-tab from DSMobile tabs */
-  isDSMobile: PropTypes.bool.description("Whether or not it's a ds-tab from DSMobile tabs")
-};
-const DSTabWithSchema = describe(DSTab);
-DSTabWithSchema.propTypes = props;
-
-export { DSTab, DSTabWithSchema, DSTab as default };

package/esm/SubTabBar.js

@@ -1,39 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import TabBar from './TabBar.js';
-import Carousel from './Carousel.js';
-
-const blockName = 'tabs-tab-bar';
-const SubTabList = aggregatedClasses('div')(blockName, 'subtabs-list', ({
-  withCarousel
-}) => ({
-  carousel: withCarousel
-}));
-
-const SubTabBar = ({
-  withCarousel,
-  tabs = [],
-  activeTab = '',
-  onTabClick = () => null,
-  firstSubtabRef,
-  handleUpArrow
-}) => /*#__PURE__*/_jsx(TabBar, {
-  activeTab: activeTab,
-  onTabClick: onTabClick,
-  handleUpArrow: handleUpArrow,
-  firstSubtabRef: firstSubtabRef,
-  renderCustomTabBar: ({
-    tabsComponents,
-    innerRef
-  }) => /*#__PURE__*/_jsx(SubTabList, {
-    withCarousel: withCarousel,
-    innerRef: innerRef,
-    "data-testid": "subtabs-list"
-  }, void 0, withCarousel ? /*#__PURE__*/_jsx(Carousel, {}, void 0, tabsComponents) : tabsComponents),
-  showSelectionIndicator: false,
-  showSeparator: true,
-  tabs: tabs
-});
-
-export { SubTabBar as default };

package/esm/TabBar.js

@@ -1,399 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { Component } from 'react';
-import { debounce } from 'lodash';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import RequiredMark from '@elliemae/ds-form/RequiredMark';
-import memoizeOne from 'memoize-one';
-import { ResizeObserver } from 'resize-observer';
-import styled from 'styled-components';
-import Carousel from './Carousel.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-const blockName = 'tabs-tab-bar';
-const gradientWidth = 24;
-const StyledTabWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-7sdovg-0"
-})(["display:flex;flex:1;flex-wrap:nowrap;", ";"], ({
-  flexibleTabsHeaders
-}) => flexibleTabsHeaders ? '' : 'overflow-x: hidden');
-const StyledTabList = aggregatedClasses('div')(blockName, 'list', ({
-  withCarousel,
-  flexibleTabsHeaders,
-  fixedTabsHeaders,
-  isDSMobile,
-  withLeftGradients,
-  withRightGradients
-}) => ({
-  carousel: withCarousel,
-  'flexible-table-headers': isDSMobile && flexibleTabsHeaders,
-  'fixed-table-headers': isDSMobile && fixedTabsHeaders,
-  'left-gradients': isDSMobile && flexibleTabsHeaders && withLeftGradients,
-  'right-gradients': isDSMobile && flexibleTabsHeaders && withRightGradients
-}), {
-  propsToRemoveFromFinalElement: ['withCarousel', 'flexibleTabsHeaders', 'fixedTabsHeaders', 'withLeftGradients', 'withRightGradients', 'isDSMobile']
-});
-const TabContainer = aggregatedClasses('button', {
-  role: 'tab'
-})(blockName, 'tab', ({
-  isActive,
-  showSeparator,
-  disabled
-}) => ({
-  active: isActive,
-  separator: showSeparator,
-  disabled
-}));
-const SelectionIndicator = aggregatedClasses('div')(blockName, 'selection-indicator');
-
-class TabBar extends Component {
-  constructor(_props) {
-    super(_props);
-
-    _defineProperty(this, "handleTabClick", (tabId, e) => {
-      const {
-        tabListRef,
-        props
-      } = this;
-      const {
-        onTabClick,
-        flexibleTabsHeaders,
-        isDSMobile
-      } = props;
-
-      if (isDSMobile && flexibleTabsHeaders) {
-        const tabListDomEl = tabListRef.current;
-        const el = e.target;
-        const {
-          offsetLeft
-        } = el;
-        const {
-          width: elWidth
-        } = el.getBoundingClientRect();
-        const {
-          width: listWidth
-        } = tabListDomEl.getBoundingClientRect();
-        const extraSideSpace = listWidth - elWidth;
-        const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-        const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-        tabListDomEl.scrollTo({
-          top: 0,
-          left: centeredLeftOffset,
-          behavior: 'smooth'
-        });
-      }
-
-      e.preventDefault();
-      onTabClick(tabId);
-    });
-
-    _defineProperty(this, "handleKeyPress", (tabId, e, index) => {
-      const {
-        tabs,
-        handleDownArrow,
-        handleUpArrow // onTabClick,
-
-      } = this.props;
-
-      if (e.keyCode === 39) {
-        var _this$tabsRef;
-
-        const nextTab = tabs[index + 1];
-        if (!nextTab && handleDownArrow) handleDownArrow(e);
-        if (!nextTab) return; // const { props } = nextTab
-        // onTabClick(props.tabId)
-
-        (_this$tabsRef = this.tabsRef[index + 1]) === null || _this$tabsRef === void 0 ? void 0 : _this$tabsRef.focus();
-      }
-
-      if (e.keyCode === 37) {
-        var _this$tabsRef2;
-
-        const nextTab = tabs[index - 1];
-        if (!nextTab && handleUpArrow) handleUpArrow(e);
-        if (!nextTab) return; // const { props } = nextTab
-        // onTabClick(props.tabId)
-
-        (_this$tabsRef2 = this.tabsRef[index - 1]) === null || _this$tabsRef2 === void 0 ? void 0 : _this$tabsRef2.focus();
-      }
-
-      if (e.keyCode === 40 && handleDownArrow) {
-        handleDownArrow(e);
-      }
-
-      if (e.keyCode === 38 && handleUpArrow) {
-        handleUpArrow(e);
-      }
-    });
-
-    _defineProperty(this, "handleTabsHeadersHorizontalScroll", debounce(() => {
-      const {
-        tabListRef,
-        props
-      } = this;
-      const {
-        flexibleTabsHeaders,
-        isDSMobile
-      } = props;
-
-      if (isDSMobile && flexibleTabsHeaders) {
-        const tabListDomEl = tabListRef.current;
-        const {
-          scrollLeft,
-          scrollWidth,
-          clientWidth
-        } = tabListDomEl;
-        const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);
-        const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);
-        this.setState({
-          withLeftGradients,
-          withRightGradients
-        });
-      }
-    }, 50));
-
-    _defineProperty(this, "renderTabs", memoizeOne((activeTab, tabs) => {
-      const {
-        showSeparator
-      } = this.props;
-      return React.Children.map(tabs, (tab, index) => {
-        const {
-          tabId,
-          title,
-          style,
-          required,
-          disabled
-        } = tab.props;
-        const isActive = activeTab === tabId;
-        return [/*#__PURE__*/jsxs(TabContainer, {
-          // eslint-disable-next-line no-return-assign
-          ref: t => {
-            this.tabsRef[index] = t;
-
-            if (index === 0 && this.props.firstSubtabRef) {
-              this.props.firstSubtabRef.current = t;
-            }
-
-            if (index === tabs.length - 1 && this.props.lastTabRef) {
-              this.props.lastTabRef.current = t;
-            }
-          },
-          "aria-controls": tabId,
-          "aria-selected": isActive,
-          "aria-disabled": !!disabled,
-          classProps: {
-            isActive,
-            showSeparator,
-            disabled
-          },
-          "data-tab-id": tabId,
-          id: `${tabId}-label`,
-          onClick: e => {
-            if (!disabled) this.handleTabClick(tabId, e, index);
-          },
-          onKeyDown: e => {
-            if (!disabled) this.handleKeyPress(tabId, e, index);
-          },
-          style: style,
-          tabIndex: 0,
-          children: [title, /*#__PURE__*/_jsx(RequiredMark, {
-            required: required
-          })]
-        }, tabId)];
-      }, null);
-    }));
-
-    this.tabListRef = /*#__PURE__*/React.createRef();
-    this.resizeObserver = new ResizeObserver(() => this.setIndicatorStyle());
-    this.state = {
-      indicatorStyle: null,
-      withLeftGradients: false,
-      withRightGradients: false
-    };
-    this.setIndicatorStyle = this.setIndicatorStyle.bind(this);
-    this.getIndicatorStyles = this.getIndicatorStyles.bind(this);
-    this.handleGradients = this.handleGradients.bind(this);
-    this.handleTabsHeadersHorizontalScroll = this.handleTabsHeadersHorizontalScroll.bind(this);
-    this.tabsRef = {};
-    this.setIndicatorStyle = this.setIndicatorStyle.bind(this);
-  }
-
-  componentDidMount() {
-    const {
-      showSelectionIndicator
-    } = this.props;
-    this.resizeObserver.observe(this.tabListRef.current);
-
-    if (showSelectionIndicator) {
-      this.setIndicatorStyle();
-    }
-
-    window.addEventListener('resize', this.handleGradients);
-    window.addEventListener('orientationchange', this.handleGradients);
-    this.handleGradients();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      activeTab,
-      showSelectionIndicator
-    } = this.props;
-
-    if (showSelectionIndicator && prevProps.activeTab !== activeTab) {
-      this.setIndicatorStyle(activeTab);
-    }
-  }
-
-  componentWillUnmount() {
-    this.resizeObserver.unobserve(this.tabListRef.current);
-    window.removeEventListener('resize', this.handleGradients);
-    window.removeEventListener('orientationchange', this.handleGradients);
-  }
-
-  handleGradients() {
-    const {
-      scrollLeft,
-      scrollWidth,
-      clientWidth
-    } = this.tabListRef.current;
-    const withLeftGradients = this.shouldHaveLeftGradient(scrollLeft, gradientWidth);
-    const withRightGradients = this.shouldHaveRightGradient(scrollLeft, gradientWidth, clientWidth, scrollWidth);
-    this.setState({
-      withLeftGradients,
-      withRightGradients
-    });
-  }
-
-  shouldHaveLeftGradient(scrollLeft, gWidth) {
-    return Math.abs(scrollLeft) > gWidth;
-  } // eslint-disable-next-line max-params
-
-
-  shouldHaveRightGradient(scrollLeft, gWidth, clientWidth, scrollWidth) {
-    return Math.abs(scrollLeft) <= scrollWidth - (clientWidth + gWidth);
-  }
-
-  setIndicatorStyle() {
-    const {
-      activeTab
-    } = this.props;
-    setTimeout(() => this.setState({
-      indicatorStyle: this.getIndicatorStyles(activeTab)
-    }), 100);
-  }
-
-  getActiveTabElement(activeTab) {
-    const tabListEl = this.tabListRef.current;
-    const tabSelector = `[data-tab-id="${activeTab}"]`;
-    return tabListEl && tabListEl.querySelector(tabSelector);
-  }
-
-  isElementVisible(el, holder) {
-    const {
-      left,
-      right,
-      width
-    } = el.getBoundingClientRect();
-    const holderRect = holder.getBoundingClientRect();
-    return left <= holderRect.left ? holderRect.left - left <= width : right - holderRect.right <= width;
-  }
-
-  getVisibleDimensions(node, referenceNode) {
-    const pos = node.getBoundingClientRect();
-    const referencePos = referenceNode.getBoundingClientRect();
-    return {
-      width: Math.min(node.clientWidth, referencePos.left + referenceNode.clientWidth - pos.left, node.clientWidth - (referencePos.left - pos.left)),
-      height: Math.min(node.clientHeight, referencePos.top + referenceNode.clientHeight - pos.top, node.clientHeight - (referencePos.top - pos.top))
-    };
-  }
-
-  getIndicatorStyles(activeTab) {
-    const tabListEl = this.tabListRef.current;
-    const {
-      withCarousel
-    } = this.props;
-    const activeTabEl = this.getActiveTabElement(activeTab);
-    if (!activeTabEl || !this.isElementVisible(activeTabEl, tabListEl)) return null;
-    const {
-      clientHeight,
-      clientWidth,
-      offsetTop,
-      offsetLeft
-    } = activeTabEl;
-    const {
-      left
-    } = activeTabEl.getBoundingClientRect();
-    const leftOff = withCarousel ? Math.max(0, left - tabListEl.getBoundingClientRect().left) : offsetLeft;
-    const width = withCarousel ? this.getVisibleDimensions(activeTabEl, tabListEl).width : clientWidth + 2;
-    return {
-      height: clientHeight,
-      left: `${Math.floor(leftOff)}px`,
-      // using left and top for ie compatibility
-      top: `${Math.floor(offsetTop)}px`,
-      width
-    };
-  }
-
-  render() {
-    const {
-      id,
-      tabs,
-      activeTab,
-      renderCustomTabBar,
-      withCarousel,
-      isDSMobile,
-      flexibleTabsHeaders,
-      fixedTabsHeaders
-    } = this.props;
-    const {
-      indicatorStyle,
-      withLeftGradients,
-      withRightGradients
-    } = this.state;
-
-    if (renderCustomTabBar) {
-      return renderCustomTabBar({
-        innerRef: this.tabListRef,
-        withCarousel,
-        tabsComponents: this.renderTabs(activeTab, tabs)
-      });
-    }
-
-    const shouldUseCarousel = !isDSMobile && withCarousel;
-    return /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/_jsx(StyledTabList, {
-        withCarousel: withCarousel,
-        "aria-label": id,
-        innerRef: this.tabListRef,
-        role: "tablist",
-        "data-testid": "tab-list",
-        isDSMobile: isDSMobile,
-        flexibleTabsHeaders: flexibleTabsHeaders,
-        withLeftGradients: withLeftGradients,
-        withRightGradients: withRightGradients,
-        fixedTabsHeaders: fixedTabsHeaders,
-        onScroll: this.handleTabsHeadersHorizontalScroll,
-        style: {
-          width: '100%'
-        }
-      }, void 0, /*#__PURE__*/_jsx(StyledTabWrapper, {
-        isDSMobile: isDSMobile,
-        flexibleTabsHeaders: flexibleTabsHeaders,
-        fixedTabsHeaders: fixedTabsHeaders
-      }, void 0, shouldUseCarousel ? /*#__PURE__*/_jsx(Carousel, {
-        onScroll: this.setIndicatorStyle
-      }, void 0, this.renderTabs(activeTab, tabs)) : null, !shouldUseCarousel ? this.renderTabs(activeTab, tabs) : null, /*#__PURE__*/_jsx(SelectionIndicator, {
-        style: indicatorStyle
-      })))
-    });
-  }
-
-}
-
-TabBar.defaultProps = {
-  showSelectionIndicator: true,
-  showSeparator: false,
-  isDSMobile: false
-};
-
-export { TabBar as default };

package/esm/TabTypes.js

@@ -1,7 +0,0 @@
-const TabTypes = {
-  NORMAL: 'normal',
-  SUBTABS: 'subtabs'
-};
-const getTabTypes = () => Object.keys(TabTypes).map(key => TabTypes[key]);
-
-export { TabTypes, getTabTypes };