@m4l/components 9.2.55 → 9.2.56-beta.3

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -76,11 +76,10 @@ const ChipMobile = (props) => {
       color: "error"
     }
   ];
-  return /* @__PURE__ */ jsxs(ChipMobileRootStyled, { selected, disabled, ownerState: {}, children: [
+  return /* @__PURE__ */ jsxs(ChipMobileRootStyled, { selected, disabled, children: [
     /* @__PURE__ */ jsxs(
       ChipMobileContentStyled,
       {
-        ownerState: {},
         role: "presentation",
         ref: anchorRef,
         onMouseUp: onRippleStop,
@@ -89,7 +88,7 @@ const ChipMobile = (props) => {
         },
         children: [
           /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false }),
-          /* @__PURE__ */ jsx(NameChipMobileStyled, { ownerState: {}, variant: "body", children: `${areaName}` }),
+          /* @__PURE__ */ jsx(NameChipMobileStyled, { variant: "body", children: `${areaName}` }),
           /* @__PURE__ */ jsx(
             MenuActions,
             {
@@ -132,7 +131,7 @@ const ChipMobile = (props) => {
                 values: initialValues,
                 validationSchema,
                 children: [
-                  /* @__PURE__ */ jsx(EditAreaChipMobileContainerStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
+                  /* @__PURE__ */ jsx(EditAreaChipMobileContainerStyled, { children: /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_edit_area)) }) }),
                   /* @__PURE__ */ jsx(
                     RHFTextField,
                     {

package/components/areas/components/AreasAdmin/types.d.ts

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material';
 import { AreasAdminSlots } from './slots/AreasAdminEnum';
 import { AREAS_ADMIN_KEY_COMPONENT } from './constants';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
-import { M4LOverridesStyleRules } from '../../../../../src/@types/augmentations';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type AreasAdminType = keyof typeof AreasAdminSlots;
 export interface AreasAdminProps {
     /**

package/components/areas/components/AreasViewer/AreasViewer.js

@@ -21,7 +21,7 @@ const AreasViewer = forwardRef((props, ref) => {
   const areas = useAreasStore((state) => state.areasIds, shallow);
   const windowsModals = useAreasStore((state) => state.windowsModalsIds);
   const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
+  const status = useAreasStore((state) => state.ownerState?.status);
   const { init } = useAreasStore((state) => state.areasActions);
   const ownerState = {
     selected: !!currentArea

package/components/areas/components/AreasViewer/AreasViewer.styles.js

@@ -8,7 +8,7 @@ const areasViewerStyles = {
     height: "100%",
     overflow: "hidden",
     position: "relative",
-    background: theme.vars.palette.background.neutral,
+    background: theme.vars.palette.background.default,
     // areaGridLayout
     "& .M4LAreasViewer-areaGridLayout": {
       height: "100% !important",
@@ -33,7 +33,7 @@ const areasViewerStyles = {
     justifyContent: "top",
     alignItems: "flex-start",
     visibility: "hidden",
-    ...ownerState.selected && {
+    ...ownerState?.selected && {
       display: "block",
       visibility: "visible"
     }

package/components/areas/components/AreasViewer/slots/AreasViewerSlots.d.ts

@@ -1,15 +1,15 @@
 export declare const AreasViewerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const AreaRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const BaseAreaStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WrapperWindowModalStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../../WindowBase/types').WindowBaseProps, keyof import('../../../../WindowBase/types').WindowBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../types').AreasViewerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/BaseArea/BaseArea.js

@@ -6,7 +6,7 @@ import { B as BaseAreaStyled } from "../../../../slots/AreasViewerSlots.js";
 const BaseArea = (props) => {
   const { areaId } = props;
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  return /* @__PURE__ */ jsx(BaseAreaStyled, { ownerState: {}, children: status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
+  return /* @__PURE__ */ jsx(BaseAreaStyled, { children: status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
   } }) });
 };
 export {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/Window.js

@@ -7,6 +7,8 @@ import { a as getNameDataTestId } from "../../../../../../../../test/getNameData
 import { A as AREAS_VIEWER_CLASS_NAME } from "../../../../../../constants.js";
 import { u as useWindow } from "./hooks/useWindow.js";
 import { W as WindowBaseStyled } from "../../../../slots/AreasViewerSlots.js";
+import { shallow } from "zustand/shallow";
+import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 const Window = (props) => {
   const { areaId, windowId } = props;
   const {
@@ -28,13 +30,16 @@ const Window = (props) => {
     onTouch,
     memoizedActions
   } = useWindow(windowId, areaId);
+  const maximizedId = useAreasStore(
+    (state) => areaId ? state.hashAreas[areaId]?.maximizedId : void 0,
+    shallow
+  );
   if (status === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     WindowBaseStyled,
     {
-      ownerState: {},
       title: `${title}${moduleCount ? `:${moduleCount}` : ""}`,
       iconUrl,
       isLoading: loading,
@@ -45,6 +50,8 @@ const Window = (props) => {
       windowId,
       selected,
       onMouseDown: onTouch,
+      type: emergeType,
+      variant: maximizedId ? "text" : "outlined",
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId(
           AREAS_VIEWER_CLASS_NAME,

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useRightActions.js

@@ -46,12 +46,14 @@ const useRightActions = ({
           }
         }
       },
-      disabled: false
+      disabled: false,
+      color: "info",
+      className: "expand-toggle window-actions"
     });
     actions.push({
       place: "right",
       key: "collapseToggle",
-      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
+      iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLLPASE}`,
       label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
       /**
        * Acción de collapse/expand.
@@ -65,7 +67,9 @@ const useRightActions = ({
           }
         }
       },
-      disabled: !(maximizedId === void 0)
+      disabled: !(maximizedId === void 0),
+      color: "warning",
+      className: "collapse-toggle window-actions"
     });
     return actions;
   }, [

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/WindowModal.js

@@ -62,7 +62,6 @@ const AreaWindowModal = (props) => {
       children: /* @__PURE__ */ jsx(
         WrapperWindowModalStyled,
         {
-          ownerState: {},
           ref: setContainerRef,
           children: !isMobile ? /* @__PURE__ */ jsx(DraggableComponent, {}) : /* @__PURE__ */ jsx(Window, { ...props })
         }

package/components/areas/contexts/AreasContext/index.js

@@ -48,7 +48,7 @@ function AreasProvider(props) {
     }, storeDevtoolsEnabled);
     areasStoreRef.current?.getState().areasActions.init();
   }
-  const status = useStore(areasStoreRef.current, (state) => state.ownerState.status, shallow);
+  const status = useStore(areasStoreRef.current, (state) => state.ownerState?.status, shallow);
   const currentModuleId = useStore(areasStoreRef.current, (state) => state.currentModuleId);
   const refCurrentModuleId = useRef("");
   const { setHandlerGetLabel, setExternalState } = useStore(

package/components/areas/contexts/AreasContext/store.js

@@ -37,7 +37,7 @@ const createAreasStore = (initProps, storeDevtoolsEnabled = false) => {
            * Inicializa el store de areas
            */
           init: () => {
-            if (get().ownerState.status !== "init") {
+            if (get().ownerState?.status !== "init") {
               return;
             }
             if (!get().loadAreasFromNetwork) {

package/components/areas/contexts/AreasContext/types.d.ts

@@ -162,7 +162,7 @@ export interface AreasStoreStateWithActions extends AreasStoreState {
     areasActions: {
         /**
          * inicializa el store cargando las áreas de trabajo.
-         * Una vez termina el proceso, actualiza el estado de carga (ownerState.status) a "loaded".
+         * Una vez termina el proceso, actualiza el estado de carga (ownerState?.status) a "loaded".
          * Normalmente es asyncrono en producción por el llamado al endpoint áreas.
          */
         init: () => void;

package/components/areas/icons.d.ts

@@ -2,8 +2,8 @@ export declare const ICONS: {
     CLOSE: string;
     MAXIMIZE: string;
     NORMALIZE: string;
-    COLAPSE: string;
-    UNCOLPASE: string;
+    COLLAPSE: string;
+    UNCOLLPASE: string;
     RESET_COOKIES: string;
     SAVE_COOKIES: string;
     DELETE_AREA: string;

package/components/areas/icons.js

@@ -1,8 +1,8 @@
 const ICONS = {
-  MAXIMIZE: "maximize.svg",
-  NORMALIZE: "normalize.svg",
-  COLAPSE: "colapse.svg",
-  UNCOLPASE: "uncolapse.svg",
+  MAXIMIZE: "window_expand.svg",
+  NORMALIZE: "window_normalize.svg",
+  COLLAPSE: "window_collapse.svg",
+  UNCOLLPASE: "window_uncollapse.svg",
   RESET_COOKIES: "reset_cookies.svg",
   SAVE_COOKIES: "save_cookies.svg",
   DELETE_AREA: "delete_area.svg",

package/components/commercial/SectionCommercial/classes/index.d.ts

@@ -1,8 +1,8 @@
 import { AppBarComercialClassesType } from './types';
-import { OnwerState } from './../types';
+import { OwnerState } from './../types';
 export declare const appBarComercialClasses: AppBarComercialClassesType;
 export declare function getAppBarComercialUtilityClass(slot: string): string;
 /**
  * TODO: Documentar
  */
-export declare const useAppBarComercialUtilityClasses: (ownerState: OnwerState) => Record<"root", string>;
+export declare const useAppBarComercialUtilityClasses: (ownerState: OwnerState) => Record<"root", string>;

package/components/commercial/SectionCommercial/classes/index.js

@@ -17,9 +17,9 @@ const useAppBarComercialUtilityClasses = (ownerState) => {
   const slots = {
     root: [
       "root",
-      ownerState.contentWith === "fullWidth" && "fullWidth",
-      ownerState.contentWith === "boxed" && "boxed",
-      ownerState.columnReverse && "columnReverse"
+      ownerState?.contentWith === "fullWidth" && "fullWidth",
+      ownerState?.contentWith === "boxed" && "boxed",
+      ownerState?.columnReverse && "columnReverse"
     ]
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});

package/components/commercial/SectionCommercial/types.d.ts

@@ -5,4 +5,4 @@ export interface SectionComercialProps extends StackProps {
     contentWith?: 'fullWidth' | 'boxed';
     columnReverse?: boolean;
 }
-export type OnwerState = Pick<SectionComercialProps, 'contentWith' | 'columnReverse'>;
+export type OwnerState = Pick<SectionComercialProps, 'contentWith' | 'columnReverse'>;

package/components/extended/React-Resizable/helpers.d.ts

@@ -20,15 +20,8 @@ export declare const getReactResizableStyles: (theme: Theme, ownerState: {
     '&.react-resizable': {
         position: string;
         '& .react-resizable-handle': {
-            display: string;
-        };
-        '&:hover:not(.react-resizable-hide) .react-resizable-handle': {
-            display: string;
-            prop1: number;
-        };
-        '&.M4L-resizing .react-resizable-handle': {
-            display: string;
-            prop1: number;
+            opacity: string;
+            zIndex: number;
         };
     };
     '& .react-resizable-handle-sw': {

package/components/extended/React-Resizable/helpers.js

@@ -5,7 +5,7 @@ const getReactResizableStyles = (theme, ownerState) => {
     height: theme.vars.size.baseSpacings.sp3,
     borderStyle: "solid",
     borderWidth: `${borderWith}px`,
-    display: ownerState.disabled ? "none" : "block",
+    display: ownerState?.disabled ? "none" : "block",
     borderColor: theme.palette.border.default,
     borderRadius: "0%",
     backgroundImage: "none",
@@ -16,22 +16,24 @@ const getReactResizableStyles = (theme, ownerState) => {
   };
   return {
     position: "absolute",
-    backgroundColor: theme.palette.background.default,
-    cursor: ownerState.disabled ? "default" : void 0,
+    backgroundColor: "tra",
+    cursor: ownerState?.disabled ? "default" : void 0,
     "&.react-resizable": {
       position: "relative",
+      //propuesta de diseño con el resizable oculto
       "& .react-resizable-handle": {
-        display: "none"
-      },
-      // Show handles only when not disabled and add resizing styles
-      "&:hover:not(.react-resizable-hide) .react-resizable-handle": {
-        display: ownerState.disabled ? "none" : "block",
-        prop1: 3
-      },
-      "&.M4L-resizing .react-resizable-handle": {
-        display: ownerState.disabled ? "none" : "block",
-        prop1: 2
+        opacity: "0!important",
+        zIndex: 1
       }
+      /*  // Show handles only when not disabled and add resizing styles
+      '&:hover:not(.react-resizable-hide) .react-resizable-handle': {
+        display: ownerState?.disabled ? 'none' : 'block',
+        prop1: 3,
+      },
+      '&.M4L-resizing .react-resizable-handle': {
+        display: ownerState?.disabled ? 'none' : 'block',
+        prop1: 2,
+      }, */
     },
     // '&.react-resizable-hide > .react-resizable-handle': {
     //   display: 'none',

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js

@@ -37,7 +37,6 @@ const PropagateLoaderSpinner = ({
       children: /* @__PURE__ */ jsx(
         LoaderStyled,
         {
-          ownerState: {},
           loading,
           color: color || palette.primary.enabled,
           speedMultiplier,

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.styles.js

@@ -18,7 +18,7 @@ const propagateLoaderSpinnerStyles = {
     justifyContent: "center",
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
-      ownerState.propagateLoaderSize || "medium",
+      ownerState?.propagateLoaderSize || "medium",
       "action"
     ),
     "& > span": {

package/components/extended/React-Spinners/PropagateLoaderSpinner/slots/PropagateLoaderSpinnerSlots.d.ts

@@ -1,6 +1,6 @@
-export declare const PropagateLoaderSpinnerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>;
+export declare const PropagateLoaderSpinnerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const LoaderStyled: import('@emotion/styled').StyledComponent<Pick<import('react-spinners/helpers/props').LoaderSizeProps, keyof import('react-spinners/helpers/props').LoaderSizeProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>;
+export declare const LoaderStyled: import('@emotion/styled').StyledComponent<Pick<import('react-spinners/helpers/props').LoaderSizeProps, keyof import('react-spinners/helpers/props').LoaderSizeProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PropagateLoaderSpinnerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;

package/components/extended/React-Spinners/PropagateLoaderSpinner/types.d.ts

@@ -1,9 +1,9 @@
 import { CSSProperties } from 'react';
 import { PropagateLoaderSpinnerSlots } from './slots/PropagateLoaderSpinnerEnum';
 import { PROPAGATE_LOADER_SPINNER_KEY_COMPONENT } from './constants';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Theme } from '@mui/material';
 import { Sizes } from '@m4l/styles';
+import { M4LOverridesStyleRules } from '../../../../@types/augmentations';
 export type PropagateLoaderSpinnerType = keyof typeof PropagateLoaderSpinnerSlots;
 /**
  * Propiedades comunes para configurar el loader.
@@ -55,4 +55,4 @@ export interface PropagateLoaderSpinnerOwnerState {
      */
     [key: string]: unknown;
 }
-export type PropagateLoaderSpinnerStyles = OverridesStyleRules<PropagateLoaderSpinnerType, typeof PROPAGATE_LOADER_SPINNER_KEY_COMPONENT, Theme>;
+export type PropagateLoaderSpinnerStyles = M4LOverridesStyleRules<PropagateLoaderSpinnerType, typeof PROPAGATE_LOADER_SPINNER_KEY_COMPONENT, Theme>;

package/components/extended/React-Splitter-Layout/slots/SplitLayoutSlots.d.ts

@@ -1,9 +1,9 @@
 export declare const SplitLayoutRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const SplitMasterStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const SplitDetailStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
-    ownerState: Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>;
+    ownerState?: (Partial<import('../../React-resizable-panels/types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/extended/React-resizable-panels/SplitLayout.styles.js

@@ -20,10 +20,10 @@ const splitLayoutStyles = {
     "& .M4LStack-root": {
       gap: "8px"
     }
-    // ...(ownerState.splitPosition === 'vertical' && {
+    // ...(ownerState?.splitPosition === 'vertical' && {
     //   width: '100%',
     // }),
-    // ...(ownerState.splitPosition === 'horizontal' && {
+    // ...(ownerState?.splitPosition === 'horizontal' && {
     //   height: '100%',
     // }),
   }),
@@ -35,7 +35,7 @@ const splitLayoutStyles = {
     width: "100%",
     height: "100%",
     display: "flex",
-    ...ownerState.splitPosition === "none" && {
+    ...ownerState?.splitPosition === "none" && {
       display: "none"
       //Garantiza que no se muestre el splitDetail cuando el splitPosition es none
     },
@@ -56,12 +56,12 @@ const splitLayoutStyles = {
    */
   splitResizeHandle: ({ theme, ownerState }) => ({
     position: "relative",
-    ...ownerState.splitPosition === "none" && {
+    ...ownerState?.splitPosition === "none" && {
       display: "none"
       //Garantiza que no se muestre el splitResizeHandle cuando el splitPosition es none
     },
     "&.M4LSplitLayout-splitResizeHandle-horizontal": {
-      width: "2px",
+      width: "1px",
       margin: "1px 0px",
       background: theme.vars.palette.border.default,
       "&:before": {
@@ -84,7 +84,7 @@ const splitLayoutStyles = {
       }
     },
     "&.M4LSplitLayout-splitResizeHandle-vertical": {
-      height: "2px",
+      height: "1px",
       margin: "0px 1px",
       background: theme.vars.palette.border.default,
       "&:before": {