@m4l/components 9.3.39 → 9.3.40

package/components/mui_extended/Tabs/Tabs.js

@@ -1,9 +1,55 @@
 import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/TabsSlots.js";
+import { useEnvironment } from "@m4l/core";
+import { T as TABS_ICONS } from "./icons.js";
+import React, { useMemo } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../IconButton/IconButton.js";
+const createScrollButtonIcon = (src, size) => {
+  const ScrollButtonIconComponent = React.forwardRef(
+    (props, _ref) => {
+      const { fontSize, ownerState, ...otherProps } = props;
+      const finalProps = {
+        src,
+        size,
+        ...otherProps
+      };
+      return /* @__PURE__ */ jsx(IconButton, { ...finalProps });
+    }
+  );
+  ScrollButtonIconComponent.displayName = "ScrollButtonIcon";
+  return ScrollButtonIconComponent;
+};
 const Tabs = (props) => {
-  const { children, className, ...others } = props;
+  const { children, className, size, ...others } = props;
   const ownerState = {};
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { ownerState }, ...others, children });
+  const { currentSize } = useComponentSize(size);
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const leftIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_LEFT}`;
+  const rightIconSrc = `${host_static_assets}/${environment_assets}/${TABS_ICONS.ARROW_RIGHT}`;
+  const StartScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(leftIconSrc, currentSize),
+    [leftIconSrc, currentSize]
+  );
+  const EndScrollButtonIcon = useMemo(
+    () => createScrollButtonIcon(rightIconSrc, currentSize),
+    [rightIconSrc, currentSize]
+  );
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ...others,
+      scrollButtons: "auto",
+      ownerState: { ownerState },
+      variant: "scrollable",
+      className,
+      slots: {
+        StartScrollButtonIcon,
+        EndScrollButtonIcon
+      },
+      children
+    }
+  );
 };
 export {
   Tabs as T

package/components/mui_extended/Tabs/Tabs.styles.js

@@ -3,33 +3,59 @@ const tabsStyles = {
    * Elemento root referencia a `MuiTabs` de MUI
    */
   root: ({ theme }) => ({
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    overflow: "auto",
-    width: "100%",
-    height: "fit-content",
-    maxWidth: "fit-content",
-    minHeight: "fit-content",
-    background: theme.vars.palette.background.default,
-    paddingBottom: theme.vars.size.baseSpacings.sp0,
-    gap: theme.vars.size.baseSpacings.sp0,
-    borderRadius: theme.vars.size.borderRadius.r1,
-    borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
-    borderBottomRightRadius: theme.vars.size.borderRadius.r0,
-    marginBottom: "1px",
-    "& .MuiTabs-flexContainer": {
-      background: "transparent"
-    },
-    "& .MuiTabs-scroller": {
-      overflow: "visible !important"
-    },
-    "& .MuiTabs-indicator": {
-      display: "none"
-    },
-    "& .simplebar-content": {
+    "&&&": {
+      position: "relative",
+      zIndex: 1,
       display: "flex",
-      gap: theme.vars.size.baseSpacings.sp0
+      overflow: "auto",
+      alignItems: "center",
+      width: "100%",
+      height: "fit-content",
+      maxWidth: "fit-content",
+      minHeight: "fit-content",
+      gap: theme.vars.size.baseSpacings.sp4,
+      background: theme.vars.palette.background.default,
+      paddingBottom: theme.vars.size.baseSpacings.sp0,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      borderBottomLeftRadius: theme.vars.size.borderRadius.r0,
+      borderBottomRightRadius: theme.vars.size.borderRadius.r0,
+      marginBottom: "1px",
+      "& .MuiTabs-flexContainer": {
+        background: "transparent"
+      },
+      "& .MuiTabs-indicator": {
+        display: "none"
+      },
+      "& .simplebar-content": {
+        display: "flex",
+        gap: theme.vars.size.baseSpacings.sp0
+      },
+      "& .MuiTabScrollButton-root": {
+        width: "fit-content",
+        height: "fit-content",
+        padding: "0",
+        margin: "0",
+        border: "none",
+        borderRadius: "0",
+        "& .MuiTouchRipple-root": {
+          display: "none !important"
+        },
+        "& .MuiButtonBase-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-ripple": {
+          display: "none !important"
+        },
+        "& .MuiTouchRipple-rippleVisible": {
+          display: "none !important"
+        },
+        "& .M4LIconButton-styledMUIIconButton, & .MuiSkeleton-root": {
+          width: theme.vars.size.baseSpacings.sp4,
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.primary
+          }
+        }
+      }
     }
   })
 };

package/components/mui_extended/Tabs/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const TABS_ICONS: {
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+};

package/components/mui_extended/Tabs/icons.js

@@ -0,0 +1,7 @@
+const TABS_ICONS = {
+  ARROW_LEFT: "frontend/components/tabs/assets/icons/chevron_left.svg",
+  ARROW_RIGHT: "frontend/components/tabs/assets/icons/chevron_right.svg"
+};
+export {
+  TABS_ICONS as T
+};

package/components/mui_extended/Tabs/types.d.ts

@@ -3,10 +3,13 @@ import { TabsProps as MuiTabProps } from '@mui/material/Tabs';
 import { TabsSlots } from './slots/TabsEnum';
 import { TABS_KEY_COMPONENT } from './constants';
 import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
 /**
  * Props for the tabs component.
  */
-export type TabsProps = MuiTabProps;
+export type TabsProps = MuiTabProps & {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+};
 /**
  * State for the tabs component.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.39",
+  "version": "9.3.40",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {