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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACwEiB;AAShC;AA/ER,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;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,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AAElE,QAAM,sBAAsB;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,SAAS,QAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,oBAAC,SAAI,IAAK;AAC9C,WAAOA,OAAM,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,qFAAqF,QAAQ,MAAM;AACvG,UAAM,gBAAgBA,OAAM,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,gBAAwB,WAAW;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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;AC+EiB;AAShC;AAtFR,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;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,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AASlE,QAAM,sBAAsB;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,SAAS,QAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,oBAAC,SAAI,IAAK;AAC9C,WAAOA,OAAM,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,qFAAqF,QAAQ,MAAM;AACvG,UAAM,gBAAgBA,OAAM,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,gBAAwB,WAAW;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": ["React"]
 }

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

@@ -1,27 +1,42 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
-import { TabTypes, TabTypesValuesAsArray } from "./utils/constants.js";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from "./constants/index.js";
 const noop = () => {
 };
-const tabPropTypes = {
+const DSTabPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   tabId: PropTypes.string.description("Unique Tab id.").defaultValue(""),
   title: PropTypes.string.description("Tab title.").defaultValue(""),
   required: PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
   disabled: PropTypes.bool.description("Disables Tab.").defaultValue(false),
   applyAriaDisabled: 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: PropTypes.object.description("Custom styles for the tab.").defaultValue({}),
+  ref: PropTypes.shape({ current: PropTypes.any }).description("Ref to the tab element.").defaultValue(void 0),
+  onClick: PropTypes.func.description("Click handler for the tab.").defaultValue(void 0),
+  onKeyDown: PropTypes.func.description("Keydown handler for the tab.").defaultValue(void 0),
+  children: PropTypes.node.description("Content of the tab.").isRequired
 };
-const tabsPropTypes = {
+const DSTabsPropTypes = {
+  ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   animated: PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
   enableMouseEvents: PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
   allowTextSelection: PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
   onTabChange: PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
-  type: PropTypes.oneOf(TabTypesValuesAsArray).description("Tab type.").defaultValue(TabTypesValuesAsArray[0]),
-  tabBarExtraContent: PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
-  TabBarExtraContent: PropTypes.func.description("Extra content next to the Tab Bar as a react component instead of JSX").defaultValue(void 0),
+  type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description("Tab type.").defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),
+  fixedTabsHeaders: PropTypes.bool.description("Fixes the tab headers.").defaultValue(false),
+  isDSMobile: PropTypes.bool.description("Indicates if the component is in mobile mode.").defaultValue(false),
+  showSelectionIndicator: PropTypes.bool.description("Shows the selection indicator for the active tab.").defaultValue(true),
+  showSeparator: PropTypes.bool.description("Shows a separator between tabs.").defaultValue(true),
   onlyRenderActiveTab: PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
   withCarousel: PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
   activeTab: PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
@@ -30,16 +45,20 @@ const tabsPropTypes = {
   containerProps: PropTypes.object.description("Additional properties for the container.").defaultValue({}),
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description("Ref to the container.").defaultValue(void 0),
   tabPanelsProps: PropTypes.shape(globalAttributesPropTypes).description("Additional properties for the tab container.").defaultValue({}),
-  swipeableViewsContainerProps: PropTypes.object.description("Additional properties for the swipeable container.").defaultValue({})
+  swipeableViewsContainerProps: PropTypes.object.description("Additional properties for the swipeable container.").defaultValue({}),
+  firstSubtabRef: PropTypes.shape({ current: PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
+  lastTabRef: PropTypes.shape({ current: PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
+  TabBarExtraContent: PropTypes.element.description("Additional content to display in the tab bar."),
+  tabBarExtraContent: 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: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -51,8 +70,8 @@ const tabsDefaultProps = {
   swipeableViewsContainerProps: {}
 };
 export {
-  tabPropTypes,
-  tabsDefaultProps,
-  tabsPropTypes
+  DSTabPropTypes,
+  DSTabsDefaultProps,
+  DSTabsPropTypes
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAIvE,SAAS,UAAU,6BAA6B;AAEhD,MAAM,OAAO,MAAY;AAAC;AA+DnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAAA,EACxE,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,gBAAgB;AAAA,EAC3B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,CAAC,CAAC;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,UAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAAA,EACzB,gBAAgB,UAAU,MAAM,yBAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,UAAU,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,SAAS;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-tabs-valid.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { DSTabs, DSTab, TabTypes } from "../index.js";
+import { DSTabs, DSTab, TAB_TYPES } from "../index.js";
 const buttonRef = React2.createRef();
 const divRef = React2.createRef();
 const MockComponent = () => /* @__PURE__ */ jsx("div", {});
@@ -32,7 +32,7 @@ const testTabsPartialDefaults = {
   isDSMobile: false,
   onTabChange: (tabId) => {
   },
-  type: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   showSeparator: true
 };
 const testTabsProps = {
@@ -64,7 +64,7 @@ const testTabsCompleteDefaults = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -95,7 +95,7 @@ const testTabsExplicitDefinition = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -134,7 +134,7 @@ const testTabsInferedTypeCompatibility = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -159,7 +159,7 @@ const testTabsDefinitionAsConst = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: TabTypes.NORMAL,
+  type: TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -221,7 +221,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
       onTabChange: (tabId) => {
       },
       tabsListAriaLabel: "Tab list",
-      type: TabTypes.NORMAL,
+      type: TAB_TYPES.NORMAL,
       onlyRenderActiveTab: false,
       withCarousel: false,
       isDSMobile: false,

package/dist/esm/typescript-testing/typescript-tabs-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-tabs-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/jsx-no-duplicate-props */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSTabs, DSTab, TabTypes } from '../index.js';\nimport type { DSTabsT, DSTabT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForTabs = DSTabsT.Props;\ntype ComponentPropsTabsInternals = DSTabsT.InternalProps;\ntype ComponentPropsTabsDefaultProps = DSTabsT.DefaultProps;\ntype ComponentPropsTabsOptionalProps = DSTabsT.PropsOptional;\n\ntype ComponentPropsForTab = DSTabT.Props;\ntype ComponentPropsTabDefaultProps = DSTabT.DefaultProps;\ntype ComponentPropsTabOptionalProps = DSTabT.PropsOptional;\ntype ComponentPropsTabRequiredProps = DSTabT.PropsRequired;\n\nconst buttonRef = React.createRef() as React.MutableRefObject<HTMLButtonElement>;\nconst divRef = React.createRef() as React.MutableRefObject<HTMLDivElement>;\nconst MockComponent: React.ComponentType = () => <div></div>;\n\n// Tabs\nconst testTabsOptionalProps: ComponentPropsTabsOptionalProps = {\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabRequiredProps: ComponentPropsTabRequiredProps = {\n  children: <div></div>,\n};\n\nconst testTabOptionalProps: ComponentPropsTabOptionalProps = {\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\n\n// Tabs\nconst testTabsPartialDefaults: Partial<ComponentPropsTabsDefaultProps> = {\n  allowTextSelection: false,\n  isDSMobile: false,\n  onTabChange: (tabId: string) => {},\n  type: TabTypes.NORMAL,\n  showSeparator: true,\n};\n\nconst testTabsProps: ComponentPropsForTabs = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n};\n\nconst testTabsPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n} as ComponentPropsForTabs;\n\n// Tab\nconst testTabPartialDefaults: Partial<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n};\n\nconst testTabProps: ComponentPropsForTab = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n};\n\nconst testTabPropsAsSyntax = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n} as ComponentPropsForTab;\n\n// InternalProps requires all defaults to be filled in\n\n// Tabs\nconst testTabsCompleteDefaults: Required<ComponentPropsTabsDefaultProps> = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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\nconst testTabsInternalProps: ComponentPropsTabsInternals = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n};\n\nconst testTabsInternalPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n} as ComponentPropsTabsInternals;\n\n// Tab\nconst testTabCompleteDefaults: Required<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\n\n// Tabs\nconst testTabsExplicitDefinition: ComponentPropsForTabs = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabExplicitDefinition: ComponentPropsForTab = {\n  children: [],\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\n\n// Tabs\nconst testTabsInferedTypeCompatibility = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as ComponentPropsForTabs;\n\nconst testTabsDefinitionAsConst = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as const;\n\n// Tab\nconst testTabInferedTypeCompatibility = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as ComponentPropsForTab;\n\nconst testTabDefinitionAsConst = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSTabs {...testTabsExplicitDefinition} />\n    <DSTabs {...testTabsInferedTypeCompatibility}></DSTabs>\n    <DSTabs {...testTabsDefinitionAsConst}></DSTabs>\n\n    <DSTab {...testTabExplicitDefinition} />\n    <DSTab {...testTabInferedTypeCompatibility} />\n    <DSTab {...testTabDefinitionAsConst} />\n\n    {/* works with inline values */}\n    <DSTabs\n      containerProps={{}}\n      animated\n      enableMouseEvents={false}\n      allowTextSelection={false}\n      onTabChange={(tabId: string) => {}}\n      tabsListAriaLabel=\"Tab list\"\n      type={TabTypes.NORMAL}\n      onlyRenderActiveTab={false}\n      withCarousel={false}\n      isDSMobile={false}\n      showSelectionIndicator\n      fixedTabsHeaders={false}\n      showSeparator\n      tabPanelsProps={{}}\n      swipeableViewsContainerProps={{}}\n      activeTab=\"\"\n      innerRef={divRef}\n      firstSubtabRef={buttonRef}\n      lastTabRef={buttonRef}\n      TabBarExtraContent={MockComponent}\n      tabBarExtraContent=\"\"\n    >\n      {[]}\n    </DSTabs>\n\n    <DSTab\n      disabled={false}\n      onClick={() => {}}\n      onKeyDown={() => {}}\n      ref={buttonRef}\n      required\n      style={{}}\n      title=\"\"\n      tabId=\"\"\n      applyAriaDisabled={false}\n    >\n      <div></div>\n    </DSTab>\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoB0B,SAmO/C,UAnO+C,KAmO/C,YAnO+C;AAjBjD,OAAOA,YAAW;AAClB,SAAS,QAAQ,OAAO,gBAAgB;AAcxC,MAAM,YAAYA,OAAM,UAAU;AAClC,MAAM,SAASA,OAAM,UAAU;AAC/B,MAAM,gBAAqC,MAAM,oBAAC,SAAI;AAGtD,MAAM,wBAAyD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,uBAAuD;AAAA,EAC3D,UAAU,oBAAC,SAAI;AACjB;AAEA,MAAM,uBAAuD;AAAA,EAC3D,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AACT;AAMA,MAAM,0BAAmE;AAAA,EACvE,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,MAAM,SAAS;AAAA,EACf,eAAe;AACjB;AAEA,MAAM,gBAAuC;AAAA,EAC3C,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAAiE;AAAA,EACrE,OAAO;AACT;AAEA,MAAM,eAAqC;AAAA,EACzC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,2BAAqE;AAAA,EACzE,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,SAAS;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;AAEA,MAAM,wBAAqD;AAAA,EACzD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,gCAAgC;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,0BAAmE;AAAA,EACvE,OAAO;AAAA,EACP,mBAAmB;AACrB;AAKA,MAAM,6BAAoD;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,SAAS;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;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,4BAAkD;AAAA,EACtD,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAKA,MAAM,mCAAmC;AAAA,EACvC,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,SAAS;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;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAEA,MAAM,4BAA4B;AAAA,EAChC,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,SAAS;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;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,kCAAkC;AAAA,EACtC,UAAU,oBAAC,SAAI;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,2BAA2B;AAAA,EAC/B,UAAU,oBAAC,SAAI;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,UAAQ,GAAG,4BAA4B;AAAA,EACxC,oBAAC,UAAQ,GAAG,kCAAkC;AAAA,EAC9C,oBAAC,UAAQ,GAAG,2BAA2B;AAAA,EAEvC,oBAAC,SAAO,GAAG,2BAA2B;AAAA,EACtC,oBAAC,SAAO,GAAG,iCAAiC;AAAA,EAC5C,oBAAC,SAAO,GAAG,0BAA0B;AAAA,EAGrC;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC;AAAA,MACjB,UAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,aAAa,CAAC,UAAkB;AAAA,MAAC;AAAA,MACjC,mBAAkB;AAAA,MAClB,MAAM,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,wBAAsB;AAAA,MACtB,kBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,8BAA8B,CAAC;AAAA,MAC/B,WAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,oBAAoB;AAAA,MACpB,oBAAmB;AAAA,MAElB,WAAC;AAAA;AAAA,EACJ;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,WAAW,MAAM;AAAA,MAAC;AAAA,MAClB,KAAK;AAAA,MACL,UAAQ;AAAA,MACR,OAAO,CAAC;AAAA,MACR,OAAM;AAAA,MACN,OAAM;AAAA,MACN,mBAAmB;AAAA,MAEnB,8BAAC,SAAI;AAAA;AAAA,EACP;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/jsx-no-duplicate-props */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSTabs, DSTab, TAB_TYPES } from '../index.js';\nimport type { DSTabsT, DSTabT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForTabs = DSTabsT.Props;\ntype ComponentPropsTabsInternals = DSTabsT.InternalProps;\ntype ComponentPropsTabsDefaultProps = DSTabsT.DefaultProps;\ntype ComponentPropsTabsOptionalProps = DSTabsT.OptionalProps;\n\ntype ComponentPropsForTab = DSTabT.Props;\ntype ComponentPropsTabDefaultProps = DSTabT.DefaultProps;\ntype ComponentPropsTabOptionalProps = DSTabT.OptionalProps;\ntype ComponentPropsTabRequiredProps = DSTabT.RequiredProps;\n\nconst buttonRef = React.createRef() as React.MutableRefObject<HTMLButtonElement>;\nconst divRef = React.createRef() as React.MutableRefObject<HTMLDivElement>;\nconst MockComponent: React.ComponentType = () => <div></div>;\n\n// Tabs\nconst testTabsOptionalProps: ComponentPropsTabsOptionalProps = {\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabRequiredProps: ComponentPropsTabRequiredProps = {\n  children: <div></div>,\n};\n\nconst testTabOptionalProps: ComponentPropsTabOptionalProps = {\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\n\n// Tabs\nconst testTabsPartialDefaults: Partial<ComponentPropsTabsDefaultProps> = {\n  allowTextSelection: false,\n  isDSMobile: false,\n  onTabChange: (tabId: string) => {},\n  type: TAB_TYPES.NORMAL,\n  showSeparator: true,\n};\n\nconst testTabsProps: ComponentPropsForTabs = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n};\n\nconst testTabsPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n} as ComponentPropsForTabs;\n\n// Tab\nconst testTabPartialDefaults: Partial<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n};\n\nconst testTabProps: ComponentPropsForTab = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n};\n\nconst testTabPropsAsSyntax = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n} as ComponentPropsForTab;\n\n// InternalProps requires all defaults to be filled in\n\n// Tabs\nconst testTabsCompleteDefaults: Required<ComponentPropsTabsDefaultProps> = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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\nconst testTabsInternalProps: ComponentPropsTabsInternals = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n};\n\nconst testTabsInternalPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n} as ComponentPropsTabsInternals;\n\n// Tab\nconst testTabCompleteDefaults: Required<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\n\n// Tabs\nconst testTabsExplicitDefinition: ComponentPropsForTabs = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabExplicitDefinition: ComponentPropsForTab = {\n  children: [],\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\n\n// Tabs\nconst testTabsInferedTypeCompatibility = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as ComponentPropsForTabs;\n\nconst testTabsDefinitionAsConst = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\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  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as const;\n\n// Tab\nconst testTabInferedTypeCompatibility = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as ComponentPropsForTab;\n\nconst testTabDefinitionAsConst = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSTabs {...testTabsExplicitDefinition} />\n    <DSTabs {...testTabsInferedTypeCompatibility}></DSTabs>\n    <DSTabs {...testTabsDefinitionAsConst}></DSTabs>\n\n    <DSTab {...testTabExplicitDefinition} />\n    <DSTab {...testTabInferedTypeCompatibility} />\n    <DSTab {...testTabDefinitionAsConst} />\n\n    {/* works with inline values */}\n    <DSTabs\n      containerProps={{}}\n      animated\n      enableMouseEvents={false}\n      allowTextSelection={false}\n      onTabChange={(tabId: string) => {}}\n      tabsListAriaLabel=\"Tab list\"\n      type={TAB_TYPES.NORMAL}\n      onlyRenderActiveTab={false}\n      withCarousel={false}\n      isDSMobile={false}\n      showSelectionIndicator\n      fixedTabsHeaders={false}\n      showSeparator\n      tabPanelsProps={{}}\n      swipeableViewsContainerProps={{}}\n      activeTab=\"\"\n      innerRef={divRef}\n      firstSubtabRef={buttonRef}\n      lastTabRef={buttonRef}\n      TabBarExtraContent={MockComponent}\n      tabBarExtraContent=\"\"\n    >\n      {[]}\n    </DSTabs>\n\n    <DSTab\n      disabled={false}\n      onClick={() => {}}\n      onKeyDown={() => {}}\n      ref={buttonRef}\n      required\n      style={{}}\n      title=\"\"\n      tabId=\"\"\n      applyAriaDisabled={false}\n    >\n      <div></div>\n    </DSTab>\n  </>\n);\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/utils/helpers.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MOBILE_GRADIENT_WIDTH } from "./constants.js";
+import { MOBILE_GRADIENT_WIDTH } from "../constants/index.js";
 const isElementVisible = (tab, tabList) => {
   const tabDimensions = tab.getBoundingClientRect();
   const tabListDimensions = tabList.getBoundingClientRect();

package/dist/esm/utils/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/helpers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from './constants.js';\n\ninterface VisibleDimensionsT {\n  width: number;\n  height: number;\n}\n\ninterface CenterTabPropsT {\n  e?: React.MouseEvent | React.FocusEvent;\n  listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n  if (listRef.current) {\n    const { offsetLeft } = e?.target as HTMLButtonElement;\n    const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n    const { width: listWidth } = listRef.current.getBoundingClientRect();\n    const extraSideSpace = listWidth - tabWidth;\n    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n    listRef.current.scrollTo({\n      top: 0,\n      left: centeredLeftOffset,\n      behavior: 'smooth',\n    });\n\n    e?.preventDefault();\n  }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from '../constants/index.js';\n\ninterface VisibleDimensionsT {\n  width: number;\n  height: number;\n}\n\ninterface CenterTabPropsT {\n  e?: React.MouseEvent | React.FocusEvent;\n  listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n  if (listRef.current) {\n    const { offsetLeft } = e?.target as HTMLButtonElement;\n    const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n    const { width: listWidth } = listRef.current.getBoundingClientRect();\n    const extraSideSpace = listWidth - tabWidth;\n    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n    listRef.current.scrollTo({\n      top: 0,\n      left: centeredLeftOffset,\n      behavior: 'smooth',\n    });\n\n    e?.preventDefault();\n  }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,6BAA6B;AAY/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,QAAQ,MAAuB;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,WAAW,IAAI,GAAG;AAC1B,UAAM,EAAE,OAAO,SAAS,KAAK,GAAG,QAA6B,sBAAsB;AACnF,UAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,sBAAsB;AACnE,UAAM,iBAAiB,YAAY;AACnC,UAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,UAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,YAAQ,QAAQ,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACZ,CAAC;AAED,OAAG,eAAe;AAAA,EACpB;AACF;AAEO,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK,sBAAsB;AAClD,QAAM,0BAA0B,cAAc,sBAAsB;AAEpE,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACL,wBAAwB,OAAO,cAAc,cAAc,eAAe;AAAA,MAC1E,KAAK,eAAe,wBAAwB,OAAO,eAAe;AAAA,IACpE;AAAA,IACA,QAAQ,KAAK;AAAA,MACX,KAAK;AAAA,MACL,wBAAwB,MAAM,cAAc,eAAe,eAAe;AAAA,MAC1E,KAAK,gBAAgB,wBAAwB,MAAM,eAAe;AAAA,IACpE;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,UAAU,IAAI;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,UAAU,KAAK,eAAe,cAAc;",
   "names": []
 }

package/dist/esm/utils/hooks/useTabsCallbacks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useTabsCallbacks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,IAAI,WAAW,aAAa;AAE5B,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,kBAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc,mBAAoB,GAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Main handler for active tab changes. It is responsible for:\n   * 1. Updating the internal active tab state\n   * 2. Notifying the user through the onTabChange callback\n   * 3. Centering the tab on mobile if needed\n   */\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,IAAI,WAAW,aAAa;AAQ5B,QAAM,oBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,kBAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc,mBAAoB,GAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -0,0 +1,44 @@
+export declare const DSTabsName = "DSTabs";
+export declare const TAB_TYPES: {
+    NORMAL: "normal";
+    NORMAL_SMALL: "normal_small";
+    SUBTABS: "subtabs";
+};
+export declare const TAB_TYPES_VALUES_AS_ARRAY: ("normal" | "normal_small" | "subtabs")[];
+export declare const MOBILE_GRADIENT_WIDTH = 24;
+export declare const DEFAULT_INDICATOR_STYLES: {
+    left: number;
+    width: number;
+};
+export declare const GRADIENT_OFFSETS_ACCORDING_TYPE: {
+    NORMAL_SMALL: number;
+    NORMAL: number;
+    SUBTABS: number;
+    FIXED_TABS_HEADERS: number;
+};
+export declare const TABS_SLOTS: {
+    readonly ROOT: "root";
+    readonly TABS_CONTAINER: "container";
+    readonly TAB_BUTTON: "tab-button";
+    readonly SUBTAB_BUTTON: "subtab-button";
+    readonly TAB_PANEL: "tab-panel";
+    readonly SUB_TAB_LIST: "subtabs-list";
+    readonly TAB_LIST: "tab-list";
+    readonly CAROUSEL_BUTTON_RIGHT: "chevron-right";
+    readonly CAROUSEL_BUTTON_LEFT: "chevron-left";
+};
+export declare const TABS_DATA_TESTID: {
+    SUB_TAB_LIST: string;
+    TAB_LIST: string;
+    CAROUSEL_BUTTON_RIGHT: string;
+    CAROUSEL_BUTTON_LEFT: string;
+    CAROUSEL: {
+        BUTTON_RIGHT: string;
+        BUTTON_LEFT: string;
+    };
+    ROOT: string;
+    TABS_CONTAINER: string;
+    TAB_BUTTON: string;
+    SUBTAB_BUTTON: string;
+    TAB_PANEL: string;
+};

package/dist/types/index.d.ts

@@ -1,5 +1,4 @@
-export * from './exported-related/DSTab.js';
-export * from './DSTabs.js';
-export { TabTypes } from './utils/constants.js';
-export * from './DSTabsDatatestid.js';
+export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
 export type { DSTabT, DSTabsT } from './react-desc-prop-types.js';
+export { TABS_SLOTS, TABS_DATA_TESTID, TABS_DATA_TESTID as DSTabsDatatestid, TAB_TYPES, TAB_TYPES as TabTypes, } from './constants/index.js';
+export { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';

package/dist/types/parts/carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface CarouselPropsT {
-    children: React.ReactNode[];
+    children: React.ReactNode;
     updateIndicatorStyle?: () => void;
 }
 export declare const Carousel: ({ children, updateIndicatorStyle }: CarouselPropsT) => JSX.Element;

package/dist/types/parts/carousel/styles.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
 import type { DSTabsInternalsT } from '../../sharedTypes.js';
 interface StyledCarouselButtonWrapperPropsT {
     right?: boolean;
     tabType: DSTabsInternalsT.TabTypesT;
 }
-export declare const StyledCarouselBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledCarouselBtn: typeof DSButtonV2;
 export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCarouselButtonWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/tabBar/TabBarItemRenderer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TabBarItemRenderer: React.ComponentType<Record<never, never>>;

package/dist/types/parts/tabBar/styles.d.ts

@@ -45,4 +45,5 @@ export declare const StyledTabButton: import("styled-components").StyledComponen
 export declare const StyledSubTabsList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSubTabsListPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledTabList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTabListPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledRequiredMark: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export {};