@elliemae/ds-tabs 3.60.0-next.9 → 3.70.0-next.1

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

@@ -1,10 +1,5 @@
-import type { DSTabsInternalsT } from '../../sharedTypes.js';
 interface UseCarouselReturnTypeT {
-    showChevrons: DSTabsInternalsT.ShowChevronsT;
-    leftButtonOnClick: () => void;
-    rightButtonOnClick: () => void;
     handleOnClick: (e: React.MouseEvent) => void;
-    handleOnScroll: (e: React.UIEvent) => void;
 }
 export declare const useCarousel: () => UseCarouselReturnTypeT;
 export {};

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

@@ -1,20 +1,7 @@
 import type { DSTabsInternalsT } from '../../sharedTypes.js';
-interface StyledSelectionIndicatoPropsT {
-    isDSMobile: boolean;
-    tabType: DSTabsInternalsT.TabTypesT;
-}
 interface StyledSubTabsListPropsT {
     withCarousel: boolean;
 }
-interface StyledTabButtonPropsT {
-    isActive: boolean;
-    disabled: boolean;
-    showSeparator: boolean;
-    isDSMobile: boolean;
-    fixedTabsHeaders: boolean;
-    withCarousel: boolean;
-    tabType: DSTabsInternalsT.TabTypesT;
-}
 interface StyledTabListPropsT {
     withCarousel: boolean;
     isDSMobile: boolean;
@@ -31,7 +18,6 @@ interface StyledTabWrapperPropsT {
     isDSMobile: boolean;
     fixedTabsHeaders: boolean;
 }
-export declare const StyledSelectionIndicator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSelectionIndicatoPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledMobileGradient: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     style: {
         left: number;
@@ -40,10 +26,15 @@ export declare const StyledMobileGradient: import("styled-components").StyledCom
 } & StyledMobileGradientPropsT, string | number | symbol>;
 /**  CSS Setters */
 export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTabWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledTabButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
-export declare const StyledSubTabButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
 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>;
+interface StyledTabButtonPropsT {
+    showSeparator: boolean;
+    isDSMobile: boolean;
+    tabType: DSTabsInternalsT.TabTypesT;
+}
+export declare const StyledTabButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-tab-button").DSTabButtonT.Props>, import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-tab-button").DSTabButtonT.Props>>, never>;
+export declare const StyledSubTabButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-tab-button").DSTabButtonT.Props>, import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-tab-button").DSTabButtonT.Props>>, never>;
 export {};

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

@@ -1,9 +1,10 @@
-import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
+import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';
+import type { DSTabT } from '../../react-desc-prop-types.js';
 interface StyledPanelContainerPropsT {
     hide: boolean;
     isDSMobile: boolean;
 }
-export interface PanelDescriptor extends Record<string, unknown> {
+export interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {
     index: number;
     tabId: string;
     isActive: boolean;

package/dist/types/react-desc-prop-types.d.ts

@@ -11,6 +11,7 @@ export declare namespace DSTabT {
         title?: string;
         required?: boolean;
         disabled?: boolean;
+        RenderBadge?: React.ComponentType;
         ref?: React.MutableRefObject<HTMLButtonElement>;
         onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;
         onKeyDown?: (e: React.KeyboardEvent) => null | void;

package/dist/types/sharedTypes.d.ts

@@ -29,6 +29,9 @@ export declare namespace DSTabsInternalsT {
         updateMobileGradients: () => void;
         mobileGradients: DSTabsInternalsT.MobileGradientsT;
         userDidChangeTabAtleastOnceRef: React.MutableRefObject<boolean>;
+        firstActivableTabId: string;
+        focusedTabId: string;
+        setFocusedTabId: React.Dispatch<React.SetStateAction<string>>;
     }
     interface DSTabsUseCrossRefContextT {
         lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;

package/dist/types/tests/DSTabs.allDisabled.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSTabs.roving-tabindex-PUI-17883.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.60.0-next.9",
+  "version": "3.70.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -35,41 +35,39 @@
     "reportFile": "tests.xml",
     "indent": 4
   },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
-    "lint": "node ../../../scripts/lint.mjs --fix",
-    "lint:strict": "node ../../../scripts/lint-strict.mjs",
-    "dts": "node ../../../scripts/dts.mjs",
-    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
-  },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.60.0-next.9",
-    "@elliemae/ds-icon": "3.60.0-next.9",
-    "@elliemae/ds-icons": "3.60.0-next.9",
-    "@elliemae/ds-props-helpers": "3.60.0-next.9",
-    "@elliemae/ds-swipe-card": "3.60.0-next.9",
-    "@elliemae/ds-system": "3.60.0-next.9",
-    "@elliemae/ds-typescript-helpers": "3.60.0-next.9",
-    "@react-hook/resize-observer": "catalog:"
+    "@elliemae/ds-button-v2": "3.70.0-next.1",
+    "@elliemae/ds-icon": "3.70.0-next.1",
+    "@elliemae/ds-props-helpers": "3.70.0-next.1",
+    "@elliemae/ds-icons": "3.70.0-next.1",
+    "@elliemae/ds-system": "3.70.0-next.1",
+    "@elliemae/ds-tab-button": "3.70.0-next.1",
+    "@elliemae/ds-swipe-card": "3.70.0-next.1",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.1"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.9",
-    "@elliemae/ds-test-utils": "3.60.0-next.9",
-    "@elliemae/pui-cli": "catalog:",
-    "jest": "catalog:",
-    "styled-components": "catalog:"
+    "jest": "^30.0.0",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.1",
+    "@elliemae/ds-test-utils": "3.70.0-next.1"
   },
   "peerDependencies": {
-    "lodash-es": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "styled-components": "catalog:"
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "~5.3.9"
   },
   "publishConfig": {
     "access": "public",
     "typeSafety": true
   },
-  "gitHead": "7b49878bf6b481e639c5412a4c816ee349d91b46"
-}
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}

package/dist/cjs/parts/carousel/useCarouselCallbacks.js

@@ -1,89 +0,0 @@
-"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 useCarouselCallbacks_exports = {};
-__export(useCarouselCallbacks_exports, {
-  useCarouselCallbacks: () => useCarouselCallbacks
-});
-module.exports = __toCommonJS(useCarouselCallbacks_exports);
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_lodash_es = require("lodash-es");
-var import_helpers = require("../../utils/helpers.js");
-var import_DSTabsCTX = require("../../DSTabsCTX.js");
-const useCarouselCallbacks = ({
-  getVisibleItemsOffset,
-  recalcChevrons
-}) => {
-  const { focusableTabsRef, carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const rightButtonOnClick = (0, import_react.useCallback)(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const leftButtonOnClick = (0, import_react.useCallback)(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const handleOnScroll = (0, import_react.useMemo)(() => (0, import_lodash_es.debounce)(recalcChevrons, 200), [recalcChevrons]);
-  const handleOnClick = (0, import_react.useCallback)(
-    ({ target }) => {
-      if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
-        const tabList = carouselOnlyListRef.current;
-        const tabButton = target;
-        const tabButtonDimensions = tabButton.getBoundingClientRect();
-        const tabListDimensions = tabList?.getBoundingClientRect();
-        const tabButtonIndex = tabButton.dataset.index;
-        const lastItemIndex = focusableTabsRef.current.length.toString();
-        const magicNumber = 34;
-        const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
-        if (!(0, import_helpers.isElementVisibleCarousel)(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
-          const containerWidth = tabListDimensions.width;
-          const halfContainer = containerWidth / 2;
-          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
-          const positionInContainer = elementScrollPosition % containerWidth;
-          const width = tabButton.offsetWidth + magicNumber;
-          if (positionInContainer > halfContainer) {
-            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
-          } else {
-            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
-          }
-        }
-      }
-    },
-    [focusableTabsRef, carouselOnlyListRef]
-  );
-  return {
-    handleOnClick,
-    rightButtonOnClick,
-    leftButtonOnClick,
-    handleOnScroll
-  };
-};
-//# sourceMappingURL=useCarouselCallbacks.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { debounce } from 'lodash-es';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Scroll handler for carousel. It:\n   * 1. Recalculates chevron visibility\n   * 2. Updates indicator style\n   * 3. May cause rerenders on every scroll event\n   */\n  const handleOnScroll = useMemo(() => debounce(recalcChevrons, 200), [recalcChevrons]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Click handler for carousel tabs. It:\n   * 1. Checks if clicked element is a tab\n   * 2. Calculates scroll position to center the tab\n   * 3. Updates scroll position with magic number adjustments\n   * 4. May cause rerenders due to scroll position updates\n   */\n  const handleOnClick = useCallback(\n    ({ target }: MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,uBAAyB;AAEzB,qBAAyC;AACzC,uBAA8B;AAavB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAQ/C,QAAM,qBAAiB,sBAAQ,UAAM,2BAAS,gBAAgB,GAAG,GAAG,CAAC,cAAc,CAAC;AASpF,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}

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

@@ -1,59 +0,0 @@
-import * as React from "react";
-import { useCallback, useContext, useMemo } from "react";
-import { debounce } from "lodash-es";
-import { isElementVisibleCarousel } from "../../utils/helpers.js";
-import { DSTabsContext } from "../../DSTabsCTX.js";
-const useCarouselCallbacks = ({
-  getVisibleItemsOffset,
-  recalcChevrons
-}) => {
-  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);
-  const rightButtonOnClick = useCallback(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const leftButtonOnClick = useCallback(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const handleOnScroll = useMemo(() => debounce(recalcChevrons, 200), [recalcChevrons]);
-  const handleOnClick = useCallback(
-    ({ target }) => {
-      if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
-        const tabList = carouselOnlyListRef.current;
-        const tabButton = target;
-        const tabButtonDimensions = tabButton.getBoundingClientRect();
-        const tabListDimensions = tabList?.getBoundingClientRect();
-        const tabButtonIndex = tabButton.dataset.index;
-        const lastItemIndex = focusableTabsRef.current.length.toString();
-        const magicNumber = 34;
-        const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
-        if (!isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
-          const containerWidth = tabListDimensions.width;
-          const halfContainer = containerWidth / 2;
-          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
-          const positionInContainer = elementScrollPosition % containerWidth;
-          const width = tabButton.offsetWidth + magicNumber;
-          if (positionInContainer > halfContainer) {
-            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
-          } else {
-            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
-          }
-        }
-      }
-    },
-    [focusableTabsRef, carouselOnlyListRef]
-  );
-  return {
-    handleOnClick,
-    rightButtonOnClick,
-    leftButtonOnClick,
-    handleOnScroll
-  };
-};
-export {
-  useCarouselCallbacks
-};
-//# sourceMappingURL=useCarouselCallbacks.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { debounce } from 'lodash-es';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Scroll handler for carousel. It:\n   * 1. Recalculates chevron visibility\n   * 2. Updates indicator style\n   * 3. May cause rerenders on every scroll event\n   */\n  const handleOnScroll = useMemo(() => debounce(recalcChevrons, 200), [recalcChevrons]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Click handler for carousel tabs. It:\n   * 1. Checks if clicked element is a tab\n   * 2. Calculates scroll position to center the tab\n   * 3. Updates scroll position with magic number adjustments\n   * 4. May cause rerenders due to scroll position updates\n   */\n  const handleOnClick = useCallback(\n    ({ target }: MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,gBAAgB;AAEzB,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAavB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAQ/C,QAAM,iBAAiB,QAAQ,MAAM,SAAS,gBAAgB,GAAG,GAAG,CAAC,cAAc,CAAC;AASpF,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}

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

@@ -1,12 +0,0 @@
-interface UseCarouselCallbacksPropsT {
-    getVisibleItemsOffset: () => number;
-    recalcChevrons: () => void;
-}
-interface UseCarouselCallbacksReturnTypeT {
-    leftButtonOnClick: () => void;
-    rightButtonOnClick: () => void;
-    handleOnClick: (e: React.MouseEvent) => void;
-    handleOnScroll: (e: React.UIEvent) => void;
-}
-export declare const useCarouselCallbacks: ({ getVisibleItemsOffset, recalcChevrons, }: UseCarouselCallbacksPropsT) => UseCarouselCallbacksReturnTypeT;
-export {};