@m4l/components 9.1.4 → 9.1.6

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

@@ -10,7 +10,6 @@ import { useTheme } from "@mui/material";
 import { C as ChipMobile } from "./subcomponents/ChipMobile/ChipMobile.js";
 import { M as MenuActions } from "../../../../../mui_extended/MenuActions/MenuActions.js";
 import { B as Button } from "../../../../../mui_extended/Button/Button.js";
-import { I as Icon } from "../../../../../Icon/Icon.js";
 const AreaChipMobile = () => {
   const areas = useAreasStore(
     (state) => state.areasIds.map((a) => ({ id: a, name: state.hashAreas[a].name })),
@@ -31,6 +30,10 @@ const AreaChipMobile = () => {
         urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.LAYERS}`,
         /**
          * OnClick
+         * @author SebastianM - automatic
+         * @createdAt 2024-11-06 09:00:05 - automatic
+         * @updatedAt 2024-11-06 17:18:27 - automatic
+         * @updatedUser SebastianM - automatic
          */
         onClick: () => {
           selectArea(area.id);
@@ -79,13 +82,8 @@ const AreaChipMobile = () => {
               setAnchorMenuAreas(null);
             },
             variant: "outlined",
-            startIcon: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`
-              }
-            ),
-            children: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
+            startIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.ADD_AREA}`,
+            label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.area_add_new))
           }
         )
       }

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.d.ts

@@ -1,9 +1,33 @@
 import { AreaChipProps } from '../../../AreaChip/types';
 /**
- * TODO: Documentar
+ * ChipMobile component for rendering a mobile-friendly chip with area details.
+ *
+ * Props:
+ * - areaId: string - The ID of the area.
+ * - selected: boolean - Indicates if the chip is selected.
+ * - disabled: boolean - Indicates if the chip is disabled.
+ * - setAnchorMenuAreas: (element: HTMLElement) => void - Function to set the anchor element for the menu.
+ *
+ * Constants:
+ * - host_static_assets: string - The host for static assets.
+ * - environment_assets: string - The environment-specific assets.
+ * - deleteArea: (areaId: string) => void - Function to delete an area.
+ * - selectArea: (areaId: string) => void - Function to select an area.
+ * - editArea: (areaId: string, data: any) => void - Function to edit an area.
+ * - setFocus: (focus: boolean) => void - Function to set focus.
+ * - areaName: string - The name of the area.
+ * - listAreas: string[] - List of area IDs.
+ * - open: boolean - State to control the open/close state of the popover.
+ * - getLabel: (key: string) => string - Function to get a label from the dictionary.
+ * - isDesktop: boolean - Indicates if the current view is desktop.
+ * - anchorRef: React.RefObject<null> - Reference to the anchor element.
+ * - theme: Theme - The current theme.
+ * - initialValues: { inputEditArea: string } - Initial values for the form.
+ * - validationSchema: Yup.ObjectSchema - Validation schema for the form.
+ * - rippleRef: React.RefObject<any> - Reference to the ripple effect.
  * @author SebastianM - automatic
- * @createdAt 2024-11-01 12:34:48 - automatic
- * @updatedAt 2024-11-01 12:34:49 - automatic
+ * @createdAt 2024-11-06 11:07:59 - automatic
+ * @updatedAt 2024-11-06 11:07:59 - automatic
  * @updatedUser SebastianM - automatic
  */
 export declare const ChipMobile: {

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

@@ -17,10 +17,10 @@ import { I as IconButton } from "../../../../../../../mui_extended/IconButton/Ic
 import { R as RHFormProvider } from "../../../../../../../hook-form/RHFormContext/index.js";
 import { T as Typography } from "../../../../../../../mui_extended/Typography/Typography.js";
 import { A as ActionsContainer } from "../../../../../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/index.js";
-import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/index.js";
 import { P as Popover } from "../../../../../../../mui_extended/Popover/Popover.js";
 import { R as RHFTextField } from "../../../../../../../hook-form/RHFTextField/RHFTextField.js";
+import { A as ActionCancel } from "../../../../../../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../../../../../../CommonActions/components/ActionIntro/ActionIntro.js";
 const ChipMobile = (props) => {
   const { areaId, selected, disabled, setAnchorMenuAreas } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
@@ -190,11 +190,10 @@ const ChipMobile = (props) => {
                           setOpen(false);
                           setFocus(false);
                         },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
+                        variant: "outlined"
                       }
                     ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
+                    /* @__PURE__ */ jsx(ActionIntro, {})
                   ] })
                 ]
               }

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.d.ts

@@ -5,5 +5,9 @@ import { NavItemRootProps } from './types';
  * @param {TopBarMenuDataType} props.itemRootData - Array de tipo TopBarMenuDataType
  * @returns Boton con o sin accordion
  * @example <NavItemRoot key={group.id} itemRootData={group} />
+ * @author SebastianM - automatic
+ * @createdAt 2024-11-06 09:00:05 - automatic
+ * @updatedAt 2024-11-06 17:18:27 - automatic
+ * @updatedUser SebastianM - automatic
  */
 export declare const NavItemRoot: (props: NavItemRootProps) => import("react/jsx-runtime").JSX.Element;

package/components/commercial/TopBar/component/ConteinItem/subcomponets/NavItem/index.js

@@ -36,7 +36,7 @@ const NavItemRoot = (props) => {
           item.path === window.location.pathname ? TopBarClasses.IsActive : null
         ),
         ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(componentName, "ItemSelect", dataTestId) } : {},
-        children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, children: item.title })
+        children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, label: item.title })
       }
     ) }, index));
   };
@@ -77,14 +77,15 @@ const NavItemRoot = (props) => {
             )
           } : {},
           children: [
-            /* @__PURE__ */ jsx(Button, { size: "medium", variant: "text", href: itemRootData.path, children: title }),
+            /* @__PURE__ */ jsx(Button, { size: "medium", variant: "text", href: itemRootData.path, label: title }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "text",
                 id: module_id,
                 onClick: (e) => handleClick(e, module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false })
+                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false }),
+                label: ""
               }
             ),
             renderPopover()
@@ -103,11 +104,11 @@ const NavItemRoot = (props) => {
               Button,
               {
                 "aria-describedby": module_id,
+                label: title,
                 variant: "text",
                 size: "medium",
                 onClick: (e) => handleClick(e, itemRootData.module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false }),
-                children: title
+                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false })
               }
             ),
             renderPopover()
@@ -116,7 +117,7 @@ const NavItemRoot = (props) => {
       );
     }
     if (itemRootData.path) {
-      return /* @__PURE__ */ jsx(Button, { variant: "text", size: "medium", href: itemRootData.path, "aria-describedby": module_id, children: /* @__PURE__ */ jsx("div", { children: title }) });
+      return /* @__PURE__ */ jsx(Button, { variant: "text", size: "medium", href: itemRootData.path, "aria-describedby": module_id, label: title });
     }
   };
   return /* @__PURE__ */ jsx(

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

@@ -6,5 +6,9 @@ import { ResizableProps } from 'react-resizable';
  * Resizable es un componente controlado, por lo que se debe pasar el width y height y darle manejo
  * a los handlers de onResizeStart, onResize y onResizeStop. Estos handlers son implementados en el componente
  * DragResizeWindow
+ * @author cesar - automatic
+ * @createdAt 2024-11-05 13:00:52 - automatic
+ * @updatedAt 2024-11-06 10:50:22 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const Resizable: (props: ResizableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/ResizableSlots.js";
+import { u as useResizable } from "../hooks/useResizable.js";
+import { R as RESIZING_CLASS_NAME } from "./constants.js";
 const Resizable = (props) => {
-  return /* @__PURE__ */ jsx(RootStyled, { ...props });
+  const { onResizeStart, onResizeStop, ...other } = props;
+  const { isResizing, localHandleResizeStart, localHandleResizeStop } = useResizable(onResizeStart, onResizeStop);
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      ...other,
+      onResizeStart: localHandleResizeStart,
+      onResizeStop: localHandleResizeStop,
+      className: isResizing ? RESIZING_CLASS_NAME : ""
+    }
+  );
 };
 export {
   Resizable as R

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

@@ -1,2 +1,3 @@
 export declare const COMPONENT_TEST_ID = "M4LResizable";
 export declare const COMPONET_KEY_COMPONENT = "M4LResizable";
+export declare const RESIZING_CLASS_NAME = "M4L-resizing";

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

@@ -1,4 +1,6 @@
 const COMPONET_KEY_COMPONENT = "M4LResizable";
+const RESIZING_CLASS_NAME = "M4L-resizing";
 export {
-  COMPONET_KEY_COMPONENT as C
+  COMPONET_KEY_COMPONENT as C,
+  RESIZING_CLASS_NAME as R
 };

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

@@ -1,4 +1,4 @@
-import { ResizeableProps } from './types';
+import { ResizableProps } from './types';
 /**
  * Redefinicon de react-resizable/ResizableBox incluyendo los estilos en el slot.
  *
@@ -8,5 +8,9 @@ import { ResizeableProps } from './types';
  * del componente lanzan el onResize cuando cambia el tamaño, para que se re-inserten como props.
  *
  * Este componente no tiene implementado la correción del resize a la izquierda o hacia arriba. Usar DragResizeWindow.
+ * @author cesar - automatic
+ * @createdAt 2024-11-01 12:04:19 - automatic
+ * @updatedAt 2024-11-12 13:32:58 - automatic
+ * @updatedUser cesar - automatic
  */
-export declare function ResizableBox(props: ResizeableProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableBox(props: ResizableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,24 +1,36 @@
 import { jsx } from "react/jsx-runtime";
 import { R as RootStyled } from "./slots/ResizableBoxSlots.js";
+import { u as useResizable } from "../hooks/useResizable.js";
+import { R as RESIZING_CLASS_NAME } from "../Resizable/constants.js";
 function ResizableBox(props) {
   const {
     children,
     width = 600,
     height = 400,
-    maxHeigth,
+    maxHeight,
     onResize,
+    onResizeStart,
+    onResizeStop,
     maxWidth,
     resizeHandles = ["se", "nw"],
+    disabled = false,
     ...other
   } = props;
+  const { isResizing, localHandleResizeStart, localHandleResizeStop } = useResizable(onResizeStart, onResizeStop);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
+      role: "region",
+      "aria-label": "Resizable Box",
       width,
       height,
       onResize,
-      maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+      maxConstraints: maxHeight && maxWidth ? [maxWidth, maxHeight] : void 0,
       resizeHandles,
+      ownerState: { disabled },
+      onResizeStart: localHandleResizeStart,
+      onResizeStop: localHandleResizeStop,
+      className: isResizing ? RESIZING_CLASS_NAME : "",
       ...other,
       children
     }

package/components/extended/React-Resizable/ResizableBox/ResizeableBox.styles.d.ts

@@ -1,2 +1,2 @@
-import { ResizableBoxStyles } from './types';
+import { ResizableBoxStyles } from '../ResizableBox/types';
 export declare const resizableBoxStyles: ResizableBoxStyles;

package/components/extended/React-Resizable/ResizableBox/ResizeableBox.styles.js

@@ -1,10 +1,14 @@
 import { g as getReactResizableStyles } from "../helpers.js";
 const resizableBoxStyles = {
   /**
-   * TODO: Documentar
+   * Styles for the ResizableBox component.
+   * @author cesar - automatic
+   * @createdAt 2024-11-01 12:04:19 - automatic
+   * @updatedAt 2024-11-01 12:04:20 - automatic
+   * @updatedUser cesar - automatic
    */
-  root: ({ theme }) => ({
-    ...getReactResizableStyles(theme),
+  root: ({ theme, ownerState }) => ({
+    ...getReactResizableStyles(theme, ownerState || {}),
     position: "absolute"
   })
 };

package/components/extended/React-Resizable/ResizableBox/tests/ResizableBox.integration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/extended/React-Resizable/ResizableBox/tests/ResizableBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/extended/React-Resizable/ResizableBox/types.d.ts

@@ -3,13 +3,44 @@ import { ResizableBoxSlots } from './slots/slots';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Theme } from '@mui/material/styles';
 import { COMPONET_KEY_COMPONENT } from './constants';
-type InternalResizeableProps = {
+/**
+ * Internal props for the ResizableBox component.
+ * [maxWidth] - Maximum width allowed for the component.
+ * [maxHeight] - Maximum height allowed for the component.
+ * [onResize] - Callback function called
+ *    when the component is resized, providing the event and resize data.
+ * @author cesar - automatic
+ * @createdAt 2024-11-01 16:20:26 - automatic
+ * @updatedAt 2024-11-05 10:30:25 - automatic
+ * @updatedUser cesar - automatic
+ */
+type InternalResizableProps = {
     maxWidth?: number;
-    maxHeigth?: number;
+    maxHeight?: number;
     onResize?: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
 };
-export type ResizeableProps = InternalResizeableProps & Partial<ResizableBoxProps>;
+/**
+ * Public props for the ResizableBox component, extending the props from
+ * 'react-resizable' and adding internal properties.
+ * [maxWidth] - Maximum width allowed for the component.
+ * [maxHeight] - Maximum height allowed for the component.
+ * [onResize] - Callback function called
+ *    when the component is resized, providing the event and resize data.
+ * - Additional properties from ResizableBox in 'react-resizable'.
+ * - Owner state that includes properties specific to the component.
+ */
+export type ResizableProps = InternalResizableProps & Partial<ResizableBoxProps> & ResizableOwnerState;
+/**
+ * Available slots types in the ResizableBox component.
+ * - Keys of the slots defined in ResizableBoxSlots.
+ */
 export type ResizableBoxSlotsType = keyof typeof ResizableBoxSlots;
-export type ResizableOwnerState = {};
+/**
+ * Owner state of the ResizableBox component.
+ * [disabled] - Indicates whether the component is disabled.
+ */
+export type ResizableOwnerState = {
+    disabled?: boolean;
+};
 export type ResizableBoxStyles = Partial<OverridesStyleRules<ResizableBoxSlotsType, typeof COMPONET_KEY_COMPONENT, Theme> | undefined> | undefined;
 export {};

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

@@ -1,80 +1,197 @@
 import { Theme } from '@mui/material';
 /**
- * TODO: Documentar
+ * Styles for the react-resizable component, defining handle appearance and position.
+ * @param theme - MUI theme object for consistent styling.
+ * @param ownerState - Object containing the component's state, particularly the `disabled` state.
+ * @returns CSS styles applied to the component based on `disabled` state.
+ *
+ * - `backgroundColor` and `cursor` change depending on the `disabled` state.
+ * - Handles (`.react-resizable-handle`) are displayed or hidden based on `disabled`.
+ * - Specific styles are applied for each handle position (`sw`, `se`, `nw`, etc.) with rotational adjustments.
+ *
+ * Note: If resizing is not enabled, handles are hidden.
+ * @author cesar - automatic
+ * @createdAt 2024-11-01 08:30:26 - automatic
+ * @updatedAt 2024-11-06 10:50:22 - automatic
+ * @updatedUser cesar - automatic
  */
-export declare const getReactResizableStyles: (theme: Theme) => {
+export declare const getReactResizableStyles: (theme: Theme, ownerState: {
+    disabled?: boolean;
+}) => {
     position: string;
     backgroundColor: string;
-    cursor: string;
-    prop2: number;
+    cursor: string | undefined;
     '&.react-resizable': {
         position: string;
-    };
-    '& .react-resizable-handle': {
-        position: string;
-        width: string;
-        height: string;
-        boxSizing: string;
-        border: string;
-        padding: string;
-        margin: string;
-        borderBottomRightRadius: string;
-    };
-    '& .react-resizable-handle.react-resizable-hide': {
-        display: string;
-    };
-    '& .react-resizable-handle-sw, .react-resizable-handle-se, .react-resizable-handle-nw, .react-resizable-handle-ne': {
-        borderRight: string;
-        borderBottom: string;
+        '& .react-resizable-handle': {
+            display: string;
+        };
+        '&:hover .react-resizable-handle, &.M4L-resizing .react-resizable-handle': {
+            display: string;
+        };
     };
     '& .react-resizable-handle-sw': {
+        transform: string;
         bottom: string;
         left: string;
+        borderTop: string;
+        borderRight: string;
         cursor: string;
-        transform: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
         position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-se': {
+        transform: string;
         bottom: string;
         right: string;
+        borderTop: string;
+        borderLeft: string;
         cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-nw': {
+        transform: string;
         top: string;
         left: string;
+        borderBottom: string;
+        borderRight: string;
         cursor: string;
-        transform: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-ne': {
-        top: string;
-        right: string;
-        cursor: string;
         transform: string;
-    };
-    '& .react-resizable-handle-w, .react-resizable-handle-e': {
         top: string;
-        marginTop: string;
+        right: string;
+        borderBottom: string;
+        borderLeft: string;
         cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-w': {
+        top: string;
         left: string;
+        transform: string;
+        borderTop: string;
         borderLeft: string;
+        borderRight: string;
+        cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-e': {
+        top: string;
         right: string;
+        transform: string;
+        borderTop: string;
+        borderLeft: string;
         borderRight: string;
-    };
-    '& .react-resizable-handle-n,.react-resizable-handle-s': {
-        left: string;
-        marginLeft: string;
         cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-n': {
         top: string;
+        left: string;
+        transform: string;
         borderTop: string;
+        borderLeft: string;
+        borderRight: string;
+        cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
     '& .react-resizable-handle-s': {
         bottom: string;
-        borderBottom: string;
+        left: string;
+        transform: string;
+        borderTop: string;
+        borderLeft: string;
+        borderRight: string;
+        cursor: string;
+        width: string;
+        height: string;
+        borderStyle: string;
+        borderWidth: string;
+        display: string;
+        borderColor: string;
+        borderRadius: string;
+        backgroundImage: string;
+        position: string;
+        boxSizing: string;
+        padding: string;
+        margin: string;
     };
 };