@elliemae/ds-tabs 2.1.0 → 2.2.0-alpha.3

package/esm/parts/tabsContent/TabsContent.js

@@ -1,40 +1,24 @@
-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 { useContext } from 'react';
-import { TabsPanels } from '../tabsPanel/TabsPanels.js';
-import { TabBar } from '../tabBar/TabBar.js';
-import { StyledTabBarContainer } from './styles.js';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
-import { jsxs } from 'react/jsx-runtime';
-
-var _TabBar, _TabsPanels;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as React from "react";
+import React2, { useContext } from "react";
+import { TabsPanels } from "../tabsPanel/TabsPanels";
+import { TabBar } from "../tabBar/TabBar";
+import { StyledTabBarContainer } from "./styles";
+import { DSTabsContext } from "../../DSTabsCTX";
+import { DSTabsDatatestid } from "../../DSTabsDatatestid";
 const TabsContent = () => {
   const {
-    props: {
-      containerProps,
-      innerRef,
-      tabsListAriaLabel,
-      tabBarExtraContent
-    }
+    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
   } = useContext(DSTabsContext);
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...containerProps,
     ref: innerRef,
-    "data-testid": DSTabsDatatestid.TABS_CONTAINER,
-    children: [/*#__PURE__*/_jsx(StyledTabBarContainer, {
-      "aria-label": tabsListAriaLabel,
-      role: "tablist"
-    }, void 0, _TabBar || (_TabBar = /*#__PURE__*/_jsx(TabBar, {})), tabBarExtraContent), _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx(TabsPanels, {}))]
-  }));
+    "data-testid": DSTabsDatatestid.TABS_CONTAINER
+  }, /* @__PURE__ */ React2.createElement(StyledTabBarContainer, {
+    "aria-label": tabsListAriaLabel,
+    role: "tablist"
+  }, /* @__PURE__ */ React2.createElement(TabBar, null), tabBarExtraContent), /* @__PURE__ */ React2.createElement(TabsPanels, null));
 };
-
-export { TabsContent };
+export {
+  TabsContent
+};
+//# sourceMappingURL=TabsContent.js.map

package/esm/parts/tabsContent/TabsContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  return (\n    <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n      <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n        <TabBar />\n        {tabBarExtraContent}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB;AAAA,MACpD,WAAW;AAEf,SACE,qCAAC,OAAD;AAAA,OAAS;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,iBAAiB;AAAA,KACpE,qCAAC,uBAAD;AAAA,IAAuB,cAAY;AAAA,IAAmB,MAAK;AAAA,KACzD,qCAAC,QAAD,OACC,qBAEH,qCAAC,YAAD;AAAA;",
+  "names": []
+}

package/esm/parts/tabsContent/styles.js

@@ -1,7 +1,10 @@
-import styled from 'styled-components';
-
-const StyledTabBarContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-vm3k1y-0"
-})(["display:flex;overflow-x:hidden;"]);
-
-export { StyledTabBarContainer };
+import * as React from "react";
+import styled from "styled-components";
+const StyledTabBarContainer = styled.div`
+  display: flex;
+  overflow-x: hidden;
+`;
+export {
+  StyledTabBarContainer
+};
+//# sourceMappingURL=styles.js.map

package/esm/parts/tabsContent/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  overflow-x: hidden;\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/parts/tabsPanel/TabsPanels.js

@@ -1,67 +1,50 @@
-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, useCallback, useMemo } from 'react';
-import SwipeableViews from 'react-swipeable-views';
-import { getIdByIndex, getIndexById } from '../../utils/helpers.js';
-import { StyledPanelContainer } from './styles.js';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
+import * as React from "react";
+import React2, { useMemo, useContext, useCallback } from "react";
+import SwipeableViews from "react-swipeable-views";
+import { getIdByIndex, getIndexById } from "../../utils/helpers";
+import { StyledPanelContainer } from "./styles";
+import { DSTabsContext } from "../../DSTabsCTX";
+import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks";
 const TabsPanels = () => {
   const {
     actualActiveTab,
     focusableTabsRef,
-    props: {
-      animated,
-      enableMouseEvents,
-      onlyRenderActiveTab,
-      children: tabs,
-      isDSMobile
-    }
+    props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile }
   } = useContext(DSTabsContext);
-  const {
-    handleOnTabChange,
-    handleOnMouseDown
-  } = useTabsCallbacks();
-  const handleOnChangeIndex = useCallback(index => {
+  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();
+  const handleOnChangeIndex = useCallback((index) => {
     handleOnTabChange(getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
+    if (focusableTabsRef.current)
+      focusableTabsRef.current[index].click();
   }, [focusableTabsRef, handleOnTabChange, tabs]);
-  const panels = useMemo(() => React.Children.map(tabs, tab => {
-    const {
-      tabId: panelId = '',
-      style,
-      children: content
-    } = tab.props;
+  const panels = useMemo(() => React2.Children.map(tabs, (tab) => {
+    const { tabId: panelId = "", style, children: content } = tab.props;
     const isActive = actualActiveTab === panelId;
     const shouldRender = !onlyRenderActiveTab || isActive;
-    return shouldRender && /*#__PURE__*/_jsx(StyledPanelContainer, {
+    return shouldRender && /* @__PURE__ */ React2.createElement(StyledPanelContainer, {
+      key: panelId,
       id: panelId,
-      "aria-labelledby": "".concat(panelId, "-label"),
+      "aria-labelledby": `${panelId}-label`,
       "aria-hidden": !isActive,
       "data-panel-id": panelId,
       "data-testid": "ds-tabs-tab-panel",
       hidden: !isActive,
       onMouseDown: handleOnMouseDown,
       role: "tabpanel",
-      style: style,
-      isDSMobile: isDSMobile
-    }, panelId, content);
+      style,
+      isDSMobile
+    }, content);
   }), [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]);
-
   if (animated) {
-    return /*#__PURE__*/_jsx(SwipeableViews, {
-      enableMouseEvents: enableMouseEvents,
+    return /* @__PURE__ */ React2.createElement(SwipeableViews, {
+      enableMouseEvents,
       index: getIndexById(tabs, actualActiveTab),
       onChangeIndex: handleOnChangeIndex
-    }, void 0, panels);
+    }, panels);
   }
-
-  return /*#__PURE__*/jsx(Fragment, {
-    children: panels
-  });
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, panels);
+};
+export {
+  TabsPanels
 };
-
-export { TabsPanels };
+//# sourceMappingURL=TabsPanels.js.map

package/esm/parts/tabsPanel/TabsPanels.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { getIdByIndex, getIndexById } from '../../utils/helpers';\nimport { StyledPanelContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabPropsWithDefaultT } from '../../DSTabsTypes';\n\nexport const TabsPanels = (): JSX.Element => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n  const handleOnChangeIndex = useCallback(\n    (index: number) => {\n      handleOnTabChange(getIdByIndex(tabs, index));\n\n      if (focusableTabsRef.current) focusableTabsRef.current[index].click();\n    },\n    [focusableTabsRef, handleOnTabChange, tabs],\n  );\n\n  const panels = useMemo(\n    () =>\n      React.Children.map(tabs, (tab: React.ReactElement<DSTabPropsWithDefaultT>) => {\n        const { tabId: panelId = '', style, children: content } = tab.props;\n        const isActive = actualActiveTab === panelId;\n        const shouldRender = !onlyRenderActiveTab || isActive;\n        return (\n          shouldRender && (\n            <StyledPanelContainer\n              key={panelId}\n              id={panelId}\n              aria-labelledby={`${panelId}-label`}\n              aria-hidden={!isActive}\n              data-panel-id={panelId}\n              data-testid=\"ds-tabs-tab-panel\"\n              hidden={!isActive}\n              onMouseDown={handleOnMouseDown}\n              role=\"tabpanel\"\n              style={style}\n              isDSMobile={isDSMobile}\n            >\n              {content}\n            </StyledPanelContainer>\n          )\n        );\n      }),\n    [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs],\n  );\n\n  if (animated) {\n    return (\n      <SwipeableViews\n        enableMouseEvents={enableMouseEvents}\n        index={getIndexById(tabs, actualActiveTab)}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </SwipeableViews>\n    );\n  }\n\n  return <>{panels}</>;\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM;AAAA,MACzE,WAAW;AAEf,QAAM,EAAE,mBAAmB,sBAAsB;AAEjD,QAAM,sBAAsB,YAC1B,CAAC,UAAkB;AACjB,sBAAkB,aAAa,MAAM;AAErC,QAAI,iBAAiB;AAAS,uBAAiB,QAAQ,OAAO;AAAA,KAEhE,CAAC,kBAAkB,mBAAmB;AAGxC,QAAM,SAAS,QACb,MACE,OAAM,SAAS,IAAI,MAAM,CAAC,QAAoD;AAC5E,UAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,YAAY,IAAI;AAC9D,UAAM,WAAW,oBAAoB;AACrC,UAAM,eAAe,CAAC,uBAAuB;AAC7C,WACE,gBACE,qCAAC,sBAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,mBAAiB,GAAG;AAAA,MACpB,eAAa,CAAC;AAAA,MACd,iBAAe;AAAA,MACf,eAAY;AAAA,MACZ,QAAQ,CAAC;AAAA,MACT,aAAa;AAAA,MACb,MAAK;AAAA,MACL;AAAA,MACA;AAAA,OAEC;AAAA,MAKX,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB;AAGxE,MAAI,UAAU;AACZ,WACE,qCAAC,gBAAD;AAAA,MACE;AAAA,MACA,OAAO,aAAa,MAAM;AAAA,MAC1B,eAAe;AAAA,OAEd;AAAA;AAKP,SAAO,4DAAG;AAAA;",
+  "names": []
+}

package/esm/parts/tabsPanel/styles.js

@@ -1,17 +1,16 @@
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
+const StyledPanelContainer = styled.div`
+  padding-top: 8px;
+  &:focus {
+    outline: none;
+  }
 
-const StyledPanelContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-oxw5jq-0"
-})(["padding-top:8px;&:focus{outline:none;}", " ", ""], _ref => {
-  let {
-    hidden
-  } = _ref;
-  return hidden ? 'visibility: hidden;' : '';
-}, _ref2 => {
-  let {
-    isDSMobile
-  } = _ref2;
-  return isDSMobile ? "padding-top: 0;" : "";
-});
+  ${({ hidden }) => hidden ? "visibility: hidden;" : ""}
 
-export { StyledPanelContainer };
+  ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
+`;
+export {
+  StyledPanelContainer
+};
+//# sourceMappingURL=styles.js.map

package/esm/parts/tabsPanel/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport type { StyledPanelContainerPropsT } from '../../DSTabsTypes';\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ hidden }) => (hidden ? 'visibility: hidden;' : '')}\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,aAAc,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,iBAAkB,aAAa,oBAAoB;AAAA;",
+  "names": []
+}

package/esm/propTypes.js

@@ -1,28 +1,29 @@
-import { PropTypes } from 'react-desc';
-import { TabTypesValuesAsArray } from './utils/constants.js';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { TabTypesValuesAsArray } from "./utils/constants";
 const tabPropTypes = {
-  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),
-  title: PropTypes.string.description('Tab title.').defaultValue(''),
-  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
-  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false)
+  tabId: PropTypes.string.description("Unique Tab id.").defaultValue(""),
+  title: PropTypes.string.description("Tab title.").defaultValue(""),
+  required: PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
+  disabled: PropTypes.bool.description("Disables Tab.").defaultValue(false)
 };
 const tabsPropTypes = {
-  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),
-  enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),
-  allowTextSelection: PropTypes.bool.description('Allows text selection when mouse drag events are active.').defaultValue(false),
-  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
-  type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),
-  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),
-  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
-  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),
-  activeTab: PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
-  children: PropTypes.node.description('Use DSTab component as children.').isRequired,
-  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),
-  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('Ref to the container.').defaultValue(undefined)
+  animated: PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
+  enableMouseEvents: PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
+  allowTextSelection: PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
+  onTabChange: PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
+  type: PropTypes.oneOf(TabTypesValuesAsArray).description("Tab type.").defaultValue(TabTypesValuesAsArray[0]),
+  tabBarExtraContent: PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
+  onlyRenderActiveTab: PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
+  withCarousel: PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
+  activeTab: PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
+  children: PropTypes.node.description("Use DSTab component as children.").isRequired,
+  tabsListAriaLabel: PropTypes.string.description("Aria label for the list.").defaultValue("Tab list."),
+  containerProps: PropTypes.object.description("Additional properties for the container.").defaultValue({}),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
 };
-
-export { tabPropTypes, tabsPropTypes };
+export {
+  tabPropTypes,
+  tabsPropTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { TabTypesValuesAsArray } from './utils/constants';\n\nexport const tabPropTypes = {\n  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n  enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n  allowTextSelection: PropTypes.bool\n    .description('Allows text selection when mouse drag events are active.')\n    .defaultValue(false),\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n  tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,OAAO,YAAY,kBAAkB,aAAa;AAAA,EACnE,OAAO,UAAU,OAAO,YAAY,cAAc,aAAa;AAAA,EAC/D,UAAU,UAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,iBAAiB,aAAa;AAAA;AAG9D,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,qDAAqD,aAAa;AAAA,EACvG,mBAAmB,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC7G,oBAAoB,UAAU,KAC3B,YAAY,4DACZ,aAAa;AAAA,EAChB,aAAa,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EACvG,MAAM,UAAU,MAAM,uBAAuB,YAAY,aAAa,aAAa,sBAAsB;AAAA,EACzG,oBAAoB,UAAU,QAAQ,YAAY,sCAAsC,aAAa;AAAA,EACrG,qBAAqB,UAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EACxG,cAAc,UAAU,KAAK,YAAY,+BAA+B,aAAa;AAAA,EACrF,WAAW,UAAU,OAClB,YAAY,wDACZ,aAAa;AAAA,EAChB,UAAU,UAAU,KAAK,YAAY,oCAAoC;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,4BAA4B,aAAa;AAAA,EACzF,gBAAgB,UAAU,OAAO,YAAY,4CAA4C,aAAa;AAAA,EACtG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,SACjF,YAAY,yBACZ,aAAa;AAAA;",
+  "names": []
+}

package/esm/utils/constants.js

@@ -1,14 +1,15 @@
+import * as React from "react";
 const TabTypes = {
-  NORMAL: 'normal',
-  NORMAL_SMALL: 'normal_small',
-  SUBTABS: 'subtabs'
+  NORMAL: "normal",
+  NORMAL_SMALL: "normal_small",
+  SUBTABS: "subtabs"
 };
 const TabTypesValuesAsArray = Object.values(TabTypes);
 const MOBILE_GRADIENT_WIDTH = 24;
 const defaultIndicatorStyles = {
-  left: '0px',
-  width: '0px',
-  backgroundWithTransparent: ''
+  left: "0px",
+  width: "0px",
+  backgroundWithTransparent: ""
 };
 const gradientOffsetsAccordingType = {
   normal_small: 14,
@@ -16,5 +17,11 @@ const gradientOffsetsAccordingType = {
   subtabs: 16,
   fixedTabsHeaders: 0
 };
-
-export { MOBILE_GRADIENT_WIDTH, TabTypes, TabTypesValuesAsArray, defaultIndicatorStyles, gradientOffsetsAccordingType };
+export {
+  MOBILE_GRADIENT_WIDTH,
+  TabTypes,
+  TabTypesValuesAsArray,
+  defaultIndicatorStyles,
+  gradientOffsetsAccordingType
+};
+//# sourceMappingURL=constants.js.map

package/esm/utils/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TabTypes = {\n  NORMAL: 'normal' as const,\n  NORMAL_SMALL: 'normal_small' as const,\n  SUBTABS: 'subtabs' as const,\n};\n\nexport const TabTypesValuesAsArray = Object.values(TabTypes);\n\nexport const MOBILE_GRADIENT_WIDTH = 24;\n\nexport const defaultIndicatorStyles = {\n  left: '0px',\n  width: '0px',\n  backgroundWithTransparent: '',\n};\n\nexport const gradientOffsetsAccordingType = {\n  normal_small: 14,\n  normal: 16,\n  subtabs: 16,\n  fixedTabsHeaders: 0,\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA;AAGJ,MAAM,wBAAwB,OAAO,OAAO;AAE5C,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,2BAA2B;AAAA;AAGtB,MAAM,+BAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,kBAAkB;AAAA;",
+  "names": []
+}

package/esm/utils/helpers.js

@@ -1,13 +1,11 @@
-import { MOBILE_GRADIENT_WIDTH } from './constants.js';
-
+import * as React from "react";
+import { MOBILE_GRADIENT_WIDTH } from "./constants";
 const isElementVisible = (tab, tabList) => {
   const tabDimensions = tab.getBoundingClientRect();
   const tabListDimensions = tabList.getBoundingClientRect();
   return tabDimensions.left <= tabListDimensions.left ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;
 };
-const isElementVisibleCarousel = function (tab, tabContainer) {
-  let firstOrLastItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
+const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) => {
   if (tab && tabContainer) {
     const tabDimensions = tab.getBoundingClientRect();
     const tabContainerDimensions = tabContainer.getBoundingClientRect();
@@ -18,7 +16,6 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
     const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);
     return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;
   }
-
   return false;
 };
 const getVisibleDimensions = (node, referenceNode) => {
@@ -29,9 +26,17 @@ const getVisibleDimensions = (node, referenceNode) => {
     height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
   };
 };
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-const getIdByIndex = (children, index) => children && children[index].props.tabId || '';
-const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
+const getIndexById = (children, activeId) => children && children.findIndex((item) => item.props.tabId === activeId);
+const getIdByIndex = (children, index) => children && children[index].props.tabId || "";
+const shouldHaveLeftGradient = (scrollLeft) => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);
-
-export { getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };
+export {
+  getIdByIndex,
+  getIndexById,
+  getVisibleDimensions,
+  isElementVisible,
+  isElementVisibleCarousel,
+  shouldHaveLeftGradient,
+  shouldHaveRightGradient
+};
+//# sourceMappingURL=helpers.js.map

package/esm/utils/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';\nimport { MOBILE_GRADIENT_WIDTH } from './constants';\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const getIndexById = (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string): number =>\n  children && children.findIndex((item: React.ReactElement<DSTabPropsWithDefaultT>) => item.props.tabId === activeId);\n\nexport const getIdByIndex = (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number): string =>\n  (children && children[index].props.tabId) || '';\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
+  "mappings": "AAAA;ACCA;AAEO,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI;AAC1B,QAAM,oBAAoB,QAAQ;AAElC,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AAAA;AAG9D,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI;AAC1B,UAAM,yBAAyB,aAAa;AAE5C,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO;AAC1D,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ;AAE5D,UAAM,6BAA6B,KAAK,MAAM,uBAAuB;AACrE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB;AAEtE,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA;AAElF,SAAO;AAAA;AAGF,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK;AAC5B,QAAM,0BAA0B,cAAc;AAE9C,SAAO;AAAA,IACL,OAAO,KAAK,IACV,KAAK,aACL,wBAAwB,OAAO,cAAc,cAAc,eAAe,MAC1E,KAAK,cAAe,yBAAwB,OAAO,eAAe;AAAA,IAEpE,QAAQ,KAAK,IACX,KAAK,cACL,wBAAwB,MAAM,cAAc,eAAe,eAAe,KAC1E,KAAK,eAAgB,yBAAwB,MAAM,eAAe;AAAA;AAAA;AAKjE,MAAM,eAAe,CAAC,UAAwD,aACnF,YAAY,SAAS,UAAU,CAAC,SAAqD,KAAK,MAAM,UAAU;AAErG,MAAM,eAAe,CAAC,UAAwD,UAClF,YAAY,SAAS,OAAO,MAAM,SAAU;AAExC,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,cAAc;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,eAAe,cAAe,eAAc;",
+  "names": []
+}

package/esm/utils/hooks/useKeyboardNavigation.js

@@ -1,57 +1,48 @@
-import { useContext, useCallback } from 'react';
-import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
-
-/* eslint-disable max-statements */
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
 const useKeyboardNavigation = () => {
-  const {
-    focusableTabsRef
-  } = useContext(DSTabsContext);
-  const {
-    firstSubtabInternalRef,
-    lastTabInternalRef
-  } = useContext(DSTabsCrossRefContext);
-  const handleOnKeyDown = useCallback(e => {
-    if (e.key === 'ArrowRight' && focusableTabsRef.current) {
-      var _focusableTabsRef$cur, _focusableTabsRef$cur2;
-
+  const { focusableTabsRef } = useContext(DSTabsContext);
+  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "ArrowRight" && focusableTabsRef.current) {
       e.preventDefault();
       e.stopPropagation();
-      const nextTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : (_focusableTabsRef$cur2 = _focusableTabsRef$cur.indexOf) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.call(_focusableTabsRef$cur, e.target)) + 1];
-      if (nextTab) nextTab.focus();
-      if (!nextTab) return;
+      const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
+      if (nextTab)
+        nextTab.focus();
+      if (!nextTab)
+        return;
     }
-
-    if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
-      var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
-
+    if (e.key === "ArrowLeft" && focusableTabsRef.current) {
       e.preventDefault();
       e.stopPropagation();
-      const prevTab = focusableTabsRef.current[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur3 = focusableTabsRef.current) === null || _focusableTabsRef$cur3 === void 0 ? void 0 : (_focusableTabsRef$cur4 = _focusableTabsRef$cur3.indexOf) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.call(_focusableTabsRef$cur3, e.target)) - 1];
-      if (prevTab) prevTab.focus();
-      if (!prevTab) return;
+      const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
+      if (prevTab)
+        prevTab.focus();
+      if (!prevTab)
+        return;
     }
-
-    if (e.key === 'ArrowDown') {
-      var _firstSubtabInternalR;
-
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
-      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
-      if (canFocusCrossTabs) (_firstSubtabInternalR = firstSubtabInternalRef.current) === null || _firstSubtabInternalR === void 0 ? void 0 : _firstSubtabInternalR.focus();
+      const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
+      if (canFocusCrossTabs)
+        firstSubtabInternalRef.current?.focus();
     }
-
-    if (e.key === 'ArrowUp') {
-      var _lastTabInternalRef$c;
-
+    if (e.key === "ArrowUp") {
       e.preventDefault();
       e.stopPropagation();
-      const canFocusCrossTabs = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
-      if (canFocusCrossTabs) (_lastTabInternalRef$c = lastTabInternalRef.current) === null || _lastTabInternalRef$c === void 0 ? void 0 : _lastTabInternalRef$c.focus();
+      const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
+      if (canFocusCrossTabs)
+        lastTabInternalRef.current?.focus();
     }
   }, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
   return {
     handleOnKeyDown
   };
 };
-
-export { useKeyboardNavigation };
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/esm/utils/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useKeyboardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport type { UseKeyboardNavigationReturnTypeT } from '../../DSTabsTypes';\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n        if (nextTab) nextTab.focus();\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n        if (prevTab) prevTab.focus();\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AAGO,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,qBAAqB,WAAW;AACxC,QAAM,EAAE,wBAAwB,uBAAuB,WAAW;AAElE,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,+BAAuB,SAAS;AAAA;AAGzD,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,2BAAmB,SAAS;AAAA;AAAA,KAGvD,CAAC,wBAAwB,oBAAoB;AAG/C,SAAO;AAAA,IACL;AAAA;AAAA;",
+  "names": []
+}

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,55 +1,46 @@
-import { useContext, useCallback } from 'react';
-import { DSTabsContext } from '../../DSTabsCTX.js';
-
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { DSTabsContext } from "../../DSTabsCTX";
 const useTabsCallbacks = () => {
   const {
     setInternalActiveTab,
     tabsListRef,
-    props: {
-      onTabChange,
-      isDSMobile,
-      allowTextSelection,
-      fixedTabsHeaders
-    }
+    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
   } = useContext(DSTabsContext);
-  const centerTabWhenTabChangeMobile = useCallback(e => {
+  const centerTabWhenTabChangeMobile = useCallback((e) => {
     if (tabsListRef.current) {
-      const {
-        offsetLeft
-      } = e === null || e === void 0 ? void 0 : e.target;
-      const {
-        width: tabWidth
-      } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-      const {
-        width: listWidth
-      } = tabsListRef.current.getBoundingClientRect();
+      const { offsetLeft } = e?.target;
+      const { width: tabWidth } = (e?.target).getBoundingClientRect();
+      const { width: listWidth } = tabsListRef.current.getBoundingClientRect();
       const extraSideSpace = listWidth - tabWidth;
       const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
       const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
       tabsListRef.current.scrollTo({
         top: 0,
         left: centeredLeftOffset,
-        behavior: 'smooth'
+        behavior: "smooth"
       });
-      e === null || e === void 0 ? void 0 : e.preventDefault();
+      e?.preventDefault();
     }
   }, [tabsListRef]);
   const handleOnTabChange = useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
-
     if (isDSMobile && !fixedTabsHeaders && e) {
       centerTabWhenTabChangeMobile(e);
     }
   }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
-  const handleOnMouseDown = useCallback(e => {
-    const role = e.target.getAttribute('role');
-    if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
+  const handleOnMouseDown = useCallback((e) => {
+    const role = e.target.getAttribute("role");
+    if (role !== "tabpanel" && allowTextSelection)
+      e.stopPropagation();
   }, [allowTextSelection]);
   return {
     handleOnTabChange,
     handleOnMouseDown
   };
 };
-
-export { useTabsCallbacks };
+export {
+  useTabsCallbacks
+};
+//# sourceMappingURL=useTabsCallbacks.js.map