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

package/cjs/parts/tabBar/useTabBar.js

@@ -1,89 +1,93 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-var useResizeObserver = require('@react-hook/resize-observer');
-var helpers = require('../../utils/helpers.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var constants = require('../../utils/constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useTabBar_exports = {};
+__export(useTabBar_exports, {
+  useTabBar: () => useTabBar
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
+var import_helpers = require("../../utils/helpers");
+var import_DSTabsCTX = require("../../DSTabsCTX");
+var import_constants = require("../../utils/constants");
 const useTabBar = () => {
   const {
     actualActiveTab,
     actualActiveTabRef,
     tabsListRef,
-    props: {
-      showSelectionIndicator,
-      isDSMobile,
-      fixedTabsHeaders
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  const [mobileGradients, setMobileGradients] = React.useState({
-    left: false,
-    right: false
-  });
-  const [indicatorStyle, setIndicatorStyle] = React.useState(constants.defaultIndicatorStyles);
-  const getIndicatorStyles = React.useCallback(() => {
+    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders }
+  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const [mobileGradients, setMobileGradients] = (0, import_react.useState)({ left: false, right: false });
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.defaultIndicatorStyles);
+  const getIndicatorStyles = (0, import_react.useCallback)(() => {
     if (tabsListRef.current) {
       const tabList = tabsListRef.current;
       const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !helpers.isElementVisible(activeTabButton, tabList)) return constants.defaultIndicatorStyles; // The missingMargins are to make the selection indicator white marks work properly in desktop, we need
-      // the full width of the tab button with margins.
-
+      if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList))
+        return import_constants.defaultIndicatorStyles;
       const missingMargins = isDSMobile ? 0 : 16;
-      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2; // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)
-      // behavior that adds scroll to the tabList
-
+      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
       const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      const backgroundWithTransparent = "linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ".concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth, "px )");
+      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;
       return {
-        left: "".concat(position, "px"),
-        width: "".concat(tabClientWidth, "px"),
+        left: `${position}px`,
+        width: `${tabClientWidth}px`,
         backgroundWithTransparent
       };
     }
-
-    return constants.defaultIndicatorStyles;
+    return import_constants.defaultIndicatorStyles;
   }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
-  const updateIndicatorStyle = React.useCallback(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
-  useResizeObserver__default["default"](tabsListRef, updateIndicatorStyle);
-  const updateMobileGradients = React.useCallback(() => {
+  const updateIndicatorStyle = (0, import_react.useCallback)(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
+  (0, import_resize_observer.default)(tabsListRef, updateIndicatorStyle);
+  const updateMobileGradients = (0, import_react.useCallback)(() => {
     if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
-      const {
-        scrollLeft,
-        scrollWidth,
-        clientWidth
-      } = tabsListRef.current;
+      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
       setMobileGradients({
-        left: helpers.shouldHaveLeftGradient(scrollLeft),
-        right: helpers.shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
+        left: (0, import_helpers.shouldHaveLeftGradient)(scrollLeft),
+        right: (0, import_helpers.shouldHaveRightGradient)(scrollLeft, clientWidth, scrollWidth)
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  React.useEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
-  React.useLayoutEffect(() => {
+  (0, import_react.useLayoutEffect)(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
     }
-
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [
+    updateMobileGradients,
+    showSelectionIndicator,
+    updateIndicatorStyle,
+    isDSMobile,
+    fixedTabsHeaders,
+    actualActiveTab
+  ]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,
@@ -92,5 +96,5 @@ const useTabBar = () => {
     updateMobileGradients
   };
 };
-
-exports.useTabBar = useTabBar;
+module.exports = __toCommonJS(useTabBar_exports);
+//# sourceMappingURL=useTabBar.js.map

package/cjs/parts/tabBar/useTabBar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { defaultIndicatorStyles } from '../../utils/constants';\nimport type { IndicatorStyleT, MobileGradientsT, UseTabBarReturnTypeT } from '../../DSTabsTypes';\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<MobileGradientsT>({ left: false, right: false });\n  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyleT>(defaultIndicatorStyles);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ${\n        tabClientWidth - 16\n      }px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;\n\n      return {\n        left: `${position}px`,\n        width: `${tabClientWidth}px`,\n        backgroundWithTransparent,\n      };\n    }\n    return defaultIndicatorStyles;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(tabsListRef, updateIndicatorStyle);\n\n  const updateMobileGradients = useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,6BAA8B;AAC9B,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAGhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY;AAAA,MAC3C,6BAAW;AAEf,QAAM,CAAC,iBAAiB,sBAAsB,2BAA2B,EAAE,MAAM,OAAO,OAAO;AAC/F,QAAM,CAAC,gBAAgB,qBAAqB,2BAA0B;AAEtE,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,qCAAiB,iBAAiB;AAAU,eAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,wBAAwB,OAAO,QAAQ,wBAAwB,OAAO,QAAQ,aAC9F,gBAAgB,wBAAwB,OAAO,QAAQ,wBAAwB,OAAO;AAE5F,YAAM,4BAA4B,uFAChC,iBAAiB,oBACD,iBAAiB,oBAAoB;AAEvD,aAAO;AAAA,QACL,MAAM,GAAG;AAAA,QACT,OAAO,GAAG;AAAA,QACV;AAAA;AAAA;AAGJ,WAAO;AAAA,KACN,CAAC,oBAAoB,kBAAkB,YAAY;AAEtD,QAAM,uBAAuB,8BAC3B,MAAM,WAAW,MAAM,kBAAkB,uBAAuB,MAChE,CAAC,oBAAoB;AAGvB,sCAAkB,aAAa;AAE/B,QAAM,wBAAwB,8BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,2CAAuB;AAAA,QAC7B,OAAO,4CAAwB,YAAY,aAAa;AAAA;AAAA;AAAA,KAG3D,CAAC,kBAAkB,YAAY;AAElC,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B;AAAA;AAEF,QAAI,cAAc,CAAC,kBAAkB;AACnC;AAAA;AAAA,KAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/cjs/parts/tabsContent/TabsContent.js

@@ -1,49 +1,53 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var TabsPanels = require('../tabsPanel/TabsPanels.js');
-var TabBar = require('../tabBar/TabBar.js');
-var styles = require('./styles.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-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__default["default"](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; }
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var TabsContent_exports = {};
+__export(TabsContent_exports, {
+  TabsContent: () => TabsContent
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_TabsPanels = require("../tabsPanel/TabsPanels");
+var import_TabBar = require("../tabBar/TabBar");
+var import_styles = require("./styles");
+var import_DSTabsCTX = require("../../DSTabsCTX");
+var import_DSTabsDatatestid = require("../../DSTabsDatatestid");
 const TabsContent = () => {
   const {
-    props: {
-      containerProps,
-      innerRef,
-      tabsListAriaLabel,
-      tabBarExtraContent
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
+  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    ...containerProps,
     ref: innerRef,
-    "data-testid": DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
-    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTabBarContainer, {
-      "aria-label": tabsListAriaLabel,
-      role: "tablist"
-    }, void 0, _TabBar || (_TabBar = /*#__PURE__*/_jsx__default["default"](TabBar.TabBar, {})), tabBarExtraContent), _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx__default["default"](TabsPanels.TabsPanels, {}))]
-  }));
+    "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledTabBarContainer, {
+    "aria-label": tabsListAriaLabel,
+    role: "tablist"
+  }, /* @__PURE__ */ import_react.default.createElement(import_TabBar.TabBar, null), tabBarExtraContent), /* @__PURE__ */ import_react.default.createElement(import_TabsPanels.TabsPanels, null));
 };
-
-exports.TabsContent = TabsContent;
+module.exports = __toCommonJS(TabsContent_exports);
+//# sourceMappingURL=TabsContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB;AAAA,MACpD,6BAAW;AAEf,SACE,mDAAC,OAAD;AAAA,OAAS;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,yCAAiB;AAAA,KACpE,mDAAC,qCAAD;AAAA,IAAuB,cAAY;AAAA,IAAmB,MAAK;AAAA,KACzD,mDAAC,sBAAD,OACC,qBAEH,mDAAC,8BAAD;AAAA;",
+  "names": []
+}

package/cjs/parts/tabsContent/styles.js

@@ -1,15 +1,39 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledTabBarContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-vm3k1y-0"
-})(["display:flex;overflow-x:hidden;"]);
-
-exports.StyledTabBarContainer = StyledTabBarContainer;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledTabBarContainer: () => StyledTabBarContainer
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const StyledTabBarContainer = import_styled_components.default.div`
+  display: flex;
+  overflow-x: hidden;
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

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

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

package/cjs/parts/tabsPanel/TabsPanels.js

@@ -1,77 +1,79 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-var React = require('react');
-var SwipeableViews = require('react-swipeable-views');
-var helpers = require('../../utils/helpers.js');
-var styles = require('./styles.js');
-var DSTabsCTX = require('../../DSTabsCTX.js');
-var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SwipeableViews__default = /*#__PURE__*/_interopDefaultLegacy(SwipeableViews);
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var TabsPanels_exports = {};
+__export(TabsPanels_exports, {
+  TabsPanels: () => TabsPanels
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_swipeable_views = __toESM(require("react-swipeable-views"));
+var import_helpers = require("../../utils/helpers");
+var import_styles = require("./styles");
+var import_DSTabsCTX = require("../../DSTabsCTX");
+var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks");
 const TabsPanels = () => {
   const {
     actualActiveTab,
     focusableTabsRef,
-    props: {
-      animated,
-      enableMouseEvents,
-      onlyRenderActiveTab,
-      children: tabs,
-      isDSMobile
-    }
-  } = React.useContext(DSTabsCTX.DSTabsContext);
-  const {
-    handleOnTabChange,
-    handleOnMouseDown
-  } = useTabsCallbacks.useTabsCallbacks();
-  const handleOnChangeIndex = React.useCallback(index => {
-    handleOnTabChange(helpers.getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
+    props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile }
+  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const { handleOnTabChange, handleOnMouseDown } = (0, import_useTabsCallbacks.useTabsCallbacks)();
+  const handleOnChangeIndex = (0, import_react.useCallback)((index) => {
+    handleOnTabChange((0, import_helpers.getIdByIndex)(tabs, index));
+    if (focusableTabsRef.current)
+      focusableTabsRef.current[index].click();
   }, [focusableTabsRef, handleOnTabChange, tabs]);
-  const panels = React.useMemo(() => React__default["default"].Children.map(tabs, tab => {
-    const {
-      tabId: panelId = '',
-      style,
-      children: content
-    } = tab.props;
+  const panels = (0, import_react.useMemo)(() => import_react.default.Children.map(tabs, (tab) => {
+    const { tabId: panelId = "", style, children: content } = tab.props;
     const isActive = actualActiveTab === panelId;
     const shouldRender = !onlyRenderActiveTab || isActive;
-    return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.StyledPanelContainer, {
+    return shouldRender && /* @__PURE__ */ import_react.default.createElement(import_styles.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__default["default"](SwipeableViews__default["default"], {
-      enableMouseEvents: enableMouseEvents,
-      index: helpers.getIndexById(tabs, actualActiveTab),
+    return /* @__PURE__ */ import_react.default.createElement(import_react_swipeable_views.default, {
+      enableMouseEvents,
+      index: (0, import_helpers.getIndexById)(tabs, actualActiveTab),
       onChangeIndex: handleOnChangeIndex
-    }, void 0, panels);
+    }, panels);
   }
-
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: panels
-  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, panels);
 };
-
-exports.TabsPanels = TabsPanels;
+module.exports = __toCommonJS(TabsPanels_exports);
+//# sourceMappingURL=TabsPanels.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwD;AACxD,mCAA2B;AAC3B,qBAA2C;AAC3C,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM;AAAA,MACzE,6BAAW;AAEf,QAAM,EAAE,mBAAmB,sBAAsB;AAEjD,QAAM,sBAAsB,8BAC1B,CAAC,UAAkB;AACjB,sBAAkB,iCAAa,MAAM;AAErC,QAAI,iBAAiB;AAAS,uBAAiB,QAAQ,OAAO;AAAA,KAEhE,CAAC,kBAAkB,mBAAmB;AAGxC,QAAM,SAAS,0BACb,MACE,qBAAM,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,mDAAC,oCAAD;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,mDAAC,sCAAD;AAAA,MACE;AAAA,MACA,OAAO,iCAAa,MAAM;AAAA,MAC1B,eAAe;AAAA,OAEd;AAAA;AAKP,SAAO,wFAAG;AAAA;",
+  "names": []
+}

package/cjs/parts/tabsPanel/styles.js

@@ -1,25 +1,45 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledPanelContainer = /*#__PURE__*/styled__default["default"].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;" : "";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledPanelContainer: () => StyledPanelContainer
 });
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const StyledPanelContainer = import_styled_components.default.div`
+  padding-top: 8px;
+  &:focus {
+    outline: none;
+  }
+
+  ${({ hidden }) => hidden ? "visibility: hidden;" : ""}
 
-exports.StyledPanelContainer = StyledPanelContainer;
+  ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAGZ,MAAM,uBAAuB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,aAAc,SAAS,wBAAwB;AAAA;AAAA,IAElD,CAAC,EAAE,iBAAkB,aAAa,oBAAoB;AAAA;",
+  "names": []
+}