@connectif/ui-components 2.4.3 → 3.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## [2.4.3] (2025-11-25)
+## [2.4.3] - 2025-11-25
 
 ### Performance Improvements
 
@@ -13,3 +13,28 @@
 - Added optional showTime prop in DateIntervalPicker component.
 - Added optional keepMounted prop in TabContent.
 - Added optional disableContentScroll prop in Tabs component.
+
+## [3.0.0] - 2025-12-11
+
+### Added
+
+- `Tabs` now supports a `hideScrollButtons` and `hideLineTabs` prop.
+
+### Changed
+
+- `Tabs` changes its styles to match the new design.
+- `DateIntervalPicker` changes buttons styles.
+
+### Fixed
+
+- Fixed an issue where reloading the `Tabs` component on a non-first tab caused an unwanted scroll effect.
+- Fixed change interval when showTime is true.
+
+### Improvements
+
+- Upgrade to Typescript 5.9
+- Upgrade cspell to 6.0.0 (latest)
+
+### ⚠️ Breaking Changes
+
+- `TabButton` no longer accepts the `disableUppercase` prop; Text always will be lowercase.

package/dist/components/tab/TabButton.d.ts

@@ -14,17 +14,11 @@ export type TabButtonProps = React.PropsWithChildren<{
      * Right margin of the tab
      */
     marginRight?: number | string;
-    /**
-     * Whether the tab button text is in uppercase or not.
-     * If true, text will not be transformed to uppercase.
-     * @default false
-     */
-    disableUppercase?: boolean;
     dataTestId?: string;
 }>;
 /**
  * A TabButton is a button that can be used to switch between tabs.
  * It is usually used in a Tabs component.
  */
-declare const TabButton: ({ children, disabled, textAlign, marginRight, dataTestId, disableUppercase, ...rest }: TabButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabButton: ({ children, disabled, textAlign, marginRight, dataTestId, ...rest }: TabButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default TabButton;

package/dist/components/tab/Tabs.d.ts

@@ -42,6 +42,14 @@ export type TabsProps = {
      * Hide scroll in tab content
      */
     disableContentScroll?: boolean;
+    /**
+     * Hide scroll in tab buttons
+     */
+    hideScrollButtons?: boolean;
+    /**
+     * Hide grey line in tabs
+     */
+    hideLineTabs?: boolean;
 };
 /**
  * Define a Tabs container, with a fixed header and a transitions on change between tabs.
@@ -52,5 +60,5 @@ export type TabsProps = {
  * define a callback function to be called when the tab is clicked, so you can do something
  * with the current tab index.
  */
-declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter, disableContentScroll }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter, disableContentScroll, hideScrollButtons, hideLineTabs }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/index.js

@@ -5329,9 +5329,9 @@ var tabsTheme = {
       minHeight: "40px"
     },
     indicator: {
-      bottom: "initial",
-      height: "4px",
-      borderRadius: "0 0 4px 4px"
+      bottom: "0",
+      height: "2px",
+      borderRadius: "8px"
     },
     scrollButtons: {
       width: "24px"
@@ -16078,64 +16078,101 @@ function parseDateForLocale(dateString, locale, timezone) {
   const m = tz({ year, month, date }, timezone);
   return m.isValid() ? m.toDate() : /* @__PURE__ */ new Date(NaN);
 }
-function getDatesFromDateInterval(interval, maxSelectableDays, timezone) {
+function getDatesFromDateInterval(interval, maxSelectableDays, timezone, options) {
   const end = tz(timezone).startOf("day");
   const endDate = end.toDate();
+  let finalStartDate;
+  let finalEndDate;
+  switch (interval) {
+    case "today": {
+      finalStartDate = end.toDate();
+      finalEndDate = end.add(1, "day").toDate();
+      break;
+    }
+    case "yesterday": {
+      finalStartDate = end.subtract(1, "day").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+    case "thisWeekFromSunday": {
+      finalStartDate = end.clone().day(0).toDate();
+      finalEndDate = end.add(1, "day").toDate();
+      break;
+    }
+    case "thisWeekFromMonday": {
+      finalStartDate = end.clone().day(1).toDate();
+      finalEndDate = end.add(1, "day").toDate();
+      break;
+    }
+    case "thisMonth": {
+      finalStartDate = end.clone().date(1).toDate();
+      finalEndDate = end.add(1, "day").toDate();
+      break;
+    }
+    case "thisYear": {
+      finalStartDate = end.clone().month(0).date(1).toDate();
+      finalEndDate = end.add(1, "day").toDate();
+      break;
+    }
+    case "last7Days": {
+      finalStartDate = end.subtract(7, "days").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+    case "last30Days": {
+      finalStartDate = end.subtract(30, "day").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+    case "last90Days": {
+      finalStartDate = end.subtract(90, "day").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+    case "last12Months": {
+      finalStartDate = end.subtract(12, "month").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+    case "all": {
+      finalStartDate = end.subtract(maxSelectableDays - 1, "day").toDate();
+      finalEndDate = endDate;
+      break;
+    }
+  }
+  if (!options?.includeTime) {
+    return { startDate: finalStartDate, endDate: finalEndDate };
+  }
+  const now = tz(timezone);
+  const hour = now.hour();
+  const minute = now.minute();
+  const second = now.second();
+  const millisecond = now.millisecond();
+  const startMoment = tz(finalStartDate, timezone).hour(hour).minute(minute).second(second).millisecond(millisecond);
+  const endMoment = tz(finalEndDate, timezone).hour(hour).minute(minute).second(second).millisecond(millisecond);
   switch (interval) {
     case "today":
       return {
-        startDate: end.toDate(),
-        endDate: end.add(1, "day").toDate()
+        startDate: finalStartDate,
+        endDate: endMoment.toDate()
       };
     case "yesterday":
       return {
-        startDate: end.subtract(1, "day").toDate(),
-        endDate
-      };
-    case "thisWeekFromSunday":
-      return {
-        startDate: end.clone().day(0).toDate(),
-        endDate: end.add(1, "day").toDate()
-      };
-    case "thisWeekFromMonday":
-      return {
-        startDate: end.clone().day(1).toDate(),
-        endDate: end.add(1, "day").toDate()
-      };
-    case "thisMonth":
-      return {
-        startDate: end.clone().date(1).toDate(),
-        endDate: end.add(1, "day").toDate()
+        startDate: finalStartDate,
+        endDate: tz(finalEndDate, timezone).endOf("day").toDate()
       };
     case "thisYear":
+    case "thisMonth":
+    case "thisWeekFromMonday":
+    case "thisWeekFromSunday":
       return {
-        startDate: end.clone().month(0).date(1).toDate(),
-        endDate: end.add(1, "day").toDate()
-      };
-    case "last7Days":
-      return {
-        startDate: end.subtract(7, "days").toDate(),
-        endDate
-      };
-    case "last30Days":
-      return {
-        startDate: end.subtract(30, "day").toDate(),
-        endDate
-      };
-    case "last90Days":
-      return {
-        startDate: end.subtract(90, "day").toDate(),
-        endDate
-      };
-    case "last12Months":
-      return {
-        startDate: end.subtract(12, "month").toDate(),
-        endDate
+        startDate: finalStartDate,
+        endDate: endMoment.toDate()
       };
-    case "all":
+    default:
       return {
-        startDate: end.subtract(maxSelectableDays - 1, "day").toDate(),
-        endDate
+        startDate: startMoment.toDate(),
+        endDate: endMoment.toDate()
       };
   }
 }
@@ -19731,14 +19768,19 @@ var DateIntervalPickerPopover = ({
     const result = getDatesFromDateInterval(
       interval2,
       maxSelectableDays,
-      timezone
+      timezone,
+      { includeTime: !!showTime }
     );
     const displayEndDate2 = getDisplayEndDate(result.endDate, timezone);
     return {
       startDate: dateInputFormatter(result.startDate),
       endDate: dateInputFormatter(displayEndDate2),
       startSimpleDate: dateToSimpleDate(result.startDate, timezone),
-      endSimpleDate: dateToSimpleDate(displayEndDate2, timezone)
+      endSimpleDate: dateToSimpleDate(displayEndDate2, timezone),
+      startTime: result.startDate,
+      endTime: result.endDate,
+      comparisonStartTime: result.startDate,
+      comparisonEndTime: result.endDate
     };
   };
   const getStateFieldsForComparisonInterval = (comparisonInterval2, startSimpleDate, endSimpleDate) => {
@@ -19900,7 +19942,8 @@ var DateIntervalPickerPopover = ({
   const handleChangeTime = (value) => {
     setState({
       ...state,
-      [getTimePropertyName(state.highlightedInput)]: value
+      [getTimePropertyName(state.highlightedInput)]: value,
+      interval: "custom"
     });
   };
   const handleFocusInputDate = (inputDate) => {
@@ -20199,21 +20242,23 @@ var DateIntervalPickerPopover = ({
     /* @__PURE__ */ jsx108(
       PopoverActions_default,
       {
+        sx: { padding: "16px 24px" },
         leftContent: /* @__PURE__ */ jsx108(
           Button_default,
           {
-            variant: "text",
-            onClick: handleApply,
-            text: t("DATE_INTERVAL_PICKER.APPLY"),
-            disabled: isApplyButtonDisabled()
+            variant: "contained",
+            color: "white",
+            onClick: handleCancel,
+            text: t("DATE_INTERVAL_PICKER.CANCEL")
           }
         ),
         rightContent: /* @__PURE__ */ jsx108(
           Button_default,
           {
-            variant: "text",
-            onClick: handleCancel,
-            text: t("DATE_INTERVAL_PICKER.CANCEL")
+            variant: "contained",
+            onClick: handleApply,
+            text: t("DATE_INTERVAL_PICKER.APPLY"),
+            disabled: isApplyButtonDisabled()
           }
         )
       }
@@ -25723,10 +25768,9 @@ import { jsx as jsx148 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
-  textAlign = "left",
+  textAlign = "center",
   marginRight = "24px",
   dataTestId,
-  disableUppercase = false,
   ...rest
 }) => /* @__PURE__ */ jsx148(
   MuiTab,
@@ -25740,10 +25784,8 @@ var TabButton = ({
           alignItems: textAlign === "left" ? "start" : "center",
           width: textAlign === "center" ? "100%" : void 0,
           marginRight: "24px",
-          ...disableUppercase ? {
-            textTransform: "none",
-            ...variants.body1
-          } : variants.caption
+          textTransform: "none",
+          ...variants["body1-semibold"]
         },
         children
       }
@@ -25751,9 +25793,15 @@ var TabButton = ({
     sx: {
       minHeight: "36px",
       alignItems: "start",
-      justifyContent: "start",
+      justifyContent: "center",
       padding: "10px 0",
-      marginRight
+      marginRight,
+      borderRadius: "8px",
+      transition: "background 0.2s",
+      color: grey700,
+      "&:not(.Mui-selected):hover": {
+        backgroundColor: grey100
+      }
     },
     disabled,
     "data-testid": dataTestId,
@@ -25806,6 +25854,7 @@ function SwipeableViews({
   const scrollTimeout = useRef23();
   const scrollingMethod = useRef23("none");
   const [previousIndex, setPreviousIndex] = useState32(index);
+  const hideScrollAnimation = useRef23(true);
   useEffect22(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
@@ -25835,8 +25884,9 @@ function SwipeableViews({
       };
       container.scrollTo({
         left: scrollPosition,
-        behavior: "smooth"
+        behavior: !hideScrollAnimation.current ? "smooth" : "instant"
       });
+      hideScrollAnimation.current = false;
       animationFrame = requestAnimationFrame(checkScrollCompletion);
       return () => cancelAnimationFrame(animationFrame);
     }
@@ -25875,7 +25925,10 @@ function SwipeableViews({
           {
             style: Object.assign(
               {
-                ...!hasShowTab(childIndex) && mountedChild && { display: "none" }
+                ...!hasShowTab(childIndex) && mountedChild && {
+                  visibility: "hidden",
+                  pointerEvents: "none"
+                }
               },
               styles.slide,
               slideStyle
@@ -25902,9 +25955,84 @@ var Tabs = ({
   fullHeight = false,
   contained = false,
   scrollbarGutter,
-  disableContentScroll = false
+  disableContentScroll = false,
+  hideScrollButtons = false,
+  hideLineTabs = false
 }) => {
+  const tabsRef = React84.useRef(null);
   const [value, setValue] = React84.useState(0);
+  const measureTextWidthRange = (child) => {
+    const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+    });
+    const textNode = walker.nextNode();
+    if (!textNode) {
+      return Math.round(child.getBoundingClientRect().width);
+    }
+    const range = document.createRange();
+    range.selectNodeContents(textNode);
+    const rect = range.getBoundingClientRect();
+    return Math.round(rect.width);
+  };
+  const waitForSmoothScrollEnd = React84.useCallback(
+    (container, onEnd) => {
+      let prev = container.scrollLeft;
+      let idleFrames = 0;
+      const check = () => {
+        const current = container.scrollLeft;
+        const isMoving = current !== prev;
+        prev = current;
+        if (isMoving) {
+          idleFrames = 0;
+          requestAnimationFrame(check);
+          return;
+        }
+        if (idleFrames < 5) {
+          idleFrames++;
+          requestAnimationFrame(check);
+          return;
+        }
+        onEnd();
+      };
+      requestAnimationFrame(check);
+    },
+    []
+  );
+  const calculateIndicatorTabWidth = React84.useCallback((index) => {
+    if (!tabsRef.current) {
+      return null;
+    }
+    const tabsContainer = tabsRef.current.querySelector(
+      ".MuiTabs-list"
+    );
+    const indicator = tabsRef.current.querySelector(
+      ".MuiTabs-indicator"
+    );
+    const child = Array.from(tabsContainer.children)[index];
+    const textWidth = measureTextWidthRange(child);
+    const childRect = child.getBoundingClientRect();
+    const listRect = tabsContainer.getBoundingClientRect();
+    const left = childRect.left + (childRect.width - textWidth) / 2 - listRect.left;
+    indicator.style.display = "block";
+    indicator.style.width = `${textWidth}px`;
+    indicator.style.left = `${left}px`;
+  }, []);
+  React84.useEffect(() => {
+    if (!tabsRef.current) {
+      return;
+    }
+    const tabsScroller = tabsRef.current.querySelector(
+      ".MuiTabs-scroller"
+    );
+    waitForSmoothScrollEnd(tabsScroller, () => {
+      calculateIndicatorTabWidth(currentTabIndex ?? value);
+    });
+  }, [
+    calculateIndicatorTabWidth,
+    currentTabIndex,
+    value,
+    waitForSmoothScrollEnd
+  ]);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -25913,7 +26041,7 @@ var Tabs = ({
     top: 0
   } : {
     bottom: 0,
-    borderRadius: "8px 8px 0 0"
+    borderRadius: "8px"
   };
   return /* @__PURE__ */ jsxs77(
     Box_default2,
@@ -25932,25 +26060,32 @@ var Tabs = ({
         /* @__PURE__ */ jsx150(
           MuiTabs,
           {
+            ref: tabsRef,
             value: currentTabIndex ?? value,
             onChange: (_event, index) => {
               handleChangeIndex(index);
             },
             variant,
-            scrollButtons: true,
+            scrollButtons: !hideScrollButtons,
             allowScrollButtonsMobile: true,
-            TabScrollButtonProps: {
-              sx: {
-                "&.Mui-disabled": {
-                  display: contained ? "none" : void 0
+            slotProps: {
+              indicator: {
+                sx: {
+                  ...highlightedPositionSx,
+                  display: "none"
+                }
+              },
+              scrollButtons: {
+                sx: {
+                  "&.Mui-disabled": {
+                    display: contained ? "none" : void 0
+                  }
                 }
               }
             },
-            TabIndicatorProps: {
-              sx: highlightedPositionSx
-            },
             sx: {
-              borderBottom: contained ? `1px solid ${grey200}` : void 0
+              borderBottom: contained && !hideLineTabs ? `1px solid ${grey200}` : void 0,
+              borderTop: !contained && !hideLineTabs ? `1px solid ${grey200}` : void 0
             },
             children: tabButtons
           }
@@ -26870,27 +27005,27 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback20, useContext as useContext16 } from "react";
+import { useCallback as useCallback21, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback20(
+    formatCompactNumber: useCallback21(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback20(
+    formatNumber: useCallback21(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback20(
+    formatPercentage: useCallback21(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback20(
+    formatCurrency: useCallback21(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback20(
+    formatDate: useCallback21(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     )