@elliemae/ds-tabs 3.52.0-rc.2 → 3.52.0-rc.20

package/dist/cjs/parts/tabBar/TabBarItemRenderer.js

@@ -0,0 +1,136 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TabBarItemRenderer_exports = {};
+__export(TabBarItemRenderer_exports, {
+  TabBarItemRenderer: () => TabBarItemRenderer
+});
+module.exports = __toCommonJS(TabBarItemRenderer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = __toESM(require("react"));
+var import_useTabBar = require("./useTabBar.js");
+var import_styles = require("./styles.js");
+var import_DSTabsCTX = require("../../DSTabsCTX.js");
+var import_useKeyboardNavigation = require("../../utils/hooks/useKeyboardNavigation.js");
+var import_helpers = require("../../utils/helpers.js");
+var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
+var import_constants = require("../../constants/index.js");
+const TabBarItemRenderer = import_react2.default.memo(() => {
+  const {
+    tabsRef,
+    focusableTabsRef,
+    tabsRefAsArray,
+    carouselOnlyListRef,
+    actualActiveTab,
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+  } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
+  const { lastTabInternalRef, firstSubtabInternalRef } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
+  const { handleOnTabChange } = (0, import_useTabsCallbacks.useTabsCallbacks)();
+  const { handleOnKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
+  const { updateIndicatorStyle } = (0, import_useTabBar.useTabBar)();
+  const availableTabIndexes = [];
+  return import_react2.default.Children.map(tabs, (tab, index) => {
+    const {
+      tabId = "",
+      title = "",
+      style,
+      required = false,
+      disabled = false,
+      applyAriaDisabled = false,
+      ref,
+      onClick,
+      onKeyDown,
+      ...rest
+    } = tab.props;
+    if (!disabled) availableTabIndexes.push(index);
+    return /* @__PURE__ */ (0, import_react.createElement)(
+      import_styles.StyledTabButton,
+      {
+        ...rest,
+        key: tabId,
+        role: "tab",
+        innerRef: (tabButtonRef) => {
+          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = tabButtonRef;
+            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
+              focusableTabsRef.current.push(tabButtonRef);
+            tabsRef.current[index] = tabButtonRef;
+            if (type === import_constants.TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
+              firstSubtabInternalRef.current = tabButtonRef;
+            }
+            if (type !== import_constants.TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
+              lastTabInternalRef.current = tabButtonRef;
+            }
+            if (ref) ref.current = tabButtonRef;
+          }
+        },
+        type: "button",
+        "aria-controls": tabId,
+        "aria-selected": actualActiveTab === tabId && !applyAriaDisabled,
+        "aria-disabled": disabled || applyAriaDisabled,
+        isDSMobile,
+        fixedTabsHeaders,
+        tabType: type,
+        "data-required": required,
+        "data-tab-id": tabId,
+        "data-index": index,
+        withCarousel,
+        isActive: actualActiveTab === tabId,
+        disabled,
+        showSeparator: showSeparator && type !== import_constants.TAB_TYPES.NORMAL,
+        "data-testid": type === import_constants.TAB_TYPES.NORMAL ? import_constants.TABS_DATA_TESTID.TAB_BUTTON : import_constants.TABS_DATA_TESTID.SUBTAB_BUTTON,
+        id: `${tabId}-label`,
+        onClick: (e) => {
+          if (applyAriaDisabled) return;
+          if (!disabled) {
+            handleOnTabChange(tabId, e);
+            updateIndicatorStyle();
+          }
+          if (onClick && !disabled) onClick(tabId, e);
+        },
+        onFocus: (e) => {
+          if (withCarousel) (0, import_helpers.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ScreenReaderOnly, { children: "Required" })
+      ] })
+    );
+  });
+});
+//# sourceMappingURL=TabBarItemRenderer.js.map

package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/tabBar/TabBarItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { useTabBar } from './useTabBar.js';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\n\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\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 { updateIndicatorStyle } = useTabBar();\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    if (!disabled) availableTabIndexes.push(index);\n    return (\n      <StyledTabButton\n        {...rest}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\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 !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            handleOnTabChange(tabId, e);\n            updateIndicatorStyle();\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\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 && (\n          <>\n            <StyledRequiredMark aria-hidden=\"true\">&#9679;</StyledRequiredMark>\n            <ScreenReaderOnly>Required</ScreenReaderOnly>\n          </>\n        )}\n      </StyledTabButton>\n    );\n  });\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["import_react", "React"]
+}

package/dist/cjs/parts/tabBar/styles.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
+  ScreenReaderOnly: () => ScreenReaderOnly,
   StyledMobileGradient: () => StyledMobileGradient,
   StyledRequiredMark: () => StyledRequiredMark,
   StyledSelectionIndicator: () => StyledSelectionIndicator,
@@ -39,13 +40,13 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("../../utils/constants.js");
+var import_constants = require("../../constants/index.js");
 const StyledSelectionIndicator = import_ds_system.styled.div`
   position: absolute;
   height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
   top: ${({ tabType, isDSMobile }) => {
   if (isDSMobile) return `35px`;
-  if (tabType === import_constants.TabTypes.NORMAL_SMALL) return `15px`;
+  if (tabType === import_constants.TAB_TYPES.NORMAL_SMALL) return `15px`;
   return `25px`;
 }};
   z-index: 1;
@@ -91,7 +92,7 @@ const StyledTabButton = import_ds_system.styled.button`
   cursor: pointer;
   transition: 100ms cubic-bezier(0, 0, 0.42, 1);
   text-transform: ${({ tabType, isDSMobile }) => {
-  if (tabType === import_constants.TabTypes.SUBTABS) return "capitalize";
+  if (tabType === import_constants.TAB_TYPES.SUBTABS) return "capitalize";
   return isDSMobile ? "none" : "uppercase";
 }};
   letter-spacing: 0px;
@@ -112,7 +113,7 @@ const StyledTabButton = import_ds_system.styled.button`
   color: ${({ theme }) => theme.colors.neutral[700]};
   ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
 
-  ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`}
+  ${({ tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`}
 
   ${({ theme, isActive, disabled }) => isActive && !disabled ? `
           font-weight:  ${theme.fontWeights.semibold};
@@ -151,7 +152,7 @@ const StyledTabButton = import_ds_system.styled.button`
               right: -16px;
               top: 50%;
               transform: translateY(-50%);
-              height: ${tabType === import_constants.TabTypes.SUBTABS ? `10px` : `16px`};
+              height: ${tabType === import_constants.TAB_TYPES.SUBTABS ? `10px` : `16px`};
               background: ${theme.colors.neutral[400]};
             }` : ``}
 
@@ -170,7 +171,7 @@ const StyledTabButton = import_ds_system.styled.button`
       border: 2px solid ${theme.colors.brand[700]};
     }
 
-    ${tabType !== import_constants.TabTypes.SUBTABS && isActive ? `
+    ${tabType !== import_constants.TAB_TYPES.SUBTABS && isActive ? `
       &:before {
         position: absolute;
         content: '';
@@ -243,7 +244,7 @@ const StyledTabList = import_ds_system.styled.div`
   z-index: 0;
   ${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
 
-  ${({ theme, isDSMobile, tabType }) => tabType !== import_constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
+  ${({ theme, isDSMobile, tabType }) => tabType !== import_constants.TAB_TYPES.NORMAL_SMALL && !isDSMobile ? `
   &:after {
     content: '';
     position: absolute;
@@ -301,4 +302,13 @@ const StyledRequiredMark = import_ds_system.styled.span`
   position: absolute;
   top: 5px;
 `;
+const ScreenReaderOnly = import_ds_system.styled.div`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/parts/tabBar/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TabTypes.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TabTypes.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TAB_TYPES.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TAB_TYPES.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -36,7 +36,7 @@ var import_react = require("react");
 var import_useResizeObserver = require("./useResizeObserver.js");
 var import_helpers = require("../../utils/helpers.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_constants = require("../../utils/constants.js");
+var import_constants = require("../../constants/index.js");
 const useTabBar = () => {
   const {
     actualActiveTab,
@@ -48,12 +48,12 @@ const useTabBar = () => {
     left: false,
     right: false
   });
-  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.defaultIndicatorStyles);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.DEFAULT_INDICATOR_STYLES);
   const getIndicatorStyles = (0, import_react.useCallback)(() => {
     if (tabsListRef.current) {
       const tabList = tabsListRef.current;
       const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList)) return import_constants.defaultIndicatorStyles;
+      if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList)) return import_constants.DEFAULT_INDICATOR_STYLES;
       const missingMargins = isDSMobile ? 0 : 16;
       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;
@@ -62,7 +62,7 @@ const useTabBar = () => {
         width: Math.round(tabClientWidth)
       };
     }
-    return import_constants.defaultIndicatorStyles;
+    return import_constants.DEFAULT_INDICATOR_STYLES;
   }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
   const updateIndicatorStyle = (0, import_react.useCallback)(
     () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),

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

@@ -1,7 +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 './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\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<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.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      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\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(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\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;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,+BAAkC;AAClC,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,uCAAsB;AAE7G,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,2BAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,kDAAkB,sBAAsB,YAAY,OAAO;AAC3D,kDAAkB,sBAAsB,mBAAmB,OAAO;AAElE,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DEFAULT_INDICATOR_STYLES } from '../../constants/index.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\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<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(DEFAULT_INDICATOR_STYLES);\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 DEFAULT_INDICATOR_STYLES;\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      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return DEFAULT_INDICATOR_STYLES;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates indicator style with a delay. It:\n   * 1. Uses setTimeout to delay style updates\n   * 2. Called on resize and tab changes\n   */\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\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;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,+BAAkC;AAClC,qBAAkF;AAClF,uBAA8B;AAG9B,uBAAyC;AAUlC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,yCAAwB;AAE/G,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAOlE,QAAM,2BAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,kDAAkB,sBAAsB,YAAY,OAAO;AAC3D,kDAAkB,sBAAsB,mBAAmB,OAAO;AAOlE,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -39,7 +39,7 @@ var import_TabsPanels = require("../tabsPanel/TabsPanels.js");
 var import_TabBar = require("../tabBar/TabBar.js");
 var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_DSTabsDatatestid = require("../../DSTabsDatatestid.js");
+var import_constants = require("../../constants/index.js");
 const TabsContent = () => {
   const {
     props,
@@ -54,7 +54,7 @@ const TabsContent = () => {
       ...xstyledProps,
       ...containerProps,
       ref: innerRef,
-      "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
+      "data-testid": import_constants.TABS_DATA_TESTID.TABS_CONTAINER,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={DSTabsDatatestid.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,8BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,yCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={TABS_DATA_TESTID.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,8BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,uBAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,kCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: {\n      animated,\n      enableMouseEvents,\n      onlyRenderActiveTab,\n      children: tabs,\n      isDSMobile,\n      tabPanelsProps,\n      swipeableViewsContainerProps,\n    },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, handleOnTabChange],\n  );\n\n  const panels = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    const emptyPanelRender = animated ? <div /> : null;\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n      const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n\n      if (disabled) return emptyPanelRender;\n      if (!shouldRender) return emptyPanelRender;\n      return (\n        <StyledPanelContainer\n          {...tabPanelsProps}\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          hide={!isActive}\n          onMouseDown={handleOnMouseDown}\n          role=\"tabpanel\"\n          style={{\n            ...(tabPanelsProps?.style || {}),\n            ...(style || {}),\n          }}\n          isDSMobile={isDSMobile}\n        >\n          {content}\n        </StyledPanelContainer>\n      );\n    });\n  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n    const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n    if (index === -1) return 0;\n    return index;\n  }, [actualActiveTab, tabs]);\n\n  if (animated) {\n    // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n    const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n    return (\n      <Comp\n        {...swipeableViewsContainerProps}\n        style={{\n          overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n          ...(swipeableViewsContainerProps?.style || {}),\n        }}\n        enableMouseEvents={enableMouseEvents}\n        index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </Comp>\n    );\n  }\n\n  return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEiB;AAShC;AA/ER,IAAAA,gBAAwD;AACxD,mCAA2B;AAC3B,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AAElE,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,aAAS,uBAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,4CAAC,SAAI,IAAK;AAC9C,WAAO,cAAAC,QAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,mBAAmB,UAAU,CAAC;AAExG,QAAM,yFAAqF,uBAAQ,MAAM;AACvG,UAAM,gBAAgB,cAAAA,QAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,6BAAAC,SAAwB,WAAW,6BAAAA;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: {\n      animated,\n      enableMouseEvents,\n      onlyRenderActiveTab,\n      children: tabs,\n      isDSMobile,\n      tabPanelsProps,\n      swipeableViewsContainerProps,\n    },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, handleOnTabChange],\n  );\n\n  const panels = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    const emptyPanelRender = animated ? <div /> : null;\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n      const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n\n      if (disabled) return emptyPanelRender;\n      if (!shouldRender) return emptyPanelRender;\n      return (\n        <StyledPanelContainer\n          {...tabPanelsProps}\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          hide={!isActive}\n          onMouseDown={handleOnMouseDown}\n          role=\"tabpanel\"\n          style={{\n            ...(tabPanelsProps?.style || {}),\n            ...(style || {}),\n          }}\n          isDSMobile={isDSMobile}\n        >\n          {content}\n        </StyledPanelContainer>\n      );\n    });\n  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n    const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n    if (index === -1) return 0;\n    return index;\n  }, [actualActiveTab, tabs]);\n\n  if (animated) {\n    // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n    const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n    return (\n      <Comp\n        {...swipeableViewsContainerProps}\n        style={{\n          overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n          ...(swipeableViewsContainerProps?.style || {}),\n        }}\n        enableMouseEvents={enableMouseEvents}\n        index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </Comp>\n    );\n  }\n\n  return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EiB;AAShC;AAtFR,IAAAA,gBAAwD;AACxD,mCAA2B;AAC3B,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AASlE,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,aAAS,uBAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,4CAAC,SAAI,IAAK;AAC9C,WAAO,cAAAC,QAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,mBAAmB,UAAU,CAAC;AAExG,QAAM,yFAAqF,uBAAQ,MAAM;AACvG,UAAM,gBAAgB,cAAAA,QAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,6BAAAC,SAAwB,WAAW,6BAAAA;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": ["import_react", "React", "SwipeableViews"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -28,35 +28,45 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  tabPropTypes: () => tabPropTypes,
-  tabsDefaultProps: () => tabsDefaultProps,
-  tabsPropTypes: () => tabsPropTypes
+  DSTabPropTypes: () => DSTabPropTypes,
+  DSTabsDefaultProps: () => DSTabsDefaultProps,
+  DSTabsPropTypes: () => DSTabsPropTypes
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_constants = require("./utils/constants.js");
+var import_constants = require("./constants/index.js");
 const noop = () => {
 };
-const tabPropTypes = {
+const DSTabPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
   tabId: import_ds_props_helpers.PropTypes.string.description("Unique Tab id.").defaultValue(""),
   title: import_ds_props_helpers.PropTypes.string.description("Tab title.").defaultValue(""),
   required: import_ds_props_helpers.PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
   disabled: import_ds_props_helpers.PropTypes.bool.description("Disables Tab.").defaultValue(false),
   applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
     "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
-  ).defaultValue(false)
+  ).defaultValue(false),
+  style: import_ds_props_helpers.PropTypes.object.description("Custom styles for the tab.").defaultValue({}),
+  ref: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the tab element.").defaultValue(void 0),
+  onClick: import_ds_props_helpers.PropTypes.func.description("Click handler for the tab.").defaultValue(void 0),
+  onKeyDown: import_ds_props_helpers.PropTypes.func.description("Keydown handler for the tab.").defaultValue(void 0),
+  children: import_ds_props_helpers.PropTypes.node.description("Content of the tab.").isRequired
 };
-const tabsPropTypes = {
+const DSTabsPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSTabsName, import_constants.TABS_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   animated: import_ds_props_helpers.PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
   enableMouseEvents: import_ds_props_helpers.PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
   allowTextSelection: import_ds_props_helpers.PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
   onTabChange: import_ds_props_helpers.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
-  type: import_ds_props_helpers.PropTypes.oneOf(import_constants.TabTypesValuesAsArray).description("Tab type.").defaultValue(import_constants.TabTypesValuesAsArray[0]),
-  tabBarExtraContent: import_ds_props_helpers.PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
-  TabBarExtraContent: import_ds_props_helpers.PropTypes.func.description("Extra content next to the Tab Bar as a react component instead of JSX").defaultValue(void 0),
+  type: import_ds_props_helpers.PropTypes.oneOf(import_constants.TAB_TYPES_VALUES_AS_ARRAY).description("Tab type.").defaultValue(import_constants.TAB_TYPES_VALUES_AS_ARRAY[0]),
+  fixedTabsHeaders: import_ds_props_helpers.PropTypes.bool.description("Fixes the tab headers.").defaultValue(false),
+  isDSMobile: import_ds_props_helpers.PropTypes.bool.description("Indicates if the component is in mobile mode.").defaultValue(false),
+  showSelectionIndicator: import_ds_props_helpers.PropTypes.bool.description("Shows the selection indicator for the active tab.").defaultValue(true),
+  showSeparator: import_ds_props_helpers.PropTypes.bool.description("Shows a separator between tabs.").defaultValue(true),
   onlyRenderActiveTab: import_ds_props_helpers.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
   withCarousel: import_ds_props_helpers.PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
   activeTab: import_ds_props_helpers.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
@@ -65,16 +75,20 @@ const tabsPropTypes = {
   containerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
   innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0),
   tabPanelsProps: import_ds_props_helpers.PropTypes.shape(import_ds_props_helpers.globalAttributesPropTypes).description("Additional properties for the tab container.").defaultValue({}),
-  swipeableViewsContainerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the swipeable container.").defaultValue({})
+  swipeableViewsContainerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the swipeable container.").defaultValue({}),
+  firstSubtabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
+  lastTabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
+  TabBarExtraContent: import_ds_props_helpers.PropTypes.element.description("Additional content to display in the tab bar."),
+  tabBarExtraContent: import_ds_props_helpers.PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0)
 };
-const tabsDefaultProps = {
+const DSTabsDefaultProps = {
   containerProps: {},
   animated: true,
   enableMouseEvents: false,
   allowTextSelection: false,
   onTabChange: noop,
   tabsListAriaLabel: "Tab list",
-  type: import_constants.TabTypes.NORMAL,
+  type: import_constants.TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n  export interface DefaultProps {\n    tabId: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface PropsOptional {\n    style?: Record<string, unknown>;\n    title?: string;\n    required?: boolean;\n    disabled?: boolean;\n    ref?: React.MutableRefObject<HTMLButtonElement>;\n    onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n    onKeyDown?: (e: React.KeyboardEvent) => null | void;\n  }\n\n  export interface PropsRequired {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface Props extends Partial<DefaultProps>, PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    animated: boolean;\n    enableMouseEvents: boolean;\n    allowTextSelection: boolean;\n    onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n    tabsListAriaLabel: string;\n    type: DSTabsInternalsT.TabTypesT;\n    children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n    onlyRenderActiveTab: boolean;\n    fixedTabsHeaders: boolean;\n    withCarousel: boolean;\n    isDSMobile: boolean;\n    showSelectionIndicator: boolean;\n    showSeparator: boolean;\n    tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n    swipeableViewsContainerProps: SwipeableViewsProps;\n  }\n\n  export interface PropsOptional {\n    firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n    lastTabRef?: React.MutableRefObject<HTMLElement>;\n    TabBarExtraContent?: React.ComponentType;\n    tabBarExtraContent?: React.ReactNode;\n    activeTab?: string;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      PropsOptional,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof PropsOptional>,\n      XstyledProps {}\n\n  export interface InternalProps extends DefaultProps, PropsOptional {}\n}\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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  TabBarExtraContent: PropTypes.func\n    .description('Extra content next to the Tab Bar as a react component instead of JSX')\n    .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  tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n    .description('Additional properties for the tab container.')\n    .defaultValue({}),\n  swipeableViewsContainerProps: PropTypes.object\n    .description('Additional properties for the swipeable container.')\n    .defaultValue({}),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\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  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAIvE,uBAAgD;AAEhD,MAAM,OAAO,MAAY;AAAC;AA+DnB,MAAM,eAAe;AAAA,EAC1B,OAAO,kCAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,kCAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,kCAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAAA,EACxE,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,kCAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,kCAAU,MAAM,sCAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,uCAAsB,CAAC,CAAC;AAAA,EAC3G,oBAAoB,kCAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,kCAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,qBAAqB,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,kCAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAAA,EACzB,gBAAgB,kCAAU,MAAM,iDAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,kCAAU,OACrC,YAAY,oDAAoD,EAChE,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;",
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n  export interface DefaultProps {\n    tabId: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface OptionalProps {\n    style?: Record<string, unknown>;\n    title?: string;\n    required?: boolean;\n    disabled?: boolean;\n    ref?: React.MutableRefObject<HTMLButtonElement>;\n    onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n    onKeyDown?: (e: React.KeyboardEvent) => null | void;\n  }\n\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    animated: boolean;\n    enableMouseEvents: boolean;\n    allowTextSelection: boolean;\n    onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n    tabsListAriaLabel: string;\n    type: DSTabsInternalsT.TabTypesT;\n    children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n    onlyRenderActiveTab: boolean;\n    fixedTabsHeaders: boolean;\n    withCarousel: boolean;\n    isDSMobile: boolean;\n    showSelectionIndicator: boolean;\n    showSeparator: boolean;\n    tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n    swipeableViewsContainerProps: SwipeableViewsProps;\n  }\n\n  export interface OptionalProps {\n    firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n    lastTabRef?: React.MutableRefObject<HTMLElement>;\n    TabBarExtraContent?: React.ComponentType;\n    tabBarExtraContent?: React.ReactNode;\n    activeTab?: string;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n  ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n  onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n  onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n  children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n  ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n  fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n  isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n  showSelectionIndicator: PropTypes.bool\n    .description('Shows the selection indicator for the active tab.')\n    .defaultValue(true),\n  showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\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  tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n    .description('Additional properties for the tab container.')\n    .defaultValue({}),\n  swipeableViewsContainerProps: PropTypes.object\n    .description('Additional properties for the swipeable container.')\n    .defaultValue({}),\n  firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the first subtab element.')\n    .defaultValue(undefined),\n  lastTabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the last tab element.')\n    .defaultValue(undefined),\n  TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n  tabBarExtraContent: PropTypes.node\n    .description('Additional content to display in the tab bar.')\n    .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }