@connectif/ui-components 3.0.1 → 3.0.2

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [2.4.3] - 2025-11-25
 
-### Performance Improvements
+### Added
 
 - Added changelog file in package.
 - Added optional centeredInScreen and paddingContent props to the SelectPopover component.
@@ -30,12 +30,12 @@
 - 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
+### Security
 
 - Upgrade to Typescript 5.9
 - Upgrade cspell to 6.0.0 (latest)
 
-### ⚠️ Breaking Changes
+### Removed
 
 - `TabButton` no longer accepts the `disableUppercase` prop; Text always will be lowercase.
 
@@ -44,11 +44,18 @@
 ### Added
 
 - Added new formatter called `PhoneFormatter`.
+- Added new changelog tab to storybook.
 
 ### Fixed
 
 - Fixed bug with timezone in `DateIntervalPicker`
 
-### Improvements
+## [3.0.2] - 2025-12-16
 
-- Added new changelog tab to storybook.
+### Added
+
+- Added new styles for `Tabs`.
+
+### Fixed
+
+- Fixed bug with timezone in `DateIntervalPicker`

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

@@ -50,6 +50,10 @@ export type TabsProps = {
      * Hide grey line in tabs
      */
     hideLineTabs?: boolean;
+    /**
+     * Background for scroll buttons
+     */
+    backgroundScrollButtons?: string;
 };
 /**
  * Define a Tabs container, with a fixed header and a transitions on change between tabs.
@@ -60,5 +64,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, hideScrollButtons, hideLineTabs }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ tabButtons, children, currentTabIndex, onChangeTab, variant, fullHeight, contained, scrollbarGutter, disableContentScroll, hideScrollButtons, hideLineTabs, backgroundScrollButtons }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/index.js

@@ -5326,7 +5326,9 @@ var tabsTheme = {
   styleOverrides: {
     root: {
       borderBottom: "none",
-      minHeight: "40px"
+      minHeight: "40px",
+      marginRight: "0px",
+      position: "relative"
     },
     indicator: {
       bottom: "0",
@@ -5334,7 +5336,26 @@ var tabsTheme = {
       borderRadius: "8px"
     },
     scrollButtons: {
-      width: "24px"
+      width: "24px",
+      position: "absolute",
+      top: 0,
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      zIndex: 2,
+      "&:not(.Mui-disabled)": {
+        opacity: 1
+      },
+      "&:first-of-type": {
+        left: 0,
+        right: "auto",
+        justifyContent: "start"
+      },
+      "&:last-of-type": {
+        right: 0,
+        left: "auto",
+        justifyContent: "end"
+      }
     }
   }
 };
@@ -19934,7 +19955,7 @@ var DateIntervalPickerPopover = ({
     });
   };
   const handleApply = () => {
-    const parseEndDate = (dateString) => showTime ? new Date(dateString) : tz4(parseDate(dateString), timezone).add(1, "day").toDate();
+    const parseEndDate = (dateString) => !showTime ? tz4(parseDate(dateString), timezone).add(1, "day").toDate() : tz4(parseDate(dateString), timezone).toDate();
     onApply({
       interval: state.interval,
       startDate: applyTimeToDate(
@@ -25841,7 +25862,7 @@ var TabButton = ({
   children,
   disabled = false,
   textAlign = "center",
-  marginRight = "24px",
+  marginRight = "0px",
   dataTestId,
   ...rest
 }) => /* @__PURE__ */ jsx149(
@@ -25855,7 +25876,6 @@ var TabButton = ({
           flexDirection: "column",
           alignItems: textAlign === "left" ? "start" : "center",
           width: textAlign === "center" ? "100%" : void 0,
-          marginRight: "24px",
           textTransform: "none",
           ...variants["body1-semibold"]
         },
@@ -25866,7 +25886,7 @@ var TabButton = ({
       minHeight: "36px",
       alignItems: "start",
       justifyContent: "center",
-      padding: "10px 0",
+      padding: "8px 12px",
       marginRight,
       borderRadius: "8px",
       transition: "background 0.2s",
@@ -26029,7 +26049,8 @@ var Tabs = ({
   scrollbarGutter,
   disableContentScroll = false,
   hideScrollButtons = false,
-  hideLineTabs = false
+  hideLineTabs = false,
+  backgroundScrollButtons = Colors_exports.white
 }) => {
   const tabsRef = React84.useRef(null);
   const [value, setValue] = React84.useState(0);
@@ -26151,6 +26172,12 @@ var Tabs = ({
                 sx: {
                   "&.Mui-disabled": {
                     display: contained ? "none" : void 0
+                  },
+                  "&:first-of-type": {
+                    background: `linear-gradient(to left, transparent 0%, transparent 5%, ${backgroundScrollButtons} 28%, ${backgroundScrollButtons} 100%);`
+                  },
+                  "&:last-of-type": {
+                    background: `linear-gradient(to right, transparent 0%, transparent 5%, ${backgroundScrollButtons} 28%, ${backgroundScrollButtons} 100%);`
                   }
                 }
               }