@elliemae/ds-tabs 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/config/useTabs.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useRef, useState, useMemo, useEffect } from "react";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { tabsDefaultProps } from "../defaultProps";
+const useTabs = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
+  const { activeTab, children } = propsWithDefaults;
+  const tabsRef = useRef({});
+  const tabsRefAsArray = useRef([]);
+  const focusableTabsRef = useRef([]);
+  const carouselOnlyListRef = useRef(null);
+  const tabsListRef = useRef(null);
+  const actualActiveTabRef = useRef(null);
+  const [internalActiveTab, setInternalActiveTab] = useState(children?.[0]?.props?.tabId);
+  const actualActiveTab = useMemo(() => {
+    if (activeTab !== void 0)
+      return activeTab;
+    return internalActiveTab;
+  }, [activeTab, internalActiveTab]);
+  useEffect(() => {
+    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;
+  }, [actualActiveTab]);
+  const ctx = useMemo(() => ({
+    props: propsWithDefaults,
+    tabsRef,
+    focusableTabsRef,
+    tabsListRef,
+    tabsRefAsArray,
+    setInternalActiveTab,
+    actualActiveTab,
+    actualActiveTabRef,
+    carouselOnlyListRef
+  }), [actualActiveTab, propsWithDefaults]);
+  return ctx;
+};
+export {
+  useTabs
+};
+//# sourceMappingURL=useTabs.js.map

package/dist/esm/config/useTabs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../defaultProps';\nimport type { DSTabsPropsT, DSTabsUseTabsContextT, DSTabsPropsWithDefaultsT } from '../DSTabsTypes';\n\nexport const useTabs = (props: DSTabsPropsT): DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps) as DSTabsPropsWithDefaultsT;\n\n  const { activeTab, children } = propsWithDefaults;\n\n  const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n  const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n  const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n  const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n  const tabsListRef = useRef<HTMLDivElement | null>(null);\n  const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>(children?.[0]?.props?.tabId);\n\n  const actualActiveTab = useMemo(() => {\n    if (activeTab !== undefined) return activeTab;\n    return internalActiveTab;\n  }, [activeTab, internalActiveTab]);\n\n  useEffect(() => {\n    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n  }, [actualActiveTab]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n    }),\n    [actualActiveTab, propsWithDefaults],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,UAAU,CAAC,UAA+C;AACrE,QAAM,oBAAoB,6BAA6B,OAAO;AAE9D,QAAM,EAAE,WAAW,aAAa;AAEhC,QAAM,UAAU,OAA0C;AAC1D,QAAM,iBAAiB,OAA4B;AACnD,QAAM,mBAAmB,OAA4B;AACrD,QAAM,sBAAsB,OAA8B;AAC1D,QAAM,cAAc,OAA8B;AAClD,QAAM,qBAAqB,OAAiC;AAE5D,QAAM,CAAC,mBAAmB,wBAAwB,SAAiB,WAAW,IAAI,OAAO;AAEzF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,KACN,CAAC,WAAW;AAEf,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,oBAAoB;AAAA,KAC3G,CAAC;AAEJ,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,iBAAiB;AAGpB,SAAO;AAAA;",
+  "names": []
+}

package/{esm → dist/esm}/defaultProps.js

@@ -1,15 +1,14 @@
-import { TabTypes } from './utils/constants.js';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
+import * as React from "react";
+import { TabTypes } from "./utils/constants";
+const noop = () => {
+};
 const tabsDefaultProps = {
   containerProps: {},
   animated: true,
   enableMouseEvents: false,
   allowTextSelection: false,
   onTabChange: noop,
-  tabsListAriaLabel: 'Tab list',
+  tabsListAriaLabel: "Tab list",
   type: TabTypes.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
@@ -19,5 +18,7 @@ const tabsDefaultProps = {
   fixedTabsHeaders: false,
   showSeparator: true
 };
-
-export { tabsDefaultProps };
+export {
+  tabsDefaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { TabTypes } from './utils/constants';\nimport type { DSTabsDefaultPropsT } from './DSTabsTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const tabsDefaultProps: DSTabsDefaultPropsT = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n};\n"],
+  "mappings": "AAAA;ACAA;AAIA,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,mBAAwC;AAAA,EACnD,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA;",
+  "names": []
+}

package/dist/esm/exportsRelated/DSTab.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import { tabPropTypes } from "../propTypes";
+const DSTab = (props) => /* @__PURE__ */ React2.createElement(React2.Fragment, {
+  ...props
+});
+DSTab.propTypes = tabPropTypes;
+const DSTabWithSchema = describe(DSTab);
+DSTabWithSchema.propTypes = tabPropTypes;
+var DSTab_default = DSTab;
+export {
+  DSTab,
+  DSTabWithSchema,
+  DSTab_default as default
+};
+//# sourceMappingURL=DSTab.js.map

package/dist/esm/exportsRelated/DSTab.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exportsRelated/DSTab.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from 'react-desc';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabPropsT } from '../DSTabsTypes';\n\nconst DSTab = (props: DSTabPropsT): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabPropsT>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
+  "mappings": "AAAA;ACAA;AAEA;AACA;AAGA,MAAM,QAAQ,CAAC,UAAoC,qCAAC,OAAM,UAAP;AAAA,KAAoB;AAAA;AAEvE,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAsB;AAC9C,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+export * from "./exportsRelated/DSTab";
+export * from "./DSTabs";
+import { TabTypes } from "./utils/constants";
+export * from "./DSTabsDatatestid";
+export {
+  TabTypes
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exportsRelated/DSTab';\nexport * from './DSTabs';\nexport { TabTypes } from './utils/constants';\nexport * from './DSTabsDatatestid';\n\nexport type { DSTabsPropsT, DSTabPropsT } from './DSTabsTypes';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/parts/carousel/Carousel.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useContext } from "react";
+import { DSIconSizes } from "@elliemae/ds-icon";
+import { BUTTON_TYPES } from "@elliemae/ds-button";
+import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
+import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles";
+import { useCarousel } from "./useCarousel";
+import { DSTabsContext } from "../../DSTabsCTX";
+import { DSTabsDatatestid } from "../../DSTabsDatatestid";
+const Carousel = ({ children, updateIndicatorStyle }) => {
+  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({
+    updateIndicatorStyle
+  });
+  const {
+    carouselOnlyListRef,
+    props: { type }
+  } = useContext(DSTabsContext);
+  return /* @__PURE__ */ React.createElement(StyledCarouselWrapper, null, showChevrons.left && /* @__PURE__ */ React.createElement(StyledCarouselButtonWrapper, {
+    tabType: type
+  }, /* @__PURE__ */ React.createElement(StyledCarouselBtn, {
+    size: "s",
+    onClick: leftButtonOnClick,
+    tabIndex: -1,
+    "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
+    buttonType: BUTTON_TYPES.ICON
+  }, /* @__PURE__ */ React.createElement(ChevronLeft, {
+    size: DSIconSizes.S
+  }))), showChevrons.right && /* @__PURE__ */ React.createElement(StyledCarouselButtonWrapper, {
+    tabType: type,
+    right: showChevrons.right
+  }, /* @__PURE__ */ React.createElement(StyledCarouselBtn, {
+    size: "s",
+    onClick: rightButtonOnClick,
+    tabIndex: -1,
+    "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
+    buttonType: BUTTON_TYPES.ICON
+  }, /* @__PURE__ */ React.createElement(ChevronRight, {
+    size: DSIconSizes.S
+  }))), /* @__PURE__ */ React.createElement(StyledChildrenWrap, {
+    ref: carouselOnlyListRef,
+    onClick: handleOnClick,
+    onScroll: handleOnScroll
+  }, children));
+};
+export {
+  Carousel
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/esm/parts/carousel/Carousel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles';\nimport { useCarousel } from './useCarousel';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { CarouselPropsT } from '../../DSTabsTypes';\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,WAAW,CAAC,EAAE,UAAU,2BAAwD;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,mBAAmB,YAAY;AAAA,IACzG;AAAA;AAGF,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE;AAAA,MACP,WAAW;AAEf,SACE,oCAAC,uBAAD,MACG,aAAa,QACZ,oCAAC,6BAAD;AAAA,IAA6B,SAAS;AAAA,KACpC,oCAAC,mBAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,iBAAiB,SAAS;AAAA,IACvC,YAAY,aAAa;AAAA,KAEzB,oCAAC,aAAD;AAAA,IAAa,MAAM,YAAY;AAAA,QAIpC,aAAa,SACZ,oCAAC,6BAAD;AAAA,IAA6B,SAAS;AAAA,IAAM,OAAO,aAAa;AAAA,KAC9D,oCAAC,mBAAD;AAAA,IACE,MAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,eAAa,iBAAiB,SAAS;AAAA,IACvC,YAAY,aAAa;AAAA,KAEzB,oCAAC,cAAD;AAAA,IAAc,MAAM,YAAY;AAAA,QAItC,oCAAC,oBAAD;AAAA,IAAoB,KAAK;AAAA,IAAqB,SAAS;AAAA,IAAe,UAAU;AAAA,KAC7E;AAAA;",
+  "names": []
+}

package/dist/esm/parts/carousel/styles.js

@@ -0,0 +1,50 @@
+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};
+
+  &:hover:not(:disabled) {
+    background-color: transparent;
+  }
+  background-color: transparent;
+  border-radius: 0px;
+
+  & .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

package/dist/esm/parts/carousel/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TabTypes } from '../../utils/constants';\nimport type { StyledCarouselButtonWrapperPropsT } from '../../DSTabsTypes';\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TabTypes.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,oBAAoB,OAAO;AAAA;AAAA,eAEzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,YAAa,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,cAAe,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,cACV,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
+  "names": []
+}

package/{esm → dist/esm}/parts/carousel/useCarousel.js

@@ -1,34 +1,20 @@
-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);
+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);
   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) {
@@ -39,21 +25,14 @@ const useCarousel = _ref => {
           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
@@ -66,5 +45,7 @@ const useCarousel = _ref => {
     handleOnScroll
   };
 };
-
-export { useCarousel };
+export {
+  useCarousel
+};
+//# sourceMappingURL=useCarousel.js.map

package/dist/esm/parts/carousel/useCarousel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { useCarouselCallbacks } from './useCarouselCallbacks';\nimport type { UseCarouselPropsT, UseCarouselReturnTypeT, ShowChevronsT } from '../../DSTabsTypes';\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const [showChevrons, setShowChevrons] = useState<ShowChevronsT>({\n    right: false,\n    left: false,\n  });\n\n  const { tabsRefAsArray } = useContext(DSTabsContext);\n\n  const shouldShowLeft = useCallback(\n    () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n    [carouselOnlyListRef],\n  );\n\n  const shouldShowRight = useCallback(\n    () =>\n      carouselOnlyListRef.current\n        ? carouselOnlyListRef.current.scrollLeft <\n          carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n        : false,\n    [carouselOnlyListRef],\n  );\n\n  const recalcChevrons = useCallback(() => {\n    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n  }, [shouldShowLeft, shouldShowRight]);\n\n  const getVisibleItemsOffset = useCallback(() => {\n    if (tabsRefAsArray.current) {\n      const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n          const styles = window.getComputedStyle(c);\n          const width = c.clientWidth;\n          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n          return acc + (width + margin);\n        }\n        return acc;\n      }, 0);\n\n      return scroll - 16;\n    }\n    return 0;\n  }, [tabsRefAsArray, carouselOnlyListRef]);\n\n  useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n    getVisibleItemsOffset,\n    recalcChevrons,\n    updateIndicatorStyle,\n  });\n\n  return {\n    showChevrons,\n    leftButtonOnClick,\n    rightButtonOnClick,\n    handleOnClick,\n    handleOnScroll,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,cAAc,CAAC,EAAE,2BAAsE;AAClG,QAAM,EAAE,wBAAwB,WAAW;AAE3C,QAAM,CAAC,cAAc,mBAAmB,SAAwB;AAAA,IAC9D,OAAO;AAAA,IACP,MAAM;AAAA;AAGR,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,iBAAiB,YACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI,OAElF,CAAC;AAGH,QAAM,kBAAkB,YACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE,OACN,CAAC;AAGH,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,mBAAmB,MAAM;AAAA,KACjD,CAAC,gBAAgB;AAEpB,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,GAAG,oBAAoB,UAAU;AAC5D,gBAAM,SAAS,OAAO,iBAAiB;AACvC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,cAAc,WAAW,OAAO;AAEjE,iBAAO,MAAO,SAAQ;AAAA;AAExB,eAAO;AAAA,SACN;AAEH,aAAO,SAAS;AAAA;AAElB,WAAO;AAAA,KACN,CAAC,gBAAgB;AAEpB,oBAAkB,qBAAqB;AAEvC,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,mBAAmB,qBAAqB;AAAA,IACpG;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/{esm → dist/esm}/parts/carousel/useCarouselCallbacks.js

@@ -1,18 +1,13 @@
-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);
+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);
   const rightButtonOnClick = useCallback(() => {
     if (carouselOnlyListRef.current) {
       carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
@@ -25,30 +20,25 @@ const useCarouselCallbacks = _ref => {
   }, [getVisibleItemsOffset, carouselOnlyListRef]);
   const handleOnScroll = useCallback(() => {
     recalcChevrons();
-    if (updateIndicatorStyle) updateIndicatorStyle();
+    if (updateIndicatorStyle)
+      updateIndicatorStyle();
   }, [recalcChevrons, updateIndicatorStyle]);
-  const handleOnClick = useCallback(_ref2 => {
-    let {
-      target
-    } = _ref2;
-
-    if (focusableTabsRef.current && target.getAttribute('role') === 'tab') {
+  const handleOnClick = useCallback(({ target }) => {
+    if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
       const tabList = carouselOnlyListRef.current;
       const tabButton = target;
       const tabButtonDimensions = tabButton.getBoundingClientRect();
-      const tabListDimensions = tabList === null || tabList === void 0 ? void 0 : tabList.getBoundingClientRect();
+      const tabListDimensions = 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 {
@@ -64,5 +54,7 @@ const useCarouselCallbacks = _ref => {
     handleOnScroll
   };
 };
-
-export { useCarouselCallbacks };
+export {
+  useCarouselCallbacks
+};
+//# sourceMappingURL=useCarouselCallbacks.js.map

package/dist/esm/parts/carousel/useCarouselCallbacks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport type { UseCarouselCallbacksPropsT, UseCarouselCallbacksReturnTypeT } from '../../DSTabsTypes';\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  updateIndicatorStyle,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const handleOnScroll = useCallback(() => {\n    recalcChevrons();\n    if (updateIndicatorStyle) updateIndicatorStyle();\n  }, [recalcChevrons, updateIndicatorStyle]);\n\n  const handleOnClick = useCallback(\n    ({ target }: MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n"],
+  "mappings": "AAAA;ACCA;AAEA;AACA;AAGO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,kBAAkB,wBAAwB,WAAW;AAE7D,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,iBAAiB,YAAY,MAAM;AACvC;AACA,QAAI;AAAsB;AAAA,KACzB,CAAC,gBAAgB;AAEpB,QAAM,gBAAgB,YACpB,CAAC,EAAE,aAAyB;AAC1B,QAAI,iBAAiB,WAAY,OAA6B,aAAa,YAAY,OAAO;AAC5F,YAAM,UAAU,oBAAoB;AACpC,YAAM,YAAY;AAClB,YAAM,sBAAsB,UAAU;AACtC,YAAM,oBAAoB,SAAS;AACnC,YAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAM,gBAAgB,iBAAiB,QAAQ,OAAO;AACtD,YAAM,cAAc;AAEpB,YAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,UACE,CAAC,yBAAyB,WAAW,SAAS,oBAC9C,qBACA,oBAAoB,SACpB;AACA,cAAM,iBAAiB,kBAAkB;AACzC,cAAM,gBAAgB,iBAAiB;AACvC,cAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,cAAM,sBAAsB,wBAAwB;AACpD,cAAM,QAAQ,UAAU,cAAc;AAEtC,YAAI,sBAAsB,eAAe;AACvC,8BAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,eACnE;AACL,8BAAoB,QAAQ,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,KAKxE,CAAC,kBAAkB;AAGrB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/tabBar/TabBar.js

@@ -0,0 +1,149 @@
+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 { centerTab } from "../../utils/helpers";
+import { TabTypes } from "../../utils/constants";
+import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks";
+import { DSTabsDatatestid } from "../../DSTabsDatatestid";
+const TabBar = () => {
+  const {
+    tabsRef,
+    focusableTabsRef,
+    tabsListRef,
+    tabsRefAsArray,
+    carouselOnlyListRef,
+    actualActiveTab,
+    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 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,
+        role: "tab",
+        ref: (t) => {
+          if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = 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;
+          }
+        },
+        type: "button",
+        "aria-controls": tabId,
+        "aria-selected": actualActiveTab === tabId,
+        "aria-disabled": disabled,
+        "aria-labelledby": `${tabId}-label`,
+        isDSMobile,
+        fixedTabsHeaders,
+        tabType: type,
+        title,
+        "data-required": required,
+        "data-tab-id": tabId,
+        "data-index": index,
+        withCarousel,
+        isActive: actualActiveTab === tabId,
+        disabled,
+        showSeparator: showSeparator && type !== TabTypes.NORMAL,
+        "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
+        id: `${tabId}-label`,
+        onClick: (e) => {
+          if (!disabled) {
+            handleOnTabChange(tabId, e);
+            updateIndicatorStyle();
+          }
+          if (onClick && !disabled)
+            onClick(tabId, e);
+        },
+        onFocus: (e) => {
+          if (withCarousel)
+            centerTab({ e, listRef: carouselOnlyListRef });
+        },
+        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"));
+    });
+  }, [
+    tabs,
+    actualActiveTab,
+    isDSMobile,
+    fixedTabsHeaders,
+    type,
+    withCarousel,
+    showSeparator,
+    tabsRefAsArray,
+    focusableTabsRef,
+    tabsRef,
+    firstSubtabInternalRef,
+    lastTabInternalRef,
+    handleOnTabChange,
+    updateIndicatorStyle,
+    carouselOnlyListRef,
+    handleOnKeyDown
+  ]);
+  if (type === TabTypes.SUBTABS && !isDSMobile) {
+    return /* @__PURE__ */ React2.createElement(StyledSubTabsList, {
+      withCarousel,
+      "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
+      ref: tabsListRef,
+      role: "tablist"
+    }, withCarousel ? /* @__PURE__ */ React2.createElement(Carousel, null, renderTabs) : renderTabs);
+  }
+  return /* @__PURE__ */ React2.createElement(StyledTabList, {
+    withCarousel,
+    ref: tabsListRef,
+    role: "tablist",
+    "data-testid": DSTabsDatatestid.TAB_LIST,
+    isDSMobile,
+    fixedTabsHeaders,
+    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
+};
+//# sourceMappingURL=TabBar.js.map

package/dist/esm/parts/tabBar/TabBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n  StyledTabButton,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n  StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabPropsWithDefaultT } from '../../DSTabsTypes';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsListRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  const renderTabs: React.ReactNode[] = useMemo(() => {\n    const availableTabIndexes: number[] = [];\n\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabPropsWithDefaultT>, index) => {\n      const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n      if (!disabled) availableTabIndexes.push(index);\n      return (\n        <StyledTabButton\n          key={tabId}\n          role=\"tab\"\n          ref={(t: HTMLButtonElement) => {\n            if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n              tabsRefAsArray.current[index] = t;\n              if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);\n              tabsRef.current[index] = t;\n              if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n                firstSubtabInternalRef.current = t;\n              }\n              if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n                lastTabInternalRef.current = t;\n              }\n              if (ref) ref.current = t;\n            }\n          }}\n          type=\"button\"\n          aria-controls={tabId}\n          aria-selected={actualActiveTab === tabId}\n          aria-disabled={disabled}\n          aria-labelledby={`${tabId}-label`}\n          isDSMobile={isDSMobile}\n          fixedTabsHeaders={fixedTabsHeaders}\n          tabType={type}\n          title={title}\n          data-required={required}\n          data-tab-id={tabId}\n          data-index={index}\n          withCarousel={withCarousel}\n          isActive={actualActiveTab === tabId}\n          disabled={disabled}\n          showSeparator={showSeparator && type !== TabTypes.NORMAL}\n          data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n          id={`${tabId}-label`}\n          onClick={(e) => {\n            if (!disabled) {\n              handleOnTabChange(tabId, e);\n              updateIndicatorStyle();\n            }\n            if (onClick && !disabled) onClick(tabId, e);\n          }}\n          onFocus={(e) => {\n            if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') e.stopPropagation();\n            if (!disabled) handleOnKeyDown(e);\n            if (onKeyDown && !disabled) onKeyDown(e);\n          }}\n          style={style}\n        >\n          {title}\n          {required && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n        </StyledTabButton>\n      );\n    });\n  }, [\n    tabs,\n    actualActiveTab,\n    isDSMobile,\n    fixedTabsHeaders,\n    type,\n    withCarousel,\n    showSeparator,\n    tabsRefAsArray,\n    focusableTabsRef,\n    tabsRef,\n    firstSubtabInternalRef,\n    lastTabInternalRef,\n    handleOnTabChange,\n    updateIndicatorStyle,\n    carouselOnlyListRef,\n    handleOnKeyDown,\n  ]);\n\n  if (type === TabTypes.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        withCarousel={withCarousel}\n        data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n        ref={tabsListRef}\n        role=\"tablist\"\n      >\n        {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      withCarousel={withCarousel}\n      ref={tabsListRef}\n      role=\"tablist\"\n      data-testid={DSTabsDatatestid.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n    >\n      <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n        ) : (\n          renderTabs\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n    </StyledTabList>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}