ab-ui-library 1.53.2 → 1.54.0

package/helperComponents/OptionItem/index.js

@@ -1,17 +1,17 @@
 export { OptionItem } from './OptionItem.js';
-import '../../extends-ee248cfe.js';
+import '../../extends-853d11fa.js';
 import 'react';
-import '../../RadioGroup-866981b3.js';
+import '../../RadioGroup-7c363e2a.js';
 import '../../components/Radio/Radio.js';
 import '../../components/Text/Text.js';
 import 'classnames';
 import '../../utils/helpers.js';
 import 'dayjs';
 import '../Label/Label.js';
-import '../../defineProperty-3d54653f.js';
-import '../../typeof-278d2a7f.js';
+import '../../defineProperty-636f4bda.js';
+import '../../typeof-8712f39d.js';
 import '../../components/Popover/Popover.js';
-import '../../slicedToArray-769a6205.js';
+import '../../slicedToArray-c2957b14.js';
 import '../../hooks/useGetTooltipStyles.js';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';
@@ -29,10 +29,10 @@ import '../IconDynamicComponent/constants.js';
 import 'react-syntax-highlighter';
 import '../../components/Avatar/Avatar.js';
 import '../../components/FileUpload/FileUpload.js';
-import '../../toConsumableArray-c2f92221.js';
+import '../../toConsumableArray-7902e9b8.js';
 import '../../components/FileUpload/types.js';
 import '../../components/Button/Button.js';
-import '../../objectWithoutProperties-c78d6aa4.js';
+import '../../objectWithoutProperties-860b5c02.js';
 import '../Loader/Loader.js';
 import '../../components/Button/consts.js';
 import '../../components/FileUpload/UploadItems.js';

package/helperComponents/index.js

@@ -10,13 +10,13 @@ import '../components/Text/Text.js';
 import '../utils/helpers.js';
 import 'dayjs';
 import './IconDynamicComponent/constants.js';
-import '../extends-ee248cfe.js';
-import '../RadioGroup-866981b3.js';
+import '../extends-853d11fa.js';
+import '../RadioGroup-7c363e2a.js';
 import '../components/Radio/Radio.js';
-import '../defineProperty-3d54653f.js';
-import '../typeof-278d2a7f.js';
+import '../defineProperty-636f4bda.js';
+import '../typeof-8712f39d.js';
 import '../components/Popover/Popover.js';
-import '../slicedToArray-769a6205.js';
+import '../slicedToArray-c2957b14.js';
 import '../hooks/useGetTooltipStyles.js';
 import '../hooks/useGetElemSizes.js';
 import '../hooks/useGetElemPositions.js';
@@ -32,10 +32,10 @@ import '../components/SVGIcons/IconInfo.js';
 import 'react-syntax-highlighter';
 import '../components/Avatar/Avatar.js';
 import '../components/FileUpload/FileUpload.js';
-import '../toConsumableArray-c2f92221.js';
+import '../toConsumableArray-7902e9b8.js';
 import '../components/FileUpload/types.js';
 import '../components/Button/Button.js';
-import '../objectWithoutProperties-c78d6aa4.js';
+import '../objectWithoutProperties-860b5c02.js';
 import '../components/Button/consts.js';
 import '../components/FileUpload/UploadItems.js';
 import '../hooks/useFormProps.js';

package/hooks/index.d.ts

@@ -11,4 +11,5 @@ export * from './useScreenSize';
 export * from './useHideBodyScroll';
 export * from './useGetHasBottomSpace';
 export * from './useFieldArray';
+export * from './useTabScroll';
 export * from './useRecalculateDropdownPosition';

package/hooks/index.js

@@ -11,6 +11,7 @@ export { useScreenSize } from './useScreenSize.js';
 export { useHideBodyScroll } from './useHideBodyScroll.js';
 export { useGetHasBottomSpace, useGetHasTopSpace } from './useGetHasBottomSpace.js';
 export { useFieldArray } from 'react-hook-form';
+export { useTabScroll } from './useTabScroll.js';
 export { useRecalculateDropdownPosition } from './useRecalculateDropdownPosition.js';
 import 'react';
 import '../components/Tooltip/types.js';
@@ -18,4 +19,4 @@ import '../consts/index.js';
 import '../context/types.js';
 import '../utils/helpers.js';
 import 'dayjs';
-import '../slicedToArray-769a6205.js';
+import '../slicedToArray-c2957b14.js';

package/hooks/useHideBodyScroll.js

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../slicedToArray-769a6205.js';
+import { _ as _slicedToArray } from '../slicedToArray-c2957b14.js';
 import { useState, useEffect } from 'react';
 
 var useHideBodyScroll = function useHideBodyScroll(isOpen) {

package/hooks/useScreenSize.js

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../slicedToArray-769a6205.js';
+import { _ as _slicedToArray } from '../slicedToArray-c2957b14.js';
 import { useState, useEffect } from 'react';
 import { SCREEN_SIZES } from '../consts/index.js';
 

package/hooks/useSideNavigation.js

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../slicedToArray-769a6205.js';
+import { _ as _slicedToArray } from '../slicedToArray-c2957b14.js';
 import { useState, useCallback } from 'react';
 
 var useSideNavigationControls = function useSideNavigationControls() {

package/hooks/useTabScroll.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface UseTabScrollReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    showLeftArrow: boolean;
+    showRightArrow: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+}
+export declare const useTabScroll: () => UseTabScrollReturn;
+export {};

package/hooks/useTabScroll.js

@@ -0,0 +1,72 @@
+import { _ as _slicedToArray } from '../slicedToArray-c2957b14.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+var SCROLL_THRESHOLD = 5;
+var SCROLL_PERCENTAGE = 0.7;
+var INITIAL_CHECK_DELAY = 100;
+var useTabScroll = function useTabScroll() {
+  var containerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLeftArrow = _useState2[0],
+    setShowLeftArrow = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showRightArrow = _useState4[0],
+    setShowRightArrow = _useState4[1];
+  var checkScroll = useCallback(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var scrollLeft = container.scrollLeft,
+      scrollWidth = container.scrollWidth,
+      clientWidth = container.clientWidth;
+    setShowLeftArrow(scrollLeft > SCROLL_THRESHOLD);
+    setShowRightArrow(scrollLeft + clientWidth < scrollWidth - SCROLL_THRESHOLD);
+  }, []);
+  var scrollLeft = useCallback(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var scrollAmount = container.clientWidth * SCROLL_PERCENTAGE;
+    container.scrollBy({
+      left: -scrollAmount,
+      behavior: 'smooth'
+    });
+  }, []);
+  var scrollRight = useCallback(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var scrollAmount = container.clientWidth * SCROLL_PERCENTAGE;
+    container.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth'
+    });
+  }, []);
+  useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var initialCheck = setTimeout(checkScroll, INITIAL_CHECK_DELAY);
+    container.addEventListener('scroll', checkScroll);
+    var resizeObserver = new ResizeObserver(checkScroll);
+    resizeObserver.observe(container);
+    var mutationObserver = new MutationObserver(checkScroll);
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      clearTimeout(initialCheck);
+      container.removeEventListener('scroll', checkScroll);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [checkScroll]);
+  return {
+    containerRef: containerRef,
+    showLeftArrow: showLeftArrow,
+    showRightArrow: showRightArrow,
+    scrollLeft: scrollLeft,
+    scrollRight: scrollRight
+  };
+};
+
+export { useTabScroll };

package/index.js

@@ -12,7 +12,7 @@ export { CardBody } from './components/CardBody/CardBody.js';
 export { CardSelect } from './components/CardSelect/CardSelect.js';
 export { CardSelectGroup } from './components/CardSelect/CardSelectGroup.js';
 export { CardItem } from './components/Cards/CardItem.js';
-export { C as Checkbox, R as RadioGroup } from './RadioGroup-866981b3.js';
+export { C as Checkbox, R as RadioGroup } from './RadioGroup-7c363e2a.js';
 export { Chips } from './components/Chips/Chips.js';
 export { CollapseItem } from './components/Collapse/CollapseItem/CollapseItem.js';
 export { CollapseGroup } from './components/Collapse/CollapseGroup/CollapseGroup.js';
@@ -501,7 +501,7 @@ import 'react';
 export { useFormProps } from './hooks/useFormProps.js';
 import './hooks/useScreenSize.js';
 export { useFieldArray } from 'react-hook-form';
-import './extends-ee248cfe.js';
+import './extends-853d11fa.js';
 import './components/Alert/consts.js';
 import 'classnames';
 import './helperComponents/IconDynamicComponent/IconDynamicComponent.js';
@@ -509,13 +509,13 @@ import './helperComponents/IconDynamicComponent/constants.js';
 import 'dayjs';
 import 'react-syntax-highlighter';
 import './utils/helpers.js';
-import './defineProperty-3d54653f.js';
-import './typeof-278d2a7f.js';
-import './objectWithoutProperties-c78d6aa4.js';
+import './defineProperty-636f4bda.js';
+import './typeof-8712f39d.js';
+import './objectWithoutProperties-860b5c02.js';
 import './helperComponents/Loader/Loader.js';
 import './components/Button/consts.js';
 import './helperComponents/Label/Label.js';
-import './slicedToArray-769a6205.js';
+import './slicedToArray-c2957b14.js';
 import './hooks/useGetTooltipStyles.js';
 import './hooks/useGetElemSizes.js';
 import './hooks/useGetElemPositions.js';
@@ -525,7 +525,7 @@ import './hooks/useHideOnScroll.js';
 import './consts/index.js';
 import './hooks/useOnOutsideClick.js';
 import './components/ButtonIcon/consts.js';
-import './toConsumableArray-c2f92221.js';
+import './toConsumableArray-7902e9b8.js';
 import './components/FileUpload/UploadItems.js';
 import './helperComponents/ErrorMessage/ErrorMessage.js';
 import '@tanstack/react-table';
@@ -559,7 +559,7 @@ import './components/CardSelect/components/CardDescription.js';
 import './components/CardSelect/components/CardAdditionalInfo.js';
 import 'react-datepicker';
 import './components/DatePicker/hooks.js';
-import './index-989bb048.js';
+import './index-890971b9.js';
 import './components/DatePicker/CustomHeader/CustomHeader.js';
 import './components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
 import './components/Select/SharedComponents/ButtonSelectWrapper/Button/Button.js';
@@ -581,6 +581,7 @@ import './components/Select/MultiSelect/MultiBase/MultiBase.js';
 import './components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js';
 import './components/Tab/TabItem.js';
 import './components/Tab/consts.js';
+import './hooks/useTabScroll.js';
 import './components/Select/MultiSelect/RadioSelectGrouped/RadioSelectGrouped.js';
 import './components/Select/SharedComponents/Footer.js';
 import './components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-ui-library",
-  "version": "1.53.2",
+  "version": "1.54.0",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",

package/{toConsumableArray-c2f92221.js → toConsumableArray-7902e9b8.js}

@@ -1,4 +1,4 @@
-import { a as _arrayLikeToArray, b as _unsupportedIterableToArray } from './slicedToArray-769a6205.js';
+import { a as _arrayLikeToArray, b as _unsupportedIterableToArray } from './slicedToArray-c2957b14.js';
 
 function _arrayWithoutHoles(r) {
   if (Array.isArray(r)) return _arrayLikeToArray(r);

package/utils/helpers.js

@@ -80,10 +80,19 @@ var isSameDay = function isSameDay(date1, date2) {
   return dayjs(date1).isSame(date2, 'day');
 };
 var isMobile = function isMobile() {
-  var toMatch = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i];
-  return toMatch.some(function (toMatchItem) {
+  var toMatch = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i, /Tablet/i, /Mobile/i];
+
+  // Check user agent
+  var isMatchedDevice = toMatch.some(function (toMatchItem) {
     return navigator.userAgent.match(toMatchItem);
   });
+
+  // Check for iPad (including iPad Air with iPadOS 13+)
+  var isIPad = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 || navigator.platform === 'iPad';
+
+  // Check for any touch device with Mac user agent
+  var isTouchMac = /Mac/.test(navigator.userAgent) && 'ontouchend' in document;
+  return isMatchedDevice || isIPad || isTouchMac;
 };
 
 export { checkIsAllowedFileSize, checkIsAllowedTypes, getFormattedValues, getStringWidth, getYearOptions, isMobile, isSameDay, noop, openFileInNewWindow, setTranslationValue, uniqueFiles };