@m4l/components 9.4.17 → 9.4.19

package/components/extended/React-resizable-panels/slots/SplitLayoutSlots.d.ts

@@ -14,7 +14,7 @@ export declare const SplitLayoutRootStyled: import('@emotion/styled').StyledComp
 } & import('react').RefAttributes<import('react-resizable-panels').ImperativePanelGroupHandle>, "children" | "title" | "storage" | "id" | "direction" | "color" | "content" | "translate" | "className" | "style" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoSaveId" | "keyboardResizeBy" | "onLayout" | "tagName" | keyof import('react').RefAttributes<import('react-resizable-panels').ImperativePanelGroupHandle>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const SplitMasterStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLAnchorElement | HTMLTableElement | HTMLStyleElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+export declare const SplitMasterStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLTableElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -33,7 +33,7 @@ export declare const SplitMasterStyled: import('@emotion/styled').StyledComponen
 } & import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>, "children" | "title" | "id" | "color" | "content" | "order" | "translate" | "className" | "style" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultSize" | "onResize" | "minSize" | "maxSize" | "tagName" | "collapsedSize" | "collapsible" | "onCollapse" | "onExpand" | keyof import('react').RefAttributes<import('react-resizable-panels').ImperativePanelHandle>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SplitLayoutOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const SplitDetailStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLAnchorElement | HTMLTableElement | HTMLStyleElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+export declare const SplitDetailStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('react').HTMLAttributes<HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLObjectElement | HTMLMapElement | HTMLLinkElement | HTMLTitleElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLDataElement | HTMLHeadElement | HTMLBaseElement | HTMLHeadingElement | HTMLBodyElement | HTMLButtonElement | HTMLTableElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLQuoteElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Componente RHFDaysOfWeekPicker que integra DaysOfWeekPicker con react-hook-form.
+ *
+ * Este componente permite seleccionar días de la semana en un formulario controlado
+ * por react-hook-form, proporcionando validación automática y manejo de estados.
+ *
+ * ### Características:
+ * - **Integración con RHF**: Se integra automáticamente con react-hook-form mediante el HOC withRHFController
+ * - **Validación**: Soporta validación mediante esquemas de validación (Yup, Zod, etc.)
+ * - **Estados del formulario**: Se deshabilita automáticamente durante el envío del formulario
+ * - **Label y errores**: El HOC maneja automáticamente el Label y los mensajes de error
+ * @example
+ * ```tsx
+ * const schema = Yup.object({
+ *   days: Yup.array().min(1, 'Debe seleccionar al menos un día').required('Campo requerido'),
+ * });
+ *
+ * <RHFDaysOfWeekPicker
+ *   name="days"
+ *   label="Días de la semana"
+ *   mandatory
+ *   disabledDays={[6]} // Deshabilita domingo
+ * />
+ * ```
+ */
+export declare const RHFDaysOfWeekPicker: import('react').ForwardRefExoticComponent<Omit<import('../../DaysOfWeekPicker').DaysOfWeekPickerProps & import('react').RefAttributes<HTMLDivElement> & import('../../../hocs').BaseRHFProps<import('react-hook-form').FieldValues>, "ref"> & import('react').RefAttributes<any>>;

package/components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js

@@ -0,0 +1,6 @@
+import { w as withRHFController } from "../../../hocs/withRHFController/index.js";
+import { D as DaysOfWeekPicker } from "../../DaysOfWeekPicker/DaysOfWeekPicker.js";
+const RHFDaysOfWeekPicker = withRHFController(DaysOfWeekPicker);
+export {
+  RHFDaysOfWeekPicker as R
+};

package/components/hook-form/RHFDaysOfWeekPicker/index.d.ts

@@ -0,0 +1 @@
+export { RHFDaysOfWeekPicker } from './RHFDaysOfWeekPicker';

package/components/hook-form/RHFDaysOfWeekPicker/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/index.d.ts

@@ -8,6 +8,7 @@ export * from './RHFCheckableList';
 export { RHFDateTime } from './RHFDateTime';
 export { RHFDateTimePicker } from './RHFDateTimePicker';
 export { RHFDatePicker } from './RHFDatePicker';
+export * from './RHFDaysOfWeekPicker';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';

package/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './CommonActions/';
 export * from './ContainerFlow';
 export * from './CommonActions/dictionary';
 export * from './datagrids';
+export * from './DaysOfWeekPicker';
 export * from './DragResizeWindowRND';
 export * from './DynamicFilter';
 export * from './DynamicSort';

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { u as useAutocomplete } from "./hooks/useAutocomplete/useAutocomplete.js";
+import { A as AUTOCOMPLETE_CLASSES } from "./constants.js";
+import clsx from "clsx";
 import { S as SkeletonAutocompleteStyled, A as AutocompleteRootStyled } from "./slots/AutocompleteSlots.js";
 import { P as PopperComponent } from "./subcomponents/PopperComponent/PopperComponent.js";
 import { N as NoOptionsText } from "./subcomponents/NoOptionsText/NoOptionsText.js";
@@ -11,7 +13,8 @@ function AutocompleteComponent(props, ref) {
     disabled,
     loading,
     onChangeFilterParmsLocal,
-    multiple
+    multiple,
+    className
   } = props;
   const {
     // propiedades de useAutocomplete
@@ -37,19 +40,20 @@ function AutocompleteComponent(props, ref) {
     return /* @__PURE__ */ jsx(
       SkeletonAutocompleteStyled,
       {
-        ownerState: { ...ownerState }
+        ownerState
       }
     );
   }
   return /* @__PURE__ */ jsx(
     AutocompleteRootStyled,
     {
-      ownerState: { ...ownerState },
+      ownerState,
       multiple,
       onKeyDown: checkKeyDown,
       size: currentSize,
       ref,
       forcePopupIcon: false,
+      className: clsx(className, multiple && AUTOCOMPLETE_CLASSES.multiple),
       autoSelect: false,
       options,
       getOptionLabel: getOptionLabelLocal,

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -1,22 +1,39 @@
+import { k as keyframes } from "../../../not_recognized/index.js";
 import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { A as AUTOCOMPLETE_CLASSES } from "./constants.js";
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
 const autocompleteSyles = {
   /**
    * Styles for the root component.
    */
-  root: ({ theme }) => ({
-    width: "100%",
-    padding: 0,
-    "& .M4LImage-root": {
-      width: theme.vars.size.baseSpacings["sp3-5"],
-      height: theme.vars.size.baseSpacings["sp3-5"]
-    },
-    "& .MuiInputBase-input": {
-      "&::placeholder": {
-        color: theme.vars.palette.text.disabled,
-        opacity: 1
+  root: ({ theme, ownerState }) => {
+    return {
+      width: "100%",
+      padding: 0,
+      "& .M4LImage-root": {
+        width: theme.vars.size.baseSpacings["sp3-5"],
+        height: theme.vars.size.baseSpacings["sp3-5"]
+      },
+      "& .MuiInputBase-input": {
+        ...ownerState?.multiple && {
+          gridArea: "c",
+          marginTop: theme.vars.size.baseSpacings.sp1,
+          marginBottom: theme.vars.size.baseSpacings.sp1
+        },
+        "&::placeholder": {
+          color: theme.vars.palette.text.disabled,
+          opacity: 1
+        }
       }
-    }
-  }),
+    };
+  },
   /**
    * Styles for the icon button component.
    */
@@ -32,19 +49,23 @@ const autocompleteSyles = {
         backgroundColor: "unset!important",
         outline: "none!important"
       }
+    },
+    // Animación de rotación para el botón de refresh
+    [`&.${AUTOCOMPLETE_CLASSES.refreshRotating}`]: {
+      "& .M4LIcon-icon": {
+        animation: `${rotate360} 0.6s ease-in-out`
+      }
     }
   }),
   /**
    * Styles for the input component.
    */
-  adorments: ({ theme }) => ({
+  adorments: ({ ownerState }) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1,
-    position: "absolute",
-    right: 0,
-    top: 0,
-    bottom: 0
+    ...ownerState?.multiple && {
+      gridArea: "d"
+    }
   }),
   /**
    * Styles for the typography component.
@@ -81,20 +102,20 @@ const autocompleteSyles = {
    * Styles for the text field component.
    */
   textField: ({ theme, ownerState }) => {
-    const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
-    const sp5 = theme?.vars?.size?.baseSpacings?.sp5 || "16px";
-    const sp7 = theme?.vars?.size?.baseSpacings?.sp7 || "24px";
     return {
       height: "auto !important",
       position: "relative",
       "&& .MuiInputBase-root": {
-        ...ownerState?.startAdornment ? {
-          padding: `${sp1} ${sp7} ${sp1} ${sp5}!important`
-        } : {
-          padding: `${sp1} ${sp7} ${sp1} ${sp1}!important`
+        gap: theme.vars.size.baseSpacings.sp1,
+        ...ownerState?.multiple && {
+          gap: "unset",
+          display: "grid",
+          columnGap: theme.vars.size.baseSpacings.sp1,
+          gridTemplateColumns: "auto 1fr auto",
+          gridTemplateAreas: ownerState?.hasChips ? `"a b d"
+             "a c d"` : `"a c d"
+             "a c d"`
         },
-        gap: sp1,
-        flexWrap: "wrap",
         "&& > input": {
           width: "100%",
           textOverflow: "ellipsis",
@@ -156,13 +177,20 @@ const autocompleteSyles = {
   /**
    * Styles for the container multiple values component.
    */
-  containerMultipleValues: () => ({
-    display: "flex",
-    overflow: "auto",
-    width: "100%",
-    flex: 1,
-    maxHeight: "80px"
-  }),
+  containerMultipleValues: ({ theme, ownerState }) => {
+    return {
+      display: "flex",
+      overflow: "auto",
+      width: "100%",
+      flex: 1,
+      maxHeight: "80px",
+      marginTop: theme.vars.size.baseSpacings.sp1,
+      marginBottom: theme.vars.size.baseSpacings.sp1,
+      ...ownerState?.multiple && {
+        gridArea: "b"
+      }
+    };
+  },
   /**
    * Styles for the container wrapper component.
    */
@@ -174,21 +202,24 @@ const autocompleteSyles = {
   /**
    * Styles for the wrapper start adornment component.
    */
-  wrapperStartAdornment: ({ theme }) => {
-    const sp1 = theme?.vars?.size?.baseSpacings?.sp1 || "4px";
+  wrapperStartAdornment: ({ theme, ownerState }) => {
     return {
       width: "fit-content",
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
+      ...ownerState?.multiple && {
+        gridArea: "a"
+      },
       display: "flex",
-      flexDirection: "column",
+      gap: theme.vars.size.baseSpacings.sp3,
       justifyContent: "center",
-      alignItems: "center",
-      padding: `0px ${sp1}`
+      alignItems: "center"
     };
-  }
+  },
+  /**
+   * Styles for the wrapper end adornment component.
+   */
+  wrapperEndAdornment: ({ theme }) => ({
+    marginRight: theme.vars.size.baseSpacings.sp3
+  })
 };
 export {
   autocompleteSyles as a

package/components/mui_extended/Autocomplete/constants.d.ts

@@ -1,3 +1,4 @@
+import { AutocompleteComplementaryClasses, AutocompleteSlots } from './slots/AutocompleteEnum';
 /**
  * Clave de identificación del componente Autocomplete dentro del sistema.
  *
@@ -7,3 +8,25 @@
  */
 export declare const AUTOCOMPLETE_KEY_COMPONENT = "M4LAutocomplete";
 export declare const AUTOCOMPLETE_CLASS_NAME_SPECIFY = "M4LclasssAutocompleCssSpecificity";
+export declare const AUTCOMPLETE_COMBINED_CLASSES: {
+    multiple: AutocompleteComplementaryClasses.multiple;
+    refreshRotating: AutocompleteComplementaryClasses.refreshRotating;
+    root: AutocompleteSlots.root;
+    chip: AutocompleteSlots.chip;
+    popper: AutocompleteSlots.popper;
+    typography: AutocompleteSlots.typography;
+    adorments: AutocompleteSlots.adorments;
+    iconButton: AutocompleteSlots.iconButton;
+    menuItem: AutocompleteSlots.menuItem;
+    menuList: AutocompleteSlots.menuList;
+    skeletonAutocomplete: AutocompleteSlots.skeletonAutocomplete;
+    circularProgress: AutocompleteSlots.circularProgress;
+    textField: AutocompleteSlots.textField;
+    image: AutocompleteSlots.image;
+    renderInputText: AutocompleteSlots.renderInputText;
+    containerMultipleValues: AutocompleteSlots.containerMultipleValues;
+    containerWrapper: AutocompleteSlots.containerWrapper;
+    wrapperStartAdornment: AutocompleteSlots.wrapperStartAdornment;
+    wrapperEndAdornment: AutocompleteSlots.wrapperEndAdornment;
+};
+export declare const AUTOCOMPLETE_CLASSES: Record<"menuItem" | "typography" | "image" | "root" | "popper" | "multiple" | "menuList" | "iconButton" | "circularProgress" | "chip" | "adorments" | "skeletonAutocomplete" | "textField" | "renderInputText" | "containerMultipleValues" | "containerWrapper" | "wrapperStartAdornment" | "wrapperEndAdornment" | "refreshRotating", string>;

package/components/mui_extended/Autocomplete/constants.js

@@ -1,4 +1,12 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { A as AutocompleteComplementaryClasses, a as AutocompleteSlots } from "./slots/AutocompleteEnum.js";
 const AUTOCOMPLETE_KEY_COMPONENT = "M4LAutocomplete";
+const AUTCOMPLETE_COMBINED_CLASSES = {
+  ...AutocompleteSlots,
+  ...AutocompleteComplementaryClasses
+};
+const AUTOCOMPLETE_CLASSES = getComponentClasses(AUTOCOMPLETE_KEY_COMPONENT, AUTCOMPLETE_COMBINED_CLASSES);
 export {
-  AUTOCOMPLETE_KEY_COMPONENT as A
+  AUTOCOMPLETE_CLASSES as A,
+  AUTOCOMPLETE_KEY_COMPONENT as a
 };

package/components/mui_extended/Autocomplete/hooks/useAutocomplete/useAutocomplete.js

@@ -41,6 +41,7 @@ function useAutocomplete(props) {
   const { currentSize } = useComponentSize(size);
   const isSkeleton = useModuleSkeleton();
   const hasStartAdornment = !!props.startAdornment;
+  const hasChips = Boolean(multiple && Array.isArray(selectedValue) && selectedValue.length > 0);
   const ownerState = useMemo(() => ({
     size: currentSize,
     variant,
@@ -48,8 +49,9 @@ function useAutocomplete(props) {
     multiple: Boolean(multiple),
     error,
     readOnly,
-    startAdornment: hasStartAdornment
-  }), [currentSize, variant, disabled, multiple, error, readOnly, hasStartAdornment]);
+    startAdornment: hasStartAdornment,
+    hasChips
+  }), [currentSize, variant, disabled, multiple, error, readOnly, hasStartAdornment, hasChips]);
   const multipleChips = useMultipleChips({
     selectedValue,
     multiple,
@@ -71,7 +73,10 @@ function useAutocomplete(props) {
     disabled,
     onOpenLocal,
     open,
-    readOnly
+    readOnly,
+    multiple,
+    selectedValue,
+    getOptionEndAdornment
   });
   const memoizedRenderOption = useCallback((renderProps, option) => {
     const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
@@ -100,7 +105,7 @@ function useAutocomplete(props) {
       RenderInputStyled,
       {
         variant,
-        ownerState: { ...ownerState },
+        ownerState,
         InputLabelProps: {
           ...InputLabelProps,
           shrink: true

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.d.ts

@@ -1,4 +1,5 @@
-import { AutocompleteOwnerState } from '../types';
+import { default as React } from 'react';
+import { AutocompleteOwnerState, ResourceType } from '../types';
 export type UseAdornmentsProps = {
     loading?: boolean;
     adjustedSize: 'small' | 'medium';
@@ -9,6 +10,9 @@ export type UseAdornmentsProps = {
     onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
     open: boolean;
     readOnly?: boolean;
+    multiple?: boolean;
+    selectedValue: any | any[] | null;
+    getOptionEndAdornment?: (option: any) => ResourceType;
 };
 /**
  * Hook para el componente Autocomplete local

package/components/mui_extended/Autocomplete/hooks/useEndAdornments.js

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { r as renderAdornment } from "../subcomponents/RenderAdornment/RenderAdornment.js";
+import { A as AUTOCOMPLETE_CLASSES } from "../constants.js";
 import { ArrowRefreshSmOutlined, ArrowChevronSmDownOutlined } from "@m4l/icons";
-import { a as AdormentsStyled, C as CircularProgressStyled, I as IconButtonStyled } from "../slots/AutocompleteSlots.js";
+import { a as AdormentsStyled, W as WrapperEndAdornmentStyled, C as CircularProgressStyled, I as IconButtonStyled } from "../slots/AutocompleteSlots.js";
 function useEndAdornments(props) {
   const {
     loading,
@@ -11,32 +14,61 @@ function useEndAdornments(props) {
     disabled,
     onOpenLocal,
     open,
-    readOnly
+    readOnly,
+    multiple,
+    selectedValue,
+    getOptionEndAdornment
   } = props;
-  return /* @__PURE__ */ jsxs(AdormentsStyled, { children: [
+  const [isRotating, setIsRotating] = useState(false);
+  const handleRefreshWithAnimation = () => {
+    setIsRotating(true);
+    handleRefresh();
+    setTimeout(() => {
+      setIsRotating(false);
+    }, 600);
+  };
+  const memoizedEndAdornment = useMemo(() => {
+    if (multiple || !selectedValue || Array.isArray(selectedValue) && selectedValue.length === 0) {
+      return null;
+    }
+    const selectedOption = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
+    const endAdornmentResource = getOptionEndAdornment?.(selectedOption);
+    if (endAdornmentResource) {
+      return renderAdornment(endAdornmentResource, adjustedSize);
+    }
+    return null;
+  }, [
+    multiple,
+    selectedValue,
+    getOptionEndAdornment,
+    adjustedSize
+  ]);
+  return /* @__PURE__ */ jsxs(AdormentsStyled, { ownerState, children: [
+    !multiple && memoizedEndAdornment && /* @__PURE__ */ jsx(WrapperEndAdornmentStyled, { children: memoizedEndAdornment }),
     loading ? /* @__PURE__ */ jsx(
       CircularProgressStyled,
       {
-        ownerState: { ...ownerState },
+        ownerState,
         size: adjustedSize
       }
     ) : refresh ? /* @__PURE__ */ jsx(
       IconButtonStyled,
       {
-        ownerState: { ...ownerState },
+        ownerState,
         src: /* @__PURE__ */ jsx(ArrowRefreshSmOutlined, {}),
-        onClick: !readOnly ? handleRefresh : void 0,
-        disabled,
-        size: adjustedSize
+        onClick: !readOnly ? handleRefreshWithAnimation : void 0,
+        disabled: disabled || readOnly,
+        size: adjustedSize,
+        className: isRotating ? AUTOCOMPLETE_CLASSES.refreshRotating : ""
       }
     ) : null,
     /* @__PURE__ */ jsx(
       IconButtonStyled,
       {
-        ownerState: { ...ownerState },
+        ownerState,
         icon: /* @__PURE__ */ jsx(ArrowChevronSmDownOutlined, {}),
         onClick: (event) => !readOnly ? onOpenLocal(event) : void 0,
-        disabled,
+        disabled: disabled || readOnly,
         size: adjustedSize,
         rotationAngle: open ? 180 : 0,
         "aria-label": "toggle Autocomplete"

package/components/mui_extended/Autocomplete/hooks/useMultipleChips.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useMemo } from "react";
 import { r as renderAdornment } from "../subcomponents/RenderAdornment/RenderAdornment.js";
-import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, W as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
+import { b as ContainerMultipleValuesStyled, c as ContainerWrapperStyled, d as ChipStyled, e as WrapperStartAdornmentStyled } from "../slots/AutocompleteSlots.js";
 function useMultipleChips(props) {
   const {
     selectedValue,
@@ -53,11 +53,27 @@ function useMultipleChips(props) {
     getOptionEndAdornment,
     adjustedSize
   ]);
+  const memoizedStartAdornment = useMemo(() => {
+    if (multiple || !selectedValue || Array.isArray(selectedValue) && selectedValue.length === 0) {
+      return null;
+    }
+    const selectedOption = Array.isArray(selectedValue) ? selectedValue[0] : selectedValue;
+    const startAdornmentResource = getOptionStartAdornment?.(selectedOption);
+    if (startAdornmentResource) {
+      return renderAdornment(startAdornmentResource, adjustedSize);
+    }
+    return null;
+  }, [
+    multiple,
+    selectedValue,
+    getOptionStartAdornment,
+    adjustedSize
+  ]);
   const internalAdornments = useMemo(() => {
-    if (!(Array.isArray(selectedValue) && multiple)) {
+    if (!(Array.isArray(selectedValue) && multiple && selectedValue.length > 0)) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
+    return /* @__PURE__ */ jsx(ContainerMultipleValuesStyled, { ownerState, role: "list", "aria-label": "Selected options", children: /* @__PURE__ */ jsx(ContainerWrapperStyled, { children: selectedValue.map((option, index) => {
       const optionKey = getOptionLabelLocal(option);
       return /* @__PURE__ */ jsx(
         ChipStyled,
@@ -67,7 +83,7 @@ function useMultipleChips(props) {
           opacity: true,
           onDeleted: () => handleDelete(option),
           disabledDeleteButton: disabled,
-          ownerState: { ...ownerState },
+          ownerState,
           startIcon: memoizedIcons?.get(`${optionKey}-start`),
           endIcon: memoizedIcons?.get(`${optionKey}-end`)
         },
@@ -86,12 +102,15 @@ function useMultipleChips(props) {
   ]);
   if (startAdornmentClone && internalAdornments) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone }),
+      /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", ownerState, children: startAdornmentClone }),
       internalAdornments
     ] });
   }
   if (startAdornmentClone) {
-    return /* @__PURE__ */ jsx(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", children: startAdornmentClone });
+    return /* @__PURE__ */ jsxs(WrapperStartAdornmentStyled, { role: "img", "aria-hidden": "true", ownerState, children: [
+      startAdornmentClone,
+      !multiple && memoizedStartAdornment
+    ] });
   }
   if (!getOptionLabelLocal) {
     console.error("useStartAdornments: getOptionLabelLocal is required");

package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.d.ts

@@ -14,5 +14,10 @@ export declare enum AutocompleteSlots {
     renderInputText = "renderInputText",
     containerMultipleValues = "containerMultipleValues",
     containerWrapper = "containerWrapper",
-    wrapperStartAdornment = "wrapperStartAdornment"
+    wrapperStartAdornment = "wrapperStartAdornment",
+    wrapperEndAdornment = "wrapperEndAdornment"
+}
+export declare enum AutocompleteComplementaryClasses {
+    multiple = "multiple",
+    refreshRotating = "refresh-rotating"
 }

package/components/mui_extended/Autocomplete/slots/AutocompleteEnum.js

@@ -15,8 +15,15 @@ var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
   AutocompleteSlots2["containerMultipleValues"] = "containerMultipleValues";
   AutocompleteSlots2["containerWrapper"] = "containerWrapper";
   AutocompleteSlots2["wrapperStartAdornment"] = "wrapperStartAdornment";
+  AutocompleteSlots2["wrapperEndAdornment"] = "wrapperEndAdornment";
   return AutocompleteSlots2;
 })(AutocompleteSlots || {});
+var AutocompleteComplementaryClasses = /* @__PURE__ */ ((AutocompleteComplementaryClasses2) => {
+  AutocompleteComplementaryClasses2["multiple"] = "multiple";
+  AutocompleteComplementaryClasses2["refreshRotating"] = "refresh-rotating";
+  return AutocompleteComplementaryClasses2;
+})(AutocompleteComplementaryClasses || {});
 export {
-  AutocompleteSlots as A
+  AutocompleteComplementaryClasses as A,
+  AutocompleteSlots as a
 };

package/components/mui_extended/Autocomplete/slots/AutocompleteSlots.d.ts

@@ -48,3 +48,6 @@ export declare const ContainerMultipleValuesStyled: import('@emotion/styled').St
 export declare const ContainerWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').AutocompleteOwnerState> & 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 WrapperEndAdornmentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;