@m4l/components 9.1.95 → 9.1.96

package/@types/types.d.ts

@@ -144,6 +144,7 @@ import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_e
 import { NavLinkOwnerState, NavLinkSlotsType } from '../components/mui_extended/NavLink/types';
 
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
+import { ScrollBarSlotsType, ScrollBarOwnerState } from '../components/ScrollBar/types';
 import { StackOwnerState, StackSlotsType } from '../components/mui_extended/Stack/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
 import { AreasAdminOwnerState, AreasAdminType } from '../components/areas/components/AreasAdmin/types';
@@ -210,6 +211,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: MenuDividerSlotsType;
     M4LNavLink: NavLinkSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+    M4LScrollBar: ScrollBarSlotsType;
     M4LAreasAdmin: AreasAdminType;
     M4LStack: StackSlotsType;
     M4LDateTimePicker: DateTimePickerSlotsType;
@@ -274,6 +276,7 @@ declare module '@mui/material/styles' {
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LNavLink: Partial<NavLinkOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+    M4LScrollBar: Partial<ScrollBarOwnerState>;
     M4LAreasAdmin: Partial<AreasAdminOwnerState>;
     M4LStack: Partial<StackOwnerState>;
     M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
@@ -562,6 +565,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
       variants?: ComponentsVariants['M4LRHFSelect'];
     };
+    M4LScrollBar?: {
+        defaultProps?: ComponentsPropsList['M4LScrollBar'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LScrollBar'];
+        variants?: ComponentsVariants['M4LScrollBar'];
     M4LAreasAdmin?: {
       defaultProps?: ComponentsPropsList['M4LAreasAdmin'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAreasAdmin'];
@@ -583,5 +590,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
       variants?: ComponentsVariants['M4LDivider'];
     };
+   }
   }
 }

package/components/DynamicFilter/subcomponents/AppliedFilters/AppliedFilters.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useAppliedFilters } from "./useAppliedFilters.js";
 import { g as AppliedFiltersStyled, h as AppliedFilterInnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
 import { A as AppliedFilterChip } from "../AppliedFilterChip/AppliedFilterChip.js";

package/components/ObjectLogs/components/DetailDialog/index.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
 import { useHostTheme } from "@m4l/graphics";
 import ReactJson from "@microlink/react-json-view";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 function DetailDialog(props) {
   const { log_id } = props;
   const { networkOperation } = useNetwork();

package/components/ScrollBar/{index.d.ts → ScrollBar.d.ts}

@@ -1,7 +1,4 @@
-import { ReactElement } from 'react';
-interface ScrollBarProps {
-    children?: ReactElement;
-}
+import { ScrollBarProps } from './types';
 /**
  * TODO: Documentar
  */

package/components/ScrollBar/ScrollBar.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useIsMobile } from "@m4l/graphics";
+import clsx from "clsx";
+import { c as classScrollRoot, S as SCROLL_KEY_COMPONENT } from "./constants.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { R as RootScrollBar, S as SimpleBarStyled } from "./slots/ScrollBarSlots.js";
+import { S as ScrollBarSlots } from "./slots/ScrollBarEnum.js";
+function ScrollBar(props) {
+  const {
+    orientation,
+    children,
+    className,
+    dataTestId
+  } = props;
+  const isMobile = useIsMobile();
+  const ownerState = {
+    orientation,
+    children
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
+  }
+  return /* @__PURE__ */ jsx(
+    RootScrollBar,
+    {
+      ownerState: { ...ownerState },
+      id: "RootStyle",
+      className: clsx(classScrollRoot, className),
+      ...getPropDataTestId(SCROLL_KEY_COMPONENT, ScrollBarSlots.root, dataTestId),
+      children: /* @__PURE__ */ jsx(
+        SimpleBarStyled,
+        {
+          orientation: props.orientation,
+          autoHide: false,
+          ownerState: {},
+          className: "simplebar",
+          children
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollBar as S
+};

package/components/ScrollBar/ScrollBar.styles.d.ts

@@ -0,0 +1,2 @@
+import { ScrollBarStyles } from './types';
+export declare const scrollBarStyles: ScrollBarStyles;

package/components/ScrollBar/ScrollBar.styles.js

@@ -0,0 +1,65 @@
+import "simplebar-react/dist/simplebar.min.css";
+const scrollBarStyles = {
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  root: ({ theme }) => ({
+    flexGrow: "1",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    minHeight: "inherit",
+    "& .simplebar-scrollbar.simplebar-visible:before": {
+      opacity: "1"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {},
+    '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
+      marginBottom: "9px"
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
+      backgroundColor: theme.vars.palette.default.focusOpacity,
+      borderRadius: "2px",
+      height: "5px"
+    },
+    "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
+      background: theme.vars.palette.general.scrollBar,
+      borderRadius: "2px"
+    }
+  }),
+  /**
+   * 👾 Estilos para el Componente ScrollBar 👾
+   */
+  scrollBar: () => ({
+    height: "100%",
+    "& .simplebar-scrollbar": {
+      "&:before": {
+        // backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48),
+      },
+      "&.simplebar-visible:before": {
+        opacity: 1
+      }
+    },
+    "& .simplebar-track.simplebar-vertical": {
+      width: 10
+    },
+    "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
+      height: 6
+    },
+    "& .simplebar-mask": {
+      zIndex: "inherit"
+    },
+    "& .simplebar-content": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    },
+    '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
+      "& .simplebar-content": {
+        marginRight: "12px"
+      }
+    }
+  })
+};
+export {
+  scrollBarStyles as s
+};

package/components/ScrollBar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+export declare const classScrollRoot: string;

package/components/ScrollBar/constants.js

@@ -0,0 +1,7 @@
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+const SCROLL_KEY_COMPONENT = "M4LScrollBar";
+const classScrollRoot = getComponentSlotRoot(SCROLL_KEY_COMPONENT);
+export {
+  SCROLL_KEY_COMPONENT as S,
+  classScrollRoot as c
+};

package/components/ScrollBar/slots/ScrollBarEnum.d.ts

@@ -0,0 +1,4 @@
+export declare enum ScrollBarSlots {
+    root = "root",
+    scrollBar = "scrollBar"
+}

package/components/ScrollBar/slots/ScrollBarEnum.js

@@ -0,0 +1,8 @@
+var ScrollBarSlots = /* @__PURE__ */ ((ScrollBarSlots2) => {
+  ScrollBarSlots2["root"] = "root";
+  ScrollBarSlots2["scrollBar"] = "scrollBar";
+  return ScrollBarSlots2;
+})(ScrollBarSlots || {});
+export {
+  ScrollBarSlots as S
+};

package/components/ScrollBar/slots/ScrollBarSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const RootScrollBar: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const SimpleBarStyled: import('@emotion/styled').StyledComponent<Pick<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null>, keyof import('simplebar-react').Props | keyof import('react').RefAttributes<import('simplebar-core').default | null>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ScrollBarProps> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ScrollBarProps> & Record<string, unknown>;
+}, {}, {}>;

package/components/ScrollBar/slots/ScrollBarSlots.js

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import SimpleBarReact from "simplebar-react";
+import { S as SCROLL_KEY_COMPONENT } from "../constants.js";
+import { S as ScrollBarSlots } from "./ScrollBarEnum.js";
+import { s as scrollBarStyles } from "../ScrollBar.styles.js";
+const RootScrollBar = styled("div", {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.root
+})(scrollBarStyles?.root);
+const SimpleBarStyled = styled(SimpleBarReact, {
+  name: SCROLL_KEY_COMPONENT,
+  slot: ScrollBarSlots.scrollBar
+})(scrollBarStyles?.scrollBar);
+export {
+  RootScrollBar as R,
+  SimpleBarStyled as S
+};

package/components/ScrollBar/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ScrollBarSlots';
+export * from './ScrollBarEnum';

package/components/ScrollBar/slots/index.js

@@ -0,0 +1 @@
+

package/components/ScrollBar/types.d.ts

@@ -1,7 +1,49 @@
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { Props as SimpleProps } from 'simplebar-react';
+import { SCROLL_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { ScrollBarSlots } from './slots';
+/**
+ * Props for the ScrollBar component.
+ */
 export interface ScrollBarProps extends SimpleProps {
+    /**
+     * The content of the ScrollBar.
+     */
     children: ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps;
+    /**
+     * The orientation of the ScrollBar.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The class name of the ScrollBar.
+     */
+    className?: string;
+    /**
+     * The data-testid attribute for testing purposes.
+     */
+    dataTestId?: string;
 }
+/**
+ * The owner state for the ScrollBar component.
+ */
+export type ownerState = ScrollBarProps;
+/**
+ * The owner state for the ScrollBar component.
+ * @deprecated This type is redundant and can be removed.
+ */
+export type ScrollBarOwnerState = ScrollBarProps & {};
+/**
+ * The type for the ScrollBar slots.
+ */
+export type ScrollBarSlotsType = keyof typeof ScrollBarSlots;
+/**
+ * The styles for the ScrollBar component.
+ */
+export type ScrollBarStyles = OverridesStyleRules<ScrollBarSlots, typeof SCROLL_KEY_COMPONENT, Theme>;

package/components/areas/components/AreasAdmin/AreasAdmin.js

@@ -5,7 +5,6 @@ import clsx from "clsx";
 import { A as AreaChip } from "./subcomponents/AreaChip/AreaChip.js";
 import { shallow } from "zustand/shallow";
 import { I as ICONS } from "../../icons.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.js";
 import { A as AreaChipMobile } from "./subcomponents/AreaChipMobile/AreaChipMobile.js";
 import { useRef } from "react";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../dictionary.js";
@@ -14,6 +13,7 @@ import { useIsMobile } from "@m4l/graphics";
 import { A as AREAS_ADMIN_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
 import { A as AreasAdminSlots } from "./slots/AreasAdminEnum.js";

package/components/index.d.ts

@@ -41,7 +41,7 @@ export * from './PropertyValue/PropertyValue';
 export * from './MenuActions';
 export type { MenuAction, ComponentActionProps } from './MenuActions/types';
 export * from './extended/React-Resizable';
-export * from './ScrollBar';
+export * from './ScrollBar/ScrollBar';
 export { ScrollToTop } from './ScrollToTop';
 export * from './extended/React-Splitter/SplitLayout/SplitLayout';
 export * from './ToastContainer';

package/index.js

@@ -130,7 +130,7 @@ import { a as a9 } from "./components/MenuActions/dictionary.js";
 import { a as a10, M as M11 } from "./components/MenuActions/MenuActions.js";
 import { R as R16 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
 import { R as R17 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
-import { S as S3 } from "./components/ScrollBar/index.js";
+import { S as S3 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S4 } from "./components/extended/React-Splitter/SplitLayout/SplitLayout.js";
 import { T as T3 } from "./components/ToastContainer/ToastContainer.js";
 import { T as T4 } from "./components/ToastContainer/subcomponents/ToastMessage/ToastMessage.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.95",
+  "version": "9.1.96",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/ScrollBar/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LScrollBar";

package/components/ScrollBar/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LScrollBar";
-export {
-  componentName as c
-};

package/components/ScrollBar/classes/index.d.ts

@@ -1,9 +0,0 @@
-import { ScrollBarClassesType } from './types';
-export declare const scrollBarClasses: ScrollBarClassesType;
-export declare function getScrollBarUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const getScrollBarUtilityClasses: () => {
-    root: string;
-};

package/components/ScrollBar/classes/index.js

@@ -1,23 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-function getScrollBarUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const getScrollBarUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getScrollBarUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  getScrollBarUtilityClasses as g
-};

package/components/ScrollBar/classes/types.d.ts

@@ -1,6 +0,0 @@
-import { getScrollBarUtilityClasses } from '.';
-export interface ScrollBarClassesType {
-    root: string;
-}
-export type StackClassesKey = keyof ScrollBarClassesType;
-export type ScrollBarClasses = ReturnType<typeof getScrollBarUtilityClasses>;

package/components/ScrollBar/index.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import { R as RootStyle, S as SimpleBarStyle } from "./styles.js";
-import { g as getScrollBarUtilityClasses } from "./classes/index.js";
-function ScrollBar(props) {
-  const { children } = props;
-  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
-  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
-  }
-  const classes = getScrollBarUtilityClasses();
-  return /* @__PURE__ */ jsx(RootStyle, { id: "RootStyle", className: classes.root, children: /* @__PURE__ */ jsx(SimpleBarStyle, { autoHide: false, children }) });
-}
-export {
-  ScrollBar as S
-};

package/components/ScrollBar/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const RootStyle: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SimpleBarStyle: import('@emotion/styled').StyledComponent<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;
-export declare const SimpleBarStyle2: import('@emotion/styled').StyledComponent<import('simplebar-react').Props & import('react').RefAttributes<import('simplebar-core').default | null> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;

package/components/ScrollBar/styles.js

@@ -1,46 +0,0 @@
-import { styled, alpha } from "@mui/material/styles";
-import SimpleBarReact from "simplebar-react";
-import "simplebar-react/dist/simplebar.min.css";
-const RootStyle = styled("div")(({ theme }) => ({
-  flexGrow: "1",
-  height: "100%",
-  overflow: "hidden",
-  ...theme.components?.M4LScrollBar?.styleOverrides || {}
-}));
-const SimpleBarStyle = styled(SimpleBarReact)`
-  height: 100%;
-`;
-styled(SimpleBarReact)(({ theme }) => ({
-  height: "100%",
-  "& .simplebar-scrollbar": {
-    "&:before": {
-      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
-    },
-    "&.simplebar-visible:before": {
-      opacity: 1
-    }
-  },
-  "& .simplebar-track.simplebar-vertical": {
-    width: 10
-  },
-  "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
-    height: 6
-  },
-  "& .simplebar-mask": {
-    zIndex: "inherit"
-  },
-  "& .simplebar-content": {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%"
-  },
-  '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] ': {
-    "& .simplebar-content": {
-      marginRight: "12px"
-    }
-  }
-}));
-export {
-  RootStyle as R,
-  SimpleBarStyle as S
-};