@elliemae/ds-tabs 2.0.0-rc.9 → 2.0.2

package/esm/TabBar.js

@@ -1,410 +0,0 @@
-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';
-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;", ";"], _ref => {
-  let {
-    flexibleTabsHeaders
-  } = _ref;
-  return flexibleTabsHeaders ? '' : 'overflow-x: hidden';
-});
-const StyledTabList = aggregatedClasses('div')(blockName, 'list', _ref2 => {
-  let {
-    withCarousel,
-    flexibleTabsHeaders,
-    fixedTabsHeaders,
-    isDSMobile,
-    withLeftGradients,
-    withRightGradients
-  } = _ref2;
-  return {
-    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', _ref3 => {
-  let {
-    isActive,
-    showSeparator,
-    disabled
-  } = _ref3;
-  return {
-    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: "".concat(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=\"".concat(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 + 2 : clientWidth + 2;
-    return {
-      height: clientHeight,
-      left: "".concat(Math.floor(leftOff), "px"),
-      // using left and top for ie compatibility
-      top: "".concat(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,10 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-
-const TabTypes = {
-  NORMAL: 'normal',
-  SUBTABS: 'subtabs'
-};
-const getTabTypes = () => Object.keys(TabTypes).map(key => TabTypes[key]);
-
-export { TabTypes, getTabTypes };

package/esm/TabsImpl.js

@@ -1,113 +0,0 @@
-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 _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-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,75 +0,0 @@
-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';
-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() {
-    super(...arguments);
-
-    _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": "".concat(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/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,51 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <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: {
-            defaultValue<T = unknown>(arg: T): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValidator;
-        };
-        /** tab title */
-        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: {
-            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: {
-            defaultValue<T = unknown>(arg: T): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValidator;
-        };
-    };
-};
-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;