@elliemae/ds-tabs 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/parts/carousel/styles.js

@@ -1,50 +1,54 @@
-import * as React from "react";
-import styled from "styled-components";
-import { DSButtonV2 } from "@elliemae/ds-button";
-import { TabTypes } from "../../utils/constants";
-const StyledCarouselBtn = styled(DSButtonV2)`
-  margin: 0;
-  min-width: ${({ theme }) => theme.space.xs};
-  width: ${({ theme }) => theme.space.xs};
+import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { TabTypes } from '../../utils/constants.js';
 
-  &:hover:not(:disabled) {
-    background-color: transparent;
-  }
-  background-color: transparent;
-  border-radius: 0px;
+const StyledCarouselBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-prv5a7-0"
+})(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.xs;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand[600];
+});
+const StyledCarouselWrapper = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-prv5a7-1"
+})(["position:relative;width:100%;display:flex;"]);
+const StyledChildrenWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-prv5a7-2"
+})(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
+const StyledCarouselButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-prv5a7-3"
+})(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
+  let {
+    right
+  } = _ref4;
+  return right ? 'right: 0;' : "left: 0;";
+}, _ref5 => {
+  let {
+    tabType
+  } = _ref5;
+  return tabType === TabTypes.NORMAL ? '32px' : '22px';
+}, _ref6 => {
+  let {
+    tabType
+  } = _ref6;
+  return tabType === TabTypes.NORMAL ? '5px' : '0px';
+}, _ref7 => {
+  let {
+    theme,
+    tabType
+  } = _ref7;
+  return tabType === TabTypes.NORMAL ? "\n      background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
+});
 
-  & .em-ds-icon svg {
-    fill: ${({ theme }) => theme.colors.brand[600]};
-  }
-`;
-const StyledCarouselWrapper = styled.span`
-  position: relative;
-  width: 100%;
-  display: flex;
-`;
-const StyledChildrenWrap = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  flex: 1;
-  overflow-x: hidden;
-`;
-const StyledCarouselButtonWrapper = styled.div`
-  max-width: 16px;
-  position: absolute;
-  z-index: 200;
-  ${({ right }) => right ? "right: 0;" : `left: 0;`}
-  width: 16px;
-  height: ${({ tabType }) => tabType === TabTypes.NORMAL ? "32px" : "22px"};
-  padding-top: ${({ tabType }) => tabType === TabTypes.NORMAL ? "5px" : "0px"};
-  background: white;
-  ${({ theme, tabType }) => tabType === TabTypes.NORMAL ? `
-      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
- ` : ``};
-`;
-export {
-  StyledCarouselBtn,
-  StyledCarouselButtonWrapper,
-  StyledCarouselWrapper,
-  StyledChildrenWrap
-};
-//# sourceMappingURL=styles.js.map
+export { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap };

package/esm/parts/carousel/useCarousel.js

@@ -1,20 +1,34 @@
-import * as React from "react";
-import { useCallback, useState, useContext } from "react";
-import useResizeObserver from "@react-hook/resize-observer";
-import { DSTabsContext } from "../../DSTabsCTX";
-import { isElementVisibleCarousel } from "../../utils/helpers";
-import { useCarouselCallbacks } from "./useCarouselCallbacks";
-const useCarousel = ({ updateIndicatorStyle }) => {
-  const { carouselOnlyListRef } = useContext(DSTabsContext);
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { useContext, useState, useCallback } from 'react';
+import useResizeObserver from '@react-hook/resize-observer';
+import { DSTabsContext } from '../../DSTabsCTX.js';
+import { isElementVisibleCarousel } from '../../utils/helpers.js';
+import { useCarouselCallbacks } from './useCarouselCallbacks.js';
+
+const useCarousel = _ref => {
+  let {
+    updateIndicatorStyle
+  } = _ref;
+  const {
+    carouselOnlyListRef
+  } = useContext(DSTabsContext);
   const [showChevrons, setShowChevrons] = useState({
     right: false,
     left: false
   });
-  const { tabsRefAsArray } = useContext(DSTabsContext);
+  const {
+    tabsRefAsArray
+  } = useContext(DSTabsContext);
   const shouldShowLeft = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false, [carouselOnlyListRef]);
   const shouldShowRight = useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false, [carouselOnlyListRef]);
   const recalcChevrons = useCallback(() => {
-    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
+    setShowChevrons({
+      right: shouldShowRight(),
+      left: shouldShowLeft()
+    });
   }, [shouldShowLeft, shouldShowRight]);
   const getVisibleItemsOffset = useCallback(() => {
     if (tabsRefAsArray.current) {
@@ -25,14 +39,21 @@ const useCarousel = ({ updateIndicatorStyle }) => {
           const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
           return acc + (width + margin);
         }
+
         return acc;
       }, 0);
       return scroll - 16;
     }
+
     return 0;
   }, [tabsRefAsArray, carouselOnlyListRef]);
   useResizeObserver(carouselOnlyListRef, recalcChevrons);
-  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({
+  const {
+    leftButtonOnClick,
+    rightButtonOnClick,
+    handleOnClick,
+    handleOnScroll
+  } = useCarouselCallbacks({
     getVisibleItemsOffset,
     recalcChevrons,
     updateIndicatorStyle
@@ -45,7 +66,5 @@ const useCarousel = ({ updateIndicatorStyle }) => {
     handleOnScroll
   };
 };
-export {
-  useCarousel
-};
-//# sourceMappingURL=useCarousel.js.map
+
+export { useCarousel };

package/esm/parts/carousel/useCarouselCallbacks.js

@@ -1,13 +1,18 @@
-import * as React from "react";
-import { useCallback, useContext } from "react";
-import { isElementVisibleCarousel } from "../../utils/helpers";
-import { DSTabsContext } from "../../DSTabsCTX";
-const useCarouselCallbacks = ({
-  getVisibleItemsOffset,
-  updateIndicatorStyle,
-  recalcChevrons
-}) => {
-  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);
+import { useContext, useCallback } from 'react';
+import { isElementVisibleCarousel } from '../../utils/helpers.js';
+import { DSTabsContext } from '../../DSTabsCTX.js';
+
+/* eslint-disable max-statements */
+const useCarouselCallbacks = _ref => {
+  let {
+    getVisibleItemsOffset,
+    updateIndicatorStyle,
+    recalcChevrons
+  } = _ref;
+  const {
+    focusableTabsRef,
+    carouselOnlyListRef
+  } = useContext(DSTabsContext);
   const rightButtonOnClick = useCallback(() => {
     if (carouselOnlyListRef.current) {
       carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
@@ -20,25 +25,30 @@ const useCarouselCallbacks = ({
   }, [getVisibleItemsOffset, carouselOnlyListRef]);
   const handleOnScroll = useCallback(() => {
     recalcChevrons();
-    if (updateIndicatorStyle)
-      updateIndicatorStyle();
+    if (updateIndicatorStyle) updateIndicatorStyle();
   }, [recalcChevrons, updateIndicatorStyle]);
-  const handleOnClick = useCallback(({ target }) => {
-    if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
+  const handleOnClick = useCallback(_ref2 => {
+    let {
+      target
+    } = _ref2;
+
+    if (focusableTabsRef.current && target.getAttribute('role') === 'tab') {
       const tabList = carouselOnlyListRef.current;
       const tabButton = target;
       const tabButtonDimensions = tabButton.getBoundingClientRect();
-      const tabListDimensions = tabList?.getBoundingClientRect();
+      const tabListDimensions = tabList === null || tabList === void 0 ? void 0 : tabList.getBoundingClientRect();
       const tabButtonIndex = tabButton.dataset.index;
       const lastItemIndex = focusableTabsRef.current.length.toString();
       const magicNumber = 34;
-      const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
+      const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;
+
       if (!isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
         const containerWidth = tabListDimensions.width;
         const halfContainer = containerWidth / 2;
         const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
         const positionInContainer = elementScrollPosition % containerWidth;
         const width = tabButton.offsetWidth + magicNumber;
+
         if (positionInContainer > halfContainer) {
           carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
         } else {
@@ -54,7 +64,5 @@ const useCarouselCallbacks = ({
     handleOnScroll
   };
 };
-export {
-  useCarouselCallbacks
-};
-//# sourceMappingURL=useCarouselCallbacks.js.map
+
+export { useCarouselCallbacks };

package/esm/parts/tabBar/TabBar.js

@@ -1,20 +1,18 @@
-import * as React from "react";
-import React2, { useMemo, useContext } from "react";
-import { Carousel } from "../carousel/Carousel";
-import { useTabBar } from "./useTabBar";
-import {
-  StyledTabButton,
-  StyledTabList,
-  StyledTabWrapper,
-  StyledSelectionIndicator,
-  StyledSubTabsList,
-  StyledRequiredMark
-} from "./styles";
-import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
-import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation";
-import { TabTypes } from "../../utils/constants";
-import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React, { useContext, useMemo } from 'react';
+import { Carousel } from '../carousel/Carousel.js';
+import { useTabBar } from './useTabBar.js';
+import { StyledTabButton, StyledRequiredMark, StyledSubTabsList, StyledTabList, StyledTabWrapper, StyledSelectionIndicator } from './styles.js';
+import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
+import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
+import { TabTypes } from '../../utils/constants.js';
+import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
+import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _StyledRequiredMark;
 const TabBar = () => {
   const {
     tabsRef,
@@ -22,121 +20,132 @@ const TabBar = () => {
     tabsListRef,
     tabsRefAsArray,
     actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+    props: {
+      type,
+      fixedTabsHeaders,
+      withCarousel,
+      isDSMobile,
+      showSeparator,
+      children: tabs
+    }
   } = useContext(DSTabsContext);
-  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
-  const { handleOnTabChange } = useTabsCallbacks();
-  const { handleOnKeyDown } = useKeyboardNavigation();
-  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();
+  const {
+    lastTabInternalRef,
+    firstSubtabInternalRef
+  } = useContext(DSTabsCrossRefContext);
+  const {
+    handleOnTabChange
+  } = useTabsCallbacks();
+  const {
+    handleOnKeyDown
+  } = useKeyboardNavigation();
+  const {
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients,
+    updateIndicatorStyle
+  } = useTabBar();
   const renderTabs = useMemo(() => {
     const availableTabIndexes = [];
-    return React2.Children.map(tabs, (tab, index) => {
-      const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
-      if (!disabled)
-        availableTabIndexes.push(index);
-      return /* @__PURE__ */ React2.createElement(StyledTabButton, {
-        key: tabId,
+    return React.Children.map(tabs, (tab, index) => {
+      const {
+        tabId = '',
+        title = '',
+        style,
+        required = false,
+        disabled = false,
+        ref,
+        onClick,
+        onKeyDown
+      } = tab.props;
+      if (!disabled) availableTabIndexes.push(index);
+      return /*#__PURE__*/jsxs(StyledTabButton, {
         role: "tab",
-        ref: (t) => {
+        ref: t => {
           if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
             tabsRefAsArray.current[index] = t;
-            if (!disabled && !focusableTabsRef.current.includes(t))
-              focusableTabsRef.current.push(t);
+            if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);
             tabsRef.current[index] = t;
+
             if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
               firstSubtabInternalRef.current = t;
             }
+
             if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
               lastTabInternalRef.current = t;
             }
-            if (ref)
-              ref.current = t;
+
+            if (ref) ref.current = t;
           }
         },
         type: "button",
         "aria-controls": tabId,
         "aria-selected": actualActiveTab === tabId,
         "aria-disabled": disabled,
-        "aria-labelledby": `${tabId}-label`,
-        isDSMobile,
-        fixedTabsHeaders,
+        "aria-labelledby": "".concat(tabId, "-label"),
+        isDSMobile: isDSMobile,
+        fixedTabsHeaders: fixedTabsHeaders,
         tabType: type,
-        title,
+        title: title,
         "data-required": required,
         "data-tab-id": tabId,
         "data-index": index,
-        withCarousel,
+        withCarousel: withCarousel,
         isActive: actualActiveTab === tabId,
-        disabled,
+        disabled: disabled,
         showSeparator: showSeparator && type !== TabTypes.NORMAL,
         "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
-        id: `${tabId}-label`,
-        onClick: (e) => {
+        id: "".concat(tabId, "-label"),
+        onClick: e => {
           if (!disabled) {
             handleOnTabChange(tabId, e);
             updateIndicatorStyle();
           }
-          if (onClick && !disabled)
-            onClick(tabId, e);
+
+          if (onClick && !disabled) onClick(tabId, e);
         },
-        onKeyDown: (e) => {
-          if (e.key === "Enter")
-            e.stopPropagation();
-          if (!disabled)
-            handleOnKeyDown(e);
-          if (onKeyDown && !disabled)
-            onKeyDown(e);
+        onKeyDown: e => {
+          if (e.key === 'Enter') e.stopPropagation();
+          if (!disabled) handleOnKeyDown(e);
+          if (onKeyDown && !disabled) onKeyDown(e);
         },
-        style
-      }, title, required && /* @__PURE__ */ React2.createElement(StyledRequiredMark, null, "\u25CF"));
+        style: style,
+        children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx(StyledRequiredMark, {}, void 0, "\u25CF")))]
+      }, tabId);
     });
-  }, [
-    tabs,
-    actualActiveTab,
-    isDSMobile,
-    fixedTabsHeaders,
-    type,
-    withCarousel,
-    showSeparator,
-    tabsRefAsArray,
-    focusableTabsRef,
-    tabsRef,
-    firstSubtabInternalRef,
-    lastTabInternalRef,
-    handleOnTabChange,
-    updateIndicatorStyle,
-    handleOnKeyDown
-  ]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, handleOnKeyDown]);
+
   if (type === TabTypes.SUBTABS && !isDSMobile) {
-    return /* @__PURE__ */ React2.createElement(StyledSubTabsList, {
-      withCarousel,
+    return /*#__PURE__*/jsx(StyledSubTabsList, {
+      withCarousel: withCarousel,
       "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
       ref: tabsListRef,
-      role: "tablist"
-    }, withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, null, renderTabs) : renderTabs);
+      role: "tablist",
+      children: withCarousel ? /*#__PURE__*/_jsx(Carousel, {}, void 0, renderTabs) : renderTabs
+    });
   }
-  return /* @__PURE__ */ React2.createElement(StyledTabList, {
-    withCarousel,
+
+  return /*#__PURE__*/jsxs(StyledTabList, {
+    withCarousel: withCarousel,
     ref: tabsListRef,
     role: "tablist",
     "data-testid": DSTabsDatatestid.TAB_LIST,
-    isDSMobile,
-    fixedTabsHeaders,
-    mobileGradients,
+    isDSMobile: isDSMobile,
+    fixedTabsHeaders: fixedTabsHeaders,
+    mobileGradients: mobileGradients,
     onScroll: updateMobileGradients,
-    indicatorStyle,
-    tabType: type
-  }, /* @__PURE__ */ React2.createElement(StyledTabWrapper, {
-    isDSMobile,
-    fixedTabsHeaders
-  }, !isDSMobile && withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, {
-    updateIndicatorStyle
-  }, renderTabs) : renderTabs), /* @__PURE__ */ React2.createElement(StyledSelectionIndicator, {
-    isDSMobile,
-    tabType: type
-  }));
-};
-export {
-  TabBar
+    indicatorStyle: indicatorStyle,
+    tabType: type,
+    children: [/*#__PURE__*/_jsx(StyledTabWrapper, {
+      isDSMobile: isDSMobile,
+      fixedTabsHeaders: fixedTabsHeaders
+    }, void 0, !isDSMobile && withCarousel ? /*#__PURE__*/_jsx(Carousel, {
+      updateIndicatorStyle: updateIndicatorStyle
+    }, void 0, renderTabs) : renderTabs), /*#__PURE__*/_jsx(StyledSelectionIndicator, {
+      isDSMobile: isDSMobile,
+      tabType: type
+    })]
+  });
 };
-//# sourceMappingURL=TabBar.js.map
+
+export { TabBar };